(fix): recharts warnings

(fix): fullscreen popovers not showing
(qol): update todo

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

@@ -1,7 +1,8 @@
+import { useEffect, useState } from "react";
 import { Button, Popover, PopoverContent, PopoverTrigger } from "@tensamin/ui";
 import Wrapper from "@tensamin/user/wrapper";
 import { Mail } from "lucide-react";
-import { sendCallInvite } from "../../store";
+import { sendCallInvite, useCall } from "../../store";
 import { log, toast } from "@tensamin/shared/log";
 import { useSession } from "@tensamin/storage/session";
 
@@ -13,6 +14,12 @@ export default function InviteButton({
   iconSize?: number;
 }) {
   const { contacts } = useSession();
+  const screenRef = useCall((state) => state.screenRef);
+  const [portalContainer, setPortalContainer] = useState<HTMLElement>();
+
+  useEffect(() => {
+    setPortalContainer(screenRef?.current ?? undefined);
+  }, [screenRef]);
 
   return (
     <Popover>
@@ -23,7 +30,10 @@ export default function InviteButton({
           </Button>
         }
       />
-      <PopoverContent className="flex w-40 flex-col gap-0.5 p-1!">
+      <PopoverContent
+        className="flex w-40 flex-col gap-0.5 p-1!"
+        portalProps={{ container: portalContainer }}
+      >
         {contacts.map((contact) => (
           <Wrapper
             key={contact.user_id}

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

@@ -1,4 +1,4 @@
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import { Button, Popover, PopoverContent, PopoverTrigger } from "@tensamin/ui";
 import { MonitorDot, ScreenShare } from "lucide-react";
 import { toast } from "@tensamin/shared/log";
@@ -14,9 +14,15 @@ export default function ScreenshareButton({
   iconSize?: number;
 }) {
   const isScreensharing = useCall((state) => state.screenShareEnabled);
+  const screenRef = useCall((state) => state.screenRef);
+  const [portalContainer, setPortalContainer] = useState<HTMLElement>();
   const [dialogOpen, setDialogOpen] = useState(false);
   const [menuOpen, setMenuOpen] = useState(false);
 
+  useEffect(() => {
+    setPortalContainer(screenRef?.current ?? undefined);
+  }, [screenRef]);
+
   async function startWebShare() {
     try {
       await setScreenShareEnabled(true, {
@@ -66,7 +72,10 @@ export default function ScreenshareButton({
             </Button>
           }
         />
-        <PopoverContent className="flex w-40 flex-col gap-2">
+        <PopoverContent
+          className="flex w-40 flex-col gap-2"
+          portalProps={{ container: portalContainer }}
+        >
           <Button
             disabled={isScreensharing}
             onClick={() => {
@@ -101,6 +110,7 @@ export default function ScreenshareButton({
           open={dialogOpen}
           onOpenChange={setDialogOpen}
           isScreensharing={isScreensharing}
+          portalContainer={portalContainer}
         />
       )}
     </>

packages/call/src/components/screenshareDialog.tsx

@@ -60,10 +60,12 @@ export default function ScreenShareDialog({
   open,
   onOpenChange,
   isScreensharing,
+  portalContainer,
 }: {
   open: boolean;
   onOpenChange: (open: boolean) => void;
   isScreensharing: boolean;
+  portalContainer?: HTMLElement;
 }) {
   const {
     getScreenShareCapabilities,
@@ -191,7 +193,10 @@ export default function ScreenShareDialog({
 
   return (
     <Dialog open={open} onOpenChange={onOpenChange}>
-      <DialogContent className="max-w-3xl gap-0 overflow-hidden p-0">
+      <DialogContent
+        className="max-w-3xl gap-0 overflow-hidden p-0"
+        portalProps={{ container: portalContainer }}
+      >
         <DialogHeader className="p-4 pb-3">
           <DialogTitle>Share your screen</DialogTitle>
           <DialogDescription>

packages/call/src/components/sidebarBox.tsx

@@ -15,7 +15,7 @@ import MuteButton from "./buttons/mute";
 import DeafButton from "./buttons/deaf";
 import { Room, Track } from "livekit-client";
 import { useEffect, useState } from "react";
-import { ResponsiveContainer, AreaChart, Area } from "recharts";
+import { AreaChart, Area } from "recharts";
 import LeaveButton from "./buttons/leave";
 
 export default function SidebarBox() {
@@ -122,55 +122,44 @@ export function TinyPingGraph() {
             }}
           >
             {data.length > 1 && (
-              <ResponsiveContainer
-                width="100%"
-                height="100%"
-                minWidth={0}
-                minHeight={24}
+              <AreaChart
+                width={96}
+                height={24}
+                data={data}
+                margin={{ top: 2, right: 0, bottom: 2, left: 0 }}
               >
-                <AreaChart
-                  data={data}
-                  margin={{ top: 2, right: 0, bottom: 2, left: 0 }}
-                >
-                  <defs>
-                    <linearGradient
-                      id="pingGradient"
-                      x1="0"
-                      y1="0"
-                      x2="0"
-                      y2="1"
-                    >
-                      <stop
-                        offset="0%"
-                        stopColor="currentColor"
-                        stopOpacity={0.35}
-                      />
-                      <stop
-                        offset="70%"
-                        stopColor="currentColor"
-                        stopOpacity={0.08}
-                      />
-                      <stop
-                        offset="100%"
-                        stopColor="currentColor"
-                        stopOpacity={0}
-                      />
-                    </linearGradient>
-                  </defs>
+                <defs>
+                  <linearGradient id="pingGradient" x1="0" y1="0" x2="0" y2="1">
+                    <stop
+                      offset="0%"
+                      stopColor="currentColor"
+                      stopOpacity={0.35}
+                    />
+                    <stop
+                      offset="70%"
+                      stopColor="currentColor"
+                      stopOpacity={0.08}
+                    />
+                    <stop
+                      offset="100%"
+                      stopColor="currentColor"
+                      stopOpacity={0}
+                    />
+                  </linearGradient>
+                </defs>
 
-                  <Area
-                    type="monotone"
-                    dataKey="ping"
-                    stroke="currentColor"
-                    strokeWidth={2}
-                    fill="url(#pingGradient)"
-                    fillOpacity={1}
-                    dot={false}
-                    activeDot={false}
-                    isAnimationActive={false}
-                  />
-                </AreaChart>
-              </ResponsiveContainer>
+                <Area
+                  type="monotone"
+                  dataKey="ping"
+                  stroke="currentColor"
+                  strokeWidth={2}
+                  fill="url(#pingGradient)"
+                  fillOpacity={1}
+                  dot={false}
+                  activeDot={false}
+                  isAnimationActive={false}
+                />
+              </AreaChart>
             )}
           </div>
         }

packages/call/src/store.tsx

@@ -522,7 +522,9 @@ export function triggerCallLayoutCalculation() {
   }));
 }
 
-export function setScreenRef(screenRef: React.RefObject<HTMLDivElement | null> | null) {
+export function setScreenRef(
+  screenRef: React.RefObject<HTMLDivElement | null> | null,
+) {
   useCall.setState({ screenRef });
 }
 
@@ -1093,7 +1095,8 @@ export function useInitializeCall() {
     };
 
     document.addEventListener("fullscreenchange", handleFullscreenChange);
-    return () => document.removeEventListener("fullscreenchange", handleFullscreenChange);
+    return () =>
+      document.removeEventListener("fullscreenchange", handleFullscreenChange);
   }, []);
 
   // esc key listener
@@ -1107,7 +1110,7 @@ export function useInitializeCall() {
         useCall.setState({ callIsFullscreen: false });
       }
     };
-    
+
     window.addEventListener("keydown", onKeyDown);
     return () => window.removeEventListener("keydown", onKeyDown);
   }, [location.pathname]);

packages/call/todo.md

@@ -6,7 +6,6 @@
 - Call invite popup
   - Save call invite in `calls` array
 - Sounds
-- Fullscreen button for screenshares
 - Admin call actions
   - Timeout
   - Disconnect