add volume control

css/player.css

@@ -352,8 +352,21 @@ a {
 
 .m-pbar {
     position: relative;
-    margin-top: 14px;
+    
+}
+
+.m-pbar.play {
     width: 80%;
+    margin-top: 14px;
+}
+
+.m-pbar.volume {
+    position: absolute;
+    right: 13px;
+    bottom: 11px;
+    float: right;
+    width: 56%;
+    margin-top: 0px;
 }
 
 .m-pbar .barbg, .m-pbar .cur, .m-pbar .rdy {
@@ -413,15 +426,13 @@ em, i {
 .m-playbar .ctrl {
     position: absolute;
     right: 0px;
-    bottom: 17px;
+    bottom: 48px;
     z-index: 10;
-    width: 110px;
+    width: 79px;
     padding-left: 13px;
     float: none;
 }
 
-
-
 .m-playbar .icn-add {
     background-position: -25px 0px;
 }
@@ -434,6 +445,14 @@ em, i {
     background-position: -125px 0px;
 }
 
+.m-playbar .icn-vol {
+    background-position: -175px 0px;
+}
+
+.m-playbar .icn-vol-mute {
+    background-position: -200px 0px;
+}
+
 .m-playbar .icn-list:hover {
     background-position: -125px -25px;
 }
@@ -446,6 +465,13 @@ em, i {
     background-position: -50px -25px;
 }
 
+.m-playbar .icn-vol:hover {
+    background-position: -175px -25px;
+}
+
+.m-playbar .icn-vol-mute:hover {
+    background-position: -200px -25px;
+}
 
 .m-playbar .icn-shuffle {
     background-position: -150px 0px;
@@ -506,6 +532,13 @@ em, i {
     background-position: -75px -25px;
 }
 
+.volume-ctrl {
+    position: absolute;
+    right: 0px;
+    bottom: 16px;
+    width: 110px;
+}
+
 li {
     list-style: none;
 }

js/app.js

@@ -286,6 +286,7 @@
       current.nowplaying_track_id = data;
       localStorage.setObject('player-settings', current);
     });
+
   }]);
 
 
