add a portal host inside video, and hook it up to the dropdown

js/app/components/mobile/desktop-ui.tsx

···
 import {
   PlayerUI,
+  PortalHost,
   Toast,
   useLivestreamInfo,
   useOffline,
···
   const [pipActive, setPipActive] = useState(false);
   const fadeOpacity = useSharedValue(1);
   const fadeTimeout = useRef<NodeJS.Timeout | null>(null);
-  const FADE_OUT_DELAY = 500;
+  const FADE_OUT_DELAY = 2500;
 
   const isSelfAndNotLive = ingest === "new";
   const isActivelyLive = ingest !== null && ingest !== "new";
···
 
   const hover = Gesture.Hover().onChange((_) => runOnJS(onPlayerHover)());
 
+  const portalContainerID = "epicportal123";
+
   return (
-    <GestureDetector gesture={hover}>
-      <View
-        style={[layout.position.absolute, h.percent[100], w.percent[100]]}
-        collapsable={false}
-      >
-        <MuteOverlay />
-        <PlayerUI.AutoplayButton />
-        <PlayerUI.ViewerLoadingOverlay />
-        <Animated.View
-          style={[
-            layout.position.absolute,
-            w.percent[100],
-            {
-              top: safeAreaInsets.top,
-              paddingHorizontal: 16,
-              paddingVertical: 16,
-            },
-            animatedFadeStyle,
-          ]}
+    <>
+      <GestureDetector gesture={hover}>
+        <View
+          style={[layout.position.absolute, h.percent[100], w.percent[100]]}
+          collapsable={false}
         >
-          <TopControlBar
-            offline={offline}
-            isActivelyLive={isActivelyLive}
-            ingest={ingest}
-            isChatOpen={isChatOpen || false}
-            onToggleChat={toggleChat}
-            embedded={embedded}
-          />
-        </Animated.View>
-
-        {isActivelyLive && isControlsVisible && (
-          <View
+          <MuteOverlay />
+          <PlayerUI.AutoplayButton />
+          <PlayerUI.ViewerLoadingOverlay />
+          <Animated.View
             style={[
               layout.position.absolute,
+              w.percent[100],
               {
-                transform: [{ translateX: -100 }, { translateY: -25 }],
+                top: safeAreaInsets.top,
+                paddingHorizontal: 16,
+                paddingVertical: 16,
               },
+              animatedFadeStyle,
             ]}
           >
-            <Animated.View
+            <TopControlBar
+              offline={offline}
+              isActivelyLive={isActivelyLive}
+              ingest={ingest}
+              isChatOpen={isChatOpen || false}
+              onToggleChat={toggleChat}
+              embedded={embedded}
+            />
+          </Animated.View>
+
+          {isActivelyLive && isControlsVisible && (
+            <View
               style={[
+                layout.position.absolute,
                 {
-                  padding: 12,
-                  backgroundColor: "rgba(0, 0, 0, 0.5)",
+                  transform: [{ translateX: -100 }, { translateY: -25 }],
                 },
-                r[3],
-                animatedFadeStyle,
               ]}
             >
-              <PlayerUI.MetricsPanel showMetrics={isActivelyLive} />
-            </Animated.View>
-          </View>
-        )}
-
-        <Animated.View
-          style={[
-            layout.position.absolute,
-            position.bottom[0],
-            w.percent[100],
-            {
-              backgroundColor: "rgba(0, 0, 0, 0.6)",
-              paddingHorizontal: 16,
-              paddingVertical: 2,
-              paddingBottom: 2,
-            },
-            animatedFadeStyle,
-          ]}
-        >
-          <BottomControlBar
-            ingest={ingest}
-            pipSupported={pipSupported}
-            pipActive={pipActive}
-            onHandlePip={handlePip}
-            dropdownPortalContainer={dropdownPortalContainer}
-            showChat={isChatOpen || false}
-            setShowChat={setIsChatOpen || undefined}
-          />
-        </Animated.View>
-
-        {isSelfAndNotLive && (
-          <PlayerUI.InputPanel
-            title={title}
-            setTitle={setTitle}
-            ingestStarting={ingestStarting}
-            toggleGoLive={toggleGoLive}
-          />
-        )}
-
-        <PlayerUI.CountdownOverlay
-          visible={showCountdown}
-          width={width}
-          height={height}
-          onDone={() => {
-            setShowCountdown(false);
-          }}
-        />
+              <Animated.View
+                style={[
+                  {
+                    padding: 12,
+                    backgroundColor: "rgba(0, 0, 0, 0.5)",
+                  },
+                  r[3],
+                  animatedFadeStyle,
+                ]}
+              >
+                <PlayerUI.MetricsPanel showMetrics={isActivelyLive} />
+              </Animated.View>
+            </View>
+          )}
 
-        <Toast
-          open={recordSubmitted}
-          onOpenChange={setRecordSubmitted}
-          title="You're live!"
-          description="We're notifying your followers that you just went live."
-          duration={5}
-        />
-        {showMetrics && (
-          <View
+          <Animated.View
             style={[
               layout.position.absolute,
-              position.top[20],
-              position.left[4],
-              px[4],
-              py[2],
+              position.bottom[0],
+              w.percent[100],
               {
-                backgroundColor: "rgba(0, 0, 0, 0.7)",
-                borderRadius: 8,
-                borderWidth: 1,
-                borderColor: "#374151",
+                backgroundColor: "rgba(0, 0, 0, 0.6)",
+                paddingHorizontal: 16,
+                paddingVertical: 2,
+                paddingBottom: 2,
               },
+              animatedFadeStyle,
             ]}
           >
-            <PlayerUI.MetricsPanel showMetrics={showMetrics} />
-          </View>
-        )}
-      </View>
-    </GestureDetector>
+            <BottomControlBar
+              ingest={ingest}
+              pipSupported={pipSupported}
+              pipActive={pipActive}
+              onHandlePip={handlePip}
+              dropdownPortalContainer={portalContainerID}
+              showChat={isChatOpen || false}
+              setShowChat={setIsChatOpen || undefined}
+            />
+          </Animated.View>
+
+          {isSelfAndNotLive && (
+            <PlayerUI.InputPanel
+              title={title}
+              setTitle={setTitle}
+              ingestStarting={ingestStarting}
+              toggleGoLive={toggleGoLive}
+            />
+          )}
+
+          <PlayerUI.CountdownOverlay
+            visible={showCountdown}
+            width={width}
+            height={height}
+            onDone={() => {
+              setShowCountdown(false);
+            }}
+          />
+
+          <Toast
+            open={recordSubmitted}
+            onOpenChange={setRecordSubmitted}
+            title="You're live!"
+            description="We're notifying your followers that you just went live."
+            duration={5}
+          />
+          {showMetrics && (
+            <View
+              style={[
+                layout.position.absolute,
+                position.top[20],
+                position.left[4],
+                px[4],
+                py[2],
+                {
+                  backgroundColor: "rgba(0, 0, 0, 0.7)",
+                  borderRadius: 8,
+                  borderWidth: 1,
+                  borderColor: "#374151",
+                },
+              ]}
+            >
+              <PlayerUI.MetricsPanel showMetrics={showMetrics} />
+            </View>
+          )}
+        </View>
+      </GestureDetector>
+      <PortalHost name="fullscreenepic" />
+    </>
   );
 }

