fix media session using stale image reference (#1296)

src/renderer/features/player/hooks/use-media-session.ts

@@ -1,15 +1,10 @@
 import isElectron from 'is-electron';
 import { useEffect, useMemo } from 'react';
 
-import { useItemImageUrl } from '/@/renderer/components/item-image/item-image';
+import { getItemImageUrl } from '/@/renderer/components/item-image/item-image';
 import { usePlayerEvents } from '/@/renderer/features/player/audio-player/hooks/use-player-events';
 import { usePlayer } from '/@/renderer/features/player/context/player-context';
-import {
-    usePlaybackSettings,
-    usePlayerSong,
-    useSettingsStore,
-    useTimestampStoreBase,
-} from '/@/renderer/store';
+import { usePlaybackSettings, useSettingsStore, useTimestampStoreBase } from '/@/renderer/store';
 import { LibraryItem } from '/@/shared/types/domain-types';
 import { PlayerStatus, PlayerType } from '/@/shared/types/types';
 
@@ -20,14 +15,6 @@ export const useMediaSession = () => {
     const player = usePlayer();
     const skip = useSettingsStore((state) => state.general.skipButtons);
     const playbackType = useSettingsStore((state) => state.playback.type);
-    const currentSong = usePlayerSong();
-
-    const imageUrl = useItemImageUrl({
-        id: currentSong?.imageId || undefined,
-        imageUrl: currentSong?.imageUrl,
-        itemType: LibraryItem.SONG,
-        type: 'itemCard',
-    });
 
     const isMediaSessionEnabled = useMemo(() => {
         // Always enable media session on web
@@ -106,6 +93,13 @@ export const useMediaSession = () => {
                 }
 
                 const song = properties.song;
+                const imageUrl = getItemImageUrl({
+                    id: song?.imageId || undefined,
+                    imageUrl: song?.imageUrl,
+                    itemType: LibraryItem.SONG,
+                    type: 'itemCard',
+                });
+
                 mediaSession.metadata = new MediaMetadata({
                     album: song?.album ?? '',
                     artist: song?.artistName ?? '',
@@ -122,6 +116,6 @@ export const useMediaSession = () => {
                 mediaSession.playbackState = status === PlayerStatus.PLAYING ? 'playing' : 'paused';
             },
         },
-        [isMediaSessionEnabled, mediaSession, imageUrl],
+        [isMediaSessionEnabled, mediaSession],
     );
 };