(feat): add basic voice buttons

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

@@ -0,0 +1,44 @@
+import { Button, Popover, PopoverContent, PopoverTrigger } from "@tensamin/ui";
+import { MonitorDot, ScreenShare } from "lucide-react";
+import { useCall } from "../../context";
+
+export default function ScreenshareButton({
+  className,
+}: {
+  className?: string;
+}) {
+  const { room } = useCall();
+
+  const isScreensharing = room.localParticipant.isScreenShareEnabled;
+
+  return (
+    <Popover>
+      <PopoverTrigger
+        render={
+          <Button
+            variant={isScreensharing ? "secondary" : "default"}
+            className={className}
+          >
+            {isScreensharing ? <MonitorDot /> : <ScreenShare />}
+          </Button>
+        }
+      />
+      <PopoverContent className="w-auto flex flex-col gap-2">
+        <Button
+          disabled={isScreensharing}
+          onClick={() => room.localParticipant.setScreenShareEnabled(true)}
+        >
+          Start
+        </Button>
+        <Button
+          variant="destructive"
+          disabled={!isScreensharing}
+          onClick={() => room.localParticipant.setScreenShareEnabled(false)}
+        >
+          Stop
+        </Button>
+        <Button>idk</Button>
+      </PopoverContent>
+    </Popover>
+  );
+}

packages/call/src/components/sidebarBox.tsx

