Merge pull request #212 from movie-web/hotfix-fullscreen-popouts

Hotfix: popouts in body instead of video

src/components/popout/FloatingContainer.tsx

@@ -1,5 +1,11 @@
 import { Transition } from "@/components/Transition";
-import React, { ReactNode, useCallback, useEffect, useRef } from "react";
+import React, {
+  ReactNode,
+  useCallback,
+  useEffect,
+  useRef,
+  useState,
+} from "react";
 import { createPortal } from "react-dom";
 
 interface Props {
@@ -10,6 +16,8 @@ interface Props {
 }
 
 export function FloatingContainer(props: Props) {
+  const [portalElement, setPortalElement] = useState<Element | null>(null);
+  const ref = useRef<HTMLDivElement>(null);
   const target = useRef<Element | null>(null);
 
   useEffect(() => {
@@ -34,7 +42,15 @@ export function FloatingContainer(props: Props) {
     [props]
   );
 
-  return createPortal(
+  useEffect(() => {
+    const element = ref.current?.closest(".popout-location");
+    setPortalElement(element ?? document.body);
+  }, []);
+
+  return (
+    <div ref={ref}>
+      {portalElement
+        ? createPortal(
             <Transition show={props.show} animation="none">
               <div className="popout-wrapper pointer-events-auto fixed inset-0 z-[999] select-none">
                 <Transition animation="fade" isChild>
@@ -51,6 +67,9 @@ export function FloatingContainer(props: Props) {
                 </Transition>
               </div>
             </Transition>,
-    document.body
+            portalElement
+          )
+        : null}
+    </div>
   );
 }

src/video/components/VideoPlayerBase.tsx

@@ -39,7 +39,7 @@ function VideoPlayerBaseWithState(props: VideoPlayerBaseProps) {
       <div
         ref={ref}
         className={[
-          "is-video-player relative h-full w-full select-none overflow-hidden bg-black",
+          "is-video-player popout-location relative h-full w-full select-none overflow-hidden bg-black",
           props.includeSafeArea || videoInterface.isFullscreen
             ? "[border-left:env(safe-area-inset-left)_solid_transparent] [border-right:env(safe-area-inset-right)_solid_transparent]"
             : "",