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

refactor: rename progress prop to buffered for Slider

Browse source
This commit is contained in:
Tim 2023-06-05 23:08:26 +02:00
parent ed06dc7e7c
commit ffc4c28514
2 changed files with 6 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

10
src/common/Slider/Slider.js
View file

@ -8,11 +8,11 @@ const useAnimationFrame = require('stremio/common/useAnimationFrame');
const useLiveRef = require('stremio/common/useLiveRef'); const useLiveRef = require('stremio/common/useLiveRef');
const styles = require('./styles'); const styles = require('./styles');
const Slider = ({ className, value, progress, minimumValue, maximumValue, disabled, onSlide, onComplete }) => { const Slider = ({ className, value, buffered, minimumValue, maximumValue, disabled, onSlide, onComplete }) => {
const minimumValueRef = useLiveRef(minimumValue !== null && !isNaN(minimumValue) ? minimumValue : 0); const minimumValueRef = useLiveRef(minimumValue !== null && !isNaN(minimumValue) ? minimumValue : 0);
const maximumValueRef = useLiveRef(maximumValue !== null && !isNaN(maximumValue) ? maximumValue : 100); const maximumValueRef = useLiveRef(maximumValue !== null && !isNaN(maximumValue) ? maximumValue : 100);
const valueRef = useLiveRef(value !== null && !isNaN(value) ? Math.min(maximumValueRef.current, Math.max(minimumValueRef.current, value)) : 0); const valueRef = useLiveRef(value !== null && !isNaN(value) ? Math.min(maximumValueRef.current, Math.max(minimumValueRef.current, value)) : 0);
const progressRef = useLiveRef(progress !== null && !isNaN(progress) ? Math.min(maximumValueRef.current, Math.max(minimumValueRef.current, progress)) : 0); const bufferedRef = useLiveRef(buffered !== null && !isNaN(buffered) ? Math.min(maximumValueRef.current, Math.max(minimumValueRef.current, buffered)) : 0);
const onSlideRef = useLiveRef(onSlide); const onSlideRef = useLiveRef(onSlide);
const onCompleteRef = useLiveRef(onComplete); const onCompleteRef = useLiveRef(onComplete);
const sliderContainerRef = React.useRef(null); const sliderContainerRef = React.useRef(null);
@ -96,14 +96,14 @@ const Slider = ({ className, value, progress, minimumValue, maximumValue, disabl
}; };
}, []); }, []);
const thumbPosition = Math.max(0, Math.min(1, (valueRef.current - minimumValueRef.current) / (maximumValueRef.current - minimumValueRef.current))); const thumbPosition = Math.max(0, Math.min(1, (valueRef.current - minimumValueRef.current) / (maximumValueRef.current - minimumValueRef.current)));
const progressPosition = Math.max(0, Math.min(1, (progressRef.current - minimumValueRef.current) / (maximumValueRef.current - minimumValueRef.current))); const bufferedPosition = Math.max(0, Math.min(1, (bufferedRef.current - minimumValueRef.current) / (maximumValueRef.current - minimumValueRef.current)));
return ( return (
<div ref={sliderContainerRef} className={classnames(className, styles['slider-container'], { 'disabled': disabled })} onMouseDown={onMouseDown}> <div ref={sliderContainerRef} className={classnames(className, styles['slider-container'], { 'disabled': disabled })} onMouseDown={onMouseDown}>
<div className={styles['layer']}> <div className={styles['layer']}>
<div className={styles['track']} /> <div className={styles['track']} />
</div> </div>
<div className={styles['layer']}> <div className={styles['layer']}>
<div className={styles['track-before']} style={{ width: `calc(100% * ${progressPosition})` }} /> <div className={styles['track-before']} style={{ width: `calc(100% * ${bufferedPosition})` }} />
</div> </div>
<div className={styles['layer']}> <div className={styles['layer']}>
<div className={styles['track-after']} style={{ width: `calc(100% * ${thumbPosition})` }} /> <div className={styles['track-after']} style={{ width: `calc(100% * ${thumbPosition})` }} />
@ -120,7 +120,7 @@ const Slider = ({ className, value, progress, minimumValue, maximumValue, disabl
Slider.propTypes = { Slider.propTypes = {
className: PropTypes.string, className: PropTypes.string,
value: PropTypes.number, value: PropTypes.number,
progress: PropTypes.number, buffered: PropTypes.number,
minimumValue: PropTypes.number, minimumValue: PropTypes.number,
maximumValue: PropTypes.number, maximumValue: PropTypes.number,
disabled: PropTypes.bool, disabled: PropTypes.bool,

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

@ -49,7 +49,7 @@ const SeekBar = ({ className, time, duration, buffered, onSeekRequested }) => {
: :
0 0
} }
progress={buffered} buffered={buffered}
minimumValue={0} minimumValue={0}
maximumValue={duration} maximumValue={duration}
disabled={disabled} disabled={disabled}