Add Media Session support (#335)

app/javascript/src/coffeescript/player.js.coffee

@@ -31,6 +31,18 @@ class Player
     this._updatePlaylistMode()
     this._highlightActiveTrack(true)
 
+    # Support next/prev buttons on mobile lock screens
+    navigator.mediaSession.setActionHandler 'previoustrack', =>
+      this.previousTrack()
+    navigator.mediaSession.setActionHandler 'nexttrack', =>
+      this.nextTrack()
+    navigator.mediaSession.setActionHandler 'play', =>
+      this.togglePause()
+    navigator.mediaSession.setActionHandler 'pause', =>
+      this.togglePause()
+    navigator.mediaSession.setActionHandler 'stop', =>
+      this.togglePause()
+
     # Play first track on the page if no audio playing, not a playlist page, and no track slug in URL
     unless @active_track_id or @playlist_mode or this._handleAutoPlayTrack()
       if track_id = $('.playable_track').first().data('id')
@@ -98,8 +110,10 @@ class Player
     if @active_track_id
       if @audioElement.paused
         @audioElement.play()
+        navigator.mediaSession.playbackState = 'playing'
       else
         @audioElement.pause()
+        navigator.mediaSession.playbackState = 'paused'
       this._updatePlayButton()
     else
       this._playRandomShowOrPlaylist()
@@ -220,6 +234,7 @@ class Player
       success: (r) =>
         if r.success
           this._updateDisplay r
+          this._updateMediaSession r
           this._loadAndPlayAudio r.mp3_url
         else
           @Util.feedback { alert: "Error retrieving track info" }
@@ -251,6 +266,45 @@ class Player
     else
       @$player_detail.html "<a class=\"show_date\" href=\"#{r.show_url}\">#{r.show}</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href=\"#{r.venue_url}\">#{@Util.truncate(r.venue)}</a>"
 
+  _updateMediaSession: (r) ->
+    console.log(r)
+    navigator.mediaSession.metadata = new MediaMetadata
+      title: r.title,
+      artist: 'Phish',
+      album: r.show,
+      artwork: [
+        {
+          src: 'https://phish.in/static/logo-96.png',
+          sizes: '96x96',
+          type: 'image/png'
+        },
+        {
+          src: 'https://phish.in/static/logo-128.png',
+          sizes: '128x128',
+          type: 'image/png'
+        },
+        {
+          src: 'https://phish.in/static/logo-192.png',
+          sizes: '192x192',
+          type: 'image/png'
+        },
+        {
+          src: 'https://phish.in/static/logo-256.png',
+          sizes: '256x256',
+          type: 'image/png'
+        },
+        {
+          src: 'https://phish.in/static/logo-384.png',
+          sizes: '384x384',
+          type: 'image/png'
+        },
+        {
+          src: 'https://phish.in/static/logo-512.png',
+          sizes: '512x512',
+          type: 'image/png'
+        }
+      ]
+
   _updatePlayButton: ->
     if @audioElement.paused
       @$playpause.removeClass 'playing'
@@ -277,6 +331,7 @@ class Player
         # alert('Press play button to listen')
       else
         @audioElement.play()
+        navigator.mediaSession.playbackState = 'playing'
       this._updatePlayButton()
 
 export default Player