Merge 16a46afe3db5abe484ec4c443acf9fa3c431b67c into 2b9f32699348d520fc96acbd74be24b12702b02a

ui/src/audioplayer/Player.jsx

@@ -222,6 +222,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],
@@ -281,6 +288,7 @@ const Player = () => {
         context.resume()
       }
 
+      updateMediaSessionPlaybackState('playing')
       dispatch(currentPlaying(info))
       if (startTime === null) {
         setStartTime(Date.now())
@@ -309,7 +317,13 @@ const Player = () => {
         }
       }
     },
-    [context, dispatch, showNotifications, startTime],
+    [
+      context,
+      dispatch,
+      showNotifications,
+      startTime,
+      updateMediaSessionPlaybackState,
+    ],
   )
 
   const onAudioPlayTrackChange = useCallback(() => {
@@ -322,12 +336,16 @@ const Player = () => {
   }, [scrobbled, startTime])
 
   const onAudioPause = useCallback(
-    (info) => dispatch(currentPlaying(info)),
+    (info) => {
-    [dispatch],
+      updateMediaSessionPlaybackState('paused')
+      dispatch(currentPlaying(info))
+    },
+    [dispatch, updateMediaSessionPlaybackState],
   )
 
   const onAudioEnded = useCallback(
     (currentPlayId, audioLists, info) => {
+      updateMediaSessionPlaybackState('none')
       setScrobbled(false)
       setStartTime(null)
       dispatch(currentPlaying(info))
@@ -336,7 +354,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}
     />
   )