Merge pull request #351 from Soundnode/shuffle

add shuffle feat. closes #226

Author: weblancaster

app/index.html

@@ -159,6 +159,9 @@ <h4 id="playerUser" class="player_user"></h4>
                 <span class="player_duration" id="player-duration"></span>
             </div>
             <div class="player_controls">
+                <span class="player_shuffle" ng-click="shuffle($event)">
+                    <i class="fa fa-random thin"></i>
+                </span>
                 <span class="player_prevSong" ng-click="prevSong($event)">
                     <i class="fa fa-step-backward thin"></i>
                 </span>
@@ -169,8 +172,8 @@ <h4 id="playerUser" class="player_user"></h4>
                 <span class="player_nextSong" ng-click="nextSong($event)">
                     <i class="fa fa-step-forward thin"></i>
                 </span>
-                <span class="player_queueList" ng-controller="QueueCtrl" ng-click="toggleQueue($event)">
-                    <i class="fa fa-list"></i>
+                <span class="player_queueList" ng-click="toggleQueue($event)">
+                    <i class="fa fa-list thin"></i>
                 </span>
             </div>
             <div class="player_volume">

app/public/js/common/playerService.js

@@ -27,6 +27,19 @@ app.factory('playerService', function($rootScope, $log, $timeout, $window, $stat
 
     $rootScope.isSongPlaying = false;
     $rootScope.isPlaylistPlaying = false;
+    $rootScope.shuffle= false;
+
+    /**
+     * Get a number betweem the min index and max index
+     * in the Queue array
+     * @returns {number} [index in array]
+     */
+    function shuffle() {
+        var max = queueService.size() - 1;
+        var min = 0;
+
+        queueService.currentPosition = Math.floor(Math.random() * (max - min) + min);
+    }
 
     /**
      * Get siblings of current song
@@ -67,6 +80,10 @@ app.factory('playerService', function($rootScope, $log, $timeout, $window, $stat
         }
     }
 
+    /**
+     * Activate track in view based on trackId
+     * @param trackId [contain track id]
+     */
     function activateCurrentSong(trackId) {
         var el = document.querySelector('span[data-song-id="' + trackId + '"]');
 
@@ -221,9 +238,12 @@ app.factory('playerService', function($rootScope, $log, $timeout, $window, $stat
      * @method playPrevSong
      */
     player.playPrevSong = function() {
-        queueService.prev();
+        if ( $rootScope.shuffle ) {
+            shuffle();
+        } else {
+            queueService.prev();
+        }
         this.playNewSong();
-        //$rootScope.$broadcast('activateQueue');
     };
 
     /**
@@ -233,9 +253,12 @@ app.factory('playerService', function($rootScope, $log, $timeout, $window, $stat
      * @method playPrevSong
      */
     player.playNextSong = function() {
-        queueService.next();
+        if ( $rootScope.shuffle ) {
+            shuffle();
+        } else {
+            queueService.next();
+        }
         this.playNewSong();
-        //$rootScope.$broadcast('activateQueue');
     };
 
     /**

app/public/js/common/queueCtrl.js

@@ -46,16 +46,4 @@ app.controller('QueueCtrl', function($scope, $rootScope, queueService, $log, $ti
         }
     };
 
-
-    $scope.toggleQueue = function($event) {
-
-        if ( $scope.data.length < 1 ) {
-            return;
-        }
-
-        $event.currentTarget.classList.toggle('active');
-        document.querySelector('.queueList').classList.toggle('active');
-
-        //$scope.activateTrackInQueue();
-    }
 });

app/public/js/player/playerCtrl.js

@@ -2,6 +2,7 @@
 
 app.controller('PlayerCtrl', function ($scope, $rootScope, playerService, hotkeys, $log, $timeout) {
     $scope.imgPath = 'public/img/temp-playing.png';
+
     $timeout(function() {
         if(window.localStorage.volume) {
             $scope.volume = window.localStorage.volume;
@@ -59,6 +60,21 @@ app.controller('PlayerCtrl', function ($scope, $rootScope, playerService, hotkey
         }
     };
 
+    $scope.shuffle = function($event) {
+        $event.currentTarget.classList.toggle('active');
+        if ( $rootScope.shuffle ) {
+            $rootScope.shuffle =  false;
+        } else {
+            $rootScope.shuffle = true;
+        }
+    };
+
+    $scope.toggleQueue = function($event) {
+
+        $event.currentTarget.classList.toggle('active');
+        document.querySelector('.queueList').classList.toggle('active');
+    };
+
 
     /*
     * Add native media shortcuts

app/public/stylesheets/sass/_components/_player.scss

@@ -199,8 +199,9 @@
   flex-grow: 1;
 }
 
+.player_shuffle.active,
 .player_queueList.active {
     & .fa {
         color: $scColor;
     }
-}
+}