From 15cdd4f70af20776c16f9d2d1ff23a9a20d8bfc2 Mon Sep 17 00:00:00 2001
From: kKaskak <117831817+kKaskak@users.noreply.github.com>
Date: Wed, 17 Jan 2024 23:04:34 +0200
Subject: [PATCH] refactor: simplify the logic

---
 src/routes/Player/Player.js                   |  4 +---
 .../VolumeChangeIndicator.js                  | 23 +++++++++----------
 2 files changed, 12 insertions(+), 15 deletions(-)

diff --git a/src/routes/Player/Player.js b/src/routes/Player/Player.js
index 8ee614aaf..33bff1368 100644
--- a/src/routes/Player/Player.js
+++ b/src/routes/Player/Player.js
@@ -632,13 +632,11 @@ const Player = ({ urlParams, queryParams }) => {
                     null
             }
             {
-                immersed ?
+                video.state.volume !== null && overlayHidden ?
                     <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 66c47fc0e..dffe64de9 100644
--- a/src/routes/Player/VolumeChangeIndicator/VolumeChangeIndicator.js
+++ b/src/routes/Player/VolumeChangeIndicator/VolumeChangeIndicator.js
@@ -8,23 +8,26 @@ const PropTypes = require('prop-types');
 const styles = require('./styles');
 const { useBinaryState } = require('stremio/common');
 
-const VolumeChangeIndicator = React.memo(({ muted, onVolumeChangeRequested, volume, menusOpen, immersed }) => {
-
+const VolumeChangeIndicator = React.memo(({ muted, onVolumeChangeRequested, volume }) => {
     const [volumeIndicatorOpen, openVolumeIndicator, closeVolumeIndicator] = useBinaryState(false);
     const volumeChangeTimeout = React.useRef(null);
+    const prevVolume = React.useRef(volume);
 
     React.useEffect(() => {
-        if (immersed && !menusOpen) openVolumeIndicator();
+        if (prevVolume.current !== volume) {
+            openVolumeIndicator();
+            if (volumeChangeTimeout.current) clearTimeout(volumeChangeTimeout.current);
+            volumeChangeTimeout.current = setTimeout(closeVolumeIndicator, 1500);
+        }
 
-        if (volumeChangeTimeout.current) clearTimeout(volumeChangeTimeout.current);
-        volumeChangeTimeout.current = setTimeout(closeVolumeIndicator, 1500);
-    }, [volume, menusOpen, immersed]);
+        prevVolume.current = volume;
+    }, [volume]);
 
     React.useEffect(() => {
         return () => {
             if (volumeChangeTimeout.current) clearTimeout(volumeChangeTimeout.current);
         };
-    }, [volume]);
+    }, []);
 
     return (
         <React.Fragment>
@@ -54,9 +57,5 @@ module.exports = VolumeChangeIndicator;
 VolumeChangeIndicator.propTypes = {
     muted: PropTypes.bool,
     onVolumeChangeRequested: PropTypes.func,
-    volume: PropTypes.number,
-    menusOpen: PropTypes.bool,
-    immersed: PropTypes.bool,
-    openVolumeIndicator: PropTypes.func,
-    closeVolumeIndicator: PropTypes.func
+    volume: PropTypes.number
 };