[IMPROVE] Add CustomSounds.play() helper (#15256)

app/custom-sounds/client/admin/adminSounds.js

@@ -4,8 +4,9 @@ import { FlowRouter } from 'meteor/kadira:flow-router';
 import { Template } from 'meteor/templating';
 import s from 'underscore.string';
 
-import { CustomSounds } from '../../../models';
+import { CustomSounds as CustomSoundsModel } from '../../../models';
 import { RocketChatTabBar, SideNav, TabBar } from '../../../ui-utils';
+import { CustomSounds } from '../lib/CustomSounds';
 
 Template.adminSounds.helpers({
 	searchText() {
@@ -57,7 +58,7 @@ Template.adminSounds.helpers({
 	onTableItemClick() {
 		const instance = Template.instance();
 		return function(item) {
-			instance.tabBarData.set(CustomSounds.findOne({ _id: item._id }));
+			instance.tabBarData.set(CustomSoundsModel.findOne({ _id: item._id }));
 			instance.tabBar.showGroup('custom-sounds-selected');
 			instance.tabBar.open('admin-sound-info');
 		};
@@ -114,7 +115,7 @@ Template.adminSounds.onCreated(function() {
 
 		const limit = instance.limit != null ? instance.limit.get() : 0;
 
-		return CustomSounds.find(query, { limit, sort: { name: 1 } }).fetch();
+		return CustomSoundsModel.find(query, { limit, sort: { name: 1 } }).fetch();
 	};
 });
 
@@ -141,10 +142,7 @@ Template.adminSounds.events({
 	'click .icon-play-circled'(e) {
 		e.preventDefault();
 		e.stopPropagation();
-		const $audio = $(`audio#${ this._id }`);
-		if ($audio && $audio[0] && $audio[0].play) {
-			$audio[0].play();
-		}
+		CustomSounds.play(this._id);
 	},
 	'click .icon-pause-circled'(e) {
 		e.preventDefault();

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

@@ -57,7 +57,21 @@ class CustomSoundsClass {
 		const list = Object.values(this.list.get());
 		return _.sortBy(list, 'name');
 	}
+
+	play = (sound, { volume = 1, loop = false } = {}) => {
+		const audio = document.querySelector(`audio#${ sound }`);
+		if (!audio || !audio.play) {
+			return;
+		}
+
+		audio.volume = volume;
+		audio.loop = loop;
+		audio.play();
+
+		return audio;
+	}
 }
+
 export const CustomSounds = new CustomSoundsClass();
 
 Meteor.startup(() =>

app/livechat/client/startup/notifyUnreadRooms.js

@@ -4,34 +4,20 @@ import { Tracker } from 'meteor/tracker';
 import { settings } from '../../../settings';
 import { getUserPreference } from '../../../utils';
 import { Subscriptions, Users } from '../../../models';
+import { CustomSounds } from '../../../custom-sounds/client';
 
 let audio = null;
 
-const stop = (audio) => {
-	if (!audio) {
-		return;
-	}
-	audio.loop = false;
-	return audio.pause && audio.pause();
-};
-const play = (audio) => {
-	if (!audio) {
-		return;
-	}
-	audio.loop = true;
-	return audio.play && audio.play();
-};
-
-Meteor.startup(function() {
-	Tracker.autorun(function() {
+Meteor.startup(() => {
+	Tracker.autorun(() => {
 		if (!settings.get('Livechat_continuous_sound_notification_new_livechat_room')) {
-			stop(audio);
+			audio && audio.pause();
 			return;
 		}
 
 		const subs = Subscriptions.find({ t: 'l', ls: { $exists: 0 }, open: true }).count();
 		if (subs === 0) {
-			stop(audio);
+			audio && audio.pause();
 			return;
 		}
 
@@ -43,7 +29,6 @@ Meteor.startup(function() {
 
 		const newRoomNotification = getUserPreference(user, 'newRoomNotification');
 
-		[audio] = $(`#${ newRoomNotification }`);
-		play(audio);
+		audio = CustomSounds.play(newRoomNotification, { loop: true });
 	});
 });

app/push-notifications/client/views/pushNotificationsFlexTab.js

@@ -207,12 +207,9 @@ Template.pushNotificationsFlexTab.events({
 
 		if (value && value[0] !== 'none') {
 			const audioVolume = getUserPreference(user, 'notificationsSoundVolume');
-			const $audio = $(`audio#${ value[0] }`);
-
-			if ($audio && $audio[0] && $audio[0].play) {
-				$audio[0].volume = Number((audioVolume / 100).toPrecision(2));
-				$audio[0].play();
-			}
+			CustomSounds.play(value[0], {
+				volume: Number((audioVolume / 100).toPrecision(2)),
+			});
 		}
 	},
 

app/ui-account/client/accountPreferences.js

@@ -328,8 +328,7 @@ Template.accountPreferences.events({
 			return;
 		}
 		if (audio) {
-			const $audio = $(`audio#${ audio }`);
-			return $audio && $audio[0] && $audio[0].play();
+			CustomSounds.play(audio);
 		}
 	},
 	'click .js-dont-ask-remove'(e) {

app/ui/client/lib/notification.js

@@ -14,6 +14,7 @@ import { getUserPreference } from '../../../utils';
 import { getUserAvatarURL } from '../../../utils/lib/getUserAvatarURL';
 import { getAvatarAsPng } from '../../../ui-utils';
 import { promises } from '../../../promises/client';
+import { CustomSounds } from '../../../custom-sounds/client/lib/CustomSounds';
 
 export const KonchatNotification = {
 	notificationStatus: new ReactiveVar(),
@@ -107,17 +108,13 @@ export const KonchatNotification = {
 
 			if (sub && sub.audioNotificationValue !== 'none') {
 				if (sub && sub.audioNotificationValue) {
-					const [audio] = $(`audio#${ sub.audioNotificationValue }`);
-					if (audio && audio.play) {
-						audio.volume = Number((audioVolume / 100).toPrecision(2));
-						return audio.play();
-					}
+					CustomSounds.play(sub.audioNotificationValue, {
+						volume: Number((audioVolume / 100).toPrecision(2)),
+					});
 				} else if (newMessageNotification !== 'none') {
-					const [audio] = $(`audio#${ newMessageNotification }`);
-					if (audio && audio.play) {
-						audio.volume = Number((audioVolume / 100).toPrecision(2));
-						return audio.play();
-					}
+					CustomSounds.play(newMessageNotification, {
+						volume: Number((audioVolume / 100).toPrecision(2)),
+					});
 				}
 			}
 		}
@@ -161,11 +158,9 @@ Meteor.startup(() => {
 		if ((Session.get('newRoomSound') || []).length > 0) {
 			Meteor.defer(function() {
 				if (newRoomNotification !== 'none') {
-					const [audio] = $(`audio#${ newRoomNotification }`);
-					if (audio && audio.play) {
-						audio.volume = Number((audioVolume / 100).toPrecision(2));
-						return audio.play();
-					}
+					CustomSounds.play(newRoomNotification, {
+						volume: Number((audioVolume / 100).toPrecision(2)),
+					});
 				}
 			});
 		} else {