Fix loading status on stream loading and stuck pause

Author: nukeop

packages/hifi/src/Sound.tsx

@@ -18,6 +18,7 @@ export const Sound: React.FC<SoundProps> = ({
   onTimeUpdate,
   onEnd,
   onLoadStart,
+  onCanPlay,
   onError,
   children,
 }) => {
@@ -28,7 +29,7 @@ export const Sound: React.FC<SoundProps> = ({
 
   usePlaybackStatus(audioRef, status, context, isReady);
   useAudioSeek(audioRef, seek, isReady);
-  useAudioLoader(audioRef, src, isReady);
+  useAudioLoader(audioRef, src, status, isReady);
   useHlsSource(audioRef, src, isReady);
 
   const { handleTimeUpdate, handleError } = useAudioEvents({
@@ -46,6 +47,7 @@ export const Sound: React.FC<SoundProps> = ({
         onTimeUpdate={handleTimeUpdate}
         onEnded={onEnd}
         onLoadStart={onLoadStart}
+        onCanPlay={onCanPlay}
         onError={handleError}
       />
       {isReady &&

packages/hifi/src/hooks/useAudioLoader.ts

@@ -1,10 +1,11 @@
 import { RefObject, useEffect, useRef } from 'react';
 
-import { AudioSource } from '../types';
+import { AudioSource, SoundStatus } from '../types';
 
 export const useAudioLoader = (
   audioRef: RefObject<HTMLAudioElement | null>,
   src: AudioSource,
+  status: SoundStatus,
   isReady: boolean,
 ) => {
   const prevUrl = useRef<string | null>(null);
@@ -27,6 +28,10 @@ export const useAudioLoader = (
       audio.src = src.url;
       audio.load();
       prevUrl.current = src.url;
+
+      if (status === 'playing') {
+        audio.play();
+      }
     }
-  }, [src, isReady, audioRef]);
+  }, [src, status, isReady, audioRef]);
 };

packages/hifi/src/test/Sound.test.tsx

@@ -2,7 +2,7 @@ import { render } from '@testing-library/react';
 
 import { Sound } from '../Sound';
 import { AudioSource } from '../types';
-import { setupAudioContextMock } from './test-utils';
+import { resetMediaSpies, setupAudioContextMock } from './test-utils';
 
 const httpSource: AudioSource = { url: '/a.mp3', protocol: 'http' };
 
@@ -20,4 +20,34 @@ describe('Sound', () => {
 
     restore();
   });
+
+  it('calls play after loading a new source while status is playing', () => {
+    const { restore } = setupAudioContextMock();
+    const sourceA: AudioSource = { url: '/a.mp3', protocol: 'http' };
+    const sourceB: AudioSource = { url: '/b.mp3', protocol: 'http' };
+
+    const { rerender } = render(<Sound src={sourceA} status="playing" />);
+
+    const { playMock } = resetMediaSpies();
+
+    rerender(<Sound src={sourceB} status="playing" />);
+
+    expect(playMock).toHaveBeenCalled();
+    restore();
+  });
+
+  it('does not call play after loading a new source while status is paused', () => {
+    const { restore } = setupAudioContextMock();
+    const sourceA: AudioSource = { url: '/a.mp3', protocol: 'http' };
+    const sourceB: AudioSource = { url: '/b.mp3', protocol: 'http' };
+
+    const { rerender } = render(<Sound src={sourceA} status="paused" />);
+
+    const { playMock } = resetMediaSpies();
+
+    rerender(<Sound src={sourceB} status="paused" />);
+
+    expect(playMock).not.toHaveBeenCalled();
+    restore();
+  });
 });

packages/hifi/src/types.ts

@@ -15,6 +15,7 @@ export type SoundProps = {
   onTimeUpdate?: (args: { position: number; duration: number }) => void;
   onEnd?: () => void;
   onLoadStart?: () => void;
+  onCanPlay?: () => void;
   onError?: (error: Error) => void;
   children?: ReactNode;
 };

packages/player/src/components/SoundProvider.tsx

@@ -35,6 +35,15 @@ export const SoundProvider: FC<PropsWithChildren> = ({ children }) => {
     useQueueStore.getState().goToNext();
   }, []);
 
+  const handleCanPlay = useCallback(() => {
+    const currentItem = useQueueStore.getState().getCurrentItem();
+    if (currentItem) {
+      useQueueStore
+        .getState()
+        .updateItemState(currentItem.id, { status: 'success' });
+    }
+  }, []);
+
   return (
     <>
       {src && (
@@ -46,6 +55,7 @@ export const SoundProvider: FC<PropsWithChildren> = ({ children }) => {
           crossOrigin={crossOrigin}
           onTimeUpdate={handleTimeUpdate}
           onEnd={handleEnd}
+          onCanPlay={handleCanPlay}
         >
           <Volume value={volumePercent} />
         </Sound>

packages/player/src/hooks/useStreamResolution.ts

@@ -122,7 +122,6 @@ const resolveAndPlay = async (item: QueueItem, t: TFunction): Promise<void> => {
     return;
   }
 
-  updateItemState(item.id, { status: 'success' });
   setSrc(buildAudioSource(resolvedCandidate));
   play();
 };