Creepso/stremio-web
1
0
Fork 0
mirror of https://github.com/Stremio/stremio-web.git synced 2026-04-14 00:40:25 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

refactor: added a prop to slider to fix the volume bar circle color issue

Browse source
This commit is contained in:
kKaskak 2023-10-19 11:42:58 +03:00
parent fc862aa166
commit 517d30f527
4 changed files with 16 additions and 7 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 }) => {
const Slider = ({ className, value, buffered, minimumValue, maximumValue, disabled, onSlide, onComplete, backgroundCircleStyle }) => {
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['background-circle']} />
<circle cx={'5'} cy={'5'} r={'4'} className={styles[backgroundCircleStyle]} />
<circle cx={'5'} cy={'5'} r={'2.5'} />
</svg>
</div>
@ -126,7 +126,8 @@ Slider.propTypes = {
maximumValue: PropTypes.number,
disabled: PropTypes.bool,
onSlide: PropTypes.func,
onComplete: PropTypes.func
onComplete: PropTypes.func,
backgroundCircleStyle: PropTypes.string
};
module.exports = Slider;

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

@ -65,9 +65,15 @@ html.active-slider-within {
height: var(--thumb-size);
transform: translateX(-50%);
fill: var(--primary-foreground-color);
}
.background-circle {
filter: brightness(130%);
fill: var(--primary-accent-color);
.background-circle {
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,6 +55,7 @@ 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,6 +54,7 @@ const VolumeSlider = ({ className, volume, onVolumeChangeRequested }) => {
disabled={disabled}
onSlide={onSlide}
onComplete={onComplete}
backgroundCircleStyle={'background-circle-light'}
/>
);
};