hwc-media-content

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