allow to see time left for playing episode

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
+            <button
-              className={`${Math.floor(duration / 3600) > 0 ? "min-w-[70px]" : "min-w-[50px]"} text-right`}
+              className="min-w-[70px] text-right cursor-pointer"
+              onClick={() => setShowTimeLeft((prev) => !prev)}
             >
-              {formatTime(currentTime)}
+              {showTimeLeft ? "-" : ""}
-            </p>
+              {formatTime(showTimeLeft ? timeLeft : currentTime)}
+            </button>
           </div>
 
           <h3 className="text-base font-semibold mt-2">{episode?.title}</h3>