Merge pull request #15 from disoul/release/1.2.0

Release/1.2.0

Demo/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pili-rtc-web-demo",
-  "version": "1.0.1",
+  "version": "1.2.0",
   "main": "index.js",
   "scripts": {
     "start": "webpack-dev-server --mode development --hot --progress --colors --port 4000 --open",
@@ -38,7 +38,7 @@
     "ts-loader": "^4.0.0",
     "tslint": "^5.9.1",
     "tslint-react": "^3.5.1",
-    "typescript": "^2.7.2",
+    "typescript": "^3.0.1",
     "url-loader": "^1.0.0-beta.0",
     "webpack": "^4.0.1",
     "webpack-cleanup-plugin": "^0.5.1",
@@ -47,24 +47,27 @@
     "webpack-hot-middleware": "^2.21.1"
   },
   "dependencies": {
+    "@material-ui/core": "^1.4.2",
+    "@material-ui/icons": "^2.0.0",
     "classnames": "^2.2.5",
     "clipboard": "^2.0.0",
-    "material-ui": "^1.0.0-beta.36",
-    "material-ui-icons": "^1.0.0-beta.36",
+    "flv.js": "^1.4.2",
     "mobx": "^3.6.1",
     "mobx-react": "^4.4.2",
     "mobx-react-router": "^4.0.1",
     "mobx-utils": "^3.2.2",
-    "pili-rtc-web": "^1.1.1",
-    "react": "^16.2.0",
+    "pili-rtc-web": "^1.2.0",
+    "react": "^16.4.2",
     "react-avatar": "^2.5.1",
-    "react-dom": "^16.2.0",
+    "react-dom": "^16.4.2",
     "react-draggable": "^3.0.5",
     "react-motion": "^0.5.2",
     "react-rangeslider": "^2.2.0",
     "react-router": "^4.2.0",
     "react-router-dom": "^4.2.2",
     "seedrandom": "^2.4.3",
-    "store": "^2.0.12"
+    "store": "^2.0.12",
+    "video.js": "^7.1.0",
+    "videojs-flvjs": "^0.2.0"
   }
 }

Demo/src/app/components/DarkSwitch/index.tsx

@@ -0,0 +1,41 @@
+/*
+ * index.tsx
+ * Copyright (C) 2018 disoul <[email protected]>
+ *
+ * Distributed under terms of the MIT license.
+ */
+import * as React from 'react';
+import { withStyles } from '@material-ui/core/styles';
+import Switch from '@material-ui/core/Switch';
+
+interface State {
+}
+
+interface Props {
+  classes: any;
+  checked: boolean;
+  onChange: any;
+}
+
+const style = {
+  bar: {
+    backgroundColor: '#fff',
+  },
+};
+
+class DarkSwitch extends React.Component<Props, State> {
+  public render(): JSX.Element {
+    const { classes } = this.props;
+    return (
+      <Switch
+        classes={{
+          bar: classes.bar,
+        }}
+        checked={this.props.checked}
+        onChange={this.props.onChange}
+      />
+    );
+  }
+}
+
+export default withStyles(style)(DarkSwitch);

Demo/src/app/components/MusicSelect/index.tsx

@@ -5,7 +5,9 @@
  * Distributed under terms of the MIT license.
  */
 import * as React from 'react';
-import Dialog, { DialogTitle, DialogContent } from 'material-ui/Dialog';
+import Dialog from '@material-ui/core/Dialog';
+import DialogTitle from '@material-ui/core/DialogTitle';
+import DialogContent from '@material-ui/core/DialogContent';
 import { decodeAudioData } from 'pili-rtc-web';
 
 interface Props {

Demo/src/app/components/RemotePlayer/index.tsx

@@ -6,8 +6,8 @@
  */
 import * as React from 'react';
 import { Stream } from 'pili-rtc-web';
-import MicIcon from 'material-ui-icons/Mic';
-import MicOffIcon from 'material-ui-icons/MicOff';
+import MicIcon from '@material-ui/icons/Mic';
+import MicOffIcon from '@material-ui/icons/MicOff';
 import { AudioWave } from '../AudioWave';
 
 import * as styles from './style.css';
@@ -53,24 +53,28 @@ export class RemotePlayer extends React.Component<Props, State> {
   }
 
   public render(): JSX.Element {
+    if (!this.props.stream) {
+      return null;
+    }
+    const disblaed = this.props.stream.isDestroyed || !this.props.stream.isPlaying;
     return (
         <div
           className={styles.container}
           onContextMenu={this.props.onContextMenu}
           onDoubleClick={this.handleDoubleClick}
           style={{
-            background: this.props.stream && !this.props.stream.isDestroyed ? this.props.color : '#9E9E9E',
+            background: disblaed ? '#9e9e9e' : this.props.color,
           }}
           id={this.props.id}
         >
-          { this.props.stream && !this.props.stream.muteAudio ? <MicIcon className={styles.mic} /> : <MicOffIcon className={styles.mic} /> }
+          { !this.props.stream.muteAudio ? <MicIcon className={styles.mic} /> : <MicOffIcon className={styles.mic} /> }
           <div
             ref={ref => this.video = ref}
             style={{
-              visibility: !!this.props.stream && !this.props.stream.muteVideo ? 'visible' : 'hidden',
+              visibility: !disblaed && !this.props.stream.muteVideo ? 'visible' : 'hidden',
             }}
           />
-          { this.props.stream && !this.props.stream.isDestroyed && <AudioWave
+          { !disblaed && <AudioWave
             className={styles.wave}
             color={this.props.color}
             width={200}