forked from 77media/video-flow
254 lines
5.8 KiB
Markdown
254 lines
5.8 KiB
Markdown
# 🎬 Video Edit Feature
|
||
|
||
一个完整的视频编辑功能模块，允许用户在视频上添加交互式编辑点，描述修改需求，并与聊天系统集成。
|
||
|
||
## ✨ 功能特性
|
||
|
||
### 🎯 核心功能
|
||
- **交互式编辑点**: 点击视频任意位置创建编辑点
|
||
- **脉冲动画**: 编辑点具有优雅的脉冲动画效果
|
||
- **弧线连接**: 从编辑点到输入框的优美弧线连接
|
||
- **智能输入框**: 带有玻璃态效果的输入框，支持键盘操作
|
||
- **多点管理**: 支持同时存在多个编辑点
|
||
- **实时同步**: 编辑点数据实时保存和同步
|
||
|
||
### 🎨 视觉效果
|
||
- **玻璃态设计**: 与work-flow页面设计风格一致
|
||
- **流畅动画**: 使用Framer Motion实现丝滑动画
|
||
- **响应式布局**: 适配各种屏幕尺寸
|
||
- **暗色主题**: 完美适配暗色模式
|
||
|
||
### 🔧 技术特性
|
||
- **TypeScript**: 完整的类型安全
|
||
- **React Hooks**: 现代化的状态管理
|
||
- **API集成**: 完整的CRUD操作
|
||
- **性能优化**: 智能渲染和内存管理
|
||
|
||
## 🏗️ 架构设计
|
||
|
||
```
|
||
video-edit/
|
||
├── types.ts # 类型定义
|
||
├── useVideoEdit.ts # 状态管理Hook
|
||
├── VideoEditOverlay.tsx # 主覆盖层组件
|
||
├── EditPoint.tsx # 编辑点组件
|
||
├── EditConnection.tsx # 连接线组件
|
||
├── EditInput.tsx # 输入框组件
|
||
├── api.ts # API接口
|
||
├── video-edit.css # 响应式样式
|
||
├── VideoEditDemo.tsx # 演示组件
|
||
└── index.ts # 模块导出
|
||
```
|
||
|
||
## 🚀 快速开始
|
||
|
||
### 1. 基础使用
|
||
|
||
```tsx
|
||
import { VideoEditOverlay } from '@/components/pages/work-flow/video-edit';
|
||
|
||
function MyVideoPlayer() {
|
||
const videoRef = useRef<HTMLVideoElement>(null);
|
||
|
||
const handleDescriptionSubmit = (editPoint, description) => {
|
||
console.log('编辑请求:', { editPoint, description });
|
||
// 发送到聊天系统或处理编辑请求
|
||
};
|
||
|
||
return (
|
||
<div className="relative">
|
||
<video ref={videoRef} src="your-video.mp4" />
|
||
|
||
<VideoEditOverlay
|
||
projectId="your-project-id"
|
||
userId={123}
|
||
currentVideo={{
|
||
id: 'video-id',
|
||
url: 'your-video.mp4',
|
||
duration: 30
|
||
}}
|
||
videoRef={videoRef}
|
||
enabled={true}
|
||
onDescriptionSubmit={handleDescriptionSubmit}
|
||
/>
|
||
</div>
|
||
);
|
||
}
|
||
```
|
||
|
||
### 2. 集成到MediaViewer
|
||
|
||
```tsx
|
||
// 在MediaViewer组件中
|
||
<VideoEditOverlay
|
||
projectId={taskObject.project_id}
|
||
userId={currentUser.id}
|
||
currentVideo={{
|
||
id: currentVideo.video_id,
|
||
url: currentVideo.urls[0],
|
||
duration: 30
|
||
}}
|
||
videoRef={mainVideoRef}
|
||
enabled={isVideoEditMode}
|
||
onDescriptionSubmit={handleVideoEditDescriptionSubmit}
|
||
className="rounded-lg"
|
||
/>
|
||
```
|
||
|
||
## 📱 响应式设计
|
||
|
||
### 屏幕适配
|
||
- **桌面端 (≥1024px)**: 完整功能，hover效果
|
||
- **平板端 (768-1023px)**: 增大点击区域
|
||
- **手机端 (≤767px)**: 优化触摸交互，简化界面
|
||
- **小屏幕 (≤480px)**: 最大化可用空间
|
||
|
||
### 触摸优化
|
||
- 增大点击区域 (最小44px)
|
||
- 防止iOS缩放 (font-size: 16px)
|
||
- 触摸反馈动画
|
||
|
||
## 🎮 交互说明
|
||
|
||
### 键盘操作
|
||
- **ESC**: 取消当前编辑
|
||
- **Ctrl+Enter**: 提交描述
|
||
- **Tab**: 在输入框内导航
|
||
|
||
### 鼠标操作
|
||
- **单击视频**: 创建编辑点
|
||
- **单击编辑点**: 选择并显示输入框
|
||
- **点击外部**: 自动提交或取消
|
||
|
||
### 触摸操作
|
||
- **轻触视频**: 创建编辑点
|
||
- **轻触编辑点**: 选择编辑点
|
||
- **长按**: 显示上下文菜单
|
||
|
||
## 🔌 API集成
|
||
|
||
### 编辑点CRUD操作
|
||
|
||
```typescript
|
||
import {
|
||
createEditPoint,
|
||
updateEditPoint,
|
||
deleteEditPoint,
|
||
getEditPoints
|
||
} from '@/components/pages/work-flow/video-edit';
|
||
|
||
// 创建编辑点
|
||
const editPoint = await createEditPoint({
|
||
videoId: 'video-id',
|
||
projectId: 'project-id',
|
||
position: { x: 50, y: 30 },
|
||
timestamp: 15.5,
|
||
description: '需要添加字幕'
|
||
});
|
||
|
||
// 更新编辑点
|
||
await updateEditPoint({
|
||
id: editPoint.id,
|
||
description: '更新后的描述',
|
||
status: 'edited'
|
||
});
|
||
|
||
// 获取编辑点列表
|
||
const response = await getEditPoints({
|
||
videoId: 'video-id',
|
||
projectId: 'project-id'
|
||
});
|
||
```
|
||
|
||
## 🎨 样式定制
|
||
|
||
### CSS变量
|
||
```css
|
||
.video-edit-input {
|
||
--bg-color: rgba(0, 0, 0, 0.8);
|
||
--border-color: rgba(255, 255, 255, 0.2);
|
||
--text-color: rgba(255, 255, 255, 0.9);
|
||
}
|
||
```
|
||
|
||
### 主题适配
|
||
- 自动检测系统主题
|
||
- 支持高对比度模式
|
||
- 可访问性优化
|
||
|
||
## 🧪 测试
|
||
|
||
### 运行测试页面
|
||
```bash
|
||
# 访问测试页面
|
||
http://localhost:3000/test/video-edit
|
||
```
|
||
|
||
### 测试清单
|
||
- [ ] 编辑点创建和动画
|
||
- [ ] 连接线绘制
|
||
- [ ] 输入框交互
|
||
- [ ] 键盘操作
|
||
- [ ] 响应式布局
|
||
- [ ] 性能测试
|
||
|
||
## 🔧 配置选项
|
||
|
||
### VideoEditConfig
|
||
```typescript
|
||
interface VideoEditConfig {
|
||
maxEditPoints: number; // 最大编辑点数量
|
||
autoSave: boolean; // 自动保存
|
||
animationDuration: number; // 动画时长
|
||
pointStyle: {
|
||
size: number;
|
||
color: string;
|
||
pulseColor: string;
|
||
};
|
||
connectionStyle: {
|
||
strokeWidth: number;
|
||
color: string;
|
||
dashArray: string;
|
||
};
|
||
}
|
||
```
|
||
|
||
## 🚨 注意事项
|
||
|
||
### 性能优化
|
||
- 编辑点数量建议不超过20个
|
||
- 使用虚拟化处理大量编辑点
|
||
- 及时清理未使用的编辑点
|
||
|
||
### 兼容性
|
||
- 需要现代浏览器支持 (Chrome 80+, Firefox 75+, Safari 13+)
|
||
- 移动端需要iOS 13+, Android 8+
|
||
- 需要支持CSS Grid和Flexbox
|
||
|
||
### 安全考虑
|
||
- 输入内容需要XSS过滤
|
||
- API调用需要身份验证
|
||
- 编辑点数据需要权限控制
|
||
|
||
## 📝 更新日志
|
||
|
||
### v1.0.0 (2024-01-XX)
|
||
- ✨ 初始版本发布
|
||
- 🎯 基础编辑点功能
|
||
- 🎨 玻璃态UI设计
|
||
- 📱 响应式适配
|
||
- 🔌 API集成
|
||
- 🧪 测试套件
|
||
|
||
## 🤝 贡献指南
|
||
|
||
1. Fork 项目
|
||
2. 创建功能分支
|
||
3. 提交更改
|
||
4. 推送到分支
|
||
5. 创建 Pull Request
|
||
|
||
## 📄 许可证
|
||
|
||
MIT License - 详见 LICENSE 文件
|