refactor(frontend): remove dead code

frontend/src/components/Box.tsx

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

frontend/src/components/Dropdown.tsx

@@ -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) => {
+const DropdownItem = ({ item, onClick, className }: DropdownItemProps) => (
-    return (
+    <li
-        <li className={clsx("cursor-pointer hover:bg-gray-50 px-3 py-2 text-sm text-gray-700", className)}
+        className={clsx("cursor-pointer hover:bg-gray-50 px-3 py-2 text-sm text-gray-700", className)}
-            onClick={() => onClick(item)}
+        onClick={() => onClick(item)}
-        >
+    >
-            {item}
+        {item}
-        </li>
+    </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 }) {
+        const handleClickOutside = (e: MouseEvent) => {
-            if (ref.current && !ref.current.contains(event.target)) {
+            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")}
+        <div className={clsx(className, "relative inline-block text-left")} ref={ref}>
-            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 };

frontend/src/components/Selector.tsx

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

frontend/src/components/Sidebar.tsx

@@ -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>
                     </>
                 )}

frontend/src/components/buttons/SidebarButton.tsx

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

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

frontend/src/components/video/ConfigBox.tsx

@@ -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 = {
+type Props = {
-    setMetadata: Function;
+    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(",");
+        const [width, height] = e.target.value.split(",").map(Number);
-        setMetadata((prevState: VideoMetadata) => ({
+        setMetadata(prev => ({ ...prev, width, height }));
-            ...prevState,
+    };
-            width: parseInt(vals[0]),
-            height: parseInt(vals[1])
-        }))
-    }
 
     const updateFps = (e: React.ChangeEvent<HTMLSelectElement>) => {
-        setMetadata((prevState: VideoMetadata) => ({
+        setMetadata(prev => ({ ...prev, fps: parseInt(e.target.value) }));
-            ...prevState,
+    };
-            fps: parseInt(e.target.value)
-        }))
-    }
 
     const updateFileSize = (e: React.ChangeEvent<HTMLInputElement>) => {
-        setMetadata((prevState: VideoMetadata) => ({
+        setMetadata(prev => ({ ...prev, fileSize: parseInt(e.target.value) * 1000 }));
-            ...prevState,
+    };
-            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>
-    )
+    );
 }

frontend/src/components/video/MetadataBox.tsx

@@ -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 = {
+type Props = {
-    setMetadata: Function
+    setMetadata: Dispatch<SetStateAction<VideoMetadata>>;
     className?: string;
-}
+};
 
-const MetadataBox = ({setMetadata, className}: MetadataBoxProps) => {
+const MetadataBox = ({ setMetadata, className }: Props) => (
-    return (
+    <div className={clsx("flex flex-col content-between p-6 gap-2", className)}>
-        <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>
-            <p className="w-full font-semibold text-gray-800 text-sm">Title</p>
+        <input
-            <input
+            type="text"
-                type="text"
+            placeholder="Enter title"
-                placeholder="Enter title"
+            onChange={(e) => setMetadata(prev => ({ ...prev, title: e.target.value }))}
-                onChange={(e) => setMetadata((prevState: VideoMetadata) => ({
+            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"
-                    ...prevState,
+        />
-                    title: e.target.value
+    </div>
-                }))}
+);
-                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;

frontend/src/components/video/PlaybackSlider.tsx

@@ -1,52 +1,37 @@
-import {useEffect} from "react";
+import { useEffect, type Dispatch, type SetStateAction } from "react";
-import clsx from 'clsx';
 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,
+export default function PlaybackSlider({ videoRef, videoMetadata, sliderValue, setSliderValue, className }: Props) {
-                                           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}
         />
-    )
+    );
-}
+}

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<HTMLInputElement>) => {
         if (!video) return;
+        const newVolume = parseInt(e.target.value);
+        video.volume = newVolume / 100;
+        setVolume(newVolume);
+    };
 
-        let volume = parseInt(e.target.value)
+    // Sync isPlaying when the video is controlled outside this component (e.g. keyboard shortcuts)
-
-        video.volume = volume / 100;
-        setVolume(volume);
-    }
-
-    // Sync state with video element changes (e.g., if someone presses spacebar or clicks on the video)
     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>
-
+            <span>
-            <label>
                 {formatTime(video?.currentTime ?? 0)} / {formatTime(videoMetadata.duration ?? 0)}
-            </label>
+            </span>
-
         </div>
     );
-}
+}

