Use 12 hour clock + box around time

src/components/player/atoms/ProgressBar.tsx

@@ -22,7 +22,7 @@ function ThumbnailDisplay(props: { at: number; show: boolean }) {
     offscreenLeft: 0,
     offscreenRight: 0,
   });
-  const ref = useRef<HTMLDivElement>(null);
+  const ref = useRef<HTMLImageElement>(null);
 
   useEffect(() => {
     if (!ref.current) return;
@@ -37,19 +37,23 @@ function ThumbnailDisplay(props: { at: number; show: boolean }) {
     });
   }, [props.at]);
 
+  // Keep time label width consistent and avoid recomputing
+  const formattedTime = useMemo(
+    () => formatSeconds(Math.max(props.at, 0), durationExceedsHour(props.at)),
+    [props.at],
+  );
+  const transformX =
+    offsets.offscreenLeft > 0 ? offsets.offscreenLeft : -offsets.offscreenRight;
+
   if (!props.show) return null;
 
   return (
     <div className="flex flex-col items-center -translate-x-1/2 pointer-events-none">
       <div className="w-screen flex justify-center">
-        <div ref={ref}>
+        <div ref={ref as unknown as React.RefObject<HTMLDivElement>}>
           <div
             style={{
-              transform: `translateX(${
-                offsets.offscreenLeft > 0
-                  ? offsets.offscreenLeft
-                  : -offsets.offscreenRight
-              }px)`,
+              transform: `translateX(${transformX}px)`,
             }}
           >
             {currentThumbnail && (
@@ -58,11 +62,8 @@ function ThumbnailDisplay(props: { at: number; show: boolean }) {
                 className="h-24 border rounded-xl border-gray-800"
               />
             )}
-            <p className="text-center mt-1">
-              {formatSeconds(
-                Math.max(props.at, 0),
-                durationExceedsHour(props.at),
-              )}
+            <p className="mt-1 mx-auto text-center border rounded-xl border-gray-800 px-3 py-1 backdrop-blur-lg bg-black bg-opacity-20 w-max">
+              {formattedTime}
             </p>
           </div>
         </div>

src/components/player/atoms/Time.tsx

@@ -4,6 +4,7 @@ import { VideoPlayerButton } from "@/components/player/internals/Button";
 import { VideoPlayerTimeFormat } from "@/stores/player/slices/interface";
 import { usePlayerStore } from "@/stores/player/store";
 import { durationExceedsHour, formatSeconds } from "@/utils/formatSeconds";
+import { uses12HourClock } from "@/utils/uses12HourClock";
 
 export function Time(props: { short?: boolean }) {
   const timeFormat = usePlayerStore((s) => s.interface.timeFormat);
@@ -63,7 +64,11 @@ export function Time(props: { short?: boolean }) {
           timeLeft,
           duration,
           formatParams: {
-            timeFinished: { hour: "numeric", minute: "numeric" },
+            timeFinished: {
+              hour: "numeric",
+              minute: "numeric",
+              hour12: uses12HourClock(),
+            },
           },
         })}
       </span>

src/utils/uses12HourClock.ts

@@ -0,0 +1,7 @@
+export function uses12HourClock() {
+  const parts = new Intl.DateTimeFormat(undefined, {
+    hour: "numeric",
+  }).formatToParts(new Date());
+  // If a dayPeriod ("AM"/"PM" or localized equivalent) appears, it's 12-hour
+  return parts.some((p) => p.type === "dayPeriod");
+}