[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
@@ -173,3 +174,4 @@ yasinuslu:blaze-meta
 deepwell:bootstrap-datepicker2
 rocketchat:postcss
 dynamic-import@0.1.1
+fourseven:scss

.meteor/versions

@@ -44,6 +44,7 @@ email@1.2.3
 emojione:emojione@3.0.3
 facebook-oauth@1.3.2
 fastclick@1.0.13
+fourseven:scss@4.5.4
 francocatena:status@1.5.3
 geojson-utils@1.0.10
 github-oauth@1.2.0
@@ -105,7 +106,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 +204,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": "Notifications sound volume",
   "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": "Notifications sound volume",
   "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-lib/server/models/Users.js

@@ -397,7 +397,6 @@ class ModelUsers extends RocketChat.models._Base {
 				requirePasswordChangeReason
 			}
 		};
-
 		return this.update(_id, update);
 	}
 

packages/rocketchat-lib/server/startup/settings.js

@@ -70,7 +70,6 @@ RocketChat.settings.addGroup('Accounts', function() {
 		type: 'boolean',
 		'public': true
 	});
-
 	this.section('Registration', function() {
 		this.add('Accounts_DefaultUsernamePrefixSuggestion', 'user', {
 			type: 'string'

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 = $('#chatAudioNotification')[0];
+					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');
+
+		if (!audio || audio === 'none') {
+			audio = Meteor.user().settings.preferences.newMessageNotification || 'chime';
+		}
+
 		if (audio && audio !== 'none') {
+
+			const audioVolume = Meteor.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();
+
 		if (audio && audio !== 'none') {
+
+			const audioVolume = Meteor.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,17 @@
+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('fourseven:scss');
+
+	api.addFiles('rocketchat-slider.scss', 'client');
+	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" 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,20 @@
+import './rocketchat-slider.scss';
+import './rocketchat-slider.html';
+
+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-slider/rocketchat-slider.scss

@@ -0,0 +1,112 @@
+$shade-10: #04436a !default;
+$shade-1: #d7dcdf !default;
+$shade-0: #ffffff !default;
+$teal: #1abc9c !default;
+
+* {
+	&,
+	&::before,
+	&::after {
+		box-sizing: border-box;
+	}
+}
+
+$range-width: 100% !default;
+
+.range-slider {
+	margin: 0 0 0 0%;
+	width: $range-width;
+}
+
+$range-handle-color: $shade-10 !default;
+$range-handle-color-hover: $teal !default;
+$range-handle-size: 20px !default;
+
+$range-track-color: $shade-1 !default;
+$range-track-height: 10px !default;
+
+$range-label-color: $shade-10 !default;
+$range-label-width: 60px !default;
+
+.range-slider__range {
+	-webkit-appearance: none;
+	width: calc(100% - (#{$range-label-width + 13px}));
+	height: $range-track-height;
+	border-radius: 5px;
+	background: $range-track-color;
+	outline: none;
+	padding: 0;
+	margin: 0;
+
+	// Range Handle
+	&::-webkit-slider-thumb {
+		appearance: none;
+		width: $range-handle-size;
+		height: $range-handle-size;
+		border-radius: 50%;
+		background: $range-handle-color;
+		cursor: pointer;
+		transition: background 0.15s ease-in-out;
+
+		&:hover {
+			background: $range-handle-color-hover;
+		}
+	}
+
+	&:active::-webkit-slider-thumb {
+		background: $range-handle-color-hover;
+	}
+
+	&::-moz-range-thumb {
+		width: $range-handle-size;
+		height: $range-handle-size;
+		border: 0;
+		border-radius: 50%;
+		background: $range-handle-color;
+		cursor: pointer;
+		transition: background 0.15s ease-in-out;
+
+		&:hover {
+			background: $range-handle-color-hover;
+		}
+	}
+
+	&:active::-moz-range-thumb {
+		background: $range-handle-color-hover;
+	}
+}
+
+.range-slider__value {
+	display: inline-block;
+	position: relative;
+	width: $range-label-width;
+	color: $shade-0;
+	line-height: 20px;
+	text-align: center;
+	border-radius: 3px;
+	background: $range-label-color;
+	padding: 5px 10px;
+	margin-left: 8px;
+
+	&::after {
+		position: absolute;
+		top: 8px;
+		left: -7px;
+		width: 0;
+		height: 0;
+		border-top: 7px solid transparent;
+		border-right: 7px solid $range-label-color;
+		border-bottom: 7px solid transparent;
+		content: '';
+	}
+}
+
+::-moz-range-track {
+	background: $range-track-color;
+	border: 0;
+}
+
+input::-moz-focus-inner,
+input::-moz-focus-outer {
+	border: 0;
+}