(feat): move call context to zustand

(feat): add actions, basic call page

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

@@ -1,9 +1,15 @@
 import { Button } from "@tensamin/ui";
-import { useCall } from "../../context";
+import { toggleDeaf, useCall } from "../../store";
 import { HeadphoneOff, Headphones } from "lucide-react";
 
-export default function DeafButton({ className }: { className?: string }) {
-  const { toggleDeaf, deaf } = useCall();
+export default function DeafButton({
+  className,
+  iconSize,
+}: {
+  className?: string;
+  iconSize?: number;
+}) {
+  const deaf = useCall((state) => state.deaf);
 
   return (
     <Button
@@ -11,7 +17,15 @@ export default function DeafButton({ className }: { className?: string }) {
       onClick={toggleDeaf}
       className={className}
     >
-      {deaf ? <HeadphoneOff /> : <Headphones />}
+      {deaf ? (
+        <HeadphoneOff
+          style={{ scale: (iconSize ? iconSize + 100 : 100) + "%" }}
+        />
+      ) : (
+        <Headphones
+          style={{ scale: (iconSize ? iconSize + 100 : 100) + "%" }}
+        />
+      )}
     </Button>
   );
 }

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

@@ -0,0 +1,21 @@
+import { LeaveIcon } from "@livekit/components-react";
+import { Button } from "@tensamin/ui";
+import { disconnect } from "../../store";
+
+export default function LeaveButton({
+  className,
+  iconSize,
+}: {
+  className?: string;
+  iconSize?: number;
+}) {
+  return (
+    <Button
+      className={className}
+      onClick={() => disconnect()}
+      variant="destructive"
+    >
+      <LeaveIcon style={{ scale: (iconSize ? iconSize + 100 : 100) + "%" }} />
+    </Button>
+  );
+}

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

@@ -1,17 +1,27 @@
 import { Button } from "@tensamin/ui";
-import { useCall } from "../../context";
+import { toggleMute, useCall } from "../../store";
 import { Mic, MicOff } from "lucide-react";
 
-export default function MuteButton({ className }: { className?: string }) {
-  const { room } = useCall();
-  const micEnabled = room.localParticipant.isMicrophoneEnabled;
+export default function MuteButton({
+  className,
+  iconSize,
+}: {
+  className?: string;
+  iconSize?: number;
+}) {
+  const micEnabled = useCall((state) => state.micEnabled);
 
   return (
     <Button
       variant={micEnabled ? "default" : "destructive"}
       className={className}
+      onClick={() => void toggleMute()}
     >
-      {micEnabled ? <Mic /> : <MicOff />}
+      {micEnabled ? (
+        <Mic style={{ scale: (iconSize ? iconSize + 100 : 100) + "%" }} />
+      ) : (
+        <MicOff style={{ scale: (iconSize ? iconSize + 100 : 100) + "%" }} />
+      )}
     </Button>
   );
 }

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

@@ -1,39 +1,47 @@
 import { Button, Popover, PopoverContent, PopoverTrigger } from "@tensamin/ui";
 import { MonitorDot, ScreenShare } from "lucide-react";
-import { useCall } from "../../context";
+import { setScreenShareEnabled, useCall } from "../../store";
 
 export default function ScreenshareButton({
   className,
+  iconSize,
 }: {
   className?: string;
+  iconSize?: number;
 }) {
-  const { room } = useCall();
-
-  const isScreensharing = room.localParticipant.isScreenShareEnabled;
+  const isScreensharing = useCall((state) => state.screenShareEnabled);
 
   return (
     <Popover>
       <PopoverTrigger
         render={
           <Button
-            variant={isScreensharing ? "secondary" : "default"}
+            variant={isScreensharing ? "subtleDefault" : "default"}
             className={className}
           >
-            {isScreensharing ? <MonitorDot /> : <ScreenShare />}
+            {isScreensharing ? (
+              <MonitorDot
+                style={{ scale: (iconSize ? iconSize + 100 : 100) + "%" }}
+              />
+            ) : (
+              <ScreenShare
+                style={{ scale: (iconSize ? iconSize + 100 : 100) + "%" }}
+              />
+            )}
           </Button>
         }
       />
       <PopoverContent className="w-auto flex flex-col gap-2">
         <Button
           disabled={isScreensharing}
-          onClick={() => room.localParticipant.setScreenShareEnabled(true)}
+          onClick={() => void setScreenShareEnabled(true)}
         >
           Start
         </Button>
         <Button
           variant="destructive"
           disabled={!isScreensharing}
-          onClick={() => room.localParticipant.setScreenShareEnabled(false)}
+          onClick={() => void setScreenShareEnabled(false)}
         >
           Stop
         </Button>