feat: Add Cloudflare StreamPlayer component and update schema with billing and access control

- Introduced `CloudflareStreamPlayer` React component for embedding streams
- Updated `package.json` with new dependencies: `@cloudflare/stream-react` and `stripe`
- Extended database schema with user tiers, Stripe billing, storage, and archive management
- Added access control logic in `access.ts` for user tiers and feature permissions
- Enhanced billing logic with archive storage limits and subscription checks

packages/web/src/routes/$username.tsx

@@ -2,6 +2,8 @@ import { useEffect, useState } from "react"
 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 { resolveStreamPlayback } from "@/lib/stream/playback"
 
 export const Route = createFileRoute("/$username")({
   ssr: false,
@@ -10,6 +12,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 })
 
 // Hardcoded user for nikiv
 const NIKIV_DATA: StreamPageData = {
@@ -26,6 +29,7 @@ const NIKIV_DATA: StreamPageData = {
     is_live: true,
     viewer_count: 0,
     hls_url: HLS_URL,
+    playback: NIKIV_PLAYBACK,
     thumbnail_url: null,
     started_at: null,
   },
@@ -39,35 +43,72 @@ function StreamPage() {
   const [streamReady, setStreamReady] = useState(false)
 
   useEffect(() => {
+    let isActive = true
+    const setReadySafe = (ready: boolean) => {
+      if (isActive) {
+        setStreamReady(ready)
+      }
+    }
+    const setDataSafe = (next: StreamPageData | null) => {
+      if (isActive) {
+        setData(next)
+      }
+    }
+    const setLoadingSafe = (next: boolean) => {
+      if (isActive) {
+        setLoading(next)
+      }
+    }
+    const setErrorSafe = (next: string | null) => {
+      if (isActive) {
+        setError(next)
+      }
+    }
+
+    setReadySafe(false)
+
     // Special handling for nikiv - hardcoded stream
     if (username === "nikiv") {
-      setData(NIKIV_DATA)
-      setLoading(false)
-      // Check if stream is actually live
-      fetch(HLS_URL)
-        .then((res) => setStreamReady(res.ok))
-        .catch(() => setStreamReady(false))
-      return
+      setDataSafe(NIKIV_DATA)
+      setLoadingSafe(false)
+
+      if (NIKIV_PLAYBACK?.type === "hls") {
+        fetch(NIKIV_PLAYBACK.url)
+          .then((res) => setReadySafe(res.ok))
+          .catch(() => setReadySafe(false))
+      }
+
+      return () => {
+        isActive = false
+      }
     }
 
     const loadData = async () => {
-      setLoading(true)
-      setError(null)
+      setLoadingSafe(true)
+      setErrorSafe(null)
       try {
         const result = await getStreamByUsername(username)
-        setData(result)
-        if (result?.stream?.hls_url) {
-          const res = await fetch(result.stream.hls_url)
-          setStreamReady(res.ok)
+        setDataSafe(result)
+
+        const playback = result?.stream?.playback
+        if (playback?.type === "hls") {
+          const res = await fetch(playback.url)
+          setReadySafe(res.ok)
+        } else {
+          setReadySafe(false)
         }
       } catch (err) {
-        setError("Failed to load stream")
+        setErrorSafe("Failed to load stream")
         console.error(err)
       } finally {
-        setLoading(false)
+        setLoadingSafe(false)
       }
     }
     loadData()
+
+    return () => {
+      isActive = false
+    }
   }, [username])
 
   if (loading) {
@@ -103,12 +144,36 @@ function StreamPage() {
   }
 
   const { user, stream } = data
+  const playback = stream?.playback
+  const showPlayer =
+    playback?.type === "cloudflare" || (playback?.type === "hls" && streamReady)
 
   return (
     <div className="h-screen w-screen bg-black">
-      {stream?.is_live && stream.hls_url && streamReady ? (
-        <VideoPlayer src={stream.hls_url} muted={false} />
-      ) : stream?.is_live && stream.hls_url ? (
+      {stream?.is_live && playback && showPlayer ? (
+        playback.type === "cloudflare" ? (
+          <div className="relative h-full w-full">
+            <CloudflareStreamPlayer
+              uid={playback.uid}
+              customerCode={playback.customerCode}
+              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>
+        ) : (
+          <VideoPlayer src={playback.url} muted={false} />
+        )
+      ) : stream?.is_live && playback ? (
         <div className="flex h-full w-full items-center justify-center text-white">
           <div className="text-center">
             <div className="animate-pulse text-4xl">🔴</div>