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

Enhance volume slider with warning & danger gradient for boosting

Browse source
This commit is contained in:
Ivelin Megdanov 2025-02-03 12:22:03 +02:00
parent ad107ff98b
commit 2f010168a3
4 changed files with 45 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
src/App/styles.less
View file

@ -63,6 +63,8 @@
--overlay-color: rgba(255, 255, 255, 0.05);
--modal-background-color: rgba(15, 13, 32, 1);
--outer-glow: 0px 0px 15px rgba(123, 91, 245, 0.37);
--warning-accent-color: rgba(255, 165, 0, 1);
--danger-accent-color: rgba(220, 38, 38, 1);
--border-radius: 0.75rem;
--top-overlay-size: @top-overlay-size;
--bottom-overlay-size: @bottom-overlay-size;

16
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 }) => {
const Slider = ({ className, value, buffered, minimumValue, maximumValue, disabled, onSlide, onComplete, isVolumeSlider }) => {
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);
@ -99,14 +99,19 @@ const Slider = ({ className, value, buffered, minimumValue, maximumValue, disabl
const bufferedPosition = Math.max(0, Math.min(1, (bufferedRef.current - minimumValueRef.current) / (maximumValueRef.current - minimumValueRef.current)));
return (
<div ref={sliderContainerRef} className={classnames(className, styles['slider-container'], { 'disabled': disabled })} onMouseDown={onMouseDown}>
<div className={styles['layer']}>
<div className={styles['track']} />
<div className={styles['layer']}>
<div className={classnames(styles['track'], { [styles['volume-track']]: isVolumeSlider })} />
</div>
<div className={styles['layer']}>
<div className={styles['track-before']} style={{ width: `calc(100% * ${bufferedPosition})` }} />
</div>
<div className={styles['layer']}>
<div className={styles['track-after']} style={{ width: `calc(100% * ${thumbPosition})` }} />
<div className={classnames(styles['track-after'], { [styles['volume-track-after']]: isVolumeSlider })}
style={isVolumeSlider
? { '--progress-width': `calc(${thumbPosition} * 100%)` }
: { width: `calc(${thumbPosition} * 100%)` }
}
/>
</div>
<div className={styles['layer']}>
<div className={styles['thumb']} style={{ marginLeft: `calc(100% * ${thumbPosition})` }} />
@ -123,7 +128,8 @@ Slider.propTypes = {
maximumValue: PropTypes.number,
disabled: PropTypes.bool,
onSlide: PropTypes.func,
onComplete: PropTypes.func
onComplete: PropTypes.func,
isVolumeSlider: PropTypes.bool
};
module.exports = Slider;

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

@ -58,6 +58,37 @@ html.active-slider-within {
background-color: var(--primary-foreground-color);
}
.volume-track {
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)
);
}
.thumb {
z-index: 3;
flex: none;

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}
isVolumeSlider
/>
);
};