Make mediaSession metadata reliable in embedded player

front/public/embed.html

@@ -163,7 +163,7 @@
 
     // NOTE: Fetch tracks only if there is no error
     if (error.value === false) {
-      fetchTracks().then(() => updateMediaSessionMetadata()).catch(err => {
+      fetchTracks().catch(err => {
         console.error(err)
         error.value = `An unknown error occurred while loading ${type} data.`
       })
@@ -189,10 +189,8 @@
     const Logo = () => ({ $template: '#logo-template' })
 
     // Media Session
-    const updateMediaSessionMetadata = () => {
-      const { current } = player
-
-      if (tracks[current] && 'mediaSession' in navigator) {
+    const initializeMediaSession = () => {
+      if ('mediaSession' in navigator) {
         navigator.mediaSession.setActionHandler('play', () => {
           player.playing = true
           audio.element.play()
@@ -203,23 +201,41 @@
           audio.element.pause()
         })
 
-        navigator.mediaSession.setActionHandler('seekbackward', () => player.seekTime({ target: { value: player.seek - 5 } }))
-        navigator.mediaSession.setActionHandler('seekforward', () => player.seekTime({ target: { value: player.seek + 5 } }))
+        navigator.mediaSession.setActionHandler('seekbackward', () => player.seekTime({
+          target: { value: (audio.element.currentTime - 5) / audio.element.duration * 100 }
+        }))
+
+        navigator.mediaSession.setActionHandler('seekforward', () => player.seekTime({
+          target: { value: (audio.element.currentTime + 5) / audio.element.duration * 100 }
+        }))
 
         navigator.mediaSession.setActionHandler('previoustrack', () => player.prev())
         navigator.mediaSession.setActionHandler('nexttrack', () => player.next())
+      }
+    }
 
-        navigator.mediaSession.metadata = new MediaMetadata({
+    const updateMediaSessionMetadata = () => {
+      const { current } = player
+
+      if (tracks[current] && 'mediaSession' in navigator) {
+        const metadata = new MediaMetadata({
           title: tracks[current].title,
-          album: tracks[current].album.title,
-          artist: tracks[current].artist.name,
+          album: tracks[current]?.album.title ?? '',
+          artist: tracks[current]?.artist.name ?? '',
           artwork: [
             { src: tracks[current]?.cover ?? cover.value, sizes: '96x96', type: 'image/png' },
             { src: tracks[current]?.cover ?? cover.value, sizes: '128x128', type: 'image/png' },
             { src: tracks[current]?.cover ?? cover.value, sizes: '192x192', type: 'image/png' },
             { src: tracks[current]?.cover ?? cover.value, sizes: '256x256', type: 'image/png' },
+            { src: tracks[current]?.cover ?? cover.value, sizes: '384x384', type: 'image/png' },
+            { src: tracks[current]?.cover ?? cover.value, sizes: '512x512', type: 'image/png' }
           ]
         })
+
+        console.log(metadata)
+        requestAnimationFrame(() => {
+          navigator.mediaSession.metadata = metadata
+        })
       }
     }
 
@@ -240,6 +256,7 @@
         audio.element.load()
 
         if (wasPlaying) audio.element.play()
+
         updateMediaSessionMetadata()
       },
 
@@ -255,7 +272,7 @@
         if (!audio.element) return
 
         const seek = audio.element.duration * event.target.value / 100
-        audio.element.currentTime = isNaN(seek) ? 0 : seek
+        audio.element.currentTime = isNaN(seek) ? 0 : Math.min(seek, audio.element.duration - 1)
       },
 
       togglePlay () {
@@ -263,6 +280,8 @@
 
         if (this.playing) audio.element.play()
         else audio.element.pause()
+
+        updateMediaSessionMetadata()
       }
     })
 
@@ -293,7 +312,7 @@
       volume: -1
     })
 
-    const watchAudio = (element, current, volume) => {
+    const watchAudio = (element, volume) => {
       if (audio.element !== element) {
         audio.element = element
 
@@ -327,6 +346,7 @@
       error,
 
       // Playback
+      initializeMediaSession,
       watchAudio,
       player,
       volume,
@@ -461,7 +481,7 @@
         </table>
       </div>
 
-      <audio v-effect="watchAudio($el, player.current, volume.level)">
+      <audio v-effect="watchAudio($el, volume.level)" @vue:mounted="initializeMediaSession">
         <source
           v-for="source in tracks[player.current]?.sources ?? []"
           :key="source.mimetype + source.listen_url"