Added dashSource component for an dash player integration

docs/lib/Customize/CustomizeSourcePage.js

@@ -1,34 +1,52 @@
 /* eslint react/no-multi-comp: 0, react/prop-types: 0 */
 import React from 'react';
 import { PrismCode } from 'react-prism';
-import { Button } from 'reactstrap';
 import Helmet from 'react-helmet';
 import CustomizeSourceExample from '../examples/CustomizeSource';
-const CustomizeSourceExampleSource = require('!!raw-loader!../examples/CustomizeSource');
+import CustomizeDashSourceExample from '../examples/CustomizeDashSource';
+
+const CustomizeSourceHLSSource = require('!!raw-loader!../examples/CustomizeSource');
+const CustomizeSourceDashSource = require('!!raw-loader!../examples/CustomizeDashSource');
 const HLSSourceSource = require('!!raw-loader!../examples/HLSSource');
+const DashSource = require('!!raw-loader!../examples/DashSource');
 
 export default class CustomizeSourcePage extends React.Component {
-  render() {
-    return (
-      <div>
-        <Helmet title="CustomizeSource" />
-        <h3>Customize Video Source</h3>
-        <p>This is an example on how to customize a HLS video source.</p>
-        <div className="docs-example">
-          <CustomizeSourceExample />
-        </div>
-        <p />
-        <h4>HLSSource Component</h4>
-        <pre>
-          <PrismCode className="language-jsx">{HLSSourceSource}</PrismCode>
-        </pre>
-        <h4>Customize Source Example</h4>
-        <pre>
-          <PrismCode className="language-jsx">
-            {CustomizeSourceExampleSource}
-          </PrismCode>
-        </pre>
-      </div>
-    );
-  }
+    render() {
+        return (
+          <div>
+            <Helmet title="CustomizeSource" />
+            <h3>Customize Video Source</h3>
+            <p>This is an example on how to customize a HLS video source.</p>
+            <div className="docs-example">
+              <CustomizeSourceExample />
+            </div>
+            <p />
+            <h4>HLSSource Component</h4>
+            <pre>
+              <PrismCode className="language-jsx">{HLSSourceSource}</PrismCode>
+            </pre>
+            <h4>Customize HLS Source Example</h4>
+            <pre>
+              <PrismCode className="language-jsx">
+                {CustomizeSourceHLSSource}
+              </PrismCode>
+            </pre>
+            <p>This is an example on how to customize a Dash video source.</p>
+            <div className="docs-example">
+              <CustomizeDashSourceExample />
+            </div>
+            <p />
+            <h4>DashSource Component</h4>
+            <pre>
+              <PrismCode className="language-jsx">{DashSource}</PrismCode>
+            </pre>
+            <h4>Customize Dash Source Example</h4>
+            <pre>
+              <PrismCode className="language-jsx">
+                {CustomizeSourceDashSource}
+              </PrismCode>
+            </pre>
+          </div>
+        );
+    }
 }

docs/lib/examples/CustomizeDashSource.js

@@ -0,0 +1,25 @@
+import React from 'react';
+import { Player } from 'video-react';
+import DashSource from "./DashSource";
+
+export default props => {
+    // Add customized HLSSource component into video-react Player
+    // The Component with `isVideoChild` attribute will be added into `Video` component
+    // Please use this url if you test it from local:
+    // http://www.streambox.fr/playlists/x36xhzz/x36xhzz.m3u8
+
+    const handleDashPlayer = (dash) => {
+        // Use methods form dash.js to customise dashSource
+        dash.setFastSwitchEnabled(true);
+    };
+
+    return (
+      <Player>
+        <DashSource
+          isVideoChild
+          src="http://dash.edgesuite.net/akamai/bbb_30fps/bbb_30fps.mpd"
+          handleDashPlayer={handleDashPlayer}
+        />
+      </Player>
+    );
+};

docs/lib/examples/DashSource.js

@@ -0,0 +1,58 @@
+import React, { Component } from 'react';
+import dashjs from 'dashjs';
+
+const DASH_EXTENSIONS = /\.(mpd)($|\?)/i;
+export const checkDash = src => DASH_EXTENSIONS.test(src);
+
+export default class DashSource extends Component {
+  constructor(props, context) {
+    super(props, context);
+    this.state = {
+      type: 'video/mp4',
+    };
+    this.load = this.load.bind(this);
+    this.dash = dashjs.MediaPlayer().create();
+  }
+
+  componentDidMount() {
+    this.load();
+  }
+
+  componentDidUpdate(prevProps) {
+    if (prevProps.src !== this.props.src) {
+      this.load();
+    }
+  }
+
+  componentWillUnmount() {
+    // destroy dash video source
+    this.props.video.removeAttribute('src');
+  }
+
+  load() {
+    const {
+      src, video, playing, handleDashPlayer,
+    } = this.props;
+    // load dash video source base on dash.js
+    if (checkDash(src)) {
+      this.setState({
+        type: 'application/x-mpegURL',
+      });
+      this.dash.initialize(video, src, playing);
+      this.dash.getDebug().setLogToBrowserConsole(false);
+      this.dash.on(dashjs.MediaPlayer.events.STREAM_INITIALIZED, () => {
+        handleDashPlayer(this.dash);
+        this.dash.setFastSwitchEnabled(true);
+      });
+    }
+  }
+
+  render() {
+    return (
+      <source
+        src={this.props.src}
+        type={this.state.type}
+      />
+    );
+  }
+}