From 0008a71e9862f8c6c545ce52735e8c3090663946 Mon Sep 17 00:00:00 2001 From: Amanda Date: Sun, 2 Nov 2025 00:45:37 -0400 Subject: [PATCH] Fix all this fuckass formatting and clean up --- src/App.css | 38 -------- src/App.tsx | 46 +++++----- src/index.css | 50 +++++----- src/index.tsx | 18 ++-- src/logo.svg | 1 - src/segmenting/Segment.tsx | 8 +- src/segmenting/SegmentList.tsx | 161 ++++++++++++++++++++++----------- src/util/timestamp.ts | 12 +-- src/video/VideoPicker.tsx | 40 ++++---- src/video/VideoPlayer.tsx | 29 +++--- 10 files changed, 214 insertions(+), 189 deletions(-) delete mode 100644 src/App.css delete mode 100644 src/logo.svg diff --git a/src/App.css b/src/App.css deleted file mode 100644 index 74b5e05..0000000 --- a/src/App.css +++ /dev/null @@ -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); - } -} diff --git a/src/App.tsx b/src/App.tsx index 5def202..3449c70 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,28 +1,32 @@ -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'; +import { JSX, useEffect, 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(""); - const [segments, setSegments] = useState([]); + const [path, setPath] = useState(""); + const [segments, setSegments] = useState([]); - return ( -
-
- -
- + const load = async () => {}; + + useEffect(() => {}); + + return ( +
+
+ +
+ +
+ +
+

Amanda's VOD Segmenter

+ + +
- -
-

Amanda's VOD Segmenter

- - -
-
- ); + ); } export default App; diff --git a/src/index.css b/src/index.css index 8be4ed1..23006e1 100644 --- a/src/index.css +++ b/src/index.css @@ -1,53 +1,53 @@ body { - margin: 0; - font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', - 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', - sans-serif; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; + margin: 0; + font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", + "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", + "Helvetica Neue", sans-serif; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; } code { - font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', - monospace; + font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New", + monospace; } video { - background-color: black; - position: relative; + background-color: black; + position: relative; } #app { - width: 100%; - overflow: auto; + width: 100%; + overflow: auto; } .column { - width: auto; - padding: 20px; - float: left; + width: auto; + padding: 20px; + float: left; } #videoTimestamp { - text-align: center; - font-size: xx-large; + text-align: center; + font-size: xx-large; } .segmentEntry { - width: auto; + width: auto; } .segmentData { - margin: 4px; - float: left; + margin: 4px; + float: left; } .scrollable { - overflow-y: auto; - height: 100%; - width: 100%; + overflow-y: auto; + height: 100%; + width: 100%; } .timestamp { - font-family:'Courier New', Courier, monospace; -} \ No newline at end of file + font-family: "Courier New", Courier, monospace; +} diff --git a/src/index.tsx b/src/index.tsx index 032464f..9817d59 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -1,16 +1,16 @@ -import React from 'react'; -import ReactDOM from 'react-dom/client'; -import './index.css'; -import App from './App'; -import reportWebVitals from './reportWebVitals'; +import React from "react"; +import ReactDOM from "react-dom/client"; +import "./index.css"; +import App from "./App"; +import reportWebVitals from "./reportWebVitals"; const root = ReactDOM.createRoot( - document.getElementById('root') as HTMLElement + document.getElementById("root") as HTMLElement ); root.render( - - - + + + ); // If you want to start measuring performance in your app, pass a function diff --git a/src/logo.svg b/src/logo.svg deleted file mode 100644 index 9dfc1c0..0000000 --- a/src/logo.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/src/segmenting/Segment.tsx b/src/segmenting/Segment.tsx index 2796ac3..19958e6 100644 --- a/src/segmenting/Segment.tsx +++ b/src/segmenting/Segment.tsx @@ -1,5 +1,5 @@ export default interface Segment { - title: string; - inTime: number; - outTime: number; -} \ No newline at end of file + title: string; + inTime: number; + outTime: number; +} diff --git a/src/segmenting/SegmentList.tsx b/src/segmenting/SegmentList.tsx index 1a379c9..8f7e80d 100644 --- a/src/segmenting/SegmentList.tsx +++ b/src/segmenting/SegmentList.tsx @@ -2,57 +2,116 @@ 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; +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)); - } + function remSegment(remIndex: number) { + setSegments( + segments.filter( + (value: Segment, index: number) => index != remIndex + ) + ); + } - return
-
- {segments.map((segment, index) => { - return ( -
-
- -
- - {createTimestamp(segment.inTime)} -
-
- - {createTimestamp(segment.outTime)} -
- -
-
- ) - })} -
+ return ( +
+
+ {segments.map((segment, index) => { + return ( +
+
+ +
+ +
+ + + {createTimestamp(segment.inTime)} + +
+
+ + + + {createTimestamp(segment.outTime)} + + +
+ +
+ +
+
+ ); + })} +
- -
; -} \ No newline at end of file + +
+ ); +} diff --git a/src/util/timestamp.ts b/src/util/timestamp.ts index 401f38b..97219e6 100644 --- a/src/util/timestamp.ts +++ b/src/util/timestamp.ts @@ -1,9 +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; + 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")}`; + return `${hours.toString().padStart(2, "0")}:${minutes + .toString() + .padStart(2, "0")}:${seconds.toString().padStart(2, "0")}`; } diff --git a/src/video/VideoPicker.tsx b/src/video/VideoPicker.tsx index c1a77a7..8bd7ca2 100644 --- a/src/video/VideoPicker.tsx +++ b/src/video/VideoPicker.tsx @@ -1,23 +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) - ); - } +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 ( -
- openFile(event.target.files)} - /> -
- ); -} \ No newline at end of file + return ( +
+ openFile(event.target.files)} + /> +
+ ); +} diff --git a/src/video/VideoPlayer.tsx b/src/video/VideoPlayer.tsx index cc5c92f..cbdff6f 100644 --- a/src/video/VideoPlayer.tsx +++ b/src/video/VideoPlayer.tsx @@ -1,14 +1,15 @@ -export default function VideoPlayer({path}: {path: string}) { - return ( -
-
- ); -} \ No newline at end of file +export default function VideoPlayer({ path }: { path: string }) { + return ( +
+
+ ); +}