allow passing ui down so we can get proper fullscreen

js/app/components/mobile/player.tsx

···
   PlayerProps,
   PlayerProvider,
   usePlayerDimensions,
+  usePlayerStore,
   View,
 } from "@streamplace/components";
 import { useSidebarControl } from "hooks/useSidebarControl";
···
   },
 ) {
   let sb = useSidebarControl();
+  let fullscreen = usePlayerStore((x) => x.fullscreen);
   const {
     shouldShowChatSidePanel,
     chatPanelWidth,
···
               },
         ]}
       >
-        <PlayerInnerInner {...props} />
-        {showBottomMetaPanel && <DesktopUi />}
+        <PlayerInnerInner {...props}>
+          {(showBottomMetaPanel || fullscreen) && <DesktopUi />}
+        </PlayerInnerInner>
       </Animated.View>
       {showBottomMetaPanel && (
         <BottomMetadata

js/components/src/components/mobile-player/fullscreen.native.tsx

···
 // Standard 16:9 video aspect ratio
 const VIDEO_ASPECT_RATIO = 16 / 9;
 
-export function Fullscreen(props: { src: string }) {
+export function Fullscreen(props: { src: string; children?: React.ReactNode }) {
   const ref = useRef<VideoView>(null);
   const insets = useSafeAreaInsets();
   const navigation = useNavigation();
···
           ]}
         >
           <Video />
+          {props.children}
         </View>
       </View>
     );
···
   return (
     <>
       <Video />
+      {props.children}
     </>
   );
 }

js/components/src/components/mobile-player/fullscreen.tsx

···
 import { View } from "../../components/ui";
 import Video from "./video";
 
-export function Fullscreen(props: { src: string }) {
+export function Fullscreen(props: { src: string; children?: React.ReactNode }) {
   const playerId = getFirstPlayerID();
   const protocol = usePlayerStore((x) => x.protocol, playerId);
   const fullscreen = usePlayerStore((x) => x.fullscreen, playerId);
···
       style={{ width: "100%", height: "100%", overflow: "hidden" }}
     >
       <Video />
+      {props.children}
     </View>
   );
 }

js/components/src/components/mobile-player/player.tsx

···
 
 export * as PlayerUI from "./ui";
 
-export function Player(props: Partial<PlayerProps>) {
+export function Player(
+  props: Partial<PlayerProps> & { children?: React.ReactNode },
+) {
   const playing = usePlayerStore((x) => x.status === PlayerStatus.PLAYING);
 
   const setOffline = usePlayerStore((x) => x.setOffline);
···
           layout.flex.center,
         ]}
       >
-        <Fullscreen src={props.src}></Fullscreen>
+        <Fullscreen src={props.src}>{props.children}</Fullscreen>
       </View>
     </>
   );