Unnecessary comment

.gitignore

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

package-lock.json

@@ -8,6 +8,10 @@
       "name": "segmenter",
       "version": "0.1.0",
       "dependencies": {
+        "@ffmpeg/core-mt": "^0.12.10",
+        "@ffmpeg/ffmpeg": "^0.12.15",
+        "@ffmpeg/types": "^0.12.4",
+        "@ffmpeg/util": "^0.12.2",
         "@testing-library/dom": "^10.4.1",
         "@testing-library/jest-dom": "^6.9.1",
         "@testing-library/react": "^16.3.0",
@@ -2451,6 +2455,45 @@
         "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
       }
     },
+    "node_modules/@ffmpeg/core-mt": {
+      "version": "0.12.10",
+      "resolved": "https://registry.npmjs.org/@ffmpeg/core-mt/-/core-mt-0.12.10.tgz",
+      "integrity": "sha512-atyRTOpa58bLCIgd6GXBZAXWyWD3AUoQyzxqjvGhp9MuSzdILtOTI62ffLswBsCnLq15lQ8IETHUpm1oe4V9FQ==",
+      "license": "GPL-2.0-or-later",
+      "engines": {
+        "node": ">=16.x"
+      }
+    },
+    "node_modules/@ffmpeg/ffmpeg": {
+      "version": "0.12.15",
+      "resolved": "https://registry.npmjs.org/@ffmpeg/ffmpeg/-/ffmpeg-0.12.15.tgz",
+      "integrity": "sha512-1C8Obr4GsN3xw+/1Ww6PFM84wSQAGsdoTuTWPOj2OizsRDLT4CXTaVjPhkw6ARyDus1B9X/L2LiXHqYYsGnRFw==",
+      "license": "MIT",
+      "dependencies": {
+        "@ffmpeg/types": "^0.12.4"
+      },
+      "engines": {
+        "node": ">=18.x"
+      }
+    },
+    "node_modules/@ffmpeg/types": {
+      "version": "0.12.4",
+      "resolved": "https://registry.npmjs.org/@ffmpeg/types/-/types-0.12.4.tgz",
+      "integrity": "sha512-k9vJQNBGTxE5AhYDtOYR5rO5fKsspbg51gbcwtbkw2lCdoIILzklulcjJfIDwrtn7XhDeF2M+THwJ2FGrLeV6A==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=16.x"
+      }
+    },
+    "node_modules/@ffmpeg/util": {
+      "version": "0.12.2",
+      "resolved": "https://registry.npmjs.org/@ffmpeg/util/-/util-0.12.2.tgz",
+      "integrity": "sha512-ouyoW+4JB7WxjeZ2y6KpRvB+dLp7Cp4ro8z0HIVpZVCM7AwFlHa0c4R8Y/a4M3wMqATpYKhC7lSFHQ0T11MEDw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=18.x"
+      }
+    },
     "node_modules/@humanwhocodes/config-array": {
       "version": "0.13.0",
       "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.13.0.tgz",

package.json

@@ -3,6 +3,10 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@ffmpeg/core-mt": "^0.12.10",
+    "@ffmpeg/ffmpeg": "^0.12.15",
+    "@ffmpeg/types": "^0.12.4",
+    "@ffmpeg/util": "^0.12.2",
     "@testing-library/dom": "^10.4.1",
     "@testing-library/jest-dom": "^6.9.1",
     "@testing-library/react": "^16.3.0",

src/App.css

@@ -1,38 +0,0 @@
-.App {
-  text-align: center;
-}
-
-.App-logo {
-  height: 40vmin;
-  pointer-events: none;
-}
-
-@media (prefers-reduced-motion: no-preference) {
-  .App-logo {
-    animation: App-logo-spin infinite 20s linear;
-  }
-}
-
-.App-header {
-  background-color: #282c34;
-  min-height: 100vh;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  font-size: calc(10px + 2vmin);
-  color: white;
-}
-
-.App-link {
-  color: #61dafb;
-}
-
-@keyframes App-logo-spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
-}

src/App.tsx

