Start new styling for popouts

Co-authored-by: mrjvs <mistrjvs@gmail.com>

src/components/popout/FloatingCard.tsx

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

src/components/popout/FloatingDragHandle.tsx

@@ -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]" />;
+}

src/components/popout/positions/FloatingCardMobilePosition.tsx

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

src/video/components/popouts/SettingsPopout.tsx

@@ -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 />

src/views/developer/TestView.tsx

@@ -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"
-          >
-            <p>Hello world</p>
-            <Button onClick={() => navigate("/second")}>Next</Button>
+          <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"
-          >
-            <Button onClick={() => navigate("/")}>Previous</Button>
-            <Button onClick={() => navigate("/second/third")}>Next</Button>
+          <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>