From 618c034b0511e1f60a70e84e6233d2d08749d758 Mon Sep 17 00:00:00 2001
From: Daniil Tsivinsky <daniil@tsivinsky.com>
Date: Thu, 12 Mar 2026 14:10:39 +0300
Subject: [PATCH] allow to see time left for playing episode

---
 web/src/player/player.tsx | 12 ++++++++----
 1 file changed, 8 insertions(+), 4 deletions(-)

diff --git a/web/src/player/player.tsx b/web/src/player/player.tsx
index 68a1843..2b27b3f 100644
--- a/web/src/player/player.tsx
+++ b/web/src/player/player.tsx
@@ -12,6 +12,7 @@ export const Player = () => {
 
   const [currentTime, setCurrentTime] = useState(0);
   const [duration, setDuration] = useState(0);
+  const [showTimeLeft, setShowTimeLeft] = useState(false);
 
   useEffect(() => {
     if (!episode) return;
@@ -62,6 +63,7 @@ export const Player = () => {
   }, []);
 
   const progress = currentTime / duration;
+  const timeLeft = duration - currentTime;
 
   if (status === "stopped") {
     return null;
@@ -117,11 +119,13 @@ export const Player = () => {
                 className="bg-red-500 h-full"
               ></div>
             </div>
-            <p
-              className={`${Math.floor(duration / 3600) > 0 ? "min-w-[70px]" : "min-w-[50px]"} text-right`}
+            <button
+              className="min-w-[70px] text-right cursor-pointer"
+              onClick={() => setShowTimeLeft((prev) => !prev)}
             >
-              {formatTime(currentTime)}
-            </p>
+              {showTimeLeft ? "-" : ""}
+              {formatTime(showTimeLeft ? timeLeft : currentTime)}
+            </button>
           </div>
 
           <h3 className="text-base font-semibold mt-2">{episode?.title}</h3>