Merge pull request '(feat): various workflow improvements, mobile sidebar improvements' (#2) from dev into main

Reviewed-on: #2

packages/call/src/components/buttons/screenshare.tsx

@@ -18,12 +18,10 @@ export default function ScreenshareButton({
   className,
   iconSize,
   tooltip,
-  defaultPortal,
 }: {
   className?: string;
   iconSize?: number;
   tooltip?: string;
-  defaultPortal?: boolean;
 }) {
   const isScreensharing = useCall((state) => state.screenShareEnabled);
   const screenRef = useCall((state) => state.screenRef);
@@ -32,9 +30,8 @@ export default function ScreenshareButton({
   const [menuOpen, setMenuOpen] = useState(false);
 
   useEffect(() => {
-    if (defaultPortal) return;
     setPortalContainer(screenRef?.current ?? undefined);
-  }, [screenRef, defaultPortal]);
+  }, [screenRef]);
 
   async function startWebShare() {
     try {
@@ -113,9 +110,7 @@ export default function ScreenshareButton({
           />
           <PopoverContent
             className="flex w-40 flex-col gap-2"
-            portalProps={{
+            portalProps={{ container: portalContainer }}
-              container: defaultPortal ? undefined : portalContainer,
-            }}
           >
             <Button
               disabled={isScreensharing}
@@ -146,11 +141,7 @@ export default function ScreenshareButton({
           </PopoverContent>
         </Popover>
         {tooltip && (
-          <TooltipContent
+          <TooltipContent portalProps={{ container: portalContainer }}>
-            portalProps={{
-              container: defaultPortal ? undefined : portalContainer,
-            }}
-          >
             {tooltip}
           </TooltipContent>
         )}

packages/call/src/components/sidebarBox.tsx

@@ -20,18 +20,24 @@ import LeaveButton from "./buttons/leave";
 
 export default function SidebarBox() {
   const state = useCall((store) => store.state);
+  const screenRef = useCall((store) => store.screenRef);
   const isMobile = useIsMobile();
+  const [portalContainer, setPortalContainer] = useState<HTMLElement>();
+
+  useEffect(() => {
+    setPortalContainer(screenRef?.current ?? undefined);
+  }, [screenRef]);
 
   return state === "closed" ? null : (
     <Card className="p-1.5 gap-2" hidden={isMobile}>
       <CardHeader className="p-0! pb-2! border-b-2">
-        <ConnectionBar />
+        <ConnectionBar portalContainer={portalContainer} />
       </CardHeader>
       <CardContent className="p-0! flex flex-col gap-1">
         <div className="flex justify-start gap-1">
           <MuteButton className="w-9 h-9" />
           <DeafButton className="w-9 h-9" />
-          <ScreenshareButton className="w-9 h-9" defaultPortal />
+          <ScreenshareButton className="w-9 h-9" />
           <LeaveButton className="w-9 h-9" />
         </div>
       </CardContent>
@@ -39,7 +45,7 @@ export default function SidebarBox() {
   );
 }
 
-function ConnectionBar() {
+function ConnectionBar({ portalContainer }: { portalContainer?: HTMLElement }) {
   const state = useCall((store) => store.state);
   const isEncrypted = useCall((store) => store.isEncrypted);
   const callId = useCall((store) => store.callId);
@@ -62,7 +68,7 @@ function ConnectionBar() {
             {state === "closed" && "Closed"}
             {state === "closing" && "Closing"}
 
-            <TinyPingGraph />
+            <TinyPingGraph portalContainer={portalContainer} />
 
             {isEncrypted ? (
               <Lock color="var(--primary-foreground-alt)" />
@@ -72,12 +78,18 @@ function ConnectionBar() {
           </Button>
         }
       />
-      <TooltipContent>Click to open call page</TooltipContent>
+      <TooltipContent portalProps={{ container: portalContainer }}>
+        Click to open call page
+      </TooltipContent>
     </Tooltip>
   );
 }
 
-export function TinyPingGraph() {
+export function TinyPingGraph({
+  portalContainer,
+}: {
+  portalContainer?: HTMLElement;
+}) {
   const room = useCall((store) => store.room);
 
   const [mapData, setMapData] = useState<Map<number, number>>(() => new Map());
@@ -164,7 +176,7 @@ export function TinyPingGraph() {
           </div>
         }
       />
-      <TooltipContent>
+      <TooltipContent portalProps={{ container: portalContainer }}>
         {data.length > 0 ? `${data.at(-1)?.ping} ms` : "Measuring ping..."}
       </TooltipContent>
     </Tooltip>

packages/call/todo.md

@@ -11,4 +11,3 @@
   - Disconnect
 - Desktop-App screenshares
 - Context menus
-- Popout Window