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

Add Button component to SeekBar.js

Browse source
This commit is contained in:
Arpit Batra 2024-03-13 11:05:38 +05:30
parent 7f6cc0ef15
commit dbd98750e7
1 changed files with 21 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

26
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 } = 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>
);
};