Add audio notification choices to subscriptions

packages/rocketchat-lib/server/models/Subscriptions.coffee

@@ -12,6 +12,7 @@ class ModelSubscriptions extends RocketChat.models._Base
 		@tryEnsureIndex { 'unread': 1 }
 		@tryEnsureIndex { 'ts': 1 }
 		@tryEnsureIndex { 'ls': 1 }
+		@tryEnsureIndex { 'audioNotifications': 1 }, { sparse: 1 }
 		@tryEnsureIndex { 'desktopNotifications': 1 }, { sparse: 1 }
 		@tryEnsureIndex { 'mobilePushNotifications': 1 }, { sparse: 1 }
 		@tryEnsureIndex { 'emailNotifications': 1 }, { sparse: 1 }

packages/rocketchat-push-notifications/client/stylesheets/pushNotifications.less

@@ -28,7 +28,7 @@
 			text-align: center;
 		}
 
-		[data-edit] {
+		[data-edit], [data-play] {
 			cursor: pointer;
 		}
 	}

packages/rocketchat-push-notifications/client/views/pushNotificationsFlexTab.html

@@ -6,6 +6,26 @@
 			</div>
 			<form>
 				<ul class="list clearfix">
+					<li>
+						<label>{{_ "Audio"}}</label>
+						<div>
+							{{#if editing 'audioNotifications'}}
+								<label>
+									<select name="audioNotifications" class="audio">
+										<option value="none" selected="{{$eq audioNotifications 'none'}}">{{_ "None"}}</option>
+										<option value="defaultAudioNotification" selected="{{$eq audioNotifications 'defaultAudioNotification'}}">{{_ "Default"}}</option>
+										{{#each audioAssets}}
+											<option value="{{_id}}" selected="{{$eq audioNotifications _id}}">{{name}}</option>
+										{{/each}}
+									</select>
+								</label>
+								<button type="button" class="button cancel">{{_ "Cancel"}}</button>
+								<button type="button" class="button primary save">{{_ "Save"}}</button>
+							{{else}}
+								<span class="current-setting">{{audioValue}} <i class="icon-play-circled" data-play="{{audioNotifications}}"></i> <i class="icon-pencil" data-edit="audioNotifications"></i></span>
+							{{/if}}
+						</div>
+					</li>
 					<li>
 						<label>{{_ "Desktop"}}</label>
 						<div>

packages/rocketchat-push-notifications/client/views/pushNotificationsFlexTab.js

@@ -1,7 +1,21 @@
 import toastr from 'toastr';
-/* globals ChatSubscription */
+/* globals ChatSubscription, KonchatNotification */
 
 Template.pushNotificationsFlexTab.helpers({
+	audioAssets() {
+		return KonchatNotification.audioAssets;
+	},
+	audioNotifications() {
+		const sub = ChatSubscription.findOne({
+			rid: Session.get('openedRoom')
+		}, {
+			fields: {
+				audioNotifications: 1
+			}
+		});
+		return sub ? sub.audioNotifications : 'defaultAudioNotification';
+	},
+
 	desktopNotifications() {
 		var sub = ChatSubscription.findOne({
 			rid: Session.get('openedRoom')
@@ -70,6 +84,24 @@ Template.pushNotificationsFlexTab.helpers({
 		}
 		return t('Use_account_preference');
 	},
+	audioValue() {
+		const sub = ChatSubscription.findOne({
+			rid: Session.get('openedRoom')
+		}, {
+			fields: {
+				audioNotifications: 1
+			}
+		});
+		const audio = sub ? sub.audioNotifications : 'defaultAudioNotification';
+		if (audio === 'none') {
+			return t('None');
+		} else if (audio === 'defaultAudioNotification') {
+			return t('Default');
+		} else {
+			const asset = _.findWhere(KonchatNotification.audioAssets, { _id: audio });
+			return asset && asset.name;
+		}
+	},
 	subValue(field) {
 		var sub = ChatSubscription.findOne({
 			rid: Session.get('openedRoom')
@@ -124,17 +156,30 @@ Template.pushNotificationsFlexTab.onCreated(function() {
 	this.editing = new ReactiveVar();
 
 	this.validateSetting = (field) => {
-		const value = this.$('input[name='+ field +']:checked').val();
-		if (['all', 'mentions', 'nothing', 'default'].indexOf(value) === -1) {
-			toastr.error(t('Invalid_notification_setting_s', value || ''));
-			return false;
+		switch (field) {
+			case 'audioNotifications':
+				return true;
+			default:
+				const value = this.$('input[name='+ field +']:checked').val();
+				if (['all', 'mentions', 'nothing', 'default'].indexOf(value) === -1) {
+					toastr.error(t('Invalid_notification_setting_s', value || ''));
+					return false;
+				}
+				return true;
 		}
-		return true;
 	};
 
 	this.saveSetting = () => {
 		const field = this.editing.get();
-		const value = this.$('input[name='+ field +']:checked').val();
+		let value;
+		switch (field) {
+			case 'audioNotifications':
+				value = this.$('select[name='+field+']').val();
+				break;
+			default:
+				value = this.$('input[name='+ field +']:checked').val();
+				break;
+		}
 		const duration = $('input[name=duration]').val();
 		if (this.validateSetting(field)) {
 			Meteor.call('saveNotificationSettings', Session.get('openedRoom'), field, value, (err/*, result*/) => {
@@ -178,5 +223,27 @@ Template.pushNotificationsFlexTab.events({
 	'click .save'(e, instance) {
 		e.preventDefault();
 		instance.saveSetting();
+	},
+
+	'click [data-play]'(e) {
+		e.preventDefault();
+		let audio = $(e.currentTarget).data('play');
+		if (audio && audio !== 'none') {
+			let $audio = $('#' + audio);
+			if ($audio && $audio[0] && $audio[0].play) {
+				$audio[0].play();
+			}
+		}
+	},
+
+	'change select[name=audioNotifications]'(e) {
+		e.preventDefault();
+		let audio = $(e.currentTarget).val();
+		if (audio && audio !== 'none') {
+			let $audio = $('#' + audio);
+			if ($audio && $audio[0] && $audio[0].play) {
+				$audio[0].play();
+			}
+		}
 	}
 });

packages/rocketchat-push-notifications/server/methods/saveNotificationSettings.js

@@ -8,11 +8,11 @@ Meteor.methods({
 		check(field, String);
 		check(value, String);
 
-		if (['desktopNotifications', 'mobilePushNotifications', 'emailNotifications', 'unreadAlert'].indexOf(field) === -1) {
+		if (['audioNotifications', 'desktopNotifications', 'mobilePushNotifications', 'emailNotifications', 'unreadAlert'].indexOf(field) === -1) {
 			throw new Meteor.Error('error-invalid-settings', 'Invalid settings field', { method: 'saveNotificationSettings' });
 		}
 
-		if (['all', 'mentions', 'nothing', 'default'].indexOf(value) === -1) {
+		if (field !== 'audioNotifications' && ['all', 'mentions', 'nothing', 'default'].indexOf(value) === -1) {
 			throw new Meteor.Error('error-invalid-settings', 'Invalid settings value', { method: 'saveNotificationSettings' });
 		}
 
@@ -22,6 +22,9 @@ Meteor.methods({
 		}
 
 		switch (field) {
+			case 'audioNotifications':
+				RocketChat.models.Subscriptions.updateAudioNotificationsById(subscription._id, value);
+				break;
 			case 'desktopNotifications':
 				RocketChat.models.Subscriptions.updateDesktopNotificationsById(subscription._id, value);
 				break;

packages/rocketchat-push-notifications/server/models/Subscriptions.js

@@ -1,3 +1,17 @@
+RocketChat.models.Subscriptions.updateAudioNotificationsById = function(_id, audioNotifications) {
+	const query = {
+		_id: _id
+	};
+
+	const update = {
+		$set: {
+			audioNotifications: audioNotifications
+		}
+	};
+
+	return this.update(query, update);
+};
+
 RocketChat.models.Subscriptions.updateDesktopNotificationsById = function(_id, desktopNotifications) {
 	const query = {
 		_id: _id
@@ -109,6 +123,7 @@ RocketChat.models.Subscriptions.findNotificationPreferencesByRoom = function(roo
 		rid: roomId,
 		'u._id': {$exists: true},
 		$or: [
+			{audioNotifications: {$exists: true}},
 			{desktopNotifications: {$exists: true}},
 			{desktopNotificationDuration: {$exists: true}},
 			{mobilePushNotifications: {$exists: true}}

packages/rocketchat-ui/lib/notification.coffee

@@ -2,6 +2,16 @@
 @KonchatNotification =
 	notificationStatus: new ReactiveVar
 
+	audioAssets: [
+		{ '_id': 'chatBeep02', 'name': 'Beep 2', 'sources': [ { 'src': 'sounds/beep.mp3', 'type': 'audio/mpeg' } ] }
+		{ '_id': 'chatBeep03', 'name': 'Beep 3', 'sources': [ { 'src': 'sounds/ding.mp3', 'type': 'audio/mpeg' } ] }
+		{ '_id': 'chatBeep04', 'name': 'Beep 4', 'sources': [ { 'src': 'sounds/335908__littlerainyseasons__correct.mp3', 'type': 'audio/mpeg' } ] }
+		{ '_id': 'chatBeep05', 'name': 'Beep 5', 'sources': [ { 'src': 'sounds/320202__chelle19__dingmp3.mp3', 'type': 'audio/mpeg' } ] }
+		{ '_id': 'chatBeep06', 'name': 'Beep 6', 'sources': [ { 'src': 'sounds/218851__kellyconidi__highbell.mp3', 'type': 'audio/mpeg' } ] }
+		{ '_id': 'chatBeep07', 'name': 'Beep 7', 'sources': [ { 'src': 'sounds/167346__willy-ineedthatapp-com__droplet-good5.mp3', 'type': 'audio/mpeg' } ] }
+		{ '_id': 'verbal', 'name': 'Verbal Ding', 'sources': [ { 'src': 'sounds/179132__alphahog__ding.mp3', 'type': 'audio/mpeg' } ] }
+	]
+
 	# notificacoes HTML5
 	getDesktopPermission: ->
 		if window.Notification && Notification.permission != "granted" && !Meteor.settings.public.sandstorm
@@ -49,7 +59,12 @@
 
 	newMessage: ->
 		if not Session.equals('user_' + Meteor.userId() + '_status', 'busy') and Meteor.user()?.settings?.preferences?.newMessageNotification isnt false
-			$('#chatAudioNotification')[0].play()
+			sub = ChatSubscription.findOne({ rid: Session.get('openedRoom') }, { fields: { audioNotifications: 1 } });
+			if sub?.audioNotifications isnt 'none'
+				if sub?.audioNotifications
+					$("##{sub.audioNotifications}")[0].play()
+				else
+					$('#defaultAudioNotification')[0].play()
 
 	newRoom: (rid, withSound = true) ->
 		Tracker.nonreactive ->

packages/rocketchat-ui/package.js

@@ -78,6 +78,7 @@ Package.onUse(function(api) {
 	api.addFiles('views/404/roomNotFound.html', 'client');
 	api.addFiles('views/404/invalidSecretURL.html', 'client');
 	api.addFiles('views/app/audioNotification.html', 'client');
+	api.addFiles('views/app/audioNotification.js', 'client');
 	api.addFiles('views/app/burger.html', 'client');
 	api.addFiles('views/app/home.html', 'client');
 	api.addFiles('views/app/notAuthorized.html', 'client');

packages/rocketchat-ui/views/app/audioNotification.html

@@ -1,9 +1,16 @@
 <template name="audioNotification">
-	<audio id="chatAudioNotification" preload>
+	<audio id="defaultAudioNotification" preload>
 		<source src="sounds/notify.ogg" type="audio/ogg" />
 		<source src="sounds/notify.mp3" type="audio/mpeg" />
 	</audio>
 	<audio id="chatNewRoomNotification" preload>
 		<source src="sounds/door_chime.mp3" type="audio/mpeg" />
 	</audio>
+	{{#each audioAssets}}
+		<audio id="{{_id}}" preload>
+			{{#each sources}}
+				<source src="{{src}}" type="{{type}}" />
+			{{/each}}
+		</audio>
+	{{/each}}
 </template>

packages/rocketchat-ui/views/app/audioNotification.js

@@ -0,0 +1,6 @@
+/* globals KonchatNotification */
+Template.audioNotification.helpers({
+	audioAssets() {
+		return KonchatNotification.audioAssets;
+	}
+})

server/publications/subscription.coffee

@@ -12,6 +12,7 @@ fields =
 	roles: 1
 	unread: 1
 	archived: 1
+	audioNotifications: 1
 	desktopNotifications: 1
 	desktopNotificationDuration: 1
 	mobilePushNotifications: 1