Hwc Media Content

What it does

The Hwc Media Content skill provides tools and resources for integrating media functionality into applications using Stimulus and Turbo Frames. It focuses on managing various aspects of media handling, including uploading previews, playback controls, progress persistence, and integration with third-party libraries like WaveSurfer. The skill emphasizes efficient resource management and incremental UI updates for time-based media experiences.

When to use it

• Implementing video upload previews using blob URLs.
• Creating interactive video players with features like Picture-in-Picture (PiP).
• Persisting video playback progress across sessions.
• Integrating audio waveform editors like WaveSurfer for marker management.
• Displaying time-synced lyrics or carousels within a Turbo Frames environment.

Key capabilities

• Media state management using Stimulus values.
• Integration with browser APIs (e.g., URL.createObjectURL, Picture-in-Picture, IntersectionObserver).
• Progressive image loading and Blurhash implementation.
• Video progress tracking and persistence.
• WaveSurfer integration for audio editing workflows.
• Incremental Turbo Frame updates for time-based UI elements.

Example prompts

• "Implement a video upload preview using a blob URL."
• "Add Picture-in-Picture functionality to the video player."
• "Persist the user's playback progress for this video."
• "Integrate WaveSurfer to allow users to add markers to the audio track."

Tips & gotchas

• Always revoke blob URLs after rendering previews to prevent memory leaks.
• Use feature detection to ensure compatibility with browser APIs like PiP and MediaSession.
• For real-time data updates or custom Turbo Stream actions, consider using the hwc-realtime-streaming skill instead.