dylan/vod-system
1
1
Fork 0
Code Issues 16 Pull Requests 2 Actions Packages Projects Releases Wiki Activity

refactor(frontend): remove dead code

Browse Source
This commit is contained in:
Dylan De Faoite
2026-06-22 22:50:07 +01:00
parent e36913d671
commit 8b49a10a8c
14 changed files with 185 additions and 373 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
frontend/src/components/Box.tsx
View File

@@ -1,16 +1,14 @@
import clsx from "clsx";
type props = {
children: React.ReactNode,
className?: string
}
type Props = {
children: React.ReactNode;
className?: string;
};
const Box = ({children, className}: props) => {
return (
<div className={clsx("bg-white border border-gray-200 shadow-sm rounded-lg", className)}>
{ children }
</div>
)
}
const Box = ({ children, className }: Props) => (
<div className={clsx("bg-white border border-gray-200 shadow-sm rounded-lg", className)}>
{children}
</div>
);
export default Box;
export default Box;

47
frontend/src/components/Dropdown.tsx
View File

@@ -1,54 +1,45 @@
import React, {useEffect, useRef} from "react";
import React, { useState, useEffect, useRef } from "react";
import clsx from "clsx";
type DropdownItemProps = {
item: string;
onClick: (item: string) => void;
className?: string;
}
};
const DropdownItem = ({ item, onClick, className }: DropdownItemProps) => {
return (
<li className={clsx("cursor-pointer hover:bg-gray-50 px-3 py-2 text-sm text-gray-700", className)}
onClick={() => onClick(item)}
>
{item}
</li>
);
}
const DropdownItem = ({ item, onClick, className }: DropdownItemProps) => (
<li
className={clsx("cursor-pointer hover:bg-gray-50 px-3 py-2 text-sm text-gray-700", className)}
onClick={() => onClick(item)}
>
{item}
</li>
);
type DropdownProps = {
label: React.ReactNode;
children: React.ReactNode;
className?: string;
}
};
const Dropdown = ({ label, children, className }: DropdownProps) => {
const [isOpen, setIsOpen] = React.useState(false);
const [isOpen, setIsOpen] = useState(false);
const ref = useRef<HTMLDivElement>(null);
const toggleDropdown = () => {
setIsOpen(!isOpen);
};
useEffect(() => {
function handleClickOutside(event: { target: any }) {
if (ref.current && !ref.current.contains(event.target)) {
const handleClickOutside = (e: MouseEvent) => {
if (ref.current && !ref.current.contains(e.target as Node)) {
setIsOpen(false);
}
}
document.addEventListener('mousedown', handleClickOutside);
return () => {
document.removeEventListener('mousedown', handleClickOutside);
};
document.addEventListener('mousedown', handleClickOutside);
return () => document.removeEventListener('mousedown', handleClickOutside);
}, []);
return (
<div className={clsx(className, "relative inline-block text-left")}
ref={ref}>
<div className={clsx(className, "relative inline-block text-left")} ref={ref}>
<button
onClick={toggleDropdown}
onClick={() => setIsOpen(v => !v)}
className="inline-flex items-center gap-1 rounded-lg px-3 py-2 text-sm font-medium text-gray-700 hover:bg-gray-100 transition-colors duration-150"
>
{label}
@@ -62,6 +53,4 @@ const Dropdown = ({ label, children, className }: DropdownProps) => {
);
};
export { Dropdown, DropdownItem };

26
frontend/src/components/Selector.tsx
View File

@@ -1,20 +1,16 @@
import React from "react";
type props = {
type Props = {
children: React.ReactNode;
label: String;
}
label: string;
};
const Selector = ({children, label}: props) => {
return (
<div className={"flex items-center gap-2"}>
<label className={"w-full text-sm text-gray-600"}>
{ label }
</label>
<div className={"w-px h-5 bg-gray-200 mx-2"} />
{children}
</div>
)
}
const Selector = ({ children, label }: Props) => (
<div className="flex items-center gap-2">
<label className="w-full text-sm text-gray-600">{label}</label>
<div className="w-px h-5 bg-gray-200 mx-2" />
{children}
</div>
);
export default Selector;
export default Selector;

1
frontend/src/components/Sidebar.tsx
View File

@@ -31,7 +31,6 @@ const Sidebar = ({user, className}: props) => {
<Divider />
<div className="flex flex-col gap-0.5">
<SidebarButton url="/my-clips" logo={<Film size={18}/>} label="Clips" />
{/*<SidebarButton url="/vods" logo={<Video size={18}/>} label="VoDs" />*/}
</div>
</>
)}

6
frontend/src/components/buttons/SidebarButton.tsx
View File

@@ -1,13 +1,13 @@
import MenuButton from "./MenuButton.tsx";
import { Link, useLocation } from "react-router-dom";
type props = {
type Props = {
url: string;
logo: React.ReactNode;
label: String;
label: string;
}
const SidebarButton = ({url, logo, label}: props) => {
const SidebarButton = ({url, logo, label}: Props) => {
const { pathname } = useLocation();
const isActive = url === "/" ? pathname === "/" : pathname.startsWith(url);

40
frontend/src/components/video/ClipRangeSlider.tsx
View File

@@ -1,42 +1,32 @@
import RangeSlider from 'react-range-slider-input';
import 'react-range-slider-input/dist/style.css';
import {useRef} from "react";
import clsx from 'clsx';
import { useRef, type Dispatch, type SetStateAction } from "react";
import type { VideoMetadata } from "../../utils/types.ts";
type Props = {
videoRef: HTMLVideoElement | null;
videoMetadata: VideoMetadata;
setSliderValue: Function;
setMetadata: Function;
setSliderValue: Dispatch<SetStateAction<number>>;
setMetadata: Dispatch<SetStateAction<VideoMetadata>>;
className?: string;
};
export default function ClipRangeSlider({videoRef,
videoMetadata,
setSliderValue,
setMetadata,
className}: Props) {
const previousRangeSliderInput = useRef<[number, number]>([0, 0]);
export default function ClipRangeSlider({ videoRef, videoMetadata, setSliderValue, setMetadata, className }: Props) {
const previousRange = useRef<[number, number]>([0, 0]);
const handleRangeSliderInput = (val: [number, number]) => {
const handleRangeInput = (val: [number, number]) => {
if (!videoRef) return;
if (previousRangeSliderInput.current[0] != val[0]) {
if (previousRange.current[0] !== val[0]) {
videoRef.currentTime = val[0];
setSliderValue(val[0]);
} else if (previousRangeSliderInput.current[1] != val[1]) {
} else if (previousRange.current[1] !== val[1]) {
videoRef.currentTime = val[1];
setSliderValue(val[1]);
}
setMetadata((prevState: VideoMetadata) => ({
...prevState,
startPoint: val[0],
duration: val[1] - val[0]
}
))
previousRangeSliderInput.current = val;
setMetadata(prev => ({ ...prev, startPoint: val[0], duration: val[1] - val[0] }));
previousRange.current = val;
};
return (
@@ -44,9 +34,9 @@ export default function ClipRangeSlider({videoRef,
min={0}
max={videoMetadata.duration}
step={0.1}
onInput={handleRangeSliderInput}
className={clsx(className)}
id={"range-slider"}
onInput={handleRangeInput}
className={className}
id="range-slider"
/>
)
}
);
}

35
frontend/src/components/video/ConfigBox.tsx
View File

@@ -1,37 +1,28 @@
import { type Dispatch, type SetStateAction } from "react";
import type { VideoMetadata } from "../../utils/types.ts";
import Selector from "../Selector.tsx";
import clsx from "clsx";
type prop = {
setMetadata: Function;
type Props = {
setMetadata: Dispatch<SetStateAction<VideoMetadata>>;
className?: string;
}
};
const inputClass = "border border-gray-300 bg-white rounded-md w-full p-2 text-sm focus:outline-none focus:ring-2 focus:ring-primary/20 focus:border-primary transition-colors";
export default function ConfigBox({setMetadata, className}: prop) {
export default function ConfigBox({ setMetadata, className }: Props) {
const updateRes = (e: React.ChangeEvent<HTMLSelectElement>) => {
const vals = e.target.value.split(",");
setMetadata((prevState: VideoMetadata) => ({
...prevState,
width: parseInt(vals[0]),
height: parseInt(vals[1])
}))
}
const [width, height] = e.target.value.split(",").map(Number);
setMetadata(prev => ({ ...prev, width, height }));
};
const updateFps = (e: React.ChangeEvent<HTMLSelectElement>) => {
setMetadata((prevState: VideoMetadata) => ({
...prevState,
fps: parseInt(e.target.value)
}))
}
setMetadata(prev => ({ ...prev, fps: parseInt(e.target.value) }));
};
const updateFileSize = (e: React.ChangeEvent<HTMLInputElement>) => {
setMetadata((prevState: VideoMetadata) => ({
...prevState,
fileSize: parseInt(e.target.value) * 1000
}))
}
setMetadata(prev => ({ ...prev, fileSize: parseInt(e.target.value) * 1000 }));
};
return (
<div className={clsx("flex flex-col gap-3 p-6", className)}>
@@ -64,5 +55,5 @@ export default function ConfigBox({setMetadata, className}: prop) {
/>
</Selector>
</div>
)
);
}

36
frontend/src/components/video/MetadataBox.tsx
View File

@@ -1,26 +1,22 @@
import clsx from "clsx";
import type {VideoMetadata} from "../../utils/types.ts";
import { type Dispatch, type SetStateAction } from "react";
import type { VideoMetadata } from "../../utils/types.ts";
type MetadataBoxProps = {
setMetadata: Function
type Props = {
setMetadata: Dispatch<SetStateAction<VideoMetadata>>;
className?: string;
}
};
const MetadataBox = ({setMetadata, className}: MetadataBoxProps) => {
return (
<div className={clsx("flex flex-col content-between p-6 gap-2", className)}>
<p className="w-full font-semibold text-gray-800 text-sm">Title</p>
<input
type="text"
placeholder="Enter title"
onChange={(e) => setMetadata((prevState: VideoMetadata) => ({
...prevState,
title: e.target.value
}))}
className="border border-gray-300 bg-white rounded-md w-full p-2 text-sm focus:outline-none focus:ring-2 focus:ring-primary/20 focus:border-primary transition-colors"
/>
</div>
)
}
const MetadataBox = ({ setMetadata, className }: Props) => (
<div className={clsx("flex flex-col content-between p-6 gap-2", className)}>
<p className="w-full font-semibold text-gray-800 text-sm">Title</p>
<input
type="text"
placeholder="Enter title"
onChange={(e) => setMetadata(prev => ({ ...prev, title: e.target.value }))}
className="border border-gray-300 bg-white rounded-md w-full p-2 text-sm focus:outline-none focus:ring-2 focus:ring-primary/20 focus:border-primary transition-colors"
/>
</div>
);
export default MetadataBox;

35
frontend/src/components/video/PlaybackSlider.tsx
View File

@@ -1,52 +1,37 @@
import {useEffect} from "react";
import clsx from 'clsx';
import { useEffect, type Dispatch, type SetStateAction } from "react";
import type { VideoMetadata } from "../../utils/types.ts";
type Props = {
videoRef: HTMLVideoElement | null;
videoMetadata: VideoMetadata;
sliderValue: number;
setSliderValue: Function;
setSliderValue: Dispatch<SetStateAction<number>>;
className?: string;
};
export default function PlaybackSlider({videoRef,
videoMetadata,
sliderValue,
setSliderValue,
className}: Props) {
export default function PlaybackSlider({ videoRef, videoMetadata, sliderValue, setSliderValue, className }: Props) {
const updateVideo = (e: React.ChangeEvent<HTMLInputElement>) => {
if (!videoRef) return;
videoRef.currentTime = e.target.valueAsNumber;
setSliderValue(e.target.valueAsNumber);
}
};
// update slider
useEffect(() => {
if (!videoRef) return;
const updateSlider = () => {
setSliderValue(videoRef.currentTime);
};
const updateSlider = () => setSliderValue(videoRef.currentTime);
videoRef.addEventListener("timeupdate", updateSlider);
return () => {
videoRef.removeEventListener("timeupdate", updateSlider);
};
return () => videoRef.removeEventListener("timeupdate", updateSlider);
}, [videoRef]);
return (
<input
type={"range"}
type="range"
min={0}
max={videoMetadata.duration}
value={sliderValue}
onChange={updateVideo}
step={0.1}
className={clsx(className)}
className={className}
/>
)
}
);
}

49
frontend/src/components/video/Playbar.tsx
View File

@@ -1,10 +1,9 @@
import { useEffect, useState} from "react";
import { useEffect, useState } from "react";
import { Volume1, Volume2, VolumeX, Play, Pause } from 'lucide-react';
import clsx from 'clsx';
import type { VideoMetadata } from "../../utils/types.ts";
import { formatTime } from "../../utils/utils.ts";
type Props = {
video: HTMLVideoElement | null;
videoMetadata: VideoMetadata;
@@ -15,9 +14,10 @@ export default function Playbar({ video, videoMetadata, className }: Props) {
const [isPlaying, setIsPlaying] = useState(false);
const [volume, setVolume] = useState(100);
const Icon = volume === 0 ? VolumeX : volume < 50 ? Volume1 : Volume2;
const togglePlay = () => {
if (!video) return;
if (video.paused) {
video.play();
setIsPlaying(true);
@@ -27,35 +27,20 @@ export default function Playbar({ video, videoMetadata, className }: Props) {
}
};
let Icon;
// update icon
if (volume == 0) {
Icon = VolumeX;
} else if (volume < 50) {
Icon = Volume1;
} else {
Icon = Volume2;
}
const updateVolume = (e: React.ChangeEvent<HTMLInputElement>) => {
if (!video) return;
const newVolume = parseInt(e.target.value);
video.volume = newVolume / 100;
setVolume(newVolume);
};
let volume = parseInt(e.target.value)
video.volume = volume / 100;
setVolume(volume);
}
// Sync state with video element changes (e.g., if someone presses spacebar or clicks on the video)
// Sync isPlaying when the video is controlled outside this component (e.g. keyboard shortcuts)
useEffect(() => {
if (!video) return;
const handlePlay = () => setIsPlaying(true);
const handlePause = () => setIsPlaying(false);
video.addEventListener("play", handlePlay);
video.addEventListener("pause", handlePause);
return () => {
video.removeEventListener("play", handlePlay);
video.removeEventListener("pause", handlePause);
@@ -64,28 +49,26 @@ export default function Playbar({ video, videoMetadata, className }: Props) {
return (
<div className={clsx("flex justify-between items-center mb-2", className)}>
<div className={"flex gap-1"}>
<div className="flex gap-1">
<Icon size={24} />
<input
type='range'
type="range"
min={0}
max={100}
onChange={updateVolume}
value={volume}
className={"w-20"}
onChange={updateVolume}
className="w-20"
/>
</div>
<button
onClick={togglePlay}
className={"hover:bg-gray-100 rounded-full p-1.5 transition-colors duration-150 text-gray-700"}
className="hover:bg-gray-100 rounded-full p-1.5 transition-colors duration-150 text-gray-700"
>
{isPlaying ? <Pause size={24} /> : <Play size={24} />}
</button>
<label>
<span>
{formatTime(video?.currentTime ?? 0)} / {formatTime(videoMetadata.duration ?? 0)}
</label>
</span>
</div>
);
}
}

9
frontend/src/components/video/VideoCard.tsx
View File

@@ -25,9 +25,12 @@ const VideoCard = ({ id, title, duration, createdAt, onEdit, onDelete, className
const [confirmDelete, setConfirmDelete] = useState(false);
const menuRef = useRef<HTMLDivElement>(null);
setTimeout(() => {
setTimeAgo(dateToTimeAgo(stringToDate(createdAt)));
}, 1000);
useEffect(() => {
const interval = setInterval(() => {
setTimeAgo(dateToTimeAgo(stringToDate(createdAt)));
}, 1000);
return () => clearInterval(interval);
}, [createdAt]);
useEffect(() => {
isThumbnailAvailable(id)