diff --git a/src/components/player/atoms/ProgressBar.tsx b/src/components/player/atoms/ProgressBar.tsx index 8b23f4fb..e5810d0a 100644 --- a/src/components/player/atoms/ProgressBar.tsx +++ b/src/components/player/atoms/ProgressBar.tsx @@ -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 ; + return ( +
+ +

+ {formatSeconds(props.at, durationExceedsHour(props.at))} +

+
+ ); } function useMouseHoverPosition(barRef: RefObject) { diff --git a/src/components/player/atoms/Time.tsx b/src/components/player/atoms/Time.tsx index 5d4fc935..eb984b4b 100644 --- a/src/components/player/atoms/Time.tsx +++ b/src/components/player/atoms/Time.tsx @@ -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); diff --git a/src/utils/formatSeconds.ts b/src/utils/formatSeconds.ts index 8bec7401..6354bdba 100644 --- a/src/utils/formatSeconds.ts +++ b/src/utils/formatSeconds.ts @@ -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; +}