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 { FloatingCardAnchorPosition } from "@/components/popout/positions/FloatingCardAnchorPosition";
import { FloatingCardMobilePosition } from "@/components/popout/positions/FloatingCardMobilePosition"; import { FloatingCardMobilePosition } from "@/components/popout/positions/FloatingCardMobilePosition";
import { useIsMobile } from "@/hooks/useIsMobile"; import { useIsMobile } from "@/hooks/useIsMobile";
import { PopoutSection } from "@/video/components/popouts/PopoutUtils";
import { useSpringValue, animated, easings } from "@react-spring/web"; import { useSpringValue, animated, easings } from "@react-spring/web";
import { ReactNode, useCallback, useEffect, useRef } from "react"; import { ReactNode, useCallback, useEffect, useRef } from "react";
import { Icon, Icons } from "../Icon";
import { FloatingDragHandle, MobilePopoutSpacer } from "./FloatingDragHandle";
interface FloatingCardProps { interface FloatingCardProps {
children?: ReactNode; children?: ReactNode;
@ -61,6 +64,24 @@ function CardBase(props: { children: ReactNode }) {
}; };
}, [getNewHeight]); }, [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 ( return (
<animated.div <animated.div
ref={ref} ref={ref}
@ -97,10 +118,61 @@ export function FloatingCard(props: RootFloatingCardProps) {
} }
export function PopoutFloatingCard(props: FloatingCardProps) { export function PopoutFloatingCard(props: FloatingCardProps) {
return ( return <FloatingCard className="overflow-hidden rounded-md" {...props} />;
<FloatingCard
className="overflow-hidden rounded-md bg-ash-300"
{...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()} {...bind()}
> >
<div className="mx-auto my-2 mb-2 h-1 w-12 rounded-full bg-ash-500 bg-opacity-30" />
{props.children} {props.children}
<div className="h-[200px]" />
</animated.div> </animated.div>
</div> </div>
); );

View File

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

View File

@ -1,6 +1,9 @@
import { Button } from "@/components/Button"; import { Button } from "@/components/Button";
import { FloatingAnchor } from "@/components/popout/FloatingAnchor"; 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 { FloatingContainer } from "@/components/popout/FloatingContainer";
import { FloatingView } from "@/components/popout/FloatingView"; import { FloatingView } from "@/components/popout/FloatingView";
import { useFloatingRouter } from "@/hooks/useFloatingRouter"; import { useFloatingRouter } from "@/hooks/useFloatingRouter";
@ -31,33 +34,42 @@ export function TestView() {
}, []); }, []);
return ( 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)}> <FloatingContainer show={show} onClose={() => setShow(false)}>
<PopoutFloatingCard for="test" onClose={() => setShow(false)}> <PopoutFloatingCard for="test" onClose={() => setShow(false)}>
<FloatingView <FloatingView {...pageProps("/")} width={400}>
{...pageProps("/")} <FloatingCardView.Header
height={400} title="Seasons"
width={400} description="Choose which season you want to watch"
className="bg-ash-200" goBack={() => setShow(false)}
> close
action={<a href="#">Do something</a>}
/>
<FloatingCardView.Content>
<p>Hello world</p> <p>Hello world</p>
<Button onClick={() => navigate("/second")}>Next</Button> <Button onClick={() => navigate("/second")}>Next</Button>
</FloatingCardView.Content>
</FloatingView> </FloatingView>
<FloatingView <FloatingView {...pageProps("second")} height={300} width={500}>
{...pageProps("second")} <FloatingCardView.Header
height={300} title="Seasons"
width={500} description="Choose which season you want to watch"
className="bg-ash-200" 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("/")}>Previous</Button>
<Button onClick={() => navigate("/second/third")}>Next</Button> <Button onClick={() => navigate("/second/third")}>Next</Button>
</FloatingCardView.Content>
</FloatingView> </FloatingView>
<FloatingView <FloatingView {...pageProps("third")} height={300} width={500}>
{...pageProps("third")}
height={300}
width={500}
className="bg-ash-200"
>
<Button onClick={() => navigate("/second")}>Previous</Button> <Button onClick={() => navigate("/second")}>Previous</Button>
</FloatingView> </FloatingView>
</PopoutFloatingCard> </PopoutFloatingCard>