From e4e633feef7b136d0eb389c06228b8f003ca688e Mon Sep 17 00:00:00 2001
From: Karl Prieb <karl@prieb.me>
Date: Fri, 26 Jan 2018 19:57:29 -0200
Subject: [PATCH] notification preferences

---
 packages/rocketchat-i18n/i18n/en.i18n.json    |   3 +
 .../views/pushNotificationsFlexTab.html       | 271 +++++-------------
 .../client/views/pushNotificationsFlexTab.js  | 233 ++++++++-------
 .../server/models/Subscriptions.js            |   2 +-
 .../client/imports/components/userInfo.css    |   5 +
 5 files changed, 190 insertions(+), 324 deletions(-)

diff --git a/packages/rocketchat-i18n/i18n/en.i18n.json b/packages/rocketchat-i18n/i18n/en.i18n.json
index 852bb7bafec..d2599b39944 100644
--- a/packages/rocketchat-i18n/i18n/en.i18n.json
+++ b/packages/rocketchat-i18n/i18n/en.i18n.json
@@ -175,6 +175,7 @@
   "Agent": "Agent",
   "Agent_added": "Agent added",
   "Agent_removed": "Agent removed",
+  "Alerts": "Alerts",
   "Alias": "Alias",
   "Alias_Format": "Alias Format",
   "Alias_Format_Description": "Import messages from Slack with an alias; %s is replaced by the username of the user. If empty, no alias will be used.",
@@ -259,6 +260,7 @@
   "AtlassianCrowd": "Atlassian Crowd",
   "Attachment_File_Uploaded": "File Uploaded",
   "Attribute_handling": "Attribute handling",
+  "Audio": "Audio",
   "Audio_message": "Audio message",
   "Audio_Notification_Value_Description": "Can be any custom sound or the default ones: beep, chelle, ding, droplet, highbell, seasons",
   "Audio_Notifications_Default_Alert": "Audio Notifications Default Alert",
@@ -1346,6 +1348,7 @@
   "Notifications": "Notifications",
   "Notifications_Always_Notify_Mobile" : "Always notify mobile",
   "Notifications_Always_Notify_Mobile_Description" : "Choose to always notify mobile device regardless of presence status.",
+  "Notifications_Duration": "Notifications_Duration",
   "Notifications_Max_Room_Members": "Max Room Members Before Disabling All Message Notifications",
   "Notifications_Max_Room_Members_Description": "Max number of members in room when notifications for all messages gets disabled. Users can still change per room setting to receive all notifications on an individual basis. (0 to disable)",
   "Notifications_Muted_Description": "If you choose to mute everything, you won't see the room highlight in the list when there are new messages, except for mentions. Muting notifications will override notifications settings.",
diff --git a/packages/rocketchat-push-notifications/client/views/pushNotificationsFlexTab.html b/packages/rocketchat-push-notifications/client/views/pushNotificationsFlexTab.html
index 986b2e0239d..0c79f6ac792 100644
--- a/packages/rocketchat-push-notifications/client/views/pushNotificationsFlexTab.html
+++ b/packages/rocketchat-push-notifications/client/views/pushNotificationsFlexTab.html
@@ -2,7 +2,7 @@
 	<main class="rc-user-info__scroll">
 		<div class="rc-user-info__row rc-user-info__row--separator">
 			<div class="rc-switch-double">
-				<div class="rc-switch-double__label">
+				<div class="rc-switch-double__label {{#unless disableNotifications}}disabled{{/unless}}">
 					{{_ "Turn_OFF"}}
 					<div class="rc-switch-double__description">
 						{{_ "Mute_all_notifications"}}
@@ -16,7 +16,7 @@
 							</span>
 					</label>
 				</div>
-				<div class="rc-switch-double__label">
+				<div class="rc-switch-double__label {{#if disableNotifications}}disabled{{/if}}">
 					{{_ "Turn_ON"}}
 					<div class="rc-switch-double__description">
 						{{_ "Receive_alerts"}}
@@ -26,7 +26,7 @@
 		</div>
 		<div class="rc-user-info__row rc-user-info__row--separator">
 			<div class="rc-switch-double">
-				<div class="rc-switch-double__label">
+				<div class="rc-switch-double__label {{#unless hideUnreadStatus}}disabled{{/unless}}">
 					{{_ "Hide_counter"}}
 					<div class="rc-switch-double__description">
 						{{_ "Do_not_display_unread_counter"}}
@@ -40,7 +40,7 @@
 						</span>
 					</label>
 				</div>
