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

Merge pull request #819 from Stremio/feat/shell-volume-booster
Some checks failed
Build / build (push) Has been cancelled
Details

Browse source 
Player(shell): add audio boost
This commit is contained in:
Tim 2025-02-18 15:32:22 +01:00 committed by GitHub
commit dfe509d93f
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
5 changed files with 45 additions and 14 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;

12
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, 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,13 +100,16 @@ 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={styles['track']} />
<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={styles['track-after']} style={{ width: `calc(100% * ${thumbPosition})` }} />
<div
className={classnames(styles['track-after'], { [styles['audio-boost']]: audioBoost })}
style={{ '--mask-width': `calc(${thumbPosition} * 100%)` }}
/>
</div>
<div className={styles['layer']}>
<div className={styles['thumb']} style={{ marginLeft: `calc(100% * ${thumbPosition})` }} />
@ -123,7 +126,8 @@ Slider.propTypes = {
maximumValue: PropTypes.number,
disabled: PropTypes.bool,
onSlide: PropTypes.func,
onComplete: PropTypes.func
onComplete: PropTypes.func,
audioBoost: PropTypes.bool
};
module.exports = Slider;

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

@ -2,6 +2,12 @@
@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 {
cursor: grabbing;
@ -37,10 +43,15 @@ html.active-slider-within {
.track {
z-index: 0;
flex: 1;
width: 100%;
height: var(--track-size);
border-radius: var(--track-size);
background-color: var(--primary-accent-color);
opacity: 0.2;
background-color: var(--overlay-color);
&.audio-boost {
opacity: 0.3;
background: @audio-boost-background;
}
}
.track-before {
@ -54,9 +65,19 @@ html.active-slider-within {
.track-after {
z-index: 2;
flex: none;
width: 100%;
height: var(--track-size);
border-radius: var(--track-size);
background-color: var(--primary-foreground-color);
mask-image: linear-gradient(to right,
black 0%,
black var(--mask-width),
transparent var(--mask-width)
);
&.audio-boost {
background: @audio-boost-background;
}
}
.thumb {

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

@ -5,13 +5,16 @@ const PropTypes = require('prop-types');
const classnames = require('classnames');
const debounce = require('lodash.debounce');
const { useRouteFocused } = require('stremio-router');
const { useServices } = require('stremio/services');
const { Slider } = require('stremio/components');
const styles = require('./styles');
const VolumeSlider = ({ className, volume, onVolumeChangeRequested, muted }) => {
const { shell } = useServices();
const disabled = volume === null || isNaN(volume);
const routeFocused = useRouteFocused();
const [slidingVolume, setSlidingVolume] = React.useState(null);
const maxVolume = shell.active ? 200: 100;
const resetVolumeDebounced = React.useCallback(debounce(() => {
setSlidingVolume(null);
}, 100), []);
@ -52,10 +55,11 @@ const VolumeSlider = ({ className, volume, onVolumeChangeRequested, muted }) =>
100
}
minimumValue={0}
maximumValue={100}
maximumValue={maxVolume}
disabled={disabled}
onSlide={onSlide}
onComplete={onComplete}
audioBoost={!!shell.active}
/>
);
};

14
src/routes/Player/Player.js
View file

@ -506,14 +506,14 @@ const Player = ({ urlParams, queryParams }) => {
}
case 'ArrowUp': {
if (!menusOpen && !nextVideoPopupOpen && video.state.volume !== null) {
onVolumeChangeRequested(video.state.volume + 5);
onVolumeChangeRequested(Math.min(video.state.volume + 5, 200));
}
break;
}
case 'ArrowDown': {
if (!menusOpen && !nextVideoPopupOpen && video.state.volume !== null) {
onVolumeChangeRequested(video.state.volume - 5);
onVolumeChangeRequested(Math.max(video.state.volume - 5, 0));
}
break;
@ -571,13 +571,13 @@ const Player = ({ urlParams, queryParams }) => {
}
};
const onWheel = ({ deltaY }) => {
if (menusOpen || video.state.volume === null) return;
if (deltaY > 0) {
if (!menusOpen && video.state.volume !== null) {
onVolumeChangeRequested(video.state.volume - 5);
}
onVolumeChangeRequested(Math.max(video.state.volume - 5, 0));
} else {
if (!menusOpen && video.state.volume !== null) {
onVolumeChangeRequested(video.state.volume + 5);
if (video.state.volume < 100) {
onVolumeChangeRequested(Math.min(video.state.volume + 5, 100));
}
}
};