Fix #130: Asynchronously load tracks in browse view.

tkem · Nov 7, 2015 · 3179d31 · 3179d31
1 parent b28c50f
commit 3179d31
Show file tree

Hide file tree

Showing 2 changed files with 62 additions and 19 deletions.
diff --git a/www/app/library/browse.html b/www/app/library/browse.html
@@ -25,25 +25,35 @@
       </label>
     </form>
     <ion-list>
-      <div collection-repeat="ref in items"
-           ng-switch="ref.type"
+      <div collection-repeat="item in items"
+           ng-switch="item.type"
            >
-        <ion-item class="item-icon-left item-button-right"
-                  ng-click="actions.default(ref)"
+        <ion-item class="item-thumbnail-left item-button-right"
+                  item-height="68px"
+                  item-width="100%"
+                  ng-click="actions.default(item)"
                   ng-switch-when="track"
                   >
-          <i class="mopidy-mobile-icon-track"></i>
-          {{ref.name}}
+          <img ng-class="{'mopidy-mobile-thumbnail-track': !images[item.uri].uri}"
+               ng-src="{{images[item.uri].uri || thumbnail.src}}"
+               >
+          <h2>{{item.name}}</h2>
+          <h3 class="mopidy-mobile-artists" ng-show="item.artists.length">
+            <span ng-repeat="artist in item.artists">{{artist.name}}</span>
+          </h3>
+          <h4>{{item.album.name || item.genre || item.comment}}</h4>
           <button class="mopidy-mobile-button-icon mopidy-mobile-icon-menu"
-                  ng-click="popover.show($event, ref)">
+                  ng-click="popover.show($event, item)">
           </button>
         </ion-item>
         <ion-item class="item-icon-left item-icon-right"
-                  ui-sref="library.browse({type: ref.type, name: ref.name, uri: ref.uri})"
+                  item-height="54px"
+                  item-width="100%"
                   ng-switch-default
+                  ui-sref="library.browse({type: item.type, name: item.name, uri: item.uri})"
                   >
-          <i ng-class="'mopidy-mobile-icon-' + ref.type"></i>
-          {{ref.name}}
+          <i ng-class="'mopidy-mobile-icon-' + item.type"></i>
+          {{item.name}}
           <i class="mopidy-mobile-icon-link icon-accessory"></i>
         </ion-item>
       </div>

diff --git a/www/app/library/library.js b/www/app/library/library.js
@@ -150,8 +150,10 @@
       scope: $scope
     });
 
-    $scope.getImages = function(models) {
-      var images = {};
+    $scope.getImages = function(models, images) {
+      if (!images) {
+        images = {};
+      }
       coverart.getImages(models, {
         width: $scope.thumbnail.width,
         height: $scope.thumbnail.height
@@ -205,8 +207,42 @@
   });
 
   /* @ngInject */
-  module.controller('LibraryBrowseController', function($scope, connection, items, ref) {
-    angular.extend($scope, {'items': items, 'ref': ref});
+  module.controller('LibraryBrowseController', function($log, $scope, connection, items, ref) {
+    function getTracks(items, images) {
+      var tracks = items.filter(function(ref) {
+        return ref.type === 'track';
+      });
+      // TODO: make limit configurable?
+      if (tracks.length && tracks.length <= 100) {
+        var objs = {};
+        tracks.forEach(function(ref) {
+          objs[ref.uri] = ref;
+        });
+        connection().then(function(mopidy) {
+          return mopidy.library.lookup({uris: Object.keys(objs)});
+        }).then(function(result) {
+          angular.forEach(result, function(tracks, uri) {
+            if (tracks.length == 1) {
+              angular.extend(objs[uri], tracks[0]);
+            } else {
+              $log.warn('lookup returned ' + tracks.length + ' tracks', uri, tracks);
+            }
+          });
+          return tracks;
+        }).then(function(tracks) {
+          $scope.getImages(tracks, images);
+        });
+      }
+      return tracks;
+    }
+
+    angular.extend($scope, {
+      items: items,
+      ref: ref,
+      images: {}
+    });
+
+    $scope.tracks = getTracks(items, $scope.images);
 
     $scope.refresh = function() {
       connection().then(function(mopidy) {
@@ -223,14 +259,11 @@
       return connection().then(function(mopidy) {
         return mopidy.library.browse({uri: ref.uri});
       }).then(function(items) {
-        $scope.items = items;
+        $scope.items = items;  // FIXME: this will probably not work
+        $scope.tracks = getTracks(items, $scope.images);
       });
     };
 
-    $scope.tracks = items.filter(function(ref) {
-      return ref.type === 'track';
-    });
-
     $scope.$on('connection:state:online', function() {
       $scope.reload();
     });