Add artist support to frontend

gmusicprocurator/static/cs/metadata.coffee

@@ -16,17 +16,21 @@
 # You should have received a copy of the GNU General Public License
 # along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
-class gmp.Album extends AlpacAudio.TrackList
-  urlRoot: '/albums'
+class gmp.Metadata extends AlpacAudio.TrackList
 
   constructor: (data, options) ->
     super(data, options)
     @tracklist = new AlpacAudio.TrackListView(model: this)
 
   parse: (resp) ->
-    resp.tracks = new AlpacAudio.TrackListEntries(resp.tracks)
+    tracks_attr = @tracks_attr or 'tracks'
+    resp.tracks = new AlpacAudio.TrackListEntries(resp[tracks_attr])
     return resp
 
+
+class gmp.Album extends gmp.Metadata
+  urlRoot: '/albums'
+
   duration: ->
     ###
     Total duration of the album, in milliseconds.
@@ -59,24 +63,57 @@ class gmp.AlbumView extends AlpacAudio.TrackListView
     return data
 
 
+class gmp.Artist extends gmp.Metadata
+  urlRoot: '/artists'
+  tracks_attr: 'topTracks'
+
+  parse: (resp) ->
+    resp[@tracks_attr] = ({track: t} for t in resp[@tracks_attr])
+    return super(resp)
+
+
+class gmp.Artists extends Backbone.Collection
+
+
+class gmp.ArtistView extends AlpacAudio.SingletonView
+  className: 'scrollable-container'
+  id: 'artist'
+  tagName: 'section'
+  template: AlpacAudio.get_template('artist', 'artist')
+
+
 class gmp.MetadataRouter extends Backbone.Router
   routes:
     'albums/:id': 'load_album'
+    'artists/:id': 'load_artist'
 
-  render_album: (album) ->
-    if gmp.album_view?
-      gmp.album_view.model = album
+  render_item: (item, view_attr, view_cls, tracklist_selector) ->
+    if gmp[view_attr]?
+      gmp[view_attr].model = item
     else
-      gmp.album_view = new gmp.AlbumView(model: album)
-    gmp.album_view.renderify('main nav:first', 'after')
-    album.tracklist.renderify('#album-metadata', 'after')
+      gmp[view_attr] = new view_cls(model: item)
+    gmp[view_attr].renderify('main nav:first', 'after')
+    item.tracklist.renderify(tracklist_selector, 'after')
 
-  load_album: (id) ->
-    gmp.albums ?= new gmp.Albums
-    album = gmp.albums.get(id)
-    if album
-      @render_album(album)
+  render_album: (album) =>
+    @render_item(album, 'album_view', gmp.AlbumView, '#album-metadata')
+
+  render_artist: (artist) =>
+    artist.set('dont_scroll', true)
+    @render_item(artist, 'artist_view', gmp.ArtistView, '#related-artists + h4')
+
+  load_item: (id, collection_attr, collection, model, render_item) ->
+    gmp[collection_attr] ?= new collection
+    item = gmp[collection_attr].get(id)
+    if item
+      render_item(item)
     else
-      album = new gmp.Album(id: id)
-      gmp.albums.add(album)
-      album.fetch(success: => @render_album(album))
+      item = new model(id: id)
+      gmp[collection_attr].add(item)
+      item.fetch(success: -> render_item(item))
+
+  load_album: (id) ->
+    @load_item(id, 'albums', gmp.Albums, gmp.Album, @render_album)
+
+  load_artist: (id) ->
+    @load_item(id, 'artists', gmp.Artists, gmp.Artist, @render_artist)

gmusicprocurator/static/scss/include/_mixins.scss

@@ -3,6 +3,12 @@
   @include flex(1);
 }
 
+@mixin overflow-ellipsis {
+  overflow-x: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
 @mixin scrollable-flexbox-container {
   @include flexify;
 

gmusicprocurator/static/scss/sections/_metadata.scss

@@ -1,22 +1,91 @@
-#album-metadata {
+#album-metadata,
+#artist-metadata {
   @include display(flex);
   @include flex-direction(row);
 
   figcaption {
     display: inline-block;
+    padding: 0 10px;
     vertical-align: top;
   }
 
   figure {
+    @include display(flex);
+    @include flex-direction(row);
     @include flex-grow(1);
     margin: 0;
 
     img {
-      width: 300px;
+      object-fit: contain;
     }
   }
+}
 
+#album,
+#artist {
   p + p {
     text-indent: 0;
   }
 }
+
+#album-metadata img {
+  max-height: 300px;
+  max-width: 300px;
+}
+
+#artist-metadata img {
+  max-height: 180px;
+  max-width: 360px;
+}
+
+#artist-metadata + section > div {
+  @include display(flex);
+  @include flex-direction(column);
+}
+
+#artist > div > section {
+  display: block;
+}
+
+#albums {
+  margin-top: 10px;
+}
+
+.secondary-album-art {
+  width: 160px;
+}
+
+.secondary-artist-art {
+  max-width: 320px;
+}
+
+.scrollable-figures {
+  ul {
+    margin: 0;
+    overflow-x: auto;
+    padding: 0;
+    white-space: nowrap;
+    width: 99%;
+  }
+
+  li {
+    display: inline-block;
+    list-style-type: none;
+    margin: 0 10px;
+
+    &:first-child,
+    &:last-child {
+      margin: 0;
+    }
+  }
+
+  figcaption p {
+    @include overflow-ellipsis;
+  }
+
+  figure,
+  img {
+    display: inline-block;
+    margin: 0;
+  }
+}

