feature: VolumeChangeIndicatorImplementation

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');
@@ -56,6 +57,8 @@ const Player = ({ urlParams, queryParams }) => {
     const [videosMenuOpen, , closeVideosMenu, toggleVideosMenu] = useBinaryState(false);
     const [statisticsMenuOpen, , closeStatisticsMenu, toggleStatisticsMenu] = useBinaryState(false);
     const [nextVideoPopupOpen, openNextVideoPopup, closeNextVideoPopup] = useBinaryState(false);
+    const [volumeChangeIndicatorOpen, openVolumeChangeIndicator, closeVolumeChangeIndicator] = useBinaryState(false);
+    const volumeChangeTimeout = React.useRef(null);
 
     const menusOpen = React.useMemo(() => {
         return optionsMenuOpen || subtitlesMenuOpen || infoMenuOpen || speedMenuOpen || videosMenuOpen || statisticsMenuOpen;
@@ -154,7 +157,11 @@ const Player = ({ urlParams, queryParams }) => {
 
     const onVolumeChangeRequested = React.useCallback((volume) => {
         video.setProp('volume', volume);
-    }, []);
+        openVolumeChangeIndicator();
+
+        if (volumeChangeTimeout.current) clearTimeout(volumeChangeTimeout.current);
+        volumeChangeTimeout.current = setTimeout(closeVolumeChangeIndicator, 1500);
+    }, [openVolumeChangeIndicator, closeVolumeChangeIndicator]);
 
     const onSeekRequested = React.useCallback((time) => {
         video.setProp('time', time);
@@ -423,6 +430,12 @@ const Player = ({ urlParams, queryParams }) => {
         }
     }, [video.state.playbackSpeed]);
 
+    React.useEffect(() => {
+        return () => {
+            if (volumeChangeTimeout.current) clearTimeout(volumeChangeTimeout.current);
+        };
+    }, []);
+
     React.useEffect(() => {
         const toastFilter = (item) => item?.dataset?.type === 'CoreEvent';
         toast.addFilter(toastFilter);
@@ -630,6 +643,16 @@ const Player = ({ urlParams, queryParams }) => {
                     :
                     null
             }
+            {
+                volumeChangeIndicatorOpen ?
+                    <VolumeChangeIndicator
+                        muted={video.state.muted}
+                        volume={video.state.volume}
+                        onVolumeChangeRequested={onVolumeChangeRequested}
+                    />
+                    :
+                    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,31 @@
+// 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 VolumeChangeIndicator = ({ muted, onVolumeChangeRequested, volume }) => {
+    return (
+        <div className={classNames(styles['layer'], styles['volume-change-indicator'])}>
+            <Icon name={
+                (typeof muted === 'boolean' && muted) ? 'volume-mute' :
+                    (volume === null || isNaN(volume)) ? 'volume-off' :
+                        volume < 30 ? 'volume-low' :
+                            volume < 70 ? 'volume-medium' :
+                                'volume-high'
+            } className={styles['volume-icon']} />
+            <VolumeSlider volume={volume} onVolumeChangeRequested={onVolumeChangeRequested} className={styles['volume-slider']} />
+        </div>
+    );
+};
+
+module.exports = VolumeChangeIndicator;
+
+VolumeChangeIndicator.propTypes = {
+    muted: PropTypes.bool,
+    onVolumeChangeRequested: PropTypes.func,
+    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,55 @@
+// 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;
+    z-index: 99999;
+    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);
+        opacity: 0.5;
+    }
+
+    .volume-slider {
+        border-radius: var(--border-radius);
+        opacity: 0.5;
+        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;
+        }
+    }
+}