[react demo] - 修复bug，修改样式

examples/react/package.json

@@ -11,7 +11,7 @@
     "react-dom": "^16.12.0",
     "react-scripts": "3.3.0",
     "unique-classnames": "^1.0.6",
-    "urtc-sdk": "^1.4.1"
+    "urtc-sdk": "^1.4.5"
   },
   "scripts": {
     "start": "react-scripts start",

examples/react/src/App.css

@@ -1,5 +1,10 @@
 .App {
+  margin-top: 60px;
+  font-family: 'Avenir', Helvetica, Arial, sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
   text-align: center;
+  color: #2c3e50;
 }
 
 .App-logo {

examples/react/src/App.js

@@ -7,7 +7,9 @@ function App() {
     <div className="App">
       <Room/>
       <br/>
-      <a href="https://github.com/ucloud/urtc-sdk-web" target="_blank">API 文档请看这里</a>
+      <a href="https://github.com/ucloud/urtc-sdk-web" target="_blank" rel="noopener noreferrer">
+        API 文档请看这里
+      </a>
     </div>
   );
 }

examples/react/src/components/MediaPlayer/index.jsx

@@ -1,4 +1,4 @@
-import React, { Component } from 'react';
+import React, { Component, Fragment } from 'react';
 import PropTypes from 'prop-types';
 import classnames from 'unique-classnames';
 import './index.css';
@@ -40,28 +40,33 @@ export default class MediaPlayer extends Component {
 
   componentDidMount() {
     this.isComponentMounted = true;
-    this.play(this.props.stream.mediaStream);
-    this.startGetVolume();
-    this.startGetState();
+    const { stream } = this.props;
+    if (stream.mediaStream) {
+      this.play(stream.mediaStream);
+    }
   }
 
   componentWillReceiveProps(nextProps) {
-    if (nextProps.stream.mediaStream !== this.props.stream.mediaStream) {
+    if (!nextProps.stream.mediaStream) {
+      this.stop();
+    } else if (nextProps.stream.mediaStream !== this.props.stream.mediaStream) {
       this.play(nextProps.stream.mediaStream);
     }
   }
 
   componentWillUnmount() {
-    this.stopGetVolume();
-    this.stopGetState();
     this.stop();
     this.isComponentMounted = false;
   }
 
   play(mediaStream) {
     this.videoElem.current.srcObject = mediaStream;
+    this.startGetVolume();
+    this.startGetState();
   }
   stop() {
+    this.stopGetVolume();
+    this.stopGetState();
     this.videoElem.current.srcObject = null;
   }
 
@@ -135,19 +140,29 @@ export default class MediaPlayer extends Component {
     onClick && onClick(stream);
   }
 
+  renderStats = () => {
+    const { stream } = this.props;
+    const { volume, stats } = this.state;
+    return stream.mediaStream
+      ? <Fragment>
+          <div style={{ overflow: 'hidden', textOverflow: 'ellipsis' }}>音量: {volume} % &nbsp;&nbsp;&nbsp;&nbsp;音频丢包率: {stats.audioLost} %</div>
+          <div style={{ overflow: 'hidden', textOverflow: 'ellipsis' }}>视频丢包率: {stats.videoLost} % &nbsp;&nbsp;&nbsp;&nbsp;网络延时: {stats.rtt} ms</div>
+        </Fragment>
+      : null;
+  }
+
   render() {
     const { stream, className, style } = this.props;
-    const { volume, stats } = this.state;
 
     const classes = classnames('media-player', className);
+    const hasMediaStream = !!stream.mediaStream;
 
     return (
       <div className={classes} style={style} onClick={this.handleClick}>
         <div style={{ overflow: 'hidden', textOverflow: 'ellipsis' }}>用户ID: {stream.uid}</div>
         <div style={{ overflow: 'hidden', textOverflow: 'ellipsis' }}>流ID: {stream.sid}</div>
-        <div style={{ overflow: 'hidden', textOverflow: 'ellipsis' }}>音量: {volume} % &nbsp;&nbsp;&nbsp;&nbsp;音频丢包率: {stats.audioLost} %</div>
-        <div style={{ overflow: 'hidden', textOverflow: 'ellipsis' }}>视频丢包率: {stats.videoLost} % &nbsp;&nbsp;&nbsp;&nbsp;网络延时: {stats.rtt} ms</div>
-        <div style={{ width: '100%' }}>
+        { this.renderStats() }
+        <div style={{ display: hasMediaStream ? 'block' : 'none' }}>
           <video
             ref={this.videoElem}
             webkit-playsinline="true"
@@ -155,6 +170,7 @@ export default class MediaPlayer extends Component {
             playsInline>
           </video>
         </div>
+        <p style={{ display: hasMediaStream ? 'none' : 'block' }}> unsubscribe </p>
       </div>
     )
   }

examples/react/src/index.css

@@ -1,13 +0,0 @@
-body {
-  margin: 0;
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
-    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
-    sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
-
-code {
-  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
-    monospace;
-}

examples/react/src/index.js

@@ -1,7 +1,6 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
 import 'normalize.css';
-import './index.css';
 import App from './App';
 
 ReactDOM.render(<App />, document.getElementById('root'));