fix: support unload

gwuhaolin · May 30, 2017 · 7df12b8 · 7df12b8
1 parent 91fdde6
commit 7df12b8
Show file tree

Hide file tree

Showing 7 changed files with 91 additions and 36 deletions.
diff --git a/doc/index.js b/doc/index.js
@@ -19,6 +19,7 @@ const ROOT = (
       <Basic/>
     </ReDemo>
     <FlvSupport/>
+    <a href="/live.html">常见直播方案延迟与性能对比</a>
   </div>
 )
 

diff --git a/doc/index.scss b/doc/index.scss
@@ -21,8 +21,12 @@
       word-break: normal;
     }
 
-    .ant-table-content{
+    .ant-table-content {
       overflow-x: scroll;
     }
   }
+
+  .ant-switch {
+    margin-bottom: 10px;
+  }
 }
diff --git a/doc/live/flv.js → doc/live/http-flv.js b/doc/live/flv.js → doc/live/http-flv.js
@@ -2,7 +2,7 @@ import React, { PureComponent } from 'react';
 import { Reflv } from '../../src/index';
 import { HOST } from './index';
 
-export class FLV extends PureComponent {
+export class HttpFlv extends PureComponent {
 
   render() {
     return (

diff --git a/doc/live/index.js b/doc/live/index.js
@@ -1,7 +1,8 @@
-import React from 'react';
+import React, { PureComponent } from 'react';
 import { render } from 'react-dom';
 import ReDemo from 'redemo';
-import { FLV } from './flv';
+import { Switch } from 'antd';
+import { HttpFlv } from './http-flv';
 import { HLS } from './hls';
 import { RTMP } from './rtmp';
 import { FlvSupport } from '../support';
@@ -10,27 +11,60 @@ import '../index.scss';
 // export const HOST = 'wuhaolin.cn';
 export const HOST = 'localhost';
 
-const ROOT = (
-  <div className="reflv-wrap">
-    <h1>常见直播方案对比</h1>
-    <div>
+class ROOT extends PureComponent {
 
-      <ReDemo doc="RTMP">
-        <RTMP/>
-      </ReDemo>
+  state = {
+    rtmp: true,
+    flv: true,
+    hls: true,
+  }
 
-      <ReDemo doc="HTTP-FLV">
-        <FLV/>
-      </ReDemo>
+  render() {
+    const { rtmp, flv, hls } = this.state;
+    return (
+      <div className="reflv-wrap">
+        <h1>常见直播方案延迟与性能对比</h1>
 
-      <ReDemo doc="HLS">
-        <HLS/>
-      </ReDemo>
+        <ReDemo doc={`
+        - 传输协议 RTMP
+        - 播放器 Flash
+        `}>
+          <Switch checked={rtmp} onChange={(checked) => {
+            this.setState({
+              rtmp: checked
+            })
+          }}/>
+          {rtmp ? <RTMP/> : null}
+        </ReDemo>
 
-    </div>
+        <ReDemo doc={`
+        - 传输协议 HTTP-FLV
+        - 播放器 flv.js
+        `}>
+          <Switch checked={flv} onChange={(checked) => {
+            this.setState({
+              flv: checked
+            })
+          }}/>
+          {flv ? <HttpFlv/> : null}
+        </ReDemo>
 
-    <FlvSupport/>
-  </div>
-)
+        <ReDemo doc={`
+        - 传输协议 HLS
+        - 播放器 HTML5 Video
+        `}>
+          <Switch checked={hls} onChange={(checked) => {
+            this.setState({
+              hls: checked
+            })
+          }}/>
+          {hls ? <HLS/> : null}
+        </ReDemo>
 
-render(ROOT, window.document.getElementById('react-body'));
+        <FlvSupport/>
+      </div>
+    )
+  }
+}
+
+render(<ROOT/>, window.document.getElementById('react-body'));
diff --git a/doc/live/rtmp.js b/doc/live/rtmp.js
@@ -3,6 +3,8 @@ import swfobject from 'swfobject';
 import player from './player.swf';
 import { HOST } from './index';
 
+const ID = 'rtmp-player';
+
 export class RTMP extends PureComponent {
 
   componentDidMount() {
@@ -19,12 +21,18 @@ export class RTMP extends PureComponent {
       quality: 'high',
       allowscriptaccess: 'sameDomain',
     };
-    swfobject.embedSWF(player, 'rtmp-player', "968", "549", swfVersionStr, xiSwfUrlStr, soFlashVars, params);
+    swfobject.embedSWF(player, ID, "968", "549", swfVersionStr, xiSwfUrlStr, soFlashVars, params);
+  }
+
+  componentWillUnmount() {
+    swfobject.removeSWF(ID);
   }
 
   render() {
     return (
-      <div id="rtmp-player"/>
+      <div>
+        <object id={ID}/>
+      </div>
     )
   }
 }
diff --git a/doc/support.js b/doc/support.js
@@ -81,6 +81,7 @@ export class FlvSupport extends PureComponent {
       <div style={{ paddingBottom: '20px' }}>
         <h3>Supported flv.js feature list for your browser</h3>
         <Table size="small" pagination={false} dataSource={dataSource} columns={columns}/>
+        <h4>live stream serve on <a href="https://github.com/gwuhaolin/livego" target="_blank">livego</a></h4>
       </div>
     );
   }

diff --git a/src/index.js b/src/index.js
@@ -34,21 +34,28 @@ export class Reflv extends Component {
   }
 
   initFlv = ($video) => {
-    const { url, type, isLive, cors } = this.props;
-    if (flvjs.isSupported()) {
-      let flvPlayer = flvjs.createPlayer({
-        type,
-        isLive,
-        url,
-        cors,
-      });
-      flvPlayer.attachMediaElement($video);
-      flvPlayer.load();
-      flvPlayer.play();
-      this.flvPlayer = flvPlayer;
+    if ($video) {
+      const { url, type, isLive, cors } = this.props;
+      if (flvjs.isSupported()) {
+        let flvPlayer = flvjs.createPlayer({
+          type,
+          isLive,
+          url,
+          cors,
+        });
+        flvPlayer.attachMediaElement($video);
+        flvPlayer.load();
+        flvPlayer.play();
+        this.flvPlayer = flvPlayer;
+      }
     }
   }
 
+  componentWillUnmount() {
+    this.flvPlayer.unload();
+    this.flvPlayer.detachMediaElement();
+  }
+
   render() {
     const { className, style } = this.props;
     return (