Creepso/stremio-web
1
0
Fork 0
mirror of https://github.com/Stremio/stremio-web.git synced 2026-04-21 07:32:02 +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 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 } = require('stremio/common'); const { Slider, Button } = require('stremio/common');
const formatTime = require('./formatTime'); const formatTime = require('./formatTime');
const styles = require('./styles'); 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 disabled = time === null || isNaN(time) || duration === null || isNaN(duration);
const routeFocused = useRouteFocused(); const routeFocused = useRouteFocused();
const [seekTime, setSeekTime] = React.useState(null); 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(() => { const resetTimeDebounced = React.useCallback(debounce(() => {
setSeekTime(null); setSeekTime(null);
}, 1500), []); }, 1500), []);
@ -57,9 +63,19 @@ const SeekBar = ({ className, time, duration, buffered, onSeekRequested }) => {
onSlide={onSlide} onSlide={onSlide}
onComplete={onComplete} onComplete={onComplete}
/> />
<div className={styles['label']} onClick={() => { <Button
durationMode === 'totalTime' ? setDurationMode('remainingTime') : setDurationMode('totalTime'); onClick={() => {
}}>{durationMode === 'totalTime' ? formatTime(duration) : formatTime(duration - time, '-')}</div> 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> </div>
); );
}; };