Add URL management schema, route, and related updates for URLs feature

packages/web/src/components/CloudflareStreamPlayer.tsx

@@ -78,7 +78,6 @@ export function CloudflareStreamPlayer({
         responsive={false}
         height="100%"
         width="100%"
-        onCanPlay={handleReady}
         onPlaying={handleReady}
       />
     </div>

packages/web/src/lib/jazz/schema.ts

@@ -15,6 +15,24 @@ export type Presence = z.infer<typeof Presence>
  */
 export const PresenceFeed = co.feed(Presence)
 
+/**
+ * Paid comment entry - a message attached to a verified payment
+ */
+export const PaidComment = z.object({
+  message: z.string(),
+  sender: z.string().nullable(),
+  usdAmount: z.number(),
+  solAmount: z.number(),
+  signature: z.string(),
+  createdAt: z.number(),
+})
+export type PaidComment = z.infer<typeof PaidComment>
+
+/**
+ * Feed of paid comment entries
+ */
+export const PaidCommentFeed = co.feed(PaidComment)
+
 /**
  * Container for a stream's presence feed - enables upsertUnique
  */
@@ -22,6 +40,13 @@ export const StreamPresenceContainer = co.map({
   presenceFeed: PresenceFeed,
 })
 
+/**
+ * Container for a stream's paid comment feed - enables upsertUnique
+ */
+export const StreamPaidCommentsContainer = co.map({
+  commentFeed: PaidCommentFeed,
+})
+
 /**
  * Account profile - minimal, just for Jazz to work
  */
@@ -33,12 +58,29 @@ export const ViewerProfile = co
     onCreate: (newGroup) => newGroup.makePublic(),
   })
 
