Mirrors/movie-web
2
0
Fork 0
mirror of https://github.com/movie-web/movie-web.git synced 2024-09-21 09:29:49 +02:00
Code Issues Packages Projects Releases Wiki Activity

fix popouts in body instead of video

Browse Source
This commit is contained in:
mrjvs 2023-03-14 21:02:47 +01:00
parent e5eb09af4d
commit 60a5f84f2f
2 changed files with 39 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

57
src/components/popout/FloatingContainer.tsx
View File

@ -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>
);
}

2
src/video/components/VideoPlayerBase.tsx
View File

@ -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]"
: "",