mcpField
H
hwc-media-content

hwc-media-content

github.com/thehotwireclub开发152212 次安装3 周前更新
代码仓库

关于 hwc-media-content

为 Hotwire 媒体功能提供的开发技能，面向使用 Stimulus 和 Turbo Frames 构建媒体界面的开发者。它围绕媒体状态管理、浏览器原生 API 和资源清理，并提供按需查阅的实现参考。

主要功能

  1. 01媒体模式识别与实现规划
  2. 02使用 Stimulus 管理媒体状态
  3. 03优先采用浏览器原生 API
  4. 04在断开连接时清理资源
  5. 05按需查阅媒体实现参考

适用场景

  1. 01构建图片或文件上传预览
  2. 02保存并恢复视频播放进度
  3. 03实现画中画与播放器控制
  4. 04制作歌词或轮播等同步界面

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/thehotwireclub/hotwire_club-skills --skill hwc-media-content

安装后在 Claude Code 中输入/hwc-media-content确认已加载。

包含的文件

除 SKILL.md 外，安装时一起下载的参考资料和脚本。

agents/
openai.yaml
references/
2024-04-09-turbo-frames-scrolling-lyrics.md
2024-04-23-stimulus-progressive-image-loading-blurhash.md
2024-06-04-stimulus-picture-in-picture.md
2024-07-02-stimulus-wavesurfer-add-markers.md
2024-07-30-stimulus-wavesurfer-remove-markers.md
2024-09-17-stimulus-image-upload-previews.md
2024-10-29-stimulus-video-progress-tracker.md
2025-01-14-turbo-frames-swiper-autoplay.md
INDEX.md

详细介绍

媒体与富内容

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

核心工作流

  1. 确定媒体模式：上传／预览、播放控制、进度持久化，或嵌入式媒体库集成。
  2. 在 Stimulus values 中保存媒体状态；通过 value 回调和 targets 对接第三方 API。
  3. 优先使用浏览器原生 API（URL.createObjectURL、画中画、IntersectionObserver、MediaSession）。
  4. 在 disconnect() 中清理所有已分配的资源（观察器、blob URL、播放器实例、计时器）。
  5. 仅持久化有意保留的客户端状态（例如播放进度），并在加载时进行协调。

注意事项

  • 图片／文件预览渲染后，撤销 blob URL。
  • 对浏览器 API（画中画／Web Share／MediaSession）优先使用功能检测。
  • 避免混杂传输相关事项；媒体渲染归此处处理，流编排归实时功能处理。
  • 对基于时间的 UI（歌词、轮播、进度组件）采用增量式 frame 更新。

按需加载参考资料

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

  • 通过 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
  • 与时间同步的歌词 frame 更新：references/2024-04-09-turbo-frames-scrolling-lyrics.md
  • 使用 Turbo Frames 实现 Swiper 自动播放：references/2025-01-14-turbo-frames-swiper-autoplay.md

完整目录请参阅 references/INDEX.md。

转交给相邻技能

  • 推送式数据更新或自定义 Turbo Stream 操作：使用 hwc-realtime-streaming
  • 分页／标签／筛选导航相关问题：使用 hwc-navigation-content
  • 表单生命周期和验证处理：使用 hwc-forms-validation
  • 通用加载／进度／过渡 UX：使用 hwc-ux-feedback
  • 纯 Stimulus API 架构：使用 hwc-stimulus-fundamentals

评论

支持 Markdown