feat: improve <Video>

Author: streamich

src/Video/__story__/story.tsx

@@ -19,7 +19,25 @@ storiesOf('Generators/Video', module)
       </div>
     }</Video>
   )
-  .add('Control buttons', () =>
+  .add('Basic controls', () =>
+    <Video
+      src={src}
+      style={{
+        width: 400,
+        border: '1px solid tomato'
+      }}
+      render={({video, play, pause, seek, volume, mute, unmute}, {isPlaying}) =>
+        <div>
+          {video}
+          <br />
+          <button onClick={() => isPlaying ? pause() : play()}>
+            {isPlaying ? 'Pause' : 'Play'}
+          </button>
+        </div>
+      }
+    />
+  )
+  .add('All bontrol buttons', () =>
     <Video
       src={src}
       style={{
@@ -45,4 +63,14 @@ storiesOf('Generators/Video', module)
         </div>
       }
     />
+  )
+  .add('No render props', () =>
+    <Video
+      src={src}
+      autoPlay
+      style={{
+        width: 400,
+        border: '1px solid tomato'
+      }}
+    />
   );

src/Video/index.ts

@@ -1,6 +1,7 @@
 import {Component, cloneElement, Children} from 'react';
 import {h, noop} from '../util';
 import renderProp from '../util/renderProp';
+import parseTimeRanges from './parseTimeRanges';
 
 export type TVideoEvent = (event, IVideo?, IVideoState?) => void;
 export type TVideoRenderProp = (video: Video, state: IVideoState) => React.ReactElement<any>;
@@ -51,10 +52,11 @@ export interface IVideoProps extends React.AllHTMLAttributes<any> {
 }
 
 export interface IVideoState {
-  time?: number;
+  buffered?: any[];
   duration?: number;
   isPlaying?: boolean;
   muted?: boolean;
+  time?: number;
   volume?: number;
 }
 
@@ -82,10 +84,14 @@ export class Video extends Component<IVideoProps, IVideoState> implements IVideo
     this.setState({
       volume: this.el.volume
     });
+
+    this.event('onMount')(this);
   }
 
   componentWillUnmount () {
     this.el = null;
+
+    this.event('onUnmount')(this);
   }
 
   play = () => {
@@ -168,8 +174,11 @@ export class Video extends Component<IVideoProps, IVideoState> implements IVideo
   };
 
   onDurationChange = (event) => {
+    const {duration, buffered} = this.el;
+
     this.setState({
-      duration: this.el.duration
+      duration,
+      buffered: parseTimeRanges(buffered)
     });
 
     this.event('onDurationChange')(event);
@@ -183,6 +192,14 @@ export class Video extends Component<IVideoProps, IVideoState> implements IVideo
     this.event('onTimeUpdate')(event);
   };
 
+  onProgress = (event) => {
+    this.setState({
+      buffered: parseTimeRanges(this.el.buffered)
+    });
+
+    this.event('onProgress')(event);
+  };
+
   render () {
     const {props, event} = this;
     const {children, render, noJs, ...rest} = props;
@@ -205,7 +222,7 @@ export class Video extends Component<IVideoProps, IVideoState> implements IVideo
       onPause: this.onPause,
       onPlay: this.onPlay,
       onPlaying: event('onPlaying'),
-      onProgress: event('onProgress'),
+      onProgress: this.onProgress,
       onRateChange: event('onRateChange'),
       onSeeked: event('onSeeked'),
       onSeeking: event('onSeeking'),
@@ -218,6 +235,6 @@ export class Video extends Component<IVideoProps, IVideoState> implements IVideo
       noJs
     );
 
-    return renderProp(this.props, this, this.state);
+    return renderProp(this.props, this, this.state) || this.video;
   }
 }

src/Video/parseTimeRanges.ts

@@ -0,0 +1,15 @@
+const parseTimeRanges = (ranges) => {
+  const result = [];
+  let idx;
+
+  for (idx = 0; idx < ranges.length; idx++) {
+    result.push({
+      start: ranges.start(idx),
+      end: ranges.end(idx)
+    });
+  }
+
+  return result;
+};
+
+export default parseTimeRanges;