{
return (
+ {/* change padding to pt-10 */}
{/* screen sharing */}
diff --git a/src/components/room/grid/my-tile.tsx b/src/components/room/grid/my-tile.tsx
index d39bd29..cfda21b 100644
--- a/src/components/room/grid/my-tile.tsx
+++ b/src/components/room/grid/my-tile.tsx
@@ -1,7 +1,7 @@
import React, { useEffect, useRef } from 'react';
import { Mic, MicOff } from 'lucide-react';
import type { Layout } from '@/types';
-import { getInitials } from '@/lib/utils';
+import { cn, getInitials } from '@/lib/utils';
import {
useCameraDeviceId,
useCameraOn,
@@ -56,7 +56,14 @@ const MyTile: React.FC = ({ layout }) => {
)}
{/* Mic Status */}
-
+
{micOn ? (
= ({ peerId, layout }) => {
) : (
{/*
+
{getInitials(peerData.name)}
)}
{/* Mic Status */}
-
+
);
};
diff --git a/src/components/room/menu.tsx b/src/components/room/menu.tsx
index 82e929d..526dae1 100644
--- a/src/components/room/menu.tsx
+++ b/src/components/room/menu.tsx
@@ -7,8 +7,9 @@ const Menu = () => {
variant="ghost"
size="icon"
className="w-12 h-12 rounded-xl text-white
- bg-gradient-to-tl from-white/15 to-white/1 backdrop-blur-xl
+ bg-linear-to-tl from-white/15 to-white/1 backdrop-blur-xl
"
+ title="Coming soon"
>
{media?.mic ? (
-
- {/* Floating elements around video container */}
-
- {/* */}
- {/* */}
- {/* Left side - Meeting info */}
-
-
+
- {/*
- */}
-
*/}
- {/* Mitsi */}
-
+ {/* 
*/}
- {/* Right side - Recording indicator */}
);
diff --git a/src/components/room/join/join-camera-preview.tsx b/src/components/room/join/join-camera-preview.tsx
index f85701d..5f5dc6c 100644
--- a/src/components/room/join/join-camera-preview.tsx
+++ b/src/components/room/join/join-camera-preview.tsx
@@ -35,18 +35,9 @@ const CameraPreview = () => {
/>
) : (
-
+ {/*
REC
-
+ */}
- {/* Enhanced avatar container with animated background */}
- {/* Animated glow rings */}
-
-
-
- {/* Main avatar */}
-
@@ -74,11 +65,6 @@ const CameraPreview = () => {
+
diff --git a/src/components/ui/sonner.tsx b/src/components/ui/sonner.tsx
new file mode 100644
index 0000000..a1b647f
--- /dev/null
+++ b/src/components/ui/sonner.tsx
@@ -0,0 +1,38 @@
+import {
+ CircleCheckIcon,
+ InfoIcon,
+ Loader2Icon,
+ OctagonXIcon,
+ TriangleAlertIcon,
+} from 'lucide-react';
+import { useTheme } from 'next-themes';
+import { Toaster as Sonner, type ToasterProps } from 'sonner';
+
+const Toaster = ({ ...props }: ToasterProps) => {
+ const { theme = 'system' } = useTheme();
+
+ return (
+ (0);
+
const heartBeatIntervalRef = useRef(null);
const roomAccess = useRoomAccess();
const roomActions = useRoomActions();
- const [rejoining, setrejoining] = useState(false);
+ const [rejoining, setRejoining] = useState(false);
const { joinRoom, leaveRoom, actionHandlers } = useRoom();
useEffect(() => {
@@ -54,6 +56,7 @@ const RoomProvider = ({ children }: { children: ReactNode }) => {
(async () => {
await joinRoom();
await createWebRtcConnections();
+ await produceUserMedia();
// register heartbeat interval
heartBeatIntervalRef.current = setInterval(
sendHeartBeat,
@@ -67,20 +70,35 @@ const RoomProvider = ({ children }: { children: ReactNode }) => {
if (heartBeatIntervalRef.current)
clearInterval(heartBeatIntervalRef.current);
};
- }, [roomAccess, createWebRtcConnections, joinRoom, sendHeartBeat, leaveRoom]);
+ }, [
+ roomAccess,
+ createWebRtcConnections,
+ produceUserMedia,
+ joinRoom,
+ sendHeartBeat,
+ leaveRoom,
+ ]);
useEffect(() => {
if (roomAccess !== Access.Allowed) return;
if (!rejoining) return;
(async () => {
- closeAllProducers();
+ // closeAllProducers();
closeAllConsumers();
closeAllTransports();
await joinRoom(rejoining);
await createWebRtcConnections();
+ await produceUserMedia();
+ setRejoining(false);
+
+ if (reconnectionToastRef.current)
+ toast.dismiss(reconnectionToastRef.current);
- setrejoining(false);
+ toast.success('You are reconnected', {
+ closeButton: true,
+ richColors: true,
+ });
})().catch(err => console.log(err));
}, [
rejoining,
@@ -91,8 +109,15 @@ const RoomProvider = ({ children }: { children: ReactNode }) => {
closeAllConsumers,
closeAllTransports,
closeAllProducers,
+ produceUserMedia,
]);
+ // produce on join
+ useEffect(() => {
+ if (roomAccess !== Access.Allowed) return;
+ if (rejoining) return;
+ }, [roomAccess, rejoining]);
+
useEffect(() => {
if (!signalingService) return;
if (roomAccess !== Access.Allowed) return;
@@ -100,22 +125,24 @@ const RoomProvider = ({ children }: { children: ReactNode }) => {
const connection = signalingService.getConnection();
// TODO - NEXT LINE OF ACTIONS
connection.on('disconnect', () => {
- console.log('Disconnected from signaling server');
if (connection.active) {
+ reconnectionToastRef.current = toast.loading(
+ 'You are disconnected, attempting to reconnect',
+ {
+ position: 'top-center',
+ richColors: true,
+ }
+ );
// Attempt to reconnect
- toastActions.error('Reconnecting');
- console.log('Attempting to reconnect to signaling server...');
roomActions.setReconnecting(true);
} else {
- console.log('Connection is not active. Will not attempt to reconnect.');
roomActions.setDisconnected(true);
}
});
connection.io.on('reconnect', () => {
- console.log('Reconnected to signaling server');
roomActions.setReconnecting(false);
- setrejoining(true);
+ setRejoining(true);
});
return () => {
// Cleanup on unmount
diff --git a/src/services/media-service.ts b/src/services/media-service.ts
index 31aa5d9..de9d2cd 100644
--- a/src/services/media-service.ts
+++ b/src/services/media-service.ts
@@ -224,11 +224,13 @@ class MediaService {
throw new Error('Send transport not initialized');
}
let producer: mediasoupTypes.Producer;
- const clonedTrack = this.getTrack(source);
+ const track = this.getTrack(source);
- if (!clonedTrack)
+ if (!track)
throw `${source} track was not found -- start ${source} before you create producer`;
+ const clonedTrack = track.clone();
+
if (source === 'camera') {
// Simulcast encoding settings
const encodings = [