frontend/src/components/video/VideoCard.tsx

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

frontend/src/pages/Home.tsx

@@ -3,8 +3,8 @@ import { Upload, Scissors, SlidersHorizontal, Radio, LayoutGrid, Play } from "lu
 const features = [
     {
         icon: Upload,
-        title: "Upload & convert",
+        title: "Upload & compress",
-        description: "Drop in a video file. Non-native formats are converted automatically before editing.",
+        description: "Drop in a video file, set your clip range and export settings, then compress.",
     },
     {
         icon: Scissors,
@@ -71,7 +71,7 @@ const Home = () => {
 
             {/* Format note */}
             <p className="text-xs text-gray-400">
-                Supports MP4, MOV, WebM, and OGG. Non-native formats are converted on upload.
+                Supports MP4, MOV, WebM, and OGG.
             </p>
         </div>
     );

frontend/src/utils/endpoints.ts

@@ -1,4 +1,4 @@
-import type {VideoMetadata, APIResponse, User, Clip, JobResponse } from "./types.ts";
+import type { VideoMetadata, APIResponse, User, Clip, JobResponse } from "./types.ts";
 
 const API_URL = import.meta.env.VITE_API_URL;
 
@@ -6,57 +6,34 @@ export class AuthError extends Error {
     constructor() { super("Not authenticated"); this.name = "AuthError"; }
 }
 
-/**
+const login = async (googleToken: string): Promise<string> => {
- * Login function
- * @param GoogleToken - The Google token received from the frontend.
- * @return A promise that resolves to a JWT
- */
-const login = async (GoogleToken: string): Promise<string> => {
     const response = await fetch(API_URL + '/api/v1/users/login', {
         method: 'POST',
-        headers: {
+        headers: { 'Content-Type': 'application/json' },
-            'Content-Type': 'application/json',
+        body: JSON.stringify({ token: googleToken }),
-        },
+        credentials: 'include',
-        body: JSON.stringify({ token: GoogleToken }),
-        credentials: 'include'
     });
 
-    if (!response.ok) {
+    if (!response.ok) throw new Error(`Login failed: ${response.status}`);
-        throw new Error(`Login failed: ${response.status}`);
-    }
 
     const result: APIResponse = await response.json();
-
+    if (result.status === 'error') throw new Error(`Login failed: ${result.message}`);
-    if (result.status === "error") {
-        throw new Error(`Login failed: ${result.message}`);
-    }
 
     return result.data.token;
-}
+};
 
-const logout = async () => {
+const logout = async (): Promise<void> => {
     const response = await fetch(API_URL + '/api/v1/users/logout', {
         method: 'POST',
-        credentials: 'include'
+        credentials: 'include',
     });
 
-    if (!response.ok) {
+    if (!response.ok) throw new Error(`Logout failed: ${response.status}`);
-        throw new Error(`Logout failed: ${response.status}`);
-    }
 
     const result: APIResponse = await response.json();
+    if (result.status === 'error') throw new Error(`Logout failed: ${result.message}`);
+};
 
-    if (result.status === "error") {
-        throw new Error(`Logout failed: ${result.message}`);
-    }
-}
-
-/**
- * Uploads a file and starts compression in one step.
- * @param file - The file to compress.
- * @param options - The clip/compression options.
- * @returns The job UUID to poll for progress.
- */
 const compress = async (file: File, options: VideoMetadata): Promise<string> => {
     const formData = new FormData();
     formData.append('file', file);
@@ -75,114 +52,69 @@ const compress = async (file: File, options: VideoMetadata): Promise<string> =>
         credentials: 'include',
     });
 
-    if (!response.ok) {
+    if (!response.ok) throw new Error(`Compression failed: ${response.status}`);
-        throw new Error(`Compression failed: ${response.status}`);
-    }
 
     const result: APIResponse = await response.json();
-
+    if (result.status === 'error') throw new Error(`Compression failed: ${result.message}`);
-    if (result.status === 'error') {
-        throw new Error(`Compression failed: ${result.message}`);
-    }
 
     return result.data.uuid;
 };
 
-/**
- * Fetches the status of a background job.
- * @param uuid - The job UUID.
- */
 const getJob = async (uuid: string): Promise<JobResponse> => {
     const response = await fetch(API_URL + `/api/v1/jobs/${uuid}`, { credentials: 'include' });
 
-    if (!response.ok) {
+    if (!response.ok) throw new Error(`Failed to fetch job: ${response.status}`);
-        throw new Error(`Failed to fetch job: ${response.status}`);
-    }
 
     const result: APIResponse = await response.json();
-
+    if (result.status === 'error') throw new Error(`Failed to fetch job: ${result.message}`);
-    if (result.status === 'error') {
-        throw new Error(`Failed to fetch job: ${result.message}`);
-    }
 
     return result.data;
 };
 
