From 60a5f84f2f17068fd40f68623f750b2f884354b4 Mon Sep 17 00:00:00 2001
From: mrjvs <jellevs@gmail.com>
Date: Tue, 14 Mar 2023 21:02:47 +0100
Subject: [PATCH] fix popouts in body instead of video

---
 src/components/popout/FloatingContainer.tsx | 57 ++++++++++++++-------
 src/video/components/VideoPlayerBase.tsx    |  2 +-
 2 files changed, 39 insertions(+), 20 deletions(-)

diff --git a/src/components/popout/FloatingContainer.tsx b/src/components/popout/FloatingContainer.tsx
index 48e4f5cc..0735d912 100644
--- a/src/components/popout/FloatingContainer.tsx
+++ b/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,23 +42,34 @@ export function FloatingContainer(props: Props) {
     [props]
   );
 
-  return 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>
-          <div
-            onClick={click}
-            className={[
-              "absolute inset-0",
-              props.darken ? "bg-black opacity-90" : "",
-            ].join(" ")}
-          />
-        </Transition>
-        <Transition animation="slide-up" className="h-0" isChild>
-          {props.children}
-        </Transition>
-      </div>
-    </Transition>,
-    document.body
+  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>
+                  <div
+                    onClick={click}
+                    className={[
+                      "absolute inset-0",
+                      props.darken ? "bg-black opacity-90" : "",
+                    ].join(" ")}
+                  />
+                </Transition>
+                <Transition animation="slide-up" className="h-0" isChild>
+                  {props.children}
+                </Transition>
+              </div>
+            </Transition>,
+            portalElement
+          )
+        : null}
+    </div>
   );
 }
diff --git a/src/video/components/VideoPlayerBase.tsx b/src/video/components/VideoPlayerBase.tsx
index 2ce6784d..18f34ab0 100644
--- a/src/video/components/VideoPlayerBase.tsx
+++ b/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]"
             : "",