1
0
Fork 0
mirror of https://github.com/sussy-code/smov.git synced 2024-12-22 14:57:40 +01:00
smov/src/components/video/controls/TimeControl.tsx

49 lines
1.2 KiB
TypeScript
Raw Normal View History

import { useVideoPlayerState } from "../VideoContext";
function durationExceedsHour(secs: number): boolean {
return secs > 60 * 60;
}
function formatSeconds(secs: number, showHours = false): string {
2023-01-10 19:53:55 +01:00
if (Number.isNaN(secs)) {
if (showHours) return "0:00:00";
return "0:00";
}
let time = secs;
const seconds = time % 60;
time /= 60;
const minutes = time % 60;
time /= 60;
2023-01-17 01:02:29 +01:00
const hours = time;
2023-01-10 19:53:55 +01:00
if (!showHours)
2023-01-17 01:02:29 +01:00
return `${Math.floor(minutes).toString()}:${Math.floor(seconds)
2023-01-10 19:53:55 +01:00
.toString()
.padStart(2, "0")}`;
2023-01-17 01:02:29 +01:00
return `${Math.floor(hours).toString()}:${Math.floor(minutes)
.toString()
2023-01-17 01:02:29 +01:00
.padStart(2, "0")}:${Math.floor(seconds).toString().padStart(2, "0")}`;
}
2023-01-09 21:51:24 +01:00
interface Props {
className?: string;
}
export function TimeControl(props: Props) {
const { videoState } = useVideoPlayerState();
const hasHours = durationExceedsHour(videoState.duration);
const time = formatSeconds(videoState.time, hasHours);
const duration = formatSeconds(videoState.duration, hasHours);
return (
2023-01-09 21:51:24 +01:00
<div className={props.className}>
<p className="select-none text-white">
{time} / {duration}
</p>
</div>
);
}