#27: Party mode playlist interface

sismics · Feb 22, 2015 · 421722b · 421722b
1 parent 9b5e008
commit 421722b
Show file tree

Hide file tree

Showing 6 changed files with 46 additions and 7 deletions.
diff --git a/music-web/src/main/webapp/src/app/controller/Main.js b/music-web/src/main/webapp/src/app/controller/Main.js
@@ -3,9 +3,22 @@
 /**
  * Main controller.
  */
-angular.module('music').controller('Main', function($state, $scope, Playlist) {
+angular.module('music').controller('Main', function($rootScope, $state, $scope, Playlist) {
+  $scope.partyMode = Playlist.isPartyMode();
+
+  // Keep party mode in sync
+  $rootScope.$on('playlist.party', function(e, partyMode) {
+    $scope.partyMode = partyMode;
+  });
+
+  // Start party mode
   $scope.startPartyMode = function() {
     Playlist.party(true, true);
     $state.transitionTo('main.playing');
   };
+
+  // Stop party mode
+  $scope.stopPartyMode = function() {
+    Playlist.setPartyMode(false);
+  };
 });
diff --git a/music-web/src/main/webapp/src/app/controller/Playing.js b/music-web/src/main/webapp/src/app/controller/Playing.js
@@ -8,6 +8,7 @@ angular.module('music').controller('Playing', function($scope, Playlist) {
     $scope.currentOrder = Playlist.currentOrder();
     $scope.currentStatus = Playlist.currentStatus();
     $scope.tracks = Playlist.getTracks();
+    $scope.partyMode = Playlist.isPartyMode();
     $scope.duration = _.reduce($scope.tracks,
         function(duration, track){
           return duration + track.length;
@@ -22,6 +23,7 @@ angular.module('music').controller('Playing', function($scope, Playlist) {
   $scope.$on('audio.play', updateScope);
   $scope.$on('audio.pause', updateScope);
   $scope.$on('audio.ended', updateScope);
+  $scope.$on('playlist.party', updateScope);
 
   // Remove a track from the playlist
   $scope.removeTrack = function(order) {

diff --git a/music-web/src/main/webapp/src/app/service/Playlist.js b/music-web/src/main/webapp/src/app/service/Playlist.js
@@ -43,6 +43,13 @@ angular.module('music').factory('Playlist', function($rootScope, Restangular, to
     $rootScope.$broadcast('playlist.updated', angular.copy(tracks));
   });
 
+  // Fill the playlist with new tracks when in party mode
+  $rootScope.$on('audio.set', function() {
+    if (partyMode && currentTrack >= _.size(tracks) - 2) {
+      service.party(false, false);
+    }
+  });
+
   // Service
   var service = {
     /**
@@ -324,11 +331,13 @@ angular.module('music').factory('Playlist', function($rootScope, Restangular, to
       localStorage.playlistVisualization = visualization;
     },
     setPartyMode: function(_partyMode) {
+      var prev = partyMode;
       partyMode = _partyMode;
-      if (partyMode != _partyMode) {
+      if (partyMode != prev) {
         $rootScope.$broadcast('playlist.party', partyMode);
       }
-    }
+    },
+    isPartyMode: function() { return partyMode; }
   };
 
   return service;

diff --git a/music-web/src/main/webapp/src/partial/main.html b/music-web/src/main/webapp/src/partial/main.html
@@ -9,10 +9,14 @@
     </div>
 
     <div class="panel">
-        <button class="btn btn-primary btn-block" title="Start listening to your prefered music endlessly" ng-click="startPartyMode()">
-          <span class="glyphicon glyphicon-glass"></span>
-          Get the party started!
-        </button>
+      <button ng-if="!partyMode" class="btn btn-primary btn-block" title="Start listening to your prefered music endlessly" ng-click="startPartyMode()">
+        <span class="glyphicon glyphicon-glass"></span>
+        Get the party started!
+      </button>
+      <button ng-if="partyMode" class="btn btn-danger btn-block" ng-click="stopPartyMode()">
+        <span class="glyphicon glyphicon-stop"></span>
+        Stop party mode now
+      </button>
     </div>
 
     <div class="panel panel-default">

diff --git a/music-web/src/main/webapp/src/partial/playing.html b/music-web/src/main/webapp/src/partial/playing.html
@@ -43,6 +43,9 @@ <h3 class="panel-title">
       </tr>
       </tbody>
     </table>
+
+    <div ng-if="partyMode" class="party-mode-overlay">
+    </div>
 
     <p ng-show="tracks.length == 0" class="text-center">
       <span class="glyphicon glyphicon-info-sign"></span>

diff --git a/music-web/src/main/webapp/src/style/main.less b/music-web/src/main/webapp/src/style/main.less
@@ -427,4 +427,12 @@ html, body {
   width: 100vw;
   height: 128px;
   pointer-events: none;
+}
+
+.party-mode-overlay {
+  position: relative;
+  background: linear-gradient(rgba(0,0,0,0), rgba(255,255,255,1));
+  height: 80px;
+  top: -90px;
+  margin-bottom: -80px;
 }