1 files changed, 46 insertions, 0 deletions
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