Channels. Live streams. Library. One streaming platform.
Nine content categories, four subscription states, and a 30-second live refresh cycle. Browse, watch, subscribe, and build a personal library from a single consumer-facing video platform.
,0,
client components in packages/tv-clients
,0,
content categories for browse filtering
,0,
API routes under /api/tv/
,0,
subscription status states
5 content rows. 1 hero banner. One feed.
The home page at /tv renders a featured hero banner followed by four horizontal content rows: Trending, Live Now, Recently Added, and Continue Watching. Each row scrolls independently. The feed is assembled server-side from /api/tv/feed.
Hero Banner
Featured content spotlight. Full-width image with gradient overlay, category tag, title, description, and Watch Now action.
Trending
Horizontal row of trending video cards. Thumbnail, duration badge, title, creator name, view count, and publish date.
Live Now
Active live streams with pulsing LIVE badge overlay. Click-through to the player.
Recently Added
Newest content from followed channels. Chronological row updated on each page load.
Continue Watching
Videos with in-progress playback. Pink progress bar on each thumbnail. One tap resumes from the last position.
Live Concert Series: Summer Sessions
Streaming now from 3 venues
Trending
Tech Review: Q2
Cooking Basics
Design Systems
Continue Watching
Ep 4: Routing
Ep 2: State
Browse by category. Search by keyword.
Nine categories with three sort modes. One debounced search input returning videos and channels.
9 categories. 3 sorts. One search bar.
Two paths to content. Browse filters the full catalog by category and sort order in a paginated grid. Search queries the /api/tv/search endpoint and returns videos and channels in separate result groups.
Browse
/tv/browseCategory filter pills across the top. Sort toggle between Trending, Newest, and Most Popular. Responsive grid of video cards with load-more pagination in batches of 20.
Search
/tv/searchUnified search input with 350ms debounce. Results split into two sections: Channels (avatar, subscriber count, video count) and Videos (thumbnail, title, creator, views, date).
Intro to APIs
Live Jazz Set
Match Highlights
Game Dev Log
Daily News
Yoga Flow
Directory. Detail page. 4 content tabs.
Channels are the organizational unit. The directory at /tv/channels lists all channels with search and sort. Each detail page has a banner, avatar, follow/subscribe actions, and a four-tab content area: Videos, Collections, Live, and About.
Channel Directory
/tv/channelsSearchable grid of all channels. Each card shows avatar, name, subscriber count, video count, and category. Sort by Popular or Newest.
Channel Detail
/tv/channels/[channelId]Full channel page with banner, avatar, subscriber and video counts. Follow (bell toggle) and Subscribe (paid tier toggle). Four-tab content area below.
Detail Tabs
Urban Kitchen
12.4K subscribers · 238 videos · 1.2M views
Farm to Table
Knife Skills 101
Seasonal Menus
Active streams. Real-time viewer counts. 30-second refresh.
Auto-polling grid with LIVE badge, viewer overlay, and uptime duration per stream.
30-second refresh. Viewer counts. LIVE badge.
The /tv/live page shows all active streams in a responsive grid. The client auto-refreshes every 30 seconds by re-fetching /api/tv/live. Each card displays thumbnail, pulsing LIVE badge, viewer count, streamer avatar, category, and uptime.
Auto-Refresh
The stream grid polls /api/tv/live every 30 seconds. Viewer counts and new streams appear automatically.
Manual Refresh
A Refresh button in the header triggers an immediate fetch. Useful when navigating back to the page.
Empty State
When no streams are active, a centered empty state with a Browse Channels link to /tv/channels.
Click-to-Player
Each stream card navigates to /tv/watch/[streamId], loading the player with the live stream URL.
DJ Set: House
Game: Finals
Yoga Morning
Like. Share. Save. Related content.
The player page at /tv/player/[videoId] loads video detail and related content from a single API call. Below the video: metadata, three action buttons, creator info with channel link, and a horizontal row of related videos.
Video Element
Full-width aspect-video container. Native HTML5 video with HLS-capable src returned by /api/tv/videos/[videoId].
Like
Toggle button with count. Filled heart when liked, outline when not. Optimistic count update on the client.
Share
Copies the current URL to clipboard. Button text changes to "Copied" for two seconds.
Save
Toggle that adds or removes the video from the library saved list via /api/tv/videos/[videoId]/save.
Creator Info
Avatar, name, and "View channel" link. Clicking navigates to /tv/channels/[creatorId].
More From Channel
Horizontal row of related videos from the same channel. Clicking loads a new player page.
Building a Component Library from Scratch
More from this channel
Design Tokens
CSS Variables
Watch history with progress bars. Saved videos. Custom playlists.
Three tabs in one view. History tracks per-video progress. Playlists organize named collections.
3 tabs. Progress tracking. Named playlists.
The user's personal library at /tv/library organizes content into three tabs. Watch History tracks per-video progress with a visual bar on each thumbnail. Saved collects bookmarks. Playlists holds named collections. All fetched from /api/tv/library.
Watch History
/tv/library → historyChronological list of watched videos. Each row shows a 160x90 thumbnail with a pink progress bar, title, creator name, time-ago timestamp, and percentage label. Trash icon removes entries.
Saved
/tv/library → savedBookmarked videos from the player Save button. Same row layout without the progress bar. Bookmark icon with "Saved X ago" timestamp.
Playlists
/tv/library → playlistsUser-created collections in a two-column grid. Cover thumbnail, playlist title, video count badge, and "Updated X ago" timestamp.
Ep 4: Routing Patterns
Intro to State Machines
Morning Yoga Flow
Tier pricing. 4 statuses. Entitlement gate.
Channel subscriptions at /tv/subscriptions. Each subscription has a channel, tier, price, billing cycle, renewal date, and one of four status states. The entitlements/check endpoint verifies content access per video.
Tier Pricing
Each subscription has a tier name, price, and billing cycle (monthly or yearly). Displayed as localized amount per period.
Four Status States
Active (entitlements granted), Canceling (access until renewal), Expired (revoked), and Paused (limited access per channel policy).
Entitlement Gate
The /api/tv/entitlements/check endpoint verifies content access per video based on active subscriptions.
Summary Stats
Active subscription count and total monthly spend displayed at the top of the subscriptions page.
Manage + Cancel
Per-subscription actions. Manage navigates to tier change and billing details. Cancel sends DELETE and sets status to Canceling.
5
Active
2
Paused
Urban Kitchen
Pro · Monthly
DevChannel
Basic · Yearly
FitZone
Premium · Monthly
MusicLive
Basic · Monthly
Calisto TV is the streaming platform. Not the TV App Builder.
Two products share the word 'TV' in their names. Calisto TV (this page) is the consumer-facing streaming platform. Studio's TV App Builder is the creator pipeline for publishing branded TV apps to app stores. Separate products, separate codebases.
Calisto TV
The streaming platform
- Consumer-facing video platform
- Routes: /tv/browse, /tv/channels, /tv/live, /tv/player, /tv/library, /tv/subscriptions
- 9 client components in packages/tv-clients/src/
- Viewers browse, watch, subscribe, and build a personal library
- Content entitlement checks per video via /api/tv/entitlements/check
- Web app at apps/tv/ with companion React Native apps for tvOS and Fire TV
Studio TV App Builder
The creator build tool
- Creator pipeline inside Calisto Studio for publishing branded TV apps
- 7 stages: Content, Design, Build, Preview, Store Listing, Analytics
- Target platforms: App Store, Google Play, Apple TV, Fire TV, Roku
- Creators configure splash screens, navigation layouts, color schemes
- Build pipeline compiles platform-specific app binaries
- Part of Studio, separate product, separate page at /apps/studio
High-Performance Ops. Zero Monthly Overhead.
Get all 15 Core modules at no monthly cost. You only pay 2% of processed revenue.