From 6197e1f0df355384f6766c586faa69aab9ef3dbe Mon Sep 17 00:00:00 2001
From: kohei <watanabe_kohei@waku-2.com>
Date: Thu, 15 Nov 2018 16:41:30 +0900
Subject: [PATCH] =?UTF-8?q?feat:=20=E7=99=BA=E8=A9=B1=E5=8C=BA=E9=96=93?=
 =?UTF-8?q?=E3=82=92=E8=A8=98=E9=8C=B2=E3=81=99=E3=82=8B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/vad.jsx | 61 +++++++++++++++++++++++++++++++++-------------
 1 file changed, 44 insertions(+), 17 deletions(-)

diff --git a/components/vad.jsx b/components/vad.jsx
index 17d9b5a..7c6f355 100644
--- a/components/vad.jsx
+++ b/components/vad.jsx
@@ -6,11 +6,11 @@ export default class extends Component {
     audioContext: new AudioContext(),
     audioStream: null,
     left: null,
-    right: null
+    right: null,
+    activity: []
   };
 
   componentDidMount() {
-    const setState = this.setState.bind(this);
     const audioContext = this.state.audioContext;
     const leftNode = audioContext.createGain();
     const rightNode = audioContext.createGain();
@@ -26,26 +26,46 @@ export default class extends Component {
     );
 
     const start = stream => {
-      setState({ audioStream: stream });
+      this.setState({ audioStream: stream });
       audioContext.createMediaStreamSource(stream).connect(splitter);
 
       VAD.bind({})({
         source: leftNode,
-        voice_stop() {
-          setState({ left: null });
+        voice_stop: () => {
+          this.setState({
+            left: null,
+            activity: [
+              ...this.state.activity,
+              {
+                ch: "l",
+                startTime: this.state.left,
+                endTime: new Date().getTime()
+              }
+            ]
+          });
         },
-        voice_start() {
-          setState({ left: "喋り始めました" });
+        voice_start: () => {
+          this.setState({ left: new Date().getTime() });
         }
       });
 
       VAD.bind({})({
         source: rightNode,
-        voice_stop() {
-          setState({ right: null });
+        voice_stop: () => {
+          this.setState({
+            right: null,
+            activity: [
+              ...this.state.activity,
+              {
+                ch: "r",
+                startTime: this.state.right,
+                endTime: new Date().getTime()
+              }
+            ]
+          });
         },
-        voice_start() {
-          setState({ right: "喋り始めました" });
+        voice_start: () => {
+          this.setState({ right: new Date().getTime() });
         }
       });
     };
@@ -62,12 +82,19 @@ export default class extends Component {
 
   render() {
     return (
-      <dl>
-        <dt>左</dt>
-        <dd>{this.state.left}</dd>
-        <dt>右</dt>
-        <dd>{this.state.right}</dd>
-      </dl>
+      <div>
+        <dl>
+          <dt>左</dt>
+          <dd>{this.state.left && "発話中..."}</dd>
+          <dt>右</dt>
+          <dd>{this.state.right && "発話中..."}</dd>
+        </dl>
+        <ul>
+          {this.state.activity.map((l, i) => (
+            <li key={i}>{JSON.stringify(l)}</li>
+          ))}
+        </ul>
+      </div>
     );
   }
 }