-				<div class="rc-switch-double__label">
+				<div class="rc-switch-double__label {{#if hideUnreadStatus}}disabled{{/if}}">
 					{{_ "Show_counter"}}
 					<div class="rc-switch-double__description">
 						{{_ "Display_unread_counter"}}
@@ -48,67 +48,54 @@
 				</div>
 			</div>
 		</div>
-		<div class="rc-user-info__row rc-user-info__row--separator">
-			<div class="rc-switch-double">
-				<div class="rc-switch-double__label">
-					{{_ "User_default"}}
-					<div class="rc-switch-double__description">
-						{{_ "Keep_default_user_settings"}}
-					</div>
-				</div>
-				<div class="rc-switch rc-switch--blue">
-					<label class="rc-switch__label">
-						<input type="checkbox" class="rc-switch__input js-input-check" id="customize" name="customize" value="1" checked="{{$eq customize true}}">
-						<span class="rc-switch__button">
-							<span class="rc-switch__button-inside"></span>
-						</span>
-					</label>
-				</div>
-				<div class="rc-switch-double__label">
-					{{_ "Customize"}}
-					<div class="rc-switch-double__description">
-						{{_ "Create_unique_rules_for_this_channel"}}
-					</div>
-				</div>
-			</div>
-		</div>
 		{{#if disableNotifications}}
 			<div class="rc-user-info__row rc-user-info__row--separator">
 				<div class="rc-user-info__config">
 					<div class="rc-user-info__config-header">
 						{{> icon block="rc-user-info__config-icon" icon="computer"}}
-						<span class="rc-user-info__config-label">Desktop</span>
+						<span class="rc-user-info__config-label">{{_ "Desktop"}}</span>
 					</div>
 					<div class="rc-user-info__config-content">
-							<div class="rc-user-info__config-name">Alerts:</div>
-								{{# with "desktopNotifications"}}
-									<div class="rc-user-info__config-value">
-										{{subValue 'desktopNotifications'}}
-										{{> icon block="rc-user-info__config-content-icon" icon="arrow-down"}}
-									</div>
-								{{/with}}
+						<div class="rc-user-info__config-name">{{_ "Alerts"}}:</div>
+						{{# with "desktopNotifications"}}
+							<div class="rc-user-info__config-value">
+								{{subValue 'desktopNotifications'}}
+								{{> icon block="rc-user-info__config-content-icon" icon="arrow-down"}}
+							</div>
+						{{/with}}
 					</div>
 					<div class="rc-user-info__config-content">
-							<div class="rc-user-info__config-name">Audio:</div>
-							{{# with "audioNotifications"}}
-								<div class="rc-user-info__config-value">
-									{{subValue 'audioNotifications'}}
-									{{> icon block="rc-user-info__config-content-icon" icon="arrow-down"}}
-								</div>
-							{{/with}}
+						<div class="rc-user-info__config-name">{{_ "Audio"}}:</div>
+						{{# with "audioNotifications"}}
+							<div class="rc-user-info__config-value">
+								{{subValue 'audioNotifications'}}
+								{{> icon block="rc-user-info__config-content-icon" icon="arrow-down"}}
+							</div>
+						{{/with}}
 					</div>
 					<div class="rc-user-info__config-content">
-							<div class="rc-user-info__config-name">Notifications Duration:</div>
-							{{# with "desktopNotificationDuration"}}
+						<div class="rc-user-info__config-name">{{_ "Sound"}}:</div>
+						{{# with "audioNotificationValue"}}
 							<div class="rc-user-info__config-value">
-									{{#if desktopNotificationDuration}}
-										{{_ "Duration"}} {{desktopNotificationDuration}} {{_ "seconds"}}
-									{{else}}
-										{{_ "Use_User_Preferences_or_Global_Settings"}}
-									{{/if}}
-									{{> icon block="rc-user-info__config-content-icon" icon="arrow-down"}}
+								{{audioNotificationValue}}
+								{{> icon block="rc-user-info__config-content-icon" icon="arrow-down"}}
 							</div>
-							{{/with}}
+							<i class="icon-play-circled" data-play="{{audioNotificationValue}}"></i>
+						{{/with}}
+					</div>
+					<div class="rc-user-info__config-content">
+						<div class="rc-user-info__config-name">{{_ "Notifications Duration"}}:</div>
+						{{# with "desktopNotificationDuration"}}
+							<div class="rc-user-info__config-value">
+								{{#if desktopNotificationDuration }}
+									{{_ "Duration"}} {{desktopNotificationDuration}} {{_ "seconds"}}
+								{{else}}
+									{{_ "Use_User_Preferences_or_Global_Settings"}}
+								{{/if}}
+
+								{{> icon block="rc-user-info__config-content-icon" icon="arrow-down"}}
+							</div>
+						{{/with}}
 					</div>
 				</div>
 			</div>
@@ -116,10 +103,10 @@
 				<div class="rc-user-info__config">
 					<div class="rc-user-info__config-header">
 						{{> icon block="rc-user-info__config-icon" icon="mobile"}}
-						<span class="rc-user-info__config-label">Mobile</span>
+						<span class="rc-user-info__config-label">{{_ "Mobile"}}</span>
 					</div>
 					<div class="rc-user-info__config-content">
-							<div class="rc-user-info__config-name">Alerts:</div>
+							<div class="rc-user-info__config-name">{{_ "Alerts"}}:</div>
 							{{# with "mobilePushNotifications"}}
 								<div class="rc-user-info__config-value">
 									{{subValue "mobilePushNotifications"}}
@@ -133,10 +120,10 @@
 				<div class="rc-user-info__config">
 					<div class="rc-user-info__config-header">
 						{{> icon block="rc-user-info__config-icon" icon="mail"}}
-						<span class="rc-user-info__config-label">E-mail</span>
+						<span class="rc-user-info__config-label">{{_ "Email"}}</span>
 					</div>
 					<div class="rc-user-info__config-content">
-							<div class="rc-user-info__config-name">Alerts:</div>
+							<div class="rc-user-info__config-name">{{_ "Alerts"}}:</div>
 							{{# with "emailNotifications"}}
 							<div class="rc-user-info__config-value">
 								{{subValue 'emailNotifications'}}
@@ -153,6 +140,30 @@
 		<button class="rc-button rc-button--primary js-save" title="{{_ 'Save'}}" disabled={{disabled}}>{{_ 'Save'}}</button>
 	</div>
 </template>
+<!-- <div class="rc-user-info__row rc-user-info__row--separator">
+			<div class="rc-switch-double">
+				<div class="rc-switch-double__label">
+					{{_ "User_default"}}
+					<div class="rc-switch-double__description">
+						{{_ "Keep_default_user_settings"}}
+					</div>
+				</div>
+				<div class="rc-switch rc-switch--blue">
+					<label class="rc-switch__label">
+						<input type="checkbox" class="rc-switch__input js-input-check" id="customize" name="customize" value="1" checked="{{$eq customize true}}">
+						<span class="rc-switch__button">
+							<span class="rc-switch__button-inside"></span>
+						</span>
+					</label>
+				</div>
+				<div class="rc-switch-double__label">
+					{{_ "Customize"}}
+					<div class="rc-switch-double__description">
+						{{_ "Create_unique_rules_for_this_channel"}}
+					</div>
+				</div>
+			</div>
+		</div> -->
 
 <template name="pushNotificationsPopover">
 	{{#each options}}
@@ -161,152 +172,4 @@
 		<label for="{{id}}" class="rc-popover__item-radio-label">{{_ label}}</label>
 	</div>
 	{{/each}}
-	<!-- <div class="rc-popover__item">
-		<input type="radio" class="rc-popover__item-radio" id="desktopNotificationsDefault" name="desktopNotifications" value="default" />
-		<label for="desktopNotificationsDefault" class="rc-popover__item-radio-label">{{_ "Default"}} ({{_ defaultDesktopNotification}})</label>
-	</div>
-	<div class="rc-popover__item">
-		<input type="radio" class="rc-popover__item-radio" id="desktopNotificationsAll" name="desktopNotifications" value="all" />
-		<label for="desktopNotificationsAll" class="rc-popover__item-radio-label">{{_ "All_messages"}}</label>
-	</div>
-	<div class="rc-popover__item">
-		<input type="radio" class="rc-popover__item-radio" id="desktopNotificationsMentions" name="desktopNotifications" value="mentions" />
-		<label for="desktopNotificationsMentions" class="rc-popover__item-radio-label">{{_ "Mentions"}}</label>
-	</div>
-	<div class="rc-popover__item">
-		<input type="radio" class="rc-popover__item-radio" id="desktopNotificationsNothing" name="desktopNotifications" value="nothing" />
-		<label for="desktopNotificationsNothing" class="rc-popover__item-radio-label">{{_ "Nothing"}}</label>
-	</div> -->
 </template>
-<!-- {{#if false}}
-<form>
-	<ul class="list clearfix">
-		{{#if $eq disableNotifications false}}
-			<li class="audio-notifications">
-				<label>{{_ "Audio"}}</label>
-				<div>
-					{{#if editing 'audioNotifications'}}
-						<label><input type="radio" name="audioNotifications" value="default" checked="{{$eq audioNotifications 'default'}}" /> {{_ "Default"}} ({{_ defaultAudioNotification}})</label>
-						<label><input type="radio" name="audioNotifications" value="all" checked="{{$eq audioNotifications 'all'}}" /> {{_ "All_messages"}}</label>
-						<label><input type="radio" name="audioNotifications" value="mentions" checked="{{$eq audioNotifications 'mentions'}}" /> {{_ "Mentions"}}</label>
-						<br />
-
-						<label>
-							<select name="audioNotificationValue" class="rc-input rc-input--small audio">
-								<option value="none" selected="{{$eq audioNotificationValue 'none'}}">{{_ "None"}}</option>
-								<option value="" selected="{{$eq audioNotificationValue subValue 'audioNotifications'}}">{{_ "Use_account_preference"}} ({{_ "Default"}})</option>
-								<option value="chime" selected="{{$eq audioNotificationValue 'chime'}}">Chime</option>
-								{{#each audioAssets}}
-									<option value="{{_id}}" selected="{{$eq audioNotificationValue _id}}">{{name}}</option>
-								{{/each}}
-							</select>
-						</label>
-						<button type="button" class="rc-button rc-button--secondary cancel">{{_ "Cancel"}}</button>
-						<button type="button" class="rc-button rc-button--primary save">{{_ "Save"}}</button>
-					{{else}}
-						<span class="current-setting">{{subValue 'audioNotifications'}} : {{audioNotificationValue}}<i class="icon-play-circled" data-play="{{audioNotificationValue}}"></i> <i class="icon-pencil" data-edit="audioNotifications"></i></span>
-					{{/if}}
-				</div>
-			</li>
-			<li class="desktop-notifications">
-				<label>{{_ "Desktop"}}</label>
-				<div>
-					{{#if editing 'desktopNotifications'}}
-						<label><input type="radio" name="desktopNotifications" value="default" checked="{{$eq desktopNotifications 'default'}}" /> {{_ "Default"}} ({{_ defaultDesktopNotification}})</label>
-						<label><input type="radio" name="desktopNotifications" value="all" checked="{{$eq desktopNotifications 'all'}}" /> {{_ "All_messages"}}</label>
-						<label><input type="radio" name="desktopNotifications" value="mentions" checked="{{$eq desktopNotifications 'mentions'}}" /> {{_ "Mentions"}}</label>
-						<label><input type="radio" name="desktopNotifications" value="nothing" checked="{{$eq desktopNotifications 'nothing'}}" /> {{_ "Nothing"}}</label>
-						<br />
-
-						{{#if desktopNotificationDuration}}
-							<div class="rc-input">
-								<label class="rc-input__label">
-										{{_ "Duration"}} ({{_ "seconds"}})
-									<div class="rc-input__wrapper">
-										<input type="number" class="rc-input__element" name="duration" min="0" value="{{desktopNotificationDuration}}">
-									</div>
-								</label>
-							</div>
-						{{else}}
-							<div class="rc-input">
-								<label class="rc-input__label">
-										{{_ "Duration"}} ({{_ "seconds"}})
-									<div class="rc-input__wrapper">
-										<input type="number" class="rc-input__element" name="duration" min="0" value="" placeholder="{{_ "Use_User_Preferences_or_Global_Settings"}}">
-									</div>
-								</label>
-							</div>
-						{{/if}}
-
-						<button type="button" class="rc-button rc-button--secondary cancel">{{_ "Cancel"}}</button>
-						<button type="button" class="rc-button rc-button--primary save">{{_ "Save"}}</button>
-					{{else}}
-						<span class="current-setting">{{subValue 'desktopNotifications'}} <i class="icon-pencil" data-edit="desktopNotifications"></i></span>
-					{{/if}}
-				</div>
-			</li>
-			{{#unless editing 'desktopNotifications'}}
-			<li class="desktop-notifications-duration">
-				<label>{{_ "Desktop_Notifications_Duration"}}</label>
-				<div>
-					<span class="current-setting">{{#if desktopNotificationDuration}}{{desktopNotificationDuration}} {{_"seconds"}}{{else}}{{_ "Use_User_Preferences_or_Global_Settings"}}{{/if}}</span>
-				</div>
-			</li>
-			{{/unless}}
-			<li class="mobile-notifications">
-				<label>{{_ "Mobile"}}</label>
-				<div>
-					{{#if editing 'mobilePushNotifications'}}
-						<label><input type="radio" name="mobilePushNotifications" value="default" checked="{{$eq mobilePushNotifications 'default'}}" /> {{_ "Default"}} ({{_ defaultMobileNotification}})</label>
-						<label><input type="radio" name="mobilePushNotifications" value="all" checked="{{$eq mobilePushNotifications 'all'}}" /> {{_ "All_messages"}}</label>
-						<label><input type="radio" name="mobilePushNotifications" value="mentions" checked="{{$eq mobilePushNotifications 'mentions'}}" /> {{_ "Mentions"}}</label>
-						<label><input type="radio" name="mobilePushNotifications" value="nothing" checked="{{$eq mobilePushNotifications 'nothing'}}" /> {{_ "Nothing"}}</label>
-						<button type="button" class="rc-button rc-button--secondary cancel">{{_ "Cancel"}}</button>
-						<button type="button" class="rc-button rc-button--primary save">{{_ "Save"}}</button>
-					{{else}}
-						<span class="current-setting">{{subValue 'mobilePushNotifications'}} <i class="icon-pencil" data-edit="mobilePushNotifications"></i></span>
-					{{/if}}
-				</div>
-			</li>
-			<li class="email-notifications">
-				<label>{{_ "Email"}}</label>
-				<div>
-					{{#if editing 'emailNotifications'}}
-						<label><input type="radio" name="emailNotifications" value="all" checked="{{$eq emailNotifications 'all'}}" /> {{_ "All_messages"}}</label>
-						{{#if showEmailMentions}}
-							<label><input type="radio" name="emailNotifications" value="mentions" checked="{{$eq emailNotifications 'mentions'}}" /> {{_ "Mentions"}}</label>
-						{{/if}}
-						<label><input type="radio" name="emailNotifications" value="nothing" checked="{{$eq emailNotifications 'nothing'}}" /> {{_ "Nothing"}}</label>
-						<label><input type="radio" name="emailNotifications" value="default" checked="{{$eq emailNotifications 'default'}}" /> {{_ "Use_account_preference"}}</label>
-						<button type="button" class="rc-button rc-button--secondary cancel">{{_ "Cancel"}}</button>
-						<button type="button" class="rc-button rc-button--primary save">{{_ "Save"}}</button>
-					{{else}}
-						<span class="current-setting">{{subValue 'emailNotifications'}} <i class="icon-pencil" data-edit="emailNotifications"></i></span>
-					{{/if}}
-				</div>
-			</li>
-			{{#unless emailVerified}}
-			<li class="email-alerts">
-				<div class="alert alert-warning pending-background pending-border">
-					{{_ "You_wont_receive_email_notifications_because_you_have_not_verified_your_email"}}
-				</div>
-			</li>
-			{{/unless}}
-		{{/if}}
-		<li class="unread-alerts">
-			<label>{{_ "Unread_Tray_Icon_Alert"}}</label>
-			<div>
-				{{#if editing 'unreadAlert'}}
-					<label><input type="radio" name="unreadAlert" value="all" checked="{{$eq unreadAlert 'all'}}" /> {{_ "On"}}</label>
-					<label><input type="radio" name="unreadAlert" value="nothing" checked="{{$eq unreadAlert 'nothing'}}" /> {{_ "Off"}}</label>
-					<label><input type="radio" name="unreadAlert" value="default" checked="{{$eq unreadAlert 'default'}}" /> {{_ "Use_account_preference"}}</label>
-					<button type="button" class="rc-button rc-button--secondary cancel">{{_ "Cancel"}}</button>
-					<button type="button" class="rc-button rc-button--primary save">{{_ "Save"}}</button>
-				{{else}}
-					<span class="current-setting">{{unreadAlertText}} <i class="icon-pencil" data-edit="unreadAlert"></i></span>
-				{{/if}}
-			</div>
-		</li>
-	</ul>
-</form>
-{{/if}} -->
diff --git a/packages/rocketchat-push-notifications/client/views/pushNotificationsFlexTab.js b/packages/rocketchat-push-notifications/client/views/pushNotificationsFlexTab.js
index 6395f5708d2..a61ed1fd35e 100644
--- a/packages/rocketchat-push-notifications/client/views/pushNotificationsFlexTab.js
+++ b/packages/rocketchat-push-notifications/client/views/pushNotificationsFlexTab.js
@@ -20,11 +20,6 @@ const call = (method, ...params) => {
 };
 
 Template.pushNotificationsFlexTab.helpers({
-	audioAssets() {
-		return RocketChat.CustomSounds && RocketChat.CustomSounds.getList && RocketChat.CustomSounds.getList() || [];
-	},
-
-
 	disableNotifications() {
 		return Template.instance().form.disableNotifications.get();
 	},
@@ -34,6 +29,14 @@ Template.pushNotificationsFlexTab.helpers({
 	audioNotifications() {
 		return Template.instance().form.audioNotifications.get();
 	},
+	audioNotificationValue() {
+		const value = Template.instance().form.audioNotificationValue.get();
+		if (value === '0' ) {
+			return t('Use_account_preference');
+		}
+
+		return value;
+	},
 	desktopNotifications() {
 		return Template.instance().form.desktopNotifications.get();
 	},
@@ -43,48 +46,9 @@ Template.pushNotificationsFlexTab.helpers({
 	emailNotifications() {
 		return Template.instance().form.emailNotifications.get();
 	},
-
 	desktopNotificationDuration() {
 		return Template.instance().form.desktopNotificationDuration.get();
 	},
-	showEmailMentions() {
-		const sub = ChatSubscription.findOne({
-			rid: Session.get('openedRoom')
-		}, {
-			fields: {
-				t: 1
-			}
-		});
-		return sub && sub.t !== 'd';
-	},
-	unreadAlert() {
-		const sub = ChatSubscription.findOne({
-			rid: Session.get('openedRoom')
-		}, {
-			fields: {
-				unreadAlert: 1
-			}
-		});
-		return sub ? sub.unreadAlert : 'default';
-	},
-	unreadAlertText() {
-		const sub = ChatSubscription.findOne({
-			rid: Session.get('openedRoom')
-		}, {
-			fields: {
-				unreadAlert: 1
-			}
-		});
-		if (sub) {
-			switch (sub.unreadAlert) {
-				case 'all':
-					return t('On');
-				case 'nothing':
-					return t('Off');
-			}
-		}
-		return t('Use_account_preference');
-	},
 	subValue(field) {
 		const { form } = Template.instance();
 		if (form[field]) {
@@ -102,24 +66,6 @@ Template.pushNotificationsFlexTab.helpers({
 			}
 		}
 	},
-	audioNotificationValue() {
-		const sub = ChatSubscription.findOne({
-			rid: Session.get('openedRoom')
-		}, {
-			fields: {
-				audioNotificationValue: 1
-			}
-		});
-		const audio = sub ? sub.audioNotificationValue || 'default' : 'default';
-		if (audio === 'default') {
-			return t('Use_account_preference');
-		}
-		return audio;
-	},
-
-	emailVerified() {
-		return Meteor.user().emails && Meteor.user().emails[0] && Meteor.user().emails[0].verified;
-	},
 	defaultAudioNotification() {
 		let preference = RocketChat.getUserPreference(Meteor.user(), 'audioNotifications');
 		if (preference === 'default') {
@@ -141,8 +87,6 @@ Template.pushNotificationsFlexTab.helpers({
 		}
 		return notificationLabels[preference];
 	},
-
-
 	disabled() {
 		const { original, form } = Template.instance();
 		return Object.keys(original).every(key => original[key].get() === form[key].get());
@@ -159,7 +103,8 @@ Template.pushNotificationsFlexTab.onCreated(function() {
 			desktopNotifications: 1,
 			mobilePushNotifications: 1,
 			emailNotifications: 1,
-			desktopNotificationDuration: 1
+			desktopNotificationDuration: 1,
+			audioNotificationValue: 1
 		}
 	}) || {};
 
@@ -170,7 +115,8 @@ Template.pushNotificationsFlexTab.onCreated(function() {
 		desktopNotifications = 'default',
 		mobilePushNotifications = 'default',
 		emailNotifications = 'default',
-		desktopNotificationDuration = 1
+		desktopNotificationDuration = 0,
+		audioNotificationValue = null
 	} = sub;
 
 	this.original = {
@@ -180,7 +126,8 @@ Template.pushNotificationsFlexTab.onCreated(function() {
 		desktopNotifications: new ReactiveVar(desktopNotifications),
 		mobilePushNotifications: new ReactiveVar(mobilePushNotifications),
 		emailNotifications: new ReactiveVar(emailNotifications),
-		desktopNotificationDuration: new ReactiveVar(desktopNotificationDuration)
+		desktopNotificationDuration: new ReactiveVar(desktopNotificationDuration),
+		audioNotificationValue: new ReactiveVar(audioNotificationValue)
 	};
 
 	this.form = {
@@ -190,7 +137,8 @@ Template.pushNotificationsFlexTab.onCreated(function() {
 		desktopNotifications: new ReactiveVar(desktopNotifications),
 		mobilePushNotifications: new ReactiveVar(mobilePushNotifications),
 		emailNotifications: new ReactiveVar(emailNotifications),
-		desktopNotificationDuration: new ReactiveVar(desktopNotificationDuration)
+		desktopNotificationDuration: new ReactiveVar(desktopNotificationDuration),
+		audioNotificationValue: new ReactiveVar(audioNotificationValue)
 	};
 
 	this.saveSetting = async() => {
@@ -206,9 +154,9 @@ Template.pushNotificationsFlexTab.onCreated(function() {
 				case 'desktopNotificationDuration':
 					await call('saveDesktopNotificationDuration', rid, value);
 					break;
-				// case 'audioNotificationsSound':
-				// 	await call('saveAudioNotificationValue', rid, value);
-				// 	break;
+				case 'audioNotificationValue':
+					await call('saveAudioNotificationValue', rid, value);
+					break;
 				default:
 					await call('saveNotificationSettings', rid, field, value);
 			}
@@ -219,11 +167,8 @@ Template.pushNotificationsFlexTab.onCreated(function() {
 });
 
 Template.pushNotificationsFlexTab.events({
-	'click .cancel'(e, instance) {
-		e.preventDefault();
-		Object.keys(instance.original).forEach(key =>
-			instance.form[key].set(instance.original[key])
-		);
+	'click .js-cancel'(e, instance) {
+		instance.data.tabBar.close();
 	},
 
 	'click .js-save'(e, instance) {
@@ -233,37 +178,16 @@ Template.pushNotificationsFlexTab.events({
 
 	'click [data-play]'(e) {
 		e.preventDefault();
-
-		let audio = $(e.currentTarget).data('play');
 		const user = Meteor.user();
 
-		if (audio === 'Use account preference' || audio === 'none') {
-			audio = RocketChat.getUserPreference(user, 'newMessageNotification');
+		let value = Template.instance().form.audioNotificationValue.get();
+		if (value === '0') {
+			value = RocketChat.getUserPreference(user, 'newMessageNotification');
 		}
 
-		if (audio && audio !== 'none') {
-			const audioVolume = RocketChat.getUserPreference(user, 'notificationsSoundVolume');
-			const $audio = $(`audio#${ audio }`);
-
-			if ($audio && $audio[0] && $audio[0].play) {
-				$audio[0].volume = Number((audioVolume/100).toPrecision(2));
-				$audio[0].play();
-			}
-		}
-	},
-
-	'change select[name=audioNotificationValue]'(e) {
-		e.preventDefault();
-
-		let audio = $(e.currentTarget).val();
-		const user = Meteor.user();
-
-		if (audio==='') {
-			audio = RocketChat.getUserPreference(user, 'newMessageNotification');
-		}
-		if (audio && audio !== 'none') {
+		if (value && value !== 'none') {
 			const audioVolume = RocketChat.getUserPreference(user, 'notificationsSoundVolume');
-			const $audio = $(`audio#${ audio }`);
+			const $audio = $(`audio#${ value }`);
 
 			if ($audio && $audio[0] && $audio[0].play) {
 				$audio[0].volume = Number((audioVolume/100).toPrecision(2));
@@ -281,23 +205,75 @@ Template.pushNotificationsFlexTab.events({
 		const instance = Template.instance();
 		const key = this.valueOf();
 
-		const config = {
-			popoverClass: 'notifications-preferences',
-			template: 'pushNotificationsPopover',
-			mousePosition: () => ({
-				x: e.currentTarget.getBoundingClientRect().left,
-				y: e.currentTarget.getBoundingClientRect().bottom + 50
-			}),
-			customCSSProperties: () => ({
-				top:  `${ e.currentTarget.getBoundingClientRect().bottom + 10 }px`,
-				left: `${ e.currentTarget.getBoundingClientRect().left - 10 }px`
-			}),
-			data: {
-				change : (value) => {
-					return instance.form[key].set(value);
+		let options;
+
+		switch(key) {
+			case 'audioNotificationValue':
+				const audioAssets = RocketChat.CustomSounds && RocketChat.CustomSounds.getList && RocketChat.CustomSounds.getList() || [];
+				const audioAssetsArray = audioAssets.map(audio => {
+					return {
+						id: `audioNotificationValue${audio.name}`,
+						name: 'audioNotificationValue',
+						label: audio.name,
+						value: audio._id
+					}
+				})
+				options = [
+					{
+						id: 'audioNotificationValueNone',
+						name: 'audioNotificationValue',
+						label: 'None',
+						value: 'none'
+					},
+					{
+						id: 'audioNotificationValueDefault',
+						name: 'audioNotificationValue',
+						label: 'Default',
+						value: 0
+					},
+					...audioAssetsArray
+				];
+				break;
+			case 'desktopNotificationDuration':
+				options = [{
+					id: 'desktopNotificationDuration',
+					name: 'desktopNotificationDuration',
+					label: 'Default',
+					value: 0
 				},
-				value: instance.form[key].get(),
-				options : [{
+				{
+					id: 'desktopNotificationDuration1s',
+					name: 'desktopNotificationDuration',
+					label: `1 ${t('seconds')}`,
+					value: 1
+				},
+				{
+					id: 'desktopNotificationDuration2s',
+					name: 'desktopNotificationDuration',
+					label: `2 ${t('seconds')}`,
+					value: 2
+				},
+				{
+					id: 'desktopNotificationDuration3s',
+					name: 'desktopNotificationDuration',
+					label: `3 ${t('seconds')}`,
+					value: 3
+				},
+				{
+					id: 'desktopNotificationDuration4s',
+					name: 'desktopNotificationDuration',
+					label: `4 ${t('seconds')}`,
+					value: 4
+				},
+				{
+					id: 'desktopNotificationDuration5s',
+					name: 'desktopNotificationDuration',
+					label: `5 ${t('seconds')}`,
+					value: 5
+				}];
+				break;
+			default:
+				options = [{
 					id: 'desktopNotificationsDefault',
 					name: 'desktopNotifications',
 					label: 'Default',
@@ -320,7 +296,26 @@ Template.pushNotificationsFlexTab.events({
 					name: 'desktopNotifications',
 					label: 'Nothing',
 					value: 'nothing'
-				}]
+				}];
+		}
+
+		const config = {
+			popoverClass: 'notifications-preferences',
+			template: 'pushNotificationsPopover',
+			mousePosition: () => ({
+				x: e.currentTarget.getBoundingClientRect().left,
+				y: e.currentTarget.getBoundingClientRect().bottom + 50
+			}),
+			customCSSProperties: () => ({
+				top:  `${ e.currentTarget.getBoundingClientRect().bottom + 10 }px`,
+				left: `${ e.currentTarget.getBoundingClientRect().left - 10 }px`
+			}),
+			data: {
+				change : (value) => {
+					return instance.form[key].set(key === 'desktopNotificationDuration' ? parseInt(value) : value);
+				},
+				value: instance.form[key].get(),
+				options
 			}
 		};
 		popover.open(config);
diff --git a/packages/rocketchat-push-notifications/server/models/Subscriptions.js b/packages/rocketchat-push-notifications/server/models/Subscriptions.js
index e793d751adb..a60402ef550 100644
--- a/packages/rocketchat-push-notifications/server/models/Subscriptions.js
+++ b/packages/rocketchat-push-notifications/server/models/Subscriptions.js
@@ -51,7 +51,7 @@ RocketChat.models.Subscriptions.updateDesktopNotificationDurationById = function
 
 	const update = {
 		$set: {
-			desktopNotificationDuration: value - 0
+			desktopNotificationDuration: parseInt(value)
 		}
 	};
 
diff --git a/packages/rocketchat-theme/client/imports/components/userInfo.css b/packages/rocketchat-theme/client/imports/components/userInfo.css
index 3937a85dee7..0e6d59351af 100644
--- a/packages/rocketchat-theme/client/imports/components/userInfo.css
+++ b/packages/rocketchat-theme/client/imports/components/userInfo.css
@@ -253,6 +253,10 @@
 
 				font-size: 1.25rem;
 			}
+
+			& .icon-play-circled {
+				cursor: pointer;
+			}
 		}
 
 		&-name,
@@ -275,6 +279,7 @@
 
 			color: #1d73f3;
 			align-items: flex-end;
+			text-transform: capitalize;
 		}
 	}
 }