Media & Rich Content

Implement media-centric Hotwire features with Stimulus and Turbo Frames.

Core Workflow

1. Identify media mode: upload/preview, playback controls, progress persistence, or embedded library integration.
2. Keep media state in Stimulus values; bridge third-party APIs through value callbacks and targets.
3. Use browser-native APIs first (URL.createObjectURL, Picture-in-Picture, IntersectionObserver, MediaSession).
4. Clean up all allocated resources in disconnect() (observers, blob URLs, player instances, timers).
5. Persist only intentional client state (for example playback progress) and reconcile on load.

Guardrails

• Revoke blob URLs after image/file preview rendering.
• Prefer feature detection for browser APIs (PiP/Web Share/MediaSession).
• Avoid mixing transport concerns; media rendering belongs here, stream orchestration belongs in real-time skill.
• Keep frame updates incremental for time-based UI (lyrics, carousels, progress widgets).