@sansavision/create-pulse 0.4.4 → 0.4.5

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

@@ -4,23 +4,14 @@ 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,
+    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;
@@ -69,6 +60,9 @@ export default function WatchTogetherPage() {
     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);
@@ -78,13 +72,29 @@ export default function WatchTogetherPage() {
     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 videoRef = useRef<HTMLVideoElement>(null);
-    const iframeRef = useRef<HTMLIFrameElement>(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]);
 
-    // Connect to Pulse relay
     useEffect(() => {
         if (!session) return;
         let cancelled = false;
@@ -102,71 +112,6 @@ export default function WatchTogetherPage() {
                 const user = (connection as any).user;
                 if (user) setAuthUser(user);
 
-                const stream = connection.stream("watch-room");
-
-                stream.send(
-                    JSON.stringify({ type: "viewer-join", name: session!.user.name })
-                );
-
-                stream.on("data", (data: Uint8Array) => {
-                    try {
-                        const msg = JSON.parse(new TextDecoder().decode(data));
-                        if (msg.type === "play") {
-                            setPlaying(true);
-                            if (videoRef.current) {
-                                ignoreSyncRef.current = true;
-                                videoRef.current.currentTime = msg.time || 0;
-                                videoRef.current.play().catch(() => { });
-                                setTimeout(() => { ignoreSyncRef.current = false; }, 200);
-                            }
-                            setSyncEvents((prev) => [
-                                `${msg.user} pressed play at ${msg.time?.toFixed(1)}s`,
-                                ...prev.slice(0, 19),
-                            ]);
-                        } else if (msg.type === "pause") {
-                            setPlaying(false);
-                            if (videoRef.current) {
-                                ignoreSyncRef.current = true;
-                                videoRef.current.pause();
-                                setTimeout(() => { ignoreSyncRef.current = false; }, 200);
-                            }
-                            setSyncEvents((prev) => [
-                                `${msg.user} paused at ${msg.time?.toFixed(1)}s`,
-                                ...prev.slice(0, 19),
-                            ]);
-                        } else if (msg.type === "seek") {
-                            if (videoRef.current) {
-                                ignoreSyncRef.current = true;
-                                videoRef.current.currentTime = msg.time || 0;
-                                setTimeout(() => { ignoreSyncRef.current = false; }, 200);
-                            }
-                            setCurrentTime(msg.time || 0);
-                            setSyncEvents((prev) => [
-                                `${msg.user} seeked to ${msg.time?.toFixed(1)}s`,
-                                ...prev.slice(0, 19),
-                            ]);
-                        } else if (msg.type === "viewer-join") {
-                            setViewers((prev) =>
-                                prev.includes(msg.name) ? prev : [...prev, msg.name]
-                            );
-                            setSyncEvents((prev) => [
-                                `${msg.name} joined the watch party`,
-                                ...prev.slice(0, 19),
-                            ]);
-                        } else if (msg.type === "source-change") {
-                            setActiveSource(msg.source);
-                            setCurrentTime(0);
-                            setPlaying(false);
-                            setSyncEvents((prev) => [
-                                `${msg.user} changed video to "${msg.source.label}"`,
-                                ...prev.slice(0, 19),
-                            ]);
-                        }
-                    } catch {
-                        /* ignore */
-                    }
-                });
-
                 connection.on("disconnect", () => setConnected(false));
                 connection.on("reconnected", () => setConnected(true));
             } catch (err) {
@@ -182,85 +127,212 @@ export default function WatchTogetherPage() {
         };
     }, [session]);
 
-    // Sync video time updates
+    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(() => {
-        const video = videoRef.current;
-        if (!video) return;
+        if (!roomId || !connected || !connRef.current) return;
+        const sess = sessionRef.current;
+        if (!sess) return;
 
-        const onTimeUpdate = () => {
-            setCurrentTime(video.currentTime);
-        };
-        const onDurationChange = () => {
-            setDuration(video.duration || 0);
-        };
-        const onPlay = () => {
-            if (!ignoreSyncRef.current) {
-                setPlaying(true);
-                sendAction("play");
-            }
-        };
-        const onPause = () => {
-            if (!ignoreSyncRef.current) {
-                setPlaying(false);
-                sendAction("pause");
-            }
-        };
-        const onSeeked = () => {
-            if (!ignoreSyncRef.current) {
-                sendAction("seek");
+        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);
             }
         };
 
-        video.addEventListener("timeupdate", onTimeUpdate);
-        video.addEventListener("durationchange", onDurationChange);
-        video.addEventListener("play", onPlay);
-        video.addEventListener("pause", onPause);
-        video.addEventListener("seeked", onSeeked);
+        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 () => {
-            video.removeEventListener("timeupdate", onTimeUpdate);
-            video.removeEventListener("durationchange", onDurationChange);
-            video.removeEventListener("play", onPlay);
-            video.removeEventListener("pause", onPause);
-            video.removeEventListener("seeked", onSeeked);
+            clearInterval(heartbeatInterval);
+            stream.close();
+            streamRef.current = null;
         };
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [activeSource]);
-
-    const sendAction = useCallback((type: string) => {
-        if (!connRef.current) return;
-        const stream = connRef.current.stream("watch-room");
-        stream.send(
-            JSON.stringify({
-                type,
-                user: session?.user?.name,
-                time: videoRef.current?.currentTime ?? currentTime,
-            })
-        );
-    }, [session, currentTime]);
+    }, [roomId, connected]);
 
