feat: add <Audio> mute controls

Author: streamich

src/Audio/index.ts

@@ -42,7 +42,8 @@ export interface IAudioState {
   time?: number;
   duration?: number;
   isPlaying?: boolean;
-  volume: number;
+  muted?: boolean;
+  volume?: number;
 }
 
 export class Audio extends Component<IAudioProps, IAudioState> {
@@ -52,7 +53,8 @@ export class Audio extends Component<IAudioProps, IAudioState> {
     time: 0,
     duration: 0,
     isPlaying: false,
-    volume: NaN
+    muted: false,
+    volume: 1
   };
 
   ref = (el) => {
@@ -103,6 +105,18 @@ export class Audio extends Component<IAudioProps, IAudioState> {
     }
   };
 
+  mute = () => {
+    if (this.el) {
+      this.el.muted = true;
+    }
+  };
+
+  unmute = () => {
+    if (this.el) {
+      this.el.muted = false;
+    }
+  };
+
   event = (name: string) => (event) => {
     const handler = this.props[name];
 
@@ -128,8 +142,11 @@ export class Audio extends Component<IAudioProps, IAudioState> {
   };
 
   onVolumeChange = (event) => {
+    const {muted, volume} = this.el;
+
     this.setState({
-      volume: this.el.volume
+      muted,
+      volume
     });
 
     this.event('onVolumeChange')(event);

src/Audio/story.tsx

@@ -31,9 +31,31 @@ storiesOf('Generators/Audio', module)
         <button onClick={() => audio.seek(state.time + 5)}>Seek +</button>
         <button onClick={() => audio.volume(state.volume - 0.05)}>Volume -</button>
         <button onClick={() => audio.volume(state.volume + 0.05)}>Volume +</button>
+        <button onClick={audio.mute}>Mute</button>
+        <button onClick={audio.unmute}>Unmute</button>
         <pre style={{fontFamily: 'monospace'}}>
           {JSON.stringify(state, null, 4)}
         </pre>
+        <hr />
+        <pre style={{fontFamily: 'monospace'}}>
+          {`
+<Audio src={src}>{(audio, state) =>
+  <div>
+    <button onClick={audio.play}>Play</button>
+    <button onClick={audio.pause}>Pause</button>
+    <button onClick={() => audio.seek(state.time - 5)}>Seek -</button>
+    <button onClick={() => audio.seek(state.time + 5)}>Seek +</button>
+    <button onClick={() => audio.volume(state.volume - 0.05)}>Volume -</button>
+    <button onClick={() => audio.volume(state.volume + 0.05)}>Volume +</button>
+    <button onClick={audio.mute}>Mute</button>
+    <button onClick={audio.unmute}>Unmute</button>
+    <pre style={{fontFamily: 'monospace'}}>
+      {JSON.stringify(state, null, 4)}
+    </pre>
+  </div>
+}</Audio>
+          `}
+        </pre>
       </div>
     }</Audio>
   );