@sansavision/create-pulse 0.1.0-alpha.1

package/templates/react-watch-together/package.json

@@ -0,0 +1,27 @@
+{
+    "name": "pulse-react-watch-together",
+    "private": true,
+    "version": "0.1.0",
+    "type": "module",
+    "scripts": {
+        "dev": "vite",
+        "build": "tsc -b && vite build",
+        "preview": "vite preview"
+    },
+    "dependencies": {
+        "@sansavision/pulse-sdk": "latest",
+        "react": "^18.3.1",
+        "react-dom": "^18.3.1",
+        "lucide-react": "^0.412.0"
+    },
+    "devDependencies": {
+        "@types/react": "^18.3.3",
+        "@types/react-dom": "^18.3.0",
+        "@vitejs/plugin-react": "^4.3.1",
+        "autoprefixer": "^10.4.19",
+        "postcss": "^8.4.39",
+        "tailwindcss": "^3.4.6",
+        "typescript": "^5.5.3",
+        "vite": "^5.3.4"
+    }
+}

package/templates/react-watch-together/src/App.tsx

@@ -0,0 +1,165 @@
+import { useState, useCallback } from 'react';
+import { usePulse } from './hooks/usePulse';
+import { VideoPlayer } from './components/VideoPlayer';
+import { Activity, Settings2, Users } from 'lucide-react';
+
+const VIDEO_URL = "https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4";
+const STREAM_NAME = "watch-together-demo";
+
+export default function App() {
+    const { isConnected, isConnecting, metrics, useChannel } = usePulse({
+        relayUrl: 'ws://localhost:4001',
+        apiKey: 'demo'
+    });
+
+    const [hostTime, setHostTime] = useState(0);
+    const [peerTime, setPeerTime] = useState(0);
+    const [isPlaying, setIsPlaying] = useState(false);
+    const [events, setEvents] = useState<{ id: number, action: string, time: string }[]>([]);
+
+    const logEvent = useCallback((action: string) => {
+        setEvents(prev => [...prev.slice(-4), {
+            id: Date.now(),
+            action,
+            time: new Date().toISOString().substring(11, 23)
+        }]);
+    }, []);
+
+    const handleSyncMessage = useCallback((msg: any) => {
+        logEvent(`RECV: ${msg.action}`);
+
+        switch (msg.action) {
+            case 'play':
+                setIsPlaying(true);
+                if (msg.time !== undefined) setPeerTime(msg.time);
+                break;
+            case 'pause':
+                setIsPlaying(false);
+                if (msg.time !== undefined) setPeerTime(msg.time);
+                break;
+            case 'seek':
+                if (msg.time !== undefined) setPeerTime(msg.time);
+                break;
+            case 'tick':
+                if (msg.time !== undefined) setPeerTime(msg.time);
+                break;
+        }
+    }, [logEvent]);
+
+    // Connect to the synchronized channel
+    const { broadcast } = useChannel(STREAM_NAME, handleSyncMessage);
+
+    const broadcastAction = useCallback((action: string, time: number) => {
+        logEvent(`SEND: ${action}`);
+        broadcast({ action, time, ts: Date.now() });
+    }, [broadcast, logEvent]);
+
+    return (
+        <div className="max-w-6xl mx-auto p-6 space-y-8">
+            {/* Header */}
+            <header className="flex flex-col md:flex-row items-start md:items-center justify-between gap-4 pb-6 border-b">
+                <div className="flex items-center gap-3">
+                    <div className="w-10 h-10 rounded-xl bg-gradient-to-br from-indigo-500 to-purple-600 flex items-center justify-center shadow-lg shadow-indigo-500/20">
+                        <Activity className="text-white w-6 h-6" />
+                    </div>
+                    <div>
+                        <h1 className="text-2xl font-bold tracking-tight">Watch Together</h1>
+                        <p className="text-sm text-muted-foreground">Synchronized React Video Player via Pulse Relay</p>
+                    </div>
+                </div>
+
+                <div className="flex gap-4 text-sm font-mono items-center bg-card px-4 py-2 rounded-lg border shadow-sm">
+                    <div className="flex items-center gap-2">
+                        <div className={`w-2.5 h-2.5 rounded-full ${isConnected ? 'bg-emerald-500' : isConnecting ? 'bg-amber-500' : 'bg-red-500'}`} />
+                        <span className={isConnected ? 'text-emerald-500' : 'text-muted-foreground'}>
+                            {isConnected ? 'Relay Connected' : isConnecting ? 'Connecting...' : 'Disconnected'}
+                        </span>
+                    </div>
+                    {metrics && (
+                        <div className="flex items-center gap-4 border-l pl-4 border-border/50 text-muted-foreground hidden sm:flex">
+                            <span>RTT: <span className="text-foreground">{Math.round(metrics.rtt)}ms</span></span>
+                            <span>Loss: <span className="text-foreground">{metrics.packetLoss}%</span></span>
+                        </div>
+                    )}
+                </div>
+            </header>
+
+            <main className="grid grid-cols-1 lg:grid-cols-3 gap-8">
+
+                {/* Main Viewing Area */}
+                <div className="lg:col-span-2 space-y-8">
+                    <VideoPlayer
+                        role="host"
+                        label="Host Player (You control this)"
+                        src={VIDEO_URL}
+                        currentTime={hostTime}
+                        isPlaying={isPlaying}
+                        onPlay={() => { setIsPlaying(true); broadcastAction('play', hostTime); }}
+                        onPause={() => { setIsPlaying(false); broadcastAction('pause', hostTime); }}
+                        onSeek={(t) => { setHostTime(t); broadcastAction('seek', t); }}
+                        onTick={(t) => { setHostTime(t); broadcastAction('tick', t); }}
+                        accentColor="#8B5CF6" // Purple
+                    />
+
+                    <VideoPlayer
+                        role="peer"
+                        label="Peer Viewer (Remote representation)"
+                        src={VIDEO_URL}
+                        currentTime={peerTime}
+                        isPlaying={isPlaying}
+                        accentColor="#06B6D4" // Cyan
+                    />
+                </div>
+
+                {/* Sidebar Debug Control / Info */}
+                <aside className="space-y-6">
+                    <div className="p-5 rounded-xl border bg-card shadow-sm space-y-4">
+                        <div className="flex items-center gap-2 font-medium text-foreground tracking-tight border-b pb-3">
+                            <Settings2 className="w-4 h-4 text-primary" />
+                            Sync Telemetry
+                        </div>
+
+                        <div className="space-y-3 font-mono text-xs">
+                            <div className="flex justify-between items-center p-2 rounded bg-background border">
+                                <span className="text-muted-foreground">Host Time</span>
+                                <span className="text-foreground">{hostTime.toFixed(2)}s</span>
+                            </div>
+                            <div className="flex justify-between items-center p-2 rounded bg-background border">
+                                <span className="text-muted-foreground">Peer Time</span>
+                                <span className="text-foreground">{peerTime.toFixed(2)}s</span>
+                            </div>
+                            <div className="flex justify-between items-center p-2 rounded bg-background border">
+                                <span className="text-muted-foreground">Drift</span>
+                                <span className={`font-semibold ${Math.abs(hostTime - peerTime) > 0.15 ? 'text-amber-500' : 'text-emerald-500'}`}>
+                                    {Math.abs(hostTime - peerTime).toFixed(3)}s
+                                </span>
+                            </div>
+                        </div>
+                    </div>
+
+                    <div className="p-5 rounded-xl border bg-card shadow-sm space-y-4">
+                        <div className="flex items-center gap-2 font-medium text-foreground tracking-tight border-b pb-3">
+                            <Users className="w-4 h-4 text-primary" />
+                            Pulse Event Log
+                        </div>
+
+                        <div className="flex flex-col gap-2 font-mono text-[11px]">
+                            {events.length === 0 ? (
+                                <div className="text-muted-foreground italic p-2">No events yet. Press play!</div>
+                            ) : events.map(ev => (
+                                <div key={ev.id} className="flex gap-3 items-center p-2 rounded bg-background border">
+                                    <span className="text-muted-foreground shrink-0">{ev.time}</span>
+                                    <span className={`px-1.5 py-0.5 rounded font-bold uppercase tracking-wider ${ev.action.includes('SEND') ? 'bg-primary/20 text-primary' : 'bg-cyan-500/20 text-cyan-400'}`}>
+                                        {ev.action.split(':')[0]}
+                                    </span>
+                                    <span className="text-foreground truncate opacity-80">{ev.action.split(':')[1]}</span>
+                                </div>
+                            ))}
+                        </div>
+                    </div>
+                </aside>
+
+            </main>
+        </div>
+    );
+}

