Add album support to frontend

gmusicprocurator/assets.py

@@ -136,6 +136,7 @@ def bundlify(fmt, modules, **kwargs):
     'vendor/alpacaudio/script/backends/aurora',
     'vendor/alpacaudio/script/player',
     'vendor/alpacaudio/script/playlist',
+    'cs/metadata',
     'cs/playlist',
     'cs/all_songs',
     'vendor/alpacaudio/script/queue',

gmusicprocurator/static/cs/app.coffee

@@ -51,6 +51,7 @@ class gmp.AppView extends Backbone.View
         success: ->
           $('#playlists-loading').remove()
           gmp.playlist_router = new gmp.PlaylistRouter
+          gmp.metadata_router = new gmp.MetadataRouter
           Backbone.history.start()
     else
       $('#playlists-loading').remove()

gmusicprocurator/static/cs/metadata.coffee

@@ -0,0 +1,82 @@
+# -*- coding: utf-8 -*-
+# vim: set ts=2 sts=2 sw=2 :
+#
+###! Copyright (C) 2015 Mark Lee, under the GPL (version 3+) ###
+#
+# This program is free software: you can redistribute it and/or modify
+# it under the terms of the GNU General Public License as published by
+# the Free Software Foundation, either version 3 of the License, or
+# (at your option) any later version.
+#
+# This program is distributed in the hope that it will be useful,
+# but WITHOUT ANY WARRANTY; without even the implied warranty of
+# MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+# GNU General Public License for more details.
+#
+# 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'
+
+  constructor: (data, options) ->
+    super(data, options)
+    @tracklist = new AlpacAudio.TrackListView(model: this)
+
+  parse: (resp) ->
+    resp.tracks = new AlpacAudio.TrackListEntries(resp.tracks)
+    return resp
+
+  duration: ->
+    ###
+    Total duration of the album, in milliseconds.
+    ###
+    entries = if @get? then @get('tracks') else @tracks
+    times = entries.map (entry) -> entry.get('track').get('durationMillis')
+    _.reduce(times, (sum, len) -> parseInt(sum) + parseInt(len))
+
+  genres: ->
+    ###
+    A list of unique genres, generated from track metadata.
+    ###
+    _.uniq(@get('tracks').map((t) -> t.get('track').get('genre')))
+
+
+class gmp.Albums extends Backbone.Collection
+
+
+class gmp.AlbumView extends AlpacAudio.TrackListView
+  className: 'scrollable-container'
+  id: 'album'
+  tagName: 'section'
+  template: AlpacAudio.get_template('album', 'album')
+
+  render_data: ->
+    data = super()
+    data.genres = @model.genres()
+    data.tracks.each (track) -> track.set('albumArtRef', data.albumArtRef)
+    data.duration = @model.duration()
+    return data
+
+
+class gmp.MetadataRouter extends Backbone.Router
+  routes:
+    'albums/:id': 'load_album'
+
+  render_album: (album) ->
+    if gmp.album_view?
+      gmp.album_view.model = album
+    else
+      gmp.album_view = new gmp.AlbumView(model: album)
+    gmp.album_view.renderify('main nav:first', 'after')
+    album.tracklist.renderify('#album-metadata', 'after')
+
+  load_album: (id) ->
+    gmp.albums ?= new gmp.Albums
+    album = gmp.albums.get(id)
+    if album
+      @render_album(album)
+    else
+      album = new gmp.Album(id: id)
+      gmp.albums.add(album)
+      album.fetch(success: => @render_album(album))

gmusicprocurator/static/scss/main.scss

@@ -5,6 +5,7 @@
 
 @import 'sections/player';
 @import 'sections/playlist';
+@import 'sections/metadata';
 
 #playlists {
   .queue {

gmusicprocurator/static/scss/sections/_metadata.scss

@@ -0,0 +1,22 @@
+#album-metadata {
+  @include display(flex);
+  @include flex-direction(row);
+
+  figcaption {
+    display: inline-block;
+    vertical-align: top;
+  }
+
+  figure {
+    @include flex-grow(1);
+    margin: 0;
+
+    img {
+      width: 300px;
+    }
+  }
+
+  p + p {
+    text-indent: 0;
+  }
+}

gmusicprocurator/static/scss/sections/_playlist.scss

@@ -59,12 +59,12 @@
   .name {
     @include flexify;
   }
+}
 
-  ul {
-    list-style-type: none;
-    margin-top: 0;
-    padding-left: 0;
-    padding-right: 5px;
-    text-align: right;
-  }
+.actions {
+  list-style-type: none;
+  margin-top: 0;
+  padding-left: 0;
+  padding-right: 5px;
+  text-align: right;
 }

gmusicprocurator/templates/index.html

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

gmusicprocurator/templates/js/album.mtpl

@@ -0,0 +1,19 @@
+<div>[% /* For flexbox */ %]
+  <h3>[[ album.name ]] - [[ album.artist ]]</h3>
+
+  <section id="album-metadata">
+    <figure>
+      <img src="[[ album.albumArtRef ]]" alt="">
+      <figcaption>
+        <p>[[ album.tracks.length ]] song[% if (album.tracks.length != 1) { %]s[% } %]</p>
+        <p>[[ AlpacAudio.human_readable_milliseconds(album.duration) ]]</p>
+        <p>[[ album.year ]]</p>
+        <p>[[ album.genres.join(', ') ]]</p>
+      </figcaption>
+    </figure>
+    <ul class="actions">
+      <li><a href="/albums/[[ album.id ]]">XSPF Playlist</a></li>
+      <li><button class="add-to-queue">Add to queue</button></li>
+    </ul>
+  </section>
+</div>

gmusicprocurator/templates/js/playlist-track.mtpl

@@ -7,6 +7,6 @@ var aa = track.get('albumArtRef');
   <td>[[ track.get('title') ]]</td>
   <td>[[ AlpacAudio.human_readable_milliseconds(track.get('durationMillis')) ]]</td>
   <td>[[ track.get('artist') ]]</td>
-  <td>[[ track.get('album') ]]</td>
+  <td><a href="#/albums/[[ track.get('albumId') ]]">[[ track.get('album') ]]</a></td>
   <td>[[ track.get('trackNumber') ]]</td>
 </tr>