diff --git a/src/components/popout/FloatingCard.tsx b/src/components/popout/FloatingCard.tsx
index 4e326d51..47bbe037 100644
--- a/src/components/popout/FloatingCard.tsx
+++ b/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 (
- );
+ return ;
}
+
+export const FloatingCardView = {
+ Header(props: {
+ title: string;
+ description: string;
+ close?: boolean;
+ goBack: () => any;
+ action?: React.ReactNode;
+ backText?: string;
+ }) {
+ let left = (
+
+
+ {props.backText || "Go back"}
+
+ );
+ if (props.close)
+ left = (
+
+
+ Close
+
+ );
+
+ return (
+
+
+
+
+
{left}
+
{props.action ?? null}
+
+
+
+ {props.title}
+
+ {props.description}
+
+
+ );
+ },
+ Content(props: { children: React.ReactNode }) {
+ return (
+
+ {props.children}
+
+
+ );
+ },
+};
diff --git a/src/components/popout/FloatingDragHandle.tsx b/src/components/popout/FloatingDragHandle.tsx
new file mode 100644
index 00000000..4b662e6e
--- /dev/null
+++ b/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 (
+
+ );
+}
+
+export function MobilePopoutSpacer() {
+ const { isMobile } = useIsMobile();
+
+ if (!isMobile) return null;
+
+ return ;
+}
diff --git a/src/components/popout/positions/FloatingCardMobilePosition.tsx b/src/components/popout/positions/FloatingCardMobilePosition.tsx
index ff0ee347..059f6667 100644
--- a/src/components/popout/positions/FloatingCardMobilePosition.tsx
+++ b/src/components/popout/positions/FloatingCardMobilePosition.tsx
@@ -84,9 +84,7 @@ export function FloatingCardMobilePosition(props: MobilePositionProps) {
}}
{...bind()}
>
-
{props.children}
-
);
diff --git a/src/video/components/popouts/SettingsPopout.tsx b/src/video/components/popouts/SettingsPopout.tsx
index 76b0afdc..1777b1e3 100644
--- a/src/video/components/popouts/SettingsPopout.tsx
+++ b/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 }) {
const isCollapsed = props.router.isLoaded("embed");
@@ -37,8 +38,8 @@ export function SettingsPopout() {
height={500}
width={320}
>
-
- {/* */}
+ {/* */}
+
diff --git a/src/views/developer/TestView.tsx b/src/views/developer/TestView.tsx
index c760e8d4..744d6bda 100644
--- a/src/views/developer/TestView.tsx
+++ b/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 (
-
+
setShow(false)}>
setShow(false)}>
-
- Hello world
-
+
+ setShow(false)}
+ close
+ action={Do something}
+ />
+
+ Hello world
+
+
-
-
-
+
+ navigate("/")}
+ action={Do something}
+ />
+
+ Hello world
+ navigate("/second")}>Click to go brrr
+
+
+
-
+