Creepso/stremio-web
1
0
Fork 0
mirror of https://github.com/Stremio/stremio-web.git synced 2026-03-11 21:27:05 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

Update SeekBar component to toggle between total time and remaining time

Browse source
This commit is contained in:
Arpit Batra 2024-03-18 12:18:59 +05:30
parent dbd98750e7
commit d3e0ff2437
1 changed files with 6 additions and 17 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

23
src/routes/Player/ControlBar/SeekBar/SeekBar.js
View file

@ -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>