Subscription audio notification

.meteor/packages

@@ -50,6 +50,7 @@ rocketchat:channel-settings-mail-messages
 rocketchat:colors
 rocketchat:crowd
 rocketchat:custom-oauth
+rocketchat:custom-sounds
 rocketchat:emoji
 rocketchat:emoji-custom
 rocketchat:emoji-emojione

.meteor/versions

@@ -132,6 +132,7 @@ rocketchat:[email protected]
 rocketchat:[email protected]
 rocketchat:[email protected]
 rocketchat:[email protected]
+rocketchat:[email protected]
 rocketchat:[email protected]
 rocketchat:[email protected]
 rocketchat:[email protected]

client/notifications/notification.js

@@ -27,12 +27,12 @@ Meteor.startup(function() {
 				if (RocketChat.Layout.isEmbedded()) {
 					if (!hasFocus && messageIsInOpenedRoom) {
 						// Play a sound and show a notification.
-						KonchatNotification.newMessage();
+						KonchatNotification.newMessage(notification.payload.rid);
 						KonchatNotification.showDesktop(notification);
 					}
 				} else if (!(hasFocus && messageIsInOpenedRoom)) {
 					// Play a sound and show a notification.
-					KonchatNotification.newMessage();
+					KonchatNotification.newMessage(notification.payload.rid);
 					KonchatNotification.showDesktop(notification);
 				}
 			});

packages/rocketchat-custom-sounds/admin/adminSoundEdit.html

@@ -0,0 +1,7 @@
+<template name="adminSoundEdit">
+	<div class="content">
+		<div class="sound-view">
+			{{> soundEdit .}}
+		</div>
+	</div>
+</template>

packages/rocketchat-custom-sounds/admin/adminSoundInfo.html

@@ -0,0 +1,7 @@
+<template name="adminSoundInfo">
+	<div class="content">
+		<div class="sound-view">
+			{{> soundInfo .}}
+		</div>
+	</div>
+</template>

packages/rocketchat-custom-sounds/admin/adminSounds.html

