164 lines
6.7 KiB
TypeScript
164 lines
6.7 KiB
TypeScript
/**
|
|
* Tube module landing page — rich content for rspace.online/rtube
|
|
*/
|
|
|
|
export function renderLanding(): string {
|
|
return `
|
|
<!-- Hero -->
|
|
<div class="rl-hero">
|
|
<span class="rl-tagline">rTube</span>
|
|
<h1 class="rl-heading">(You)rTube, your channel.</h1>
|
|
<p class="rl-subtitle">Community Video Platform</p>
|
|
<p class="rl-subtext">
|
|
Host, stream, and share video without big tech.
|
|
Your community's video library with HLS streaming and RTMP ingest.
|
|
</p>
|
|
<div class="rl-cta-row">
|
|
<a href="https://demo.rspace.online/rtube" class="rl-cta-primary" id="ml-primary">Start Streaming</a>
|
|
<a href="/create-space" class="rl-cta-secondary">Create a Space</a>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Features -->
|
|
<section class="rl-section">
|
|
<div class="rl-container">
|
|
<h2 class="rl-heading" style="text-align:center">What rTube Handles</h2>
|
|
<div class="rl-grid-4">
|
|
<div class="rl-card rl-card--center">
|
|
<div class="rl-icon-box">📺</div>
|
|
<h3>Video Hosting</h3>
|
|
<p>Upload video files in any major format. MP4, WebM, MKV, MOV — they all work.</p>
|
|
</div>
|
|
<div class="rl-card rl-card--center">
|
|
<div class="rl-icon-box">📡</div>
|
|
<h3>HLS Adaptive Streaming</h3>
|
|
<p>Adaptive bitrate streaming ensures smooth playback on any connection speed or device.</p>
|
|
</div>
|
|
<div class="rl-card rl-card--center">
|
|
<div class="rl-icon-box">📡</div>
|
|
<h3>RTMP Live Ingest</h3>
|
|
<p>Go live with OBS, Streamlabs, or any RTMP-compatible streaming software. One URL, instant broadcast.</p>
|
|
</div>
|
|
<div class="rl-card rl-card--center">
|
|
<div class="rl-icon-box">🎥</div>
|
|
<h3>R2 Cloud Storage & Community Channels</h3>
|
|
<p>Videos stored on Cloudflare R2 for fast delivery. Each space gets its own channel.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- How It Works -->
|
|
<section class="rl-section rl-section--alt">
|
|
<div class="rl-container">
|
|
<h2 class="rl-heading" style="text-align:center">How It Works</h2>
|
|
<div class="rl-grid-3">
|
|
<div class="rl-step">
|
|
<div class="rl-step__num">1</div>
|
|
<h3>Upload or Stream Live</h3>
|
|
<p>Drop video files in any format or point OBS at your space's RTMP ingest URL and go live instantly.</p>
|
|
</div>
|
|
<div class="rl-step">
|
|
<div class="rl-step__num">2</div>
|
|
<h3>Automatic HLS Transcoding</h3>
|
|
<p>FFmpeg transcodes uploads into adaptive bitrate HLS streams for smooth playback on any device.</p>
|
|
</div>
|
|
<div class="rl-step">
|
|
<div class="rl-step__num">3</div>
|
|
<h3>Share with Your Community</h3>
|
|
<p>Videos are organized by space. Share links, embed on your canvas, or browse the community library.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Technical Details (module-specific) -->
|
|
<section class="rl-section">
|
|
<div class="rl-container">
|
|
<h2 class="rl-heading" style="text-align:center">Technical Details</h2>
|
|
<div class="rl-card" style="max-width:600px;margin:0 auto;">
|
|
<ul class="rl-check-list">
|
|
<li><strong>H.264 / H.265</strong> hardware-accelerated codec support</li>
|
|
<li><strong>WebM</strong> (VP8/VP9) for open-format video</li>
|
|
<li><strong>Adaptive bitrate HLS</strong> for smooth playback on any connection</li>
|
|
<li><strong>HTTP Range requests</strong> for efficient seeking and partial downloads</li>
|
|
<li><strong>RTMP ingest</strong> compatible with OBS, Streamlabs, and ffmpeg</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Built on Open Source -->
|
|
<section class="rl-section rl-section--alt">
|
|
<div class="rl-container">
|
|
<h2 class="rl-heading" style="text-align:center">Built on Open Source</h2>
|
|
<p class="rl-subtext" style="text-align:center">The libraries and tools that power rTube.</p>
|
|
<div class="rl-grid-4">
|
|
<div class="rl-card rl-card--center">
|
|
<div class="rl-icon-box">☁</div>
|
|
<h3>AWS S3 SDK</h3>
|
|
<p>Cloudflare R2 object storage via the S3-compatible API. Fast, globally distributed, no egress fees.</p>
|
|
</div>
|
|
<div class="rl-card rl-card--center">
|
|
<div class="rl-icon-box">📺</div>
|
|
<h3>HLS.js</h3>
|
|
<p>Adaptive bitrate streaming library. Smooth playback with automatic quality switching in the browser.</p>
|
|
</div>
|
|
<div class="rl-card rl-card--center">
|
|
<div class="rl-icon-box">🎦</div>
|
|
<h3>FFmpeg</h3>
|
|
<p>Industry-standard video transcoding. Converts uploads into multi-bitrate HLS streams automatically.</p>
|
|
</div>
|
|
<div class="rl-card rl-card--center">
|
|
<div class="rl-icon-box">🔥</div>
|
|
<h3>Hono</h3>
|
|
<p>Ultrafast web framework for the API layer. Lightweight, type-safe, and runs on any JavaScript runtime.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Your Data, Protected -->
|
|
<section class="rl-section">
|
|
<div class="rl-container" style="text-align:center">
|
|
<h2 class="rl-heading">Your Data, Protected</h2>
|
|
<p class="rl-subtext">How rTube keeps your information safe.</p>
|
|
<div class="rl-grid-3">
|
|
<div class="rl-card rl-card--center">
|
|
<div class="rl-icon-box">🔒</div>
|
|
<h3>End-to-End Encryption</h3>
|
|
<span class="rl-badge">Coming Soon</span>
|
|
<p>All content encrypted before it leaves your device. Not even the server can read it.</p>
|
|
</div>
|
|
<div class="rl-card rl-card--center">
|
|
<div class="rl-icon-box">🕵</div>
|
|
<h3>Zero-Knowledge Architecture</h3>
|
|
<span class="rl-badge">Coming Soon</span>
|
|
<p>The server processes your requests without ever seeing your data in the clear.</p>
|
|
</div>
|
|
<div class="rl-card rl-card--center">
|
|
<div class="rl-icon-box">🏠</div>
|
|
<h3>Self-Hosted</h3>
|
|
<p>Run on your own infrastructure. Your server, your rules, your data.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- CTA -->
|
|
<section class="rl-section rl-section--alt">
|
|
<div class="rl-container" style="text-align:center">
|
|
<h2 class="rl-heading">(You)rTube, your channel.</h2>
|
|
<p class="rl-subtext">Try the demo or create a space to get started.</p>
|
|
<div class="rl-cta-row">
|
|
<a href="https://demo.rspace.online/rtube" class="rl-cta-primary">Start Streaming</a>
|
|
<a href="/create-space" class="rl-cta-secondary">Create a Space</a>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<div class="rl-back">
|
|
<a href="/">← Back to rSpace</a>
|
|
</div>`;
|
|
}
|