gmusicprocurator/templates/index.html

@@ -24,4 +24,5 @@
 {{ mtpl('player') }}
 {{ mtpl('now-playing') }}
 {{ mtpl('album') }}
+{{ mtpl('artist') }}
 {% endblock footer %}

gmusicprocurator/templates/js/album.mtpl

@@ -1,5 +1,5 @@
 <div>[% /* For flexbox */ %]
-  <h3>[[ album.name ]] - [[ album.artist ]]</h3>
+  <h3>[[ album.name ]] - [% if (!!album.artistId) { %]<a href="#/artists/[[ album.artistId[0] ]]">[% } %][[ album.artist ]][% if (!!album.artistId) { %]</a>[% } %]</h3>
 
   <section id="album-metadata">
     <figure>

gmusicprocurator/templates/js/artist.mtpl

@@ -0,0 +1,44 @@
+<div>[% /* For flexbox */ %]
+  <h3>[[ artist.name ]]</h3>
+
+  <section id="artist-metadata">
+    <figure>
+      <img src="[[ artist.artistArtRef ]]" alt="">
+      <figcaption>
+        <p>[[ artist.artistBio ]]</p>
+      </figcaption>
+    </figure>
+  </section>
+  <section class="scrollable-contents"><div>
+    [% if (!!artist.albums) { %]
+    <section id="albums" class="scrollable-figures">
+      <h4>Albums</h4>
+      <ul>
+      [% artist.albums.forEach(function (album) { %]
+        <li><figure class="secondary-album-art">
+          <a href="#/albums/[[ album.albumId ]]"><img src="[[ album.albumArtRef ]]" alt="" title="[[ album.name ]]" class="secondary-album-art"></a>
+          <figcaption>
+            <p><a href="#/albums/[[ album.albumId ]]" title="[[ album.name ]]">[[ album.name ]]</a></p>
+            <p>[% if (!!album.artistId[0]) { %]<a href="#/artists/[[ album.artistId[0] ]]" title="[[ album.artist ]]">[% } %][[ album.artist ]][% if (!!album.artistId[0]) { %]</a>[% } %]</p>
+          </figcaption>
+        </figure></li>
+      [% }); /* artist.albums.forEach */ %]
+      </ul>
+    </section>
+    [% } /* artist.albums */ %]
+    [% if (!!artist.related_artists) { %]
+    <section id="related-artists" class="scrollable-figures">
+      <h4>Related Artists</h4>
+      <ul>
+      [% artist.related_artists.forEach(function (related) { %]
+        <li><a href="#/artists/[[ related.artistId ]]"><figure class="secondary-artist-art">
+          <img src="[[ related.artistArtRef ]]" alt="" title="[[ related.name ]]" class="secondary-artist-art">
+          <figcaption title="[[ related.name ]]">[[ related.name ]]</figcaption>
+        </figure></a></li>
+      [% }); /* artist.related_artists.forEach */ %]
+      </ul>
+    </section>
+    [% } /* artist.related_artists */ %]
+    <h4>Top Tracks</h4>
+  </div></section>
+</div>

gmusicprocurator/templates/js/playlist-track.mtpl

@@ -6,7 +6,7 @@ var aa = track.get('albumArtRef');
   <td class="albumart">[% if (!!aa) { %]<span data-idx="[[ pt.idx ]]" data-art-url="[[ aa[0].url ]]" style="background-image:url([[ aa[0].url ]])"><span class="fa"></span></span>[% } %]</td>
   <td>[[ track.get('title') ]]</td>
   <td>[[ AlpacAudio.human_readable_milliseconds(track.get('durationMillis')) ]]</td>
-  <td>[[ track.get('artist') ]]</td>
+  <td><a href="#/artists/[[ track.get('artistId')[0] ]]">[[ track.get('artist') ]]</a></td>
   <td><a href="#/albums/[[ track.get('albumId') ]]">[[ track.get('album') ]]</a></td>
   <td>[[ track.get('trackNumber') ]]</td>
 </tr>

gmusicprocurator/templates/js/playlist.mtpl

@@ -14,8 +14,10 @@
     [% } /* !queue */ %]
   </section>
   [% } /* playlist.description */ %]
+  [% if (!playlist.dont_scroll) { %]
   <div class="scrollable-contents">
     <div>[% /* For flexbox */ %]
+  [% } /* !playlist.dont_scroll */ %]
       <table[% if (!!playlist.id) { %] data-playlist-id="[[ playlist.id ]]"[% } %] class="listing pure-table pure-table-striped">
         <thead>
           <tr>
@@ -31,6 +33,8 @@
           [[ playlist.tracks.map(playlist.render_track).join('') ]]
         </tbody>
       </table>
+  [% if (!playlist.dont_scroll) { %]
     </div>
   </div>
+  [% } /* !playlist.dont_scroll */ %]
 </div>