diff --git a/src/components/home/call-to-action.tsx b/src/components/home/call-to-action.tsx index f6daa78..4d7afb7 100644 --- a/src/components/home/call-to-action.tsx +++ b/src/components/home/call-to-action.tsx @@ -21,7 +21,7 @@ const CallToAction = () => {

- Get started with Mitsi today and transform the way your meetings + Get started with Mitsi today and transform your meetings

diff --git a/src/components/home/footer.tsx b/src/components/home/footer.tsx index c717f94..1eb4d20 100644 --- a/src/components/home/footer.tsx +++ b/src/components/home/footer.tsx @@ -36,7 +36,7 @@ const Footer = () => { Support GitHub diff --git a/src/components/home/navbar.tsx b/src/components/home/navbar.tsx index 2615c89..a883e1d 100644 --- a/src/components/home/navbar.tsx +++ b/src/components/home/navbar.tsx @@ -55,7 +55,7 @@ const Navbar = () => {
- + diff --git a/src/components/room/grid/my-tile.tsx b/src/components/room/grid/my-tile.tsx index cfda21b..ea6c75c 100644 --- a/src/components/room/grid/my-tile.tsx +++ b/src/components/room/grid/my-tile.tsx @@ -26,13 +26,14 @@ const MyTile: React.FC = ({ layout }) => { 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 (
{/* Video/Avatar Area */} diff --git a/src/components/room/join/join-form.tsx b/src/components/room/join/join-form.tsx index b4842b6..b7d262d 100644 --- a/src/components/room/join/join-form.tsx +++ b/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({ 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 ( diff --git a/src/components/room/join/join-header.tsx b/src/components/room/join/join-header.tsx index edec35c..f029359 100644 --- a/src/components/room/join/join-header.tsx +++ b/src/components/room/join/join-header.tsx @@ -48,9 +48,9 @@ const Header = () => {
)} -
+ {/*
Setup your audio and video before joining -
+
*/}
{/* Enhanced Status Badge */} diff --git a/src/components/room/screen.tsx b/src/components/room/screen.tsx index ad4382c..7a4e0b2 100644 --- a/src/components/room/screen.tsx +++ b/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' diff --git a/src/hooks/use-media.ts b/src/hooks/use-media.ts index b62a62a..e1c90c4 100644 --- a/src/hooks/use-media.ts +++ b/src/hooks/use-media.ts @@ -210,7 +210,7 @@ export const useMedia = () => { 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] ); diff --git a/src/hooks/use-room.ts b/src/hooks/use-room.ts index 0c78d2a..a480d6a 100644 --- a/src/hooks/use-room.ts +++ b/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); } diff --git a/src/lib/utils.ts b/src/lib/utils.ts index 9719624..a277162 100644 --- a/src/lib/utils.ts +++ b/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 }, }, diff --git a/src/providers/room-provider.tsx b/src/providers/room-provider.tsx index 65476c4..ffa7ac6 100644 --- a/src/providers/room-provider.tsx +++ b/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(); } }); diff --git a/src/services/media-service.ts b/src/services/media-service.ts index 95ae93d..0a0d83a 100644 --- a/src/services/media-service.ts +++ b/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'