Signed-off-by: floatlesss <117862164+floatlesss@users.noreply.github.com>

fix(player-mediasession): manually update playbackState - 4744

ui/src/audioplayer/Player.jsx

@@ -148,6 +148,13 @@ const Player = () => {
     }
   }, [playerState, defaultOptions, isMobilePlayer])
 
+  // ReactJKMusicPlayer doesn't set playbackState, so we do it manually
+  const updateMediaSessionPlaybackState = useCallback((state) => {
+    if ('mediaSession' in navigator) {
+      navigator.mediaSession.playbackState = state
+    }
+  }, [])
+
   const onAudioListsChange = useCallback(
     (_, audioLists, audioInfo) => dispatch(syncQueue(audioInfo, audioLists)),
     [dispatch],
@@ -207,6 +214,7 @@ const Player = () => {
         context.resume()
       }
 
+      updateMediaSessionPlaybackState('playing')
       dispatch(currentPlaying(info))
       if (startTime === null) {
         setStartTime(Date.now())
@@ -235,7 +243,7 @@ const Player = () => {
         }
       }
     },
-    [context, dispatch, showNotifications, startTime],
+    [context, dispatch, showNotifications, startTime, updateMediaSessionPlaybackState],
   )
 
   const onAudioPlayTrackChange = useCallback(() => {
@@ -248,12 +256,16 @@ const Player = () => {
   }, [scrobbled, startTime])
 
   const onAudioPause = useCallback(
-    (info) => dispatch(currentPlaying(info)),
-    [dispatch],
+    (info) => {
+      updateMediaSessionPlaybackState('paused')
+      dispatch(currentPlaying(info))
+    },
+    [dispatch, updateMediaSessionPlaybackState],
   )
 
   const onAudioEnded = useCallback(
     (currentPlayId, audioLists, info) => {
+      updateMediaSessionPlaybackState('none')
       setScrobbled(false)
       setStartTime(null)
       dispatch(currentPlaying(info))
@@ -262,7 +274,7 @@ const Player = () => {
         // eslint-disable-next-line no-console
         .catch((e) => console.log('Keepalive error:', e))
     },
-    [dispatch, dataProvider],
+    [dispatch, dataProvider, updateMediaSessionPlaybackState],
   )
 
   const onCoverClick = useCallback((mode, audioLists, audioInfo) => {

ui/src/share/SharePlayer.jsx

@@ -1,3 +1,4 @@
+import { useCallback } from 'react'
 import ReactJkMusicPlayer from 'navidrome-music-player'
 import config, { shareInfo } from '../config'
 import { shareCoverUrl, shareDownloadUrl, shareStreamUrl } from '../utils'
@@ -39,6 +40,35 @@ const SharePlayer = () => {
       src: shareDownloadUrl(shareInfo?.id),
     })
   }
+
+  // ReactJKMusicPlayer doesn't set playbackState, so we do it manually
+  const updateMediaSessionPlaybackState = useCallback((state) => {
+    if ('mediaSession' in navigator) {
+      navigator.mediaSession.playbackState = state
+    }
+  }, [])
+
+  const onAudioPlay = useCallback(
+    (info) => {
+      updateMediaSessionPlaybackState('playing')
+    },
+    [updateMediaSessionPlaybackState],
+  )
+
+  const onAudioPause = useCallback(
+    (info) => {
+      updateMediaSessionPlaybackState('paused')
+    },
+    [updateMediaSessionPlaybackState],
+  )
+
+  const onAudioEnded = useCallback(
+    (currentPlayId, audioLists, info) => {
+      updateMediaSessionPlaybackState('none')
+    },
+    [updateMediaSessionPlaybackState],
+  )
+
   const options = {
     audioLists: list,
     mode: 'full',
@@ -59,6 +89,9 @@ const SharePlayer = () => {
     <ReactJkMusicPlayer
       {...options}
       className={classes.player}
+      onAudioPlay={onAudioPlay}
+      onAudioPause={onAudioPause}
+      onAudioEnded={onAudioEnded}
       onBeforeAudioDownload={onBeforeAudioDownload}
     />
   )