@@ -1,26 +1,45 @@
-import React from 'react';
+import { JSX, useEffect, useRef, useState } from "react";
-import logo from './logo.svg';
+import VideoPlayer from "./video/VideoPlayer";
-import './App.css';
+import VideoPicker from "./video/VideoPicker";
+import Segment from "./segmenting/Segment";
+import SegmentList from "./segmenting/SegmentList";
+import { FFmpeg } from "@ffmpeg/ffmpeg";
 
-function App() {
+function App(): JSX.Element {
-  return (
+	const [path, setPath] = useState<string>("");
-    <div className="App">
+	const [segments, setSegments] = useState<Segment[]>([]);
-      <header className="App-header">
+	const [loaded, setLoaded] = useState<boolean>(false);
-        <img src={logo} className="App-logo" alt="logo" />
+	const ffmpegRef = useRef(new FFmpeg());
-        <p>
+
-          Edit <code>src/App.tsx</code> and save to reload.
+	const load = async () => {
-        </p>
+		const ffmpeg = ffmpegRef.current;
-        <a
+		ffmpeg.on("log", ({ message }) => {
-          className="App-link"
+			console.log(message);
-          href="https://reactjs.org"
+		});
-          target="_blank"
+		
-          rel="noopener noreferrer"
+		await ffmpeg.load();
-        >
+		setLoaded(true);
-          Learn React
+	};
-        </a>
+
-      </header>
+	useEffect(() => {
-    </div>
+		load();
-  );
+	});
+
+	return (
+		<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>
+	);
 }
 
 export default App;

src/index.css

@@ -1,13 +1,53 @@
 body {
-  margin: 0;
+	margin: 0;
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
+	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto",
-    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
+		"Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans",
-    sans-serif;
+		"Helvetica Neue", sans-serif;
-  -webkit-font-smoothing: antialiased;
+	-webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
+	-moz-osx-font-smoothing: grayscale;
 }
 
 code {
-  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
+	font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
-    monospace;
+		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/index.tsx

@@ -1,16 +1,16 @@
-import React from 'react';
+import React from "react";
-import ReactDOM from 'react-dom/client';
+import ReactDOM from "react-dom/client";
-import './index.css';
+import "./index.css";
-import App from './App';
+import App from "./App";
-import reportWebVitals from './reportWebVitals';
+import reportWebVitals from "./reportWebVitals";
 
 const root = ReactDOM.createRoot(
-  document.getElementById('root') as HTMLElement
+	document.getElementById("root") as HTMLElement
 );
 root.render(
-  <React.StrictMode>
+	<React.StrictMode>
-    <App />
+		<App />
-  </React.StrictMode>
+	</React.StrictMode>
 );
 
 // If you want to start measuring performance in your app, pass a function

src/logo.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 841.9 595.3"><g fill="#61DAFB"><path d="M666.3 296.5c0-32.5-40.7-63.3-103.1-82.4 14.4-63.6 8-114.2-20.2-130.4-6.5-3.8-14.1-5.6-22.4-5.6v22.3c4.6 0 8.3.9 11.4 2.6 13.6 7.8 19.5 37.5 14.9 75.7-1.1 9.4-2.9 19.3-5.1 29.4-19.6-4.8-41-8.5-63.5-10.9-13.5-18.5-27.5-35.3-41.6-50 32.6-30.3 63.2-46.9 84-46.9V78c-27.5 0-63.5 19.6-99.9 53.6-36.4-33.8-72.4-53.2-99.9-53.2v22.3c20.7 0 51.4 16.5 84 46.6-14 14.7-28 31.4-41.3 49.9-22.6 2.4-44 6.1-63.6 11-2.3-10-4-19.7-5.2-29-4.7-38.2 1.1-67.9 14.6-75.8 3-1.8 6.9-2.6 11.5-2.6V78.5c-8.4 0-16 1.8-22.6 5.6-28.1 16.2-34.4 66.7-19.9 130.1-62.2 19.2-102.7 49.9-102.7 82.3 0 32.5 40.7 63.3 103.1 82.4-14.4 63.6-8 114.2 20.2 130.4 6.5 3.8 14.1 5.6 22.5 5.6 27.5 0 63.5-19.6 99.9-53.6 36.4 33.8 72.4 53.2 99.9 53.2 8.4 0 16-1.8 22.6-5.6 28.1-16.2 34.4-66.7 19.9-130.1 62-19.1 102.5-49.9 102.5-82.3zm-130.2-66.7c-3.7 12.9-8.3 26.2-13.5 39.5-4.1-8-8.4-16-13.1-24-4.6-8-9.5-15.8-14.4-23.4 14.2 2.1 27.9 4.7 41 7.9zm-45.8 106.5c-7.8 13.5-15.8 26.3-24.1 38.2-14.9 1.3-30 2-45.2 2-15.1 0-30.2-.7-45-1.9-8.3-11.9-16.4-24.6-24.2-38-7.6-13.1-14.5-26.4-20.8-39.8 6.2-13.4 13.2-26.8 20.7-39.9 7.8-13.5 15.8-26.3 24.1-38.2 14.9-1.3 30-2 45.2-2 15.1 0 30.2.7 45 1.9 8.3 11.9 16.4 24.6 24.2 38 7.6 13.1 14.5 26.4 20.8 39.8-6.3 13.4-13.2 26.8-20.7 39.9zm32.3-13c5.4 13.4 10 26.8 13.8 39.8-13.1 3.2-26.9 5.9-41.2 8 4.9-7.7 9.8-15.6 14.4-23.7 4.6-8 8.9-16.1 13-24.1zM421.2 430c-9.3-9.6-18.6-20.3-27.8-32 9 .4 18.2.7 27.5.7 9.4 0 18.7-.2 27.8-.7-9 11.7-18.3 22.4-27.5 32zm-74.4-58.9c-14.2-2.1-27.9-4.7-41-7.9 3.7-12.9 8.3-26.2 13.5-39.5 4.1 8 8.4 16 13.1 24 4.7 8 9.5 15.8 14.4 23.4zM420.7 163c9.3 9.6 18.6 20.3 27.8 32-9-.4-18.2-.7-27.5-.7-9.4 0-18.7.2-27.8.7 9-11.7 18.3-22.4 27.5-32zm-74 58.9c-4.9 7.7-9.8 15.6-14.4 23.7-4.6 8-8.9 16-13 24-5.4-13.4-10-26.8-13.8-39.8 13.1-3.1 26.9-5.8 41.2-7.9zm-90.5 125.2c-35.4-15.1-58.3-34.9-58.3-50.6 0-15.7 22.9-35.6 58.3-50.6 8.6-3.7 18-7 27.7-10.1 5.7 19.6 13.2 40 22.5 60.9-9.2 20.8-16.6 41.1-22.2 60.6-9.9-3.1-19.3-6.5-28-10.2zM310 490c-13.6-7.8-19.5-37.5-14.9-75.7 1.1-9.4 2.9-19.3 5.1-29.4 19.6 4.8 41 8.5 63.5 10.9 13.5 18.5 27.5 35.3 41.6 50-32.6 30.3-63.2 46.9-84 46.9-4.5-.1-8.3-1-11.3-2.7zm237.2-76.2c4.7 38.2-1.1 67.9-14.6 75.8-3 1.8-6.9 2.6-11.5 2.6-20.7 0-51.4-16.5-84-46.6 14-14.7 28-31.4 41.3-49.9 22.6-2.4 44-6.1 63.6-11 2.3 10.1 4.1 19.8 5.2 29.1zm38.5-66.7c-8.6 3.7-18 7-27.7 10.1-5.7-19.6-13.2-40-22.5-60.9 9.2-20.8 16.6-41.1 22.2-60.6 9.9 3.1 19.3 6.5 28.1 10.2 35.4 15.1 58.3 34.9 58.3 50.6-.1 15.7-23 35.6-58.4 50.6zM320.8 78.4z"/><circle cx="420.9" cy="296.5" r="45.7"/><path d="M520.5 78.1z"/></g></svg>

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,117 @@
+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,15 @@
+export default function VideoPlayer({ path }: { path: string }) {
+	return (
+		<div>
+			<video
+				id="videoPlayer"
+				width="960"
+				height="540"
+				controls
+				disablePictureInPicture
+				disableRemotePlayback
+				src={path}
+			/>
+		</div>
+	);
+}