-    function handlePlayPause() {
-        const video = videoRef.current;
-        if (!video) return;
-        if (video.paused) {
-            video.play().catch(() => { });
-        } else {
-            video.pause();
+    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) {
-        const video = videoRef.current;
-        if (!video) return;
-        video.currentTime = Math.max(0, video.currentTime + seconds);
+        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>) {
-        const video = videoRef.current;
-        if (!video || !duration) return;
+        if (!playerRef.current || !duration) return;
         const rect = e.currentTarget.getBoundingClientRect();
         const ratio = (e.clientX - rect.left) / rect.width;
-        video.currentTime = ratio * duration;
+        seekPlayerTo(ratio * duration);
     }
 
     function toggleFullscreen() {
@@ -273,7 +345,6 @@ export default function WatchTogetherPage() {
         }
     }
 
-    // Listen for fullscreen changes (e.g. pressing Esc)
     useEffect(() => {
         const handler = () => setIsFullscreen(!!document.fullscreenElement);
         document.addEventListener("fullscreenchange", handler);
@@ -286,15 +357,20 @@ export default function WatchTogetherPage() {
         setPlaying(false);
         setShowPicker(false);
 
-        if (connRef.current) {
-            const stream = connRef.current.stream("watch-room");
-            stream.send(
-                JSON.stringify({
-                    type: "source-change",
-                    user: session?.user?.name,
-                    source,
-                })
-            );
+        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");
+            }
         }
     }
 
@@ -310,6 +386,22 @@ export default function WatchTogetherPage() {
         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);
@@ -320,6 +412,37 @@ export default function WatchTogetherPage() {
     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">
@@ -329,8 +452,8 @@ export default function WatchTogetherPage() {
                     </div>
                     <div>
                         <h1 className="text-2xl font-bold">Watch Together</h1>
-                        <p className="text-sm text-slate-500">
-                            Synchronized video playback across users
+                        <p className="text-sm text-slate-500 font-mono">
+                            Room: {roomId}
                         </p>
                     </div>
                 </div>
@@ -366,84 +489,88 @@ export default function WatchTogetherPage() {
                 <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">
+                        <div ref={playerContainerRef} className="glass rounded-2xl overflow-hidden shadow-2xl">
                             <div className="aspect-video bg-black relative">
-                                {isYouTube && youtubeId ? (
-                                    <iframe
-                                        ref={iframeRef}
-                                        src={`https://www.youtube.com/embed/${youtubeId}?enablejsapi=1&autoplay=0`}
-                                        className="w-full h-full"
-                                        allow="autoplay; encrypted-media"
-                                        allowFullScreen
-                                        title="YouTube Video"
-                                    />
-                                ) : (
-                                    <video
-                                        ref={videoRef}
-                                        src={activeSource.url}
-                                        className="w-full h-full object-contain"
-                                        playsInline
-                                        preload="metadata"
-                                    />
-                                )}
+                                <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 */}
-                            {!isYouTube && (
-                                <>
-                                    {/* Progress bar */}
+                            <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-1.5 bg-slate-800 cursor-pointer group relative"
-                                        onClick={handleProgressClick}
+                                        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="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 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 className="p-4 flex items-center gap-4">
-                                        <button onClick={handlePlayPause} disabled={!connected}
-                                            className="w-10 h-10 rounded-full bg-white text-black flex items-center justify-center hover:scale-105 transition-transform disabled:opacity-50">
-                                            {playing ? <Pause className="w-5 h-5" /> : <Play className="w-5 h-5 ml-0.5" />}
-                                        </button>
-                                        <button onClick={() => handleSeek(10)} disabled={!connected}
-                                            className="p-2 rounded-lg hover:bg-slate-800 transition-colors disabled:opacity-50">
-                                            <SkipForward className="w-4 h-4" />
-                                        </button>
-                                        <span className="text-sm text-slate-400 font-mono">
-                                            {formatTime(currentTime)} / {formatTime(duration)}
-                                        </span>
-                                        <div className="flex-1" />
-                                        <button onClick={toggleFullscreen}
-                                            className="p-2 rounded-lg hover:bg-slate-800 transition-colors" title={isFullscreen ? "Exit fullscreen" : "Fullscreen"}>
-                                            {isFullscreen ? <Minimize className="w-4 h-4" /> : <Maximize className="w-4 h-4" />}
+                                </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>
-                                        <div className="flex items-center gap-2">
-                                            <Users className="w-4 h-4 text-slate-400" />
-                                            <span className="text-sm text-slate-400">{Math.max(viewers.length, 1)} watching</span>
-                                        </div>
-                                    </div>
-                                </>
-                            )}
-                            {isYouTube && (
-                                <div className="p-4 flex items-center gap-4">
-                                    <div className="flex items-center gap-2 text-sm text-slate-400">
-                                        <ExternalLink className="w-4 h-4" />
-                                        YouTube embed — use player controls to sync
+                                        <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-2 rounded-lg hover:bg-slate-800 transition-colors" title={isFullscreen ? "Exit fullscreen" : "Fullscreen"}>
+                                        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 className="flex items-center gap-2">
-                                        <Users className="w-4 h-4 text-slate-400" />
-                                        <span className="text-sm text-slate-400">{Math.max(viewers.length, 1)} watching</span>
-                                    </div>
                                 </div>
-                            )}
+                            </div>
                         </div>
 
                         {/* Source Picker */}
@@ -455,25 +582,25 @@ export default function WatchTogetherPage() {
                                 </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"
+                                    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-3 py-2.5 rounded-lg bg-slate-800/50 border border-slate-700">
+                            <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 text-slate-300 truncate">{activeSource.label}</span>
+                                <span className="text-sm font-medium text-slate-200 truncate pr-4">{activeSource.label}</span>
                                 {activeSource.type === "youtube" && (
-                                    <span className="text-[10px] px-1.5 py-0.5 rounded bg-red-500/20 text-red-400 font-medium shrink-0">YouTube</span>
+                                    <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-4 space-y-4">
+                                <div className="mt-5 space-y-5 animate-in fade-in slide-in-from-top-2">
                                     {/* Custom URL Input */}
                                     <div>
-                                        <label className="text-xs text-slate-400 mb-2 block">
-                                            Paste a YouTube URL or direct video link
+                                        <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">
@@ -483,14 +610,14 @@ export default function WatchTogetherPage() {
                                                     value={customUrl}
                                                     onChange={(e) => setCustomUrl(e.target.value)}
                                                     onKeyDown={(e) => e.key === "Enter" && handleCustomUrl()}
-                                                    placeholder="https://youtube.com/watch?v=... or .mp4 link"
+                                                    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-4 py-2.5 rounded-xl bg-pink-600 hover:bg-pink-500 text-sm font-semibold transition-all disabled:opacity-50 disabled:cursor-not-allowed"
+                                                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>
@@ -499,21 +626,21 @@ export default function WatchTogetherPage() {
 
                                     {/* Preset Videos */}
                                     <div>
-                                        <label className="text-xs text-slate-400 mb-2 block">
-                                            Or choose a sample video
+                                        <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-3 py-2.5 rounded-lg border transition-all text-left ${activeSource.url === video.url
-                                                        ? "border-pink-500/50 bg-pink-500/10"
-                                                        : "border-slate-700 hover:border-slate-600 hover:bg-slate-800/50"
+                                                    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 flex-1">{video.label}</span>
+                                                    <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" />
                                                     )}
@@ -528,40 +655,65 @@ export default function WatchTogetherPage() {
 
                     <div className="space-y-6">
                         <div className="glass rounded-2xl p-6">
-                            <h3 className="text-sm font-semibold mb-3 text-pink-400">Viewers</h3>
-                            <div className="space-y-2">
-                                <div className="flex items-center gap-2">
-                                    <div className="w-6 h-6 rounded-full bg-gradient-to-br from-purple-500 to-cyan-500 flex items-center justify-center text-[10px] font-bold">
-                                        {session?.user?.name?.charAt(0) || "?"}
-                                    </div>
-                                    <span className="text-sm">{session?.user?.name} (you)</span>
-                                </div>
-                                {viewers.filter((v) => v !== session?.user?.name).map((v) => (
-                                    <div key={v} className="flex items-center gap-2">
-                                        <div className="w-6 h-6 rounded-full bg-gradient-to-br from-pink-500 to-rose-500 flex items-center justify-center text-[10px] font-bold">{v.charAt(0)}</div>
-                                        <span className="text-sm">{v}</span>
-                                    </div>
-                                ))}
+                            <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-3 text-cyan-400">Sync Events</h3>
-                            <div className="space-y-2 max-h-60 overflow-y-auto">
-                                {syncEvents.length === 0 && <p className="text-xs text-slate-500">No sync events yet. Press play!</p>}
-                                {syncEvents.map((event, i) => <div key={i} className="text-xs text-slate-400">{event}</div>)}
+                            <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>
 
-                        {/* Info card */}
-                        <div className="glass rounded-xl p-5 border-l-4 border-pink-500">
-                            <h3 className="text-sm font-semibold text-pink-400 mb-1">
-                                How It Works
-                            </h3>
-                            <p className="text-xs text-slate-400 leading-relaxed">
-                                Play, pause, and seek events are broadcast via Pulse streams to all viewers.
-                                The relay ensures every participant stays in sync. Try opening this in two tabs!
-                            </p>
+                        <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>
@@ -569,3 +721,4 @@ export default function WatchTogetherPage() {
         </div>
     );
 }
+