From 2a98dd1d0b361d1f40efc6b6c3b8fc60177201be Mon Sep 17 00:00:00 2001
From: Nikita <github@nikiv.dev>
Date: Sun, 21 Dec 2025 18:37:46 -0800
Subject: [PATCH] Update stream playback configuration to include WebRTC
 support and conditionally render WebRTC player in stream page.

---
 .ai/commit-checkpoints.json           |  6 +++---
 packages/web/src/routes/$username.tsx | 28 ++++++++++++++++++++++++---
 2 files changed, 28 insertions(+), 6 deletions(-)

diff --git a/.ai/commit-checkpoints.json b/.ai/commit-checkpoints.json
index 7697483a..6a895d86 100644
--- a/.ai/commit-checkpoints.json
+++ b/.ai/commit-checkpoints.json
@@ -1,7 +1,7 @@
 {
   "last_commit": {
-    "timestamp": "2025-12-22T02:34:08.927463+00:00",
-    "session_id": "019b43e7-d67f-7913-8869-c71b4462765a",
-    "last_entry_timestamp": "2025-12-22T02:34:05.739Z"
+    "timestamp": "2025-12-22T02:36:05.675814+00:00",
+    "session_id": "019b43e9-b86b-7a80-939f-6ee733a40258",
+    "last_entry_timestamp": "2025-12-22T02:36:02.528Z"
   }
 }
\ No newline at end of file
diff --git a/packages/web/src/routes/$username.tsx b/packages/web/src/routes/$username.tsx
index 89ecd6bf..9446021c 100644
--- a/packages/web/src/routes/$username.tsx
+++ b/packages/web/src/routes/$username.tsx
@@ -3,6 +3,7 @@ import { createFileRoute } from "@tanstack/react-router"
 import { getStreamByUsername, type StreamPageData } from "@/lib/stream/db"
 import { VideoPlayer } from "@/components/VideoPlayer"
 import { CloudflareStreamPlayer } from "@/components/CloudflareStreamPlayer"
+import { WebRTCPlayer } from "@/components/WebRTCPlayer"
 import { resolveStreamPlayback } from "@/lib/stream/playback"
 import { JazzProvider } from "@/lib/jazz/provider"
 import { ViewerCount } from "@/components/ViewerCount"
@@ -14,7 +15,7 @@ export const Route = createFileRoute("/$username")({
 
 // Cloudflare Stream HLS URL
 const HLS_URL = "https://customer-xctsztqzu046isdc.cloudflarestream.com/bb7858eafc85de6c92963f3817477b5d/manifest/video.m3u8"
-const NIKIV_PLAYBACK = resolveStreamPlayback({ hlsUrl: HLS_URL })
+const NIKIV_PLAYBACK = resolveStreamPlayback({ hlsUrl: HLS_URL, webrtcUrl: null })
 
 // Hardcoded user for nikiv
 const NIKIV_DATA: StreamPageData = {
@@ -31,6 +32,7 @@ const NIKIV_DATA: StreamPageData = {
     is_live: false, // Set to true when actually streaming
     viewer_count: 0,
     hls_url: HLS_URL,
+    webrtc_url: null,
     playback: NIKIV_PLAYBACK,
     thumbnail_url: null,
     started_at: null,
@@ -148,7 +150,9 @@ function StreamPage() {
   const { user, stream } = data
   const playback = stream?.playback
   const showPlayer =
-    playback?.type === "cloudflare" || (playback?.type === "hls" && streamReady)
+    playback?.type === "cloudflare" ||
+    playback?.type === "webrtc" ||
+    (playback?.type === "hls" && streamReady)
 
   return (
     <JazzProvider>
@@ -159,7 +163,25 @@ function StreamPage() {
         </div>
 
         {stream?.is_live && playback && showPlayer ? (
-          playback.type === "cloudflare" ? (
+          playback.type === "webrtc" ? (
+            <div className="relative h-full w-full">
+              <WebRTCPlayer
+                src={playback.url}
+                muted={false}
+                onReady={() => setStreamReady(true)}
+              />
+              {!streamReady && (
+                <div className="absolute inset-0 flex items-center justify-center text-white">
+                  <div className="text-center">
+                    <div className="animate-pulse text-4xl">🔴</div>
+                    <p className="mt-4 text-xl text-neutral-400">
+                      Connecting to stream...
+                    </p>
+                  </div>
+                </div>
+              )}
+            </div>
+          ) : playback.type === "cloudflare" ? (
             <div className="relative h-full w-full">
               <CloudflareStreamPlayer
                 uid={playback.uid}