From 7f6cc0ef158b24a0e42857d4cedf06387840b61c Mon Sep 17 00:00:00 2001
From: Arpit Batra <arpitbatra123@gmail.com>
Date: Tue, 12 Mar 2024 23:33:48 +0530
Subject: [PATCH] Update SeekBar component to display remaining time when
 duration mode is changed

---
 src/routes/Player/ControlBar/SeekBar/SeekBar.js    | 5 ++++-
 src/routes/Player/ControlBar/SeekBar/formatTime.js | 4 ++--
 src/routes/Player/ControlBar/SeekBar/styles.less   | 2 +-
 3 files changed, 7 insertions(+), 4 deletions(-)

diff --git a/src/routes/Player/ControlBar/SeekBar/SeekBar.js b/src/routes/Player/ControlBar/SeekBar/SeekBar.js
index 27f0a4ff8..930f020ed 100644
--- a/src/routes/Player/ControlBar/SeekBar/SeekBar.js
+++ b/src/routes/Player/ControlBar/SeekBar/SeekBar.js
@@ -13,6 +13,7 @@ const SeekBar = ({ className, time, duration, buffered, onSeekRequested }) => {
     const disabled = time === null || isNaN(time) || duration === null || isNaN(duration);
     const routeFocused = useRouteFocused();
     const [seekTime, setSeekTime] = React.useState(null);
+    const [durationMode, setDurationMode] = React.useState('totalTime');
     const resetTimeDebounced = React.useCallback(debounce(() => {
         setSeekTime(null);
     }, 1500), []);
@@ -56,7 +57,9 @@ const SeekBar = ({ className, time, duration, buffered, onSeekRequested }) => {
                 onSlide={onSlide}
                 onComplete={onComplete}
             />
-            <div className={styles['label']}>{formatTime(duration)}</div>
+            <div className={styles['label']} onClick={() => {
+                durationMode === 'totalTime' ? setDurationMode('remainingTime') : setDurationMode('totalTime');
+            }}>{durationMode === 'totalTime' ? formatTime(duration) : formatTime(duration - time, '-')}</div>
         </div>
     );
 };
diff --git a/src/routes/Player/ControlBar/SeekBar/formatTime.js b/src/routes/Player/ControlBar/SeekBar/formatTime.js
index 2bd684485..4dbe645ad 100644
--- a/src/routes/Player/ControlBar/SeekBar/formatTime.js
+++ b/src/routes/Player/ControlBar/SeekBar/formatTime.js
@@ -4,7 +4,7 @@ const formatUnit = (value) => {
     return ('0' + value).slice(-1 * Math.max(value.toString().length, 2));
 };
 
-const formatTime = (time) => {
+const formatTime = (time, prefix = '') => {
     if (time === null || isNaN(time)) {
         return '--:--:--';
     }
@@ -12,7 +12,7 @@ const formatTime = (time) => {
     const hours = Math.floor(time / (1000 * 60 * 60));
     const minutes = Math.floor((time / (1000 * 60)) % 60);
     const seconds = Math.floor((time / 1000) % 60);
-    return `${formatUnit(hours)}:${formatUnit(minutes)}:${formatUnit(seconds)}`;
+    return `${formatUnit(hours)}:${formatUnit(minutes)}:${formatUnit(seconds)}${prefix}`;
 };
 
 module.exports = formatTime;
diff --git a/src/routes/Player/ControlBar/SeekBar/styles.less b/src/routes/Player/ControlBar/SeekBar/styles.less
index 6a659a790..98446fbfb 100644
--- a/src/routes/Player/ControlBar/SeekBar/styles.less
+++ b/src/routes/Player/ControlBar/SeekBar/styles.less
@@ -14,7 +14,7 @@
 
     .label {
         flex: none;
-        width: 5rem;
+        width: 6rem;
         white-space: nowrap;
         text-overflow: ellipsis;
         direction: rtl;