@sansavision/create-pulse 0.4.4 → 0.4.6

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

@@ -27,6 +27,7 @@ interface Participant {
     id: string;
     name: string;
     stream: MediaStream | null;
+    pc?: RTCPeerConnection;
 }
 
 export default function VideoCallPage() {
@@ -35,6 +36,7 @@ export default function VideoCallPage() {
     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);
@@ -143,12 +145,12 @@ export default function VideoCallPage() {
                     const existing = prev.find((p) => p.id === remoteId);
                     if (existing) {
                         return prev.map((p) =>
-                            p.id === remoteId ? { ...p, stream: remoteStream } : p
+                            p.id === remoteId ? { ...p, stream: remoteStream, pc } : p
                         );
                     }
                     return [
                         ...prev,
-                        { id: remoteId, name: remoteName, stream: remoteStream },
+                        { id: remoteId, name: remoteName, stream: remoteStream, pc },
                     ];
                 });
             };
@@ -189,6 +191,12 @@ export default function VideoCallPage() {
     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;
@@ -423,6 +431,7 @@ export default function VideoCallPage() {
     useEffect(() => {
         if (localVideoRef.current && localStream && inCall) {
             localVideoRef.current.srcObject = localStream;
+            localVideoRef.current.play().catch(() => { });
         }
     }, [localStream, inCall]);
 
@@ -544,8 +553,11 @@ export default function VideoCallPage() {
                                     <input
                                         type="text"
                                         value={joinRoomId}
-                                        onChange={(e) => setJoinRoomId(e.target.value)}
-                                        placeholder="Enter room ID..."
+                                        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
@@ -556,6 +568,7 @@ export default function VideoCallPage() {
                                         Join
                                     </button>
                                 </div>
+                                {joinError && <p className="text-red-400 text-xs mt-2">{joinError}</p>}
                             </div>
 
                             {/* Info */}
@@ -576,7 +589,7 @@ export default function VideoCallPage() {
                     <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">
+                            <div className="relative rounded-2xl overflow-hidden bg-slate-900 border border-slate-800 group">
                                 <video
                                     ref={localVideoRef}
                                     autoPlay
@@ -607,6 +620,19 @@ export default function VideoCallPage() {
                                         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 */}
@@ -707,15 +733,76 @@ export default function VideoCallPage() {
 /* 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">
+        <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}
@@ -735,6 +822,19 @@ function RemoteVideo({ participant }: { participant: Participant }) {
                     {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>
     );
 }