diff --git a/src/renderer/features/player/components/center-controls.tsx b/src/renderer/features/player/components/center-controls.tsx
index 1b7b14cd..3e690261 100644
--- a/src/renderer/features/player/components/center-controls.tsx
+++ b/src/renderer/features/player/components/center-controls.tsx
@@ -11,6 +11,7 @@ import { PlayButton, PlayerButton } from '/@/renderer/features/player/components
import { PlayerbarSlider } from '/@/renderer/features/player/components/playerbar-slider';
import { openShuffleAllModal } from '/@/renderer/features/player/components/shuffle-all-modal';
import { useCenterControls } from '/@/renderer/features/player/hooks/use-center-controls';
+import { useMediaSession } from '/@/renderer/features/player/hooks/use-media-session';
import { usePlayQueueAdd } from '/@/renderer/features/player/hooks/use-playqueue-add';
import {
useAppStore,
@@ -83,6 +84,8 @@ export const CenterControls = ({ playersRef }: CenterControlsProps) => {
],
]);
+ useMediaSession();
+
return (
<>
diff --git a/src/renderer/features/player/hooks/use-media-session.ts b/src/renderer/features/player/hooks/use-media-session.ts
new file mode 100644
index 00000000..da2bff9f
--- /dev/null
+++ b/src/renderer/features/player/hooks/use-media-session.ts
@@ -0,0 +1,41 @@
+import { useEffect } from 'react';
+
+import { useCurrentSong, useCurrentStatus, usePlaybackSettings } from '/@/renderer/store';
+import { PlayerStatus } from '/@/shared/types/types';
+
+export const useMediaSession = () => {
+ const { mediaSession: mediaSessionEnabled } = usePlaybackSettings();
+ const playerStatus = useCurrentStatus();
+ const currentSong = useCurrentSong();
+ const mediaSession = navigator.mediaSession;
+
+ useEffect(() => {
+ if (!mediaSessionEnabled || !mediaSession) {
+ return;
+ }
+
+ const updateMetadata = () => {
+ mediaSession.metadata = new MediaMetadata({
+ album: currentSong?.album ?? '',
+ artist: currentSong?.artistName ?? '',
+ artwork: currentSong?.imageUrl
+ ? [{ src: currentSong.imageUrl, type: 'image/png' }]
+ : [],
+ title: currentSong?.name ?? '',
+ });
+ };
+
+ updateMetadata();
+ }, [currentSong, mediaSession, mediaSessionEnabled]);
+
+ useEffect(() => {
+ if (!mediaSessionEnabled || !mediaSession) {
+ return;
+ }
+
+ if (mediaSession) {
+ const status = playerStatus === PlayerStatus.PLAYING ? 'playing' : 'paused';
+ mediaSession.playbackState = status;
+ }
+ }, [playerStatus, mediaSession, mediaSessionEnabled]);
+};