feat: assets cleanup and video player design

apps/www/components/blocks/preview-pane.tsx

@@ -2,7 +2,7 @@
 
 import { domAnimation, LazyMotion, m } from "motion/react"
 import { usePathname, useRouter, useSearchParams } from "next/navigation"
-import React, { useCallback, useLayoutEffect, useState } from "react"
+import React, { useCallback, useLayoutEffect, useRef, useState } from "react"
 
 import { StreamPanelProvider } from "@/components/stream-panel"
 import { useThemeToggle } from "@/components/theme-toggle"
@@ -25,6 +25,7 @@ export function BlockPreviewWithToolbar({
   const [expanded, setExpanded] = useState(() => {
     return searchParams.get(EXPANDED_QUERY_PARAM) === "true"
   })
+  const expandedRef = useRef(expanded)
   const { isDark, toggleTheme } = useThemeToggle({
     blur: false,
     start: "top-right",
@@ -51,19 +52,20 @@ export function BlockPreviewWithToolbar({
   )
 
   const handleExpandToggle = useCallback(() => {
-    setExpanded((previousExpanded) => {
-      const nextExpanded = !previousExpanded
-      updateExpandedQuery(nextExpanded)
-      return nextExpanded
-    })
+    const nextExpanded = !expandedRef.current
+    expandedRef.current = nextExpanded
+    setExpanded(nextExpanded)
+    updateExpandedQuery(nextExpanded)
   }, [updateExpandedQuery])
 
   const handleReload = useCallback(() => {
     setReloadKey((k) => k + 1)
   }, [])
 
   useLayoutEffect(() => {
-    setExpanded(searchParams.get(EXPANDED_QUERY_PARAM) === "true")
+    const nextExpanded = searchParams.get(EXPANDED_QUERY_PARAM) === "true"
+    expandedRef.current = nextExpanded
+    setExpanded(nextExpanded)
   }, [pathname, searchParams])
 
   // DEV: This controls the left doc section to be hidden when preview is expanded

apps/www/components/players/video-player/player-container.tsx

@@ -3,7 +3,7 @@
 import type { RefObject } from "react"
 
 import { ChevronDownIcon, MonitorPlayIcon, RotateCwIcon } from "lucide-react"
-import { useRef } from "react"
+import { useMemo, useRef } from "react"
 import { useFullscreen, useToggle } from "react-use"
 
 import {
@@ -27,6 +27,10 @@ export function VideoPlayerContainer() {
   const { isPortrait } = useOrientation()
   const isMobilePortrait = isMobile && isPortrait
   const playerRef = useRef<HTMLDivElement>(null)
+  const controlsVisibility = useVideoPlayerControlsVisibility({
+    disabled: isMobilePortrait,
+    isMobile,
+  })
 
   return (
     <StreamPanelProvider>
@@ -50,6 +54,7 @@ export function VideoPlayerContainer() {
             muted: true,
           }}
           ref={playerRef}
+          {...controlsVisibility}
         >
           <HomeVideoStreamSelector />
         </VideoPlayer>
@@ -165,6 +170,22 @@ function useSelectedStreamName() {
 
   return (
     getPresetsForType("video").find((preset) => preset.id === selection.id)
-      ?.name ?? "Custom Stream"
+      ?.title ?? "Custom Stream"
+  )
+}
+
+function useVideoPlayerControlsVisibility({
+  disabled,
+  isMobile,
+}: {
+  disabled: boolean
+  isMobile: boolean
+}) {
+  return useMemo(
+    () => ({
+      controlsHideDelay: disabled ? 0 : 1800,
+      hideCursorOnIdle: !disabled && !isMobile,
+    }),
+    [disabled, isMobile]
   )
 }

apps/www/components/stream-panel/content-catalog.ts

@@ -42,6 +42,7 @@ export interface BlenderOpenFilmImages {
   backdrop?: string
   logo?: string
   poster?: string
+  thumbnail?: string
 }
 
 export interface BlenderStreamResponse extends BlenderPlaylistItem {
@@ -141,6 +142,7 @@ const BlenderOpenFilmImagesSchema = z.object({
   backdrop: z.string().optional(),
   logo: z.string().optional(),
   poster: z.string().optional(),
+  thumbnail: z.string().optional(),
 })
 
 const BlenderStreamCaptionSchema = z.object({
@@ -421,7 +423,7 @@ function toBlenderOpenFilmAsset(
     duration: item.duration,
     id: item.id,
     images: item.images,
-    poster: item.images?.backdrop ?? item.images?.poster,
+    poster: item.images?.thumbnail ?? item.images?.poster,
     source: "blender-open-film",
     subtitle: item.subtitle,
     title: item.title,

apps/www/components/stream-panel/panel-popover.tsx

@@ -98,7 +98,7 @@ export function StreamPanel({
     }
 
     return (
-      presets.find((preset) => preset.id === contentSelection.id)?.name ??
+      presets.find((preset) => preset.id === contentSelection.id)?.title ??
       STREAM_PANEL_EMPTY_CONTENT_LABEL
     )
   }, [contentSelection, playlistPresets, presets])

apps/www/components/stream-panel/presets-overlay.tsx

@@ -138,7 +138,7 @@ export function PresetsOverlay({
                       >
                         <div className="min-w-0 flex-1">
                           <div className="flex items-center gap-2 pr-5">
-                            <span className="truncate">{preset.name}</span>
+                            <span className="truncate">{preset.title}</span>
                           </div>
                           {preset.description ? (
                             <span className="mt-1 block truncate text-[11px] text-muted-foreground">

apps/www/components/stream-panel/use-stream-panel-sync.ts

@@ -278,8 +278,8 @@ export function useStreamPanelSync({
         format: "progressive",
         group: "Special",
         id,
-        name: "Custom Stream",
         src,
+        title: "Custom Stream",
         type: playerType,
       }
       loadSource(asset as unknown as Asset, { loading: assetOptions })