play state add loading

anig1scur · Jul 7, 2024 · 5671883 · 5671883
1 parent b932408
commit 5671883
Show file tree

Hide file tree

Showing 4 changed files with 77 additions and 40 deletions.
diff --git a/public/icons/loading.svg b/public/icons/loading.svg
diff --git a/src/components/Player.tsx b/src/components/Player.tsx
@@ -1,7 +1,7 @@
-import React, { useEffect, FC, useRef, useState, useCallback } from 'react';
+import React, { useEffect, FC, useState, useCallback } from 'react';
 import WaveForm, { WaveFormHandle } from './WaveForm';
 
-export type playerProps = {
+export type PlayerProps = {
   audio_url: string;
   peaks: number[];
   start_time?: number;
@@ -12,50 +12,46 @@ export type playerProps = {
   waveFormRef: React.RefObject<WaveFormHandle>;
 }
 
-
-const Player: FC<playerProps> = (props) => {
-
+const Player: FC<PlayerProps> = (props) => {
   const { last, next, toNext, toLast, audio_url, waveFormRef } = props;
-  const [isPlaying, setIsPlaying] = useState(false);
+  const [playbackState, setPlayState] = useState<'loading' | 'playing' | 'paused'>('paused');
 
   useEffect(() => {
-    if (!waveFormRef) {
-      return;
-    }
+    if (!waveFormRef?.current) return;
 
-    if (!waveFormRef.current) {
-      return;
-    }
-
-    if (props.start_time && waveFormRef.current) {
+    if (props.start_time) {
       waveFormRef.current.onready(() => {
         waveFormRef.current?.seek(props.start_time || 0);
-      })
+      });
     }
-  }, [props.start_time, waveFormRef.current]);
+  }, [props.start_time, waveFormRef]);
 
   const backfoward = useCallback(() => {
     waveFormRef.current?.seek(-2);
-  }, [isPlaying]);
+  }, []);
 
   const forward = useCallback(() => {
     waveFormRef.current?.seek(3);
-  }, [isPlaying]);
+  }, []);
 
   const _toNext = () => {
-    next && toNext && toNext();
-    setIsPlaying(false);
+    if (next && toNext) {
+      toNext();
+      setPlayState('paused');
+    }
   }
 
   const _toLast = () => {
-    last && toLast && toLast();
-    setIsPlaying(false);
+    if (last && toLast) {
+      toLast();
+      setPlayState('paused');
+    }
   }
 
   const handleKeyDown = useCallback((e: KeyboardEvent) => {
     if (e.key === ' ') {
       e.preventDefault();
-      setIsPlaying(prevIsPlaying => !prevIsPlaying);
+      setPlayState(prev => prev === 'paused' ? 'playing' : 'paused');
     }
 
     if ((e.ctrlKey || e.metaKey) && e.key === 'ArrowRight') {
@@ -77,34 +73,50 @@ const Player: FC<playerProps> = (props) => {
       e.preventDefault();
       backfoward();
     }
-  }, [isPlaying, next, last]);
+  }, [next, last]);
 
   useEffect(() => {
     document.addEventListener('keydown', handleKeyDown);
     return () => {
       document.removeEventListener('keydown', handleKeyDown);
     };
-  }, [next, last]);
+  }, [handleKeyDown]);
 
   return (
     <div className='player'>
       <WaveForm
         peaks={ props.peaks || [0, 1, 2, 3, 4, 5, 4, 3, 2, 1] }
         ref={ waveFormRef }
         url={ audio_url }
-        playing={ isPlaying }
+        playing={ playbackState === 'playing' }
         onInteract={ () => {
-          setIsPlaying(true);
-        } } />
+          setPlayState('playing');
+        } }
+        onError={ () => {
+          setPlayState('loading');
+        } }
+        onLoading={ (progress) => {
+          if (progress === 100) {
+            setPlayState('playing');
+          } else {
+            setPlayState('loading');
+          }
+        } }
+      />
       <div className='control'>
-        <div className='title' title={ last || "NO LAST EPISODE" } >{ last || "NO LAST EPISODE" }</div>
+        <div className='title' title={ last || "NO LAST EPISODE" }>{ last || "NO LAST EPISODE" }</div>
         <div className='backfoward' onClick={ backfoward } />
         <div className='last' onClick={ _toLast } />
-        <div className={
-          isPlaying ? 'pause' : 'play'
-        } onClick={ () => {
-          setIsPlaying(!isPlaying)
-        } } />
+        <div
+          className={
+            `play ${ playbackState }`
+          }
+          onClick={ () => {
+            if (playbackState !== 'loading') {
+              setPlayState(prev => prev === 'playing' ? 'paused' : 'playing');
+            }
+          } }
+        />
         <div className='next' onClick={ _toNext } />
         <div className='forward' onClick={ forward } />
         <div className='title' title={ next || "NO NEXT EPISODE" }>{ next || "NO NEXT EPISODE" }</div>
@@ -113,6 +125,4 @@ const Player: FC<playerProps> = (props) => {
   );
 }
 
-
-export default Player;
-
+export default Player;
diff --git a/src/components/WaveForm.tsx b/src/components/WaveForm.tsx
@@ -8,6 +8,8 @@ export type WaveFormProps = {
   waveColor?: string;
   progressColor?: string;
   onInteract?: () => void;
+  onLoading?: (progress: number) => void;
+  onError?: () => void;
 };
 
 export type WaveFormHandle = {
@@ -34,6 +36,19 @@ const WaveForm = forwardRef<WaveFormHandle, WaveFormProps>((props, ref) => {
         }
       });
 
+      _wavesurfer.on('loading', (progress) => {
+        if (props.onLoading) {
+          props.onLoading(progress);
+        }
+      });
+
+      _wavesurfer.on('error', (err) => {
+        console.error(err);
+        if (props.onError) {
+          props.onError();
+        }
+      });
+
       if (props.peaks) {
         _wavesurfer.load(props.url, [props.peaks])
       }

diff --git a/src/style.scss b/src/style.scss
@@ -76,12 +76,17 @@
         background-image: url("/icons/last.svg");
       }
 
-      .play {
+      .playing {
+        background-image: url("/icons/pause.svg");
+      }
+
+      .paused {
         background-image: url("/icons/play.svg");
       }
 
-      .pause {
-        background-image: url("/icons/pause.svg");
+      .loading {
+        background-image: url("/icons/loading.svg");
+        @apply animate-spin;
       }
 
       .next {