load more tracks in playlist if more than 20

thisissoon · Jul 16, 2015 · 564cbb9 · 564cbb9
1 parent 5274cb5
commit 564cbb9
Show file tree

Hide file tree

Showing 2 changed files with 40 additions and 2 deletions.
diff --git a/app/js/playlist/controllers/PlaylistCtrl.js b/app/js/playlist/controllers/PlaylistCtrl.js
@@ -70,21 +70,52 @@ angular.module("FM.playlist.PlaylistCtrl", [
          */
         $scope.meta = playlistMeta;
 
+        /**
+         * Paging properties
+         * @property {Object} page
+         */
+        $scope.page = {
+            loading: false,
+            pages: 1,
+            total: playlistData.meta.totalPages
+        };
+
         /**
          * Update `playlist` with queue data from the API
          * @method refreshPlaylist
          */
-        $scope.refreshPlaylist = function refreshPlaylistQueue(){
+        $scope.refreshPlaylist = function refreshPlaylist(){
             PlayerQueueResource.query().$promise
                 .then(function (response){
                     $scope.playlist = response.items;
+                    $scope.page.total = response.meta.totalPages;
+                    $scope.page.pages = 1;
                 });
+
             PlayerQueueResource.meta().$promise
                 .then(function (response){
                     $scope.meta = response;
                 });
         };
 
+        /**
+         * Load more tracks from playlist
+         * @method loadMore
+         */
+        $scope.loadMore = function loadMore() {
+
+            $scope.page.loading = true;
+            $scope.page.pages++;
+
+            PlayerQueueResource.query({ page: $scope.page.pages }).$promise
+                .then(function (response){
+                    $scope.playlist = $scope.playlist.concat(response.items);
+
+                    $scope.page.loading = false;
+                    $scope.page.total = response.meta.totalPages ? response.meta.totalPages : 0;
+                });
+        };
+
         /**
          * On play event, set playback state variables
          * refresh playlist if song URI doesn't match the playlist
@@ -100,7 +131,7 @@ angular.module("FM.playlist.PlaylistCtrl", [
          * @method onEnd
          */
         $scope.onEnd = function onEnd(event, data) {
-            if ($scope.playlist[0].track.uri === data.uri) { // jshint ignore:line
+            if (($scope.playlist[0].track.uri === data.uri) && ($scope.page.pages === $scope.page.total)) { // jshint ignore:line
                 $scope.meta.total--;
                 $scope.meta.play_time = $scope.meta.play_time - $scope.playlist[0].track.duration; // jshint ignore:line
                 $scope.playlist.splice(0, 1);

diff --git a/app/partials/playlist.html b/app/partials/playlist.html
@@ -20,4 +20,11 @@ <h2 class="h1" ng-if="!playlist.length > 0">Playlist is empty</h2>
         </li>
     </ul>
 
+    <img ng-show="page.loading" class="center-block loading-animation" src="img/icons/loading-animation.gif" width="50">
+
+    <div class="row text-center">
+        <button class="btn btn-primary" ng-click="loadMore()" ng-if="page.total > 1 && page.pages < page.total" ng-disabled="page.loading">Load more</button>
+        <p ng-if="page.total > 1 && page.pages >= page.total">No more results</p>
+    </div>
+
 </div>