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;
+}