Merge pull request #558 from Stremio/feature-volume-on-scroll-indicator

Feature: Volume Change Indicator Implementation

src/routes/Player/Player.js

@@ -10,6 +10,7 @@ const { useRouteFocused } = require('stremio-router');
 const { useServices } = require('stremio/services');
 const { HorizontalNavBar, useFullscreen, useBinaryState, useToast, useStreamingServer, withCoreSuspender } = require('stremio/common');
 const BufferingLoader = require('./BufferingLoader');
+const VolumeChangeIndicator = require('./VolumeChangeIndicator');
 const Error = require('./Error');
 const ControlBar = require('./ControlBar');
 const NextVideoPopup = require('./NextVideoPopup');
@@ -630,6 +631,15 @@ const Player = ({ urlParams, queryParams }) => {
                     :
                     null
             }
+            {
+                video.state.volume !== null && overlayHidden ?
+                    <VolumeChangeIndicator
+                        muted={video.state.muted}
+                        volume={video.state.volume}
+                    />
+                    :
+                    null
+            }
             <HorizontalNavBar
                 className={classnames(styles['layer'], styles['nav-bar-layer'])}
                 title={player.title !== null ? player.title : ''}

src/routes/Player/VolumeChangeIndicator/VolumeChangeIndicator.js

@@ -0,0 +1,62 @@
+// Copyright (C) 2017-2023 Smart code 203358507
+
+const React = require('react');
+const VolumeSlider = require('../ControlBar/VolumeSlider');
+const { default: Icon } = require('@stremio/stremio-icons/react');
+const { default: classNames } = require('classnames');
+const PropTypes = require('prop-types');
+const styles = require('./styles');
+const { useBinaryState } = require('stremio/common');
+
+const VolumeChangeIndicator = React.memo(({ muted, volume }) => {
+    const [volumeIndicatorOpen, openVolumeIndicator, closeVolumeIndicator] = useBinaryState(false);
+    const volumeChangeTimeout = React.useRef(null);
+    const prevVolume = React.useRef(volume);
+
+    const iconName = React.useMemo(() => {
+        return typeof muted === 'boolean' && muted ? 'volume-mute' :
+            volume === null || isNaN(volume) ? 'volume-off' :
+                volume < 30 ? 'volume-low' :
+                    volume < 70 ? 'volume-medium' :
+                        'volume-high';
+    }, [muted, volume]);
+
+    React.useEffect(() => {
+        if (prevVolume.current !== volume) {
+            openVolumeIndicator();
+            if (volumeChangeTimeout.current) clearTimeout(volumeChangeTimeout.current);
+            volumeChangeTimeout.current = setTimeout(closeVolumeIndicator, 1500);
+        }
+
+        prevVolume.current = volume;
+    }, [volume]);
+
+    React.useEffect(() => {
+        return () => {
+            if (volumeChangeTimeout.current) clearTimeout(volumeChangeTimeout.current);
+        };
+    }, []);
+
+    return (
+        <React.Fragment>
+            {
+                volumeIndicatorOpen ?
+                    <div className={classNames(styles['layer'], styles['volume-change-indicator'])}>
+                        <Icon name={iconName} className={styles['volume-icon']} />
+                        <VolumeSlider volume={volume} className={styles['volume-slider']} />
+                    </div>
+                    :
+                    null
+            }
+        </React.Fragment>
+    );
+});
+
+VolumeChangeIndicator.displayName = 'VolumeChangeIndicator';
+
+module.exports = VolumeChangeIndicator;
+
+VolumeChangeIndicator.propTypes = {
+    muted: PropTypes.bool,
+    volume: PropTypes.number
+};

src/routes/Player/VolumeChangeIndicator/index.js

@@ -0,0 +1,5 @@
+// Copyright (C) 2017-2023 Smart code 203358507
+
+const VolumeChangeIndicator = require('./VolumeChangeIndicator');
+
+module.exports = VolumeChangeIndicator;

src/routes/Player/VolumeChangeIndicator/styles.less

@@ -0,0 +1,52 @@
+// Copyright (C) 2017-2023 Smart code 203358507
+
+@import (reference) '~stremio/common/screen-sizes.less';
+
+.volume-change-indicator {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    transform: translate(-50%, -50%);
+    background-color: var(--overlay-color);
+    border-radius: var(--border-radius);
+    padding: 2rem 2.5rem;
+    gap: 1rem;
+
+    .volume-icon {
+        width: 6.5rem;
+        height: 6.5rem;
+        color: var(--primary-foreground-color);
+    }
+
+    .volume-slider {
+        border-radius: var(--border-radius);
+        max-height: 1rem;
+        width: 6.5rem;
+        max-height: 1rem;
+        flex: 0 1 10rem;
+        margin: 0 1rem;
+
+        --track-size: 0.35rem;
+        --thumb-size: 1rem;
+    }
+
+}
+
+@media only screen and (max-width: @minimum) {
+    .volume-change-indicator {
+        padding: 1rem 1.5rem;
+        
+        .volume-icon {
+            width: 4rem;
+            height: 4rem;
+        }
+
+        .volume-slider {
+            width: 4rem;
+        }
+    }
+}