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 1/4] 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;

From dbd98750e71075a62fa5f14dcf086c0d30abb42b Mon Sep 17 00:00:00 2001
From: Arpit Batra <arpitbatra123@gmail.com>
Date: Wed, 13 Mar 2024 11:05:38 +0530
Subject: [PATCH 2/4] Add Button component to SeekBar.js

---
 .../Player/ControlBar/SeekBar/SeekBar.js      | 26 +++++++++++++++----
 1 file changed, 21 insertions(+), 5 deletions(-)

diff --git a/src/routes/Player/ControlBar/SeekBar/SeekBar.js b/src/routes/Player/ControlBar/SeekBar/SeekBar.js
index 930f020ed..f55e42743 100644
--- a/src/routes/Player/ControlBar/SeekBar/SeekBar.js
+++ b/src/routes/Player/ControlBar/SeekBar/SeekBar.js
@@ -5,7 +5,7 @@ const PropTypes = require('prop-types');
 const classnames = require('classnames');
 const debounce = require('lodash.debounce');
 const { useRouteFocused } = require('stremio-router');
-const { Slider } = require('stremio/common');
+const { Slider, Button } = require('stremio/common');
 const formatTime = require('./formatTime');
 const styles = require('./styles');
 
@@ -13,7 +13,13 @@ 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 DURATION_MODE_OPTIONS = {
+        'totalTime': 'totalTime',
+        'remainingTime': 'remainingTime'
+    };
+
+    const [durationMode, setDurationMode] = React.useState(DURATION_MODE_OPTIONS.totalTime);
     const resetTimeDebounced = React.useCallback(debounce(() => {
         setSeekTime(null);
     }, 1500), []);
@@ -57,9 +63,19 @@ const SeekBar = ({ className, time, duration, buffered, onSeekRequested }) => {
                 onSlide={onSlide}
                 onComplete={onComplete}
             />
-            <div className={styles['label']} onClick={() => {
-                durationMode === 'totalTime' ? setDurationMode('remainingTime') : setDurationMode('totalTime');
-            }}>{durationMode === 'totalTime' ? formatTime(duration) : formatTime(duration - time, '-')}</div>
+            <Button
+                onClick={() => {
+                    durationMode === DURATION_MODE_OPTIONS.totalTime
+                        ? setDurationMode(DURATION_MODE_OPTIONS.remainingTime)
+                        : setDurationMode(DURATION_MODE_OPTIONS.totalTime);
+                }}
+            >
+                <div className={styles['label']}>
+                    {durationMode === DURATION_MODE_OPTIONS.totalTime
+                        ? formatTime(duration)
+                        : formatTime(duration - time, '-')}
+                </div>
+            </Button>
         </div>
     );
 };

From d3e0ff2437d6e295fbb89599c1415417180d0b02 Mon Sep 17 00:00:00 2001
From: Arpit Batra <arpitbatra123@gmail.com>
Date: Mon, 18 Mar 2024 12:18:59 +0530
Subject: [PATCH 3/4] Update SeekBar component to toggle between total time and
 remaining time

---
 .../Player/ControlBar/SeekBar/SeekBar.js      | 23 +++++--------------
 1 file changed, 6 insertions(+), 17 deletions(-)

diff --git a/src/routes/Player/ControlBar/SeekBar/SeekBar.js b/src/routes/Player/ControlBar/SeekBar/SeekBar.js
index f55e42743..322fa04fc 100644
--- a/src/routes/Player/ControlBar/SeekBar/SeekBar.js
+++ b/src/routes/Player/ControlBar/SeekBar/SeekBar.js
@@ -5,7 +5,7 @@ const PropTypes = require('prop-types');
 const classnames = require('classnames');
 const debounce = require('lodash.debounce');
 const { useRouteFocused } = require('stremio-router');
-const { Slider, Button } = require('stremio/common');
+const { Slider, Button, useBinaryState } = require('stremio/common');
 const formatTime = require('./formatTime');
 const styles = require('./styles');
 
@@ -14,12 +14,7 @@ const SeekBar = ({ className, time, duration, buffered, onSeekRequested }) => {
     const routeFocused = useRouteFocused();
     const [seekTime, setSeekTime] = React.useState(null);
 
-    const DURATION_MODE_OPTIONS = {
-        'totalTime': 'totalTime',
-        'remainingTime': 'remainingTime'
-    };
-
-    const [durationMode, setDurationMode] = React.useState(DURATION_MODE_OPTIONS.totalTime);
+    const [remainingTimeMode,,, toggleRemainingTimeMode] = useBinaryState(false);
     const resetTimeDebounced = React.useCallback(debounce(() => {
         setSeekTime(null);
     }, 1500), []);
@@ -63,17 +58,11 @@ const SeekBar = ({ className, time, duration, buffered, onSeekRequested }) => {
                 onSlide={onSlide}
                 onComplete={onComplete}
             />
-            <Button
-                onClick={() => {
-                    durationMode === DURATION_MODE_OPTIONS.totalTime
-                        ? setDurationMode(DURATION_MODE_OPTIONS.remainingTime)
-                        : setDurationMode(DURATION_MODE_OPTIONS.totalTime);
-                }}
-            >
+            <Button onClick={toggleRemainingTimeMode}>
                 <div className={styles['label']}>
-                    {durationMode === DURATION_MODE_OPTIONS.totalTime
-                        ? formatTime(duration)
-                        : formatTime(duration - time, '-')}
+                    {remainingTimeMode
+                        ? formatTime(duration - time, '-')
+                        : formatTime(duration) }
                 </div>
             </Button>
         </div>

From 10e37a9889101f322c84ffb0992e24a90f0ce0da Mon Sep 17 00:00:00 2001
From: Arpit Batra <arpitbatra123@gmail.com>
Date: Tue, 19 Mar 2024 19:59:35 +0530
Subject: [PATCH 4/4] Update src/routes/Player/ControlBar/SeekBar/SeekBar.js

Co-authored-by: Timothy Z. <117831817+kKaskak@users.noreply.github.com>
---
 src/routes/Player/ControlBar/SeekBar/SeekBar.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/routes/Player/ControlBar/SeekBar/SeekBar.js b/src/routes/Player/ControlBar/SeekBar/SeekBar.js
index 322fa04fc..0fcb7423e 100644
--- a/src/routes/Player/ControlBar/SeekBar/SeekBar.js
+++ b/src/routes/Player/ControlBar/SeekBar/SeekBar.js
@@ -60,7 +60,7 @@ const SeekBar = ({ className, time, duration, buffered, onSeekRequested }) => {
             />
             <Button onClick={toggleRemainingTimeMode}>
                 <div className={styles['label']}>
-                    {remainingTimeMode
+                    {remainingTimeMode && duration !== null && !isNaN(duration)
                         ? formatTime(duration - time, '-')
                         : formatTime(duration) }
                 </div>