From a6f28514acb2a973abdb89d351c8e764d7ad35e5 Mon Sep 17 00:00:00 2001
From: exerinity <me@exerinity.com>
Date: Thu, 4 Jun 2026 14:58:40 +1000
Subject: [PATCH] feat: toggle duration display between total and time
 remaining

---
 src/components/PlayerBar.tsx | 12 ++++++++++--
 1 file changed, 10 insertions(+), 2 deletions(-)

diff --git a/src/components/PlayerBar.tsx b/src/components/PlayerBar.tsx
index b761b74..f12b9f0 100644
--- a/src/components/PlayerBar.tsx
+++ b/src/components/PlayerBar.tsx
@@ -267,6 +267,7 @@ const ProgressScrubber = memo(function ProgressScrubber() {
     setIsHoveringProgress,
     handleProgressMouseDown,
   } = useProgressScrub();
+  const [showTimeLeft, setShowTimeLeft] = useState(false);
 
   return (
     <div className="w-full flex items-center gap-2 text-th-text-muted">
@@ -308,8 +309,15 @@ const ProgressScrubber = memo(function ProgressScrubber() {
           }}
         />
       </div>
-      <span className="min-w-[40px] text-[11px] tabular-nums select-none">
-        {currentTrack ? formatTime(duration) : "0:00"}
+      <span
+        className="min-w-[40px] text-[11px] tabular-nums select-none cursor-pointer"
+        onClick={() => currentTrack && setShowTimeLeft((v) => !v)}
+      >
+        {currentTrack
+          ? showTimeLeft
+            ? `-${formatTime(Math.max(0, duration - displayTime))}`
+            : formatTime(duration)
+          : "0:00"}
       </span>
     </div>
   );