abstract safe rotate

src/Components/PlayerMenu/PlayerMenu.tsx

@@ -15,8 +15,9 @@ import {
   Cross,
   ResetGame,
 } from '../../Icons/generated';
-import { useEffect, useRef } from 'react';
+import { useRef } from 'react';
 import { Spacer } from '../Misc/Spacer';
+import { useSafeRotate } from '../../Hooks/useSafeRotate';
 
 const SettingsContainer = styled.div<{
   $rotation: Rotation;
@@ -71,8 +72,8 @@ const TogglesSection = styled.div`
 `;
 
 const ButtonsSections = styled.div`
-  position: relative;
   display: flex;
+  max-width: 100%;
   gap: 1rem;
   justify-content: space-between;
   padding: 3% 3%;
@@ -85,7 +86,6 @@ const ColorPicker = styled.input`
   left: 5%;
   height: 8vmax;
   width: 8vmax;
-
   border: none;
   outline: none;
   cursor: pointer;
@@ -173,30 +173,14 @@ const PlayerMenu = ({ player, setShowPlayerMenu }: PlayerMenuProps) => {
   const settingsContainerRef = useRef<HTMLDivElement | null>(null);
   const dialogRef = useRef<HTMLDialogElement | null>(null);
 
-  const isSide =
-    player.settings.rotation === Rotation.Side ||
-    player.settings.rotation === Rotation.SideFlipped;
-
-  useEffect(() => {
-    if (!settingsContainerRef.current) {
-      return;
-    }
-
-    if (isSide) {
-      //set height to 100% of the width of the parent
-      settingsContainerRef.current.style.height = `${settingsContainerRef.current.parentElement?.clientWidth}px`;
-
-      //set width to 100% of the height of the parent
-      settingsContainerRef.current.style.width = `${settingsContainerRef.current.parentElement?.clientHeight}px`;
-    }
-
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [settingsContainerRef]);
+  const { isSide } = useSafeRotate({
+    rotation: player.settings.rotation,
+    containerRef: settingsContainerRef,
+  });
 
   const handleOnClick = () => {
     setShowPlayerMenu(false);
   };
-
   const { fullscreen, wakeLock, goToStart } = useGlobalSettings();
   const { updatePlayer, resetCurrentGame } = usePlayers();
 
@@ -231,7 +215,6 @@ const PlayerMenu = ({ player, setShowPlayerMenu }: PlayerMenuProps) => {
   const closeButtonSize = isSide ? '6vmin' : '3vmax';
 
   return (
-    <>
     <PlayerMenuWrapper $rotation={player.settings.rotation}>
       <CloseButton $rotation={player.settings.rotation}>
         <Button
@@ -466,7 +449,6 @@ const PlayerMenu = ({ player, setShowPlayerMenu }: PlayerMenuProps) => {
         </dialog>
       </SettingsContainer>
     </PlayerMenuWrapper>
-    </>
   );
 };
 

src/Hooks/useSafeRotate.ts

@@ -0,0 +1,53 @@
+import { useEffect } from 'react';
+import { Rotation } from '../Types/Player';
+
+type useSafeRotateProps = {
+  rotation: Rotation;
+  containerRef: React.MutableRefObject<HTMLDivElement | null>;
+};
+
+export const useSafeRotate = ({
+  rotation,
+  containerRef,
+}: useSafeRotateProps) => {
+  const isSide =
+    rotation === Rotation.Side || rotation === Rotation.SideFlipped;
+
+  const calculateSize = (container: HTMLDivElement) => {
+    if (isSide) {
+      //set height to 100% of the width of the parent
+      container.style.height = `${container.parentElement?.clientWidth}px`;
+
+      //set width to 100% of the height of the parent
+      container.style.width = `${container.parentElement?.clientHeight}px`;
+    }
+  };
+
+  useEffect(() => {
+    if (!containerRef.current) {
+      return;
+    }
+
+    const container = containerRef.current;
+
+    const resizeObserver = new ResizeObserver(() => {
+      calculateSize(container);
+      console.log('resize by observer');
+      return;
+    });
+
+    // Initially calculate size
+    calculateSize(container);
+
+    resizeObserver.observe(container.parentElement as Element);
+
+    return () => {
+      // Cleanup: disconnect the ResizeObserver when the component unmounts.
+      resizeObserver.disconnect();
+    };
+
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [containerRef]);
+
+  return { isSide };
+};