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)

6
frontend/src/pages/Home.tsx
View File

@@ -3,8 +3,8 @@ import { Upload, Scissors, SlidersHorizontal, Radio, LayoutGrid, Play } from "lu
const features = [
{
icon: Upload,
title: "Upload & convert",
description: "Drop in a video file. Non-native formats are converted automatically before editing.",
title: "Upload & compress",
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>
);

164
frontend/src/utils/endpoints.ts
View File

@@ -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"; }
}
/**
* 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 login = async (googleToken: string): Promise<string> => {
const response = await fetch(API_URL + '/api/v1/users/login', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({ token: GoogleToken }),
credentials: 'include'
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ token: googleToken }),
credentials: 'include',
});
if (!response.ok) {
throw new Error(`Login failed: ${response.status}`);
}
if (!response.ok) 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) {
throw new Error(`Logout failed: ${response.status}`);
}
if (!response.ok) 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) {
throw new Error(`Compression failed: ${response.status}`);
}
if (!response.ok) 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) {
throw new Error(`Failed to fetch job: ${response.status}`);
}
if (!response.ok) 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;
};
/**
* Fetches the current user information. Returns null if not authenticated.
*/
const getUser = async (): Promise<null | User > => {
const response = await fetch(API_URL + '/api/v1/users/me', {credentials: "include"});
const getUser = async (): Promise<User | null> => {
const response = await fetch(API_URL + '/api/v1/users/me', { credentials: 'include' });
if (!response.ok) return null;
if (!response.ok) {
return null;
}
const result = await response.json();
if (result.status === "error") {
return null;
}
console.log(result.data);
const result: APIResponse = await response.json();
if (result.status === 'error') return null;
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();
return result.data;
} catch {
throw new Error('Failed to parse response');
}
}
const result: APIResponse = await response.json();
return result.data;
};
/**
* 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();
return result.data;
} catch (error: unknown) {
throw new Error(`Failed to parse clip response:
${error instanceof Error ? error.message : 'Unknown error'}`);
}
const result: APIResponse = await response.json();
return result.data;
};
const getVideoBlob = async(id: string): Promise<Blob> => {
const response = await fetch(API_URL + `/api/v1/clips/${id}/media`, {credentials: "include",});
const getVideoBlob = async (id: string): Promise<Blob> => {
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();
} catch {
throw new Error(`Failed to convert Clip Return Object to blob`);
}
}
return response.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) {
throw new Error(`Failed to update clip: ${response.status}`);
}
if (!response.ok) throw new Error(`Failed to update clip: ${response.status}`);
const result: APIResponse = await response.json();
if (result.status === 'error') {
throw new Error(`Failed to update clip: ${result.message}`);
}
if (result.status === 'error') 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) {
throw new Error(`Failed to delete clip: ${response.status}`);
}
if (!response.ok) throw new Error(`Failed to delete clip: ${response.status}`);
const result: APIResponse = await response.json();
if (result.status === 'error') {
throw new Error(`Failed to delete clip: ${result.message}`);
}
if (result.status === 'error') 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,
};

82
frontend/src/utils/utils.ts
View File

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