From 8ef9b2d05caa97632c98996dd0dd5b98eb78a7ed Mon Sep 17 00:00:00 2001
From: kKaskak <117831817+kKaskak@users.noreply.github.com>
Date: Tue, 9 Jan 2024 18:10:32 +0200
Subject: [PATCH] refactor: calculate the offset based on the height of the
 control-bar-layer

---
 src/routes/Player/ControlBar/ControlBar.js | 10 ++++++----
 src/routes/Player/Player.js                | 20 +++++++++++++-------
 2 files changed, 19 insertions(+), 11 deletions(-)

diff --git a/src/routes/Player/ControlBar/ControlBar.js b/src/routes/Player/ControlBar/ControlBar.js
index b0631a3f3..8a4b23956 100644
--- a/src/routes/Player/ControlBar/ControlBar.js
+++ b/src/routes/Player/ControlBar/ControlBar.js
@@ -12,7 +12,7 @@ const styles = require('./styles');
 const { useBinaryState } = require('stremio/common');
 const { t } = require('i18next');
 
-const ControlBar = ({
+const ControlBar = React.forwardRef(({
     className,
     paused,
     time,
@@ -41,7 +41,7 @@ const ControlBar = ({
     onToggleOptionsMenu,
     onToggleStatisticsMenu,
     ...props
-}) => {
+}, ref) => {
     const { chromecast } = useServices();
     const [chromecastServiceActive, setChromecastServiceActive] = React.useState(() => chromecast.active);
     const [buttonsMenuOpen, , , toogleButtonsMenu] = useBinaryState(false);
@@ -103,7 +103,7 @@ const ControlBar = ({
         };
     }, []);
     return (
-        <div {...props} className={classnames(className, styles['control-bar-container'])}>
+        <div {...props} className={classnames(className, styles['control-bar-container'])} ref={ref}>
             <SeekBar
                 className={styles['seek-bar']}
                 time={time}
@@ -175,7 +175,9 @@ const ControlBar = ({
             </div>
         </div>
     );
-};
+});
+
+ControlBar.displayName = 'ControlBar';
 
 ControlBar.propTypes = {
     className: PropTypes.string,
diff --git a/src/routes/Player/Player.js b/src/routes/Player/Player.js
index 7bac79744..c5c99df9d 100644
--- a/src/routes/Player/Player.js
+++ b/src/routes/Player/Player.js
@@ -78,6 +78,8 @@ const Player = ({ urlParams, queryParams }) => {
     const nextVideoPopupDismissed = React.useRef(false);
     const defaultSubtitlesSelected = React.useRef(false);
     const defaultAudioTrackSelected = React.useRef(false);
+    const controlBarRef = React.createRef();
+
     const [error, setError] = React.useState(null);
 
     const onImplementationChanged = React.useCallback(() => {
@@ -187,11 +189,6 @@ const Player = ({ urlParams, queryParams }) => {
         updateSettings({ subtitlesSize: size });
     }, [updateSettings]);
 
-    const onSubtitlesOffsetChanged = React.useCallback((offset) => {
-        if (offset > 10) setOriginalSubtitlesOffset(offset);
-        updateSettings({ subtitlesOffset: offset });
-    }, [updateSettings]);
-
     const onDismissNextVideoPopup = React.useCallback(() => {
         closeNextVideoPopup();
         nextVideoPopupDismissed.current = true;
@@ -248,11 +245,19 @@ const Player = ({ urlParams, queryParams }) => {
         }
     }, []);
 
+    const onSubtitlesOffsetChanged = React.useCallback((offset) => {
+        if (offset > 10) setOriginalSubtitlesOffset(offset);
+        updateSettings({ subtitlesOffset: offset });
+    }, [updateSettings]);
+
     const onContainerMouseMove = React.useCallback((event) => {
         setImmersed(false);
-        if (settings.subtitlesOffset < 10) {
+        if (settings.subtitlesOffset < 10 && !immersed) {
             setOriginalSubtitlesOffset(settings.subtitlesOffset);
-            const dynamicOffset = Math.min(window.innerHeight * 0.1, 10);
+            const px = controlBarRef?.current?.offsetHeight;
+            const windowHeight = window.innerHeight;
+            const dynamicOffset = Math.max(10, Math.max(0, Math.round((px / windowHeight) * 100)));
+            console.log(dynamicOffset)
             updateSettings({ subtitlesOffset: dynamicOffset });
         }
         if (!event.nativeEvent.immersePrevented) {
@@ -678,6 +683,7 @@ const Player = ({ urlParams, queryParams }) => {
                 onToggleStatisticsMenu={toggleStatisticsMenu}
                 onMouseMove={onBarMouseMove}
                 onMouseOver={onBarMouseMove}
+                ref={controlBarRef}
             />
             {
                 nextVideoPopupOpen ?