From 71a6892c7bc4181c45adeeba05a5c385e29109d3 Mon Sep 17 00:00:00 2001 From: Vitaly Sh Date: Mon, 28 Sep 2026 10:00:36 +0500 Subject: [PATCH] Fixed infinite loading of stop image. In useMediaSessionIntegration.ts on every state update, a new artwork array was being created. The library's useMediaMeta treated this as a metadata change and re-published MediaMetadata, which caused the browser to request the image again. In Network the initiator was use-media-session.js. I memoized the array by the stop's image URL. I checked in the browser: after Play/Pause toggles, the metadata with the cover was not reassigned again, and the number of requests to the stop's image did not increase. When the stop changes, the URL changes, so its cover updates as expected. --- hooks/useMediaSessionIntegration.ts | 16 +++++++++++----- 1 file changed, 11 insertions(+), 5 deletions(-) diff --git a/hooks/useMediaSessionIntegration.ts b/hooks/useMediaSessionIntegration.ts index aaca4a8..3020af0 100644 --- a/hooks/useMediaSessionIntegration.ts +++ b/hooks/useMediaSessionIntegration.ts @@ -1,4 +1,4 @@ -import { useCallback, useEffect, useRef } from 'react'; +import { useCallback, useEffect, useMemo, useRef } from 'react'; import { useMediaSession, useMediaMeta } from 'use-media-session'; import { AudioStop } from '../types'; import { UseAudioPlayerReturn } from './useAudioPlayer'; @@ -56,10 +56,16 @@ export const useMediaSessionIntegration = ({ onNextTrack, }: UseMediaSessionIntegrationProps): void => { // Build artwork array for MediaSession metadata - const artworkType = getArtworkType(currentAudioStop?.image); - const mediaSessionArtwork = currentAudioStop?.image - ? [{ src: currentAudioStop.image, sizes: '512x512', type: artworkType || 'image/jpeg' }] - : []; + const mediaSessionArtwork = useMemo(() => { + const image = currentAudioStop?.image; + if (!image) return []; + + return [{ + src: image, + sizes: '512x512', + type: getArtworkType(image) || 'image/jpeg', + }]; + }, [currentAudioStop?.image]); useMediaMeta({ title: currentAudioStop?.title || '',