media-content
Installation
SKILL.md
Media & Rich Content
Implement media-centric Hotwire features with Stimulus and Turbo Frames. This skill covers upload previews, playback controls, progress persistence, and third-party media library integrations.
Core Workflow
Step 1: Identify the Media Mode
| Mode | Examples | Key Concern |
|---|---|---|
| Upload/Preview | Image preview before submit, file validation | Blob URL lifecycle |
| Playback controls | Video player, audio waveform, Picture-in-Picture | Browser API integration |
| Progress persistence | Video progress tracker, bookmark position | State serialization |
| Library integration | WaveSurfer, Swiper, Blurhash | Third-party lifecycle |
| Time-synced content | Scrolling lyrics, chaptered video | Frame update timing |
Step 2: Keep Media State in Stimulus Values
Bridge third-party APIs through value callbacks and targets. The controller owns the state; the library renders it. Declare static values for media state (currentTime, playing, volume) and use valueChanged callbacks to sync with the player API.