@sansavision/create-pulse 0.4.2 → 0.4.4

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

@@ -1,6 +1,6 @@
 "use client";
 
-import { useState, useEffect, useRef } from "react";
+import { useState, useEffect, useRef, useCallback } from "react";
 import { useSession } from "@/lib/auth-client";
 import { connectWithAuth } from "@/lib/pulse";
 import {
@@ -13,9 +13,57 @@ import {
     Wifi,
     WifiOff,
     Loader2,
+    Link2,
+    ExternalLink,
+    ListVideo,
+    Check,
+    Maximize,
+    Minimize,
 } from "lucide-react";
 import type { PulseConnection } from "@sansavision/pulse-sdk";
 
+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);
@@ -23,11 +71,20 @@ export default function WatchTogetherPage() {
     const [connecting, setConnecting] = useState(true);
     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 connRef = useRef<PulseConnection | null>(null);
-    const intervalRef = useRef<ReturnType<typeof setInterval> | null>(null);
+    const videoRef = useRef<HTMLVideoElement>(null);
+    const iframeRef = useRef<HTMLIFrameElement>(null);
+    const playerContainerRef = useRef<HTMLDivElement>(null);
+    const ignoreSyncRef = useRef(false);
 
+    // Connect to Pulse relay
     useEffect(() => {
         if (!session) return;
         let cancelled = false;
@@ -56,21 +113,37 @@ export default function WatchTogetherPage() {
                         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, 9),
+                                ...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, 9),
+                                ...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, 9),
+                                ...prev.slice(0, 19),
                             ]);
                         } else if (msg.type === "viewer-join") {
                             setViewers((prev) =>
@@ -78,7 +151,15 @@ export default function WatchTogetherPage() {
                             );
                             setSyncEvents((prev) => [
                                 `${msg.name} joined the watch party`,
-                                ...prev.slice(0, 9),
+                                ...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 {
@@ -98,53 +179,147 @@ export default function WatchTogetherPage() {
         return () => {
             cancelled = true;
             connRef.current?.disconnect();
-            if (intervalRef.current) clearInterval(intervalRef.current);
         };
     }, [session]);
 
+    // Sync video time updates
     useEffect(() => {
-        if (playing) {
-            intervalRef.current = setInterval(
-                () => setCurrentTime((t) => t + 0.1),
-                100
-            );
-        } else {
-            if (intervalRef.current) clearInterval(intervalRef.current);
-        }
+        const video = videoRef.current;
+        if (!video) 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");
+            }
+        };
+
+        video.addEventListener("timeupdate", onTimeUpdate);
+        video.addEventListener("durationchange", onDurationChange);
+        video.addEventListener("play", onPlay);
+        video.addEventListener("pause", onPause);
+        video.addEventListener("seeked", onSeeked);
+
         return () => {
-            if (intervalRef.current) clearInterval(intervalRef.current);
+            video.removeEventListener("timeupdate", onTimeUpdate);
+            video.removeEventListener("durationchange", onDurationChange);
+            video.removeEventListener("play", onPlay);
+            video.removeEventListener("pause", onPause);
+            video.removeEventListener("seeked", onSeeked);
         };
-    }, [playing]);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [activeSource]);
 
-    function sendAction(type: string) {
+    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: currentTime,
+                time: videoRef.current?.currentTime ?? currentTime,
             })
         );
-    }
+    }, [session, currentTime]);
 
     function handlePlayPause() {
-        const action = playing ? "pause" : "play";
-        sendAction(action);
-        setPlaying(!playing);
+        const video = videoRef.current;
+        if (!video) return;
+        if (video.paused) {
+            video.play().catch(() => { });
+        } else {
+            video.pause();
+        }
     }
 
     function handleSeek(seconds: number) {
-        setCurrentTime((prev) => Math.max(0, prev + seconds));
-        sendAction("seek");
+        const video = videoRef.current;
+        if (!video) return;
+        video.currentTime = Math.max(0, video.currentTime + seconds);
+    }
+
+    function handleProgressClick(e: React.MouseEvent<HTMLDivElement>) {
+        const video = videoRef.current;
+        if (!video || !duration) return;
+        const rect = e.currentTarget.getBoundingClientRect();
+        const ratio = (e.clientX - rect.left) / rect.width;
+        video.currentTime = 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(() => { });
+        }
+    }
+
+    // Listen for fullscreen changes (e.g. pressing Esc)
+    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 (connRef.current) {
+            const stream = connRef.current.stream("watch-room");
+            stream.send(
+                JSON.stringify({
+                    type: "source-change",
+                    user: session?.user?.name,
+                    source,
+                })
+            );
+        }
+    }
+
+    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("");
     }
 
     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;