@@ -295,14 +296,15 @@
      function($scope, $timeout, $log, $anchorScroll, $location, angularPlayer,
       $http, $httpParamSerializerJQLike, $rootScope, Notification, loWeb){
       $scope.menuHidden = true;
-
+      $scope.volume = angularPlayer.getVolume();
+      $scope.mute = angularPlayer.getMuteStatus();
       $scope.settings = {"playmode": 0, "nowplaying_track_id": -1};
 
       $scope.loadLocalSettings = function() {
-        var defaultSettings = {"playmode": 0, "nowplaying_track_id": -1}
+        var defaultSettings = {"playmode": 0, "nowplaying_track_id": -1, "volume": 90};
         var localSettings = localStorage.getObject('player-settings');
         if (localSettings == null) {
-          $scope.settings = {"playmode": 0, "nowplaying_track_id": -1};
+          $scope.settings = defaultSettings;
           $scope.saveLocalSettings();
         }
         else {
@@ -319,6 +321,12 @@
         if (angularPlayer.getShuffle() != shuffleSetting) {
           angularPlayer.toggleShuffle();
         }
+
+        $scope.volume = $scope.settings.volume;
+        if($scope.volume == null) {
+          $scope.volume = 90;
+          $scope.saveLocalSettings();
+        }
       }
 
       $scope.saveLocalSettings = function() {
@@ -350,6 +358,12 @@
         $scope.saveLocalSettings();
       };
 
+      $scope.$on('music:volume', function(event, data) {
+          $scope.$apply(function() {
+              $scope.volume = data;
+          });
+      });
+
       $scope.$on('angularPlayer:ready', function(event, data) {
         $log.debug('cleared, ok now add to playlist');
         if (angularPlayer.getRepeatStatus() == false) {
@@ -400,6 +414,11 @@
         }
       };
 
+      $scope.toggleMuteStatus = function() {
+        // mute function is indeed toggle mute status.
+        angularPlayer.mute();
+      }
+
       $scope.playmylist = function(list_id){
         $timeout(function(){
           angularPlayer.clearPlaylist(function(data) {
@@ -471,6 +490,10 @@
           $scope.myProgress = data;
         });
       });
+
+      $scope.$on('music:mute', function (event, data) {
+        $scope.mute = data;
+      });
   }]);
 
   app.controller('InstantSearchController', ['$scope', '$http', '$timeout', 'angularPlayer', 'loWeb',
@@ -589,17 +612,58 @@
 
   app.directive('draggable', ['angularPlayer', '$document', '$rootScope',
       function(angularPlayer, $document, $rootScope) {
-    return function(scope, element, attr) {
+    return function(scope, element, attrs) {
       var x;
       var container; 
+      var mode = attrs.mode;
+
+      function onMyMousedown() {
+        if(mode == 'play') {
+          scope.changingProgress = true;
+        }
+      }
+
+      function onMyMouseup() {
+        if(mode == 'play') {
+          scope.changingProgress = false;
+        }
+      }
+
+      function onMyUpdateProgress(progress) {
+        if(mode == 'play') {
+          $rootScope.$broadcast('track:myprogress', progress*100);
+        }
+        if(mode == 'volume') {
+          angularPlayer.adjustVolumeSlider(progress*100);
+          if (angularPlayer.getMuteStatus() == true) {
+            angularPlayer.mute();
+          }
+        }
+      }
+
+      function onMyCommitProgress(progress) {
+        if(mode == 'play') {
+          if (angularPlayer.getCurrentTrack() === null) {
+            return;
+          }
+          var sound = soundManager.getSoundById(angularPlayer.getCurrentTrack());
+          var duration = sound.durationEstimate;
+          sound.setPosition(progress * duration);
+        }
+        if (mode == 'volume') {
+          var current = localStorage.getObject('player-settings');
+          current.volume = progress*100;
+          localStorage.setObject('player-settings', current);
+        }
+      }
 
       element.on('mousedown', function(event) {
-        scope.changingProgress = true;
-        container = document.getElementById('progressbar').getBoundingClientRect();
+        onMyMousedown();
+        container = document.getElementById(attrs.id).getBoundingClientRect();
         // Prevent default dragging of selected content
         event.preventDefault();
         x = event.clientX - container.left;
-        setPosition();
+        updateProgress();
         $document.on('mousemove', mousemove);
         $document.on('mouseup', mouseup);
 
@@ -607,19 +671,22 @@
 
       function mousemove(event) {
         x = event.clientX - container.left;
-        setPosition();
+        updateProgress();
       }
 
-      function changeProgress(progress) {
-        if (angularPlayer.getCurrentTrack() === null) {
-            return;
-        }
-        var sound = soundManager.getSoundById(angularPlayer.getCurrentTrack());
-        var duration = sound.durationEstimate;
-        sound.setPosition(progress * duration);
+      function mouseup() {
+        var progress = x / (container.right - container.left);
+        commitProgress(progress);
+        $document.off('mousemove', mousemove);
+        $document.off('mouseup', mouseup);
+        onMyMouseup();
       }
 
-      function setPosition() {
+      function commitProgress(progress) {
+        onMyCommitProgress(progress);
+      }
+
+      function updateProgress() {
         if (container) {
           if (x < 0) {
             x = 0;
@@ -628,15 +695,7 @@
           }
         }
         var progress = x / (container.right - container.left);
-        $rootScope.$broadcast('track:myprogress', progress*100);
-      }
-
-      function mouseup() {
-        var progress = x / (container.right - container.left);
-        changeProgress(progress);
-        $document.off('mousemove', mousemove);
-        $document.off('mouseup', mouseup);
-        scope.changingProgress = false;
+        onMyUpdateProgress(progress);
       }
     };
   }]);

js/vendor/angular-soundmanager2.js

@@ -4938,7 +4938,7 @@ ngSoundManager.directive('soundManager', ['$filter', '$timeout', 'angularPlayer'
                 });
                 scope.$on('currentTrack:position', function(event, data) {
                     $timeout(function() {
-                        scope.currentPostion = $filter('humanTime')(data);
+                        scope.currentPosition = $filter('humanTime')(data);
                     });
                 });
                 scope.$on('currentTrack:duration', function(event, data) {

listen1.html

@@ -275,15 +275,15 @@
             <a open-song-source="currentPlaying" class="src" title="原始链接"></a>  
           </div>
 
-          <div class="m-pbar" >
-            <div class="barbg" id="progressbar" draggable>
+          <div class="m-pbar play" >
+            <div class="barbg" id="progressbar" mode="play" draggable>
               <!-- <div class="rdy" ng-style="{width : myProgress + '%' }"></div> -->
               <div  class="cur" ng-style="{width : myProgress + '%' }">
                 <span class="btn"><i></i></span>
               </div>
             </div>
 
-            <span class="time"><em>{{ currentPostion }}</em> <span ng-show=" currentDuration!=none ">/</span> {{ currentDuration }}</span>
+            <span class="time"><em>{{ currentPosition }}</em> <span ng-show=" currentDuration!=none ">/</span> {{ currentDuration }}</span>
           </div>
 
           <!-- init soundManager2 player -->
@@ -296,6 +296,17 @@
           <a class="icn icn-list" title="列表" ng-click="togglePlaylist()"></a>
         </div>
 
+        <div class="volume-ctrl">
+          <a class="icn" ng-class="{ 'icn-vol-mute': mute, 'icn-vol': mute == false }"  title="音量" ng-click="toggleMuteStatus()"></a>
+          <div class="m-pbar volume" >
+            <div class="barbg" id="volumebar" mode="volume" draggable>
+              <div class="cur" ng-style="{width : volume + '%' }">
+                <span class="btn"><i></i></span>
+              </div>
+            </div>
+          </div>
+        </div>
+
         <div class="menu" ng-hide="menuHidden">
           <div class="menu-header">播放列表 
               <a class="remove-all" ng-click="menuHidden=!menuHidden">