Creepso/stremio-web
1
0
Fork 0
mirror of https://github.com/Stremio/stremio-web.git synced 2026-04-21 11:42: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 classnames = require('classnames');
const debounce = require('lodash.debounce'); const debounce = require('lodash.debounce');
const { useRouteFocused } = require('stremio-router'); const { useRouteFocused } = require('stremio-router');
const { Slider, Button } = require('stremio/common'); const { Slider, Button, useBinaryState } = require('stremio/common');
const formatTime = require('./formatTime'); const formatTime = require('./formatTime');
const styles = require('./styles'); const styles = require('./styles');
@ -14,12 +14,7 @@ const SeekBar = ({ className, time, duration, buffered, onSeekRequested }) => {
const routeFocused = useRouteFocused(); const routeFocused = useRouteFocused();
const [seekTime, setSeekTime] = React.useState(null); const [seekTime, setSeekTime] = React.useState(null);
const DURATION_MODE_OPTIONS = { const [remainingTimeMode,,, toggleRemainingTimeMode] = useBinaryState(false);
'totalTime': 'totalTime',
'remainingTime': 'remainingTime'
};
const [durationMode, setDurationMode] = React.useState(DURATION_MODE_OPTIONS.totalTime);
const resetTimeDebounced = React.useCallback(debounce(() => { const resetTimeDebounced = React.useCallback(debounce(() => {
setSeekTime(null); setSeekTime(null);
}, 1500), []); }, 1500), []);
@ -63,17 +58,11 @@ const SeekBar = ({ className, time, duration, buffered, onSeekRequested }) => {
onSlide={onSlide} onSlide={onSlide}
onComplete={onComplete} onComplete={onComplete}
/> />
<Button <Button onClick={toggleRemainingTimeMode}>
onClick={() => {
durationMode === DURATION_MODE_OPTIONS.totalTime
? setDurationMode(DURATION_MODE_OPTIONS.remainingTime)
: setDurationMode(DURATION_MODE_OPTIONS.totalTime);
}}
>
<div className={styles['label']}> <div className={styles['label']}>
{durationMode === DURATION_MODE_OPTIONS.totalTime {remainingTimeMode
? formatTime(duration) ? formatTime(duration - time, '-')
: formatTime(duration - time, '-')} : formatTime(duration) }
</div> </div>
</Button> </Button>
</div> </div>