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

refactor: changed imp approach

Browse source
This commit is contained in:
kKaskak 2023-10-19 14:16:52 +03:00
parent 517d30f527
commit bd231ce932
5 changed files with 9 additions and 11 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -8,7 +8,7 @@ const useAnimationFrame = require('stremio/common/useAnimationFrame');
const useLiveRef = require('stremio/common/useLiveRef');
const styles = require('./styles');
const Slider = ({ className, value, buffered, minimumValue, maximumValue, disabled, onSlide, onComplete, backgroundCircleStyle }) => {
const Slider = ({ className, value, buffered, minimumValue, maximumValue, disabled, onSlide, onComplete }) => {
const minimumValueRef = useLiveRef(minimumValue !== null && !isNaN(minimumValue) ? minimumValue : 0);
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);
@ -110,7 +110,7 @@ const Slider = ({ className, value, buffered, minimumValue, maximumValue, disabl
</div>
<div className={styles['layer']}>
<svg className={styles['thumb']} style={{ marginLeft: `calc(100% * ${thumbPosition})` }} viewBox={'0 0 10 10'}>
<circle cx={'5'} cy={'5'} r={'4'} className={styles[backgroundCircleStyle]} />
<circle cx={'5'} cy={'5'} r={'4'} className={styles['background-circle']} />
<circle cx={'5'} cy={'5'} r={'2.5'} />
</svg>
</div>
@ -126,8 +126,7 @@ Slider.propTypes = {
maximumValue: PropTypes.number,
disabled: PropTypes.bool,
onSlide: PropTypes.func,
onComplete: PropTypes.func,
backgroundCircleStyle: PropTypes.string
onComplete: PropTypes.func
};
module.exports = Slider;

5
src/common/Slider/styles.less
View file

@ -70,10 +70,5 @@ html.active-slider-within {
fill: var(--primary-accent-color);
filter: brightness(130%);
}
.background-circle-light {
fill: var(--primary-foreground-color);
}
}
}

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

@ -55,7 +55,6 @@ const SeekBar = ({ className, time, duration, buffered, onSeekRequested }) => {
disabled={disabled}
onSlide={onSlide}
onComplete={onComplete}
backgroundCircleStyle={'background-circle'}
/>
<div className={styles['label']}>{formatTime(duration)}</div>
</div>

1
src/routes/Player/ControlBar/VolumeSlider/VolumeSlider.js
View file

@ -54,7 +54,6 @@ const VolumeSlider = ({ className, volume, onVolumeChangeRequested }) => {
disabled={disabled}
onSlide={onSlide}
onComplete={onComplete}
backgroundCircleStyle={'background-circle-light'}
/>
);
};

6
src/routes/Player/ControlBar/VolumeSlider/styles.less
View file

@ -5,6 +5,7 @@
:import('~stremio/common/Slider/styles.less') {
slider-track: track;
slider-track-after: track-after;
slider-thumb-background-circle: background-circle;
}
.volume-slider:not(:global(.disabled)) {
@ -21,4 +22,9 @@
background-color: var(--primary-foreground-color);
}
}
.slider-thumb-background-circle {
fill: var(--primary-foreground-color);
filter: brightness(100%);
}
}