Update video upload page

src/components/video.js

@@ -1,7 +1,15 @@
 import React from "react"; // eslint-disable-line
 import { Component } from "flumpt";
+import Anzu from "anzu-js-sdk";
+
 
 export class VideoComponent extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      mouseOver: false,
+    };
+  }
   componentDidUpdate() {
     if (this.props.activeSourceId !== "") {
       let constraints =  {
@@ -29,9 +37,62 @@ export class VideoComponent extends Component {
       );
     }
   }
+  handleVideoAction(e) {
+    e.preventDefault();
+    if (this.props.activeSourceId === "") {
+      return;
+    }
+    if (this.props.isPlaying) {
+      this.dispatch("stopAnzu");
+      return;
+    }
+    let constraints =  {
+      audio: false,
+      video: {
+        mandatory: {
+          chromeMediaSource: "desktop",
+          chromeMediaSourceId: this.props.activeSourceId,
+          minWidth: 640,
+          maxWidth: 640,
+          minHeight: 480,
+          maxHeight: 480
+        }
+      }
+    };
+    const settings = JSON.parse(window.localStorage.getItem("decapSettings"));
+    let anzu = new Anzu("upstream");
+    anzu.start(settings.channelId, settings.upstreamToken, constraints);
+    this.dispatch("setAnzu", anzu);
+  }
+  handleMouseOver(_e) {
+    this.setState({ mouseOver: true });
+  }
+  handleMouseLeave(_e) {
+    this.setState({ mouseOver: false });
+  }
   render() {
-    return(
-      <video id="video"></video>
+    let link = "";
+    if (this.state.mouseOver && this.props.activeSourceId !== "") {
+      if (this.props.isPlaying) {
+        link = (
+          <a className="video-button">
+            <span className="icon icon-resize-full icon-stop"></span>
+          </a>
+        );
+      }
+      else {
+        link = (
+          <a className="video-button">
+            <span className="icon icon-resize-full icon-play"></span>
+          </a>
+        );
+      }
+    }
+    return (
+      <div onMouseOver={this.handleMouseOver.bind(this)} onMouseLeave={this.handleMouseLeave.bind(this)} onClick={this.handleVideoAction.bind(this)}>
+        { link }
+        <video id="video"></video>
+      </div>
     );
   }
 }

src/css/app.css

@@ -1,4 +1,14 @@
 #video {
-  width: 640;
-  height: 480;
+  width: 640px;
+  height: 480px;
+}
+.video-button {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 640px;
+  height: 480px;
+  font-size: 300px;
+  text-align: center;
+  color: rgba(255, 0, 0, 0.7);
 }

src/index.js

@@ -35,6 +35,14 @@ class Decap extends Flux {
         return state;
       });
     });
+    this.on("stopAnzu", (anzu) => {
+      return this.update(state => {
+        state.anzu.disconnect();
+        state.anzu = null;
+        state.isPlaying = false;
+        return state;
+      });
+    });
     this.on("updatePage", (page) => {
       return this.update(state => {
         state.page = page;