Enhance Volume Control: Dynamic Limits, UI Improvements, and Shell-Based Boosting

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, 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);
@@ -100,13 +100,18 @@ 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['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;

src/components/Slider/styles.less

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

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 }) => {
+    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), []);
@@ -50,10 +53,11 @@ const VolumeSlider = ({ className, volume, onVolumeChangeRequested }) => {
                     100
             }
             minimumValue={0}
-            maximumValue={100}
+            maximumValue={maxVolume}
             disabled={disabled}
             onSlide={onSlide}
             onComplete={onComplete}
+            isVolumeSlider={!!shell.active}
         />
     );
 };

src/routes/Player/Player.js

@@ -494,14 +494,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;
@@ -559,13 +559,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));
                 }
             }
         };