amanda/segmenter-react
Archived
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix all this fuckass formatting and clean up

Browse Source
This commit is contained in:
Amanda
2025-11-02 00:45:37 -04:00
parent 262ac046b6
commit 0008a71e98
10 changed files with 214 additions and 189 deletions
Download Patch File Download Diff File Expand all files Collapse all files

161
src/segmenting/SegmentList.tsx
View File

@@ -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 <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>
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>;
}
<button
onClick={() => {
setSegments([
...segments,
{
title: "",
inTime: 0,
outTime: 0,
},
]);
}}
>
+
</button>
</div>
);
}