Setup

src/components/home/call-to-action.tsx

@@ -21,7 +21,7 @@ const CallToAction = () => {
         </h2>
 
         <p className="text-xl text-slate-400 mb-16 font-light max-w-2xl mx-auto leading-relaxed">
-          Get started with Mitsi today and transform the way your meetings
+          Get started with Mitsi today and transform your meetings
         </p>
 
         <div className="space-y-8">

src/components/home/footer.tsx

@@ -36,7 +36,7 @@ const Footer = () => {
               Support
             </a>
             <a
-              href="https://github.com/softhon/mitsi-web"
+              href="https://github.com/softhon"
               className="hover:text-white transition-colors"
             >
               GitHub

src/components/home/navbar.tsx

@@ -55,7 +55,7 @@ const Navbar = () => {
             </a>
             <div className="h-6 w-px bg-slate-700" />
 
-            <a href="https://github.com/softhon/mitsi-web" target="_blank">
+            <a href="https://github.com/softhon" target="_blank">
               <Button
                 variant="ghost"
                 size="sm"

src/components/media-control-button.tsx

@@ -15,12 +15,12 @@ const MediaControlButton: React.FC<MediaControlButtonProps> = ({
 }) => (
   <Button
     onClick={onClick}
-    variant="ghost"
+    variant={isActive ? 'default' : 'ghost'}
     size="icon"
     className={cn(
-      'w-12 h-12 rounded-xl transition-all duration-200 cursor-pointer text-white bg-gradient-to-br',
+      'w-12 h-12 rounded-xl transition-all duration-200 cursor-pointer text-white bg-linear-to-br ',
       isActive
-        ? 'bg-red-500/90 hover:bg-red-500 '
+        ? 'bg-red-500 hover:bg-red-500/90 '
         : 'from-white/15 to-white/1  backdrop-blur-xl',
 
       className

src/components/room/end.tsx

@@ -9,9 +9,9 @@ const End = () => {
     <div className="flex items-center gap-1">
       <Button
         onClick={handleLeaveCall}
-        variant="ghost"
+        // variant="def"
         size="icon"
-        className="w-12 h-12 rounded-xl bg-red-500 hover:bg-red-600 text-white ml-4"
+        className="w-12 h-12 rounded-xl bg-red-500 hover:bg-red-500/90 text-white ml-4 cursor-pointer"
       >
         <PhoneOff className="w-5 h-5" />
       </Button>

src/components/room/grid/my-tile.tsx

@@ -26,13 +26,14 @@
     if (!cameraOn || !videoRef.current) return;
     const track = getTrack('camera');
     if (!track) return;
+    console.log({ track });
     videoRef.current.srcObject = new MediaStream([track]);
   }, [cameraOn, cameraDeviceId, getTrack]);
 
   if (!peerMe) return null;
   return (
     <div
-      className=" bg-gradient-to-br from-white/5 to-white/2 border  border-white/10 backdrop-blur-xl rounded-lg overflow-hidden flex flex-col relative transition-all duration-300 ease-in-out"
+      className=" bg-linear-to-br from-white/5 to-white/2 border  border-white/10 backdrop-blur-xl rounded-lg overflow-hidden flex flex-col relative transition-all duration-300 ease-in-out"
       style={{ width: `${layout.width}px`, height: `${layout.height}px` }}
     >
       {/* Video/Avatar Area */}

src/components/room/join/join-form.tsx

@@ -20,6 +20,8 @@ import { useSignaling } from '@/hooks/use-signaling';
 import { Actions } from '@/types/actions';
 import { Button } from '../../ui/button';
 import { Loader2 } from 'lucide-react';
+import { toast } from 'sonner';
+// import { useEffect } from 'react';
 
 const FormValues = z.object({
   name: z
@@ -43,10 +45,12 @@ const JoinForm = () => {
   const form = useForm<FormType>({
     resolver: zodResolver(FormValues),
     defaultValues: {
-      name: '',
+      name: localStorage.getItem('name') || '',
     },
   });
+
   const name = form.watch('name');
+  form.setFocus('name');
 
   const onSubmit = async (data: FormType) => {
     try {
@@ -57,20 +61,22 @@ const JoinForm = () => {
 
       peerActions.addData(peerData, true);
 
-      const res = await signalingService?.sendMessage<{ roomData: RoomData }>({
+      await signalingService?.sendMessage<{ roomData: RoomData }>({
         action: Actions.GetRoomData,
         args: {
           roomId: roomData?.roomId,
         },
       });
-
-      console.log(Actions.GetRoomData, res);
+      localStorage.setItem('name', data.name);
       roomActions.setAccess(Access.Allowed);
     } catch (error) {
-      console.log(error);
+      if (error instanceof Error) {
+        toast.error(error.message, {
+          richColors: true,
+          position: 'top-right',
+        });
+      }
     }
-
-    console.log(data);
   };
 
   return (

src/components/room/join/join-header.tsx

@@ -48,9 +48,9 @@ const Header = () => {
             </Tooltip>
           </div>
         )}
-        <div className="text-gray-400 md:text-lg relative">
+        {/* <div className="text-gray-400 md:text-lg relative">
           Setup your audio and video before joining
-        </div>
+        </div> */}
       </div>
 
       {/* Enhanced Status Badge */}

src/components/room/screen.tsx

@@ -15,7 +15,7 @@ const Screen = () => {
       variant="ghost"
       size="icon"
       className={cn(
-        'w-12 h-12 rounded-xl transition-all duration-200  hidden md:flex bg-gradient-to-tl text-white',
+        'w-12 h-12 rounded-xl transition-all duration-200  hidden md:flex bg-linear-to-tl text-white cursor-pointer',
         screenOn
           ? 'bg-blue-600 hover:bg-blue-700 '
           : ' from-white/15 to-white/1  backdrop-blur-xl'

src/hooks/use-media.ts

@@ -210,7 +210,7 @@
     async (mediaSource: 'mic' | 'camera', deviceId: string) => {
       if (!mediaService) throw new Error('MediaService not initialized');
       await mediaService.startUserMedia(mediaSource, deviceId);
-      if (roomAccess == Access.Allowed) createProducer(mediaSource);
+      if (roomAccess === Access.Allowed) createProducer(mediaSource);
     },
     [mediaService, roomAccess, createProducer]
   );
@@ -324,7 +324,7 @@
   const requestCameraAndMicPermissions = useCallback(() => {
     requestMediaPermissions()
       .catch((err: MediaPermissionsError) => {
         console.log(err);
       })
       .finally(async () => {
         try {

src/hooks/use-room.ts

@@ -42,7 +42,6 @@ export const useRoom = () => {
         peerId: getPeerId(),
       },
     });
-    console.log(Actions.JoinVisitors, res);
     for (const peer of res?.peers || []) {
       peerActions.addData(peer);
     }

src/lib/utils.ts

@@ -208,28 +208,28 @@ export const getSimulcastEncoding = (source: ProducerSource) => {
 
 export const videoConstraints = (deviceId: string) => ({
   video: {
-    deviceId: deviceId ? { ideal: deviceId } : undefined,
+    deviceId: deviceId ? { exact: deviceId } : undefined,
     height: {
-      ideal: 480, // Moderate resolution (480p)
-      max: 720, // Cap at 720p to limit data
-      min: 240, // Minimum fallback
+      ideal: 480,
+      max: 720,
+      min: 240,
     },
     width: {
-      ideal: 854, // Matches 480p aspect ratio (16:9)
-      max: 1280, // Cap at 720p width
-      min: 320, // Minimum fallback
+      ideal: 854,
+      max: 1280,
+      min: 320,
     },
     frameRate: {
-      ideal: 24, // Smooth motion with lower data than 30fps
-      max: 30, // Reasonable upper limit
-      min: 15, // Minimum for basic fluidity
+      ideal: 24,
+      max: 30,
+      min: 15,
     },
   },
 });
 
 export const audioContraints = (deviceId: string) => ({
   audio: {
-    deviceId: deviceId ? { ideal: deviceId } : undefined,
+    deviceId: deviceId ? { exact: deviceId } : undefined,
     echoCancellation: { ideal: true },
     noiseSuppression: { ideal: true },
   },

src/providers/room-provider.tsx

@@ -91,6 +91,7 @@ const RoomProvider = ({ children }: { children: ReactNode }) => {
 
       toast.success('You are reconnected', {
         closeButton: true,
+        position: 'top-center',
         richColors: true,
       });
     })().catch(err => console.log(err));
@@ -123,6 +124,9 @@ const RoomProvider = ({ children }: { children: ReactNode }) => {
     // TODO - NEXT LINE OF ACTIONS
     connection.on('disconnect', () => {
       if (connection.active) {
+        if (reconnectionToastRef.current)
+          toast.dismiss(reconnectionToastRef.current);
+
         reconnectionToastRef.current = toast.loading(
           'You are disconnected, attempting to reconnect',
           {
@@ -133,7 +137,6 @@ const RoomProvider = ({ children }: { children: ReactNode }) => {
         // Attempt to reconnect
         roomActions.setReconnecting(true);
       } else {
-        // roomActions.setDisconnected(true);
         window.location.reload();
       }
     });

src/services/media-service.ts

@@ -70,8 +70,7 @@ class MediaService {
   async startUserMedia(mediaSource: 'mic' | 'camera', deviceId: string) {
     const mediaTrack = this.getTrack(mediaSource);
     if (mediaTrack && mediaTrack.enabled) {
-      if (mediaTrack.getSettings().deviceId === deviceId) return;
-      mediaTrack.stop();
+      if (mediaTrack.getSettings().deviceId === deviceId) mediaTrack.stop();
     }
     const stream = await navigator.mediaDevices.getUserMedia(
       mediaSource === 'mic'