Added notifications volume setting

#285 Merged

app/css/app.css

@@ -614,8 +614,6 @@ a.tg_radio_on:hover i.icon-radio {
 }
 
 
-
-
 .tg_form_group {
   padding: 8px 0;
 }
@@ -2534,6 +2532,75 @@ img.chat_modal_participant_photo {
 }
 
 
+.tg_range_wrap {
+  line-height: 18px;
+}
+input.tg_range {
+  cursor: pointer;
+  outline: none !important;
+  -webkit-appearance: none;
+  width: 100%;
+  max-width: 362px;
+  display: inline-block;
+  background: #c7c7c7;
+  margin: 0;
+  height: 3px;
+  line-height: 18px;
+  vertical-align: top;
+  margin: 8px 0;
+  border-radius: 2px;
+}
+
+input.tg_range::-webkit-slider-thumb {
+  -webkit-appearance: none;
+  background: #568cb5;
+  width: 12px;
+  height: 12px;
+  border-radius: 6px;
+  overflow: hidden;
+}
+
+.icon-volume-outer {
+  display: inline-block;
+  background: #c7c7c7;
+  border-radius: 10px;
+  overflow: hidden;
+  height: 18px;
+  padding: 5px 8px;
+  margin: 0 9px 0 0;
+  width: 32px;
+}
+.icon-volume-inner {
+  display: block;
+  background: #fff;
+  float: left;
+  width: 2px;
+  vertical-align: bottom;
+  margin: 0 1px 0;
+  height: 8px;
+}
+.icon-volume-inner1 {
+  height: 2px;
+  margin-top: 6px;
+}
+.icon-volume-inner2 {
+  height: 4px;
+  margin-top: 4px;
+}
+.icon-volume-inner3 {
+  height: 6px;
+  margin-top: 2px;
+}
+
+.icon-volume-outer1 .icon-volume-inner2,
+.icon-volume-outer1 .icon-volume-inner3,
+.icon-volume-outer1 .icon-volume-inner4,
+.icon-volume-outer2 .icon-volume-inner3,
+.icon-volume-outer2 .icon-volume-inner4,
+.icon-volume-outer3 .icon-volume-inner4 {
+  display: none;
+}
+
 /* Contacts modal */
 .contacts_modal_window .modal-dialog {
   max-width: 506px;

app/js/controllers.js

@@ -1485,45 +1485,65 @@ angular.module('myApp.controllers', [])
       });
     };
 
