(feat): remove homepage dev buttons

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

apps/web/src/components/navbar.tsx

@@ -33,8 +33,6 @@ export default function Navbar({ forMobile }: { forMobile: boolean }) {
 
   const isMobile = useIsMobile();
 
-  const [selectOpen, setSelectOpen] = useState(false);
-
   const [userInfoOpen, setUserInfoOpen] = useState(false);
 
   return (
@@ -86,7 +84,9 @@ export default function Navbar({ forMobile }: { forMobile: boolean }) {
                           textDecorationLine: "none",
                         }}
                       >
-                        <p className="font-medium text-[1.07rem]">{user?.display}</p>
+                        <p className="font-medium text-[1.07rem]">
+                          {user?.display}
+                        </p>
                       </Button>
                     }
                   />
@@ -131,15 +131,20 @@ export default function Navbar({ forMobile }: { forMobile: boolean }) {
               </Button>
             ) : (
               <>
-                <Button
-                  onClick={() => setSelectOpen((prev) => !prev)}
-                  className="w-9! h-9! aspect-square rounded-lg"
-                >
-                  <Phone />
-                </Button>
-                <Select onOpenChange={setSelectOpen} open={selectOpen}>
-                  <SelectTrigger hidden />
-                  <SelectContent>
+                <Select>
+                  <SelectTrigger
+                    // eslint-disable-next-line
+                    render={({ className, ...props }) => (
+                      <Button
+                        {...props}
+                        className="w-9! h-9! aspect-square rounded-lg px-0! flex! justify-center!"
+                        variant="default"
+                      >
+                        <Phone />
+                      </Button>
+                    )}
+                  />
+                  <SelectContent className="p-1">
                     {currentCalls.map((call) => (
                       <SelectItem
                         value={call.call_id}

apps/web/src/routes/app/home.tsx

@@ -15,27 +15,16 @@ import { useTTP } from "@tensamin/ttp";
 import { useState } from "react";
 import { Loader2 } from "lucide-react";
 import { isTauri } from "@tauri-apps/api/core";
-import { useStorage } from "@tensamin/storage/context";
 import { useSession } from "@tensamin/storage/session";
 
 // The page
 export default function Page() {
-  const { clear } = useStorage();
   const isMobile = useIsMobile();
 
   return (
     <div className={`px-3 flex gap-2 ${!(isTauri() && isMobile) && "pt-3"}`}>
       <AddConversationButton />
       <Button disabled>Add Community</Button>
-      <Button variant="outline" onClick={() => location.reload()}>
-        Reload
-      </Button>
-      <Button
-        variant="destructive"
-        onClick={() => clear().then(() => location.reload())}
-      >
-        Logout
-      </Button>
     </div>
   );
 }

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