feat: add <Video> docs, and improve docs

Author: streamich

README.md

@@ -50,17 +50,16 @@ const MyComponent = mock();
      - [`<WindowSizeSensor>`](./docs/WindowSizeSensor.md)
   - Generators
      - [`<Alert>`](./docs/Alert.md)
-     - [`<Audio>`](./docs/Audio.md)
+     - [`<Audio>`](./docs/Audio.md), [`<Video>`](./docs/Video.md), and `<Media>`
      - [`<LocalStorage>`](./docs/LocalStorage.md)
      - `<Redirect>`
      - [`<Speak>`](./docs/Speak.md)
      - [`<Vibrate>`](./docs/Vibrate.md)
-     - `<Video>`
   - Context
-     - [`<Provider>`](./docs/context.md#provider), [`<Consumer>`](./docs/context.md#consumer), and [`withContext()`](./docs/context.md#withcontext)
-     - [`<Theme>`](./docs/theme.md#theme), [`<Themed>`](./docs/theme.md#themed), and [`withTheme()`](./docs/theme.md#withtheme)
+     - [`<Provider>`](./docs/context.md#provider), [`<Consumer>`](./docs/context.md#consumer), [`withContext()`](./docs/context.md#withcontext), and `@withContext`
+     - [`<Theme>`](./docs/theme.md#theme), [`<Themed>`](./docs/theme.md#themed), [`withTheme()`](./docs/theme.md#withtheme), and `@withTheme`
      - `<CssVars>`
-     - [`<Router>`](./docs/route.md#router), [`<Route>`](./docs/route.md#route), [`go()`](./docs/route.md#go), and [`withRoute()`](./docs/route.md#withroute)
+     - [`<Router>`](./docs/route.md#router), [`<Route>`](./docs/route.md#route), [`go()`](./docs/route.md#go), [`withRoute()`](./docs/route.md#withroute), and `@withRoute`
   - CSS resets
      - [`<CssResetEricMeyer>`](./docs/reset/CssResetEricMeyer.md)
      - [`<CssResetEricMeyerCondensed>`](./docs/reset/CssResetEricMeyerCondensed.md)

docs/Audio.md

@@ -36,6 +36,8 @@ interface IAudioProps {
   - `preload` - optional, string, `<audio>` element preload attribute.
   - `volume` - optional, number, audio volume in `[0..1]` range, defaults to `1`.
   - `noJs` - optional, React element(s) to render insided the `<audio>` tag.
+  - `onMount` - optional, callback, called when component mounts, receives `IAudio` as the first argument.
+  - `onUnmount` - optional, callback, called when component un-mounts, receives `IAudio` as the first argument.
 
 
 ## Arguments

docs/Video.md

@@ -0,0 +1,123 @@
+# `<Video>`
+
+FaCC that creates a `<video>` element to play video media, re-renders on video state changes.
+
+## Usage
+
+```jsx
+import {Video} from 'libreact/lib/Video';
+
+<Video autoPlay src='http://dailym.ai/2rG7TBS'>{(actions, state) => {
+  JSON.stringify(state, null, 4)
+}}</Video>
+```
+
+
+## Props
+
+In addition to props below also accepts all [React's media events](https://reactjs.org/docs/events.html#media-events).
+
+```tsx
+interface IVideoProps {
+  src: string;
+  autoPlay?: boolean;
+  loop?: boolean;
+  muted?: boolean;
+  preload?: 'none' | 'metadata' | 'auto';
+  volume?: number;
+  noJs?: React.ReactElement<any>;
+}
+```
+
+  - `src` - required, string, video source file URL.
+  - `autoPlay` - optional, boolean, whether to autoplay media, defaults to `false`.
+  - `loop` - optional, boolean, whether to repeat the media when it ends, defaults to `false`.
+  - `muted` - optional, boolean, whether to mute the media, defaults to `false`.
+  - `preload` - optional, string, `<video>` element preload attribute.
+  - `volume` - optional, number, media volume in `[0..1]` range, defaults to `1`.
+  - `noJs` - optional, React element(s) to render insided the `<video>` tag.
+  - `onMount` - optional, callback, called when component mounts, receives `IVideo` as the first argument.
+  - `onUnmount` - optional, callback, called when component un-mounts, receives `IVideo` as the first argument.
+
+
+## Arguments
+
+The `children` function receives two arguments, first is the `IVideo` *actions* collection and the second
+is the state of the video component.
+
+```jsx
+<Video autoPlay src={src}>{({video, ...actions}, state) =>
+
+}</Video>
+```
+
+First argument is the `<Video>` component instance with the following public signature.
+
+```ts
+interface IVideo {
+  el: HTMLVideoElement;
+  video: React.ReactElement;
+  play();
+  pause();
+  seek(time: number);
+  volume(value: number);
+  mute();
+  unmute();
+}
+```
+
+, where
+
+  - `el` - `<video>` element DOM node.
+  - `video` - `<video>` element React node, that you have to insert in the JSX tree.
+
+The second argument is the state of the `<Video>` component with the following signature.
+
+```ts
+interface IVideoState {
+  buffered?: TRange[];
+  time?: number;
+  duration?: number;
+  isPlaying?: boolean;
+  muted?: boolean;
+  volume?: number;
+}
+
+type TRange = {
+  start: number;
+  end: number;
+};
+```
+
+, where
+
+  - `buffered` - a list of ranges representing media intervals that have been buffered by the browser.
+  - `time` - current time in seconds.
+  - `duration` - total video duration in seconds.
+  - `isPlaying` - whether the video is currently playing.
+  - `muted` - whether `muted` attribute is set on the video element.
+  - `volume` - current volume in range `[0..1]`.
+
+
+## Example
+
+Play a sample video.
+
+```jsx
+<Video
+  src='http://dailym.ai/2rG7TBS'
+  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>
+  }
+/>
+```

src/Media/index.ts

@@ -28,6 +28,8 @@ export interface IMediaProps<M> extends React.AllHTMLAttributes<any> {
   volume?: number;
   noJs?: React.ReactElement<any>;
 
+  onMount?: TMediaEvent<M>,
+  onUnmount?: TMediaEvent<M>,
   onAbort?: TMediaEvent<M>,
   onCanPlay?: TMediaEvent<M>,
   onCanPlayThrough?: TMediaEvent<M>,

src/Video/__story__/story.tsx

@@ -5,7 +5,7 @@ import {linkTo} from '@storybook/addon-links';
 import {Video} from '..';
 import ShowDocs from '../../../.storybook/ShowDocs'
 
-const src = 'http://video.dailymail.co.uk/video/mol/2017/10/03/4242224567792913009/1024x576_MP4_4242224567792913009.mp4';
+const src = 'http://dailym.ai/2rG7TBS';
 
 storiesOf('Generators/Video', module)
   .add('Documentation', () => h(ShowDocs, {name: 'Video'}))