# 视频播放器端

基于 Nuxt 4 + Tauri 2 的桌面视频播放器，支持远程控制。

## 功能特点

- 🎥 **全屏视频播放**：双击启动后立刻全屏显示
- 🎮 **远程控制**：通过WebSocket接收控制端命令
- 📡 **自动连接**：启动后自动尝试连接控制端
- 🔄 **断线重连**：连接断开后自动重试
- ⚙️ **配置灵活**：支持配置文件自定义设置

## 架构说明

- **前端**：Nuxt 4 + Vue 3 + Tailwind CSS + Nuxt UI
- **后端**：Tauri 2 + Rust + WebSocket服务器
- **通信协议**：WebSocket (端口8080)
- **API文档**：详见 `API.md`

## 开发环境设置

### 前置要求

1. **Node.js** >= 23
2. **Rust** 开发环境
   ```bash
   curl --proto '=https' --tlsv1.2 -sSf https://sh.rustup.rs | sh
   source ~/.cargo/env
   ```
3. **pnpm** 包管理器

### 安装依赖

```bash
pnpm install
```

### 开发模式

```bash
# 启动完整应用（前端 + Tauri）
pnpm tauri:dev

# 仅前端开发
pnpm dev

# 检查Rust代码
cd src-tauri && cargo check
```

### 构建部署

```bash
# 构建桌面应用
pnpm tauri:build

# 构建调试版本
pnpm tauri:build:debug

# 构建前端静态文件
pnpm generate
```

## 配置文件

项目根目录的 `player_config.json`：

```json
{
  "connection": {
    "controller_host": "127.0.0.1",
    "controller_port": 8081,
    "websocket_port": 8080,
    "auto_connect": true,
    "reconnect_interval": 5000,
    "connection_timeout": 10000
  },
  "player": {
    "auto_fullscreen": true,
    "default_volume": 50,
    "loop_enabled": false,
    "show_controls": false
  },
  "debug": {
    "log_level": "info",
    "show_debug_info": true
  }
}
```

## 功能实现

### ✅ 已完成功能

1. **前端界面**
   - 全屏播放器界面
   - 连接状态显示
   - 等待画面和状态信息
   - 键盘快捷键支持

2. **后端WebSocket服务**
   - WebSocket服务器（端口8080）
   - 接收控制端连接
   - 处理播放控制命令
   - 状态同步机制

3. **核心播放功能**
   - 视频加载和播放
   - 播放/暂停/停止控制
   - 音量调节
   - 进度跳转
   - 循环播放
   - 全屏切换

4. **Tauri命令API**
   - `get_player_state` - 获取播放器状态
   - `load_video` - 加载视频文件
   - `play_video` - 播放视频
   - `pause_video` - 暂停播放
   - `stop_video` - 停止播放
   - `seek_video` - 跳转播放位置
   - `set_volume` - 设置音量
   - `set_loop` - 设置循环播放
   - `toggle_fullscreen` - 切换全屏

### 🔄 后续扩展

1. **配置文件读取**：从配置文件加载连接设置
2. **自动连接重试**：实现更完善的重连机制
3. **视频格式支持**：扩展更多视频格式支持
4. **播放列表**：完善播放列表功能
5. **定时播放**：添加定时播放功能

## WebSocket API

播放器作为WebSocket服务端，监听端口8080，接收控制端发送的命令：

### 连接地址
```
ws://127.0.0.1:8080/ws
```

### 消息格式
```json
{
  "type": "command",
  "data": {
    "type": "play|pause|stop|seek|setVolume|setLoop|toggleFullscreen|loadVideo",
    "position": 60.5,  // seek时使用
    "volume": 75.0,    // setVolume时使用
    "enabled": true,   // setLoop时使用
    "path": "/path/to/video.mp4"  // loadVideo时使用
  }
}
```

### 状态响应
```json
{
  "type": "status",
  "data": {
    "playback_status": "playing|paused|stopped|loading",
    "current_video": {...},
    "position": 120.5,
    "duration": 3600.0,
    "volume": 75.0,
    "is_looping": false,
    "is_fullscreen": true
  }
}
```

## 日志调试

开发模式下可以查看详细日志：

```bash
# Rust后端日志
RUST_LOG=debug pnpm tauri:dev

# 或在代码中设置
env_logger::init();
```

前端调试信息在开发模式下显示在左下角。

## 使用流程

1. **启动播放器**
   ```bash
   pnpm tauri:dev  # 开发模式
   # 或
   ./target/release/video-player  # 发布版本
   ```

2. **自动全屏**：应用启动后自动进入全屏模式

3. **等待连接**：显示等待控制端连接的界面

4. **接收控制**：控制端连接后接收并执行播放命令

5. **视频播放**：根据控制端指令加载和播放视频

## 测试WebSocket连接

我们提供了一个简单的测试脚本来验证WebSocket服务器：

```bash
# 1. 启动播放器
pnpm tauri:dev

# 2. 在另一个终端中运行测试脚本
node test_websocket.js
```

测试脚本会连接到播放器并发送一系列命令来验证功能。你应该能看到：
- WebSocket连接成功
- 播放器接收和处理命令
- 状态更新消息
- 前端界面响应命令

## 键盘快捷键

- **空格键**：播放/暂停（本地控制）
- **F/f键**：切换全屏（保留功能）

## 故障排除

### 常见问题

1. **连接失败**
   - 检查端口8080是否被占用
   - 确认防火墙设置
   - 查看控制端连接地址是否正确

2. **视频不播放**
   - 确认视频文件路径正确
   - 检查视频格式是否支持
   - 查看浏览器控制台错误信息

3. **编译错误**
   - 确认Rust环境正确安装
   - 检查依赖版本兼容性
   - 运行 `cargo clean` 后重新构建

### 日志位置

- **开发模式**：控制台输出
- **发布版本**：系统日志（具体位置取决于操作系统）

## 项目结构

```
video-player/
├── app/                    # Nuxt 4 前端代码
│   ├── pages/
│   │   └── index.vue      # 主播放器页面
│   ├── layouts/
│   │   └── default.vue    # 全屏布局
│   ├── modules/
│   │   └── tauri.ts       # Tauri API 模块
│   └── app.config.ts      # 应用配置
├── src-tauri/             # Tauri 后端代码
│   ├── src/
│   │   ├── lib.rs         # 主入口
│   │   ├── main.rs        # 程序入口
│   │   ├── player_state.rs    # 播放器状态管理
│   │   ├── websocket_server.rs # WebSocket服务器
│   │   └── commands.rs    # Tauri命令
│   └── Cargo.toml         # Rust依赖配置
├── API.md                 # API文档
├── player_config.json     # 配置文件
├── package.json           # Node.js配置
└── README_PLAYER.md       # 使用说明（本文件）
```

## 贡献指南

1. Fork 项目
2. 创建功能分支
3. 提交更改
4. 推送到分支
5. 创建 Pull Request

## 许可证

MIT License - 详见 LICENSE 文件