hwc-media-content

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Chinese

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

使用Stimulus和Turbo Frames实现以媒体为中心的Hotwire功能。

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.

确定媒体模式：上传/预览、播放控制、进度持久化，或嵌入式库集成。
将媒体状态存储在Stimulus values中；通过值回调和目标桥接第三方API。
优先使用浏览器原生API（
```
URL.createObjectURL
```
、画中画、IntersectionObserver、MediaSession）。
在
```
disconnect()
```
中清理所有已分配的资源（观察者、Blob URL、播放器实例、计时器）。
仅持久化必要的客户端状态（例如播放进度），并在加载时进行同步。

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).

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.

仅打开当前请求所需的文件。

通过Blob URL实现上传预览：

references/2024-09-17-stimulus-image-upload-previews.md

渐进式图片加载与Blurhash：

references/2024-04-23-stimulus-progressive-image-loading-blurhash.md

画中画行为：

references/2024-06-04-stimulus-picture-in-picture.md

视频进度持久化：

references/2024-10-29-stimulus-video-progress-tracker.md

WaveSurfer标记添加流程：

references/2024-07-02-stimulus-wavesurfer-add-markers.md

WaveSurfer标记移除流程：

references/2024-07-30-stimulus-wavesurfer-remove-markers.md

时间同步歌词帧更新：

references/2024-04-09-turbo-frames-scrolling-lyrics.md

结合Turbo Frames的Swiper自动播放：

references/2025-01-14-turbo-frames-swiper-autoplay.md

完整目录请查看

references/INDEX.md

。

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
```