Merge pull request #819 from Stremio/feat/shell-volume-booster

Player(shell): add audio boost

src/App/styles.less

@@ -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;

src/components/Slider/Slider.js

@@ -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;

src/components/Slider/styles.less

@@ -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);
+        background-color: var(--overlay-color);
-        opacity: 0.2;
+
+        &.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 {

src/routes/Player/ControlBar/VolumeSlider/VolumeSlider.js

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

src/routes/Player/Player.js

@@ -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(Math.max(video.state.volume - 5, 0));
-                    onVolumeChangeRequested(video.state.volume - 5);
-                }
             } else {
-                if (!menusOpen && video.state.volume !== null) {
+                if (video.state.volume < 100) {
-                    onVolumeChangeRequested(video.state.volume + 5);
+                    onVolumeChangeRequested(Math.min(video.state.volume + 5, 100));
                 }
             }
         };