Notifications: added possibility to modify volume.

app/css/app.css

@@ -613,7 +613,38 @@ a.tg_radio_on:hover i.icon-radio {
   border-color: #5785aa;
 }
 
+a.tg_range {
+  padding-left: 45px;
+  color: #000;
+  display: block;
+  line-height: 18px;
+  margin: 8px 0;
+}
+
+a.tg_range:hover {
+  text-decoration: none;
+}
+
+a.tg_range input {
+  float: right;
+  display: inline-block;
+  background: #c7c7c7;
+  width: 150px;
+  height: 18px;
+  line-height: 18px;
+  vertical-align: middle;
+  padding: 4px;
+  border-radius: 10px;
+  overflow: hidden;
+  margin: 0 9px 0 0;
 
+}
+
+.tg_range_label {
+  display: inline-block;
+  line-height: 18px;
+  vertical-align: middle;
+}
 
 
 .tg_form_group {

app/js/controllers.js

@@ -1475,21 +1475,17 @@ angular.module('myApp.controllers', [])
       });
     };
 
-    AppConfigManager.get('notify_nodesktop', 'notify_nosound', 'send_ctrlenter').then(function (settings) {
+    AppConfigManager.get('notify_nodesktop', 'notify_volume', 'send_ctrlenter').then(function (settings) {
       $scope.notify.desktop = !settings[0];
-      $scope.notify.sound = !settings[1];
+      $scope.notify.volume = (settings[1] * 10).toFixed() || 0;
       $scope.send.enter = settings[2] ? '' : '1';
 
-      $scope.$watch('notify.sound', function(newValue, oldValue) {
+      $scope.$watch('notify.volume', function(newValue, oldValue) {
         if (newValue === oldValue) {
           return false;
         }
-        if (newValue) {
+        AppConfigManager.set({notify_volume: newValue / 10});
-          AppConfigManager.remove('notify_nosound');
+        NotificationsManager.clear();
-        } else {
-          AppConfigManager.set({notify_nosound: true});
-          NotificationsManager.clear();
-        }
       });
 
       $scope.$watch('notify.desktop', function(newValue, oldValue) {

app/js/services.js

@@ -3196,9 +3196,9 @@ angular.module('myApp.services', [])
       return false;
     }
 
-    AppConfigManager.get('notify_nosound').then(function (noSound) {
+    AppConfigManager.get('notify_volume').then(function (volume) {
-      if (!noSound) {
+      if (volume != 0) {
-        playSound();
+        playSound(volume);
       }
     })
 
@@ -3237,9 +3237,13 @@ angular.module('myApp.services', [])
     });
   };
 
-  function playSound () {
+  function playSound (volume) {
     var filename = 'img/sound_a.wav';
-    $('#notify_sound').html('<audio autoplay="autoplay"><source src="' + filename + '" type="audio/mpeg" /><embed hidden="true" autostart="true" loop="false" src="' + filename +'" /></audio>');
+    var obj = $('#notify_sound').html('<audio autoplay="autoplay">' +
+        '<source src="' + filename + '" type="audio/mpeg" />' +
+        '<embed hidden="true" autostart="true" loop="false" volume="' + (volume*100) +'" src="' + filename +'" />' +
+        '</audio>');
+    obj.find('audio')[0].volume = volume;
   }
 
   function notificationCancel (key) {

app/partials/settings_modal.html

@@ -64,9 +64,9 @@
             <span class="tg_checkbox_label">Desktop notifications</span>
           </a>
 
-          <a class="tg_checkbox" ng-click="notify.sound = !notify.sound" ng-class="notify.sound ? 'tg_checkbox_on' : ''">
+          <a class="tg_range">
-            <span class="icon icon-checkbox-outer"><i class="icon-checkbox-inner"></i></span>
+            <input class="tg_range" type="range" ng-model="notify.volume" min="0" max="10">
-            <span class="tg_checkbox_label">Sound</span>
+            <span class="tg_range_label">Notification Volume</span>
           </a>
         </div>