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(Slider): simplify audio boost logic

Browse source
This commit is contained in:
Tim 2025-02-18 15:24:20 +01:00
parent 1fc5ab290d
commit cc36befc9a
2 changed files with 19 additions and 29 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
src/components/Slider/Slider.js
View file

@ -106,11 +106,9 @@ const Slider = ({ className, value, buffered, minimumValue, maximumValue, disabl
<div className={styles['track-before']} style={{ width: `calc(100% * ${bufferedPosition})` }} /> <div className={styles['track-before']} style={{ width: `calc(100% * ${bufferedPosition})` }} />
</div> </div>
<div className={styles['layer']}> <div className={styles['layer']}>
<div className={classnames(styles['track-after'], { [styles['audio-boost']]: audioBoost })} <div
style={audioBoost className={classnames(styles['track-after'], { [styles['audio-boost']]: audioBoost })}
? { '--progress-width': `calc(${thumbPosition} * 100%)` } style={{ '--mask-width': `calc(${thumbPosition} * 100%)` }}
: { width: `calc(${thumbPosition} * 100%)` }
}
/> />
</div> </div>
<div className={styles['layer']}> <div className={styles['layer']}>

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

@ -2,6 +2,12 @@
@import (reference) '~@stremio/stremio-colors/less/stremio-colors.less'; @import (reference) '~@stremio/stremio-colors/less/stremio-colors.less';
@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;
html.active-slider-within { html.active-slider-within {
cursor: grabbing; cursor: grabbing;
@ -37,19 +43,14 @@ html.active-slider-within {
.track { .track {
z-index: 0; z-index: 0;
flex: 1; flex: 1;
width: 100%;
height: var(--track-size); height: var(--track-size);
border-radius: var(--track-size); border-radius: var(--track-size);
background-color: var(--primary-accent-color); background-color: var(--overlay-color);
opacity: 0.2;
&.audio-boost { &.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; opacity: 0.3;
filter: brightness(1.2); background: @audio-boost-background;
} }
} }
@ -64,27 +65,18 @@ html.active-slider-within {
.track-after { .track-after {
z-index: 2; z-index: 2;
flex: none; flex: none;
width: 100%;
height: var(--track-size); height: var(--track-size);
border-radius: var(--track-size); border-radius: var(--track-size);
background-color: var(--primary-foreground-color); background-color: var(--primary-foreground-color);
mask-image: linear-gradient(to right,
black 0%,
black var(--mask-width),
transparent var(--mask-width)
);
&.audio-boost { &.audio-boost {
background: linear-gradient(to right, background: @audio-boost-background;
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)
);
} }
} }