@sansavision/create-pulse 0.4.4 → 0.4.6

package/templates/nextjs-auth-node-demo/src/app/dashboard/demos/video-call/page.tsx

@@ -0,0 +1,840 @@
+"use client";
+
+import { useState, useEffect, useRef, useCallback } from "react";
+import { useSession } from "@/lib/auth-client";
+import { connectWithAuth } from "@/lib/pulse";
+import {
+    Video,
+    VideoOff,
+    Mic,
+    MicOff,
+    PhoneCall,
+    PhoneOff,
+    Users,
+    Wifi,
+    WifiOff,
+    Shield,
+    Loader2,
+    Monitor,
+    Copy,
+    Check,
+    Maximize,
+    Minimize,
+} from "lucide-react";
+import type { PulseConnection, PulseStream } from "@sansavision/pulse-sdk";
+
+interface Participant {
+    id: string;
+    name: string;
+    stream: MediaStream | null;
+    pc?: RTCPeerConnection;
+}
+
+export default function VideoCallPage() {
+    const { data: session } = useSession();
+    const [connected, setConnected] = useState(false);
+    const [inCall, setInCall] = useState(false);
+    const [roomId, setRoomId] = useState("pulse-room-" + Math.random().toString(36).slice(2, 8));
+    const [joinRoomId, setJoinRoomId] = useState("");
+    const [joinError, setJoinError] = useState("");
+    const [localStream, setLocalStream] = useState<MediaStream | null>(null);
+    const [videoEnabled, setVideoEnabled] = useState(true);
+    const [audioEnabled, setAudioEnabled] = useState(true);
+    const [participants, setParticipants] = useState<Participant[]>([]);
+    const [connecting, setConnecting] = useState(true);
+    const [callDuration, setCallDuration] = useState(0);
+    const [copied, setCopied] = useState(false);
+    const [screenSharing, setScreenSharing] = useState(false);
+    const [isFullscreen, setIsFullscreen] = useState(false);
+
+    const localVideoRef = useRef<HTMLVideoElement>(null);
+    const connRef = useRef<PulseConnection | null>(null);
+    const signalStreamRef = useRef<PulseStream | null>(null);
+    const peerConnectionsRef = useRef<Map<string, RTCPeerConnection>>(new Map());
+    const callTimerRef = useRef<NodeJS.Timeout | null>(null);
+    const callContainerRef = useRef<HTMLDivElement>(null);
+
+    const userName = session?.user?.name || "Anonymous";
+    const userId = session?.user?.id || "unknown";
+
+    // ICE servers for WebRTC
+    const iceServers: RTCIceServer[] = [
+        { urls: "stun:stun.l.google.com:19302" },
+        { urls: "stun:stun1.l.google.com:19302" },
+    ];
+
+    // Connect to Pulse relay
+    useEffect(() => {
+        if (!session) return;
+        let cancelled = false;
+
+        async function init() {
+            try {
+                const connection = await connectWithAuth();
+                if (cancelled) return;
+                connRef.current = connection;
+                setConnected(true);
+                setConnecting(false);
+                connection.on("disconnect", () => setConnected(false));
+                connection.on("reconnected", () => setConnected(true));
+            } catch (err) {
+                console.error("Failed to connect:", err);
+                setConnecting(false);
+            }
+        }
+
+        init();
+        return () => {
+            cancelled = true;
+            connRef.current?.disconnect();
+        };
+    }, [session]);
+
+    // Get local media
+    const getLocalMedia = useCallback(async () => {
+        try {
+            const stream = await navigator.mediaDevices.getUserMedia({
+                video: {
+                    width: { ideal: 1280 },
+                    height: { ideal: 720 },
+                    facingMode: "user",
+                },
+                audio: {
+                    echoCancellation: true,
+                    noiseSuppression: true,
+                },
+            });
+            setLocalStream(stream);
+            if (localVideoRef.current) {
+                localVideoRef.current.srcObject = stream;
+            }
+            return stream;
+        } catch (err) {
+            console.error("Failed to get media:", err);
+            // Try audio-only
+            try {
+                const audioStream = await navigator.mediaDevices.getUserMedia({
+                    video: false,
+                    audio: true,
+                });
+                setLocalStream(audioStream);
+                return audioStream;
+            } catch {
+                console.error("No media available");
+                return null;
+            }
+        }
+    }, []);
+
+    // Create RTCPeerConnection for a remote participant
+    const createPeerConnection = useCallback(
+        (remoteId: string, remoteName: string) => {
+            const pc = new RTCPeerConnection({ iceServers });
+
+            // Add local tracks
+            if (localStream) {
+                localStream.getTracks().forEach((track) => {
+                    pc.addTrack(track, localStream);
+                });
+            }
+
+            // Handle incoming tracks
+            pc.ontrack = (event) => {
+                const [remoteStream] = event.streams;
+                setParticipants((prev) => {
+                    const existing = prev.find((p) => p.id === remoteId);
+                    if (existing) {
+                        return prev.map((p) =>
+                            p.id === remoteId ? { ...p, stream: remoteStream, pc } : p
+                        );
+                    }
+                    return [
+                        ...prev,
+                        { id: remoteId, name: remoteName, stream: remoteStream, pc },
+                    ];
+                });
+            };
+
+            // Handle ICE candidates
+            pc.onicecandidate = (event) => {
+                if (event.candidate && signalStreamRef.current) {
+                    signalStreamRef.current.send(
+                        JSON.stringify({
+                            type: "ice-candidate",
+                            candidate: event.candidate.toJSON(),
+                            from: userId,
+                            fromName: userName,
+                            to: remoteId,
+                        })
+                    );
+                }
+            };
+
+            pc.oniceconnectionstatechange = () => {
+                if (
+                    pc.iceConnectionState === "disconnected" ||
+                    pc.iceConnectionState === "failed"
+                ) {
+                    setParticipants((prev) => prev.filter((p) => p.id !== remoteId));
+                    pc.close();
+                    peerConnectionsRef.current.delete(remoteId);
+                }
+            };
+
+            peerConnectionsRef.current.set(remoteId, pc);
+            return pc;
+        },
+        [localStream, userId, userName]
+    );
+
+    // Join a video call room
+    const joinCall = useCallback(
+        async (room: string) => {
+            if (!connRef.current || !session) return;
+            const validRoomRegex = /^pulse-room-[a-z0-9]{6}$/;
+            if (!validRoomRegex.test(room)) {
+                setJoinError("Invalid room ID format. Expected pulse-room-xxxxxx");
+                return;
+            }
+            setJoinError("");
+
+            const stream = await getLocalMedia();
+            if (!stream) return;
+
+            const signalStream = connRef.current.stream(`video-call:${room}`);
+            signalStreamRef.current = signalStream;
+
+            // Announce join
+            signalStream.send(
+                JSON.stringify({
+                    type: "join",
+                    from: userId,
+                    fromName: userName,
+                    room,
+                })
+            );
+
+            // Listen for signaling messages
+            signalStream.on("data", async (data: Uint8Array) => {
+                try {
+                    const msg = JSON.parse(new TextDecoder().decode(data));
+
+                    if (msg.type === "join" && msg.from !== userId) {
+                        // New participant joined — send them an offer
+                        const pc = createPeerConnection(msg.from, msg.fromName);
+                        stream.getTracks().forEach((track) => {
+                            pc.addTrack(track, stream);
+                        });
+                        const offer = await pc.createOffer();
+                        await pc.setLocalDescription(offer);
+                        signalStream.send(
+                            JSON.stringify({
+                                type: "offer",
+                                sdp: offer.sdp,
+                                from: userId,
+                                fromName: userName,
+                                to: msg.from,
+                            })
+                        );
+                    } else if (msg.type === "offer" && msg.to === userId) {
+                        // Received offer — create answer
+                        const pc = createPeerConnection(msg.from, msg.fromName);
+                        stream.getTracks().forEach((track) => {
+                            pc.addTrack(track, stream);
+                        });
+                        await pc.setRemoteDescription(
+                            new RTCSessionDescription({ type: "offer", sdp: msg.sdp })
+                        );
+                        const answer = await pc.createAnswer();
+                        await pc.setLocalDescription(answer);
+                        signalStream.send(
+                            JSON.stringify({
+                                type: "answer",
+                                sdp: answer.sdp,
+                                from: userId,
+                                fromName: userName,
+                                to: msg.from,
+                            })
+                        );
+                    } else if (msg.type === "answer" && msg.to === userId) {
+                        // Received answer
+                        const pc = peerConnectionsRef.current.get(msg.from);
+                        if (pc) {
+                            await pc.setRemoteDescription(
+                                new RTCSessionDescription({ type: "answer", sdp: msg.sdp })
+                            );
+                        }
+                    } else if (msg.type === "ice-candidate" && msg.to === userId) {
+                        // Received ICE candidate
+                        const pc = peerConnectionsRef.current.get(msg.from);
+                        if (pc && msg.candidate) {
+                            await pc.addIceCandidate(new RTCIceCandidate(msg.candidate));
+                        }
+                    } else if (msg.type === "leave" && msg.from !== userId) {
+                        // Participant left
+                        const pc = peerConnectionsRef.current.get(msg.from);
+                        if (pc) {
+                            pc.close();
+                            peerConnectionsRef.current.delete(msg.from);
+                        }
+                        setParticipants((prev) => prev.filter((p) => p.id !== msg.from));
+                    }
+                } catch {
+                    // ignore parse errors
+                }
+            });
+
+            setInCall(true);
+            setRoomId(room);
+
+            // Start call timer
+            callTimerRef.current = setInterval(() => {
+                setCallDuration((prev) => prev + 1);
+            }, 1000);
+        },
+        [session, userId, userName, getLocalMedia, createPeerConnection]
+    );
+
+    // Leave call
+    const leaveCall = useCallback(() => {
+        // Notify others
+        if (signalStreamRef.current) {
+            signalStreamRef.current.send(
+                JSON.stringify({
+                    type: "leave",
+                    from: userId,
+                    fromName: userName,
+                })
+            );
+        }
+
+        // Close peer connections
+        peerConnectionsRef.current.forEach((pc) => pc.close());
+        peerConnectionsRef.current.clear();
+
+        // Stop local media
+        localStream?.getTracks().forEach((track) => track.stop());
+        setLocalStream(null);
+        setParticipants([]);
+        setInCall(false);
+        setCallDuration(0);
+        setScreenSharing(false);
+
+        if (callTimerRef.current) {
+            clearInterval(callTimerRef.current);
+            callTimerRef.current = null;
+        }
+    }, [localStream, userId, userName]);
+
+    // Toggle video
+    const toggleVideo = useCallback(() => {
+        if (localStream) {
+            localStream.getVideoTracks().forEach((track) => {
+                track.enabled = !track.enabled;
+            });
+            setVideoEnabled((prev) => !prev);
+        }
+    }, [localStream]);
+
+    // Toggle audio
+    const toggleAudio = useCallback(() => {
+        if (localStream) {
+            localStream.getAudioTracks().forEach((track) => {
+                track.enabled = !track.enabled;
+            });
+            setAudioEnabled((prev) => !prev);
+        }
+    }, [localStream]);
+
+    // Screen share
+    const toggleScreenShare = useCallback(async () => {
+        if (screenSharing) {
+            // Stop screen sharing, restore camera
+            const stream = await getLocalMedia();
+            if (stream) {
+                peerConnectionsRef.current.forEach((pc) => {
+                    const senders = pc.getSenders();
+                    const videoSender = senders.find((s) => s.track?.kind === "video");
+                    const videoTrack = stream.getVideoTracks()[0];
+                    if (videoSender && videoTrack) {
+                        videoSender.replaceTrack(videoTrack);
+                    }
+                });
+            }
+            setScreenSharing(false);
+        } else {
+            try {
+                const screenStream = await navigator.mediaDevices.getDisplayMedia({
+                    video: true,
+                });
+                const screenTrack = screenStream.getVideoTracks()[0];
+
+                // Replace video track in all peer connections
+                peerConnectionsRef.current.forEach((pc) => {
+                    const senders = pc.getSenders();
+                    const videoSender = senders.find(
+                        (s) => s.track?.kind === "video"
+                    );
+                    if (videoSender) {
+                        videoSender.replaceTrack(screenTrack);
+                    }
+                });
+
+                // Update local video
+                if (localVideoRef.current) {
+                    localVideoRef.current.srcObject = screenStream;
+                }
+                setScreenSharing(true);
+
+                // When user stops screen share from browser
+                screenTrack.onended = () => {
+                    toggleScreenShare();
+                };
+            } catch {
+                console.error("Screen share cancelled");
+            }
+        }
+    }, [screenSharing, getLocalMedia]);
+
+    // Copy room ID
+    const copyRoomId = useCallback(() => {
+        navigator.clipboard.writeText(roomId);
+        setCopied(true);
+        setTimeout(() => setCopied(false), 2000);
+    }, [roomId]);
+
+    // Fullscreen toggle
+    const toggleFullscreen = useCallback(() => {
+        const container = callContainerRef.current;
+        if (!container) return;
+        if (!document.fullscreenElement) {
+            container.requestFullscreen().then(() => setIsFullscreen(true)).catch(() => { });
+        } else {
+            document.exitFullscreen().then(() => setIsFullscreen(false)).catch(() => { });
+        }
+    }, []);
+
+    useEffect(() => {
+        const handler = () => setIsFullscreen(!!document.fullscreenElement);
+        document.addEventListener("fullscreenchange", handler);
+        return () => document.removeEventListener("fullscreenchange", handler);
+    }, []);
+
+    // Format call duration
+    const formatDuration = (seconds: number) => {
+        const mins = Math.floor(seconds / 60);
+        const secs = seconds % 60;
+        return `${mins.toString().padStart(2, "0")}:${secs.toString().padStart(2, "0")}`;
+    };
+
+    // Attach local stream to video element whenever it changes
+    useEffect(() => {
+        if (localVideoRef.current && localStream && inCall) {
+            localVideoRef.current.srcObject = localStream;
+            localVideoRef.current.play().catch(() => { });
+        }
+    }, [localStream, inCall]);
+
+    // Clean up on unmount
+    useEffect(() => {
+        return () => {
+            localStream?.getTracks().forEach((track) => track.stop());
+            peerConnectionsRef.current.forEach((pc) => pc.close());
+            if (callTimerRef.current) clearInterval(callTimerRef.current);
+        };
+    }, [localStream]);
+
+    // Total grid items = local + remote participants
+    const totalVideos = 1 + participants.length;
+    const gridCols =
+        totalVideos <= 1
+            ? "grid-cols-1"
+            : totalVideos <= 4
+                ? "grid-cols-2"
+                : totalVideos <= 9
+                    ? "grid-cols-3"
+                    : "grid-cols-4";
+
+    return (
+        <div ref={callContainerRef} className="h-screen flex flex-col bg-[#0f172a]">
+            {/* Header */}
+            <div className="p-4 border-b border-slate-800 flex items-center justify-between">
+                <div className="flex items-center gap-3">
+                    <div className="w-10 h-10 rounded-xl bg-gradient-to-br from-indigo-500 to-sky-500 flex items-center justify-center">
+                        <Video className="w-5 h-5 text-white" />
+                    </div>
+                    <div>
+                        <h1 className="text-lg font-semibold">Video Call</h1>
+                        <p className="text-xs text-slate-500">
+                            {inCall
+                                ? `Room: ${roomId} · ${formatDuration(callDuration)}`
+                                : "Peer-to-peer video via Pulse signaling"}
+                        </p>
+                    </div>
+                </div>
+                <div className="flex items-center gap-4">
+                    <div className="flex items-center gap-2">
+                        {connected ? (
+                            <>
+                                <Wifi className="w-4 h-4 text-green-400" />
+                                <span className="text-xs text-green-400">Connected</span>
+                            </>
+                        ) : (
+                            <>
+                                <WifiOff className="w-4 h-4 text-red-400" />
+                                <span className="text-xs text-red-400">Disconnected</span>
+                            </>
+                        )}
+                    </div>
+                    {inCall && (
+                        <div className="flex items-center gap-2 px-3 py-1.5 rounded-lg bg-slate-800">
+                            <Users className="w-3.5 h-3.5 text-slate-400" />
+                            <span className="text-xs text-slate-400">
+                                {participants.length + 1} in call
+                            </span>
+                        </div>
+                    )}
+                </div>
+            </div>
+
+            {/* Main Content */}
+            <div className="flex-1 overflow-hidden">
+                {connecting ? (
+                    <div className="flex items-center justify-center h-full">
+                        <Loader2 className="w-6 h-6 animate-spin text-purple-500 mr-2" />
+                        <span className="text-slate-400">Connecting to Pulse relay...</span>
+                    </div>
+                ) : !inCall ? (
+                    /* Lobby */
+                    <div className="flex items-center justify-center h-full p-8">
+                        <div className="max-w-lg w-full space-y-8">
+                            {/* Create Room */}
+                            <div className="glass rounded-2xl p-8">
+                                <div className="flex items-center gap-3 mb-6">
+                                    <div className="w-12 h-12 rounded-xl bg-gradient-to-br from-indigo-500 to-sky-500 flex items-center justify-center">
+                                        <Video className="w-6 h-6 text-white" />
+                                    </div>
+                                    <div>
+                                        <h2 className="text-xl font-semibold">Start a Video Call</h2>
+                                        <p className="text-sm text-slate-400">
+                                            Create a room and invite others
+                                        </p>
+                                    </div>
+                                </div>
+                                <div className="flex items-center gap-2 mb-4">
+                                    <div className="flex-1 px-4 py-2.5 rounded-lg bg-slate-800/50 border border-slate-700 text-sm font-mono text-cyan-400">
+                                        {roomId}
+                                    </div>
+                                    <button
+                                        onClick={copyRoomId}
+                                        className="px-3 py-2.5 rounded-lg bg-slate-800 hover:bg-slate-700 border border-slate-700 transition-colors"
+                                    >
+                                        {copied ? (
+                                            <Check className="w-4 h-4 text-green-400" />
+                                        ) : (
+                                            <Copy className="w-4 h-4 text-slate-400" />
+                                        )}
+                                    </button>
+                                </div>
+                                <button
+                                    onClick={() => joinCall(roomId)}
+                                    disabled={!connected}
+                                    className="w-full py-3 rounded-xl bg-gradient-to-r from-indigo-600 to-sky-600 hover:from-indigo-500 hover:to-sky-500 text-sm font-semibold transition-all disabled:opacity-50 disabled:cursor-not-allowed flex items-center justify-center gap-2"
+                                >
+                                    <PhoneCall className="w-4 h-4" />
+                                    Start Call
+                                </button>
+                            </div>
+
+                            {/* Join Room */}
+                            <div className="glass rounded-2xl p-8">
+                                <h2 className="text-lg font-semibold mb-4">Join Existing Room</h2>
+                                <div className="flex gap-2">
+                                    <input
+                                        type="text"
+                                        value={joinRoomId}
+                                        onChange={(e) => {
+                                            setJoinRoomId(e.target.value);
+                                            setJoinError("");
+                                        }}
+                                        placeholder="Enter room ID (pulse-room-xxxxxx)..."
+                                        className="flex-1 px-4 py-2.5 rounded-xl bg-slate-800/50 border border-slate-700 focus:border-indigo-500 focus:ring-1 focus:ring-indigo-500 outline-none text-sm transition-colors placeholder:text-slate-600"
+                                    />
+                                    <button
+                                        onClick={() => joinRoomId && joinCall(joinRoomId)}
+                                        disabled={!connected || !joinRoomId.trim()}
+                                        className="px-6 py-2.5 rounded-xl bg-indigo-600 hover:bg-indigo-500 text-sm font-semibold transition-all disabled:opacity-50 disabled:cursor-not-allowed"
+                                    >
+                                        Join
+                                    </button>
+                                </div>
+                                {joinError && <p className="text-red-400 text-xs mt-2">{joinError}</p>}
+                            </div>
+
+                            {/* Info */}
+                            <div className="glass rounded-xl p-5 border-l-4 border-indigo-500">
+                                <h3 className="text-sm font-semibold text-indigo-400 mb-1">
+                                    💡 How It Works
+                                </h3>
+                                <p className="text-sm text-slate-400">
+                                    Video calls use Pulse as the signaling layer for WebRTC peer
+                                    connections. The relay handles SDP offer/answer exchange and ICE
+                                    candidate relay — media flows peer-to-peer.
+                                </p>
+                            </div>
+                        </div>
+                    </div>
+                ) : (
+                    /* In Call — Video Grid */
+                    <div className="h-full p-4 flex flex-col">
+                        <div className={`flex-1 grid ${gridCols} gap-3 auto-rows-fr`}>
+                            {/* Local Video */}
+                            <div className="relative rounded-2xl overflow-hidden bg-slate-900 border border-slate-800 group">
+                                <video
+                                    ref={localVideoRef}
+                                    autoPlay
+                                    playsInline
+                                    muted
+                                    className={`w-full h-full object-cover ${!videoEnabled ? "hidden" : ""}`}
+                                />
+                                {!videoEnabled && (
+                                    <div className="absolute inset-0 flex items-center justify-center">
+                                        <div className="w-20 h-20 rounded-full bg-gradient-to-br from-indigo-500 to-sky-500 flex items-center justify-center text-2xl font-bold">
+                                            {userName.charAt(0).toUpperCase()}
+                                        </div>
+                                    </div>
+                                )}
+                                <div className="absolute bottom-3 left-3 flex items-center gap-2">
+                                    <span className="px-2.5 py-1 rounded-md bg-black/60 backdrop-blur text-xs font-medium">
+                                        {userName} (You)
+                                    </span>
+                                    {!audioEnabled && (
+                                        <span className="px-2 py-1 rounded-md bg-red-500/80 backdrop-blur text-xs">
+                                            <MicOff className="w-3 h-3" />
+                                        </span>
+                                    )}
+                                </div>
+                                {screenSharing && (
+                                    <div className="absolute top-3 left-3 flex items-center gap-1.5 px-2.5 py-1 rounded-md bg-green-500/80 backdrop-blur text-xs font-medium">
+                                        <Monitor className="w-3 h-3" />
+                                        Sharing Screen
+                                    </div>
+                                )}
+                                <button
+                                    onClick={(e) => {
+                                        const target = e.currentTarget.parentElement;
+                                        if (!document.fullscreenElement) {
+                                            target?.requestFullscreen().catch(() => { });
+                                        } else {
+                                            document.exitFullscreen().catch(() => { });
+                                        }
+                                    }}
+                                    className="absolute top-3 right-3 p-1.5 rounded-lg bg-black/50 hover:bg-black/70 text-white backdrop-blur transition-colors opacity-0 group-hover:opacity-100"
+                                >
+                                    <Maximize className="w-4 h-4" />
+                                </button>
+                            </div>
+
+                            {/* Remote Participants */}
+                            {participants.map((participant) => (
+                                <RemoteVideo
+                                    key={participant.id}
+                                    participant={participant}
+                                />
+                            ))}
+
+                            {/* Empty slots for visual balance */}
+                            {participants.length === 0 && (
+                                <div className="rounded-2xl border-2 border-dashed border-slate-800 flex items-center justify-center">
+                                    <div className="text-center">
+                                        <Users className="w-8 h-8 text-slate-700 mx-auto mb-2" />
+                                        <p className="text-sm text-slate-600">Waiting for others...</p>
+                                        <p className="text-xs text-slate-700 mt-1">
+                                            Share room ID: <span className="text-cyan-500 font-mono">{roomId}</span>
+                                        </p>
+                                    </div>
+                                </div>
+                            )}
+                        </div>
+
+                        {/* Call Controls */}
+                        <div className="flex items-center justify-center gap-3 py-4 mt-3">
+                            <button
+                                onClick={toggleAudio}
+                                className={`w-12 h-12 rounded-full flex items-center justify-center transition-all ${audioEnabled
+                                    ? "bg-slate-700 hover:bg-slate-600"
+                                    : "bg-red-500 hover:bg-red-400"
+                                    }`}
+                            >
+                                {audioEnabled ? (
+                                    <Mic className="w-5 h-5" />
+                                ) : (
+                                    <MicOff className="w-5 h-5" />
+                                )}
+                            </button>
+                            <button
+                                onClick={toggleVideo}
+                                className={`w-12 h-12 rounded-full flex items-center justify-center transition-all ${videoEnabled
+                                    ? "bg-slate-700 hover:bg-slate-600"
+                                    : "bg-red-500 hover:bg-red-400"
+                                    }`}
+                            >
+                                {videoEnabled ? (
+                                    <Video className="w-5 h-5" />
+                                ) : (
+                                    <VideoOff className="w-5 h-5" />
+                                )}
+                            </button>
+                            <button
+                                onClick={toggleScreenShare}
+                                className={`w-12 h-12 rounded-full flex items-center justify-center transition-all ${screenSharing
+                                    ? "bg-green-500 hover:bg-green-400"
+                                    : "bg-slate-700 hover:bg-slate-600"
+                                    }`}
+                            >
+                                <Monitor className="w-5 h-5" />
+                            </button>
+                            <button
+                                onClick={toggleFullscreen}
+                                className="w-12 h-12 rounded-full bg-slate-700 hover:bg-slate-600 flex items-center justify-center transition-all"
+                                title={isFullscreen ? "Exit fullscreen" : "Fullscreen"}
+                            >
+                                {isFullscreen ? (
+                                    <Minimize className="w-5 h-5" />
+                                ) : (
+                                    <Maximize className="w-5 h-5" />
+                                )}
+                            </button>
+                            <button
+                                onClick={copyRoomId}
+                                className="w-12 h-12 rounded-full bg-slate-700 hover:bg-slate-600 flex items-center justify-center transition-all"
+                                title="Copy Room ID"
+                            >
+                                {copied ? (
+                                    <Check className="w-5 h-5 text-green-400" />
+                                ) : (
+                                    <Copy className="w-5 h-5" />
+                                )}
+                            </button>
+                            <button
+                                onClick={leaveCall}
+                                className="w-14 h-12 rounded-full bg-red-600 hover:bg-red-500 flex items-center justify-center transition-all"
+                            >
+                                <PhoneOff className="w-5 h-5" />
+                            </button>
+                        </div>
+                    </div>
+                )}
+            </div>
+        </div>
+    );
+}
+
+/* Remote video component */
+function RemoteVideo({ participant }: { participant: Participant }) {
+    const videoRef = useRef<HTMLVideoElement>(null);
+    const [stats, setStats] = useState({ rtt: 0, bitrate: 0, packetLoss: 0 });
+
+    useEffect(() => {
+        if (videoRef.current && participant.stream) {
+            videoRef.current.srcObject = participant.stream;
+            videoRef.current.play().catch(() => { });
+        }
+    }, [participant.stream]);
+
+    // Gather WebRTC stats with delta-based bitrate
+    useEffect(() => {
+        if (!participant.pc || !participant.stream) return;
+
+        let prevBytesReceived = 0;
+        let prevTimestamp = Date.now();
+
+        const interval = setInterval(async () => {
+            try {
+                const pc = participant.pc!;
+                const report = await pc.getStats();
+                let rtt = 0;
+                let lossPercent = 0;
+                let currentBytesReceived = 0;
+                let packetsLost = 0;
+                let packetsReceived = 0;
+
+                report.forEach((stat) => {
+                    if (stat.type === "candidate-pair" && stat.state === "succeeded") {
+                        if (stat.currentRoundTripTime !== undefined) rtt = Math.round(stat.currentRoundTripTime * 1000);
+                    }
+                    if (stat.type === "inbound-rtp" && stat.kind === "video") {
+                        if (stat.bytesReceived !== undefined) currentBytesReceived = stat.bytesReceived;
+                        if (stat.packetsLost !== undefined) packetsLost = stat.packetsLost;
+                        if (stat.packetsReceived !== undefined) packetsReceived = stat.packetsReceived;
+                    }
+                });
+
+                // Compute bitrate from byte delta
+                const now = Date.now();
+                const timeDeltaSecs = (now - prevTimestamp) / 1000;
+                let bitrateKbps = 0;
+                if (prevBytesReceived > 0 && timeDeltaSecs > 0) {
+                    bitrateKbps = Math.round(((currentBytesReceived - prevBytesReceived) * 8) / timeDeltaSecs / 1000);
+                }
+                prevBytesReceived = currentBytesReceived;
+                prevTimestamp = now;
+
+                // Compute loss percentage
+                const totalPackets = packetsLost + packetsReceived;
+                if (totalPackets > 0) {
+                    lossPercent = Math.round((packetsLost / totalPackets) * 10000) / 100;
+                }
+
+                setStats({ rtt, packetLoss: lossPercent, bitrate: bitrateKbps });
+            } catch { /* ignore */ }
+        }, 2000);
+
+        return () => clearInterval(interval);
+    }, [participant.pc, participant.stream]);
+
+    return (
+        <div className="relative rounded-2xl overflow-hidden bg-slate-900 border border-slate-800 group">
+            {/* Stats Overlay - always visible when stream is active */}
+            {participant.stream && (
+                <div className="absolute top-3 left-3 flex flex-col gap-1 z-10 bg-black/60 p-2 rounded-lg backdrop-blur text-[10px] text-green-400 font-mono">
+                    <div>RTT: {stats.rtt}ms</div>
+                    <div>Loss: {stats.packetLoss}%</div>
+                    <div>Bitrate: {stats.bitrate > 0 ? `${stats.bitrate} kbps` : "—"}</div>
+                </div>
+            )}
+            {participant.stream ? (
+                <video
+                    ref={videoRef}
+                    autoPlay
+                    playsInline
+                    className="w-full h-full object-cover"
+                />
+            ) : (
+                <div className="absolute inset-0 flex items-center justify-center">
+                    <div className="w-20 h-20 rounded-full bg-gradient-to-br from-purple-500 to-pink-500 flex items-center justify-center text-2xl font-bold">
+                        {participant.name.charAt(0).toUpperCase()}
+                    </div>
+                </div>
+            )}
+            <div className="absolute bottom-3 left-3">
+                <span className="px-2.5 py-1 rounded-md bg-black/60 backdrop-blur text-xs font-medium">
+                    {participant.name}
+                </span>
+            </div>
+            <button
+                onClick={(e) => {
+                    const target = e.currentTarget.parentElement;
+                    if (!document.fullscreenElement) {
+                        target?.requestFullscreen().catch(() => { });
+                    } else {
+                        document.exitFullscreen().catch(() => { });
+                    }
+                }}
+                className="absolute top-3 right-3 p-1.5 rounded-lg bg-black/50 hover:bg-black/70 text-white backdrop-blur transition-colors opacity-0 group-hover:opacity-100"
+            >
+                <Maximize className="w-4 h-4" />
+            </button>
+        </div>
+    );
+}