(feat): remove homepage dev buttons

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

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 />
+  );
+}