/** * rTube demo page — server-rendered HTML body. * * Video library with sidebar, search, player area, download/copy-link buttons. * Client-side tube-demo.ts handles selection, filtering, and playback. */ /* ─── Seed Data ─────────────────────────────────────────────── */ interface DemoVideo { name: string; size: number; } const DEMO_VIDEOS: DemoVideo[] = [ { name: "lac-blanc-test-footage.mp4", size: 245_000_000 }, { name: "chamonix-arrival-timelapse.mp4", size: 128_000_000 }, { name: "matterhorn-sunset-4k.mp4", size: 512_000_000 }, { name: "paragliding-zermatt.webm", size: 89_000_000 }, { name: "glacier-paradise-walk.mp4", size: 340_000_000 }, { name: "tre-cime-circuit-gopro.mp4", size: 420_000_000 }, { name: "dolomites-drone-footage.mkv", size: 780_000_000 }, { name: "group-dinner-recap.mp4", size: 67_000_000 }, ]; /* ─── Helpers ──────────────────────────────────────────────── */ function formatSize(bytes: number): string { if (!bytes) return ""; const units = ["B", "KB", "MB", "GB"]; let i = 0; let b = bytes; while (b >= 1024 && i < units.length - 1) { b /= 1024; i++; } return `${b.toFixed(1)} ${units[i]}`; } function getIcon(filename: string): string { const ext = filename.split(".").pop()?.toLowerCase() || ""; if (["mp4", "webm", "mov"].includes(ext)) return "\u{1F3AC}"; if (["mkv", "avi"].includes(ext)) return "\u26A0\uFE0F"; return "\u{1F4C4}"; } function isPlayable(filename: string): boolean { const ext = filename.split(".").pop()?.toLowerCase() || ""; return ["mp4", "webm", "mov", "ogg", "m4v"].includes(ext); } /* ─── Render ─────────────────────────────────────────────── */ export function renderDemo(): string { const videoListHTML = DEMO_VIDEOS.map( (v) => `
  • ${getIcon(v.name)} ${v.name} ${formatSize(v.size)}
    • `, ).join("\n"); return `

    Video Library

    Browse, preview, and download videos from the Alpine Explorer expedition

    \u{1F3AC} ${DEMO_VIDEOS.length} videos | \u{1F4BE} ${formatSize(DEMO_VIDEOS.reduce((sum, v) => sum + v.size, 0))} total | \u{1F3D4} Alpine Explorer 2026

    Select a video to play

    Host Your Video Library

    rTube gives your community a private video hosting solution with streaming, uploads, and live broadcasting — all powered by Cloudflare R2.

    Create Your Space
    `; }