缩略图显示功能: - 使用视频首帧生成缩略图:取片段开始时间作为缩略图时间戳 - 智能缓存机制:避免重复生成相同片段的缩略图 - 异步加载:缩略图生成不阻塞界面渲染 - 优雅降级:生成失败时显示默认视频图标 ThumbnailDisplay组件: - 独立的缩略图显示组件,职责单一 - 加载状态指示:显示旋转动画表示正在生成缩略图 - 错误处理:图片加载失败时自动回退到默认图标 - 响应式设计:160x120像素缩略图,适配卡片布局 技术实现: - 利用现有generate_video_thumbnail命令生成缩略图 - Map缓存机制:segmentId -> thumbnailUrl映射 - file://协议:本地文件访问支持 - useEffect钩子:组件挂载时自动加载缩略图 用户体验优化: - 视觉丰富:片段卡片显示实际视频内容预览 - 快速识别:用户可以通过缩略图快速识别视频内容 - 性能优化:缓存机制避免重复生成 - 加载反馈:清楚的加载状态提示 功能特点: - 首帧缩略图:使用片段开始时间的首帧作为预览 - 自动生成:无需手动操作,自动为每个片段生成缩略图 - 内存缓存:同一会话中避免重复生成 - 错误恢复:生成失败时显示默认图标,不影响其他功能 现在MaterialSegmentView提供了更加直观的视觉体验: 1. 每个片段卡片显示实际的视频首帧缩略图 2. 用户可以快速预览视频内容 3. 加载过程有清楚的视觉反馈 4. 生成失败时有优雅的降级处理 |
||
|---|---|---|
| .. | ||
| desktop | ||