完善观影室
This commit is contained in:
mtvpls
+77
-35
@@ -33,7 +33,21 @@
|
||||
- 侧边栏添加观影室入口
|
||||
- 底部导航栏添加观影室入口
|
||||
|
||||
#### 3. 功能特性
|
||||
#### 3. 同步功能
|
||||
- ✅ **播放同步** (`usePlaySync` Hook)
|
||||
- 房主播放/暂停/进度跳转实时同步
|
||||
- 房主换集、换源自动同步
|
||||
- 房员自动跟随房主操作
|
||||
- 房员禁用控制器（显示"观影室模式"提示）
|
||||
- 防抖机制避免频繁同步
|
||||
- 进度差异超过2秒才同步，避免网络抖动
|
||||
|
||||
- ✅ **直播同步** (`useLiveSync` Hook)
|
||||
- 房主切换频道实时同步
|
||||
- 房员自动跟随频道切换
|
||||
- 延迟广播机制避免频繁触发
|
||||
|
||||
#### 4. 通用功能特性
|
||||
- ✅ LocalStorage 自动重连
|
||||
- ✅ 心跳机制（每5秒）
|
||||
- ✅ 房主断开5分钟后自动删除房间
|
||||
@@ -77,16 +91,6 @@ pnpm watch-room:server # 在另一个终端运行
|
||||
## 待实现功能 🚧
|
||||
|
||||
### 高优先级（核心功能）
|
||||
- ⏳ **播放同步功能** - 修改 `src/app/play/page.tsx`
|
||||
- 房主播放、暂停、进度同步
|
||||
- 房主换集、换源同步
|
||||
- 房员禁用播放器控制
|
||||
- 房员自动跟随房主进度
|
||||
|
||||
- ⏳ **直播同步功能** - 修改 `src/app/live/page.tsx`
|
||||
- 房主切换频道同步
|
||||
- 房员自动跟随频道
|
||||
|
||||
- ⏳ **管理面板配置**
|
||||
- 添加观影室开关
|
||||
- 配置服务器类型（内部/外部）
|
||||
@@ -150,7 +154,9 @@ src/
|
||||
│ ├── watch-room-server.ts # Socket.IO 服务器逻辑
|
||||
│ └── watch-room-socket.ts # Socket 客户端管理
|
||||
├── hooks/
|
||||
│ └── useWatchRoom.ts # React Hook
|
||||
│ ├── useWatchRoom.ts # 房间管理 Hook
|
||||
│ ├── usePlaySync.ts # 播放同步 Hook
|
||||
│ └── useLiveSync.ts # 直播同步 Hook
|
||||
├── components/
|
||||
│ ├── WatchRoomProvider.tsx # 全局状态管理
|
||||
│ └── watch-room/
|
||||
@@ -207,16 +213,16 @@ interface WatchRoomConfig {
|
||||
- [x] 心跳机制
|
||||
- [x] 刷新页面自动重连
|
||||
|
||||
### 播放同步测试（待实现）
|
||||
- [ ] 房主播放/暂停同步
|
||||
- [ ] 房主进度跳转同步
|
||||
- [ ] 房主换集同步
|
||||
- [ ] 房主换源同步
|
||||
- [ ] 房员操作同步给全员
|
||||
### 播放同步测试
|
||||
- [x] 房主播放/暂停同步
|
||||
- [x] 房主进度跳转同步
|
||||
- [x] 房主换集同步
|
||||
- [x] 房主换源同步
|
||||
- [x] 房员禁用控制器
|
||||
|
||||
### 直播同步测试（待实现）
|
||||
- [ ] 房主切换频道同步
|
||||
- [ ] 房员自动跟随频道
|
||||
### 直播同步测试
|
||||
- [x] 房主切换频道同步
|
||||
- [x] 房员自动跟随频道
|
||||
|
||||
### 移动端测试
|
||||
- [x] 底部导航显示正常
|
||||
@@ -226,22 +232,58 @@ interface WatchRoomConfig {
|
||||
|
||||
---
|
||||
|
||||
## 完整测试指南
|
||||
|
||||
### 测试场景 1: 创建房间并观看视频
|
||||
|
||||
1. **房主操作**:
|
||||
- 访问观影室页面，点击"创建房间"
|
||||
- 输入房间名称、描述和昵称
|
||||
- 创建后，进入播放页面 (`/play`)
|
||||
- 选择任意视频并播放
|
||||
- 尝试播放/暂停、跳转进度、切换集数、切换源
|
||||
|
||||
2. **房员操作** (使用另一个浏览器或无痕模式):
|
||||
- 访问观影室页面，点击"加入房间"
|
||||
- 输入房间号和昵称
|
||||
- 进入相同的播放页面
|
||||
- 观察播放器自动同步房主操作
|
||||
- 注意: 集数选择器上会显示"观影室模式"覆盖层，无法切换
|
||||
|
||||
### 测试场景 2: 聊天功能
|
||||
|
||||
1. 房主和房员都能看到右下角的绿色聊天按钮
|
||||
2. 点击打开聊天窗口
|
||||
3. 发送文字消息和表情
|
||||
4. 验证双方都能收到消息
|
||||
5. 测试最小化和关闭功能
|
||||
|
||||
### 测试场景 3: 直播同步
|
||||
|
||||
1. **房主操作**:
|
||||
- 在房间内，进入直播页面 (`/live`)
|
||||
- 切换不同频道
|
||||
|
||||
2. **房员操作**:
|
||||
- 同样进入直播页面
|
||||
- 观察频道自动跟随房主切换
|
||||
|
||||
### 测试场景 4: 自动重连
|
||||
|
||||
1. 房主或房员刷新页面
|
||||
2. 验证自动重连到原房间
|
||||
3. 验证聊天记录不丢失
|
||||
4. 验证播放状态继续同步
|
||||
|
||||
---
|
||||
|
||||
## 下一步计划
|
||||
|
||||
1. **实现播放同步** (`src/app/play/page.tsx`)
|
||||
- 集成 `useWatchRoom` Hook
|
||||
- 监听播放器事件并同步
|
||||
- 接收服务器播放状态更新
|
||||
|
||||
2. **实现直播同步** (`src/app/live/page.tsx`)
|
||||
- 监听频道切换事件
|
||||
- 同步频道状态
|
||||
|
||||
3. **添加管理面板配置**
|
||||
1. **添加管理面板配置**
|
||||
- 在 `src/app/admin/page.tsx` 添加观影室配置项
|
||||
- 保存配置到数据库
|
||||
|
||||
4. **实现 WebRTC 语音聊天**
|
||||
2. **实现 WebRTC 语音聊天** (可选)
|
||||
- 创建 WebRTC 连接管理
|
||||
- 添加麦克风/喇叭控制按钮
|
||||
- 实现服务器中转回退
|
||||
@@ -250,9 +292,9 @@ interface WatchRoomConfig {
|
||||
|
||||
## 已知问题
|
||||
|
||||
1. **播放同步功能未实现**: 需要修改 play 和 live 页面
|
||||
2. **管理面板配置未添加**: 目前使用默认配置（启用内部服务器）
|
||||
3. **语音聊天未实现**: 仅支持文字和表情
|
||||
1. **管理面板配置未添加**: 目前使用默认配置（启用内部服务器）
|
||||
2. **语音聊天未实现**: 仅支持文字和表情
|
||||
3. **房间成员列表未显示**: 可以在聊天窗口顶部看到在线人数，但没有详细成员列表
|
||||
|
||||
---
|
||||
|
||||
|
||||
Reference in New Issue
Block a user