From e0ccd4a98f715660d80747274b7b23ea966b3040 Mon Sep 17 00:00:00 2001
From: Yuki Ito <yuito@shiguredo.jp>
Date: Tue, 19 Jan 2016 17:49:17 +0900
Subject: [PATCH] Update video upload page

---
 src/components/video.js | 65 +++++++++++++++++++++++++++++++++++++++--
 src/css/app.css         | 14 +++++++--
 src/index.js            |  8 +++++
 3 files changed, 83 insertions(+), 4 deletions(-)

diff --git a/src/components/video.js b/src/components/video.js
index 0b2f99f..4218683 100644
--- a/src/components/video.js
+++ b/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>
     );
   }
 }
diff --git a/src/css/app.css b/src/css/app.css
index 09b0b35..c5d525c 100644
--- a/src/css/app.css
+++ b/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);
 }
diff --git a/src/index.js b/src/index.js
index 29bf51d..388c427 100644
--- a/src/index.js
+++ b/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;