@@ -1,4 +1,4 @@
-import { Lock, LockOpen } from "lucide-react";
+import { Expand, Lock, LockOpen } from "lucide-react";
 import { useCall } from "../context";
 import {
   Button,
@@ -11,14 +11,17 @@ import {
   Tooltip,
   TooltipContent,
   TooltipTrigger,
+  useIsMobile,
 } from "@tensamin/ui";
 import { LeaveIcon } from "@livekit/components-react";
+import ScreenshareButton from "./buttons/screenshare";
 
 export default function SidebarBox() {
-  const { state, room, disconnect } = useCall();
+  const { state, room, disconnect, openCallPage, callId } = useCall();
+  const isMobile = useIsMobile();
 
   return state === "closed" ? null : (
-    <Card className="p-1.5 gap-1">
+    <Card className="p-1.5 gap-1" hidden={isMobile}>
       <CardHeader className="p-0!">
         <ConnectionBar
           state={state}
@@ -28,7 +31,11 @@ export default function SidebarBox() {
           }
         />
       </CardHeader>
-      <CardContent className="p-0! flex justify-end">
+      <CardContent className="p-0! flex justify-end gap-1">
+        <Button className="w-9 h-9" onClick={() => openCallPage(callId || "")}>
+          <Expand />
+        </Button>
+        <ScreenshareButton className="w-9 h-9" />
         <Button
           size="lg"
           className="w-9 h-9"
@@ -56,18 +63,11 @@ function ConnectionBar({
           <Button
             size="lg"
             variant={
-              state === "open"
-                ? encrypted
-                  ? "subtleDefault"
-                  : "destructive"
-                : state === "closed" ||
-                    state === "closing" ||
-                    state === "connecting"
-                  ? "outline"
-                  : "outline"
+              state === "open" && encrypted ? "subtleDefault" : "destructive"
             }
             className="flex justify-between items-center"
           >
+            {state === "encrypting" && "Encrypting..."}
             {state === "connecting" && "Connecting..."}
             {state === "open" && "Connected"}
             {state === "closed" && "Closed"}
@@ -77,7 +77,7 @@ function ConnectionBar({
               <TooltipTrigger
                 render={
                   encrypted ? (
-                    <Lock color="var(--primary-foreground)" />
+                    <Lock color="var(--primary-foreground-alt)" />
                   ) : (
                     <LockOpen color="var(--destructive)" />
                   )

packages/call/src/context.tsx

@@ -1,6 +1,6 @@
 import { createContext, useContext, useEffect, useMemo, useState } from "react";
 import { log, toast } from "@tensamin/shared/log";
-import { useNavigate } from "@tanstack/react-router";
+import { useLocation, useNavigate } from "@tanstack/react-router";
 import { useTTP } from "@tensamin/ttp";
 import z from "zod";
 import { ttp } from "@tensamin/shared/data";
@@ -20,12 +20,16 @@ export default function Provider(props: { children: React.ReactNode }) {
   const { getSharedSecret, decryptText } = useCrypto();
   const { load } = useStorage();
   const { get } = useUser();
+  const location = useLocation();
+  const search = new URLSearchParams(location.searchStr);
 
   const [state, setState] = useState<
     "closed" | "closing" | "connecting" | "open" | "encrypting"
   >("closed");
 
-  const [callId, setCallId] = useState<string | null>(null);
+  const [callId, setCallId] = useState<string | null>(
+    location.pathname.startsWith("/call") ? search.get("id") : null,
+  );
   const [callSecret, setCallSecret] = useState<string | null>(null);
   const [livekitToken, setLivekitToken] = useState<string | null>(null);
 
@@ -40,9 +44,8 @@ export default function Provider(props: { children: React.ReactNode }) {
   };
 
   async function connect(callId: string) {
-    setState("connecting");
+    setState("encrypting");
     setCallId(callId);
-    setCallSecret(callSecret);
     setLivekitToken(await getCallToken(callId));
     log(2, "call", "purple", "Connecting to call", { callId, callSecret });
   }
@@ -74,23 +77,29 @@ export default function Provider(props: { children: React.ReactNode }) {
           await get(userId).then((res) => res.public_key),
         );
         const decryptedSecret = await decryptText(sharedSecret, callSecret);
+        await keyProvider.setKey(decryptedSecret);
+        await room.setE2EEEnabled(true);
         setCallSecret(decryptedSecret);
+        setState("connecting");
       } catch (err) {
         log(1, "call", "red", "Failed getting call secret", err);
         disconnect();
       }
     } else {
-      setCallSecret(crypto.randomUUID());
+      const random = crypto.randomUUID();
+      await keyProvider.setKey(random);
+      await room.setE2EEEnabled(true);
+      setCallSecret(random);
+      setState("connecting");
     }
     try {
       // check if user is already in call
 
       // connect to call
-      connect(callId || crypto.randomUUID());
+      const finalId = callId || crypto.randomUUID();
+      connect(finalId);
       setView("grid");
-
-      // navigate to call page
-      navigate({ to: "/call", search: { userId: userId, callId: callId } });
+      openCallPage(finalId);
     } catch (err) {
       log(1, "call", "red", "Failed to join call [navbar level]", err);
     }
@@ -107,6 +116,9 @@ export default function Provider(props: { children: React.ReactNode }) {
     typeof ttp.call_data.response
   > | null>(null);
 
+  const openCallPage = (callId: string) =>
+    navigate({ to: "/call", search: { id: callId } });
+
   // Get current call information for preview view
   useEffect(() => {
     if (view !== "preview" || !callId) return;
@@ -134,22 +146,15 @@ export default function Provider(props: { children: React.ReactNode }) {
   const [room] = useState(
     () =>
       new Room({
+        dynacast: true,
+        adaptiveStream: true,
         encryption: {
           keyProvider,
           worker: e2eeWorker,
         },
-        loggerName: "call",
       }),
   );
 
-  useEffect(() => {
-    async function enableStuff() {
-      await keyProvider.setKey(callSecret || "");
-      await room.setE2EEEnabled(true);
-    }
-    enableStuff();
-  }, [callSecret, keyProvider, room]);
-
   return (
     <context.Provider
       value={{
@@ -158,7 +163,9 @@ export default function Provider(props: { children: React.ReactNode }) {
         setView,
         room,
 
-        connect,
+        callId,
+        openCallPage,
+
         disconnect,
         joinCall,
         currentCallData,
@@ -239,11 +246,12 @@ type contextType = {
   state: "closed" | "closing" | "connecting" | "open" | "encrypting";
   view: "preview" | "focused" | "grid";
   setView: (view: "preview" | "focused" | "grid") => void;
-  connect: (callId: string, callSecret: string) => void;
   disconnect: () => void;
   joinCall: (userId: number, callSecret?: string, callId?: string) => void;
   currentCallData: z.infer<typeof ttp.call_data.response> | null;
   room: Room;
+  openCallPage: (callId: string) => Promise<void>;
+  callId: string | null;
 };
 
 export function useCall(): contextType {