Start new styling for popouts

Co-authored-by: mrjvs <mistrjvs@gmail.com>
This commit is contained in:
Jip Fr 2023-03-12 18:48:46 +01:00
parent f72d6db253
commit a520cf02bb
5 changed files with 136 additions and 34 deletions

View File

@ -1,8 +1,11 @@
import { FloatingCardAnchorPosition } from "@/components/popout/positions/FloatingCardAnchorPosition";
import { FloatingCardMobilePosition } from "@/components/popout/positions/FloatingCardMobilePosition";
import { useIsMobile } from "@/hooks/useIsMobile";
import { PopoutSection } from "@/video/components/popouts/PopoutUtils";
import { useSpringValue, animated, easings } from "@react-spring/web";
import { ReactNode, useCallback, useEffect, useRef } from "react";
import { Icon, Icons } from "../Icon";
import { FloatingDragHandle, MobilePopoutSpacer } from "./FloatingDragHandle";
interface FloatingCardProps {
children?: ReactNode;
@ -61,6 +64,24 @@ function CardBase(props: { children: ReactNode }) {
};
}, [getNewHeight]);
useEffect(() => {
if (!ref.current) return;
const children = ref.current.querySelectorAll(
":scope *[data-floating-page='true']"
);
const observer = new ResizeObserver(() => {
getNewHeight();
});
observer.observe(ref.current, {
attributes: false,
childList: true,
subtree: false,
});
return () => {
observer.disconnect();
};
}, [getNewHeight]);
return (
<animated.div
ref={ref}
@ -97,10 +118,61 @@ export function FloatingCard(props: RootFloatingCardProps) {
}
export function PopoutFloatingCard(props: FloatingCardProps) {
return (
<FloatingCard
className="overflow-hidden rounded-md bg-ash-300"
{...props}
/>
);
return <FloatingCard className="overflow-hidden rounded-md" {...props} />;
}
export const FloatingCardView = {
Header(props: {
title: string;
description: string;
close?: boolean;
goBack: () => any;
action?: React.ReactNode;
backText?: string;
}) {
let left = (
<div
onClick={props.goBack}
className="flex cursor-pointer items-center space-x-2 transition-colors duration-200 hover:text-white"
>
<Icon icon={Icons.ARROW_LEFT} />
<span>{props.backText || "Go back"}</span>
</div>
);
if (props.close)
left = (
<div
onClick={props.goBack}
className="flex cursor-pointer items-center space-x-2 transition-colors duration-200 hover:text-white"
>
<Icon icon={Icons.X} />
<span>Close</span>
</div>
);
return (
<div className="mb-[-1px] flex flex-col bg-[#1C161B] bg-opacity-80 backdrop-blur-xl">
<FloatingDragHandle />
<PopoutSection>
<div className="flex justify-between">
<div>{left}</div>
<div>{props.action ?? null}</div>
</div>
<h2 className="mt-8 mb-2 text-3xl font-bold text-white">
{props.title}
</h2>
<p>{props.description}</p>
</PopoutSection>
</div>
);
},
Content(props: { children: React.ReactNode }) {
return (
<PopoutSection className="bg-ash-300">
{props.children}
<MobilePopoutSpacer />
</PopoutSection>
);
},
};

View File

@ -0,0 +1,19 @@
import { useIsMobile } from "@/hooks/useIsMobile";
export function FloatingDragHandle() {
const { isMobile } = useIsMobile();
if (!isMobile) return null;
return (
<div className="mx-auto my-2 mb-2 h-1 w-12 rounded-full bg-ash-500 bg-opacity-30" />
);
}
export function MobilePopoutSpacer() {
const { isMobile } = useIsMobile();
if (!isMobile) return null;
return <div className="h-[200px]" />;
}

View File

@ -84,9 +84,7 @@ export function FloatingCardMobilePosition(props: MobilePositionProps) {
}}
{...bind()}
>
<div className="mx-auto my-2 mb-2 h-1 w-12 rounded-full bg-ash-500 bg-opacity-30" />
{props.children}
<div className="h-[200px]" />
</animated.div>
</div>
);

View File

@ -5,6 +5,7 @@ import { CaptionsSelectionAction } from "../actions/CaptionsSelectionAction";
import { SourceSelectionAction } from "../actions/SourceSelectionAction";
import { CaptionSelectionPopout } from "./CaptionSelectionPopout";
import { PopoutSection } from "./PopoutUtils";
import { SourceSelectionPopout } from "./SourceSelectionPopout";
function TestPopout(props: { router: ReturnType<typeof useFloatingRouter> }) {
const isCollapsed = props.router.isLoaded("embed");
@ -37,8 +38,8 @@ export function SettingsPopout() {
height={500}
width={320}
>
<TestPopout router={floatingRouter} />
{/* <SourceSelectionPopout /> */}
{/* <TestPopout router={floatingRouter} /> */}
<SourceSelectionPopout />
</FloatingView>
<FloatingView {...pageProps("captions")} height={500} width={320}>
<CaptionSelectionPopout />

View File

@ -1,6 +1,9 @@
import { Button } from "@/components/Button";
import { FloatingAnchor } from "@/components/popout/FloatingAnchor";
import { PopoutFloatingCard } from "@/components/popout/FloatingCard";
import {
FloatingCardView,
PopoutFloatingCard,
} from "@/components/popout/FloatingCard";
import { FloatingContainer } from "@/components/popout/FloatingContainer";
import { FloatingView } from "@/components/popout/FloatingView";
import { useFloatingRouter } from "@/hooks/useFloatingRouter";
@ -31,33 +34,42 @@ export function TestView() {
}, []);
return (
<div className="relative h-[800px] w-full rounded border border-white">
<div
className="relative h-[800px] w-full rounded border border-white bg-cover"
style={{
backgroundImage: `url(https://media4.giphy.com/media/jnhXd7KT8UTk5WIgiV/giphy.gif)`,
}}
>
<FloatingContainer show={show} onClose={() => setShow(false)}>
<PopoutFloatingCard for="test" onClose={() => setShow(false)}>
<FloatingView
{...pageProps("/")}
height={400}
width={400}
className="bg-ash-200"
>
<FloatingView {...pageProps("/")} width={400}>
<FloatingCardView.Header
title="Seasons"
description="Choose which season you want to watch"
goBack={() => setShow(false)}
close
action={<a href="#">Do something</a>}
/>
<FloatingCardView.Content>
<p>Hello world</p>
<Button onClick={() => navigate("/second")}>Next</Button>
</FloatingCardView.Content>
</FloatingView>
<FloatingView
{...pageProps("second")}
height={300}
width={500}
className="bg-ash-200"
>
<FloatingView {...pageProps("second")} height={300} width={500}>
<FloatingCardView.Header
title="Seasons"
description="Choose which season you want to watch"
goBack={() => navigate("/")}
action={<a href="#">Do something</a>}
/>
<FloatingCardView.Content>
<p>Hello world</p>
<p onClick={() => navigate("/second")}>Click to go brrr</p>
<Button onClick={() => navigate("/")}>Previous</Button>
<Button onClick={() => navigate("/second/third")}>Next</Button>
</FloatingCardView.Content>
</FloatingView>
<FloatingView
{...pageProps("third")}
height={300}
width={500}
className="bg-ash-200"
>
<FloatingView {...pageProps("third")} height={300} width={500}>
<Button onClick={() => navigate("/second")}>Previous</Button>
</FloatingView>
</PopoutFloatingCard>