-    AppConfigManager.get('notify_nodesktop', 'notify_nosound', 'send_ctrlenter').then(function (settings) {
+    AppConfigManager.get('notify_nodesktop', 'notify_nosound', 'send_ctrlenter', 'notify_volume').then(function (settings) {
       $scope.notify.desktop = !settings[0];
-      $scope.notify.sound = !settings[1];
       $scope.send.enter = settings[2] ? '' : '1';
 
-      $scope.$watch('notify.sound', function(newValue, oldValue) {
+      if (settings[1]) {
-        if (newValue === oldValue) {
+        $scope.notify.volume = 0;
-          return false;
-        }
-        if (newValue) {
-          AppConfigManager.remove('notify_nosound');
       } else {
-          AppConfigManager.set({notify_nosound: true});
+        $scope.notify.volume = settings[3] > 0 && Math.ceil(settings[3] * 10) || 0;
+      }
+
+      $scope.notify.volumeOf4 = function () {
+        return 1 + Math.ceil(($scope.notify.volume - 1) / 3.3);
+      };
+
+      $scope.toggleSound = function () {
+        if ($scope.notify.volume) {
+          $scope.notify.volume = 0;
+        } else {
+          $scope.notify.volume = 5;
+        }
+      }
+
+      var testSoundPromise;
+      $scope.$watch('notify.volume', function (newValue, oldValue) {
+        if (newValue !== oldValue) {
+          var storeVolume = newValue / 10;
+          AppConfigManager.set({notify_volume: storeVolume});
+          AppConfigManager.remove('notify_nosound');
           NotificationsManager.clear();
+
+          if (testSoundPromise) {
+            $timeout.cancel(testSoundPromise);
+          }
+          testSoundPromise = $timeout(function () {
+            NotificationsManager.testSound(storeVolume);
+          }, 500);
         }
       });
 
-      $scope.$watch('notify.desktop', function(newValue, oldValue) {
+      $scope.toggleDesktop = function () {
-        if (newValue === oldValue) {
+        $scope.notify.desktop = !$scope.notify.desktop;
-          return false;
+
-        }
+        if ($scope.notify.desktop) {
-        if (newValue) {
           AppConfigManager.remove('notify_nodesktop');
         } else {
           AppConfigManager.set({notify_nodesktop: true});
         }
-      });
-
-      $scope.$watch('send.enter', function(newValue, oldValue) {
-        if (newValue === oldValue) {
-          return false;
       }
-        if (newValue) {
+
+      $scope.toggleCtrlEnter = function (newValue) {
+        $scope.send.enter = newValue;
+
+        if ($scope.send.enter) {
           AppConfigManager.remove('send_ctrlenter');
         } else {
           AppConfigManager.set({send_ctrlenter: true});
         }
         $rootScope.$broadcast('settings_changed');
-      });
+      }
     });
   })
 

app/js/directives.js

@@ -922,7 +922,6 @@ angular.module('myApp.directives', ['myApp.filters'])
           console.log('dl progress', progress);
           $scope.document.progress.done = progress.done;
           $scope.document.progress.percent = Math.max(1, Math.floor(100 * progress.done / progress.total));
-          $rootScope.$broadcast('history_update');
         })
       }
     }

app/js/services.js

@@ -3123,7 +3123,8 @@ angular.module('myApp.services', [])
     getPeerSettings: getPeerSettings,
     getPeerMuted: getPeerMuted,
     savePeerSettings: savePeerSettings,
-    updatePeerSettings: updatePeerSettings
+    updatePeerSettings: updatePeerSettings,
+    testSound: playSound
   };
 
   function getPeerSettings (peerID) {
@@ -3199,9 +3200,9 @@ angular.module('myApp.services', [])
       return false;
     }
 
-    AppConfigManager.get('notify_nosound').then(function (noSound) {
+    AppConfigManager.get('notify_nosound', 'notify_volume').then(function (settings) {
-      if (!noSound) {
+      if (!settings[0] && settings[1] === false || settings[1] > 0) {
-        playSound();
+        playSound(settings[1] || 0.5);
       }
     })
 
@@ -3240,9 +3241,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

@@ -59,26 +59,36 @@
       <div class="modal_section_body">
 
         <div class="tg_form_group">
-          <a class="tg_checkbox" ng-click="notify.desktop = !notify.desktop" ng-class="notify.desktop ? 'tg_checkbox_on' : ''">
+          <a class="tg_checkbox" ng-click="toggleDesktop()" ng-class="notify.desktop ? 'tg_checkbox_on' : ''">
             <span class="icon icon-checkbox-outer"><i class="icon-checkbox-inner"></i></span>
             <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_checkbox" ng-click="toggleSound()" ng-class="notify.volume ? 'tg_checkbox_on' : ''">
             <span class="icon icon-checkbox-outer"><i class="icon-checkbox-inner"></i></span>
             <span class="tg_checkbox_label">Sound</span>
           </a>
+
+          <div class="tg_range_wrap" ng-show="notify.volume > 0">
+            <span class="icon icon-volume-outer" ng-class="'icon-volume-outer' + notify.volumeOf4()">
+              <i class="icon-volume-inner icon-volume-inner1"></i>
+              <i class="icon-volume-inner icon-volume-inner2"></i>
+              <i class="icon-volume-inner icon-volume-inner3"></i>
+              <i class="icon-volume-inner icon-volume-inner4"></i>
+            </span>
+            <input type="range" class="tg_range" ng-model="notify.volume" min="1" max="10">
+          </div>
         </div>
 
         <div class="tg_form_group">
-          <a class="tg_radio" ng-click="send.enter = 1" ng-class="send.enter == 1 ? 'tg_radio_on' : ''">
+          <a class="tg_radio" ng-click="toggleCtrlEnter(1)" ng-class="send.enter == 1 ? 'tg_radio_on' : ''">
             <i class="icon icon-radio"></i>
             <span>
               <strong>Enter</strong> - send message, <strong>Shift + Enter</strong> - new line
             </span>
           </a>
 
-          <a class="tg_radio" ng-click="send.enter = 0" ng-class="send.enter == 0 ? 'tg_radio_on' : ''">
+          <a class="tg_radio" ng-click="toggleCtrlEnter(0)" ng-class="send.enter == 0 ? 'tg_radio_on' : ''">
             <i class="icon icon-radio"></i>
             <span>
               <strong>Ctrl + Enter</strong> - send message, <strong>Enter</strong> - new line