Creepso/stremio-web
1
0
Fork 0
mirror of https://github.com/Stremio/stremio-web.git synced 2026-08-19 02:06:26 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Simplified the logic and renamed prop for audioBooster

Browse source
This commit is contained in:
Ivelin Megdanov 2025-02-07 14:09:46 +02:00
parent f865bca9ea
commit 0a17a56e24
3 changed files with 30 additions and 32 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

10
src/components/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, isVolumeSlider }) => {
const Slider = ({ className, value, buffered, minimumValue, maximumValue, disabled, onSlide, onComplete, audioBoost }) => {
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);
@ -100,14 +100,14 @@ const Slider = ({ className, value, buffered, minimumValue, maximumValue, disabl
return (
<div ref={sliderContainerRef} className={classnames(className, styles['slider-container'], { 'disabled': disabled })} onMouseDown={onMouseDown}>
<div className={styles['layer']}>
<div className={classnames(styles['track'], { [styles['volume-track']]: isVolumeSlider })} />
<div className={classnames(styles['track'], { [styles['audio-boost']]: audioBoost })} />
</div>
<div className={styles['layer']}>
<div className={styles['track-before']} style={{ width: `calc(100% * ${bufferedPosition})` }} />
</div>
<div className={styles['layer']}>
<div className={classnames(styles['track-after'], { [styles['volume-track-after']]: isVolumeSlider })}
style={isVolumeSlider
<div className={classnames(styles['track-after'], { [styles['audio-boost']]: audioBoost })}
style={audioBoost
? { '--progress-width': `calc(${thumbPosition} * 100%)` }
: { width: `calc(${thumbPosition} * 100%)` }
}
@ -129,7 +129,7 @@ Slider.propTypes = {
disabled: PropTypes.bool,
onSlide: PropTypes.func,
onComplete: PropTypes.func,
isVolumeSlider: PropTypes.bool
audioBoost: PropTypes.bool
};
module.exports = Slider;

50
src/components/Slider/styles.less
View file

@ -40,6 +40,16 @@ html.active-slider-within {
height: var(--track-size);
border-radius: var(--track-size);
background-color: var(--overlay-color);
&.audio-boost {
background: linear-gradient(to right,
var(--primary-foreground-color) 0%,
var(--primary-foreground-color) 50%,
var(--warning-accent-color) 75%,
var(--danger-accent-color) 100%) !important;
opacity: 0.3;
filter: brightness(1.2);
}
}
.track-before {
@ -56,37 +66,25 @@ html.active-slider-within {
height: var(--track-size);
border-radius: var(--track-size);
background-color: var(--primary-foreground-color);
}
.volume-track {
background: linear-gradient(to right,
&.audio-boost {
background: linear-gradient(to right,
var(--primary-foreground-color) 0%,
var(--primary-foreground-color) 50%,
var(--warning-accent-color) 75%,
var(--danger-accent-color) 100%) !important;
opacity: 0.3;
filter: brightness(1.2);
}
.volume-track-after {
background: linear-gradient(to right,
var(--primary-foreground-color) 0%,
var(--primary-foreground-color) 50%,
var(--warning-accent-color) 75%,
var(--danger-accent-color) 100%) !important;
width: 100%;
mask-image: linear-gradient(to right,
black 0%,
black calc(var(--progress-width) - 2px),
transparent var(--progress-width)
);
-webkit-mask-image: linear-gradient(to right,
black 0%,
black calc(var(--progress-width) - 2px),
transparent var(--progress-width)
);
width: 100%;
mask-image: linear-gradient(to right,
black 0%,
black calc(var(--progress-width) - 2px),
transparent var(--progress-width)
);
-webkit-mask-image: linear-gradient(to right,
black 0%,
black calc(var(--progress-width) - 2px),
transparent var(--progress-width)
);
}
}
.thumb {

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

@ -57,7 +57,7 @@ const VolumeSlider = ({ className, volume, onVolumeChangeRequested }) => {
disabled={disabled}
onSlide={onSlide}
onComplete={onComplete}
isVolumeSlider={!!shell.active}
audioBoost={!!shell.active}
/>
);
};