First draft of UI

.gitignore

@@ -21,3 +21,6 @@
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+
+
+data

src/App.tsx

@@ -1,24 +1,26 @@
-import React from 'react';
-import logo from './logo.svg';
-import './App.css';
+import { JSX, useState } from 'react'
+import VideoPlayer from './video/VideoPlayer'
+import VideoPicker from './video/VideoPicker'
+import Segment from './segmenting/Segment';
+import SegmentList from './segmenting/SegmentList';
+
+function App(): JSX.Element {
+  const [path, setPath] = useState<string>("");
+  const [segments, setSegments] = useState<Segment[]>([]);
 
-function App() {
   return (
-    <div className="App">
-      <header className="App-header">
-        <img src={logo} className="App-logo" alt="logo" />
-        <p>
-          Edit <code>src/App.tsx</code> and save to reload.
-        </p>
-        <a
-          className="App-link"
-          href="https://reactjs.org"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Learn React
-        </a>
-      </header>
+    <div id="app">
+		<div className="column">
+			<VideoPlayer path={path} />
+			<br/>
+      		<VideoPicker setPath={setPath}/>
+		</div>
+
+		<div className="column">
+			<h1>Amanda's VOD Segmenter</h1>
+
+			<SegmentList segments={segments} setSegments={setSegments}/>
+		</div>
     </div>
   );
 }

src/index.css

@@ -11,3 +11,43 @@ code {
   font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
     monospace;
 }
+
+video {
+  background-color: black;
+  position: relative;
+}
+
+#app {
+  width: 100%;
+  overflow: auto;
+}
+
+.column {
+  width: auto;
+  padding: 20px;
+  float: left;
+}
+
+#videoTimestamp {
+  text-align: center;
+  font-size: xx-large;
+}
+
+.segmentEntry {
+  width: auto;
+}
+
+.segmentData {
+  margin: 4px;
+  float: left;
+}
+
+.scrollable {
+  overflow-y: auto;
+  height: 100%;
+  width: 100%;
+}
+
+.timestamp {
+  font-family:'Courier New', Courier, monospace;
+}

src/segmenting/Segment.tsx

@@ -0,0 +1,5 @@
+export default interface Segment {
+    title: string;
+    inTime: number;
+    outTime: number;
+}

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

src/util/timestamp.ts

@@ -0,0 +1,9 @@
+export function createTimestamp(currentTime: number): string {
+  const hours = Math.floor(Math.floor(currentTime) / 3600);
+  const minutes = Math.floor((Math.floor(currentTime) % 3600) / 60);
+  const seconds = Math.floor(currentTime) % 60;
+
+  return `${hours.toString().padStart(2, "0")}:${minutes
+    .toString()
+    .padStart(2, "0")}:${seconds.toString().padStart(2, "0")}`;
+}

src/video/VideoPicker.tsx

@@ -0,0 +1,23 @@
+import { JSX } from "react";
+
+export default function VideoPicker(
+    { setPath }: { setPath: (path: string) => void}
+): JSX.Element {
+    function openFile(file: FileList | null): void {
+        var f: File | null | undefined = file?.item(0)
+        if(f == null) return;
+        setPath(
+            f == null ? "" : URL.createObjectURL(f)
+        );
+    }
+
+    return (
+        <div>
+            <input
+                type="file"
+                accept="video/*"
+                onChange={(event) => openFile(event.target.files)}
+            />
+        </div>
+    );
+}

src/video/VideoPlayer.tsx

@@ -0,0 +1,14 @@
+export default function VideoPlayer({path}: {path: string}) {
+    return (
+        <div>
+            <video id="videoPlayer"
+                width="960"
+                height="540"
+                controls
+                disablePictureInPicture
+                disableRemotePlayback
+                src={path}
+            />
+        </div>
+    );
+}