+
{isOpen && (
-
-
+
-
{children}
-
-
- {children}
-
- )
-}
+const Selector = ({ children, label }: Props) => (
+
+
+
+ {children}
+
+);
-export default Selector;
\ No newline at end of file
+export default Selector;
diff --git a/frontend/src/components/Sidebar.tsx b/frontend/src/components/Sidebar.tsx
index 4e6e272..ca409d6 100644
--- a/frontend/src/components/Sidebar.tsx
+++ b/frontend/src/components/Sidebar.tsx
@@ -1,7 +1,6 @@
import clsx from "clsx";
import SidebarButton from "./buttons/SidebarButton.tsx";
-import { Plus, Film, Home } from 'lucide-react';
-import Box from "./Box.tsx";
+import { Plus, Film, Home, User as UserIcon } from 'lucide-react';
import type {User} from "../utils/types.ts";
type props = {
@@ -9,35 +8,44 @@ type props = {
className?: string
}
+const Divider = () => ; + const Sidebar = ({user, className}: props) => { return ( -
![{"VoD]({"../../public/logo.png"}){kind=logo}
-
+
setSidebarToggled(!sidebarToggled)}>
{sidebarToggled ?
@@ -69,7 +71,19 @@ const Topbar = ({
referrerPolicy="no-referrer"
/>
-
+
+ {user.name}
+ {isStreaming && (
+
+
+
+
+ )}
+
+ }>
+ navigate("/profile")} />
handleLogout()}
className={"text-red-500 font-medium"} />
diff --git a/frontend/src/components/buttons/BlueButton.tsx b/frontend/src/components/buttons/BlueButton.tsx
index 42ac4ef..4dce83e 100644
--- a/frontend/src/components/buttons/BlueButton.tsx
+++ b/frontend/src/components/buttons/BlueButton.tsx
@@ -5,7 +5,7 @@ type Props = React.ButtonHTMLAttributes;
const BlueButton: React.FC = ({ className = "", ...props }) => {
return (
);
diff --git a/frontend/src/components/buttons/MenuButton.tsx b/frontend/src/components/buttons/MenuButton.tsx
index f859e51..f1717ef 100644
--- a/frontend/src/components/buttons/MenuButton.tsx
+++ b/frontend/src/components/buttons/MenuButton.tsx
@@ -6,7 +6,7 @@ type Props = React.ButtonHTMLAttributes;
const MenuButton: React.FC = ({ className = "", ...props }) => {
return (
);
diff --git a/frontend/src/components/buttons/SidebarButton.tsx b/frontend/src/components/buttons/SidebarButton.tsx
index 5d9d3aa..8c5d55f 100644
--- a/frontend/src/components/buttons/SidebarButton.tsx
+++ b/frontend/src/components/buttons/SidebarButton.tsx
@@ -1,23 +1,23 @@
import MenuButton from "./MenuButton.tsx";
-import { Link } from "react-router-dom";
+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);
+
return (
-
-
+
+
{logo}{label}
)
}
-export default SidebarButton;
\ No newline at end of file
+export default SidebarButton;
diff --git a/frontend/src/components/video/ClipRangeSlider.tsx b/frontend/src/components/video/ClipRangeSlider.tsx
index c8622e0..742ea38 100644
--- a/frontend/src/components/video/ClipRangeSlider.tsx
+++ b/frontend/src/components/video/ClipRangeSlider.tsx
@@ -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>;
+ setMetadata: Dispatch>;
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"
/>
- )
-}
\ No newline at end of file
+ );
+}
diff --git a/frontend/src/components/video/ConfigBox.tsx b/frontend/src/components/video/ConfigBox.tsx
index 5cebb9c..864bacd 100644
--- a/frontend/src/components/video/ConfigBox.tsx
+++ b/frontend/src/components/video/ConfigBox.tsx
@@ -1,46 +1,36 @@
+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>;
className?: string;
-}
+};
-export default function ConfigBox({setMetadata, className}: prop) {
+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 }: Props) {
const updateRes = (e: React.ChangeEvent) => {
- 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) => {
- setMetadata((prevState: VideoMetadata) => ({
- ...prevState,
- fps: parseInt(e.target.value)
- }))
- }
+ setMetadata(prev => ({ ...prev, fps: parseInt(e.target.value) }));
+ };
const updateFileSize = (e: React.ChangeEvent) => {
- setMetadata((prevState: VideoMetadata) => ({
- ...prevState,
- fileSize: parseInt(e.target.value) * 1000
- }))
- }
+ setMetadata(prev => ({ ...prev, fileSize: parseInt(e.target.value) * 1000 }));
+ };
return (
- >;
className?: string;
-}
+};
-const MetadataBox = ({setMetadata, className}: MetadataBoxProps) => {
- return (
- >;
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) => {
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 (
- )
-}
\ No newline at end of file
+ );
+}
diff --git a/frontend/src/components/video/Playbar.tsx b/frontend/src/components/video/Playbar.tsx
index 5698c69..204e2c5 100644
--- a/frontend/src/components/video/Playbar.tsx
+++ b/frontend/src/components/video/Playbar.tsx
@@ -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) => {
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 (
-
- Download
- )
- :(
- )
- }
+
)
}
diff --git a/frontend/src/components/video/MetadataBox.tsx b/frontend/src/components/video/MetadataBox.tsx
index 1959848..6b1e6be 100644
--- a/frontend/src/components/video/MetadataBox.tsx
+++ b/frontend/src/components/video/MetadataBox.tsx
@@ -1,28 +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: DispatchExport
+
+
-
- )
-}
\ No newline at end of file
+ );
+}
diff --git a/frontend/src/components/video/ExportWidget.tsx b/frontend/src/components/video/ExportWidget.tsx
index ac9a743..35aef1c 100644
--- a/frontend/src/components/video/ExportWidget.tsx
+++ b/frontend/src/components/video/ExportWidget.tsx
@@ -16,17 +16,19 @@ const ExportWidget = ({dataSend, handleDownload, downloadable, progress}: props)
Export
- { downloadable ?
- (Export Settings
-
+ { downloadable ?
+ (
+ Download
+ )
+ :(
+
+ )
+ }
+
- {/*
- )
-}
-
-export default MetadataBox;
\ No newline at end of file
+export default MetadataBox;
diff --git a/frontend/src/components/video/PlaybackSlider.tsx b/frontend/src/components/video/PlaybackSlider.tsx
index 8f94aca..092db00 100644
--- a/frontend/src/components/video/PlaybackSlider.tsx
+++ b/frontend/src/components/video/PlaybackSlider.tsx
@@ -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: DispatchMetadata
*/} +const MetadataBox = ({ setMetadata, className }: Props) => ( +
+
+);
- Title
+ 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" + /> +Title
- setMetadata((prevState: VideoMetadata) => ({ - ...prevState, - title: e.target.value - }))} - className={"border-black bg-gray-200 rounded-md w-full p-2"} - /> -
- (null);
- setTimeout(() => {
- setTimeAgo(dateToTimeAgo(stringToDate(createdAt)))
- }, 1000);
+ useEffect(() => {
+ const interval = setInterval(() => {
+ setTimeAgo(dateToTimeAgo(stringToDate(createdAt)));
+ }, 1000);
+ return () => clearInterval(interval);
+ }, [createdAt]);
useEffect(() => {
isThumbnailAvailable(id)
- .then((available) => {
- setThumbnailAvailable(available);
- })
- .catch(() => {
- setThumbnailAvailable(false);
- });
+ .then(setThumbnailAvailable)
+ .catch(() => setThumbnailAvailable(false));
}, []);
+ useEffect(() => {
+ if (!menuOpen) return;
+ const handleClickOutside = (e: MouseEvent) => {
+ if (menuRef.current && !menuRef.current.contains(e.target as Node)) {
+ setMenuOpen(false);
+ setConfirmDelete(false);
+ }
+ };
+ document.addEventListener("mousedown", handleClickOutside);
+ return () => document.removeEventListener("mousedown", handleClickOutside);
+ }, [menuOpen]);
+
+ const stopAndRun = (e: React.MouseEvent, fn: () => void) => {
+ e.preventDefault();
+ e.stopPropagation();
+ fn();
+ };
return (
-
+
);
-}
\ No newline at end of file
+}
diff --git a/frontend/src/components/video/VideoCard.tsx b/frontend/src/components/video/VideoCard.tsx
index ffc2ab1..084aafc 100644
--- a/frontend/src/components/video/VideoCard.tsx
+++ b/frontend/src/components/video/VideoCard.tsx
@@ -1,79 +1,138 @@
import clsx from "clsx";
import { formatTime, stringToDate, dateToTimeAgo } from "../../utils/utils.ts";
import { Link } from "react-router-dom";
-import {useEffect, useState} from "react";
+import { useEffect, useRef, useState } from "react";
import { isThumbnailAvailable } from "../../utils/endpoints.ts";
+import { MoreVertical, Pencil, Trash2 } from "lucide-react";
type VideoCardProps = {
id: number,
title: string,
duration: number,
createdAt: string,
- className?: string
+ onEdit?: () => void,
+ onDelete?: () => void,
+ className?: string,
}
const fallbackThumbnail = "../../../public/default_thumbnail.png";
+const API_URL = import.meta.env.VITE_API_URL;
-const VideoCard = ({
- id,
- title,
- duration,
- createdAt,
- className
- }: VideoCardProps) => {
-
+const VideoCard = ({ id, title, duration, createdAt, onEdit, onDelete, className }: VideoCardProps) => {
const [timeAgo, setTimeAgo] = useState(dateToTimeAgo(stringToDate(createdAt)));
const [thumbnailAvailable, setThumbnailAvailable] = useState(true);
+ const [menuOpen, setMenuOpen] = useState(false);
+ const [confirmDelete, setConfirmDelete] = useState(false);
+ const menuRef = useRef
-
+
+
-
-
- (null);
+ const [isStreaming, setIsStreaming] = useState(false);
const fetchUser = async () => {
try {
@@ -23,6 +24,14 @@ const MainLayout = () => {
fetchUser();
}, []);
+ useEffect(() => {
+ if (!user) return;
+ const poll = () => getStreamStatus().then(setIsStreaming).catch(() => {});
+ poll();
+ const interval = setInterval(poll, 10000);
+ return () => clearInterval(interval);
+ }, [user]);
+
return (
{
sidebarToggled={sidebarToggled}
setSidebarToggled={setSidebarToggled}
user={user}
- fetchUser={fetchUser}/>
- (null);
- const videoUrl = `/api/v1/download/input/${id}`
+ const [videoUrl, setVideoUrl] = useState('');
+ const [uploadedId, setUploadedId] = useState(null);
+
const [metadata, setMetadata] = useState(null);
const [playbackValue, setPlaybackValue] = useState(0);
const [outputMetadata, setOutputMetadata] = useState({
- // default values
title: "",
description: "",
startPoint: 0,
@@ -31,41 +36,66 @@ const ClipEdit = () => {
const [downloadable, setDownloadable] = useState(false);
const [error, setError] = useState(null);
- const sendData = async() => {
- if (!id) return;
+ useEffect(() => {
+ if (!localFile) return;
+ const url = URL.createObjectURL(localFile);
+ setVideoUrl(url);
+ return () => URL.revokeObjectURL(url);
+ }, [localFile]);
- editFile(id, outputMetadata)
- .then(() => {
+ const handleVideoMetadataLoaded = () => {
+ const video = videoRef.current;
+ if (!video) return;
+ setMetadata({
+ title: '',
+ description: '',
+ startPoint: 0,
+ duration: video.duration,
+ width: video.videoWidth,
+ height: video.videoHeight,
+ fps: 30,
+ fileSize: localFile?.size ?? 0,
+ });
+ };
- processFile(id)
- .catch((err: Error) => setError(`Failed to process file: ${err.message}`));
+ const sendData = async () => {
+ if (!localFile) return;
- })
- .catch((err: Error) => setError(`Failed to edit file: ${err.message}`));
+ let jobId: string;
+ try {
+ jobId = await compress(localFile, outputMetadata);
+ setUploadedId(jobId);
+ } catch (err: unknown) {
+ setError(`Failed to start compression: ${err instanceof Error ? err.message : 'Unknown error'}`);
+ return;
+ }
- const interval = setInterval(async() => await pollProgress(id, interval), 500);
- }
+ const interval = setInterval(async () => await pollProgress(jobId, interval), 500);
+ };
- const pollProgress = async (id: string, intervalId: number) => {
- getProgress(id)
- .then((progress) => {
- setProgress(progress.process.progress);
+ const pollProgress = async (jobId: string, intervalId: number) => {
+ getJob(jobId)
+ .then((job) => {
+ setProgress(job.progress);
- if (progress.process.complete) {
+ if (job.state === 'FAILED') {
+ setError(`Compression failed: ${job.errorOutput ?? 'Unknown error'}`);
+ clearInterval(intervalId);
+ } else if (job.isComplete) {
clearInterval(intervalId);
setDownloadable(true);
- } else {
- setDownloadable(false)
}
- })
+ })
.catch((err: Error) => {
setError(`Failed to fetch progress: ${err.message}`);
clearInterval(intervalId);
});
- }
+ };
const handleDownload = async () => {
- const response = await fetch(`/api/v1/download/output/${id}`);
+ if (!uploadedId) return;
+
+ const response = await fetch(API_URL + `/api/v1/jobs/${uploadedId}/download`, { credentials: 'include' });
if (!response.ok) {
console.error('Download failed');
@@ -77,43 +107,27 @@ const ClipEdit = () => {
const a = document.createElement('a');
a.href = url;
- a.download = `${id}.mp4`;
+ a.download = `${uploadedId}.mp4`;
document.body.appendChild(a);
a.click();
a.remove();
window.URL.revokeObjectURL(url);
};
- useEffect(() => {
- if (!id) return;
-
- getMetadata(id)
- .then((data) => setMetadata(data ?? null))
- .catch((err) => console.error("Metadata fetch failed:", err));
- }, [id]);
-
return (
-
+ {formatTime(duration)} -
+ + + {(onEdit || onDelete) && ( + e.preventDefault()}
+ >
+
+
+ {menuOpen && (
+
+ )}
+ {!confirmDelete && (<>
+ {onEdit && (
+
+ )}
+ {onDelete && (
+
+ )}
+ )}
+ {confirmDelete && (
+
+ )}
+
+
+ )}
+ Delete this clip?
+
+
+
+
+
-
diff --git a/frontend/src/index.css b/frontend/src/index.css
index fc20e05..6c52b81 100644
--- a/frontend/src/index.css
+++ b/frontend/src/index.css
@@ -2,95 +2,44 @@
@plugin "flowbite-react/plugin/tailwindcss";
@source "../.flowbite-react/class-list.json";
-
@theme {
- --font-display: "Satoshi", "sans-serif";
+ --font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
/* Breakpoints */
--breakpoint-3xl: 1920px;
- --color-primary: oklch(0.55 0.21 254); /* Modern Blue (#2563EB) */
- --color-secondary: oklch(0.94 0.01 250); /* Light Gray (#E5E7EB) */
- --color-accent: oklch(0.68 0.20 288); /* Indigo Accent (#6366F1) */
- --color-text: oklch(0.17 0.01 270); /* Dark Slate (#111827) */
- --color-background: oklch(0.98 0.005 250);/* Soft off-white (#F9FAFB) */
-
+ --color-primary: oklch(0.55 0.21 254);
--color-primary-pressed: oklch(0.45 0.21 254);
+ --color-secondary: oklch(0.94 0.01 250);
+ --color-accent: oklch(0.68 0.20 288);
+ --color-text: oklch(0.17 0.01 270);
+ --color-background: oklch(0.97 0.005 250);
+ --color-surface: oklch(1 0 0);
+ --color-border: oklch(0.91 0.008 250);
/* Easing */
--ease-fluid: cubic-bezier(0.3, 0, 0, 1);
--ease-snappy: cubic-bezier(0.2, 0, 0, 1);
}
-#range-slider .range-slider__range{
+#range-slider .range-slider__range {
background: var(--color-primary);
}
-#range-slider .range-slider__thumb{
+#range-slider .range-slider__thumb {
background: var(--color-primary);
}
:root {
- font-family: Helvetica;
- line-height: 1.5;
- font-weight: 400;
-
- font-synthesis: none;
- text-rendering: optimizeLegibility;
- -webkit-font-smoothing: antialiased;
- -moz-osx-font-smoothing: grayscale;
+ font-family: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
+ line-height: 1.5;
+ font-weight: 400;
+ font-synthesis: none;
+ text-rendering: optimizeLegibility;
+ -webkit-font-smoothing: antialiased;
+ -moz-osx-font-smoothing: grayscale;
}
-/*a {*/
-/* font-weight: 500;*/
-/* color: #646cff;*/
-/* text-decoration: inherit;*/
-/*}*/
-/*a:hover {*/
-/* color: #535bf2;*/
-/*}*/
-
-/*body {*/
-/* margin: 0;*/
-/* display: flex;*/
-/* place-items: center;*/
-/* min-width: 320px;*/
-/* min-height: 100vh;*/
-/*}*/
-
-/*h1 {*/
-/* font-size: 3.2em;*/
-/* line-height: 1.1;*/
-/*}*/
-
-/*button {*/
-/* border-radius: 8px;*/
-/* border: 1px solid transparent;*/
-/* padding: 0.6em 1.2em;*/
-/* font-size: 1em;*/
-/* font-weight: 500;*/
-/* font-family: inherit;*/
-/* background-color: #1a1a1a;*/
-/* cursor: pointer;*/
-/* transition: border-color 0.25s;*/
-/*}*/
-/*button:hover {*/
-/* border-color: #646cff;*/
-/*}*/
-/*button:focus,*/
-/*button:focus-visible {*/
-/* outline: 4px auto -webkit-focus-ring-color;*/
-/*}*/
-
-/*@media (prefers-color-scheme: light) {*/
-/* :root {*/
-/* color: #213547;*/
-/* background-color: #ffffff;*/
-/* }*/
-/* a:hover {*/
-/* color: #747bff;*/
-/* }*/
-/* button {*/
-/* background-color: #f9f9f9;*/
-/* }*/
-/*}*/
+body {
+ background-color: var(--color-background);
+}
diff --git a/frontend/src/layouts/MainLayout.tsx b/frontend/src/layouts/MainLayout.tsx
index 3e42247..d21a82e 100644
--- a/frontend/src/layouts/MainLayout.tsx
+++ b/frontend/src/layouts/MainLayout.tsx
@@ -4,11 +4,12 @@ import Topbar from '../components/Topbar'
import { Outlet } from 'react-router-dom';
import {useEffect, useState} from "react";
import type {User} from "../utils/types";
-import { getUser } from "../utils/endpoints";
+import { getUser, getStreamStatus } from "../utils/endpoints";
const MainLayout = () => {
const [sidebarToggled, setSidebarToggled] = useState(false);
const [user, setUser] = useState{title == "" ? "(No Title)" : title}
-- {timeAgo} +
+
+ {title === "" ? "(No Title)" : title}
+{timeAgo}
+ fetchUser={fetchUser}
+ isStreaming={isStreaming}/>
+
diff --git a/frontend/src/pages/ClipEdit.tsx b/frontend/src/pages/ClipEdit.tsx
index f9b3fad..3ce8c99 100644
--- a/frontend/src/pages/ClipEdit.tsx
+++ b/frontend/src/pages/ClipEdit.tsx
@@ -1,23 +1,28 @@
-import { useParams } from 'react-router-dom';
+import { useLocation } from 'react-router-dom';
import { useEffect, useRef, useState } from "react";
import Playbar from "./../components/video/Playbar";
import PlaybackSlider from "./../components/video/PlaybackSlider";
import ClipRangeSlider from "./../components/video/ClipRangeSlider";
import ConfigBox from "../components/video/ConfigBox.tsx";
import ExportWidget from "../components/video/ExportWidget.tsx";
-import {editFile, getMetadata, processFile, getProgress} from "../utils/endpoints"
+import { compress, getJob } from "../utils/endpoints"
import type { VideoMetadata } from "../utils/types.ts";
import Box from "../components/Box.tsx";
import MetadataBox from "../components/video/MetadataBox.tsx";
+const API_URL = import.meta.env.VITE_API_URL;
+
const ClipEdit = () => {
- const { id } = useParams();
+ const location = useLocation();
+ const localFile: File = location.state?.file;
+
const videoRef = useRef
+ (null);
const navigate = useNavigate();
const [error, setError] = useState(null);
- const [progress, setProgress] = useState(0);
- const isVideoFileSupported = (file: File): boolean => {
- const video = document.createElement("video");
-
- if (file.type && video.canPlayType(file.type) !== "") {
- return true;
- }
-
- const extension = file.name.split(".").pop()?.toLowerCase();
- const extensionToMime: Record = {
- mp4: "video/mp4",
- webm: "video/webm",
- ogg: "video/ogg",
- mov: "video/quicktime",
- };
-
- if (extension && extensionToMime[extension]) {
- return video.canPlayType(extensionToMime[extension]) !== "";
- }
-
- return false;
- };
-
- const press = (() => {
+ const press = () => {
if (!file) {
setError("Please choose a file");
return;
}
-
-
- uploadFile(file)
- .then(uuid => {
-
- if (isVideoFileSupported(file)) {
- navigate(`/create/${uuid}`)
- } else {
- convertFile(uuid);
- const interval = setInterval(async() => await pollProgress(uuid, interval), 500);
- }
-
- })
- .catch((e: Error) => setError(`Failed to upload file: ${e.message}`));
-
- });
-
- const pollProgress = async (id: string, intervalId: number) => {
- getProgress(id)
- .then((progress) => {
- setProgress(progress.conversion.progress);
-
- if (progress.conversion.complete) {
- clearInterval(intervalId);
- navigate(`/create/${id}`)
- }
- })
- .catch((err: Error) => {
- setError(`Failed to fetch progress: ${err.message}`);
- clearInterval(intervalId);
- });
- }
+ navigate('/create/new', { state: { file } });
+ };
return (
-
- {
- const selected = e.target.files?.[0] ?? null;
- setFile(selected);
- }}
- className={"h-100 cursor-pointer rounded-lg border border-dashed border-gray-400 bg-white p-4 text-center hover:bg-gray-50 transition"}
- />
+ (null);
+
+ useEffect(() => {
+ if (!id) return;
+ getClipById(id)
+ .then((clip) => {
+ if (clip) {
+ setTitle(clip.title ?? "");
+ setDescription(clip.description ?? "");
+ }
+ })
+ .catch(() => setError("Failed to load clip."))
+ .finally(() => setLoading(false));
+ }, [id]);
+
+ const handleSave = async () => {
+ if (!id) return;
+ setSaving(true);
+ setError(null);
+ try {
+ await patchClip(Number(id), { title, description });
+ setSaved(true);
+ setTimeout(() => setSaved(false), 2000);
+ } catch (err) {
+ setError(err instanceof Error ? err.message : "Failed to save.");
+ } finally {
+ setSaving(false);
+ }
+ };
+
+ return (
+
-
+ ref={videoRef}
+ src={videoUrl}
+ className={"w-full rounded-lg shadow-sm bg-black"}
+ onLoadedMetadata={handleVideoMetadataLoaded}
+ />
-
-
{metadata &&
{
);
-}
+};
-export default ClipEdit;
\ No newline at end of file
+export default ClipEdit;
diff --git a/frontend/src/pages/ClipUpload.tsx b/frontend/src/pages/ClipUpload.tsx
index d227f79..cf4cbb4 100644
--- a/frontend/src/pages/ClipUpload.tsx
+++ b/frontend/src/pages/ClipUpload.tsx
@@ -1,6 +1,5 @@
import {useState} from "react";
import {useNavigate} from "react-router-dom";
-import {uploadFile, convertFile, getProgress} from "../utils/endpoints"
import BlueButton from "../components/buttons/BlueButton.tsx";
import Box from "../components/Box.tsx";
@@ -8,90 +7,35 @@ const ClipUpload = () => {
const [file, setFile] = useState
+
+
- Upload
-
+ {
+ const selected = e.target.files?.[0] ?? null;
+ setFile(selected);
+ setError(null);
+ }}
+ className="h-36 cursor-pointer rounded-lg border-2 border-dashed border-gray-300 bg-gray-50 p-4 text-center text-sm text-gray-500 hover:bg-gray-100 hover:border-primary transition-colors duration-150"
+ />
-
-
-
+ Upload
+
+ {error &&
)
};
diff --git a/frontend/src/pages/EditClip.tsx b/frontend/src/pages/EditClip.tsx
new file mode 100644
index 0000000..58d86b1
--- /dev/null
+++ b/frontend/src/pages/EditClip.tsx
@@ -0,0 +1,108 @@
+import { useEffect, useState } from "react";
+import { useNavigate, useParams } from "react-router-dom";
+import { ArrowLeft, Check } from "lucide-react";
+import { getClipById, patchClip } from "../utils/endpoints.ts";
+import Box from "../components/Box.tsx";
+import BlueButton from "../components/buttons/BlueButton.tsx";
+
+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";
+
+const EditClip = () => {
+ const { id } = useParams();
+ const navigate = useNavigate();
+
+ const [title, setTitle] = useState("");
+ const [description, setDescription] = useState("");
+ const [loading, setLoading] = useState(true);
+ const [saving, setSaving] = useState(false);
+ const [saved, setSaved] = useState(false);
+ const [error, setError] = useStateUpload Clip
-{error}
} + +
+
+
+
+
Edit Clip
+ + {loading ? ( +Loading...
+ ) : (
+
+
+ setTitle(e.target.value)}
+ placeholder="Enter title"
+ className={inputClass}
+ />
+
+
+
+
+