From 535ab0cd42555f7c551f8bff837fb56b5ef196cf Mon Sep 17 00:00:00 2001
From: kohei <watanabe_kohei@waku-2.com>
Date: Mon, 19 Nov 2018 16:41:05 +0900
Subject: [PATCH] =?UTF-8?q?feat:=20=E4=BC=9A=E8=A9=B1=E3=81=AE=E5=89=B2?=
 =?UTF-8?q?=E5=90=88=E8=A1=A8=E7=A4=BA=E6=A9=9F=E8=83=BD=E8=BF=BD=E5=8A=A0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/percentage.jsx | 29 +++++++++++++++++++++++++++++
 components/vad.jsx        |  2 ++
 2 files changed, 31 insertions(+)
 create mode 100644 components/percentage.jsx

diff --git a/components/percentage.jsx b/components/percentage.jsx
new file mode 100644
index 0000000..d249a5a
--- /dev/null
+++ b/components/percentage.jsx
@@ -0,0 +1,29 @@
+import { Component } from "react";
+
+export default class extends Component {
+  render() {
+    const leftActivity = this.props.activity
+      .filter(a => a.ch === "l")
+      .map(a => a.endTime - a.startTime)
+      .reduce((a, c) => a + c, 0);
+    const rightActivity = this.props.activity
+      .filter(a => a.ch === "r")
+      .map(a => a.endTime - a.startTime)
+      .reduce((a, c) => a + c, 0);
+
+    return (
+      <dl>
+        <dt>会話時間 (ms)</dt>
+        <dd>{leftActivity + rightActivity}</dd>
+        <dt>会話の割合</dt>
+        <dd>
+          左{" "}
+          <meter value={leftActivity / (leftActivity + rightActivity)}>
+            {leftActivity / (leftActivity + rightActivity)}
+          </meter>{" "}
+          右
+        </dd>
+      </dl>
+    );
+  }
+}
diff --git a/components/vad.jsx b/components/vad.jsx
index 241f7f6..c1de31f 100644
--- a/components/vad.jsx
+++ b/components/vad.jsx
@@ -1,5 +1,6 @@
 import { Component } from "react";
 import * as _VAD from "vad.js/lib/vad.js";
+import Percentage from "./percentage";
 import Kaburi from "./kaburi";
 
 export default class extends Component {
@@ -109,6 +110,7 @@ export default class extends Component {
           <dt>右</dt>
           <dd>{this.state.right && "発話中..."}</dd>
         </dl>
+        <Percentage activity={this.state.activity} />
         <Kaburi activity={this.state.activity} />
       </div>
     );