Mirrors/movie-web
2
0
Fork 0
mirror of https://github.com/movie-web/movie-web.git synced 2024-12-25 07:51:51 +01:00
Code Issues Packages Projects Releases Wiki Activity

popout transitions

Browse Source 
Co-authored-by: Jip Frijlink <JipFr@users.noreply.github.com>
This commit is contained in:
Jelle van Snik 2023-02-07 19:40:53 +01:00
parent 5e433266ee
commit 6224fb32c4
2 changed files with 24 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

31
src/components/Transition.tsx
View File

@ -8,7 +8,7 @@ type TransitionAnimations = "slide-down" | "slide-up" | "fade";
interface Props { interface Props {
show: boolean; show: boolean;
durationClass?: "duration-200" | string; // default is specified so tailwind doesnt remove the class in prod builds durationClass?: string;
animation: TransitionAnimations; animation: TransitionAnimations;
className?: string; className?: string;
children?: ReactNode; children?: ReactNode;
@ -16,14 +16,15 @@ interface Props {
function getClasses( function getClasses(
animation: TransitionAnimations, animation: TransitionAnimations,
duration: number extraClasses: string,
duration: string
): TransitionClasses { ): TransitionClasses {
if (animation === "slide-down") { if (animation === "slide-down") {
return { return {
leave: `transition-[transform,opacity] duration-${duration}`, leave: `transition-[transform,opacity] ${duration} ${extraClasses}`,
leaveFrom: "opacity-100 translate-y-0", leaveFrom: "opacity-100 translate-y-0",
leaveTo: "-translate-y-4 opacity-0", leaveTo: "-translate-y-4 opacity-0",
enter: `transition-[transform,opacity] duration-${duration}`, enter: `transition-[transform,opacity] ${duration} ${extraClasses}`,
enterFrom: "opacity-0 -translate-y-4", enterFrom: "opacity-0 -translate-y-4",
enterTo: "translate-y-0 opacity-100", enterTo: "translate-y-0 opacity-100",
}; };
@ -31,10 +32,10 @@ function getClasses(
if (animation === "slide-up") { if (animation === "slide-up") {
return { return {
leave: `transition-[transform,opacity] duration-${duration}`, leave: `transition-[transform,opacity] ${duration} ${extraClasses}`,
leaveFrom: "opacity-100 translate-y-0", leaveFrom: "opacity-100 translate-y-0",
leaveTo: "translate-y-4 opacity-0", leaveTo: "translate-y-4 opacity-0",
enter: `transition-[transform,opacity] duration-${duration}`, enter: `transition-[transform,opacity] ${duration} ${extraClasses}`,
enterFrom: "opacity-0 translate-y-4", enterFrom: "opacity-0 translate-y-4",
enterTo: "translate-y-0 opacity-100", enterTo: "translate-y-0 opacity-100",
}; };
@ -42,10 +43,10 @@ function getClasses(
if (animation === "fade") { if (animation === "fade") {
return { return {
leave: `transition-[transform,opacity] duration-${duration}`, leave: `transition-[transform,opacity] ${duration} ${extraClasses}`,
leaveFrom: "opacity-100", leaveFrom: "opacity-100",
leaveTo: "opacity-0", leaveTo: "opacity-0",
enter: `transition-[transform,opacity] duration-${duration}`, enter: `transition-[transform,opacity] ${duration} ${extraClasses}`,
enterFrom: "opacity-0", enterFrom: "opacity-0",
enterTo: "opacity-100", enterTo: "opacity-100",
}; };
@ -55,16 +56,16 @@ function getClasses(
} }
export function Transition(props: Props) { export function Transition(props: Props) {
const duration = props.durationClass const duration = props.durationClass ?? "duration-200";
? parseInt(props.durationClass.split("-")[1], 10) const classes = getClasses(props.animation, props.className ?? "", duration);
: 200;
const classes = getClasses(props.animation, duration);
return ( return (
<div className={props.className}> <HeadlessTransition
<HeadlessTransition show={props.show} {...classes}> show={props.show}
{...classes}
entered={props.className}
>
{props.children} {props.children}
</HeadlessTransition> </HeadlessTransition>
</div>
); );
} }

12
src/video/components/popouts/PopoutProviderAction.tsx
View File

@ -43,16 +43,16 @@ export function PopoutProviderAction() {
}, [videoInterface]); }, [videoInterface]);
const distanceFromBottom = useMemo(() => { const distanceFromBottom = useMemo(() => {
return videoInterface.popoutBounds return videoInterface.popoutBounds
? `${Math.max( ? `${videoInterface.popoutBounds.height + 30}px`
videoInterface.popoutBounds.bottom -
videoInterface.popoutBounds.top +
videoInterface.popoutBounds.height
)}px`
: "30px"; : "30px";
}, [videoInterface]); }, [videoInterface]);
return ( return (
<Transition show={!!videoInterface.popout} animation="fade"> <Transition
show={!!videoInterface.popout}
animation="slide-up"
className="h-full"
>
<div className="popout-wrapper pointer-events-auto absolute inset-0"> <div className="popout-wrapper pointer-events-auto absolute inset-0">
<div onClick={handleClick} className="absolute inset-0" /> <div onClick={handleClick} className="absolute inset-0" />
<div <div