From 4db9d047651bd052f77f07cf9c4e4bb8d7bb3997 Mon Sep 17 00:00:00 2001
From: Bruno Rodrigues <brunocroh@gmail.com>
Date: Sat, 18 May 2024 12:32:46 +0100
Subject: [PATCH] feat(web): mute toggle

---
 apps/web/app/room/[slug]/page.tsx | 33 +++++++++++++++++++++++--------
 1 file changed, 25 insertions(+), 8 deletions(-)

diff --git a/apps/web/app/room/[slug]/page.tsx b/apps/web/app/room/[slug]/page.tsx
index 9a53340..79dd913 100644
--- a/apps/web/app/room/[slug]/page.tsx
+++ b/apps/web/app/room/[slug]/page.tsx
@@ -6,6 +6,7 @@ import {
   useState,
   ReactElement,
   MutableRefObject,
+  useCallback,
 } from "react";
 import { socket as Socket } from "@/lib/socket";
 import { usePathname } from "next/navigation";
@@ -21,6 +22,7 @@ import {
   SelectValue,
 } from "@/components/ui/select";
 import { Mic } from "lucide-react";
+import { Button } from "@/components/ui/button";
 
 let socket: any;
 
@@ -33,6 +35,7 @@ export default function Page(): JSX.Element {
   const roomId = pathname.split("/room/")[1];
 
   const [me, setMe] = useState("");
+  const [mute, setMute] = useState(false);
   const [videoReady, setVideoReady] = useState(false);
 
   const {
@@ -137,6 +140,10 @@ export default function Page(): JSX.Element {
     }
   }, [me, videoReady]);
 
+  const toggleMute = useCallback(() => {
+    setMute((_mute) => !_mute);
+  }, [setMute]);
+
   return (
     <main className="flex flex-col h-full">
       <Header />
@@ -149,14 +156,24 @@ export default function Page(): JSX.Element {
           <h1>ACCESS: {accessGranted ? "false" : "true"}</h1>
         </div>
         <div className="flex flex-row gap-2">
-          <video
-            className="[transform:rotateY(180deg)]"
-            ref={videoRef}
-            playsInline
-            autoPlay={true}
-            muted={true}
-          ></video>
-          <video ref={remoteRef} playsInline autoPlay={true}></video>
+          <div className="flex flex-col">
+            <video
+              className="[transform:rotateY(180deg)]"
+              ref={videoRef}
+              playsInline
+              autoPlay={true}
+              muted={true}
+            ></video>
+          </div>
+          <div className="felx flex-col">
+            <video
+              ref={remoteRef}
+              muted={mute}
+              playsInline
+              autoPlay={true}
+            ></video>
+            <Button onClick={toggleMute}>{mute ? "Unmute" : "Mute"}</Button>
+          </div>
         </div>
         <div className="flex flex-row gap-6 w-full">
           <Select