package/templates/react-watch-together/src/components/VideoPlayer.tsx

@@ -0,0 +1,113 @@
+import { useRef, useEffect } from 'react';
+
+interface VideoPlayerProps {
+    label: string;
+    role: 'host' | 'peer';
+    src: string;
+    currentTime: number;
+    isPlaying: boolean;
+    onPlay?: () => void;
+    onPause?: () => void;
+    onSeek?: (time: number) => void;
+    onTick?: (time: number) => void;
+    accentColor: string;
+}
+
+export function VideoPlayer({
+    label,
+    role,
+    src,
+    currentTime,
+    isPlaying,
+    onPlay,
+    onPause,
+    onSeek,
+    onTick,
+    accentColor
+}: VideoPlayerProps) {
+    const videoRef = useRef<HTMLVideoElement>(null);
+
+    // Handle incoming remote state changes
+    useEffect(() => {
+        const video = videoRef.current;
+        if (!video) return;
+
+        if (role === 'peer') {
+            const drift = Math.abs(video.currentTime - currentTime);
+            // Only force seek if drift > 150ms to avoid audio stuttering
+            if (drift > 0.150) {
+                video.currentTime = currentTime;
+            }
+
+            if (isPlaying && video.paused) {
+                video.play().catch(console.error);
+            } else if (!isPlaying && !video.paused) {
+                video.pause();
+            }
+        }
+    }, [currentTime, isPlaying, role]);
+
+    // Handle local user interactions (Host only)
+    useEffect(() => {
+        const video = videoRef.current;
+        if (!video || role !== 'host') return;
+
+        const handlePlay = () => onPlay?.();
+        const handlePause = () => onPause?.();
+        const handleSeek = () => {
+            // Small timeout allows the video time to update before broadcasting
+            setTimeout(() => onSeek?.(video.currentTime), 0);
+        };
+
+        video.addEventListener('play', handlePlay);
+        video.addEventListener('pause', handlePause);
+        video.addEventListener('seeked', handleSeek);
+
+        return () => {
+            video.removeEventListener('play', handlePlay);
+            video.removeEventListener('pause', handlePause);
+            video.removeEventListener('seeked', handleSeek);
+        };
+    }, [role, onPlay, onPause, onSeek]);
+
+    // Periodic tick for Host to sync peers
+    useEffect(() => {
+        const video = videoRef.current;
+        if (!video || role !== 'host' || !onTick) return;
+
+        const interval = setInterval(() => {
+            if (!video.paused) {
+                onTick(video.currentTime);
+            }
+        }, 500);
+
+        return () => clearInterval(interval);
+    }, [role, onTick]);
+
+    return (
+        <div className="flex flex-col gap-2">
+            <div className="flex items-center gap-2 text-sm text-muted-foreground">
+                <div
+                    className="w-2.5 h-2.5 rounded-full"
+                    style={{ backgroundColor: accentColor }}
+                />
+                {label}
+                {role === 'peer' && (
+                    <span className="ml-auto px-2 mx-2 py-0.5 rounded-full border border-cyan-500/20 bg-cyan-500/10 text-cyan-400 text-xs font-mono">
+                        Synced via Pulse
+                    </span>
+                )}
+            </div>
+
+            <div className="relative rounded-lg overflow-hidden border bg-black shadow-sm h-64 sm:h-80 md:h-96">
+                <video
+                    ref={videoRef}
+                    controls={role === 'host'}
+                    className={`w-full h-full object-cover ${role === 'peer' ? 'pointer-events-none' : ''}`}
+                    src={src}
+                    crossOrigin="anonymous"
+                />
+            </div>
+        </div>
+    );
+}

