From 997b510ec6b493402e78e6f5a2f31ab57ab3b30b Mon Sep 17 00:00:00 2001
From: Philipp Wolfer <ph.wolfer@gmail.com>
Date: Fri, 20 Nov 2020 08:34:17 +0100
Subject: [PATCH] Update MediaSession metadata for initially loaded track

The MediaSession metadata was only set on track change, but not for the track already set during load.

Fixes #1252
---
 changes/changelog.d/1252.bugfix       |  1 +
 front/src/components/audio/Player.vue | 44 +++++++++++++++------------
 2 files changed, 25 insertions(+), 20 deletions(-)
 create mode 100644 changes/changelog.d/1252.bugfix

diff --git a/changes/changelog.d/1252.bugfix b/changes/changelog.d/1252.bugfix
new file mode 100644
index 000000000..a04394497
--- /dev/null
+++ b/changes/changelog.d/1252.bugfix
@@ -0,0 +1 @@
+Update MediaSession metadata for initially loaded track (#1252)
\ No newline at end of file
diff --git a/front/src/components/audio/Player.vue b/front/src/components/audio/Player.vue
index 406fdf4a9..d75833b9c 100644
--- a/front/src/components/audio/Player.vue
+++ b/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
     },