[NEW] Configurable Volume for Notifications #6087

.gitignore

@@ -36,6 +36,7 @@
 .env
 .externalToolBuilders
 .idea
+.vscode
 .loadpath
 .map
 .metadata

.meteor/packages

@@ -110,6 +110,7 @@ rocketchat:slashcommands-mute
 rocketchat:slashcommands-open
 rocketchat:slashcommands-topic
 rocketchat:slashcommands-unarchive
+rocketchat:slider
 rocketchat:smarsh-connector
 rocketchat:spotify
 rocketchat:statistics

.meteor/versions

@@ -105,7 +105,7 @@ oauth1@1.1.11
 oauth2@1.1.11
 observe-sequence@1.0.16
 ordered-dict@1.0.9
-ostrio:cookies@2.2.1
+ostrio:cookies@2.2.2
 pauli:accounts-linkedin@2.1.3
 pauli:linkedin-oauth@1.1.0
 percolate:synced-cron@1.3.2
@@ -203,6 +203,7 @@ rocketchat:slashcommands-mute@0.0.1
 rocketchat:slashcommands-open@0.0.1
 rocketchat:slashcommands-topic@0.0.1
 rocketchat:slashcommands-unarchive@0.0.1
+rocketchat:slider@0.0.1
 rocketchat:smarsh-connector@0.0.1
 rocketchat:sms@0.0.1
 rocketchat:spotify@0.0.1

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

@@ -1102,6 +1102,7 @@
   "Notification_Duration": "Notification Duration",
   "Notifications": "Notifications",
   "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.",
+  "Notifications_Sound_Volume": "Notifications sound volume",
   "Notify_all_in_this_room": "Notify all in this room",
   "Notify_active_in_this_room": "Notify active users in this room",
   "Num_Agents": "# Agents",

packages/rocketchat-i18n/i18n/es.i18n.json

@@ -872,6 +872,7 @@
   "Nothing_found": "No se encontró nada",
   "Notification_Duration": "Duración de la notificación",
   "Notifications": "Notificaciones",
+  "Notifications_Sound_Volume": "Volumen del sonido de las notificaciones",
   "Notify_all_in_this_room": "Notificar a todos en este canal",
   "Num_Agents": "# de Agentes",
   "Number_of_messages": "Número de mensajes",
@@ -1362,4 +1363,4 @@
   "Your_mail_was_sent_to_s": "Su correo electrónico fue enviado a %s",
   "Your_password_is_wrong": "Su contraseña es incorrecta!",
   "Your_push_was_sent_to_s_devices": "Su push fue enviado a los dispositivos %s"
-}
+}

packages/rocketchat-i18n/i18n/pt-BR.i18n.json

@@ -817,6 +817,7 @@
   "Nothing": "Nada",
   "Nothing_found": "Nada encontrado",
   "Notifications": "Notificações",
+  "Notifications_Sound_Volume": "Volume do som de notificações",
   "Notify_all_in_this_room": "Notificar todos nesta sala",
   "Num_Agents": "# Agentes",
   "Number_of_messages": "Número de mensagens",

packages/rocketchat-i18n/i18n/sq.i18n.json

@@ -748,6 +748,7 @@
   "Nothing": "asgjë",
   "Nothing_found": "Asgjë për të gjetur",
   "Notifications": "Njoftime",
+  "Notifications_Sound_Volume": "Vëllimi i tingullit të njoftimeve",
   "Notify_all_in_this_room": "Njoftojë të gjithë në këtë dhomë",
   "Num_Agents": "# Agents",
   "Number_of_messages": "Numri i mesazheve",
@@ -1219,4 +1220,4 @@
   "Your_mail_was_sent_to_s": "maili juaj u dërgua në %s",
   "Your_password_is_wrong": "Fjalëkalimi juaj është e gabuar!",
   "Your_push_was_sent_to_s_devices": "shtytje juaj u dërgua në pajisjet %s"
-}
+}

packages/rocketchat-livechat/app/client/lib/_visitor.js