-/**
+const getUser = async (): Promise<User | null> => {
- * Fetches the current user information. Returns null if not authenticated.
+    const response = await fetch(API_URL + '/api/v1/users/me', { credentials: 'include' });
- */
+    if (!response.ok) return null;
-const getUser = async (): Promise<null | User > => {
-    const response = await fetch(API_URL + '/api/v1/users/me', {credentials: "include"});
 
-    if (!response.ok) {
+    const result: APIResponse = await response.json();
-        return null;
+    if (result.status === 'error') return null;
-    }
-
-    const result = await response.json();
-
-    if (result.status === "error") {
-        return null;
-    }
-
-    console.log(result.data);
 
     return result.data;
-}
+};
 
-/**
- * Fetches all clips for the current user.
- */
 const getClips = async (): Promise<Clip[]> => {
-    const response = await fetch(API_URL + '/api/v1/clips', { credentials: 'include'});
+    const response = await fetch(API_URL + '/api/v1/clips', { credentials: 'include' });
 
     if (!response.ok) {
         const errorResult: APIResponse = await response.json();
         throw new Error(`Failed to fetch clips: ${errorResult.message}`);
     }
 
-    try {
+    const result: APIResponse = await response.json();
-        const result: APIResponse = await response.json();
+    return result.data;
-        return result.data;
+};
-    } catch {
-        throw new Error('Failed to parse response');
-    }
-}
 
-/**
- * Fetches a clip by its ID.
- * @param id
- */
 const getClipById = async (id: string): Promise<Clip | null> => {
-    const response = await fetch(API_URL + `/api/v1/clips/${id}`, {credentials: "include",});
+    const response = await fetch(API_URL + `/api/v1/clips/${id}`, { credentials: 'include' });
 
     if (!response.ok) {
         if (response.status === 401 || response.status === 403) throw new AuthError();
         throw new Error(`Failed to fetch clip: ${response.status}`);
     }
 
-    try{
+    const result: APIResponse = await response.json();
-        const result: APIResponse = await response.json();
+    return result.data;
-        return result.data;
-    } catch (error: unknown) {
-        throw new Error(`Failed to parse clip response: 
-        ${error instanceof Error ? error.message : 'Unknown error'}`);
-    }
 };
 
-const getVideoBlob = async(id: string): Promise<Blob> => {
+const getVideoBlob = async (id: string): Promise<Blob> => {
-    const response = await fetch(API_URL + `/api/v1/clips/${id}/media`, {credentials: "include",});
+    const response = await fetch(API_URL + `/api/v1/clips/${id}/media`, { credentials: 'include' });
 
     if (!response.ok) {
         if (response.status === 401 || response.status === 403) throw new AuthError();
-        throw new Error(`Failed to fetch video: ${id}: ${response.status}`)
+        throw new Error(`Failed to fetch video ${id}: ${response.status}`);
     }
 
-    try {
+    return response.blob();
-        return response.blob();
+};
-    } catch {
-        throw new Error(`Failed to convert Clip Return Object to blob`);
-    }
-}
 
 const patchClip = async (id: number, data: { title?: string; description?: string }): Promise<Clip> => {
     const response = await fetch(API_URL + `/api/v1/clips/${id}`, {
@@ -192,14 +124,10 @@ const patchClip = async (id: number, data: { title?: string; description?: strin
         body: JSON.stringify(data),
     });
 
-    if (!response.ok) {
+    if (!response.ok) throw new Error(`Failed to update clip: ${response.status}`);
-        throw new Error(`Failed to update clip: ${response.status}`);
-    }
 
     const result: APIResponse = await response.json();
-    if (result.status === 'error') {
+    if (result.status === 'error') throw new Error(`Failed to update clip: ${result.message}`);
-        throw new Error(`Failed to update clip: ${result.message}`);
-    }
 
     return result.data;
 };
@@ -210,14 +138,10 @@ const deleteClip = async (id: number): Promise<void> => {
         credentials: 'include',
     });
 
-    if (!response.ok) {
+    if (!response.ok) throw new Error(`Failed to delete clip: ${response.status}`);
-        throw new Error(`Failed to delete clip: ${response.status}`);
-    }
 
     const result: APIResponse = await response.json();
-    if (result.status === 'error') {
+    if (result.status === 'error') throw new Error(`Failed to delete clip: ${result.message}`);
-        throw new Error(`Failed to delete clip: ${result.message}`);
-    }
 };
 
 const getStreamStatus = async (): Promise<boolean> => {
@@ -228,14 +152,13 @@ const getStreamStatus = async (): Promise<boolean> => {
 };
 
 const isThumbnailAvailable = async (id: number): Promise<boolean> => {
-    const response = await fetch(API_URL + `/api/v1/clips/${id}/thumbnail`, {credentials: "include"});
+    const response = await fetch(API_URL + `/api/v1/clips/${id}/thumbnail`, { credentials: 'include' });
     return response.ok;
-}
+};
 
 export {
     login,
     logout,
-    getStreamStatus,
     compress,
     getJob,
     getUser,
@@ -244,5 +167,6 @@ export {
     getVideoBlob,
     patchClip,
     deleteClip,
-    isThumbnailAvailable
+    getStreamStatus,
-};
+    isThumbnailAvailable,
+};

