[FIX] Notification sounds (#17616)

Co-authored-by: Guilherme Gazzo <guilhermegazzo@gmail.com>

app/custom-sounds/client/lib/CustomSounds.js

@@ -3,18 +3,21 @@ import { ReactiveVar } from 'meteor/reactive-var';
 import _ from 'underscore';
 
 import { CachedCollectionManager } from '../../../ui-cached-collection';
+import { getURL } from '../../../utils/client';
 
 const getCustomSoundId = (sound) => `custom-sound-${ sound }`;
 
 class CustomSoundsClass {
 	constructor() {
 		this.list = new ReactiveVar({});
-		this.add({ _id: 'beep', name: 'Beep', extension: 'mp3', src: 'sounds/beep.mp3' });
-		this.add({ _id: 'chelle', name: 'Chelle', extension: 'mp3', src: 'sounds/chelle.mp3' });
-		this.add({ _id: 'ding', name: 'Ding', extension: 'mp3', src: 'sounds/ding.mp3' });
-		this.add({ _id: 'droplet', name: 'Droplet', extension: 'mp3', src: 'sounds/droplet.mp3' });
-		this.add({ _id: 'highbell', name: 'Highbell', extension: 'mp3', src: 'sounds/highbell.mp3' });
-		this.add({ _id: 'seasons', name: 'Seasons', extension: 'mp3', src: 'sounds/seasons.mp3' });
+		this.add({ _id: 'chime', name: 'Chime', extension: 'mp3', src: getURL('sounds/chime.mp3') });
+		this.add({ _id: 'door', name: 'Door', extension: 'mp3', src: getURL('sounds/door.mp3') });
+		this.add({ _id: 'beep', name: 'Beep', extension: 'mp3', src: getURL('sounds/beep.mp3') });
+		this.add({ _id: 'chelle', name: 'Chelle', extension: 'mp3', src: getURL('sounds/chelle.mp3') });
+		this.add({ _id: 'ding', name: 'Ding', extension: 'mp3', src: getURL('sounds/ding.mp3') });
+		this.add({ _id: 'droplet', name: 'Droplet', extension: 'mp3', src: getURL('sounds/droplet.mp3') });
+		this.add({ _id: 'highbell', name: 'Highbell', extension: 'mp3', src: getURL('sounds/highbell.mp3') });
+		this.add({ _id: 'seasons', name: 'Seasons', extension: 'mp3', src: getURL('sounds/seasons.mp3') });
 	}
 
 	add(sound) {
@@ -41,9 +44,12 @@ class CustomSoundsClass {
 		const audio = $(`#${ sound._id }`);
 		if (audio && audio[0]) {
 			const list = this.list.get();
+			if (!sound.src) {
+				sound.src = this.getURL(sound);
+			}
 			list[sound._id] = sound;
 			this.list.set(list);
-			$('source', audio).attr('src', this.getURL(sound));
+			$('source', audio).attr('src', sound.src);
 			audio[0].load();
 		} else {
 			this.add(sound);
@@ -51,8 +57,7 @@ class CustomSoundsClass {
 	}
 
 	getURL(sound) {
-		const path = __meteor_runtime_config__.ROOT_URL_PATH_PREFIX || '';
-		return `${ path }/custom-sounds/${ sound._id }.${ sound.extension }?_dc=${ sound.random || 0 }`;
+		return getURL(`/custom-sounds/${ sound._id }.${ sound.extension }?_dc=${ sound.random || 0 }`);
 	}
 
 	getList() {
@@ -72,6 +77,16 @@ class CustomSoundsClass {
 
 		return audio;
 	}
+
+	pause = (sound) => {
+		const audio = document.querySelector(`#${ getCustomSoundId(sound) }`);
+		if (!audio || !audio.pause) {
+			return;
+		}
+
+		audio.pause();
+		audio.currentTime = 0;
+	}
 }
 
 export const CustomSounds = new CustomSoundsClass();

app/custom-sounds/server/startup/custom-sounds.js

@@ -1,9 +1,8 @@
 import { Meteor } from 'meteor/meteor';
 import { WebApp } from 'meteor/webapp';
-import _ from 'underscore';
 
-import { RocketChatFile } from '../../../file';
-import { settings } from '../../../settings';
+import { RocketChatFile } from '../../../file/server';
+import { settings } from '../../../settings/server';
 
 export let RocketChatFileCustomSoundsInstance;
 
@@ -35,16 +34,16 @@ Meteor.startup(function() {
 	});
 
 	return WebApp.connectHandlers.use('/custom-sounds/', Meteor.bindEnvironment(function(req, res/* , next*/) {
-		const params =			{ sound: decodeURIComponent(req.url.replace(/^\//, '').replace(/\?.*$/, '')) };
+		const fileId = decodeURIComponent(req.url.replace(/^\//, '').replace(/\?.*$/, ''));
 
-		if (_.isEmpty(params.sound)) {
+		if (!fileId) {
 			res.writeHead(403);
 			res.write('Forbidden');
 			res.end();
 			return;
 		}
 
-		const file = RocketChatFileCustomSoundsInstance.getFileWithReadStream(params.sound);
+		const file = RocketChatFileCustomSoundsInstance.getFileWithReadStream(fileId);
 		if (!file) {
 			return;
 		}
@@ -73,7 +72,7 @@ Meteor.startup(function() {
 		} else {
 			res.setHeader('Last-Modified', new Date().toUTCString());
 		}
-		res.setHeader('Content-Type', 'audio/mpeg');
+		res.setHeader('Content-Type', file.contentType);
 		res.setHeader('Content-Length', file.length);
 
 		file.readStream.pipe(res);

app/ui-master/client/main.html

@@ -45,7 +45,6 @@
 							<div class="rc-old connection-status">
 								{{> status}}
 							</div>
-							{{> audioNotification }}
 						{{/if}}
 					{{/if}}
 				{{/unless}}

app/ui/client/index.js

@@ -12,7 +12,6 @@ import './views/cmsPage.html';
 import './views/404/roomNotFound.html';
 import './views/404/invalidSecretURL.html';
 import './views/404/invalidInvite.html';
-import './views/app/audioNotification.html';
 import './views/app/burger.html';
 import './views/app/createChannel.html';
 import './views/app/editStatus.html';

app/ui/client/lib/notification.js

@@ -165,14 +165,7 @@ Meteor.startup(() => {
 				}
 			});
 		} else {
-			const [room] = $(`audio#${ newRoomNotification }`);
-			if (!room) {
-				return;
-			}
-			if (room.pause) {
-				room.pause();
-				room.currentTime = 0;
-			}
+			CustomSounds.pause(newRoomNotification);
 		}
 	});
 });

app/ui/client/views/app/audioNotification.html

@@ -1,10 +0,0 @@
-<template name="audioNotification">
-	<div id="audioFilesPreload">
-		<audio id="chime" preload>
-			<source src="sounds/chime.mp3" type="audio/mpeg" />
-		</audio>
-		<audio id="door" preload>
-			<source src="sounds/door.mp3" type="audio/mpeg" />
-		</audio>
-	</div>
-</template>

client/admin/customSounds/EditCustomSound.js

@@ -19,7 +19,7 @@ const DeleteWarningModal = ({ onDelete, onCancel, ...props }) => {
 			<Modal.Close onClick={onCancel}/>
 		</Modal.Header>
 		<Modal.Content fontScale='p1'>
-			{t('Custom_Sound_Status_Delete_Warning')}
+			{t('Custom_Sound_Delete_Warning')}
 		</Modal.Content>
 		<Modal.Footer>
 			<ButtonGroup align='end'>
@@ -49,8 +49,7 @@ const SuccessModal = ({ onClose, ...props }) => {
 	</Modal>;
 };
 
-export function EditSound({ _id, cache, ...props }) {
-	const t = useTranslation();
+export function EditCustomSound({ _id, cache, ...props }) {
 	const query = useMemo(() => ({
 		query: JSON.stringify({ _id }),
 	}), [_id]);
@@ -75,13 +74,13 @@ export function EditSound({ _id, cache, ...props }) {
 	}
 
 	if (error || !data || data.sounds.length < 1) {
-		return <Box fontScale='h1' pb='x20'>{t('Custom_User_Status_Error_Invalid_User_Status')}</Box>;
+		return <Box fontScale='h1' pb='x20'>{error}</Box>;
 	}
 
-	return <EditCustomSound data={data.sounds[0]} {...props}/>;
+	return <EditSound data={data.sounds[0]} {...props}/>;
 }
 
-export function EditCustomSound({ close, onChange, data, ...props }) {
+function EditSound({ close, onChange, data, ...props }) {
 	const t = useTranslation();
 	const dispatchToastMessage = useToastMessageDispatch();
 

client/admin/customSounds/lib.js

@@ -22,13 +22,14 @@ export function validate(soundData, soundFile) {
 }
 
 export function createSoundData(soundFile, name = '', previousData) {
-	const soundData = {};
+	const soundData = {
+		extension: soundFile.name.split('.').pop(),
+	};
 
 	if (previousData) {
 		soundData._id = previousData._id;
 		soundData.previousName = previousData.previousName;
 		soundData.previousSound = previousData.previousSound;
-		soundData.extension = soundFile.name.split('.').pop();
 		soundData.previousExtension = previousData.previousSound.extension;
 		soundData.name = name;
 		soundData.newFile = false;

packages/rocketchat-i18n/i18n/en.i18n.json

@@ -1069,6 +1069,7 @@
   "Custom_Script_On_Logout_Description": "Custom Script that will run on execute logout flow  ONLY",
   "Custom_Sound_Add": "Add Custom Sound",
   "Custom_Sound_Delete_Warning": "Deleting a sound cannot be undone.",
+  "Custom_Sound_Edit": "Edit Custom Sound",
   "Custom_Sound_Error_Invalid_Sound": "Invalid sound",
   "Custom_Sound_Error_Name_Already_In_Use": "The custom sound name is already in use.",
   "Custom_Sound_Has_Been_Deleted": "The custom sound has been deleted.",