@@ -58,7 +58,10 @@ this.visitor = new class {
 
 				// notification sound
 				if (Session.equals('sound', true) && msg.u._id !== Meteor.userId()) {
-					$('#chatAudioNotification')[0].play();
+					const audioVolume = Meteor.user().settings.preferences.notificationsSoundVolume || 100;
+					const audio = document.getElementById('chatAudioNotification');
+					audio.volume = Number((audioVolume/100).toPrecision(2));
+					audio.play();
 				}
 			}
 		});

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

@@ -255,29 +255,37 @@ Template.pushNotificationsFlexTab.events({
 
 	'click [data-play]'(e) {
 		e.preventDefault();
+
 		let audio = $(e.currentTarget).data('play');
+		const user = Meteor.user();
+
+		if (!audio || audio === 'none') {
+			audio = user && user.settings && user.settings.preferences && user.settings.preferences.newMessageNotification || 'chime';
+		}
+
 		if (audio && audio !== 'none') {
+			const audioVolume = user && user.settings && user.settings.preferences && user.settings.preferences.notificationsSoundVolume || 100;
 			const $audio = $(`audio#${ audio }`);
+
 			if ($audio && $audio[0] && $audio[0].play) {
+				$audio[0].volume = Number((audioVolume/100).toPrecision(2));
 				$audio[0].play();
 			}
-		} else {
-			audio = Meteor.user() && Meteor.user().settings && Meteor.user().settings.preferences && Meteor.user().settings.preferences.newMessageNotification || 'chime';
-			if (audio && audio !== 'none') {
-				const $audio = $(`audio#${ audio }`);
-				if ($audio && $audio[0] && $audio[0].play) {
-					$audio[0].play();
-				}
-			}
 		}
 	},
 
 	'change select[name=audioNotification]'(e) {
 		e.preventDefault();
+
 		const audio = $(e.currentTarget).val();
+		const user = Meteor.user();
+
 		if (audio && audio !== 'none') {
+			const audioVolume = user && user.settings && user.settings.preferences && user.settings.preferences.notificationsSoundVolume || 100;
 			const $audio = $(`audio#${ audio }`);
+
 			if ($audio && $audio[0] && $audio[0].play) {
+				$audio[0].volume = Number((audioVolume/100).toPrecision(2));
 				$audio[0].play();
 			}
 		}

packages/rocketchat-slider/package.js

@@ -0,0 +1,16 @@
+Package.describe({
+	name: 'rocketchat:slider',
+	version: '0.0.1',
+	summary: 'UI slider component for input range.',
+	git: '',
+	documentation: 'README.md'
+});
+
+Package.onUse(function(api) {
+	api.use('ecmascript');
+	api.use('templating', 'client');
+	api.use('rocketchat:theme');
+
+	api.addFiles('rocketchat-slider.html', 'client');
+	api.addFiles('rocketchat-slider.js', 'client');
+});

packages/rocketchat-slider/rocketchat-slider.html

@@ -0,0 +1,6 @@
+<template name="slider">
+	<div class="range-slider">
+		<input class="range-slider-range tertiary-background-color" type="range" id="{{id}}" value="{{value}}" min="{{min}}" max="{{max}}">
+		<span class="range-slider-value" id="{{id}}_value"></span>
+	</div>
+</template>

packages/rocketchat-slider/rocketchat-slider.js

@@ -0,0 +1,17 @@
+Template.slider.onRendered(function() {
+	const params = this.data;
+
+	const rangeSlider = function() {
+
+		const range = $(`#${ params.id }`);
+		const labelValue = $(`#${ params.id }_value`);
+
+		labelValue.html(params.value);
+
+		range.on('input', function() {
+			labelValue.html(this.value);
+		});
+	};
+
+	rangeSlider();
+});

packages/rocketchat-theme/client/imports/slider.css

@@ -0,0 +1,61 @@
+.range-slider {
+	margin: 0;
+	width: 100%;
+}
+
+.range-slider-range {
+	appearance: none;
+	width: calc(100% - 73px);
+	height: 10px;
+	border-radius: 5px;
+	outline: none;
+	padding: 0;
+	margin: 0;
+}
+
+.range-slider-range::-webkit-slider-thumb {
+	appearance: none;
+	width: 20px;
+	height: 20px;
+	border-radius: 50%;
+	cursor: pointer;
+	transition: background 0.15s ease-in-out;
+}
+
+.range-slider-range::-moz-range-thumb {
+	width: 20px;
+	height: 20px;
+	border: 0;
+	border-radius: 50%;
+	cursor: pointer;
+	transition: background 0.15s ease-in-out;
+}
+
+.range-slider-value {
+	display: inline-block;
+	position: relative;
+	width: 60px;
+	line-height: 20px;
+	text-align: center;
+	border-radius: 3px;
+	padding: 5px 10px;
+	margin-left: 8px;
+}
+
+.range-slider-value::after {
+	position: absolute;
+	top: 8px;
+	left: -7px;
+	width: 0;
+	height: 0;
+	border-top: 7px solid;
+	border-right: 7px solid;
+	border-bottom: 7px solid;
+	content: '';
+}
+
+.range-slider-range::-moz-range-track,
+.range-slider-range::-moz-focus-inner,
+.range-slider-range::-moz-focus-outer {
+	border: 0;
+}

packages/rocketchat-theme/client/main.css

@@ -5,4 +5,4 @@
 @import 'imports/forms.css';
 @import 'imports/base.css';
 @import 'imports/rtl.css';
-
+@import 'imports/slider.css';

packages/rocketchat-theme/server/colors.less

@@ -911,3 +911,46 @@ label.required::after {
 		opacity: inherit;
 	}
 }
+
+/** ----------------------------------------------------------------------------
+ * Input Range Slider
+ */
+
+.range-slider-range::-webkit-slider-thumb {
+	background-color: @primary-background-color;
+}
+
+.range-slider-range::-webkit-slider-thumb:hover {
+	background-color: darken(@success-color, 30%);
+}
+
+.range-slider-range:active::-webkit-slider-thumb {
+	background-color: darken(@success-color, 10%);
+}
+
+.range-slider-range::-moz-range-thumb {
+	background-color: @primary-background-color;
+}
+
+.range-slider-range::-moz-range-thumb:hover {
+	background-color: darken(@success-color, 30%);
+}
+
+.range-slider-range:active::-moz-range-thumb {
+	background-color: darken(@success-color, 10%);
+}
+
+.range-slider-value {
+	color: lighten(@tertiary-background-color, 50%);
+	background-color: @primary-background-color;
+}
+
+.range-slider-value::after {
+	border-top-color: transparent;
+	border-right-color: @primary-background-color;
+	border-bottom-color: transparent;
+}
+
+.range-slider-range::-moz-range-track {
+	background-color: @tertiary-background-color;
+}

packages/rocketchat-ui-account/client/accountPreferences.html

@@ -212,6 +212,12 @@ <h1>{{_ "Sound"}}</h1>
 									</select>
 								</div>
 							</div>
+							<div class="input-line double-col">
+								<label>{{_ "Notifications_Sound_Volume"}}</label>
+								<div>
+									{{> slider id="notificationsSoundVolume" min="0" max="100" value=notificationsSoundVolume}}
+								</div>
+							</div>
 						</div>
 					</div>
 				</fieldset>

packages/rocketchat-ui-account/client/accountPreferences.js

@@ -68,6 +68,10 @@ Template.accountPreferences.helpers({
 	},
 	showRoles() {
 		return RocketChat.settings.get('UI_DisplayRoles');
+	},
+	notificationsSoundVolume() {
+		const user = Meteor.user();
+		return user && user.settings && user.settings.preferences && user.settings.preferences.notificationsSoundVolume || 100;
 	}
 });
 
@@ -123,6 +127,8 @@ Template.accountPreferences.onCreated(function() {
 		}));
 		data.desktopNotificationDuration = $('input[name=desktopNotificationDuration]').val();
 		data.unreadAlert = $('#unreadAlert').find('input:checked').val();
+		data.notificationsSoundVolume = parseInt($('#notificationsSoundVolume').val());
+
 		Meteor.call('saveUserPreferences', data, function(error, results) {
 			if (results) {
 				toastr.success(t('Preferences_saved'));