First draft of UI

2025-11-02 00:37:46 -04:00
parent 45948acc8f
commit 262ac046b6
8 changed files with 173 additions and 19 deletions
--- a/src/segmenting/SegmentList.tsx
+++ b/src/segmenting/SegmentList.tsx
@@ -0,0 +1,58 @@
+import { JSX } from "react";
+import Segment from "./Segment";
+import { createTimestamp } from "../util/timestamp";
+
+export default function SegmentList({ segments, setSegments }: { segments: Segment[], setSegments: (segments: Segment[]) => void}): JSX.Element {
+    const videoPlayer: HTMLVideoElement = document.getElementById("videoPlayer") as HTMLVideoElement;
+
+    function remSegment(remIndex: number) {
+        setSegments(segments.filter((value: Segment, index: number) => index != remIndex));
+    }
+
+    return <div className="scrollable">
+        <div>
+            {segments.map((segment, index) => {
+                return (
+                    <div className="segmentEntry">
+                        <div className="segmentData"><input type="text"></input></div>
+                        <span>
+                            <div className="segmentData">
+                                <button
+                                    onClick={() => {
+                                        setSegments(segments.map((value: Segment, x: number) => 
+                                            x == index ? {
+                                                title: value.title,
+                                                inTime: videoPlayer.currentTime,
+                                                outTime: value.outTime
+                                            } : value))
+                                    }}
+                                >Mark In</button> 
+                                <span className="timestamp"><b>{createTimestamp(segment.inTime)}</b></span>
+                            </div>
+                            <div className="segmentData">
+                                <button
+                                    onClick={() => {
+                                        setSegments(segments.map((value: Segment, x: number) => 
+                                            x == index ? {
+                                                title: value.title,
+                                                inTime: value.inTime,
+                                                outTime: videoPlayer.currentTime
+                                            } : value))
+                                    }}
+                                >Mark Out</button>
+                                <span className="timestamp"><b>{createTimestamp(segment.outTime)}</b></span>
+                            </div>
+                        </span>
+                        <div className="segmentData"><button onClick={() => remSegment(index)}>-</button></div>
+                    </div>
+                )
+            })}
+        </div>
+
+        <button onClick={() => {setSegments([...segments, {
+            title: "",
+            inTime: 0,
+            outTime: 0
+        }])}}>+</button>
+    </div>;
+}