ui: implement now playing section

app.py

@@ -23,9 +23,43 @@
 sp = None
 
 
+class Track:
+
+    @classmethod
+    def from_id(cls, id):
+        return cls(sp.track(id))
+
+    def __init__(self, metadata):
+        self._metadata = metadata
+
+    @property
+    def human_duration(self):
+        duration = datetime.timedelta(milliseconds=self._metadata['duration_ms'])
+
+        return '{:02d}:{:02d}'.format(
+            (duration.seconds % 3600) // 60,
+            duration.seconds % 60,
+        )
+
+
 @app.route('/', methods=['GET'])
 def get_index():
-    return flask.render_template('index.html', queue=queue.queue, errors=[])
+    now_playing_track = sp.current_playback()
+
+    now_playing_track['artist'] = ', '.join(
+        artist['name'] for artist in now_playing_track['item']['artists']
+    )
+
+    for image in now_playing_track['item']['album']['images']:
+        if image['height'] == 300:
+            now_playing_track['album_art_url'] = image['url']
+
+    return flask.render_template(
+        'index.html',
+        now_playing=now_playing_track,
+        queue=queue.queue,
+        errors=[],
+    )
 
 def handle_playlist_uri(uri):
     for item in sp.user_playlist(user=None, playlist_id=uri)['tracks']['items']:
@@ -42,6 +76,10 @@ def post_index():
 
     *_, uri_type, _ = uri.split(':')
 
+    if 'http' in uri_type:
+        # given a url, so split by '/'
+        *_, uri_type, _ = uri.split('/')
+
     try:
         tracks = globals()[f'handle_{uri_type}_uri'](uri)
     except spotipy.client.SpotifyException as e:
@@ -111,11 +149,17 @@ def main():
     if not os.path.exists(os.path.dirname(cache_path)):
         os.makedirs(os.path.dirname(cache_path))
 
+    scopes = [
+        'user-read-playback-state',
+        'playlist-read-collaborative',
+        'user-modify-playback-state',
+    ]
+
     oauth_manager = spotipy.oauth2.SpotifyOAuth(
         client_id=args.client_id,
         client_secret=args.client_secret,
         redirect_uri=args.redirect_uri,
-        scope='playlist-read-collaborative user-modify-playback-state',
+        scope=' '.join(scopes),
         cache_path=cache_path,
     )
 

static/css/app.css

@@ -6,6 +6,10 @@ body {
   background-color: #212529;
 }
 
+h3 {
+  color: white;
+}
+
 .table-row {
   cursor: pointer;
 }

templates/index.html

@@ -22,6 +22,20 @@
                 <img src="{{ url_for('static', filename='img/cat.png') }}" class="img-fluid">
             </div>
         </div>
+
+        {% if now_playing %}
+        <div class="row mt-5 align-items-center">
+            <div class="col-1 offset-md-2">
+                <img src="{{ now_playing['album_art_url'] }}"
+                     class="rounded img-thumbnail image-fluid float-left">
+            </div>
+            <div class="col-9">
+                <h3>{{ now_playing['item']['name'] }}</h3>
+                <small class="text-muted">{{ now_playing['artist'] }}</small>
+            </div>
+        </div>
+        {% endif %}
+
 		<div class="row mt-5 mb-5 align-items-center">
 			<div class="col-sm-12 col-md-8 offset-md-2">
                 <div class="table-responsive">