timestamp near thumbnail

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 <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>) {

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";
+import { durationExceedsHour, formatSeconds } from "@/utils/formatSeconds";
-
-function durationExceedsHour(secs: number): boolean {
-  return secs > 60 * 60;
-}
 
 export function Time(props: { short?: boolean }) {
   const timeFormat = usePlayerStore((s) => s.interface.timeFormat);

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