Mirrors/movie-web
2
0
Fork 0
mirror of https://github.com/movie-web/movie-web.git synced 2024-12-28 02:51:49 +01: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 { 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"; import { createPortal } from "react-dom";
interface Props { interface Props {
@ -10,6 +16,8 @@ interface Props {
} }
export function FloatingContainer(props: Props) { export function FloatingContainer(props: Props) {
const [portalElement, setPortalElement] = useState<Element | null>(null);
const ref = useRef<HTMLDivElement>(null);
const target = useRef<Element | null>(null); const target = useRef<Element | null>(null);
useEffect(() => { useEffect(() => {
@ -34,23 +42,34 @@ export function FloatingContainer(props: Props) {
[props] [props]
); );
return createPortal( useEffect(() => {
<Transition show={props.show} animation="none"> const element = ref.current?.closest(".popout-location");
<div className="popout-wrapper pointer-events-auto fixed inset-0 z-[999] select-none"> setPortalElement(element ?? document.body);
<Transition animation="fade" isChild> }, []);
<div
onClick={click} return (
className={[ <div ref={ref}>
"absolute inset-0", {portalElement
props.darken ? "bg-black opacity-90" : "", ? createPortal(
].join(" ")} <Transition show={props.show} animation="none">
/> <div className="popout-wrapper pointer-events-auto fixed inset-0 z-[999] select-none">
</Transition> <Transition animation="fade" isChild>
<Transition animation="slide-up" className="h-0" isChild> <div
{props.children} onClick={click}
</Transition> className={[
</div> "absolute inset-0",
</Transition>, props.darken ? "bg-black opacity-90" : "",
document.body ].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 <div
ref={ref} ref={ref}
className={[ 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 props.includeSafeArea || videoInterface.isFullscreen
? "[border-left:env(safe-area-inset-left)_solid_transparent] [border-right:env(safe-area-inset-right)_solid_transparent]" ? "[border-left:env(safe-area-inset-left)_solid_transparent] [border-right:env(safe-area-inset-right)_solid_transparent]"
: "", : "",