From 69e90e8d8bea1104a259c8f129655b2d9afa612e Mon Sep 17 00:00:00 2001
From: kKaskak <117831817+kKaskak@users.noreply.github.com>
Date: Wed, 17 Jan 2024 20:24:20 +0200
Subject: [PATCH] refactor: moved & refactored the logic to the component

---
 src/routes/Player/Player.js                   | 20 ++-----
 .../VolumeChangeIndicator.js                  | 57 ++++++++++++++-----
 .../Player/VolumeChangeIndicator/styles.less  |  3 -
 3 files changed, 48 insertions(+), 32 deletions(-)

diff --git a/src/routes/Player/Player.js b/src/routes/Player/Player.js
index 3f1e9170e..8ee614aaf 100644
--- a/src/routes/Player/Player.js
+++ b/src/routes/Player/Player.js
@@ -57,8 +57,6 @@ 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;
@@ -157,13 +155,7 @@ const Player = ({ urlParams, queryParams }) => {
 
     const onVolumeChangeRequested = React.useCallback((volume) => {
         video.setProp('volume', volume);
-        if (immersed && !menusOpen) {
-            openVolumeChangeIndicator();
-        }
-
-        if (volumeChangeTimeout.current) clearTimeout(volumeChangeTimeout.current);
-        volumeChangeTimeout.current = setTimeout(closeVolumeChangeIndicator, 1500);
-    }, [immersed, menusOpen]);
+    }, []);
 
     const onSeekRequested = React.useCallback((time) => {
         video.setProp('time', time);
@@ -432,12 +424,6 @@ 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);
@@ -646,11 +632,13 @@ const Player = ({ urlParams, queryParams }) => {
                     null
             }
             {
-                volumeChangeIndicatorOpen ?
+                immersed ?
                     <VolumeChangeIndicator
                         muted={video.state.muted}
                         volume={video.state.volume}
                         onVolumeChangeRequested={onVolumeChangeRequested}
+                        immersed={immersed}
+                        menusOpen={menusOpen}
                     />
                     :
                     null
diff --git a/src/routes/Player/VolumeChangeIndicator/VolumeChangeIndicator.js b/src/routes/Player/VolumeChangeIndicator/VolumeChangeIndicator.js
index a3858e59f..66c47fc0e 100644
--- a/src/routes/Player/VolumeChangeIndicator/VolumeChangeIndicator.js
+++ b/src/routes/Player/VolumeChangeIndicator/VolumeChangeIndicator.js
@@ -6,26 +6,57 @@ 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, onVolumeChangeRequested, volume, menusOpen, immersed }) => {
+
+    const [volumeIndicatorOpen, openVolumeIndicator, closeVolumeIndicator] = useBinaryState(false);
+    const volumeChangeTimeout = React.useRef(null);
+
+    React.useEffect(() => {
+        if (immersed && !menusOpen) openVolumeIndicator();
+
+        if (volumeChangeTimeout.current) clearTimeout(volumeChangeTimeout.current);
+        volumeChangeTimeout.current = setTimeout(closeVolumeIndicator, 1500);
+    }, [volume, menusOpen, immersed]);
+
+    React.useEffect(() => {
+        return () => {
+            if (volumeChangeTimeout.current) clearTimeout(volumeChangeTimeout.current);
+        };
+    }, [volume]);
 
-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>
+        <React.Fragment>
+            {
+                volumeIndicatorOpen ?
+                    <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>
+                    :
+                    null
+            }
+        </React.Fragment>
     );
-};
+});
+
+VolumeChangeIndicator.displayName = 'VolumeChangeIndicator';
 
 module.exports = VolumeChangeIndicator;
 
 VolumeChangeIndicator.propTypes = {
     muted: PropTypes.bool,
     onVolumeChangeRequested: PropTypes.func,
-    volume: PropTypes.number
+    volume: PropTypes.number,
+    menusOpen: PropTypes.bool,
+    immersed: PropTypes.bool,
+    openVolumeIndicator: PropTypes.func,
+    closeVolumeIndicator: PropTypes.func
 };
diff --git a/src/routes/Player/VolumeChangeIndicator/styles.less b/src/routes/Player/VolumeChangeIndicator/styles.less
index 2487297a4..38d651b7b 100644
--- a/src/routes/Player/VolumeChangeIndicator/styles.less
+++ b/src/routes/Player/VolumeChangeIndicator/styles.less
@@ -10,7 +10,6 @@
     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);
@@ -21,12 +20,10 @@
         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;