Media & Rich Content
Implement media-centric Hotwire features with Stimulus and Turbo Frames.
Core Workflow
- Identify media mode: upload/preview, playback controls, progress persistence, or embedded library integration.
- Keep media state in Stimulus values; bridge third-party APIs through value callbacks and targets.
- Use browser-native APIs first (
URL.createObjectURL, Picture-in-Picture, IntersectionObserver, MediaSession). - Clean up all allocated resources in
disconnect()(observers, blob URLs, player instances, timers). - 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).
Load References Selectively
Open only the file needed for the current request.
- Upload previews via blob URLs:
references/2024-09-17-stimulus-image-upload-previews.md - Progressive image loading and Blurhash:
references/2024-04-23-stimulus-progressive-image-loading-blurhash.md - Picture-in-Picture behavior:
references/2024-06-04-stimulus-picture-in-picture.md - Video progress persistence:
references/2024-10-29-stimulus-video-progress-tracker.md - WaveSurfer marker add flows:
references/2024-07-02-stimulus-wavesurfer-add-markers.md - WaveSurfer marker remove flows:
references/2024-07-30-stimulus-wavesurfer-remove-markers.md - Time-synced lyrics frame updates:
references/2024-04-09-turbo-frames-scrolling-lyrics.md - Swiper autoplay with Turbo Frames:
references/2025-01-14-turbo-frames-swiper-autoplay.md
Use references/INDEX.md for the full catalog.
Escalate to Neighbor Skills
- Push-based data updates or custom Turbo Stream actions: use
hwc-realtime-streaming - Pagination/tab/filter navigation concerns: use
hwc-navigation-content - Form lifecycle and validation handling: use
hwc-forms-validation - Generic loading/progress/transition UX: use
hwc-ux-feedback - Pure Stimulus API architecture: use
hwc-stimulus-fundamentals