+/**
+ * A saved URL entry
+ */
+export const SavedUrl = z.object({
+  url: z.string(),
+  title: z.string().nullable(),
+  createdAt: z.number(),
+})
+export type SavedUrl = z.infer<typeof SavedUrl>
+
+/**
+ * List of saved URLs
+ */
+export const SavedUrlList = co.list(SavedUrl)
+
 /**
  * Viewer account root - stores any viewer-specific data
  */
 export const ViewerRoot = co.map({
   /** Placeholder field */
   version: z.number(),
+  /** User's saved URLs */
+  savedUrls: SavedUrlList,
 })
 
 /**
@@ -58,6 +100,7 @@ export const ViewerAccount = co
     if (!account.$jazz.has("root")) {
       account.$jazz.set("root", {
         version: 1,
+        savedUrls: SavedUrlList.create([]),
       })
     }
   })

packages/web/src/routeTree.gen.ts

@@ -10,6 +10,7 @@
 
 import { Route as rootRouteImport } from './routes/__root'
 import { Route as UsersRouteImport } from './routes/users'
+import { Route as UrlsRouteImport } from './routes/urls'
 import { Route as SettingsRouteImport } from './routes/settings'
 import { Route as SessionsRouteImport } from './routes/sessions'
 import { Route as MarketplaceRouteImport } from './routes/marketplace'
@@ -27,6 +28,7 @@ import { Route as CanvasCanvasIdRouteImport } from './routes/canvas.$canvasId'
 import { Route as ArchiveArchiveIdRouteImport } from './routes/archive.$archiveId'
 import { Route as ApiUsersRouteImport } from './routes/api/users'
 import { Route as ApiUsageEventsRouteImport } from './routes/api/usage-events'
+import { Route as ApiStreamReplaysRouteImport } from './routes/api/stream-replays'
 import { Route as ApiStreamRouteImport } from './routes/api/stream'
 import { Route as ApiProfileRouteImport } from './routes/api/profile'
 import { Route as ApiContextItemsRouteImport } from './routes/api/context-items'
@@ -43,6 +45,8 @@ import { Route as ApiUsageEventsCreateRouteImport } from './routes/api/usage-eve
 import { Route as ApiStripeWebhooksRouteImport } from './routes/api/stripe/webhooks'
 import { Route as ApiStripeCheckoutRouteImport } from './routes/api/stripe/checkout'
 import { Route as ApiStreamsUsernameRouteImport } from './routes/api/streams.$username'
+import { Route as ApiStreamReplaysReplayIdRouteImport } from './routes/api/stream-replays.$replayId'
+import { Route as ApiSpotifyNowPlayingRouteImport } from './routes/api/spotify.now-playing'
 import { Route as ApiFlowgladSplatRouteImport } from './routes/api/flowglad/$'
 import { Route as ApiChatMutationsRouteImport } from './routes/api/chat/mutations'
 import { Route as ApiChatGuestRouteImport } from './routes/api/chat/guest'
@@ -57,6 +61,7 @@ import { Route as DemoStartSsrSpaModeRouteImport } from './routes/demo/start.ssr
 import { Route as DemoStartSsrFullSsrRouteImport } from './routes/demo/start.ssr.full-ssr'
 import { Route as DemoStartSsrDataOnlyRouteImport } from './routes/demo/start.ssr.data-only'
 import { Route as ApiStreamsUsernameViewersRouteImport } from './routes/api/streams.$username.viewers'
+import { Route as ApiStreamsUsernameReplaysRouteImport } from './routes/api/streams.$username.replays'
 import { Route as ApiCanvasImagesImageIdRouteImport } from './routes/api/canvas.images.$imageId'
 import { Route as ApiCanvasImagesImageIdGenerateRouteImport } from './routes/api/canvas.images.$imageId.generate'
 
@@ -65,6 +70,11 @@ const UsersRoute = UsersRouteImport.update({
   path: '/users',
   getParentRoute: () => rootRouteImport,
 } as any)
+const UrlsRoute = UrlsRouteImport.update({
+  id: '/urls',
+  path: '/urls',
+  getParentRoute: () => rootRouteImport,
+} as any)
 const SettingsRoute = SettingsRouteImport.update({
   id: '/settings',
   path: '/settings',
@@ -150,6 +160,11 @@ const ApiUsageEventsRoute = ApiUsageEventsRouteImport.update({
   path: '/api/usage-events',
   getParentRoute: () => rootRouteImport,
 } as any)
+const ApiStreamReplaysRoute = ApiStreamReplaysRouteImport.update({
+  id: '/api/stream-replays',
+  path: '/api/stream-replays',
+  getParentRoute: () => rootRouteImport,
+} as any)
 const ApiStreamRoute = ApiStreamRouteImport.update({
   id: '/api/stream',
   path: '/api/stream',
@@ -230,6 +245,17 @@ const ApiStreamsUsernameRoute = ApiStreamsUsernameRouteImport.update({
   path: '/api/streams/$username',
   getParentRoute: () => rootRouteImport,
 } as any)
+const ApiStreamReplaysReplayIdRoute =
+  ApiStreamReplaysReplayIdRouteImport.update({
+    id: '/$replayId',
+    path: '/$replayId',
+    getParentRoute: () => ApiStreamReplaysRoute,
+  } as any)
+const ApiSpotifyNowPlayingRoute = ApiSpotifyNowPlayingRouteImport.update({
+  id: '/api/spotify/now-playing',
+  path: '/api/spotify/now-playing',
+  getParentRoute: () => rootRouteImport,
+} as any)
 const ApiFlowgladSplatRoute = ApiFlowgladSplatRouteImport.update({
   id: '/api/flowglad/$',
   path: '/api/flowglad/$',
@@ -302,6 +328,12 @@ const ApiStreamsUsernameViewersRoute =
     path: '/viewers',
     getParentRoute: () => ApiStreamsUsernameRoute,
   } as any)
+const ApiStreamsUsernameReplaysRoute =
+  ApiStreamsUsernameReplaysRouteImport.update({
+    id: '/replays',
+    path: '/replays',
+    getParentRoute: () => ApiStreamsUsernameRoute,
+  } as any)
 const ApiCanvasImagesImageIdRoute = ApiCanvasImagesImageIdRouteImport.update({
   id: '/$imageId',
   path: '/$imageId',
@@ -326,6 +358,7 @@ export interface FileRoutesByFullPath {
   '/marketplace': typeof MarketplaceRoute
   '/sessions': typeof SessionsRoute
   '/settings': typeof SettingsRoute
+  '/urls': typeof UrlsRoute
   '/users': typeof UsersRoute
   '/api/archives': typeof ApiArchivesRouteWithChildren
   '/api/browser-sessions': typeof ApiBrowserSessionsRouteWithChildren
@@ -335,6 +368,7 @@ export interface FileRoutesByFullPath {
   '/api/context-items': typeof ApiContextItemsRoute
   '/api/profile': typeof ApiProfileRoute
   '/api/stream': typeof ApiStreamRoute
+  '/api/stream-replays': typeof ApiStreamReplaysRouteWithChildren
   '/api/usage-events': typeof ApiUsageEventsRouteWithChildren
   '/api/users': typeof ApiUsersRouteWithChildren
   '/archive/$archiveId': typeof ArchiveArchiveIdRoute
@@ -350,6 +384,8 @@ export interface FileRoutesByFullPath {
   '/api/chat/guest': typeof ApiChatGuestRoute
   '/api/chat/mutations': typeof ApiChatMutationsRoute
   '/api/flowglad/$': typeof ApiFlowgladSplatRoute
+  '/api/spotify/now-playing': typeof ApiSpotifyNowPlayingRoute
+  '/api/stream-replays/$replayId': typeof ApiStreamReplaysReplayIdRoute
   '/api/streams/$username': typeof ApiStreamsUsernameRouteWithChildren
   '/api/stripe/checkout': typeof ApiStripeCheckoutRoute
   '/api/stripe/webhooks': typeof ApiStripeWebhooksRoute
@@ -359,6 +395,7 @@ export interface FileRoutesByFullPath {
   '/demo/start/api-request': typeof DemoStartApiRequestRoute
   '/demo/start/server-funcs': typeof DemoStartServerFuncsRoute
   '/api/canvas/images/$imageId': typeof ApiCanvasImagesImageIdRouteWithChildren
+  '/api/streams/$username/replays': typeof ApiStreamsUsernameReplaysRoute
   '/api/streams/$username/viewers': typeof ApiStreamsUsernameViewersRoute
   '/demo/start/ssr/data-only': typeof DemoStartSsrDataOnlyRoute
   '/demo/start/ssr/full-ssr': typeof DemoStartSsrFullSsrRoute
@@ -377,6 +414,7 @@ export interface FileRoutesByTo {
   '/marketplace': typeof MarketplaceRoute
   '/sessions': typeof SessionsRoute
   '/settings': typeof SettingsRoute
+  '/urls': typeof UrlsRoute
   '/users': typeof UsersRoute
   '/api/archives': typeof ApiArchivesRouteWithChildren
   '/api/browser-sessions': typeof ApiBrowserSessionsRouteWithChildren
@@ -386,6 +424,7 @@ export interface FileRoutesByTo {
   '/api/context-items': typeof ApiContextItemsRoute
   '/api/profile': typeof ApiProfileRoute
   '/api/stream': typeof ApiStreamRoute
+  '/api/stream-replays': typeof ApiStreamReplaysRouteWithChildren
   '/api/usage-events': typeof ApiUsageEventsRouteWithChildren
   '/api/users': typeof ApiUsersRouteWithChildren
   '/archive/$archiveId': typeof ArchiveArchiveIdRoute
@@ -401,6 +440,8 @@ export interface FileRoutesByTo {
   '/api/chat/guest': typeof ApiChatGuestRoute
   '/api/chat/mutations': typeof ApiChatMutationsRoute
   '/api/flowglad/$': typeof ApiFlowgladSplatRoute
+  '/api/spotify/now-playing': typeof ApiSpotifyNowPlayingRoute
+  '/api/stream-replays/$replayId': typeof ApiStreamReplaysReplayIdRoute
   '/api/streams/$username': typeof ApiStreamsUsernameRouteWithChildren
   '/api/stripe/checkout': typeof ApiStripeCheckoutRoute
   '/api/stripe/webhooks': typeof ApiStripeWebhooksRoute
@@ -410,6 +451,7 @@ export interface FileRoutesByTo {
   '/demo/start/api-request': typeof DemoStartApiRequestRoute
   '/demo/start/server-funcs': typeof DemoStartServerFuncsRoute
   '/api/canvas/images/$imageId': typeof ApiCanvasImagesImageIdRouteWithChildren
+  '/api/streams/$username/replays': typeof ApiStreamsUsernameReplaysRoute
   '/api/streams/$username/viewers': typeof ApiStreamsUsernameViewersRoute
   '/demo/start/ssr/data-only': typeof DemoStartSsrDataOnlyRoute
   '/demo/start/ssr/full-ssr': typeof DemoStartSsrFullSsrRoute
@@ -430,6 +472,7 @@ export interface FileRoutesById {
   '/marketplace': typeof MarketplaceRoute
   '/sessions': typeof SessionsRoute
   '/settings': typeof SettingsRoute
+  '/urls': typeof UrlsRoute
   '/users': typeof UsersRoute
   '/api/archives': typeof ApiArchivesRouteWithChildren
   '/api/browser-sessions': typeof ApiBrowserSessionsRouteWithChildren
@@ -439,6 +482,7 @@ export interface FileRoutesById {
   '/api/context-items': typeof ApiContextItemsRoute
   '/api/profile': typeof ApiProfileRoute
   '/api/stream': typeof ApiStreamRoute
+  '/api/stream-replays': typeof ApiStreamReplaysRouteWithChildren
   '/api/usage-events': typeof ApiUsageEventsRouteWithChildren
   '/api/users': typeof ApiUsersRouteWithChildren
   '/archive/$archiveId': typeof ArchiveArchiveIdRoute
@@ -454,6 +498,8 @@ export interface FileRoutesById {
   '/api/chat/guest': typeof ApiChatGuestRoute
   '/api/chat/mutations': typeof ApiChatMutationsRoute
   '/api/flowglad/$': typeof ApiFlowgladSplatRoute
+  '/api/spotify/now-playing': typeof ApiSpotifyNowPlayingRoute
+  '/api/stream-replays/$replayId': typeof ApiStreamReplaysReplayIdRoute
   '/api/streams/$username': typeof ApiStreamsUsernameRouteWithChildren
   '/api/stripe/checkout': typeof ApiStripeCheckoutRoute
   '/api/stripe/webhooks': typeof ApiStripeWebhooksRoute
@@ -463,6 +509,7 @@ export interface FileRoutesById {
   '/demo/start/api-request': typeof DemoStartApiRequestRoute
   '/demo/start/server-funcs': typeof DemoStartServerFuncsRoute
   '/api/canvas/images/$imageId': typeof ApiCanvasImagesImageIdRouteWithChildren
+  '/api/streams/$username/replays': typeof ApiStreamsUsernameReplaysRoute
   '/api/streams/$username/viewers': typeof ApiStreamsUsernameViewersRoute
   '/demo/start/ssr/data-only': typeof DemoStartSsrDataOnlyRoute
   '/demo/start/ssr/full-ssr': typeof DemoStartSsrFullSsrRoute
@@ -484,6 +531,7 @@ export interface FileRouteTypes {
     | '/marketplace'
     | '/sessions'
     | '/settings'
+    | '/urls'
     | '/users'
     | '/api/archives'
     | '/api/browser-sessions'
@@ -493,6 +541,7 @@ export interface FileRouteTypes {
     | '/api/context-items'
     | '/api/profile'
     | '/api/stream'
+    | '/api/stream-replays'
     | '/api/usage-events'
     | '/api/users'
     | '/archive/$archiveId'
@@ -508,6 +557,8 @@ export interface FileRouteTypes {
     | '/api/chat/guest'
     | '/api/chat/mutations'
     | '/api/flowglad/$'
+    | '/api/spotify/now-playing'
+    | '/api/stream-replays/$replayId'
     | '/api/streams/$username'
     | '/api/stripe/checkout'
     | '/api/stripe/webhooks'
@@ -517,6 +568,7 @@ export interface FileRouteTypes {
     | '/demo/start/api-request'
     | '/demo/start/server-funcs'
     | '/api/canvas/images/$imageId'
+    | '/api/streams/$username/replays'
     | '/api/streams/$username/viewers'
     | '/demo/start/ssr/data-only'
     | '/demo/start/ssr/full-ssr'
@@ -535,6 +587,7 @@ export interface FileRouteTypes {
     | '/marketplace'
     | '/sessions'
     | '/settings'
+    | '/urls'
     | '/users'
     | '/api/archives'
     | '/api/browser-sessions'
@@ -544,6 +597,7 @@ export interface FileRouteTypes {
     | '/api/context-items'
     | '/api/profile'
     | '/api/stream'
+    | '/api/stream-replays'
     | '/api/usage-events'
     | '/api/users'
     | '/archive/$archiveId'
@@ -559,6 +613,8 @@ export interface FileRouteTypes {
     | '/api/chat/guest'
     | '/api/chat/mutations'
     | '/api/flowglad/$'
+    | '/api/spotify/now-playing'
+    | '/api/stream-replays/$replayId'
     | '/api/streams/$username'
     | '/api/stripe/checkout'
     | '/api/stripe/webhooks'
@@ -568,6 +624,7 @@ export interface FileRouteTypes {
     | '/demo/start/api-request'
     | '/demo/start/server-funcs'
     | '/api/canvas/images/$imageId'
+    | '/api/streams/$username/replays'
     | '/api/streams/$username/viewers'
     | '/demo/start/ssr/data-only'
     | '/demo/start/ssr/full-ssr'
@@ -587,6 +644,7 @@ export interface FileRouteTypes {
     | '/marketplace'
     | '/sessions'
     | '/settings'
+    | '/urls'
     | '/users'
     | '/api/archives'
     | '/api/browser-sessions'
@@ -596,6 +654,7 @@ export interface FileRouteTypes {
     | '/api/context-items'
     | '/api/profile'
     | '/api/stream'
+    | '/api/stream-replays'
     | '/api/usage-events'
     | '/api/users'
     | '/archive/$archiveId'
@@ -611,6 +670,8 @@ export interface FileRouteTypes {
     | '/api/chat/guest'
     | '/api/chat/mutations'
     | '/api/flowglad/$'
+    | '/api/spotify/now-playing'
+    | '/api/stream-replays/$replayId'
     | '/api/streams/$username'
     | '/api/stripe/checkout'
     | '/api/stripe/webhooks'
@@ -620,6 +681,7 @@ export interface FileRouteTypes {
     | '/demo/start/api-request'
     | '/demo/start/server-funcs'
     | '/api/canvas/images/$imageId'
+    | '/api/streams/$username/replays'
     | '/api/streams/$username/viewers'
     | '/demo/start/ssr/data-only'
     | '/demo/start/ssr/full-ssr'
@@ -640,6 +702,7 @@ export interface RootRouteChildren {
   MarketplaceRoute: typeof MarketplaceRoute
   SessionsRoute: typeof SessionsRoute
   SettingsRoute: typeof SettingsRoute
+  UrlsRoute: typeof UrlsRoute
   UsersRoute: typeof UsersRoute
   ApiArchivesRoute: typeof ApiArchivesRouteWithChildren
   ApiBrowserSessionsRoute: typeof ApiBrowserSessionsRouteWithChildren
@@ -649,6 +712,7 @@ export interface RootRouteChildren {
   ApiContextItemsRoute: typeof ApiContextItemsRoute
   ApiProfileRoute: typeof ApiProfileRoute
   ApiStreamRoute: typeof ApiStreamRoute
+  ApiStreamReplaysRoute: typeof ApiStreamReplaysRouteWithChildren
   ApiUsageEventsRoute: typeof ApiUsageEventsRouteWithChildren
   ApiUsersRoute: typeof ApiUsersRouteWithChildren
   I1focusDemoRoute: typeof I1focusDemoRoute
@@ -657,6 +721,7 @@ export interface RootRouteChildren {
   ApiChatGuestRoute: typeof ApiChatGuestRoute
   ApiChatMutationsRoute: typeof ApiChatMutationsRoute
   ApiFlowgladSplatRoute: typeof ApiFlowgladSplatRoute
+  ApiSpotifyNowPlayingRoute: typeof ApiSpotifyNowPlayingRoute
   ApiStreamsUsernameRoute: typeof ApiStreamsUsernameRouteWithChildren
   ApiStripeCheckoutRoute: typeof ApiStripeCheckoutRoute
   ApiStripeWebhooksRoute: typeof ApiStripeWebhooksRoute
@@ -678,6 +743,13 @@ declare module '@tanstack/react-router' {
       preLoaderRoute: typeof UsersRouteImport
       parentRoute: typeof rootRouteImport
     }
+    '/urls': {
+      id: '/urls'
+      path: '/urls'
+      fullPath: '/urls'
+      preLoaderRoute: typeof UrlsRouteImport
+      parentRoute: typeof rootRouteImport
+    }
     '/settings': {
       id: '/settings'
       path: '/settings'
@@ -797,6 +869,13 @@ declare module '@tanstack/react-router' {
       preLoaderRoute: typeof ApiUsageEventsRouteImport
       parentRoute: typeof rootRouteImport
     }
+    '/api/stream-replays': {
+      id: '/api/stream-replays'
+      path: '/api/stream-replays'
+      fullPath: '/api/stream-replays'
+      preLoaderRoute: typeof ApiStreamReplaysRouteImport
+      parentRoute: typeof rootRouteImport
+    }
     '/api/stream': {
       id: '/api/stream'
       path: '/api/stream'
@@ -909,6 +988,20 @@ declare module '@tanstack/react-router' {
       preLoaderRoute: typeof ApiStreamsUsernameRouteImport
       parentRoute: typeof rootRouteImport
     }
+    '/api/stream-replays/$replayId': {
+      id: '/api/stream-replays/$replayId'
+      path: '/$replayId'
+      fullPath: '/api/stream-replays/$replayId'
+      preLoaderRoute: typeof ApiStreamReplaysReplayIdRouteImport
+      parentRoute: typeof ApiStreamReplaysRoute
+    }
+    '/api/spotify/now-playing': {
+      id: '/api/spotify/now-playing'
+      path: '/api/spotify/now-playing'
+      fullPath: '/api/spotify/now-playing'
+      preLoaderRoute: typeof ApiSpotifyNowPlayingRouteImport
+      parentRoute: typeof rootRouteImport
+    }
     '/api/flowglad/$': {
       id: '/api/flowglad/$'
       path: '/api/flowglad/$'
@@ -1007,6 +1100,13 @@ declare module '@tanstack/react-router' {
       preLoaderRoute: typeof ApiStreamsUsernameViewersRouteImport
       parentRoute: typeof ApiStreamsUsernameRoute
     }
+    '/api/streams/$username/replays': {
+      id: '/api/streams/$username/replays'
+      path: '/replays'
+      fullPath: '/api/streams/$username/replays'
+      preLoaderRoute: typeof ApiStreamsUsernameReplaysRouteImport
+      parentRoute: typeof ApiStreamsUsernameRoute
+    }
     '/api/canvas/images/$imageId': {
       id: '/api/canvas/images/$imageId'
       path: '/$imageId'
@@ -1111,6 +1211,17 @@ const ApiCanvasRouteWithChildren = ApiCanvasRoute._addFileChildren(
   ApiCanvasRouteChildren,
 )
 
+interface ApiStreamReplaysRouteChildren {
+  ApiStreamReplaysReplayIdRoute: typeof ApiStreamReplaysReplayIdRoute
+}
+
+const ApiStreamReplaysRouteChildren: ApiStreamReplaysRouteChildren = {
+  ApiStreamReplaysReplayIdRoute: ApiStreamReplaysReplayIdRoute,
+}
+
+const ApiStreamReplaysRouteWithChildren =
+  ApiStreamReplaysRoute._addFileChildren(ApiStreamReplaysRouteChildren)
+
 interface ApiUsageEventsRouteChildren {
   ApiUsageEventsCreateRoute: typeof ApiUsageEventsCreateRoute
 }
@@ -1136,10 +1247,12 @@ const ApiUsersRouteWithChildren = ApiUsersRoute._addFileChildren(
 )
 
 interface ApiStreamsUsernameRouteChildren {
+  ApiStreamsUsernameReplaysRoute: typeof ApiStreamsUsernameReplaysRoute
   ApiStreamsUsernameViewersRoute: typeof ApiStreamsUsernameViewersRoute
 }
 
 const ApiStreamsUsernameRouteChildren: ApiStreamsUsernameRouteChildren = {
+  ApiStreamsUsernameReplaysRoute: ApiStreamsUsernameReplaysRoute,
   ApiStreamsUsernameViewersRoute: ApiStreamsUsernameViewersRoute,
 }
 
@@ -1158,6 +1271,7 @@ const rootRouteChildren: RootRouteChildren = {
   MarketplaceRoute: MarketplaceRoute,
   SessionsRoute: SessionsRoute,
   SettingsRoute: SettingsRoute,
+  UrlsRoute: UrlsRoute,
   UsersRoute: UsersRoute,
   ApiArchivesRoute: ApiArchivesRouteWithChildren,
   ApiBrowserSessionsRoute: ApiBrowserSessionsRouteWithChildren,
@@ -1167,6 +1281,7 @@ const rootRouteChildren: RootRouteChildren = {
   ApiContextItemsRoute: ApiContextItemsRoute,
   ApiProfileRoute: ApiProfileRoute,
   ApiStreamRoute: ApiStreamRoute,
+  ApiStreamReplaysRoute: ApiStreamReplaysRouteWithChildren,
   ApiUsageEventsRoute: ApiUsageEventsRouteWithChildren,
   ApiUsersRoute: ApiUsersRouteWithChildren,
   I1focusDemoRoute: I1focusDemoRoute,
@@ -1175,6 +1290,7 @@ const rootRouteChildren: RootRouteChildren = {
   ApiChatGuestRoute: ApiChatGuestRoute,
   ApiChatMutationsRoute: ApiChatMutationsRoute,
   ApiFlowgladSplatRoute: ApiFlowgladSplatRoute,
+  ApiSpotifyNowPlayingRoute: ApiSpotifyNowPlayingRoute,
   ApiStreamsUsernameRoute: ApiStreamsUsernameRouteWithChildren,
   ApiStripeCheckoutRoute: ApiStripeCheckoutRoute,
   ApiStripeWebhooksRoute: ApiStripeWebhooksRoute,

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

@@ -1,4 +1,4 @@
-import { useEffect, useState } from "react"
+import { useEffect, useRef, useState } from "react"
 import { createFileRoute } from "@tanstack/react-router"
 import { getStreamByUsername, type StreamPageData } from "@/lib/stream/db"
 import { VideoPlayer } from "@/components/VideoPlayer"
@@ -21,6 +21,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, webrtcUrl: null })
+const READY_PULSE_MS = 1200
 
 // Hardcoded user for nikiv
 const NIKIV_DATA: StreamPageData = {
@@ -58,6 +59,8 @@ function StreamPage() {
   const [nowPlayingLoading, setNowPlayingLoading] = useState(false)
   const [nowPlayingError, setNowPlayingError] = useState(false)
   const [streamLive, setStreamLive] = useState(false)
+  const [showReadyPulse, setShowReadyPulse] = useState(false)
+  const readyPulseTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null)
 
   useEffect(() => {
     let isActive = true
@@ -147,6 +150,31 @@ function StreamPage() {
     }
   }, [username])
 
+  useEffect(() => {
+    if (readyPulseTimeoutRef.current) {
+      clearTimeout(readyPulseTimeoutRef.current)
+      readyPulseTimeoutRef.current = null
+    }
+
+    if (!streamReady) {
+      setShowReadyPulse(false)
+      return
+    }
+
+    setShowReadyPulse(true)
+    readyPulseTimeoutRef.current = setTimeout(() => {
+      setShowReadyPulse(false)
+      readyPulseTimeoutRef.current = null
+    }, READY_PULSE_MS)
+
+    return () => {
+      if (readyPulseTimeoutRef.current) {
+        clearTimeout(readyPulseTimeoutRef.current)
+        readyPulseTimeoutRef.current = null
+      }
+    }
+  }, [streamReady])
+
   const stream = data?.stream ?? null
   const playback = stream?.playback ?? null
   const fallbackPlayback = stream?.hls_url
@@ -350,13 +378,13 @@ function StreamPage() {
                 }}
               />
               {!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 className="pointer-events-none absolute inset-0 z-20 flex items-center justify-center bg-black/70">
+                  <div className="animate-pulse text-4xl">🟡</div>
+                </div>
+              )}
+              {showReadyPulse && (
+                <div className="pointer-events-none absolute inset-0 z-20 flex items-center justify-center">
+                  <div className="animate-pulse text-4xl">🔴</div>
                 </div>
               )}
             </div>
@@ -369,27 +397,29 @@ function StreamPage() {
                 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 className="pointer-events-none absolute inset-0 z-20 flex items-center justify-center bg-black/70">
+                  <div className="animate-pulse text-4xl">🟡</div>
+                </div>
+              )}
+              {showReadyPulse && (
+                <div className="pointer-events-none absolute inset-0 z-20 flex items-center justify-center">
+                  <div className="animate-pulse text-4xl">🔴</div>
                 </div>
               )}
             </div>
           ) : (
-            <VideoPlayer src={activePlayback.url} muted={false} />
+            <div className="relative h-full w-full">
+              <VideoPlayer src={activePlayback.url} muted={false} />
+              {showReadyPulse && (
+                <div className="pointer-events-none absolute inset-0 z-20 flex items-center justify-center">
+                  <div className="animate-pulse text-4xl">🔴</div>
+                </div>
+              )}
+            </div>
           )
         ) : isActuallyLive && activePlayback ? (
           <div className="flex h-full w-full 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 className="animate-pulse text-4xl">🟡</div>
           </div>
         ) : (
           <div className="flex h-full w-full items-center justify-center text-white">

packages/web/src/routes/urls.tsx

@@ -0,0 +1,191 @@
+import { useState, type FormEvent } from "react"
+import { createFileRoute } from "@tanstack/react-router"
+import { authClient } from "@/lib/auth-client"
+import { useAccount } from "jazz-tools/react"
+import { ViewerAccount, type SavedUrl } from "@/lib/jazz/schema"
+import { Link2, Plus, Trash2, ExternalLink } from "lucide-react"
+
+export const Route = createFileRoute("/urls")({
+  component: UrlsPage,
+  ssr: false,
+})
+
+function UrlsPage() {
+  const { data: session, isPending: authPending } = authClient.useSession()
+  const me = useAccount(ViewerAccount)
+
+  const [newUrl, setNewUrl] = useState("")
+  const [newTitle, setNewTitle] = useState("")
+  const [isAdding, setIsAdding] = useState(false)
+
+  if (authPending) {
+    return (
+      <div className="min-h-screen text-white grid place-items-center">
+        <p className="text-slate-400">Loading...</p>
+      </div>
+    )
+  }
+
+  if (!session?.user) {
+    return (
+      <div className="min-h-screen text-white grid place-items-center">
+        <div className="text-center space-y-4">
+          <p className="text-slate-400">Please sign in to save URLs</p>
+          <a
+            href="/auth"
+            className="inline-block px-4 py-2 rounded-lg text-sm font-semibold text-white bg-teal-600 hover:bg-teal-500 transition-colors"
+          >
+            Sign in
+          </a>
+        </div>
+      </div>
+    )
+  }
+
+  const root = me.$isLoaded ? me.root : null
+  const urlList = root?.$isLoaded ? root.savedUrls : null
+
+  if (!me.$isLoaded || !root?.$isLoaded) {
+    return (
+      <div className="min-h-screen text-white grid place-items-center">
+        <p className="text-slate-400">Loading Jazz...</p>
+      </div>
+    )
+  }
+
+  const savedUrls: SavedUrl[] = urlList?.$isLoaded ? [...urlList] : []
+
+  const handleAddUrl = (e: FormEvent) => {
+    e.preventDefault()
+    if (!newUrl.trim() || !root?.savedUrls?.$isLoaded) return
+
+    root.savedUrls.$jazz.push({
+      url: newUrl.trim(),
+      title: newTitle.trim() || null,
+      createdAt: Date.now(),
+    })
+
+    setNewUrl("")
+    setNewTitle("")
+    setIsAdding(false)
+  }
+
+  const handleDeleteUrl = (index: number) => {
+    if (!root?.savedUrls?.$isLoaded) return
+    root.savedUrls.$jazz.splice(index, 1)
+  }
+
+  return (
+    <div className="min-h-screen text-white">
+      <div className="max-w-2xl mx-auto px-4 py-10">
+        <div className="flex items-center justify-between mb-8">
+          <div className="flex items-center gap-3">
+            <Link2 className="w-6 h-6 text-teal-400" />
+            <h1 className="text-2xl font-semibold">Saved URLs</h1>
+          </div>
+          <button
+            type="button"
+            onClick={() => setIsAdding(true)}
+            className="inline-flex items-center gap-2 px-4 py-2 rounded-lg text-sm font-medium text-white bg-teal-600 hover:bg-teal-500 transition-colors"
+          >
+            <Plus className="w-4 h-4" />
+            Add URL
+          </button>
+        </div>
+
+        {isAdding && (
+          <form
+            onSubmit={handleAddUrl}
+            className="mb-6 p-4 bg-[#0c0f18] border border-white/10 rounded-xl space-y-4"
+          >
+            <div className="space-y-2">
+              <label className="text-sm text-white/70">URL</label>
+              <input
+                type="url"
+                required
+                value={newUrl}
+                onChange={(e) => setNewUrl(e.target.value)}
+                placeholder="https://example.com"
+                className="w-full bg-white/5 border border-white/10 rounded-lg px-3 py-2 text-white placeholder:text-slate-500 focus:outline-none focus:ring-2 focus:ring-teal-500"
+              />
+            </div>
+            <div className="space-y-2">
+              <label className="text-sm text-white/70">Title (optional)</label>
+              <input
+                type="text"
+                value={newTitle}
+                onChange={(e) => setNewTitle(e.target.value)}
+                placeholder="My favorite site"
+                className="w-full bg-white/5 border border-white/10 rounded-lg px-3 py-2 text-white placeholder:text-slate-500 focus:outline-none focus:ring-2 focus:ring-teal-500"
+              />
+            </div>
+            <div className="flex justify-end gap-2">
+              <button
+                type="button"
+                onClick={() => {
+                  setIsAdding(false)
+                  setNewUrl("")
+                  setNewTitle("")
+                }}
+                className="px-4 py-2 rounded-lg text-sm text-slate-200 bg-white/5 hover:bg-white/10 border border-white/10 transition-colors"
+              >
+                Cancel
+              </button>
+              <button
+                type="submit"
+                className="px-4 py-2 rounded-lg text-sm font-semibold text-white bg-teal-600 hover:bg-teal-500 transition-colors"
+              >
+                Save
+              </button>
+            </div>
+          </form>
+        )}
+
+        {savedUrls.length === 0 ? (
+          <div className="text-center py-12 text-slate-400">
+            <Link2 className="w-12 h-12 mx-auto mb-4 opacity-50" />
+            <p>No saved URLs yet</p>
+            <p className="text-sm mt-1">Click "Add URL" to save your first link</p>
+          </div>
+        ) : (
+          <div className="space-y-2">
+            {savedUrls.map((item, index) => (
+              <div
+                key={index}
+                className="flex items-center gap-3 p-4 bg-[#0c0f18] border border-white/5 rounded-xl hover:border-white/10 transition-colors group"
+              >
+                <div className="flex-1 min-w-0">
+                  <p className="text-sm font-medium text-white truncate">
+                    {item.title || item.url}
+                  </p>
+                  {item.title && (
+                    <p className="text-xs text-white/50 truncate mt-1">
+                      {item.url}
+                    </p>
+                  )}
+                </div>
+                <div className="flex items-center gap-2 opacity-0 group-hover:opacity-100 transition-opacity">
+                  <a
+                    href={item.url}
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    className="p-2 rounded-lg text-white/70 hover:text-white hover:bg-white/10 transition-colors"
+                  >
+                    <ExternalLink className="w-4 h-4" />
+                  </a>
+                  <button
+                    type="button"
+                    onClick={() => handleDeleteUrl(index)}
+                    className="p-2 rounded-lg text-rose-400 hover:text-rose-300 hover:bg-rose-500/10 transition-colors"
+                  >
+                    <Trash2 className="w-4 h-4" />
+                  </button>
+                </div>
+              </div>
+            ))}
+          </div>
+        )}
+      </div>
+    </div>
+  )
+}