(feat): remove homepage dev buttons

(fix): some call related bugs
(qol): update todo

packages/call/src/components/actions.tsx

@@ -53,10 +53,13 @@ export default function Actions() {
   }, [screenRef]);
 
   const toggleFullscreen = async () => {
+    const screen = screenRef?.current;
+    const fullscreenDocument = screen?.ownerDocument ?? document;
+
     if (callIsFullscreen) {
-      await document.exitFullscreen().catch(() => undefined);
+      await fullscreenDocument.exitFullscreen().catch(() => undefined);
     } else {
-      await screenRef?.current?.requestFullscreen().catch(() => undefined);
+      await screen?.requestFullscreen().catch(() => undefined);
     }
 
     triggerCallLayoutCalculation();

packages/call/src/components/top.tsx

@@ -75,7 +75,7 @@ export default function TopBar() {
               <TooltipTrigger
                 render={
                   <Avatar className="size-7">
-                    <AvatarImage />
+                    <AvatarImage src={user.avatar} />
                     <AvatarFallback className="text-xs">
                       {user.display.slice(0, 2).toUpperCase()}
                     </AvatarFallback>

packages/call/src/screen.tsx

@@ -1,11 +1,18 @@
-import { useCall } from "./store";
+import { useEffect, useRef, useState } from "react";
+import { createPortal } from "react-dom";
+import {
+  setCallIsFullscreen,
+  setCallIsPopout,
+  triggerCallLayoutCalculation,
+  useCall,
+} from "./store";
 
 import MainLayout from "./views/main/layout";
 import MainGrid from "./views/main/grid";
 import MainFocused from "./views/main/focused";
 import Preview from "./views/preview";
 
-export default function Screen() {
+function ScreenContent() {
   const view = useCall((state) => state.view);
 
   return view === "preview" ? (
@@ -14,3 +21,114 @@ export default function Screen() {
     <MainLayout>{view === "grid" ? <MainGrid /> : <MainFocused />}</MainLayout>
   );
 }
+
+// Popout Window
+function copyDocumentStyles(targetDocument: Document) {
+  for (const node of document.querySelectorAll(
+    'link[rel="stylesheet"], style',
+  )) {
+    targetDocument.head.appendChild(node.cloneNode(true));
+  }
+}
+
+function syncDocumentClasses(targetDocument: Document) {
+  targetDocument.documentElement.className = document.documentElement.className;
+  targetDocument.body.className = document.body.className;
+}
+
+function PopoutScreen() {
+  const closeCheckRef = useRef<ReturnType<typeof window.setInterval> | null>(
+    null,
+  );
+  const [container, setContainer] = useState<HTMLDivElement | null>(null);
+
+  useEffect(() => {
+    const popoutWindow = window.open(
+      "",
+      "tensamin-call-popout",
+      "popup,width=1280,height=720",
+    );
+
+    if (!popoutWindow) {
+      setCallIsFullscreen(false);
+      setCallIsPopout(false);
+      return;
+    }
+
+    let isMounted = true;
+
+    popoutWindow.document.title = document.title;
+    popoutWindow.document.body.innerHTML = "";
+    popoutWindow.document.body.style.margin = "0";
+    popoutWindow.document.documentElement.style.height = "100%";
+    popoutWindow.document.body.style.height = "100%";
+
+    copyDocumentStyles(popoutWindow.document);
+    syncDocumentClasses(popoutWindow.document);
+
+    const containerElement = popoutWindow.document.createElement("div");
+    containerElement.style.width = "100%";
+    containerElement.style.height = "100%";
+    popoutWindow.document.body.appendChild(containerElement);
+    queueMicrotask(() => {
+      if (isMounted) {
+        setContainer(containerElement);
+      }
+    });
+
+    const closePopout = () => {
+      setCallIsFullscreen(false);
+      setCallIsPopout(false);
+    };
+    const syncLayout = () => triggerCallLayoutCalculation();
+
+    popoutWindow.addEventListener("beforeunload", closePopout);
+    popoutWindow.addEventListener("resize", syncLayout);
+    popoutWindow.focus();
+
+    closeCheckRef.current = window.setInterval(() => {
+      if (popoutWindow.closed) {
+        closePopout();
+      }
+    }, 500);
+
+    triggerCallLayoutCalculation();
+
+    return () => {
+      isMounted = false;
+      popoutWindow.removeEventListener("beforeunload", closePopout);
+      popoutWindow.removeEventListener("resize", syncLayout);
+
+      if (closeCheckRef.current) {
+        window.clearInterval(closeCheckRef.current);
+        closeCheckRef.current = null;
+      }
+
+      if (!popoutWindow.closed) {
+        popoutWindow.close();
+      }
+
+      setCallIsFullscreen(false);
+      triggerCallLayoutCalculation();
+    };
+  }, []);
+
+  if (!container) {
+    return null;
+  }
+
+  return createPortal(<ScreenContent />, container);
+}
+
+export default function Screen() {
+  const callIsPopout = useCall((state) => state.callIsPopout);
+
+  return callIsPopout ? (
+    <div className="flex justify-center items-center h-full w-full">
+      <p>The window is popped out.</p>
+      <PopoutScreen />
+    </div>
+  ) : (
+    <ScreenContent />
+  );
+}

packages/call/src/store.tsx

@@ -857,6 +857,7 @@ export async function disconnect() {
     watchedStreamParticipantIds: [],
     pendingWatchedParticipantIds: [],
     activeScreenShareParticipantIds: [],
+    callIsFullscreen: false,
     lastFocusedParticipantId: null,
   });
 

packages/call/src/views/main/layout.tsx

@@ -1,7 +1,12 @@
 import { useEffect, useLayoutEffect, useRef, useState } from "react";
 import Actions from "../../components/actions";
 import TopBar from "../../components/top";
-import { setScreenRef, useCall } from "../../store";
+import {
+  setCallIsFullscreen,
+  setScreenRef,
+  triggerCallLayoutCalculation,
+  useCall,
+} from "../../store";
 
 export default function Layout({ children }: { children: React.ReactNode }) {
   const screenRef = useRef<HTMLDivElement>(null);
@@ -16,6 +21,30 @@ export default function Layout({ children }: { children: React.ReactNode }) {
 
   useEffect(() => {
     setScreenRef(screenRef);
+
+    const screen = screenRef.current;
+    const fullscreenDocument = screen?.ownerDocument;
+
+    if (!screen || !fullscreenDocument) {
+      return;
+    }
+
+    const handleFullscreenChange = () => {
+      setCallIsFullscreen(fullscreenDocument.fullscreenElement === screen);
+      triggerCallLayoutCalculation();
+    };
+
+    fullscreenDocument.addEventListener(
+      "fullscreenchange",
+      handleFullscreenChange,
+    );
+
+    return () => {
+      fullscreenDocument.removeEventListener(
+        "fullscreenchange",
+        handleFullscreenChange,
+      );
+    };
   }, []);
 
   const usersInFocusedViewHidden = useCall(

packages/call/todo.md

@@ -11,3 +11,4 @@
 - Context menus
 - Popout Window
 - Add quality selection
+- Good preview page