package/templates/react-watch-together/src/hooks/usePulse.ts

@@ -0,0 +1,113 @@
+import { useState, useEffect, useCallback, useRef } from 'react';
+import { Pulse, PulseConnection, PulseStream, ConnectionMetrics } from '@sansavision/pulse-sdk';
+
+interface UsePulseOptions {
+    relayUrl?: string;
+    apiKey?: string;
+}
+
+export function usePulse(options: UsePulseOptions = {}) {
+    const {
+        relayUrl = 'ws://localhost:4001',
+        apiKey = 'demo'
+    } = options;
+
+    const [isConnected, setIsConnected] = useState(false);
+    const [metrics, setMetrics] = useState<ConnectionMetrics | null>(null);
+    const [error, setError] = useState<Error | null>(null);
+    const [isConnecting, setIsConnecting] = useState(true);
+
+    const connectionRef = useRef<PulseConnection | null>(null);
+
+    // Establish connection on mount
+    useEffect(() => {
+        let mounted = true;
+        const pulse = new Pulse({ apiKey });
+
+        setIsConnecting(true);
+
+        pulse.connect(relayUrl)
+            .then(conn => {
+                if (!mounted) {
+                    conn.disconnect();
+                    return;
+                }
+
+                connectionRef.current = conn;
+                setIsConnected(true);
+                setIsConnecting(false);
+
+                conn.on('metrics', (m) => {
+                    if (mounted) setMetrics(m);
+                });
+
+                conn.on('disconnect', () => {
+                    if (mounted) setIsConnected(false);
+                });
+            })
+            .catch(err => {
+                if (mounted) {
+                    setError(err);
+                    setIsConnecting(false);
+                }
+            });
+
+        return () => {
+            mounted = false;
+            if (connectionRef.current) {
+                connectionRef.current.disconnect();
+                connectionRef.current = null;
+            }
+        };
+    }, [relayUrl, apiKey]);
+
+    // Helper to open a pub/sub or RPC stream and manage its lifecycle
+    const useChannel = useCallback((channelName: string, onMessage?: (data: any) => void) => {
+        const [stream, setStream] = useState<PulseStream | null>(null);
+
+        useEffect(() => {
+            if (!isConnected || !connectionRef.current) return;
+
+            const newStream = connectionRef.current.stream(channelName, {
+                qos: 'interactive-data' // Best for low-latency sync
+            });
+
+            setStream(newStream);
+
+            const handleData = (buf: Uint8Array) => {
+                if (!onMessage) return;
+                try {
+                    const str = new TextDecoder().decode(buf);
+                    onMessage(JSON.parse(str));
+                } catch (err) {
+                    console.error("Failed to decode channel message", err);
+                }
+            };
+
+            newStream.on('data', handleData);
+
+            return () => {
+                newStream.off('data', handleData);
+                newStream.close();
+            };
+        }, [isConnected, channelName, onMessage]);
+
+        const broadcast = useCallback((data: any) => {
+            if (stream) {
+                const payload = new TextEncoder().encode(JSON.stringify(data));
+                stream.send(payload);
+            }
+        }, [stream]);
+
+        return { stream, broadcast };
+    }, [isConnected]);
+
+    return {
+        isConnected,
+        isConnecting,
+        metrics,
+        error,
+        connection: connectionRef.current,
+        useChannel
+    };
+}