frontend/src/utils/utils.ts

@@ -2,76 +2,34 @@ function formatTime(seconds: number): string {
     const h = Math.floor(seconds / 3600);
     const m = Math.floor((seconds % 3600) / 60);
     const s = Math.floor(seconds % 60);
-
+    const pad = (n: number) => n.toString().padStart(2, '0');
-    const padded = (n: number) => n.toString().padStart(2, '0');
+    if (h > 0) return `${h}:${pad(m)}:${pad(s)}`;
-
+    return `${m}:${pad(s)}`;
-    if (h > 0) {
-        return `${h}:${padded(m)}:${padded(s)}`;
-    } else {
-        return `${m}:${padded(s)}`;
-    }
 }
 
 function stringToDate(dateString: string): Date {
-    const validIso = dateString.substring(0, 23);
+    const date = new Date(dateString.substring(0, 23));
-    const date = new Date(validIso);
+    if (isNaN(date.getTime())) throw new Error("Invalid date string");
-    if (isNaN(date.getTime())) {
-        throw new Error("Invalid date string");
-    }
     return date;
 }
 
 function dateToTimeAgo(date: Date): string {
-    const now = new Date();
+    const secondsAgo = Math.floor((Date.now() - date.getTime()) / 1000);
-    const secondsAgo = Math.floor((now.getTime() - date.getTime()) / 1000);
+    const units: [number, string][] = [
-
+        [31536000, 'year'],
-    if (secondsAgo < 60) {
+        [2592000, 'month'],
-        return `${secondsAgo} seconds ago`;
+        [86400, 'day'],
-    } else if (secondsAgo < 3600) {
+        [3600, 'hour'],
-        const minutes = Math.floor(secondsAgo / 60);
+        [60, 'minute'],
-
+    ];
-        if (minutes === 1) {
+    for (const [threshold, unit] of units) {
-            return "1 minute ago";
+        if (secondsAgo >= threshold) {
+            const count = Math.floor(secondsAgo / threshold);
+            return `${count} ${unit}${count !== 1 ? 's' : ''} ago`;
         }
-
-        return `${minutes} minutes ago`;
-    } else if (secondsAgo < 86400) {
-        const hours = Math.floor(secondsAgo / 3600);
-
-        if (hours === 1) {
-            return "1 hour ago";
-        }
-
-        return `${hours} hours ago`;
-    } else if (secondsAgo < 2592000) {
-        const days = Math.floor(secondsAgo / 86400);
-
-        if (days === 1) {
-            return "1 day ago";
-        }
-
-        return `${days} days ago`;
-    } else if (secondsAgo < 31536000) {
-        const months = Math.floor(secondsAgo / 2592000);
-
-        if (months === 1) {
-            return "1 month ago";
-        }
-
-        return `${months} months ago`;
-    } else {
-        const years = Math.floor(secondsAgo / 31536000);
-
-        if (years === 1) {
-            return "1 year ago";
-        }
-
-        return `${years} years ago`;
     }
+    const s = Math.max(0, secondsAgo);
+    return `${s} second${s !== 1 ? 's' : ''} ago`;
 }
 
-export {
+export { formatTime, stringToDate, dateToTimeAgo };
-    formatTime,
-    stringToDate,
-    dateToTimeAgo
-}