From ac5d4443b163527f2cebfac8dc16241cb605c121 Mon Sep 17 00:00:00 2001
From: zisra <100528712+zisra@users.noreply.github.com>
Date: Sun, 2 Nov 2025 07:21:10 +0800
Subject: [PATCH] Use 12 hour clock + add box around time (#58)

* Use 12 hour clock + box around time

* Fix ref
---
 src/components/player/atoms/ProgressBar.tsx | 21 +++++++++++----------
 src/components/player/atoms/Time.tsx        |  7 ++++++-
 src/utils/uses12HourClock.ts                |  7 +++++++
 3 files changed, 24 insertions(+), 11 deletions(-)
 create mode 100644 src/utils/uses12HourClock.ts

diff --git a/src/components/player/atoms/ProgressBar.tsx b/src/components/player/atoms/ProgressBar.tsx
index 685ef603..90b91dcc 100644
--- a/src/components/player/atoms/ProgressBar.tsx
+++ b/src/components/player/atoms/ProgressBar.tsx
@@ -37,6 +37,14 @@ 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 (
@@ -45,11 +53,7 @@ function ThumbnailDisplay(props: { at: number; show: boolean }) {
         <div ref={ref}>
           <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>
diff --git a/src/components/player/atoms/Time.tsx b/src/components/player/atoms/Time.tsx
index cc48031c..5561c4a4 100644
--- a/src/components/player/atoms/Time.tsx
+++ b/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>
diff --git a/src/utils/uses12HourClock.ts b/src/utils/uses12HourClock.ts
new file mode 100644
index 00000000..dc18e848
--- /dev/null
+++ b/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");
+}