package/templates/react-watch-together/src/index.css

@@ -0,0 +1,38 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+  :root {
+    --background: 240 10% 4%;
+    --foreground: 0 0% 98%;
+    --card: 240 10% 6%;
+    --card-foreground: 0 0% 98%;
+    --popover: 240 10% 4%;
+    --popover-foreground: 0 0% 98%;
+    --primary: 262 83% 58%;
+    --primary-foreground: 210 40% 98%;
+    --secondary: 240 4% 16%;
+    --secondary-foreground: 0 0% 98%;
+    --muted: 240 5% 26%;
+    --muted-foreground: 240 5% 65%;
+    --accent: 262 83% 58%;
+    --accent-foreground: 0 0% 98%;
+    --destructive: 0 62.8% 30.6%;
+    --destructive-foreground: 0 0% 98%;
+    --border: 240 6% 15%;
+    --input: 240 6% 15%;
+    --ring: 240 5% 65%;
+    --radius: 0.5rem;
+  }
+}
+
+@layer base {
+  * {
+    @apply border-border;
+  }
+  body {
+    @apply bg-background text-foreground bg-[radial-gradient(ellipse_at_top,_var(--tw-gradient-stops))] from-indigo-900/20 via-background to-background min-h-screen text-sm;
+    font-feature-settings: "rlig" 1, "calt" 1;
+  }
+}

