feat: useAudio add playing state

streamich · Aug 27, 2021 · 3203610 · 3203610
1 parent 90e72a5
commit 3203610
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 3 deletions.
diff --git a/docs/useAudio.md b/docs/useAudio.md
@@ -64,10 +64,13 @@ render tree, for example:
   "duration": 425.952625,
   "paused": false,
   "muted": false,
-  "volume": 1
+  "volume": 1,
+  "playing": true
 }
 ```
 
+`playing`: The audio is being played and is affected by the network. If it starts to buffer audio, it will be false
+
 `controls` is a list collection of methods that allow you to control the
 playback of the audio, it has the following interface:
 
@@ -85,4 +88,4 @@ interface AudioControls {
 `ref` is a React reference to HTML `<audio>` element, you can access the element by
 `ref.current`, note that it may be `null`.
 
-And finally, `props` &mdash; all props that `<audio>` accepts.
+And finally, `props` &mdash; all props that `<audio>` accepts.
diff --git a/src/factory/createHTMLMediaHook.ts b/src/factory/createHTMLMediaHook.ts
@@ -16,6 +16,7 @@ export interface HTMLMediaState {
   muted: boolean;
   time: number;
   volume: number;
+  playing: boolean;
 }
 
 export interface HTMLMediaControls {
@@ -50,6 +51,7 @@ export default function createHTMLMediaHook<T extends HTMLAudioElement | HTMLVid
       paused: true,
       muted: false,
       volume: 1,
+      playing: false
     });
     const ref = useRef<T | null>(null);
 
@@ -64,7 +66,9 @@ export default function createHTMLMediaHook<T extends HTMLAudioElement | HTMLVid
     };
 
     const onPlay = () => setState({ paused: false });
-    const onPause = () => setState({ paused: true });
+    const onPlaying = () => setState({ playing: true });
+    const onWaiting = () => setState({ playing: false });
+    const onPause = () => setState({ paused: true, playing: false });
     const onVolumeChange = () => {
       const el = ref.current;
       if (!el) {
@@ -107,6 +111,8 @@ export default function createHTMLMediaHook<T extends HTMLAudioElement | HTMLVid
         ...props,
         ref,
         onPlay: wrapEvent(props.onPlay, onPlay),
+        onPlaying: wrapEvent(props.onPlaying, onPlaying),
+        onWaiting: wrapEvent(props.onWaiting, onWaiting),
         onPause: wrapEvent(props.onPause, onPause),
         onVolumeChange: wrapEvent(props.onVolumeChange, onVolumeChange),
         onDurationChange: wrapEvent(props.onDurationChange, onDurationChange),
@@ -119,6 +125,8 @@ export default function createHTMLMediaHook<T extends HTMLAudioElement | HTMLVid
         ...props,
         ref,
         onPlay: wrapEvent(props.onPlay, onPlay),
+        onPlaying: wrapEvent(props.onPlaying, onPlaying),
+        onWaiting: wrapEvent(props.onWaiting, onWaiting),
         onPause: wrapEvent(props.onPause, onPause),
         onVolumeChange: wrapEvent(props.onVolumeChange, onVolumeChange),
         onDurationChange: wrapEvent(props.onDurationChange, onDurationChange),

diff --git a/tests/useAudio.test.ts b/tests/useAudio.test.ts
@@ -23,6 +23,7 @@ it('should init audio and utils', () => {
   // Test state value
   expect(state.time).toBe(0);
   expect(state.paused).toBe(true);
+  expect(state.playing).toBe(false);
   expect(state.muted).toBe(false);
   expect(state.volume).toBe(1);