Merge pull request #22 from Entrivax/improvement/vodPageResponsiveness

fix(vod): try improve responsiveness of the vod page
Zibbp · Jan 7, 2024 · e6c094f · e6c094f
2 parents 1ae3628 + f8835f0
commit e6c094f
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 62 deletions.
diff --git a/src/components/Vod/TitleBar.module.css b/src/components/Vod/TitleBar.module.css
@@ -2,7 +2,7 @@
   width: 100%;
   height: 60px;
   position: relative;
-  overflow: scroll;
+  overflow-x: auto;
 }
 .titleBar {
   display: flex;

diff --git a/src/pages/vods/[vodId].tsx b/src/pages/vods/[vodId].tsx
@@ -46,56 +46,7 @@ const VodPage = (props: any) => {
   const rightColumnRef = useRef<HTMLDivElement>(null);
   const liveChatPlayer = useRef<HTMLDivElement>(null);
 
-  const [leftColumnHeight, setLeftColumnHeight] = useState(0);
   const isMobile = useMediaQuery(`(max-width: 1000px)`);
-  const [isMobileLandScape, setIsMobileLandScape] = useState(false);
-
-
-  // Mobile screen / devices smaller than 1000px
-  // Calculate the height of the left column
-  // and set the height of the right column to the remaining height
-  // which is 100vh - 120px - leftColumnHeight
-  const handleResize = () => {
-    console.debug("hi")
-    if (leftColumnRef.current) {
-      console.debug(`leftColumnRef.current.offsetHeight: ${leftColumnRef.current.offsetHeight}`)
-      setLeftColumnHeight(leftColumnRef.current.offsetHeight);
-    }
-
-    if (isMobile && window.innerWidth > window.innerHeight) {
-      console.debug("mobile landscape")
-      setIsMobileLandScape(true);
-    } else {
-      setIsMobileLandScape(false);
-    }
-  };
-  useEffect(() => {
-    if (!isMobile) {
-      return
-    }
-
-    window.addEventListener('resize', handleResize);
-
-    handleResize();
-
-    // set 1 second interval to check if the user is on a mobile device
-    const interval = setInterval(() => {
-      handleResize();
-      if (rightColumnRef.current?.offsetHeight == 0) {
-        handleResize();
-      } else {
-        clearInterval(interval);
-      }
-    }, 1000);
-
-    // Cleanup function
-    return () => {
-      window.removeEventListener('resize', handleResize);
-      clearInterval(interval);
-    };
-
-  }, [leftColumnRef, rightColumnRef, isMobile])
-
 
   useDocumentTitle(`Ganymede - VOD ${props.vodId}`);
 
@@ -112,22 +63,15 @@ const VodPage = (props: any) => {
   useEffect(() => {
     eventBus.on("theaterMode", (data) => {
       console.debug(`vodId: toggling theater mode: ${data}`)
-      console.debug(`theaterMode: is mobile: ${isMobile} is fullscreen: ${isFullscreen} is landscape ${isMobileLandScape}`)
+      console.debug(`theaterMode: is mobile: ${isMobile} is fullscreen: ${isFullscreen}`)
       setIsFullscreen(!isFullscreen);
-      handleResize()
       if (window.innerWidth < 1000) {
         try {
           toggle();
         } catch (error) {
           console.error(`Error toggling fullscreen: ${error}`);
         }
       }
-      // sleep 1 second to wait for the video player to resize
-      setTimeout(() => {
-        handleResize();
-      }, 1000);
-
-
     });
   }, []);
 
@@ -206,10 +150,7 @@ const VodPage = (props: any) => {
               <div className={classes.leftColumnMobile} ref={leftColumnRef}>
                 <NewVideoPlayer vod={data} />
               </div>
-              <div className={classes.rightColumnMobile} style={{
-                height: `${leftColumnHeight}px`,
-                maxHeight: `${leftColumnHeight}px`
-              }}>
+              <div className={classes.rightColumnMobile}>
                 <ExperimentalChatPlayer vod={data} />
               </div>
             </Box>

diff --git a/src/pages/vods/vodId.module.css b/src/pages/vods/vodId.module.css
@@ -28,6 +28,12 @@
 .containerMobile {
   display: flex;
   width: 100vw;
+
+  @media (max-aspect-ratio: 1/1) {
+    /* Portrait mode */
+    flex-direction: column;
+    height: calc(100vh - 60px - 60px);
+  }
 }
 .leftColumn {
   flex-grow: 1;
@@ -36,6 +42,13 @@
 .leftColumnMobile {
   flex-grow: 1;
   width: calc(100vw - 200px);
+
+  @media (max-aspect-ratio: 1/1) {
+    flex: 0;
+    /* Portrait mode */
+    flex-direction: column;
+    width: 100%;
+  }
 }
 .rightColumn {
   min-width: 340px;
@@ -46,4 +59,11 @@
   min-width: 200px;
   width: 200px;
   max-width: 200px;
+  @media (max-aspect-ratio: 1/1) {
+    /* Portrait mode */
+    width: 100%;
+    max-width: 100%;
+    flex: 1;
+    height: 1px;
+  }
 }