package/templates/react-watch-together/src/main.tsx

@@ -0,0 +1,10 @@
+import React from 'react'
+import ReactDOM from 'react-dom/client'
+import App from './App.tsx'
+import './index.css'
+
+ReactDOM.createRoot(document.getElementById('root')!).render(
+    <React.StrictMode>
+        <App />
+    </React.StrictMode>,
+)

package/templates/react-watch-together/tailwind.config.js

@@ -0,0 +1,55 @@
+/** @type {import('tailwindcss').Config} */
+export default {
+  darkMode: ["class"],
+  content: [
+    './pages/**/*.{ts,tsx}',
+    './components/**/*.{ts,tsx}',
+    './app/**/*.{ts,tsx}',
+    './src/**/*.{ts,tsx}',
+  ],
+  theme: {
+    extend: {
+      colors: {
+        border: "hsl(var(--border))",
+        input: "hsl(var(--input))",
+        ring: "hsl(var(--ring))",
+        background: "hsl(var(--background))",
+        foreground: "hsl(var(--foreground))",
+        primary: {
+          DEFAULT: "hsl(var(--primary))",
+          foreground: "hsl(var(--primary-foreground))",
+        },
+        secondary: {
+          DEFAULT: "hsl(var(--secondary))",
+          foreground: "hsl(var(--secondary-foreground))",
+        },
+        destructive: {
+          DEFAULT: "hsl(var(--destructive))",
+          foreground: "hsl(var(--destructive-foreground))",
+        },
+        muted: {
+          DEFAULT: "hsl(var(--muted))",
+          foreground: "hsl(var(--muted-foreground))",
+        },
+        accent: {
+          DEFAULT: "hsl(var(--accent))",
+          foreground: "hsl(var(--accent-foreground))",
+        },
+        popover: {
+          DEFAULT: "hsl(var(--popover))",
+          foreground: "hsl(var(--popover-foreground))",
+        },
+        card: {
+          DEFAULT: "hsl(var(--card))",
+          foreground: "hsl(var(--card-foreground))",
+        },
+      },
+      borderRadius: {
+        lg: "var(--radius)",
+        md: "calc(var(--radius) - 2px)",
+        sm: "calc(var(--radius) - 4px)",
+      },
+    },
+  },
+  plugins: [],
+}

package/templates/react-watch-together/tsconfig.json

@@ -0,0 +1,25 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "react-jsx",
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true
+  },
+  "include": ["src"],
+  "references": [{ "path": "./tsconfig.node.json" }]
+}

package/templates/react-watch-together/tsconfig.node.json

@@ -0,0 +1,11 @@
+{
+  "compilerOptions": {
+    "composite": true,
+    "skipLibCheck": true,
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "allowSyntheticDefaultImports": true,
+    "strict": true
+  },
+  "include": ["vite.config.ts"]
+}