fixed mediasession thumbnail on IOS

Author: T1GIT

src/player/hooks/player-media.ts

@@ -6,44 +6,48 @@ import { useCurrentTrack } from '@/player/stores/current-track'
 export const usePlayerMedia = createSharedComposable(() => {
   const { track, audio, playing, progress, duration } = usePlayer()
 
+  const { mediaSession } = navigator
+
   watch(track, () => {
     if (track.value) {
-      navigator.mediaSession.metadata = new MediaMetadata({
+      mediaSession.metadata = new MediaMetadata({
         title: track.value.title,
         artist: track.value.artist,
-        artwork: [
-          { src: track.value.cover.normal, type: 'image/jpg' },
-        ],
+        artwork: [96, 128, 192, 256, 384, 512].map(size => ({
+          src: track.value!.cover.normal,
+          sizes: `${size}x${size}`,
+          type: 'image/jpeg',
+        })),
       })
     }
     else {
-      navigator.mediaSession.metadata = null
+      mediaSession.metadata = null
     }
   })
 
   watch([track, playing], ([track, playing]) => {
-    navigator.mediaSession.playbackState = !track ? 'none' : playing ? 'playing' : 'paused'
+    mediaSession.playbackState = !track ? 'none' : playing ? 'playing' : 'paused'
   })
   watch([progress, duration], ([progress, duration]) => {
     if (duration > 0) {
-      navigator.mediaSession.setPositionState({
+      mediaSession.setPositionState({
         position: progress,
         playbackRate: audio.playbackRate,
         duration,
       })
     }
     else {
-      navigator.mediaSession.setPositionState(undefined)
+      mediaSession.setPositionState(undefined)
     }
   })
 
   const { prev, next } = useCurrentTrack()
   tryOnMounted(() => {
-    navigator.mediaSession.setActionHandler('play', () => playing.value = true)
-    navigator.mediaSession.setActionHandler('pause', () => playing.value = false)
-    navigator.mediaSession.setActionHandler('previoustrack', prev)
-    navigator.mediaSession.setActionHandler('nexttrack', next)
-    navigator.mediaSession.setActionHandler('seekto', ({ seekTime }) => progress.value = seekTime)
-    navigator.mediaSession.setActionHandler('stop', () => track.value = undefined)
+    mediaSession.setActionHandler('play', () => playing.value = true)
+    mediaSession.setActionHandler('pause', () => playing.value = false)
+    mediaSession.setActionHandler('previoustrack', prev)
+    mediaSession.setActionHandler('nexttrack', next)
+    mediaSession.setActionHandler('seekto', ({ seekTime }) => progress.value = seekTime)
+    mediaSession.setActionHandler('stop', () => track.value = undefined)
   })
 })