@sansavision/create-pulse 0.4.4 → 0.4.5

package/templates/nextjs-auth-node-demo/src/app/dashboard/demos/watch-together/page.tsx

@@ -0,0 +1,724 @@
+"use client";
+
+import { useState, useEffect, useRef, useCallback } from "react";
+import { useSession } from "@/lib/auth-client";
+import { connectWithAuth } from "@/lib/pulse";
+import {
+    Video, Play, Pause, SkipForward, Users, Shield, Wifi, WifiOff, Loader2,
+    Link2, ExternalLink, ListVideo, Check, Maximize, Minimize, Settings, Volume2, VolumeX, SkipBack,
+    AlertCircle, ChevronDown, Square
+} from "lucide-react";
+import type { PulseConnection } from "@sansavision/pulse-sdk";
+import dynamic from "next/dynamic";
+
+const ReactPlayer = dynamic(() => import("react-player"), { ssr: false });
+
+interface VideoSource {
+    label: string;
+    url: string;
+    type: "youtube" | "direct" | "sample";
+}
+
+const PRESET_VIDEOS: VideoSource[] = [
+    {
+        label: "Big Buck Bunny (Sample)",
+        url: "https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4",
+        type: "sample",
+    },
+    {
+        label: "Sintel Trailer (Sample)",
+        url: "https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/Sintel.mp4",
+        type: "sample",
+    },
+    {
+        label: "Elephant Dream (Sample)",
+        url: "https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ElephantsDream.mp4",
+        type: "sample",
+    },
+];
+
+function extractYouTubeId(url: string): string | null {
+    const patterns = [
+        /youtu\.be\/([a-zA-Z0-9_-]{11})/,
+        /youtube\.com\/watch\?v=([a-zA-Z0-9_-]{11})/,
+        /youtube\.com\/embed\/([a-zA-Z0-9_-]{11})/,
+        /youtube\.com\/v\/([a-zA-Z0-9_-]{11})/,
+    ];
+    for (const pattern of patterns) {
+        const match = url.match(pattern);
+        if (match) return match[1];
+    }
+    return null;
+}
+
+function getVideoType(url: string): "youtube" | "direct" {
+    return extractYouTubeId(url) ? "youtube" : "direct";
+}
+
+export default function WatchTogetherPage() {
+    const { data: session } = useSession();
+    const [connected, setConnected] = useState(false);
+    const [authUser, setAuthUser] = useState<{ id: string; claims: Record<string, string> } | null>(null);
+    const [connecting, setConnecting] = useState(true);
+    const [roomId, setRoomId] = useState("");
+    const [joinRoomId, setJoinRoomId] = useState("");
+    const [joinError, setJoinError] = useState("");
+    const [playing, setPlaying] = useState(false);
+    const [currentTime, setCurrentTime] = useState(0);
+    const [duration, setDuration] = useState(0);
+    const [viewers, setViewers] = useState<string[]>([]);
+    const [syncEvents, setSyncEvents] = useState<string[]>([]);
+    const [activeSource, setActiveSource] = useState<VideoSource>(PRESET_VIDEOS[0]);
+    const [customUrl, setCustomUrl] = useState("");
+    const [showPicker, setShowPicker] = useState(false);
+    const [isFullscreen, setIsFullscreen] = useState(false);
+    const [volume, setVolume] = useState(1);
+    const [quality, setQuality] = useState("AUTO");
+    const [showQualityMenu, setShowQualityMenu] = useState(false);
+    const [metrics, setMetrics] = useState({ rttMs: 0, msgCount: 0, watcherCount: 1 });
+
+    const connRef = useRef<PulseConnection | null>(null);
+    const streamRef = useRef<ReturnType<PulseConnection["stream"]> | null>(null);
+    const playerRef = useRef<any>(null);
+    const playerContainerRef = useRef<HTMLDivElement>(null);
+    const ignoreSyncRef = useRef(false);
+    const sessionRef = useRef(session);
+    const playingRef = useRef(false);
+    const roomIdRef = useRef(roomId);
+    const [viewerStates, setViewerStates] = useState<Record<string, { playing: boolean; time: number; synced: boolean }>>({});
+
+    useEffect(() => { sessionRef.current = session; }, [session]);
+    useEffect(() => { playingRef.current = playing; }, [playing]);
+    useEffect(() => { roomIdRef.current = roomId; }, [roomId]);
+
+    // Track active source in a ref so heartbeat/send closures always see latest
+    const activeSourceRef = useRef(activeSource);
+    useEffect(() => { activeSourceRef.current = activeSource; }, [activeSource]);
+
+    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);
+
+                // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                const user = (connection as any).user;
+                if (user) setAuthUser(user);
+
+                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]);
+
+    const getPlayerTime = () => playerRef.current?.getCurrentTime() || 0;
+    const seekPlayerTo = (time: number) => {
+        if (!playerRef.current) return;
+        ignoreSyncRef.current = true;
+        playerRef.current.seekTo(time, "seconds");
+        setTimeout(() => { ignoreSyncRef.current = false; }, 200);
+    };
+
+    useEffect(() => {
+        if (!roomId || !connected || !connRef.current) return;
+        const sess = sessionRef.current;
+        if (!sess) return;
+
+        const stream = connRef.current.stream(`watch-room-${roomId}`);
+        streamRef.current = stream;
+
+        // Broadcast join immediately
+        stream.send(JSON.stringify({ type: "viewer-join", name: sess.user.name, user: sess.user.name }));
+        setViewers([sess.user.name]);
+        setMetrics(m => ({ ...m, watcherCount: 1 }));
+
+        const handleData = (data: Uint8Array) => {
+            try {
+                const msg = JSON.parse(new TextDecoder().decode(data));
+                const self = sessionRef.current;
+                if (!self) return;
+
+                // Measure real RTT from message timestamps (skip heartbeats to avoid inflating count)
+                if (msg.sentAt && msg.type !== "heartbeat") {
+                    const rtt = Date.now() - msg.sentAt;
+                    setMetrics(m => ({ ...m, rttMs: Math.max(0, rtt), msgCount: m.msgCount + 1 }));
+                }
+
+                if (msg.type === "play" && msg.user !== self.user.name) {
+                    setPlaying(true);
+                    setSyncEvents((prev) => [`${msg.user} pressed play`, ...prev.slice(0, 19)]);
+                } else if (msg.type === "pause" && msg.user !== self.user.name) {
+                    setPlaying(false);
+                    setSyncEvents((prev) => [`${msg.user} paused`, ...prev.slice(0, 19)]);
+                } else if (msg.type === "seek" && msg.user !== self.user.name) {
+                    seekPlayerTo(msg.time || 0);
+                    setCurrentTime(msg.time || 0);
+                    setSyncEvents((prev) => [`${msg.user} seeked to ${formatTime(msg.time)}`, ...prev.slice(0, 19)]);
+                } else if (msg.type === "heartbeat" && msg.user !== self.user.name) {
+                    if (typeof msg.time === "number") {
+                        const myTime = getPlayerTime();
+                        const theirTime = msg.time;
+                        const forwardDrift = theirTime - myTime;
+                        const isSynced = Math.abs(myTime - theirTime) < 2;
+
+                        setViewerStates(prev => ({
+                            ...prev,
+                            [msg.user]: { playing: !!msg.playing, time: theirTime, synced: isSynced }
+                        }));
+
+                        // Auto-sync: only seek FORWARD to avoid ping-pong
+                        if (forwardDrift > 2) {
+                            seekPlayerTo(theirTime);
+                        }
+                        if (msg.playing && !playingRef.current) {
+                            seekPlayerTo(theirTime);
+                            setPlaying(true);
+                        }
+                    }
+                } else if (msg.type === "viewer-join" && msg.name !== self.user.name) {
+                    setViewers((prev) => {
+                        const newViewers = prev.includes(msg.name) ? prev : [...prev, msg.name];
+                        setMetrics(m => ({ ...m, watcherCount: newViewers.length }));
+                        return newViewers;
+                    });
+                    setSyncEvents((prev) => [`${msg.name} joined`, ...prev.slice(0, 19)]);
+
+                    try {
+                        stream.send(JSON.stringify({
+                            type: "viewer-presence",
+                            name: self.user.name,
+                            user: self.user.name,
+                            time: getPlayerTime(),
+                            playing: playingRef.current,
+                            source: activeSourceRef.current,
+                            sentAt: Date.now(),
+                        }));
+                    } catch { /* ignore */ }
+                } else if (msg.type === "viewer-presence" && msg.name !== self.user.name) {
+                    setViewers((prev) => {
+                        const newViewers = prev.includes(msg.name) ? prev : [...prev, msg.name];
+                        setMetrics(m => ({ ...m, watcherCount: newViewers.length }));
+                        return newViewers;
+                    });
+                    if (msg.source) {
+                        setActiveSource(msg.source);
+                    }
+                    if (typeof msg.time === "number" && msg.time > 0) {
+                        seekPlayerTo(msg.time);
+                        if (msg.playing) {
+                            setPlaying(true);
+                        }
+                    }
+                } else if (msg.type === "source-change" && msg.user !== self.user.name) {
+                    setActiveSource(msg.source);
+                    setCurrentTime(0);
+                    setPlaying(false);
+                    setSyncEvents((prev) => [`${msg.user} changed video to "${msg.source.label}"`, ...prev.slice(0, 19)]);
+                }
+            } catch (err) {
+                console.error("Critical error in handleData:", err);
+            }
+        };
+
+        stream.on("data", handleData);
+
+        const heartbeatInterval = setInterval(() => {
+            const sess = sessionRef.current;
+            const activeStream = streamRef.current;
+            if (playingRef.current && sess && activeStream) {
+                try {
+                    activeStream.send(JSON.stringify({
+                        type: "heartbeat",
+                        user: sess.user.name,
+                        time: getPlayerTime(),
+                        playing: true,
+                        sentAt: Date.now(),
+                    }));
+                } catch { }
+            }
+        }, 3000);
+
+        return () => {
+            clearInterval(heartbeatInterval);
+            stream.close();
+            streamRef.current = null;
+        };
+    }, [roomId, connected]);
+
+    function sendToStream(type: string) {
+        if (!streamRef.current) return;
+        const sess = sessionRef.current;
+        try {
+            streamRef.current.send(
+                JSON.stringify({
+                    type,
+                    user: sess?.user?.name,
+                    name: sess?.user?.name,
+                    time: getPlayerTime(),
+                    sentAt: Date.now(),
+                })
+            );
+        } catch {
+            // Connection may have dropped — ignore silently
+        }
+    }
+
+    // Handlers mapped to ReactPlayer props
+    const onPlay = () => {
+        if (!ignoreSyncRef.current) {
+            setPlaying(true);
+            sendToStream("play");
+        }
+    };
+
+    const onPause = () => {
+        if (!ignoreSyncRef.current) {
+            setPlaying(false);
+            sendToStream("pause");
+        }
+    };
+
+    // ReactPlayer only calls onSeek when the user manually seeks.
+    const onSeeked = () => {
+        if (!ignoreSyncRef.current) {
+            sendToStream("seek");
+        }
+    };
+
+    function handlePlayPause() {
+        if (!playerRef.current) return;
+        setPlaying(!playing);
+    }
+
+    function handleStop() {
+        if (!playerRef.current) return;
+        setPlaying(false);
+        seekPlayerTo(0);
+        setCurrentTime(0);
+        sendToStream("seek");
+        sendToStream("pause");
+    }
+
+    function handleSeek(seconds: number) {
+        if (!playerRef.current) return;
+        seekPlayerTo(Math.max(0, getPlayerTime() + seconds));
+    }
+
+    function toggleMute() {
+        setVolume(volume > 0 ? 0 : 1);
+    }
+
+    function handleVolumeChange(e: React.ChangeEvent<HTMLInputElement>) {
+        setVolume(parseFloat(e.target.value));
+    }
+
+    function handleProgressClick(e: React.MouseEvent<HTMLDivElement>) {
+        if (!playerRef.current || !duration) return;
+        const rect = e.currentTarget.getBoundingClientRect();
+        const ratio = (e.clientX - rect.left) / rect.width;
+        seekPlayerTo(ratio * duration);
+    }
+
+    function toggleFullscreen() {
+        const container = playerContainerRef.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);
+    }, []);
+
+    function changeSource(source: VideoSource) {
+        setActiveSource(source);
+        setCurrentTime(0);
+        setPlaying(false);
+        setShowPicker(false);
+
+        if (streamRef.current && roomId) {
+            const sess = sessionRef.current;
+            try {
+                streamRef.current.send(
+                    JSON.stringify({
+                        type: "source-change",
+                        user: sess?.user?.name,
+                        source,
+                    })
+                );
+            } catch {
+                // Connection dropped — source changes locally only
+                console.warn("Source change not broadcast: connection unavailable");
+            }
+        }
+    }
+
+    function handleCustomUrl() {
+        if (!customUrl.trim()) return;
+        const url = customUrl.trim();
+        const type = getVideoType(url);
+        const label = type === "youtube"
+            ? `YouTube: ${extractYouTubeId(url)}`
+            : url.split("/").pop()?.split("?")[0] || "Custom Video";
+
+        changeSource({ label, url, type });
+        setCustomUrl("");
+    }
+
+    function generateRoom() {
+        const code = Math.random().toString(36).slice(2, 8).toUpperCase();
+        setRoomId(code);
+    }
+
+    function joinRoom() {
+        const code = joinRoomId.trim().toUpperCase();
+        if (!code) return;
+        if (!/^[A-Z0-9]{6,12}$/.test(code)) {
+            setJoinError("Room code must be 6-12 alphanumeric characters.");
+            return;
+        }
+        setJoinError("");
+        setRoomId(code);
+    }
+
+    const formatTime = (t: number) => {
+        if (!t || isNaN(t)) return "0:00";
+        const mins = Math.floor(t / 60);
+        const secs = Math.floor(t % 60);
+        return `${mins}:${secs.toString().padStart(2, "0")}`;
+    };
+
+    const isYouTube = activeSource.type === "youtube";
+    const youtubeId = isYouTube ? extractYouTubeId(activeSource.url) : null;
+
+    if (!roomId) {
+        return (
+            <div className="p-8 h-full flex flex-col items-center justify-center">
+                <div className="glass max-w-lg w-full rounded-2xl p-8 space-y-8 text-center">
+                    <div className="w-16 h-16 rounded-2xl bg-gradient-to-br from-pink-500 to-rose-600 flex items-center justify-center mx-auto shadow-lg shadow-pink-500/20">
+                        <Video className="w-8 h-8 text-white" />
+                    </div>
+                    <div>
+                        <h1 className="text-2xl font-bold bg-gradient-to-r from-pink-400 to-rose-400 bg-clip-text text-transparent">Watch Together</h1>
+                        <p className="text-slate-400 mt-2">Create a room to synchronize video playback</p>
+                    </div>
+                    <button onClick={generateRoom} className="w-full py-3.5 rounded-xl bg-pink-600 hover:bg-pink-500 font-semibold shadow-xl shadow-pink-600/20 transition-all">Create Watch Room</button>
+                    <div className="relative">
+                        <div className="absolute inset-0 flex items-center"><div className="w-full border-t border-slate-700/50"></div></div>
+                        <div className="relative flex justify-center"><span className="px-4 text-xs text-slate-500 bg-[#162032]">OR JOIN EXISTING</span></div>
+                    </div>
+                    {joinError && (
+                        <div className="p-3 rounded-lg bg-red-500/10 border border-red-500/20 flex items-center gap-2 text-red-400 text-sm">
+                            <AlertCircle className="w-4 h-4 shrink-0" />
+                            <p>{joinError}</p>
+                        </div>
+                    )}
+                    <div className="flex gap-2">
+                        <input type="text" value={joinRoomId} onChange={e => { setJoinRoomId(e.target.value); setJoinError(""); }} onKeyDown={e => e.key === "Enter" && joinRoom()} placeholder="Enter Room Code" className="w-full uppercase text-center font-mono tracking-widest px-4 py-3 rounded-xl bg-transparent border-2 border-slate-700 focus:border-pink-500 outline-none transition-colors" />
+                    </div>
+                    <button onClick={joinRoom} disabled={!joinRoomId.trim()} className="w-full py-3.5 rounded-xl bg-slate-800 hover:bg-slate-700 font-semibold transition-all disabled:opacity-50">Join Room</button>
+                </div>
+            </div>
+        );
+    }
+
+    return (
+        <div className="p-8">
+            <div className="flex items-center justify-between mb-8">
+                <div className="flex items-center gap-3">
+                    <div className="w-12 h-12 rounded-xl bg-gradient-to-br from-pink-500 to-rose-600 flex items-center justify-center">
+                        <Video className="w-6 h-6 text-white" />
+                    </div>
+                    <div>
+                        <h1 className="text-2xl font-bold">Watch Together</h1>
+                        <p className="text-sm text-slate-500 font-mono">
+                            Room: {roomId}
+                        </p>
+                    </div>
+                </div>
+                <div className="flex items-center gap-3">
+                    {authUser && (
+                        <div className="flex items-center gap-2 px-3 py-1.5 rounded-lg bg-green-500/10 border border-green-500/20">
+                            <Shield className="w-3.5 h-3.5 text-green-400" />
+                            <span className="text-xs text-green-400">
+                                {authUser.claims.name || authUser.id}
+                            </span>
+                        </div>
+                    )}
+                    {connected ? (
+                        <div className="flex items-center gap-2">
+                            <Wifi className="w-4 h-4 text-green-400" />
+                            <span className="text-xs text-green-400">Connected</span>
+                        </div>
+                    ) : (
+                        <div className="flex items-center gap-2">
+                            <WifiOff className="w-4 h-4 text-red-400" />
+                            <span className="text-xs text-red-400">Disconnected</span>
+                        </div>
+                    )}
+                </div>
+            </div>
+
+            {connecting ? (
+                <div className="flex items-center justify-center py-20">
+                    <Loader2 className="w-6 h-6 animate-spin text-purple-500 mr-2" />
+                    <span className="text-slate-400">Connecting...</span>
+                </div>
+            ) : (
+                <div className="grid lg:grid-cols-3 gap-8">
+                    <div className="lg:col-span-2 space-y-4">
+                        {/* Video Player */}
+                        <div ref={playerContainerRef} className="glass rounded-2xl overflow-hidden shadow-2xl">
+                            <div className="aspect-video bg-black relative">
+                                <ReactPlayer
+                                    ref={playerRef}
+                                    url={activeSource.url}
+                                    playing={playing}
+                                    volume={volume}
+                                    muted={volume === 0}
+                                    controls={isYouTube}
+                                    width="100%"
+                                    height="100%"
+                                    style={{ position: "absolute", top: 0, left: 0 }}
+                                    onProgress={({ playedSeconds }: { playedSeconds: number }) => setCurrentTime(playedSeconds)}
+                                    onDuration={(d: number) => setDuration(d)}
+                                    onPlay={onPlay}
+                                    onPause={onPause}
+                                    onSeek={onSeeked}
+                                />
+                            </div>
+
+                            {/* Controls */}
+                            <div className="bg-slate-900/90 backdrop-blur-md">
+                                {/* Progress bar */}
+                                <div
+                                    className="h-1.5 bg-slate-800 cursor-pointer group relative"
+                                    onClick={handleProgressClick}
+                                >
+                                    <div
+                                        className="h-full bg-gradient-to-r from-pink-500 to-rose-500 transition-all relative"
+                                        style={{ width: `${duration ? (currentTime / duration) * 100 : 0}%` }}
+                                    >
+                                        <div className="absolute right-0 top-1/2 -translate-y-1/2 w-3 h-3 rounded-full bg-white shadow opacity-0 group-hover:opacity-100 transition-opacity" />
+                                    </div>
+                                </div>
+                                <div className="p-3 flex items-center gap-3">
+                                    <button onClick={handlePlayPause} disabled={!connected}
+                                        className="w-8 h-8 rounded-full bg-white text-black flex items-center justify-center hover:scale-105 transition-transform disabled:opacity-50 shrink-0">
+                                        {playing ? <Pause className="w-4 h-4" /> : <Play className="w-4 h-4 ml-0.5" />}
+                                    </button>
+                                    <button onClick={handleStop} disabled={!connected}
+                                        className="p-1.5 rounded-lg hover:bg-slate-800 transition-colors disabled:opacity-50 text-slate-300 hover:text-white shrink-0" title="Stop">
+                                        <Square className="w-3.5 h-3.5" />
+                                    </button>
+                                    <button onClick={() => handleSeek(-10)} disabled={!connected}
+                                        className="p-1.5 rounded-lg hover:bg-slate-800 transition-colors disabled:opacity-50 text-slate-300 hover:text-white shrink-0">
+                                        <SkipBack className="w-4 h-4" />
+                                    </button>
+                                    <button onClick={() => handleSeek(10)} disabled={!connected}
+                                        className="p-1.5 rounded-lg hover:bg-slate-800 transition-colors disabled:opacity-50 text-slate-300 hover:text-white shrink-0">
+                                        <SkipForward className="w-4 h-4" />
+                                    </button>
+                                    <span className="text-xs text-slate-300 font-mono w-20 text-center shrink-0">
+                                        {formatTime(currentTime)} / {formatTime(duration)}
+                                    </span>
+                                    <div className="flex items-center gap-2 group w-24 shrink-0 px-2">
+                                        <button onClick={toggleMute} className="text-slate-400 hover:text-white transition-colors">
+                                            {volume > 0 ? <Volume2 className="w-4 h-4" /> : <VolumeX className="w-4 h-4" />}
+                                        </button>
+                                        <input type="range" min="0" max="1" step="0.05" value={volume} onChange={handleVolumeChange} className="w-16 h-1 bg-slate-700 rounded-lg appearance-none cursor-pointer hidden group-hover:block hover:block" />
+                                    </div>
+                                    <div className="flex-1" />
+                                    <div className="relative">
+                                        <button onClick={() => setShowQualityMenu(!showQualityMenu)}
+                                            className="px-2 py-1 bg-slate-800 text-[10px] font-bold tracking-wider rounded border border-slate-700 hover:bg-slate-700 text-slate-300 flex items-center gap-1 transition-colors" title="Quality Settings">
+                                            <Settings className="w-3 h-3" /> {quality} <ChevronDown className="w-2.5 h-2.5" />
+                                        </button>
+                                        {showQualityMenu && (
+                                            <div className="absolute bottom-full right-0 mb-1 w-28 rounded-lg bg-slate-800 border border-slate-700 shadow-xl z-50 overflow-hidden">
+                                                {["AUTO", "1080p", "720p", "480p", "360p"].map((q) => (
+                                                    <button key={q} onClick={() => { setQuality(q); setShowQualityMenu(false); }}
+                                                        className={`w-full text-left px-3 py-2 text-[10px] font-bold tracking-wider hover:bg-slate-700 transition-colors ${quality === q ? "text-pink-400 bg-pink-500/10" : "text-slate-300"
+                                                            }`}>{q}</button>
+                                                ))}
+                                            </div>
+                                        )}
+                                    </div>
+                                    <button onClick={toggleFullscreen}
+                                        className="p-1.5 rounded-lg hover:bg-slate-800 transition-colors text-slate-300 hover:text-white shrink-0" title={isFullscreen ? "Exit fullscreen" : "Fullscreen"}>
+                                        {isFullscreen ? <Minimize className="w-4 h-4" /> : <Maximize className="w-4 h-4" />}
+                                    </button>
+                                </div>
+                            </div>
+                        </div>
+
+                        {/* Source Picker */}
+                        <div className="glass rounded-2xl p-5">
+                            <div className="flex items-center justify-between mb-4">
+                                <div className="flex items-center gap-2">
+                                    <ListVideo className="w-4 h-4 text-pink-400" />
+                                    <h3 className="text-sm font-semibold text-pink-400">Now Playing</h3>
+                                </div>
+                                <button
+                                    onClick={() => setShowPicker(!showPicker)}
+                                    className="px-3 py-1.5 rounded-lg bg-slate-800 hover:bg-slate-700 text-xs font-medium transition-colors border border-slate-700"
+                                >
+                                    {showPicker ? "Close" : "Change Source"}
+                                </button>
+                            </div>
+                            <div className="flex items-center gap-3 px-4 py-3 rounded-xl bg-[#0f172a] border border-slate-800 shadow-inner">
+                                <Video className="w-4 h-4 text-pink-400 shrink-0" />
+                                <span className="text-sm font-medium text-slate-200 truncate pr-4">{activeSource.label}</span>
+                                {activeSource.type === "youtube" && (
+                                    <span className="text-[10px] px-2 py-0.5 rounded-full bg-red-500/20 text-red-500 font-bold tracking-wide shrink-0 ml-auto">YOUTUBE</span>
+                                )}
+                            </div>
+
+                            {showPicker && (
+                                <div className="mt-5 space-y-5 animate-in fade-in slide-in-from-top-2">
+                                    {/* Custom URL Input */}
+                                    <div>
+                                        <label className="text-xs font-semibold text-slate-400 uppercase tracking-widest mb-2 block">
+                                            Custom URL
+                                        </label>
+                                        <div className="flex gap-2">
+                                            <div className="flex-1 relative">
+                                                <Link2 className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-slate-500" />
+                                                <input
+                                                    type="text"
+                                                    value={customUrl}
+                                                    onChange={(e) => setCustomUrl(e.target.value)}
+                                                    onKeyDown={(e) => e.key === "Enter" && handleCustomUrl()}
+                                                    placeholder="YouTube / Video URL"
+                                                    className="w-full pl-10 pr-4 py-2.5 rounded-xl bg-slate-900/50 border border-slate-700 focus:border-pink-500 focus:ring-1 focus:ring-pink-500 outline-none text-sm transition-colors placeholder:text-slate-600"
+                                                />
+                                            </div>
+                                            <button
+                                                onClick={handleCustomUrl}
+                                                disabled={!customUrl.trim()}
+                                                className="px-5 py-2.5 rounded-xl bg-pink-600 hover:bg-pink-500 text-sm font-semibold transition-all shadow-lg shadow-pink-600/20 disabled:opacity-50"
+                                            >
+                                                Load
+                                            </button>
+                                        </div>
+                                    </div>
+
+                                    {/* Preset Videos */}
+                                    <div>
+                                        <label className="text-xs font-semibold text-slate-400 uppercase tracking-widest mb-2 block">
+                                            Presets
+                                        </label>
+                                        <div className="space-y-2">
+                                            {PRESET_VIDEOS.map((video) => (
+                                                <button
+                                                    key={video.url}
+                                                    onClick={() => changeSource(video)}
+                                                    className={`w-full flex items-center gap-3 px-4 py-3 rounded-xl border transition-all text-left ${activeSource.url === video.url
+                                                        ? "border-pink-500/50 bg-pink-500/10 shadow-inner"
+                                                        : "border-slate-800 bg-[#0f172a] hover:border-slate-700"
+                                                        }`}
+                                                >
+                                                    <Video className="w-4 h-4 text-slate-400 shrink-0" />
+                                                    <span className="text-sm font-medium flex-1 text-slate-300">{video.label}</span>
+                                                    {activeSource.url === video.url && (
+                                                        <Check className="w-4 h-4 text-pink-400 shrink-0" />
+                                                    )}
+                                                </button>
+                                            ))}
+                                        </div>
+                                    </div>
+                                </div>
+                            )}
+                        </div>
+                    </div>
+
+                    <div className="space-y-6">
+                        <div className="glass rounded-2xl p-6">
+                            <h3 className="text-sm font-semibold mb-4 text-pink-400 border-b border-pink-500/20 pb-2">Viewers</h3>
+                            <div className="space-y-3">
+                                {viewers.map((v) => {
+                                    const isMe = v === session?.user?.name;
+                                    const state = isMe
+                                        ? { playing, time: currentTime, synced: true }
+                                        : viewerStates[v];
+                                    return (
+                                        <div key={v} className="flex items-center gap-3">
+                                            <div className="w-7 h-7 rounded-full bg-slate-800 border border-slate-700 flex items-center justify-center text-xs font-bold text-slate-300">
+                                                {v.charAt(0)}
+                                            </div>
+                                            <span className="text-sm font-medium text-slate-200 flex-1">{v} {isMe && <span className="text-xs text-slate-500">(you)</span>}</span>
+                                            {state ? (
+                                                state.playing ? (
+                                                    <span className="flex items-center gap-1.5 text-[10px] font-medium">
+                                                        <span className="w-2 h-2 rounded-full bg-green-400" />
+                                                        <span className={state.synced ? "text-green-400" : "text-amber-400"}>{state.synced ? "Synced" : "Syncing..."}</span>
+                                                    </span>
+                                                ) : (
+                                                    <span className="flex items-center gap-1.5 text-[10px] font-medium">
+                                                        <span className="w-2 h-2 rounded-full bg-slate-600" />
+                                                        <span className="text-slate-500">Paused</span>
+                                                    </span>
+                                                )
+                                            ) : null}
+                                        </div>
+                                    );
+                                })}
+                            </div>
+                        </div>
+
+                        <div className="glass rounded-2xl p-6">
+                            <h3 className="text-sm font-semibold mb-4 text-cyan-400 border-b border-cyan-500/20 pb-2">Sync Events</h3>
+                            <div className="space-y-2 max-h-[200px] overflow-y-auto pr-2">
+                                {syncEvents.length === 0 && <p className="text-xs text-slate-500 italic">No sync events yet. Press play!</p>}
+                                {syncEvents.slice(0, 5).map((event, i) => <div key={i} className="text-xs text-slate-400 py-1 border-b border-slate-800/50 last:border-0">{event}</div>)}
+                            </div>
+                        </div>
+
+                        <div className="glass rounded-2xl p-4 bg-black/40">
+                            <div className="flex justify-between mb-2">
+                                <div>
+                                    <p className="text-[10px] text-slate-500 uppercase tracking-widest">Message RTT</p>
+                                    <p className="text-sm font-mono text-emerald-400">{metrics.rttMs > 0 ? `${metrics.rttMs}ms` : "—"}</p>
+                                </div>
+                                <div className="text-center">
+                                    <p className="text-[10px] text-slate-500 uppercase tracking-widest">Sync Msgs</p>
+                                    <p className="text-sm font-mono text-cyan-400">{metrics.msgCount}</p>
+                                </div>
+                                <div className="text-right">
+                                    <p className="text-[10px] text-slate-500 uppercase tracking-widest">Viewers</p>
+                                    <p className="text-sm font-mono text-pink-400">{viewers.length}</p>
+                                </div>
+                            </div>
+                            <div className="text-center">
+                                <p className="text-[10px] text-slate-500 uppercase tracking-widest">Quality</p>
+                                <p className="text-sm font-mono text-amber-400">{quality}</p>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            )}
+        </div>
+    );
+}
+