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/api/streams.$username.ts

@@ -2,6 +2,7 @@ import { createFileRoute } from "@tanstack/react-router"
 import { eq } from "drizzle-orm"
 import { getDb } from "@/db/connection"
 import { users, streams } from "@/db/schema"
+import { resolveStreamPlayback } from "@/lib/stream/playback"
 
 const resolveDatabaseUrl = (request: Request) => {
   try {
@@ -58,6 +59,10 @@ const serve = async ({
       where: eq(streams.user_id, user.id),
     })
 
+    const playback = stream
+      ? resolveStreamPlayback({ hlsUrl: stream.hls_url })
+      : null
+
     const data = {
       user: {
         id: user.id,
@@ -73,6 +78,7 @@ const serve = async ({
             is_live: stream.is_live,
             viewer_count: stream.viewer_count,
             hls_url: stream.hls_url,
+            playback,
             thumbnail_url: stream.thumbnail_url,
             started_at: stream.started_at?.toISOString() ?? null,
           }