js/app/components/mobile/desktop-ui/bottom-controls.tsx

···
             />
           </Pressable>
         )}
+        {ingest === null && (
+          <PlayerUI.ContextMenu
+            dropdownPortalContainer={dropdownPortalContainer}
+          />
+        )}
         {Platform.OS === "web" && (
           <Pressable
             onPress={() => {
···
               <Fullscreen color={theme.colors.text} />
             )}
           </Pressable>
-        )}
-        {ingest === null && (
-          <PlayerUI.ContextMenu
-            dropdownPortalContainer={dropdownPortalContainer}
-          />
         )}
         {/* if not web, then add the collapse chat controls here */}
         {Platform.OS !== "web" && setShowChat && (

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

···
 import { useRootContext } from "@rn-primitives/dropdown-menu";
-import { Menu } from "lucide-react-native";
+import { Cog } from "lucide-react-native";
+import { useState } from "react";
 import { Image, Linking, Platform, Pressable, View } from "react-native";
+import Animated, {
+  Easing,
+  useAnimatedStyle,
+  withTiming,
+} from "react-native-reanimated";
 import {
   ContentRights,
   ContentWarnings,
···
   useLivestreamInfo,
   zero,
 } from "../../..";
-import { colors } from "../../../lib/theme";
 import { useLivestreamStore } from "../../../livestream-store";
 import { PlayerProtocol, usePlayerStore } from "../../../player-store/";
 import { useGraphManager } from "../../../streamplace-store/graph";
-import { gap, pt, px } from "../../../ui";
+import { gap, p, pt, px } from "../../../ui";
 import {
   DropdownMenu,
   DropdownMenuCheckboxItem,
   DropdownMenuGroup,
   DropdownMenuInfo,
   DropdownMenuItem,
-  DropdownMenuPortal,
   DropdownMenuRadioGroup,
   DropdownMenuRadioItem,
   DropdownMenuSeparator,
···
   DropdownMenuTrigger,
   ResponsiveDropdownMenuContent,
   Text,
+  useTheme,
 } from "../../ui";
 
 export function ContextMenu({
···
 }: {
   dropdownPortalContainer?: any;
 }) {
+  const th = useTheme();
   const quality = usePlayerStore((x) => x.selectedRendition);
   const setQuality = usePlayerStore((x) => x.setSelectedRendition);
   const qualities = useLivestreamStore((x) => x.renditions);
···
   const ls = useLivestreamStore((x) => x.livestream);
   const segment = useLivestreamStore((x) => x.segment);
 
+  const [isOpen, setIsOpen] = useState(false);
+
   // Get content rights from the latest segment
   const contentRights = segment?.contentRights;
   const contentWarnings = segment?.contentWarnings?.warnings || [];
···
   const isMobile = Platform.OS === "ios" || Platform.OS === "android";
 
   // dummy portal for mobile
-  const Portal = isMobile ? View : DropdownMenuPortal;
+  //const Portal: typeof DropdownMenuPortal = DropdownMenu;
 
   const DropdownMenuContent = ResponsiveDropdownMenuContent;
 
+  const iconRotate = useAnimatedStyle(() => {
+    return {
+      transform: [
+        {
+          rotateZ: withTiming(isOpen ? "240deg" : "0deg", {
+            duration: 650,
+            easing: Easing.out(Easing.ease),
+          }),
+        },
+      ],
+    };
+  });
+
   return (
-    <DropdownMenu>
+    <DropdownMenu onOpenChange={setIsOpen}>
       <DropdownMenuTrigger>
-        <Menu color={colors.gray[200]} />
+        <Animated.View style={[p[2], iconRotate]}>
+          <Cog color={th.theme.colors.foreground} />
+        </Animated.View>
       </DropdownMenuTrigger>
-      <Portal container={dropdownPortalContainer}>
-        <DropdownMenuContent side="top" align="end">
-          {Platform.OS !== "web" && (
-            <DropdownMenuGroup title="Streamer">
-              <View
-                style={[
-                  zero.layout.flex.row,
-                  zero.layout.flex.center,
-                  zero.gap.all[3],
-                  { flex: 1, minWidth: 0 },
-                ]}
-              >
-                {profile?.did && avatars[profile?.did]?.avatar && (
-                  <Image
-                    key="avatar"
-                    source={{
-                      uri: avatars[profile?.did]?.avatar,
+      <DropdownMenuContent side="top" align="end" portalHost="fullscreenepic">
+        {Platform.OS !== "web" && (
+          <DropdownMenuGroup title="Streamer">
+            <View
+              style={[
+                zero.layout.flex.row,
+                zero.layout.flex.center,
+                zero.gap.all[3],
+                { flex: 1, minWidth: 0 },
+              ]}
+            >
+              {profile?.did && avatars[profile?.did]?.avatar && (
+                <Image
+                  key="avatar"
+                  source={{
+                    uri: avatars[profile?.did]?.avatar,
+                  }}
+                  style={{ width: 42, height: 42, borderRadius: 999 }}
+                  resizeMode="cover"
+                />
+              )}
+              <View style={{ flex: 1, minWidth: 0 }}>
+                <View
+                  style={[
+                    zero.layout.flex.row,
+                    zero.layout.flex.alignCenter,
+                    zero.gap.all[2],
+                  ]}
+                >
+                  <Pressable
+                    onPress={() => {
+                      if (profile?.handle) {
+                        const url = `https://bsky.app/profile/${formatHandle(profile)}`;
+                        Linking.openURL(url);
+                      }
                     }}
-                    style={{ width: 42, height: 42, borderRadius: 999 }}
-                    resizeMode="cover"
-                  />
-                )}
-                <View style={{ flex: 1, minWidth: 0 }}>
-                  <View
-                    style={[
-                      zero.layout.flex.row,
-                      zero.layout.flex.alignCenter,
-                      zero.gap.all[2],
-                    ]}
                   >
-                    <Pressable
-                      onPress={() => {
-                        if (profile?.handle) {
-                          const url = `https://bsky.app/profile/${formatHandle(profile)}`;
-                          Linking.openURL(url);
-                        }
-                      }}
-                    >
-                      <Text>{profile && formatHandleWithAt(profile)}</Text>
-                    </Pressable>
-                    {/*{did && profile && (
+                    <Text>{profile && formatHandleWithAt(profile)}</Text>
+                  </Pressable>
+                  {/*{did && profile && (
                     <FollowButton streamerDID={profile?.did} currentUserDID={did} />
                   )}*/}
-                  </View>
-                  <Text
-                    color="muted"
-                    size="sm"
-                    numberOfLines={2}
-                    ellipsizeMode="tail"
-                  >
-                    {ls?.record.title || "Stream Title"}
-                  </Text>
                 </View>
-              </View>
-              <DropdownMenuSeparator />
-              <DropdownMenuItem
-                disabled={graphManager.isLoading || !profile?.did}
-                onPress={async () => {
-                  try {
-                    if (graphManager.isFollowing) {
-                      await graphManager.unfollow();
-                    } else {
-                      await graphManager.follow();
-                    }
-                  } catch (err) {
-                    console.error("Follow/unfollow error:", err);
-                  }
-                }}
-              >
                 <Text
-                  color={graphManager.isFollowing ? "destructive" : "default"}
+                  color="muted"
+                  size="sm"
+                  numberOfLines={2}
+                  ellipsizeMode="tail"
                 >
-                  {graphManager.isLoading
-                    ? "Loading..."
-                    : graphManager.isFollowing
-                      ? "Unfollow"
-                      : "Follow"}
+                  {ls?.record.title || "Stream Title"}
                 </Text>
-              </DropdownMenuItem>
-              <DropdownMenuSeparator />
-              <DropdownMenuItem
-                onPress={() => {
-                  if (profile?.handle) {
-                    const url = `https://bsky.app/profile/${formatHandle(profile)}`;
-                    Linking.openURL(url);
+              </View>
+            </View>
+            <DropdownMenuSeparator />
+            <DropdownMenuItem
+              disabled={graphManager.isLoading || !profile?.did}
+              onPress={async () => {
+                try {
+                  if (graphManager.isFollowing) {
+                    await graphManager.unfollow();
+                  } else {
+                    await graphManager.follow();
                   }
-                }}
+                } catch (err) {
+                  console.error("Follow/unfollow error:", err);
+                }
+              }}
+            >
+              <Text
+                color={graphManager.isFollowing ? "destructive" : "default"}
               >
-                <Text>View Profile on Bluesky</Text>
-              </DropdownMenuItem>
-            </DropdownMenuGroup>
-          )}
-
-          <DropdownMenuGroup>
-            <DropdownMenuSub>
-              <DropdownMenuSubTrigger subMenuTitle="Quality">
-                <View
-                  style={[
-                    zero.flex.values[1],
-                    isMobile ? zero.layout.flex.row : zero.layout.flex.column,
-                    zero.layout.flex.spaceBetween,
-                    zero.pr[4],
-                  ]}
-                >
-                  <Text>Quality</Text>
-                  <Text muted size={isMobile ? "base" : "sm"}>
-                    {quality === "source" ? "Source" : quality},{" "}
-                    {lowLatency ? "Low 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={debugInfo}
-              onCheckedChange={() => setShowDebugInfo(!debugInfo)}
+                {graphManager.isLoading
+                  ? "Loading..."
+                  : graphManager.isFollowing
+                    ? "Unfollow"
+                    : "Follow"}
+              </Text>
+            </DropdownMenuItem>
+            <DropdownMenuSeparator />
+            <DropdownMenuItem
+              onPress={() => {
+                if (profile?.handle) {
+                  const url = `https://bsky.app/profile/${formatHandle(profile)}`;
+                  Linking.openURL(url);
+                }
+              }}
             >
-              <Text>Show Debug Info</Text>
-            </DropdownMenuCheckboxItem>
-          </DropdownMenuGroup>
-          <DropdownMenuGroup title="Report">
-            <ReportButton
-              livestream={livestream}
-              setReportModalOpen={setReportModalOpen}
-              setReportSubject={setReportSubject}
-            />
+              <Text>View Profile on Bluesky</Text>
+            </DropdownMenuItem>
           </DropdownMenuGroup>
-          <View style={[pt[3], px[2], gap.all[2]]}>
-            {contentWarnings && contentWarnings.length > 0 && (
-              <View style={[gap.all[1]]}>
-                <Text size="base" color="muted">
-                  Stream may contain
+        )}
+
+        <DropdownMenuGroup>
+          <DropdownMenuSub>
+            <DropdownMenuSubTrigger subMenuTitle="Quality">
+              <View
+                style={[
+                  zero.flex.values[1],
+                  isMobile ? zero.layout.flex.row : zero.layout.flex.column,
+                  zero.layout.flex.spaceBetween,
+                  zero.pr[4],
+                ]}
+              >
+                <Text>Quality</Text>
+                <Text muted size={isMobile ? "base" : "sm"}>
+                  {quality === "source" ? "Source" : quality},{" "}
+                  {lowLatency ? "Low Latency" : ""}
                 </Text>
-                <ContentWarnings warnings={contentWarnings} compact={true} />
               </View>
-            )}
-            {contentRights && Object.keys(contentRights).length > 0 && (
-              <ContentRights
-                contentRights={contentRights}
-                size="xs"
-                color="muted"
-              />
-            )}
-          </View>
-        </DropdownMenuContent>
-      </Portal>
+            </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={debugInfo}
+            onCheckedChange={() => setShowDebugInfo(!debugInfo)}
+          >
+            <Text>Show Debug Info</Text>
+          </DropdownMenuCheckboxItem>
+        </DropdownMenuGroup>
+        <DropdownMenuGroup title="Report">
+          <ReportButton
+            livestream={livestream}
+            setReportModalOpen={setReportModalOpen}
+            setReportSubject={setReportSubject}
+          />
+        </DropdownMenuGroup>
+        <View style={[pt[3], px[2], gap.all[2]]}>
+          {contentWarnings && contentWarnings.length > 0 && (
+            <View style={[gap.all[1]]}>
+              <Text size="base" color="muted">
+                Stream may contain
+              </Text>
+              <ContentWarnings warnings={contentWarnings} compact={true} />
+            </View>
+          )}
+          {contentRights && Object.keys(contentRights).length > 0 && (
+            <ContentRights
+              contentRights={contentRights}
+              size="xs"
+              color="muted"
+            />
+          )}
+        </View>
+      </DropdownMenuContent>
     </DropdownMenu>
   );
 }