@@ -0,0 +1,48 @@
+<template name="adminSounds">
+	<div class="main-content-flex">
+		<section class="page-container page-list flex-tab-main-content">
+			<header class="fixed-title">
+				{{> burger}}
+				<h2>
+					<span class="room-title">{{_ "Custom_Sounds"}}</span>
+				</h2>
+			</header>
+			<div class="content">
+				{{#requiresPermission 'manage-sounds'}}
+					<form class="search-form" role="form">
+						<div class="input-line search">
+							<input type="text" id="sound-filter" placeholder="{{_ "Search"}}" dir="auto">
+							<i class="icon-search"></i>
+							{{#unless isReady}}<i class="icon-spin"></i>{{/unless}}
+						</div>
+					</form>
+					<div class="results">
+						{{{_ "Showing_results" customsounds.length}}}
+					</div>
+					<div class="list">
+						<table>
+							<thead>
+								<tr>
+									<th width="100%">{{_ "Name"}}</th>
+								</tr>
+							</thead>
+							<tbody>
+								{{#each customsounds}}
+								<tr class="sound-info row-link">
+									<td>{{name}}&nbsp;<i class="icon-play-circled"></i></td>
+								</tr>
+								{{/each}}
+							</tbody>
+						</table>
+						{{#if hasMore}}
+							<button class="button secondary load-more {{isLoading}}">{{_ "Load_more"}}</button>
+						{{/if}}
+					</div>
+				{{/requiresPermission}}
+			</div>
+		</section>
+		{{#with flexData}}
+			{{> flexTabBar}}
+		{{/with}}
+	</div>
+</template>

packages/rocketchat-custom-sounds/admin/adminSounds.js

@@ -0,0 +1,132 @@
+/* globals isSetNotNull, RocketChatTabBar */
+Template.adminSounds.helpers({
+	isReady() {
+		if (isSetNotNull(() => Template.instance().ready)) {
+			return Template.instance().ready.get();
+		}
+		return undefined;
+	},
+	customsounds() {
+		return Template.instance().customsounds();
+	},
+	isLoading() {
+		if (isSetNotNull(() => Template.instance().ready)) {
+			if (!Template.instance().ready.get()) {
+				return 'btn-loading';
+			}
+		}
+	},
+	hasMore() {
+		if (isSetNotNull(() => Template.instance().limit)) {
+			if (typeof Template.instance().customsounds === 'function') {
+				return Template.instance().limit.get() === Template.instance().customsounds().length;
+			}
+		}
+		return false;
+	},
+	flexData() {
+		return {
+			tabBar: Template.instance().tabBar,
+			data: Template.instance().tabBarData.get()
+		};
+	}
+});
+
+Template.adminSounds.onCreated(function() {
+	const instance = this;
+	this.limit = new ReactiveVar(50);
+	this.filter = new ReactiveVar('');
+	this.ready = new ReactiveVar(false);
+
+	this.tabBar = new RocketChatTabBar();
+	this.tabBar.showGroup(FlowRouter.current().route.name);
+	this.tabBarData = new ReactiveVar();
+
+	RocketChat.TabBar.addButton({
+		groups: ['custom-sounds', 'custom-sounds-selected'],
+		id: 'add-sound',
+		i18nTitle: 'Custom_Sound_Add',
+		icon: 'icon-plus',
+		template: 'adminSoundEdit',
+		openClick(/*e, t*/) {
+			instance.tabBarData.set();
+			return true;
+		},
+		order: 1
+	});
+
+	RocketChat.TabBar.addButton({
+		groups: ['custom-sounds-selected'],
+		id: 'admin-sound-info',
+		i18nTitle: 'Custom_Sound_Info',
+		icon: 'icon-cog',
+		template: 'adminSoundInfo',
+		order: 2
+	});
+
+	this.autorun(function() {
+		const limit = (isSetNotNull(() => instance.limit))? instance.limit.get() : 0;
+		const subscription = instance.subscribe('customSounds', '', limit);
+		instance.ready.set(subscription.ready());
+	});
+
+	this.customsounds = function() {
+		const filter = (isSetNotNull(() => instance.filter))? _.trim(instance.filter.get()) : '';
+
+		let query = {};
+
+		if (filter) {
+			const filterReg = new RegExp(s.escapeRegExp(filter), 'i');
+			query = { name: filterReg };
+		}
+
+		const limit = (isSetNotNull(() => instance.limit))? instance.limit.get() : 0;
+
+		return RocketChat.models.CustomSounds.find(query, { limit: limit, sort: { name: 1 }}).fetch();
+	};
+});
+
+Template.adminSounds.onRendered(() =>
+	Tracker.afterFlush(function() {
+		SideNav.setFlex('adminFlex');
+		SideNav.openFlex();
+	})
+);
+
+Template.adminSounds.events({
+	['keydown #sound-filter'](e) {
+		//stop enter key
+		if (e.which === 13) {
+			e.stopPropagation();
+			e.preventDefault();
+		}
+	},
+
+	['keyup #sound-filter'](e, t) {
+		e.stopPropagation();
+		e.preventDefault();
+		t.filter.set(e.currentTarget.value);
+	},
+
+	['click .sound-info'](e, instance) {
+		e.preventDefault();
+		instance.tabBarData.set(RocketChat.models.CustomSounds.findOne({_id: this._id}));
+		instance.tabBar.showGroup('custom-sounds-selected');
+		instance.tabBar.open('admin-sound-info');
+	},
+
+	['click .load-more'](e, t) {
+		e.preventDefault();
+		e.stopPropagation();
+		t.limit.set(t.limit.get() + 50);
+	},
+
+	['click .icon-play-circled'](e) {
+		e.preventDefault();
+		e.stopPropagation();
+		const $audio = $('audio#' + this._id);
+		if ($audio && $audio[0] && $audio[0].play) {
+			$audio[0].play();
+		}
+	}
+});

packages/rocketchat-custom-sounds/admin/route.js

@@ -0,0 +1,9 @@
+FlowRouter.route('/admin/custom-sounds', {
+	name: 'custom-sounds',
+	subscriptions(/*params, queryParams*/) {
+		this.register('customSounds', Meteor.subscribe('customSounds'));
+	},
+	action(/*params*/) {
+		BlazeLayout.render('main', {center: 'adminSounds'});
+	}
+});

packages/rocketchat-custom-sounds/admin/soundEdit.html

@@ -0,0 +1,25 @@
+<template name="soundEdit">
+	{{#requiresPermission 'manage-sounds'}}
+		<div class="about clearfix">
+			<form class="edit-form" autocomplete="off">
+				{{#if sound}}
+					<h3>{{sound.name}}</h3>
+				{{else}}
+					<h3>{{_ "Custom_Sound_Add"}}</h3>
+				{{/if}}
+				<div class="input-line">
+					<label for="name">{{_ "Name"}}</label>
+					<input type="text" id="name" autocomplete="off" value="{{sound.name}}">
+				</div>
+				<div class="input-line">
+					<label for="image">{{_ "Sound_File_mp3"}}</label>
+					<input id="image" type="file" accept="audio/mp3"/>
+				</div>
+				<nav>
+					<button class='button button-block cancel' type="button"><span>{{_ "Cancel"}}</span></button>
+					<button class='button button-block primary save'><span>{{_ "Save"}}</span></button>
+				</nav>
+			</form>
+		</div>
+	{{/requiresPermission}}
+</template>