feat: store "paused" instead of "isPlaying" in media state

BREAKING CHANGE: now media players return "paused" instead of "isPlaying" in their state.

docs/useAudio.md

@@ -62,7 +62,7 @@ render tree, for example:
   ],
   "time": 5.244996,
   "duration": 425.952625,
-  "isPlaying": false,
+  "paused": false,
   "muted": false,
   "volume": 1
 }
@@ -85,4 +85,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.

docs/useVideo.md

@@ -61,7 +61,7 @@ render tree, for example:
   ],
   "time": 5.244996,
   "duration": 425.952625,
-  "isPlaying": false,
+  "paused": false,
   "muted": false,
   "volume": 1
 }
@@ -84,4 +84,4 @@ interface AudioControls {
 `ref` is a React reference to HTML `<video>` element, you can access the element by
 `ref.current`, note that it may be `null`.
 
-And finally, `props` &mdash; all props that `<video>` accepts.
+And finally, `props` &mdash; all props that `<video>` accepts.

src/__tests__/useAudio.test.ts

@@ -0,0 +1,42 @@
+import { renderHook, act } from '@testing-library/react-hooks';
+import useAudio from '../useAudio';
+const setUp = (
+  src: string = 'https://www.soundhelix.com/examples/mp3/SoundHelix-Song-2.mp3',
+  autoPlay: boolean = true
+) => renderHook(() => useAudio({ src, autoPlay }));
+
+it('should init audio and utils', () => {
+  global.console.error = jest.fn();
+
+  const MOCK_AUDIO_SRC = 'MOCK_AUDIO_SRC';
+  const MOCK_AUTO_PLAY_STATE = true;
+  const { result } = setUp(MOCK_AUDIO_SRC, MOCK_AUTO_PLAY_STATE);
+  const [audio, state, controls, ref] = result.current;
+  // if not production mode, it will show the error message, cause audio do not render
+  expect(console.error).toHaveBeenCalledTimes(1);
+
+  // Test the audio comp
+  expect(audio.type).toBe('audio');
+  expect(audio.props.src).toBe(MOCK_AUDIO_SRC);
+  expect(audio.props.autoPlay).toBe(MOCK_AUTO_PLAY_STATE);
+
+  // Test state value
+  expect(state.time).toBe(0);
+  expect(state.paused).toBe(true);
+  expect(state.muted).toBe(false);
+  expect(state.volume).toBe(1);
+
+  // Test controls
+  ref.current = document.createElement('audio');
+  // Mock ref current for controls testing
+
+  expect(ref.current.muted).toBe(false);
+  controls.mute();
+  expect(ref.current.muted).toBe(true);
+  controls.unmute();
+  expect(ref.current.muted).toBe(false);
+
+  expect(ref.current.volume).toBe(1);
+  controls.volume(0.5);
+  expect(ref.current.volume).toBe(0.5);
+});

src/util/createHTMLMediaHook.ts

@@ -10,7 +10,7 @@ export interface HTMLMediaProps extends React.AudioHTMLAttributes<any>, React.Vi
 export interface HTMLMediaState {
   buffered: any[];
   duration: number;
-  isPlaying: boolean;
+  paused: boolean;
   muted: boolean;
   time: number;
   volume: number;
@@ -43,7 +43,7 @@ const createHTMLMediaHook = (tag: 'audio' | 'video') => {
       buffered: [],
       time: 0,
       duration: 0,
-      isPlaying: false,
+      paused: true,
       muted: false,
       volume: 1,
     });
@@ -59,8 +59,8 @@ const createHTMLMediaHook = (tag: 'audio' | 'video') => {
       };
     };
 
-    const onPlay = () => setState({ isPlaying: true });
-    const onPause = () => setState({ isPlaying: false });
+    const onPlay = () => setState({ paused: false });
+    const onPause = () => setState({ paused: true });
     const onVolumeChange = () => {
       const el = ref.current;
       if (!el) {
@@ -208,7 +208,7 @@ const createHTMLMediaHook = (tag: 'audio' | 'video') => {
       setState({
         volume: el.volume,
         muted: el.muted,
-        isPlaying: !el.paused,
+        paused: el.paused,
       });
 
       // Start media, if autoPlay requested.