+
     return (
         <div className="p-8">
             <div className="flex items-center justify-between mb-8">
@@ -189,38 +364,165 @@ export default function WatchTogetherPage() {
                 </div>
             ) : (
                 <div className="grid lg:grid-cols-3 gap-8">
-                    <div className="lg:col-span-2">
-                        <div className="glass rounded-2xl overflow-hidden">
-                            <div className="aspect-video bg-gradient-to-br from-slate-900 to-slate-800 flex items-center justify-center relative">
-                                <div className="text-center">
-                                    <Video className="w-16 h-16 text-slate-600 mx-auto mb-4" />
-                                    <p className="text-slate-500 text-sm">Simulated Video Player</p>
-                                    <p className="text-3xl font-mono text-white mt-2">{formatTime(currentTime)}</p>
-                                </div>
-                                <div className="absolute bottom-0 left-0 right-0 h-1 bg-slate-700">
-                                    <div
-                                        className="h-full bg-gradient-to-r from-pink-500 to-rose-500 transition-all"
-                                        style={{ width: `${Math.min((currentTime / 300) * 100, 100)}%` }}
+                    <div className="lg:col-span-2 space-y-4">
+                        {/* Video Player */}
+                        <div ref={playerContainerRef} className="glass rounded-2xl overflow-hidden">
+                            <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"
                                     />
-                                </div>
+                                ) : (
+                                    <video
+                                        ref={videoRef}
+                                        src={activeSource.url}
+                                        className="w-full h-full object-contain"
+                                        playsInline
+                                        preload="metadata"
+                                    />
+                                )}
                             </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)} / 5:00</span>
-                                <div className="flex-1" />
+                            {/* Controls */}
+                            {!isYouTube && (
+                                <>
+                                    {/* 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-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" />}
+                                        </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
+                                    </div>
+                                    <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" />}
+                                    </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>
+
+                        {/* 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">
-                                    <Users className="w-4 h-4 text-slate-400" />
-                                    <span className="text-sm text-slate-400">{Math.max(viewers.length, 1)} watching</span>
+                                    <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"
+                                >
+                                    {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">
+                                <Video className="w-4 h-4 text-pink-400 shrink-0" />
+                                <span className="text-sm text-slate-300 truncate">{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>
+                                )}
+                            </div>
+
+                            {showPicker && (
+                                <div className="mt-4 space-y-4">
+                                    {/* Custom URL Input */}
+                                    <div>
+                                        <label className="text-xs text-slate-400 mb-2 block">
+                                            Paste a YouTube URL or direct video link
+                                        </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="https://youtube.com/watch?v=... or .mp4 link"
+                                                    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"
+                                            >
+                                                Load
+                                            </button>
+                                        </div>
+                                    </div>
+
+                                    {/* Preset Videos */}
+                                    <div>
+                                        <label className="text-xs text-slate-400 mb-2 block">
+                                            Or choose a sample video
+                                        </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"
+                                                        }`}
+                                                >
+                                                    <Video className="w-4 h-4 text-slate-400 shrink-0" />
+                                                    <span className="text-sm flex-1">{video.label}</span>
+                                                    {activeSource.url === video.url && (
+                                                        <Check className="w-4 h-4 text-pink-400 shrink-0" />
+                                                    )}
+                                                </button>
+                                            ))}
+                                        </div>
+                                    </div>
+                                </div>
+                            )}
                         </div>
                     </div>
 
@@ -250,6 +552,17 @@ export default function WatchTogetherPage() {
                                 {syncEvents.map((event, i) => <div key={i} className="text-xs text-slate-400">{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>
                     </div>
                 </div>
             )}

package/templates/nextjs-auth-demo/src/app/dashboard/layout.tsx

@@ -7,6 +7,7 @@ import {
     Zap,
     LayoutDashboard,
     MessageSquare,
+    PhoneCall,
     Video,
     Database,
     Gamepad2,
@@ -14,15 +15,18 @@ import {
     LogOut,
     Loader2,
     ChevronRight,
+    Swords,
 } from "lucide-react";
 import { useEffect } from "react";
 
 const navItems = [
     { href: "/dashboard", label: "Overview", icon: LayoutDashboard },
     { href: "/dashboard/demos/chat", label: "Real-time Chat", icon: MessageSquare },
+    { href: "/dashboard/demos/video-call", label: "Video Call", icon: PhoneCall },
     { href: "/dashboard/demos/watch-together", label: "Watch Together", icon: Video },
     { href: "/dashboard/demos/queues", label: "Durable Queues", icon: Database },
     { href: "/dashboard/demos/game-sync", label: "Game Sync", icon: Gamepad2 },
+    { href: "/dashboard/demos/arena-game", label: "Arena Game", icon: Swords },
     { href: "/dashboard/demos/encrypted-chat", label: "E2E Encrypted", icon: Lock },
 ];