Merge pull request #608 from arpitbatra123/development

Update SeekBar component to display remaining time

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, useBinaryState } = require('stremio/common');
 const formatTime = require('./formatTime');
 const styles = require('./styles');
 
@@ -13,6 +13,8 @@ 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 [remainingTimeMode,,, toggleRemainingTimeMode] = useBinaryState(false);
     const resetTimeDebounced = React.useCallback(debounce(() => {
         setSeekTime(null);
     }, 1500), []);
@@ -56,7 +58,13 @@ const SeekBar = ({ className, time, duration, buffered, onSeekRequested }) => {
                 onSlide={onSlide}
                 onComplete={onComplete}
             />
-            <div className={styles['label']}>{formatTime(duration)}</div>
+            <Button onClick={toggleRemainingTimeMode}>
+                <div className={styles['label']}>
+                    {remainingTimeMode && duration !== null && !isNaN(duration)
+                        ? formatTime(duration - time, '-')
+                        : formatTime(duration) }
+                </div>
+            </Button>
         </div>
     );
 };

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;

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;