mirrors/smov
mirrors/smov
1
0
Fork 0
mirror of https://github.com/sussy-code/smov.git synced 2024-12-20 14:37:43 +01:00
Code Issues Wiki Activity

timestamp near thumbnail

Browse source
This commit is contained in:
mrjvs 2023-10-21 05:18:02 +02:00
parent 23e711ccfd
commit c53dd741d3
3 changed files with 17 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

13
src/components/player/atoms/ProgressBar.tsx
View file

@ -11,6 +11,7 @@ import {
import { useProgressBar } from "@/hooks/useProgressBar";
import { nearestImageAt } from "@/stores/player/slices/thumbnails";
import { usePlayerStore } from "@/stores/player/store";
import { durationExceedsHour, formatSeconds } from "@/utils/formatSeconds";
function ThumbnailDisplay(props: { at: number }) {
const thumbnailImages = usePlayerStore((s) => s.thumbnails.images);
@ -19,7 +20,17 @@ function ThumbnailDisplay(props: { at: number }) {
}, [thumbnailImages, props.at]);
if (!currentThumbnail) return null;
return <img src={currentThumbnail.data} className="h-12 -translate-x-1/2" />;
return (
<div className="flex flex-col items-center -translate-x-1/2">
<img
src={currentThumbnail.data}
className="h-24 border rounded-xl border-gray-800"
/>
<p className="text-center">
{formatSeconds(props.at, durationExceedsHour(props.at))}
</p>
</div>
);
}
function useMouseHoverPosition(barRef: RefObject<HTMLDivElement>) {

6
src/components/player/atoms/Time.tsx
View file

@ -3,11 +3,7 @@ import { useTranslation } from "react-i18next";
import { VideoPlayerButton } from "@/components/player/internals/Button";
import { VideoPlayerTimeFormat } from "@/stores/player/slices/interface";
import { usePlayerStore } from "@/stores/player/store";
import { formatSeconds } from "@/utils/formatSeconds";
function durationExceedsHour(secs: number): boolean {
return secs > 60 * 60;
}
import { durationExceedsHour, formatSeconds } from "@/utils/formatSeconds";
export function Time(props: { short?: boolean }) {
const timeFormat = usePlayerStore((s) => s.interface.timeFormat);

4
src/utils/formatSeconds.ts
View file

@ -19,3 +19,7 @@ export function formatSeconds(secs: number, showHours = false): string {
if (!showHours) return [paddedMins, paddedSecs].join(":");
return [hours, paddedMins, paddedSecs].join(":");
}
export function durationExceedsHour(secs: number): boolean {
return secs > 60 * 60;
}