feat: 会話の割合表示機能追加

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>
+    );
+  }
+}

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>
     );