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 display remaining time when duration mode is changed

Browse source
This commit is contained in:
Arpit Batra 2024-03-12 23:33:48 +05:30
parent a568bb0f60
commit 7f6cc0ef15
3 changed files with 7 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -13,6 +13,7 @@ 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 resetTimeDebounced = React.useCallback(debounce(() => {
setSeekTime(null);
}, 1500), []);
@ -56,7 +57,9 @@ const SeekBar = ({ className, time, duration, buffered, onSeekRequested }) => {
onSlide={onSlide}
onComplete={onComplete}
/>
<div className={styles['label']}>{formatTime(duration)}</div>
<div className={styles['label']} onClick={() => {
durationMode === 'totalTime' ? setDurationMode('remainingTime') : setDurationMode('totalTime');
}}>{durationMode === 'totalTime' ? formatTime(duration) : formatTime(duration - time, '-')}</div>
</div>
);
};

4
src/routes/Player/ControlBar/SeekBar/formatTime.js
View file

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

2
src/routes/Player/ControlBar/SeekBar/styles.less
View file

@ -14,7 +14,7 @@
.label {
flex: none;
width: 5rem;
width: 6rem;
white-space: nowrap;
text-overflow: ellipsis;
direction: rtl;