feat: add <Audio> events

Author: streamich

src/Audio/index.ts

@@ -1,6 +1,8 @@
 import {Component, cloneElement, Children} from 'react';
 import {h, noop} from '../util';
 
+export type TAudioEvent = (event, Audio, IAudioState) => void;
+
 export interface IAudioProps {
   src: string;
   children?: (...args) => React.ReactElement<any>;
@@ -10,15 +12,43 @@ export interface IAudioProps {
   preload?: 'none' | 'metadata' | 'auto';
   volume?: number;
   renderInner?: () => React.ReactElement<any>;
+
+  onAbort?: TAudioEvent,
+  onCanPlay?: TAudioEvent,
+  onCanPlayThrough?: TAudioEvent,
+  onDurationChange?: TAudioEvent,
+  onEmptied?: TAudioEvent,
+  onEncrypted?: TAudioEvent,
+  onEnded?: TAudioEvent,
+  onError?: TAudioEvent,
+  onLoadedData?: TAudioEvent,
+  onLoadedMetadata?: TAudioEvent,
+  onLoadStart?: TAudioEvent,
+  onPause?: TAudioEvent,
+  onPlay?: TAudioEvent,
+  onPlaying?: TAudioEvent,
+  onProgress?: TAudioEvent,
+  onRateChange?: TAudioEvent,
+  onSeeked?: TAudioEvent,
+  onSeeking?: TAudioEvent,
+  onStalled?: TAudioEvent,
+  onSuspend?: TAudioEvent,
+  onTimeUpdate?: TAudioEvent,
+  onVolumeChange?: TAudioEvent,
+  onWaiting?: TAudioEvent
 }
 
 export interface IAudioState {
-
+  isPlaying?: boolean;
 }
 
 export class Audio extends Component<IAudioProps, IAudioState> {
   el: HTMLAudioElement;
 
+  state: IAudioState = {
+    isPlaying: false
+  };
+
   ref = (el) => {
     this.el = el;
   };
@@ -41,8 +71,22 @@ export class Audio extends Component<IAudioProps, IAudioState> {
     }
   };
 
+  event = (name: string) => (event) => {
+    const handler = this.props[name];
+
+    if (handler) {
+      handler(event, this, this.state);
+    }
+
+    this.scrapDOM();
+  };
+
+  scrapDOM() {
+
+  }
+
   render () {
-    const {props} = this;
+    const {props, event} = this;
     const {children, src, autoplay, loop, muted, preload, volume, renderInner = noop as any} = props;
 
 
@@ -53,12 +97,35 @@ export class Audio extends Component<IAudioProps, IAudioState> {
       loop,
       muted,
       preload,
-      volume
+      volume,
+      onAbort: event('onAbort'),
+      onCanPlay: event('onCanPlay'),
+      onCanPlayThrough: event('onCanPlayThrough'),
+      onDurationChange: event('onDurationChange'),
+      onEmptied: event('onEmptied'),
+      onEncrypted: event('onEncrypted'),
+      onEnded: event('onEnded'),
+      onError: event('onError'),
+      onLoadedData: event('onLoadedData'),
+      onLoadedMetadata: event('onLoadedMetadata'),
+      onLoadStart: event('onLoadStart'),
+      onPause: event('onPause'),
+      onPlay: event('onPlay'),
+      onPlaying: event('onPlaying'),
+      onProgress: event('onProgress'),
+      onRateChange: event('onRateChange'),
+      onSeeked: event('onSeeked'),
+      onSeeking: event('onSeeking'),
+      onStalled: event('onStalled'),
+      onSuspend: event('onSuspend'),
+      onTimeUpdate: event('onTimeUpdate'),
+      onVolumeChange: event('onVolumeChange'),
+      onWaiting: event('onWaiting')
     },
       renderInner()
     );
 
-    const markup = children(this);
+    const markup = children(this, this.state);
 
     return cloneElement(markup, null, ...[
       ...Children.toArray(markup.props.children),

src/Audio/story.tsx

@@ -4,11 +4,32 @@ import {action} from '@storybook/addon-actions';
 import {linkTo} from '@storybook/addon-links';
 import {Audio} from '.';
 
+const src = 'https://www.soundhelix.com/examples/mp3/SoundHelix-Song-2.mp3';
+
 storiesOf('Generators/Audio', module)
-  .add('basic', () =>
-    <Audio autoplay src='https://html5tutorial.info/media/vincent.mp3'>{(audio) =>
+  .add('Example', () =>
+    <Audio autoplay src={src}>{(audio) =>
       <div>
         Hello audio!
       </div>
     }</Audio>
+  )
+  .add('With controls', () =>
+    <Audio src={src}>{({play, pause}) =>
+      <div>
+        <button onClick={play}>Play</button>
+        <button onClick={pause}>Pause</button>
+      </div>
+    }</Audio>
+  )
+  .add('Show state', () =>
+    <Audio src={src}>{(audio, state) =>
+      <div>
+        <button onClick={audio.play}>Play</button>
+        <button onClick={audio.pause}>Pause</button>
+        <pre style={{fontFamily: 'monospace'}}>
+          {JSON.stringify(state, null, 4)}
+        </pre>
+      </div>
+    }</Audio>
   );