From b3d6eaa3a0b126712eae25c1b91925d030a2d900 Mon Sep 17 00:00:00 2001
From: geireann <geireann.lindfield@gmail.com>
Date: Thu, 7 Apr 2022 18:06:40 -0400
Subject: added RecordingView

---
 .../views/nodes/RecordingBox/ProgressBar.tsx       | 46 ++++++++++++++++++++++
 1 file changed, 46 insertions(+)
 create mode 100644 src/client/views/nodes/RecordingBox/ProgressBar.tsx

(limited to 'src/client/views/nodes/RecordingBox/ProgressBar.tsx')

diff --git a/src/client/views/nodes/RecordingBox/ProgressBar.tsx b/src/client/views/nodes/RecordingBox/ProgressBar.tsx
new file mode 100644
index 000000000..da5fa2b00
--- /dev/null
+++ b/src/client/views/nodes/RecordingBox/ProgressBar.tsx
@@ -0,0 +1,46 @@
+import * as React from 'react';
+import { useEffect } from "react"
+import "./ProgressBar.scss"
+
+interface ProgressBarProps {
+      progress: number,
+      marks: number[],
+      playSegment: (idx: number) => void
+}
+
+export function ProgressBar(props: ProgressBarProps) {
+
+      const handleClick = (e: React.MouseEvent) => {
+            let progressbar = document.getElementById('progressbar')!
+            let bounds = progressbar!.getBoundingClientRect();
+            let x = e.clientX - bounds.left;
+            let percent = x / progressbar.clientWidth * 100
+            
+            for (let i = 0; i < props.marks.length; i++) {
+                  let start = i == 0 ? 0 : props.marks[i-1];
+                  if (percent > start && percent < props.marks[i]) {
+                        props.playSegment(i)
+                        // console.log(i)
+                        // console.log(percent)
+                        // console.log(props.marks[i])
+                        break
+                  }
+            }
+      }
+
+      return(
+            <div className="progressbar" id="progressbar">
+                  <div 
+                        className="progressbar done"
+                        style={{ width: `${props.progress}%` }}
+                        onClick={handleClick}
+                  ></div>
+                  {props.marks.map((mark) => {
+                        return <div 
+                                    className="progressbar mark"
+                                    style={{ width: `${mark}%` }}
+                              ></div>
+                  })}
+          </div>
+      )
+}
\ No newline at end of file
-- 
cgit v1.2.3-70-g09d2

