From f1b6ac17e40fc0fcedf60bc559de4947deec6cf7 Mon Sep 17 00:00:00 2001
From: kKaskak <117831817+kKaskak@users.noreply.github.com>
Date: Mon, 18 Dec 2023 13:20:36 +0100
Subject: [PATCH] refactor: add  forwardRef to Controlbar.js

Co-Authored-By: Lachezar Lechev <8925621+elpiel@users.noreply.github.com>
---
 src/routes/Player/ControlBar/ControlBar.js | 10 ++++++----
 src/routes/Player/Player.js                | 13 +++++++------
 2 files changed, 13 insertions(+), 10 deletions(-)

diff --git a/src/routes/Player/ControlBar/ControlBar.js b/src/routes/Player/ControlBar/ControlBar.js
index f97a19cea..a2662d197 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);
@@ -133,7 +133,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}
@@ -205,7 +205,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 3f8d5930d..2cd177b96 100644
--- a/src/routes/Player/Player.js
+++ b/src/routes/Player/Player.js
@@ -51,7 +51,7 @@ const Player = ({ urlParams, queryParams }) => {
     const nextVideoPopupDismissed = React.useRef(false);
     const defaultSubtitlesSelected = React.useRef(false);
     const defaultAudioTrackSelected = React.useRef(false);
-    const controlBar = React.useRef(null);
+    const controlBarRef = React.useRef(null);
     const [controlBarHeight, setControlBarHeight] = React.useState(0);
 
     const [error, setError] = React.useState(null);
@@ -267,10 +267,11 @@ const Player = ({ urlParams, queryParams }) => {
     }, []);
 
     React.useEffect(() => {
-        if(controlBarHeight.current) {
-            setControlBarHeight(controlBarHeight.current.clientHeight);
+        if(controlBarRef.current.clientHeight) {
+            const height = controlBarRef.current.clientHeight;
+            setControlBarHeight(height);
         }
-    }, []);
+    }, [controlBarRef?.current]);
     React.useEffect(() => {
         setError(null);
         if (player.selected === null) {
@@ -478,6 +479,7 @@ const Player = ({ urlParams, queryParams }) => {
             }
         };
     }, []);
+    console.log(controlBarHeight)
     React.useLayoutEffect(() => {
         const onKeyDown = (event) => {
             switch (event.code) {
@@ -688,7 +690,6 @@ const Player = ({ urlParams, queryParams }) => {
                 onMouseMove={onBarMouseMove}
                 onMouseOver={onBarMouseMove}
             />
-            <div ref={controlBar}>
             <ControlBar
                 className={classnames(styles['layer'], styles['control-bar-layer'])}
                 paused={videoState.paused}
@@ -719,8 +720,8 @@ const Player = ({ urlParams, queryParams }) => {
                 onToggleStatisticsMenu={toggleStatisticsMenu}
                 onMouseMove={onBarMouseMove}
                 onMouseOver={onBarMouseMove}
+                ref={controlBarRef}
             />
-            </div>
             {
                 nextVideoPopupOpen ?
                     <NextVideoPopup