TV

TV (Ryo TV) is a channel-surfing television app for ryOS. It plays curated YouTube videos as numbered channels with authentic CRT shader effects, procedural CRT sound effects, AI-generated channels, and an MTV music-video channel that displays per-word KRC-timed Geneva CC plate captions.

Overview

TV turns ryOS into a retro television set. Channels are lineups of YouTube videos (drawn from the Videos library or AI-generated on demand) and are numbered like a real TV. Switching channels powers up the simulated CRT — center-beam unfold, scale-coupled glow, scanline noise, and an LCD filter — and switching off cleanly collapses the image like a real tube. A channel-bug logo overlay sits in the corner, with occasional idle bursts (spin / watermark / shimmer with a glossy overlay blend). The window can also go full-screen with controls aligned to Karaoke (dismiss button + CH± pills, viewport-scaled captions).

The app is reachable at the /tv route and has its own OG share card. It is fully localized.

Features

• Channel surfing: Up/down arrows or CH+ / CH− cycle channels; number keys jump straight to a channel. The current lineup and active channel are exposed to Ryo's chat tools.

• AI-generated channels: Inline channel-creation prompt with shimmer loading; AI lineups exclude YouTube Shorts both server-side and via a client onDuration filter.
• MTV music videos: A dedicated MTV channel plays music videos with a single-line lyrics overlay styled as a Geneva CC plate, revealed per word using KRC timings (with a typewriter reveal and synced push transitions).
• CRT effects: Multi-stage power-on/off animations, a CRT static bed, an LCD filter toggle, and a channel-bug overlay (visible in fullscreen) with idle bursts.
• CRT sound design: Procedural SFX for power, channel switch, and static; drawer open/close SFX; clean cleanup so noise doesn't bleed across states.
• Drawer / playlist UI: Side-panel + compact bottom layout, drawer remove control, cached random playlists, playlist-order preservation when removing, square channel-strip buttons, channel-logo tray strip, and a marquee that fades the right edge when paused and overflowing.
• Cloud sync: Dedicated channel cloud sync; default channels are prepopulated from the exported library (including Taiwan), can be hidden, and the hidden/reset state stays in sync across devices.
• YouTube paste: Paste a YouTube URL into the drawer to add it to the current channel.
• Channel-creation auth gate: Creating channels requires login — TV shows a toast and the login dialog if you're signed out.
• Full-screen parity with Karaoke: Dismiss button, CH± pill controls, viewport-scaled captions, and the CRT static bed/canvas are skipped while fullscreen for performance.
• Cross-app integration: TV pulls from the Videos library; Ryo's chat exposes TV control through the unified mediaControl tool (target: "tv") with createChannel fanout and the current channel/custom lineup in system state.

User Guide

Getting Started

Key Actions

• Change Channel: Up/Down arrows, CH+ / CH−, or press 1–6 to jump.
• Change Video: Left/Right arrows skip within the current channel.
• Power: Pause to turn the screen off; press play (or use Next/Prev/CH) to power back on.
• Full Screen: Controls ▸ Full Screen (or via window chrome). Use the on-screen dismiss button or Esc to exit.
• Create a Channel: Use the inline AI prompt in the drawer (login required).
• Manage Lineup: Open the drawer to add, remove, or reorder videos; paste a YouTube URL to append.
• LCD Filter / CC: Toggle the LCD Filter and closed captions from the Controls menu.
• Reset Channels: Use the reset-channels item to restore defaults; hidden defaults remain hidden across devices.

Tips & Shortcuts

• Press Esc to exit full-screen quickly; the dismiss button is also available on mobile via the shared FullscreenMobileDismiss portal.
• Default channels are prepopulated from the exported library — including a Taiwan channel — so a fresh install already has content.
• The MTV channel uses the song's KRC timings, so captions track the audio per word rather than per line.

Technical Details

Window Configuration

• The TV window is registered under the tv app id and lives next to Videos in the app catalog.

Component Architecture

• TvAppComponent.tsx — Main app component; wires the player, drawer, CRT effects, and channel state.

• TvMenuBar.tsx — Menu bar with Controls (Full Screen, LCD Filter, CC, reset channels).
• TvCrtEffects.tsx — CRT shader, static noise canvas, scanlines, and power-on/off animations.
• TvChannelBug.tsx — Corner channel-bug logo with shimmer/spin/watermark idle bursts and glossy overlay blend.
• TvVideoDrawer.tsx — Playlist drawer (side panel + compact bottom layout) with remove, reorder, and YouTube paste.
• MtvLyricsOverlay.tsx — Single-line Geneva CC plate captions for MTV with per-word KRC reveal.
• ChannelPromptInput.tsx / CreateChannelDialog.tsx — Inline AI channel-creation prompt and dialog with shimmer loading.

Shared FullscreenMobileDismiss is extracted at src/components/layout/FullscreenMobileDismiss.tsx and reused by Karaoke for fullscreen parity.

Hooks & Utilities

• src/apps/tv/hooks/useTvLogic.ts — Channel/video state, lineup management, autoplay gating, and integration with useVideoStore.
• src/apps/tv/hooks/useCreateTvChannel.ts — AI channel creation, Shorts filtering, and lineup persistence.
• src/apps/tv/hooks/useTvSoundFx.ts — Procedural CRT and drawer SFX.
• src/apps/tv/utils/ and utils.ts — Channel numbering, lineup helpers, and shared TV utilities.
• src/apps/tv/data/ — Default channel lineups exported from the live library.

State Management

Related Apps

• Videos — TV pulls from the Videos library; the Videos app is where the underlying YouTube collection lives.

• Karaoke — Shares fullscreen patterns (dismiss + CH± pills) and per-word lyric/timing infrastructure with TV's MTV channel.
• Chats — Hosts the mediaControl chat tool (target: "tv") that drives channel creation and exposes the current TV state.