Merge branch 'update-media-metadata-on-init' into 'develop'

Update MediaSession metadata for initially loaded track

Closes #1252

See merge request funkwhale/funkwhale!1237

changes/changelog.d/1252.bugfix

+Update MediaSession metadata for initially loaded track (#1252)
\ No newline at end of file

front/src/components/audio/Player.vue

@@ -277,6 +277,7 @@ export default {
     })
     if (this.currentTrack) {
       this.getSound(this.currentTrack)
+      this.updateMetadata()
     }
     // Add controls for notification drawer
     if ('mediaSession' in navigator) {
@@ -642,6 +643,28 @@ export default {
 
       }
     },
+    updateMetadata () {
+      // If the session is playing as a PWA, populate the notification
+      // with details from the track
+      if (this.currentTrack && 'mediaSession' in navigator) {
+        let metadata = {
+          title: this.currentTrack.title,
+          artist: this.currentTrack.artist.name,
+        }
+        if (this.currentTrack.album && this.currentTrack.album.cover) {
+          metadata.album = this.currentTrack.album.title
+          metadata.artwork = [
+            { src: this.currentTrack.album.cover.urls.original, sizes: '96x96',   type: 'image/png' },
+            { src: this.currentTrack.album.cover.urls.original, sizes: '128x128', type: 'image/png' },
+            { src: this.currentTrack.album.cover.urls.original, sizes: '192x192', type: 'image/png' },
+            { src: this.currentTrack.album.cover.urls.original, sizes: '256x256', type: 'image/png' },
+            { src: this.currentTrack.album.cover.urls.original, sizes: '384x384', type: 'image/png' },
+            { src: this.currentTrack.album.cover.urls.original, sizes: '512x512', type: 'image/png' },
+          ]
+        }
+        navigator.mediaSession.metadata = new MediaMetadata(metadata)
+      }
+    }
   },
   computed: {
     ...mapState({
@@ -723,26 +746,7 @@ export default {
         this.playTimeout = setTimeout(async () => {
           await self.loadSound(newValue, oldValue)
         }, 500);
-        // If the session is playing as a PWA, populate the notification
-        // with details from the track
-        if (this.currentTrack && 'mediaSession' in navigator) {
-          let metadata = {
-            title: this.currentTrack.title,
-            artist: this.currentTrack.artist.name,
-          }
-          if (this.currentTrack.album && this.currentTrack.album.cover) {
-            metadata.album = this.currentTrack.album.title
-            metadata.artwork = [
-              { src: this.currentTrack.album.cover.urls.original, sizes: '96x96',   type: 'image/png' },
-              { src: this.currentTrack.album.cover.urls.original, sizes: '128x128', type: 'image/png' },
-              { src: this.currentTrack.album.cover.urls.original, sizes: '192x192', type: 'image/png' },
-              { src: this.currentTrack.album.cover.urls.original, sizes: '256x256', type: 'image/png' },
-              { src: this.currentTrack.album.cover.urls.original, sizes: '384x384', type: 'image/png' },
-              { src: this.currentTrack.album.cover.urls.original, sizes: '512x512', type: 'image/png' },
-            ]
-          }
-          navigator.mediaSession.metadata = new MediaMetadata(metadata);
-        }
+        this.updateMetadata()
       },
       immediate: false
     },