segmenter-react/src/segmenting/SegmentList.tsx

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