@streamplace/components 0.8.8 → 0.8.9

package/dist/components/mobile-player/ui/viewer-context-menu.js

@@ -25,7 +25,6 @@ function ContextMenu({ dropdownPortalContainer, }) {
     const setReportModalOpen = (0, player_store_1.usePlayerStore)((x) => x.setReportModalOpen);
     const setReportSubject = (0, player_store_1.usePlayerStore)((x) => x.setReportSubject);
     const { profile } = (0, __1.useLivestreamInfo)();
-    console.log("profile", profile);
     const avatars = (0, __1.useAvatars)(profile?.did ? [profile?.did] : []);
     const ls = (0, livestream_store_1.useLivestreamStore)((x) => x.livestream);
     const segment = (0, livestream_store_1.useLivestreamStore)((x) => x.segment);
@@ -41,10 +40,7 @@ function ContextMenu({ dropdownPortalContainer, }) {
     const isMobile = react_native_1.Platform.OS === "ios" || react_native_1.Platform.OS === "android";
     // dummy portal for mobile
     const Portal = isMobile ? react_native_1.View : ui_2.DropdownMenuPortal;
-    // render the responsive version on mobile as we can't fullscreen there
-    const DropdownMenuContent = isMobile
-        ? ui_2.ResponsiveDropdownMenuContent
-        : ui_2.DropdownMenuContentWithoutPortal;
+    const DropdownMenuContent = ui_2.ResponsiveDropdownMenuContent;
     return ((0, jsx_runtime_1.jsxs)(ui_2.DropdownMenu, { children: [(0, jsx_runtime_1.jsx)(ui_2.DropdownMenuTrigger, { children: (0, jsx_runtime_1.jsx)(lucide_react_native_1.Menu, { color: theme_1.colors.gray[200] }) }), (0, jsx_runtime_1.jsx)(Portal, { container: dropdownPortalContainer, children: (0, jsx_runtime_1.jsxs)(DropdownMenuContent, { side: "top", align: "end", children: [react_native_1.Platform.OS !== "web" && ((0, jsx_runtime_1.jsxs)(ui_2.DropdownMenuGroup, { title: "Streamer", children: [(0, jsx_runtime_1.jsxs)(react_native_1.View, { style: [
                                         __1.zero.layout.flex.row,
                                         __1.zero.layout.flex.center,
@@ -82,7 +78,12 @@ function ContextMenu({ dropdownPortalContainer, }) {
                                             const url = `https://bsky.app/profile/${profile.handle}`;
                                             react_native_1.Linking.openURL(url);
                                         }
-                                    }, children: (0, jsx_runtime_1.jsx)(ui_2.Text, { children: "View Profile on Bluesky" }) })] })), (0, jsx_runtime_1.jsx)(ui_2.DropdownMenuGroup, { title: "Resolution", children: (0, jsx_runtime_1.jsxs)(ui_2.DropdownMenuRadioGroup, { value: quality, onValueChange: setQuality, children: [(0, jsx_runtime_1.jsx)(ui_2.DropdownMenuRadioItem, { value: "source", children: (0, jsx_runtime_1.jsx)(ui_2.Text, { children: "Source (Original Quality)" }) }), qualities.map((r) => ((0, jsx_runtime_1.jsx)(ui_2.DropdownMenuRadioItem, { value: r.name, children: (0, jsx_runtime_1.jsx)(ui_2.Text, { children: r.name }) })))] }) }), (0, jsx_runtime_1.jsx)(ui_2.DropdownMenuGroup, { title: "Advanced", children: (0, jsx_runtime_1.jsx)(ui_2.DropdownMenuCheckboxItem, { checked: lowLatency, onCheckedChange: () => setLowLatency(!lowLatency), children: (0, jsx_runtime_1.jsx)(ui_2.Text, { children: "Low Latency" }) }) }), (0, jsx_runtime_1.jsx)(ui_2.DropdownMenuInfo, { description: "Reduces the delay between video and chat for a more real-time experience." }), (0, jsx_runtime_1.jsx)(ui_2.DropdownMenuGroup, { children: (0, jsx_runtime_1.jsx)(ui_2.DropdownMenuCheckboxItem, { checked: debugInfo, onCheckedChange: () => setShowDebugInfo(!debugInfo), children: (0, jsx_runtime_1.jsx)(ui_2.Text, { children: "Show Debug Info" }) }) }), (0, jsx_runtime_1.jsx)(ui_2.DropdownMenuGroup, { title: "Report", children: (0, jsx_runtime_1.jsx)(ReportButton, { livestream: livestream, setReportModalOpen: setReportModalOpen, setReportSubject: setReportSubject }) }), (0, jsx_runtime_1.jsxs)(react_native_1.View, { style: [ui_1.pt[3], ui_1.px[2], ui_1.gap.all[2]], children: [contentWarnings && contentWarnings.length > 0 && ((0, jsx_runtime_1.jsxs)(react_native_1.View, { style: [ui_1.gap.all[1]], children: [(0, jsx_runtime_1.jsx)(ui_2.Text, { size: "base", color: "muted", children: "Stream may contain" }), (0, jsx_runtime_1.jsx)(__1.ContentWarnings, { warnings: contentWarnings, compact: true })] })), contentRights && Object.keys(contentRights).length > 0 && ((0, jsx_runtime_1.jsx)(__1.ContentRights, { contentRights: contentRights, size: "xs", color: "muted" }))] })] }) })] }));
+                                    }, children: (0, jsx_runtime_1.jsx)(ui_2.Text, { children: "View Profile on Bluesky" }) })] })), (0, jsx_runtime_1.jsx)(ui_2.DropdownMenuGroup, { children: (0, jsx_runtime_1.jsxs)(ui_2.DropdownMenuSub, { children: [(0, jsx_runtime_1.jsx)(ui_2.DropdownMenuSubTrigger, { subMenuTitle: "Quality", children: (0, jsx_runtime_1.jsxs)(react_native_1.View, { style: [
+                                                __1.zero.flex.values[1],
+                                                __1.zero.layout.flex.row,
+                                                __1.zero.layout.flex.spaceBetween,
+                                                __1.zero.pr[4],
+                                            ], children: [(0, jsx_runtime_1.jsx)(ui_2.Text, { children: "Quality" }), (0, jsx_runtime_1.jsxs)(ui_2.Text, { muted: true, children: ["(", quality, ", ", lowLatency ? "low latency" : "regular latency", ")"] })] }) }), (0, jsx_runtime_1.jsxs)(ui_2.DropdownMenuSubContent, { children: [(0, jsx_runtime_1.jsx)(ui_2.DropdownMenuGroup, { title: "Resolution", children: (0, jsx_runtime_1.jsxs)(ui_2.DropdownMenuRadioGroup, { value: quality, onValueChange: setQuality, children: [(0, jsx_runtime_1.jsx)(ui_2.DropdownMenuRadioItem, { value: "source", children: (0, jsx_runtime_1.jsx)(ui_2.Text, { children: "Source (Original Quality)" }) }), qualities.map((r) => ((0, jsx_runtime_1.jsx)(ui_2.DropdownMenuRadioItem, { value: r.name, children: (0, jsx_runtime_1.jsx)(ui_2.Text, { children: r.name }) }, r.name)))] }) }), (0, jsx_runtime_1.jsx)(ui_2.DropdownMenuGroup, { children: (0, jsx_runtime_1.jsx)(ui_2.DropdownMenuCheckboxItem, { checked: lowLatency, onCheckedChange: () => setLowLatency(!lowLatency), children: (0, jsx_runtime_1.jsx)(ui_2.Text, { children: "Low Latency" }) }) }), (0, jsx_runtime_1.jsx)(ui_2.DropdownMenuInfo, { description: "Reduces the delay between video and chat for a more real-time experience." })] })] }) }), (0, jsx_runtime_1.jsx)(ui_2.DropdownMenuGroup, { title: "Advanced", children: (0, jsx_runtime_1.jsx)(ui_2.DropdownMenuCheckboxItem, { checked: debugInfo, onCheckedChange: () => setShowDebugInfo(!debugInfo), children: (0, jsx_runtime_1.jsx)(ui_2.Text, { children: "Show Debug Info" }) }) }), (0, jsx_runtime_1.jsx)(ui_2.DropdownMenuGroup, { title: "Report", children: (0, jsx_runtime_1.jsx)(ReportButton, { livestream: livestream, setReportModalOpen: setReportModalOpen, setReportSubject: setReportSubject }) }), (0, jsx_runtime_1.jsxs)(react_native_1.View, { style: [ui_1.pt[3], ui_1.px[2], ui_1.gap.all[2]], children: [contentWarnings && contentWarnings.length > 0 && ((0, jsx_runtime_1.jsxs)(react_native_1.View, { style: [ui_1.gap.all[1]], children: [(0, jsx_runtime_1.jsx)(ui_2.Text, { size: "base", color: "muted", children: "Stream may contain" }), (0, jsx_runtime_1.jsx)(__1.ContentWarnings, { warnings: contentWarnings, compact: true })] })), contentRights && Object.keys(contentRights).length > 0 && ((0, jsx_runtime_1.jsx)(__1.ContentRights, { contentRights: contentRights, size: "xs", color: "muted" }))] })] }) })] }));
 }
 function ReportButton({ livestream, setReportModalOpen, setReportSubject, }) {
     const { onOpenChange } = (0, dropdown_menu_1.useRootContext)();

package/dist/components/ui/dropdown.js

@@ -1,40 +1,218 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.DropdownMenuInfo = exports.DropdownMenuGroup = exports.DropdownMenuSeparator = exports.DropdownMenuLabel = exports.DropdownMenuRadioItem = exports.DropdownMenuCheckboxItem = exports.DropdownMenuItem = exports.ResponsiveDropdownMenuContent = exports.DropdownMenuContentWithoutPortal = exports.DropdownMenuContent = exports.DropdownMenuSubContent = exports.DropdownMenuSubTrigger = exports.DropdownMenuBottomSheet = exports.DropdownMenuRadioGroup = exports.DropdownMenuSub = exports.DropdownMenuPortal = exports.DropdownMenuTrigger = exports.DropdownMenu = void 0;
+exports.DropdownMenuInfo = exports.DropdownMenuGroup = exports.DropdownMenuSeparator = exports.DropdownMenuLabel = exports.DropdownMenuRadioItem = exports.DropdownMenuCheckboxItem = exports.DropdownMenuItem = exports.ResponsiveDropdownMenuContent = exports.DropdownMenuContentWithoutPortal = exports.DropdownMenuContent = exports.DropdownMenuSubContent = exports.DropdownMenuSubTrigger = exports.DropdownMenuBottomSheet = exports.DropdownMenuSub = exports.DropdownMenuRadioGroup = exports.DropdownMenuPortal = exports.DropdownMenuTrigger = exports.DropdownMenu = void 0;
 exports.DropdownMenuShortcut = DropdownMenuShortcut;
 const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
 const bottom_sheet_1 = tslib_1.__importStar(require("@gorhom/bottom-sheet"));
 const DropdownMenuPrimitive = tslib_1.__importStar(require("@rn-primitives/dropdown-menu"));
 const lucide_react_native_1 = require("lucide-react-native");
-const react_1 = require("react");
+const react_1 = tslib_1.__importStar(require("react"));
 const react_native_1 = require("react-native");
-const __1 = require("../..");
+const react_native_reanimated_1 = tslib_1.__importStar(require("react-native-reanimated"));
+const react_native_safe_area_context_1 = require("react-native-safe-area-context");
 const atoms_1 = require("../../lib/theme/atoms");
 const ui_1 = require("../../ui");
 const text_1 = require("./primitives/text");
 const text_2 = require("./text");
+const NavigationStackContext = (0, react_1.createContext)(null);
+const useNavigationStack = () => {
+    const context = (0, react_1.useContext)(NavigationStackContext);
+    return context;
+};
+const SubMenuContext = (0, react_1.createContext)(null);
 exports.DropdownMenu = DropdownMenuPrimitive.Root;
 exports.DropdownMenuTrigger = DropdownMenuPrimitive.Trigger;
 exports.DropdownMenuPortal = DropdownMenuPrimitive.Portal;
-exports.DropdownMenuSub = DropdownMenuPrimitive.Sub;
 exports.DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup;
+// Custom DropdownMenuSub that works with mobile navigation
+exports.DropdownMenuSub = (0, react_1.forwardRef)(({ children, ...props }, ref) => {
+    const navStack = useNavigationStack();
+    const [subMenuTitle, setSubMenuTitle] = (0, react_1.useState)();
+    const renderContentRef = (0, react_1.useRef)(null);
+    const [subMenuKey, setSubMenuKey] = (0, react_1.useState)(null);
+    // If we're in a mobile navigation stack, use custom context
+    if (navStack) {
+        const trigger = () => {
+            if (renderContentRef.current) {
+                const key = `submenu-${Date.now()}`;
+                setSubMenuKey(key);
+                navStack.push({
+                    key,
+                    title: subMenuTitle,
+                    // Store a function that always reads the latest content from the ref
+                    content: (props) => {
+                        const renderFn = renderContentRef.current;
+                        return renderFn ? renderFn() : null;
+                    },
+                });
+            }
+        };
+        const setRenderContent = (renderer) => {
+            renderContentRef.current = renderer;
+        };
+        const contextValue = react_1.default.useMemo(() => ({
+            renderContent: () => renderContentRef.current?.(),
+            setRenderContent,
+            title: subMenuTitle,
+            setTitle: setSubMenuTitle,
+            trigger,
+            key: subMenuKey,
+        }), [subMenuTitle, subMenuKey]);
+        return ((0, jsx_runtime_1.jsx)(SubMenuContext.Provider, { value: contextValue, children: children }));
+    }
+    // Web - use primitive
+    return ((0, jsx_runtime_1.jsx)(DropdownMenuPrimitive.Sub, { ref: ref, ...props, children: children }));
+});
 exports.DropdownMenuBottomSheet = (0, react_1.forwardRef)(function DropdownMenuBottomSheet({ overlayStyle, portalHost, children, ...rest }, _ref) {
     // Use the primitives' context to know if open
-    const { open, onOpenChange } = DropdownMenuPrimitive.useRootContext();
-    const { zero: zt } = (0, ui_1.useTheme)();
+    const { onOpenChange } = DropdownMenuPrimitive.useRootContext();
+    const { zero: zt, theme } = (0, ui_1.useTheme)();
     const sheetRef = (0, react_1.useRef)(null);
-    return ((0, jsx_runtime_1.jsx)(DropdownMenuPrimitive.Portal, { hostName: portalHost, children: (0, jsx_runtime_1.jsx)(bottom_sheet_1.default, { ref: sheetRef, enablePanDownToClose: true, enableDynamicSizing: true, enableContentPanningGesture: false, backdropComponent: ({ style }) => ((0, jsx_runtime_1.jsx)(react_native_1.Pressable, { style: [style, react_native_1.StyleSheet.absoluteFill], onPress: () => onOpenChange?.(false) })), onClose: () => onOpenChange?.(false), style: [overlayStyle, react_native_1.StyleSheet.flatten(rest.style)], backgroundStyle: [zt.bg.popover, atoms_1.a.radius.all.md, atoms_1.a.shadows.md, atoms_1.p[1]], handleIndicatorStyle: [
-                atoms_1.a.sizes.width[12],
-                atoms_1.a.sizes.height[1],
-                zt.bg.mutedForeground,
-            ], children: (0, jsx_runtime_1.jsx)(bottom_sheet_1.BottomSheetView, { style: [atoms_1.px[4]], children: typeof children === "function"
-                    ? children({ pressed: true })
-                    : children }) }) }));
+    const { width } = (0, react_native_1.useWindowDimensions)();
+    const isWide = react_native_1.Platform.OS !== "web" && width >= 800;
+    const sheetWidth = isWide ? 450 : width;
+    const horizontalMargin = isWide ? (width - sheetWidth) / 2 : 0;
+    const insets = (0, react_native_safe_area_context_1.useSafeAreaInsets)();
+    // Navigation stack state
+    const [stack, setStack] = (0, react_1.useState)([
+        { key: "root", content: children },
+    ]);
+    // Update root content when children changes
+    react_1.default.useEffect(() => {
+        setStack((prev) => {
+            if (!Array.isArray(prev) || prev.length === 0) {
+                return [{ key: "root", content: children }];
+            }
+            // Update the root item content
+            const newStack = [...prev];
+            newStack[0] = { ...newStack[0], content: children };
+            return newStack;
+        });
+    }, [children]);
+    const slideAnim = (0, react_native_reanimated_1.useSharedValue)(0);
+    const fadeAnim = (0, react_native_reanimated_1.useSharedValue)(1);
+    const push = (item) => {
+        // First, update the stack
+        setStack((prev) => {
+            if (!Array.isArray(prev))
+                return [{ key: "root", content: children }, item];
+            return [...prev, item];
+        });
+        // Then animate from right to center with fade
+        slideAnim.value = 40;
+        fadeAnim.value = 0;
+        slideAnim.value = (0, react_native_reanimated_1.withTiming)(0, { duration: 350 });
+        fadeAnim.value = (0, react_native_reanimated_1.withTiming)(1, { duration: 350 });
+    };
+    const popStack = () => {
+        (0, react_1.startTransition)(() => {
+            setStack((prev) => {
+                if (!Array.isArray(prev) || prev.length <= 1) {
+                    return [{ key: "root", content: children }];
+                }
+                return prev.slice(0, -1);
+            });
+        });
+    };
+    const resetAnimationValues = () => {
+        setTimeout(() => {
+            slideAnim.value = 0;
+            fadeAnim.value = 1;
+        }, 5);
+    };
+    const pop = () => {
+        if (stack.length <= 1)
+            return;
+        // Animate out to the right with fade
+        slideAnim.value = (0, react_native_reanimated_1.withTiming)(40, { duration: 150 });
+        fadeAnim.value = (0, react_native_reanimated_1.withTiming)(0, { duration: 150 }, (finished) => {
+            if (finished) {
+                // Update stack first with startTransition for smoother render
+                (0, react_native_reanimated_1.runOnJS)(popStack)();
+                // Then reset animation position after a brief delay to ensure component has unmounted
+                (0, react_native_reanimated_1.runOnJS)(resetAnimationValues)();
+            }
+        });
+    };
+    const animatedStyle = (0, react_native_reanimated_1.useAnimatedStyle)(() => ({
+        transform: [{ translateX: slideAnim.value }],
+        opacity: fadeAnim.value,
+    }));
+    const headerAnimatedStyle = (0, react_native_reanimated_1.useAnimatedStyle)(() => ({
+        opacity: fadeAnim.value,
+    }));
+    const currentLevel = stack[stack.length - 1];
+    const isNested = stack.length > 1;
+    const onBackgroundTap = () => {
+        if (sheetRef.current)
+            sheetRef.current?.close();
+        setTimeout(() => {
+            onOpenChange?.(false);
+        }, 300);
+    };
+    // Safety check - if no current level, don't render
+    if (!currentLevel) {
+        return null;
+    }
+    return ((0, jsx_runtime_1.jsx)(DropdownMenuPrimitive.Portal, { hostName: portalHost, children: (0, jsx_runtime_1.jsx)(NavigationStackContext.Provider, { value: { stack, push, pop, isNested }, children: (0, jsx_runtime_1.jsxs)(bottom_sheet_1.default, { ref: sheetRef, enablePanDownToClose: true, enableDynamicSizing: true, detached: isWide, bottomInset: isWide ? 0 : 0, backdropComponent: ({ style }) => ((0, jsx_runtime_1.jsx)(react_native_1.Pressable, { style: [style, react_native_1.StyleSheet.absoluteFill], onPress: () => onBackgroundTap() })), onClose: () => onOpenChange?.(false), style: [
+                    overlayStyle,
+                    react_native_1.StyleSheet.flatten(rest.style),
+                    isWide && { marginHorizontal: horizontalMargin },
+                ], backgroundStyle: [zt.bg.popover, atoms_1.a.radius.all.md, atoms_1.a.shadows.md, atoms_1.p[1]], handleIndicatorStyle: [
+                    atoms_1.a.sizes.width[12],
+                    atoms_1.a.sizes.height[1],
+                    zt.bg.mutedForeground,
+                ], children: [isNested && ((0, jsx_runtime_1.jsx)(react_native_reanimated_1.default.View, { style: [
+                            headerAnimatedStyle,
+                            atoms_1.a.layout.flex.row,
+                            atoms_1.a.layout.flex.alignCenter,
+                            atoms_1.px[4],
+                            atoms_1.pb[2],
+                            {
+                                borderBottomWidth: 1,
+                                borderBottomColor: theme.colors.border,
+                            },
+                        ], children: (0, jsx_runtime_1.jsxs)(react_native_1.Pressable, { onPress: pop, style: [
+                                atoms_1.a.layout.flex.row,
+                                atoms_1.a.layout.flex.alignCenter,
+                                atoms_1.gap.all[2],
+                            ], hitSlop: 80, children: [(0, jsx_runtime_1.jsx)(lucide_react_native_1.ChevronLeft, { size: 20, color: theme.colors.foreground }), currentLevel?.title ? ((0, jsx_runtime_1.jsx)(text_2.Text, { size: "lg", children: currentLevel.title })) : null] }) })), (0, jsx_runtime_1.jsx)(react_native_reanimated_1.default.View, { style: animatedStyle, children: (0, jsx_runtime_1.jsx)(bottom_sheet_1.BottomSheetScrollView, { style: [atoms_1.px[4]], contentContainerStyle: {
+                                paddingBottom: insets.bottom + 50,
+                                overflow: "hidden",
+                            }, children: stack.map((level, index) => {
+                                const isCurrent = index === stack.length - 1;
+                                return ((0, jsx_runtime_1.jsx)(react_native_1.View, { style: [{ display: isCurrent ? "flex" : "none" }], children: typeof level.content === "function"
+                                        ? level.content({ pressed: true })
+                                        : level.content }, level.key));
+                            }) }) })] }) }) }));
 });
-exports.DropdownMenuSubTrigger = (0, react_1.forwardRef)(({ inset, children, ...props }, ref) => {
+exports.DropdownMenuSubTrigger = (0, react_1.forwardRef)(({ inset, children, subMenuTitle, ...props }, ref) => {
+    const navStack = useNavigationStack();
+    const subMenuContext = (0, react_1.useContext)(SubMenuContext);
+    const { icons, theme } = (0, ui_1.useTheme)();
+    // Set the title in the submenu context if provided
+    react_1.default.useEffect(() => {
+        if (subMenuContext && subMenuTitle) {
+            subMenuContext.setTitle(subMenuTitle);
+        }
+    }, [subMenuContext, subMenuTitle]);
+    // If we're in a navigation stack (mobile bottom sheet), handle differently
+    if (navStack && subMenuContext) {
+        return ((0, jsx_runtime_1.jsx)(react_native_1.Pressable, { onPress: () => {
+                subMenuContext.trigger();
+            }, ...props, children: (0, jsx_runtime_1.jsxs)(react_native_1.View, { style: [
+                    inset && atoms_1.gap[2],
+                    atoms_1.layout.flex.row,
+                    atoms_1.layout.flex.alignCenter,
+                    atoms_1.a.radius.all.sm,
+                    atoms_1.py[1],
+                    atoms_1.pl[2],
+                    atoms_1.pr[2],
+                ], children: [typeof children === "function" ? (children({ pressed: true })) : typeof children === "string" ? ((0, jsx_runtime_1.jsx)(text_2.Text, { children: children })) : (children), (0, jsx_runtime_1.jsx)(react_native_1.View, { style: [atoms_1.a.layout.position.absolute, atoms_1.a.position.right[1]], children: (0, jsx_runtime_1.jsx)(lucide_react_native_1.ChevronRight, { size: 18, color: icons.color.muted }) })] }) }));
+    }
+    // Web behavior - use primitive
     const { open } = DropdownMenuPrimitive.useSubContext();
-    const { icons } = (0, ui_1.useTheme)();
     const Icon = react_native_1.Platform.OS === "web" ? lucide_react_native_1.ChevronRight : open ? lucide_react_native_1.ChevronUp : lucide_react_native_1.ChevronDown;
     return ((0, jsx_runtime_1.jsx)(text_1.TextContext.Provider, { value: (0, text_1.objectFromObjects)([
             atoms_1.a.textColors.primary[500],
@@ -48,8 +226,35 @@ exports.DropdownMenuSubTrigger = (0, react_1.forwardRef)(({ inset, children, ...
                     atoms_1.pr[8],
                 ], children: [children, (0, jsx_runtime_1.jsx)(react_native_1.View, { style: [atoms_1.a.layout.position.absolute, atoms_1.a.position.right[1]], children: (0, jsx_runtime_1.jsx)(Icon, { size: 18, color: icons.color.muted }) })] }) }) }));
 });
-exports.DropdownMenuSubContent = (0, react_1.forwardRef)((props, ref) => {
+exports.DropdownMenuSubContent = (0, react_1.forwardRef)(({ children, ...props }, ref) => {
     const { zero: zt } = (0, ui_1.useTheme)();
+    const subMenuContext = (0, react_1.useContext)(SubMenuContext);
+    const navStack = useNavigationStack();
+    const prevChildrenRef = (0, react_1.useRef)(null);
+    // Register a render function that will be called fresh each time
+    react_1.default.useEffect(() => {
+        if (subMenuContext && navStack) {
+            // Only update if children reference actually changed
+            if (prevChildrenRef.current === children) {
+                return;
+            }
+            prevChildrenRef.current = children;
+            // Pass a function that returns the current children
+            subMenuContext.setRenderContent(() => children);
+            // Force a stack update to trigger rerender with the actual children
+            if (subMenuContext.key) {
+                // Store the children directly so React can handle updates
+                //navStack.updateContent(subMenuContext.key, children);
+            }
+        }
+    }, [children, subMenuContext, navStack]);
+    // On mobile, don't render the subcontent here - it'll be rendered in the nav stack
+    // But keep the component mounted so effects run when children change
+    if (navStack && subMenuContext) {
+        // Component stays mounted to track prop changes, but renders nothing
+        return null;
+    }
+    // Web - use primitive
     return ((0, jsx_runtime_1.jsx)(DropdownMenuPrimitive.SubContent, { ref: ref, style: [
             atoms_1.a.zIndex[50],
             atoms_1.a.sizes.minWidth[32],
@@ -61,10 +266,12 @@ exports.DropdownMenuSubContent = (0, react_1.forwardRef)((props, ref) => {
             zt.bg.popover,
             atoms_1.p[1],
             atoms_1.a.shadows.md,
-        ], ...props }));
+        ], ...props, children: children }));
 });
 exports.DropdownMenuContent = (0, react_1.forwardRef)(({ overlayStyle, portalHost, style, children, ...props }, ref) => {
     const { zero: zt } = (0, ui_1.useTheme)();
+    const { height } = (0, react_native_1.useWindowDimensions)();
+    const maxHeight = height * 0.8;
     return ((0, jsx_runtime_1.jsx)(DropdownMenuPrimitive.Portal, { hostName: portalHost, children: (0, jsx_runtime_1.jsx)(DropdownMenuPrimitive.Overlay, { style: [
                 react_native_1.Platform.OS !== "web" ? react_native_1.StyleSheet.absoluteFill : undefined,
                 overlayStyle,
@@ -80,7 +287,7 @@ exports.DropdownMenuContent = (0, react_1.forwardRef)(({ overlayStyle, portalHos
                     atoms_1.p[2],
                     atoms_1.a.shadows.md,
                     style,
-                ], ...props, children: (0, jsx_runtime_1.jsx)(react_native_1.ScrollView, { showsVerticalScrollIndicator: true, children: typeof children === "function"
+                ], ...props, children: (0, jsx_runtime_1.jsx)(react_native_1.ScrollView, { style: { maxHeight }, showsVerticalScrollIndicator: true, children: typeof children === "function"
                         ? children({ pressed: false })
                         : children }) }) }) }));
 });
@@ -111,9 +318,9 @@ exports.DropdownMenuContentWithoutPortal = (0, react_1.forwardRef)(({ overlaySty
 exports.ResponsiveDropdownMenuContent = (0, react_1.forwardRef)(({ children, ...props }, ref) => {
     const { width } = (0, react_native_1.useWindowDimensions)();
     // On web, you might want to always use the normal dropdown
-    const isBottomSheet = react_native_1.Platform.OS !== "web" && width < 800;
+    const isBottomSheet = react_native_1.Platform.OS !== "web";
     if (isBottomSheet) {
-        return ((0, jsx_runtime_1.jsx)(exports.DropdownMenuBottomSheet, { ref: ref, ...props, children: (0, jsx_runtime_1.jsx)(react_native_1.ScrollView, { style: [__1.zero.pb[12]], children: children }) }));
+        return ((0, jsx_runtime_1.jsx)(exports.DropdownMenuBottomSheet, { ref: ref, ...props, children: children }));
     }
     return ((0, jsx_runtime_1.jsx)(exports.DropdownMenuContent, { ref: ref, ...props, children: children }));
 });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@streamplace/components",
-  "version": "0.8.8",
+  "version": "0.8.9",
   "description": "Streamplace React (Native) Components",
   "main": "dist/index.js",
   "types": "src/index.tsx",
@@ -56,5 +56,5 @@
     "start": "tsc --watch --preserveWatchOutput",
     "prepare": "tsc"
   },
-  "gitHead": "87db57ebb4908da9997777417493d55e64d08c6d"
+  "gitHead": "2ac59bf91315b2b1f848842c1048a23bd74658b7"
 }

package/src/components/mobile-player/ui/viewer-context-menu.tsx

@@ -16,7 +16,6 @@ import { gap, pt, px } from "../../../ui";
 import {
   DropdownMenu,
   DropdownMenuCheckboxItem,
-  DropdownMenuContentWithoutPortal,
   DropdownMenuGroup,
   DropdownMenuInfo,
   DropdownMenuItem,
@@ -24,6 +23,9 @@ import {
   DropdownMenuRadioGroup,
   DropdownMenuRadioItem,
   DropdownMenuSeparator,
+  DropdownMenuSub,
+  DropdownMenuSubContent,
+  DropdownMenuSubTrigger,
   DropdownMenuTrigger,
   ResponsiveDropdownMenuContent,
   Text,
@@ -50,7 +52,6 @@ export function ContextMenu({
 
   const { profile } = useLivestreamInfo();
 
-  console.log("profile", profile);
   const avatars = useAvatars(profile?.did ? [profile?.did] : []);
   const ls = useLivestreamStore((x) => x.livestream);
   const segment = useLivestreamStore((x) => x.segment);
@@ -72,10 +73,7 @@ export function ContextMenu({
   // dummy portal for mobile
   const Portal = isMobile ? View : DropdownMenuPortal;
 
-  // render the responsive version on mobile as we can't fullscreen there
-  const DropdownMenuContent = isMobile
-    ? ResponsiveDropdownMenuContent
-    : DropdownMenuContentWithoutPortal;
+  const DropdownMenuContent = ResponsiveDropdownMenuContent;
 
   return (
     <DropdownMenu>
@@ -175,28 +173,53 @@ export function ContextMenu({
             </DropdownMenuGroup>
           )}
 
-          <DropdownMenuGroup title="Resolution">
-            <DropdownMenuRadioGroup value={quality} onValueChange={setQuality}>
-              <DropdownMenuRadioItem value="source">
-                <Text>Source (Original Quality)</Text>
-              </DropdownMenuRadioItem>
-              {qualities.map((r) => (
-                <DropdownMenuRadioItem value={r.name}>
-                  <Text>{r.name}</Text>
-                </DropdownMenuRadioItem>
-              ))}
-            </DropdownMenuRadioGroup>
+          <DropdownMenuGroup>
+            <DropdownMenuSub>
+              <DropdownMenuSubTrigger subMenuTitle="Quality">
+                <View
+                  style={[
+                    zero.flex.values[1],
+                    zero.layout.flex.row,
+                    zero.layout.flex.spaceBetween,
+                    zero.pr[4],
+                  ]}
+                >
+                  <Text>Quality</Text>
+                  <Text muted>
+                    ({quality}, {lowLatency ? "low latency" : "regular latency"}
+                    )
+                  </Text>
+                </View>
+              </DropdownMenuSubTrigger>
+              <DropdownMenuSubContent>
+                <DropdownMenuGroup title="Resolution">
+                  <DropdownMenuRadioGroup
+                    value={quality}
+                    onValueChange={setQuality}
+                  >
+                    <DropdownMenuRadioItem value="source">
+                      <Text>Source (Original Quality)</Text>
+                    </DropdownMenuRadioItem>
+                    {qualities.map((r) => (
+                      <DropdownMenuRadioItem key={r.name} value={r.name}>
+                        <Text>{r.name}</Text>
+                      </DropdownMenuRadioItem>
+                    ))}
+                  </DropdownMenuRadioGroup>
+                </DropdownMenuGroup>
+                <DropdownMenuGroup>
+                  <DropdownMenuCheckboxItem
+                    checked={lowLatency}
+                    onCheckedChange={() => setLowLatency(!lowLatency)}
+                  >
+                    <Text>Low Latency</Text>
+                  </DropdownMenuCheckboxItem>
+                </DropdownMenuGroup>
+                <DropdownMenuInfo description="Reduces the delay between video and chat for a more real-time experience." />
+              </DropdownMenuSubContent>
+            </DropdownMenuSub>
           </DropdownMenuGroup>
           <DropdownMenuGroup title="Advanced">
-            <DropdownMenuCheckboxItem
-              checked={lowLatency}
-              onCheckedChange={() => setLowLatency(!lowLatency)}
-            >
-              <Text>Low Latency</Text>
-            </DropdownMenuCheckboxItem>
-          </DropdownMenuGroup>
-          <DropdownMenuInfo description="Reduces the delay between video and chat for a more real-time experience." />
-          <DropdownMenuGroup>
             <DropdownMenuCheckboxItem
               checked={debugInfo}
               onCheckedChange={() => setShowDebugInfo(!debugInfo)}