Merge pull request #127 from solidSpoon/自动播放下一个视频

自动播放下一个视频

Author: solidSpoon

.eslintrc.json

@@ -14,6 +14,12 @@
         "react-app"
     ],
     "parser": "@typescript-eslint/parser",
+    "ignorePatterns": [
+        "vite.*.config.ts",
+        "node_modules/**",
+        ".vite/**",
+        "out/**"
+    ],
     "settings": {
         "import/resolver": {
             "node": {

CLAUDE.md

@@ -0,0 +1,119 @@
+# DashPlayer 项目基本情况
+
+## 项目概述
+DashPlayer 是一款专为英语学习打造的视频播放器，采用 Electron + React + TypeScript 技术栈开发。
+
+## 技术架构
+
+### 前端技术栈
+- **框架**: React 18 + TypeScript
+- **状态管理**: Zustand
+- **UI组件**: Radix UI + Tailwind CSS + Lucide React
+- **路由**: React Router DOM
+- **视频播放**: React Player
+- **数据请求**: SWR
+- **构建工具**: Vite + Electron Forge
+
+### 后端技术栈
+- **运行时**: Electron (Node.js)
+- **数据库**: SQLite + Drizzle ORM
+- **依赖注入**: Inversify
+- **AI集成**: OpenAI SDK
+- **媒体处理**: FFmpeg
+
+## 项目结构
+
+### 主要目录
+```
+src/
+├── backend/           # 后端代码 (Electron Main Process)
+│   ├── controllers/   # API控制器
+│   ├── services/      # 业务逻辑服务
+│   ├── db/           # 数据库相关
+│   └── utils/        # 工具函数
+├── fronted/          # 前端代码 (Electron Renderer Process)
+│   ├── components/   # React组件
+│   ├── hooks/        # 自定义Hooks
+│   ├── pages/        # 页面组件
+│   └── lib/          # 前端工具库
+└── common/           # 前后端共享代码
+    ├── api/          # API定义
+    ├── types/        # 类型定义
+    └── utils/        # 通用工具
+```
+
+### 关键组件
+- **Player.tsx**: 视频播放器主组件
+- **PlayerControlPanel.tsx**: 播放控制面板
+- **ControlBox.tsx**: Player Controls控制区域
+- **FileBrowser.tsx**: Video Explorer文件浏览器
+- **usePlayerController**: 播放器状态管理Hook
+- **useFile**: 文件状态管理Hook
+
+## 核心功能
+1. **视频播放**: 支持多种格式的视频播放
+2. **字幕处理**: SRT字幕解析、显示和时间调整
+3. **AI辅助**: 字幕翻译、语法分析、词汇解释
+4. **播放历史**: 记录观看进度和历史
+5. **文件管理**: 文件/文件夹模式播放列表
+6. **快捷键**: 丰富的键盘快捷键支持
+7. **主题**: 支持明暗主题切换
+
+## 开发相关
+
+### 常用命令
+```bash
+yarn start      # 启动开发环境
+yarn lint       # 代码检查
+yarn test       # 运行测试
+yarn make       # 构建应用
+```
+
+### 数据库
+- 使用 Drizzle ORM 管理 SQLite 数据库
+- 主要表: watchHistory, videoClip, tag, words 等
+- 支持数据库迁移
+
+### API架构
+- 基于 Electron IPC 的前后端通信
+- 控制器-服务模式的后端架构
+- 统一的 API 注册和调用机制
+
+### 状态管理
+- Zustand store 分片管理
+- 播放器状态: usePlayerController
+- 文件状态: useFile
+- 布局状态: useLayout
+- 设置状态: useSetting
+
+## API开发规范
+
+### 重要提醒 ⚠️
+**修改API时必须在以下文件中更新类型定义：**
+- `src/common/api/api-def.ts` - API类型定义文件
+- 所有新增的API都必须在对应的interface中定义参数和返回值类型
+
+### API定义结构
+```typescript
+interface WatchHistoryDef {
+    'watch-history/get-next-video': { params: string, return: WatchHistoryVO | null };
+    // 其他API定义...
+}
+```
+
+### API开发流程
+1. 在 `api-def.ts` 中定义API类型
+2. 在对应的Controller中实现方法
+3. 在Service接口中添加方法定义
+4. 在ServiceImpl中实现具体逻辑
+5. 在Controller的registerRoutes中注册路由
+
+## 当前开发任务
+✅ 已完成：实现自动播放下一个视频功能，在文件夹模式下视频播放结束后自动播放下一个视频。
+
+## 注意事项
+- 项目使用 TypeScript 严格模式
+- 遵循 React Hooks 最佳实践
+- 后端使用依赖注入模式
+- 前端组件采用 shadcn/ui 设计规范
+- **API开发必须先在 `api-def.ts` 中定义类型**

package.json

@@ -1,7 +1,7 @@
 {
     "name": "dash-player",
     "productName": "DashPlayer",
-    "version": "5.1.6",
+    "version": "5.1.7",
     "description": "My Electron application description",
     "main": ".vite/build/main.js",
     "scripts": {

src/backend/controllers/WatchHistoryController.ts

@@ -55,6 +55,10 @@ export default class WatchHistoryController implements Controller {
         return this.watchHistoryService.analyseFolder(path);
     }
 
+    public async getNextVideo(currentId: string): Promise<WatchHistoryVO | null> {
+        return this.watchHistoryService.getNextVideo(currentId);
+    }
+
     registerRoutes(): void {
         registerRoute('watch-history/list', (p) => this.list(p));
         registerRoute('watch-history/progress/update', (p) => this.updateProgress(p));
@@ -65,5 +69,6 @@ export default class WatchHistoryController implements Controller {
         registerRoute('watch-history/attach-srt', (p) => this.attachSrt(p));
         registerRoute('watch-history/suggest-srt', (p) => this.suggestSrt(p));
         registerRoute('watch-history/analyse-folder', (p) => this.analyseFolder(p));
+        registerRoute('watch-history/get-next-video', (p) => this.getNextVideo(p));
     }
 }

src/backend/services/WatchHistoryService.ts

@@ -24,6 +24,12 @@ interface WatchHistoryService {
      * @param file 视频文件路径
      */
     suggestSrt(file: string): Promise<string[]>;
+
+    /**
+     * 获取下一个视频
+     * @param currentId 当前视频ID
+     */
+    getNextVideo(currentId: string): Promise<WatchHistoryVO | null>;
 }
 
 export default WatchHistoryService;

src/backend/services/impl/WatchHistoryServiceImpl.ts

@@ -430,4 +430,34 @@ export default class WatchHistoryServiceImpl implements WatchHistoryService {
             }
         }
     }
+
+    public async getNextVideo(currentId: string): Promise<WatchHistoryVO | null> {
+        const [currentRecord] = await db.select().from(watchHistory)
+            .where(eq(watchHistory.id, currentId));
+
+        if (!currentRecord) {
+            return null;
+        }
+
+        const folderVideos = await db.select().from(watchHistory)
+            .where(
+                and(
+                    eq(watchHistory.base_path, currentRecord.base_path),
+                    eq(watchHistory.project_type, WatchHistoryType.DIRECTORY)
+                )
+            ).orderBy(asc(watchHistory.file_name));
+
+        if (CollUtil.isEmpty(folderVideos)) {
+            return null;
+        }
+
+        const currentIndex = folderVideos.findIndex(video => video.id === currentId);
+
+        if (currentIndex >= 0 && currentIndex < folderVideos.length - 1) {
+            const nextVideo = folderVideos[currentIndex + 1];
+            return await this.buildVoFromFile(nextVideo);
+        }
+
+        return null;
+    }
 }

src/common/api/api-def.ts

@@ -104,6 +104,7 @@ interface WatchHistoryDef {
     'watch-history/attach-srt': { params: { videoPath: string, srtPath: string | 'same' }, return: void };
     'watch-history/suggest-srt': { params: string, return: string[] };
     'watch-history/analyse-folder': { params: string, return: { supported: number, unsupported: number } };
+    'watch-history/get-next-video': { params: string, return: WatchHistoryVO | null };
 }
 
 interface SubtitleControllerDef {

src/fronted/components/ControlBox.tsx

@@ -88,7 +88,9 @@ const ControlBox = () => {
         changeSyncSide,
         changeSingleRepeat,
         autoPause,
-        changeAutoPause
+        changeAutoPause,
+        autoPlayNext,
+        changeAutoPlayNext
     } = usePlayerController(
         useShallow((s) => ({
             showEn: s.showEn,
@@ -102,7 +104,9 @@ const ControlBox = () => {
             singleRepeat: s.singleRepeat,
             changeSingleRepeat: s.changeSingleRepeat,
             autoPause: s.autoPause,
-            changeAutoPause: s.changeAutoPause
+            changeAutoPause: s.changeAutoPause,
+            autoPlayNext: s.autoPlayNext,
+            changeAutoPlayNext: s.changeAutoPlayNext
         }))
     );
     const setSetting = useSetting((s) => s.setSetting);
@@ -196,6 +200,13 @@ const ControlBox = () => {
                     label: '自动暂停',
                     tooltip: `当前句子结束自动暂停 快捷键为 ${getShortcut('shortcut.autoPause')}`
                 })}
+                {controlItem({
+                    checked: autoPlayNext,
+                    onCheckedChange: changeAutoPlayNext,
+                    id: 'autoPlayNext',
+                    label: '自动播放下一个',
+                    tooltip: '文件夹模式下视频结束后自动播放下一个视频'
+                })}
                 {controlItem({
                     checked: setting('appearance.theme') === 'dark',
                     onCheckedChange: () => {

src/fronted/components/Player.tsx

@@ -12,6 +12,7 @@ import PlayerToaster from '@/fronted/components/PlayerToaster';
 import UrlUtil from '@/common/utils/UrlUtil';
 import StrUtil from '@/common/utils/str-util';
 import ReactPlayer from 'react-player/file';
+import { useNavigate } from 'react-router-dom';
 
 const api = window.electron;
 
@@ -26,7 +27,8 @@ export default function Player({ className }: { className?: string }): ReactElem
         updateExactPlayTime,
         setDuration,
         seekTo,
-        playbackRate
+        playbackRate,
+        autoPlayNext
     } = usePlayerController(
         useShallow((state) => ({
             playing: state.playing,
@@ -38,7 +40,8 @@ export default function Player({ className }: { className?: string }): ReactElem
             updateExactPlayTime: state.updateExactPlayTime,
             setDuration: state.setDuration,
             seekTo: state.seekTo,
-            playbackRate: state.playbackRate
+            playbackRate: state.playbackRate,
+            autoPlayNext: state.autoPlayNext
         }))
     );
     const videoPath = useFile((s) => s.videoPath);
@@ -47,6 +50,7 @@ export default function Player({ className }: { className?: string }): ReactElem
     const videoLoaded = useFile((s) => s.videoLoaded);
     const playerRef = useRef<ReactPlayer>(null);
     const playerRefBackground = useRef<HTMLCanvasElement>(null);
+    const navigate = useNavigate();
     let lastFile: string | undefined;
 
     const fullScreen = useLayout((s) => s.fullScreen);
@@ -182,6 +186,24 @@ export default function Player({ className }: { className?: string }): ReactElem
         lastFile = file;
     };
 
+    const handleAutoPlayNext = async () => {
+        if (!autoPlayNext || !videoId) {
+            return;
+        }
+
+        try {
+            const nextVideo = await api.call('watch-history/get-next-video', videoId);
+            if (nextVideo) {
+                console.log('Auto playing next video:', nextVideo.fileName);
+                navigate(`/player/${nextVideo.id}`);
+            } else {
+                console.log('No next video found');
+            }
+        } catch (error) {
+            console.error('Failed to get next video:', error);
+        }
+    };
+
     console.log('videoPath', videoPath);
     const render = (): ReactElement => {
         if (StrUtil.isBlank(videoPath)) {
@@ -230,6 +252,7 @@ export default function Player({ className }: { className?: string }): ReactElem
                             await jumpToHistoryProgress(videoPath);
                             loadedVideo(videoPath);
                         }}
+                        onEnded={handleAutoPlayNext}
                     />
                     {!fullScreen && (!showControlPanel && (
                         <PlayerControlPanel

src/fronted/hooks/usePlayerControllerSlices/SliceTypes.ts

@@ -62,6 +62,7 @@ export interface ModeSlice {
     singleRepeat: boolean;
     autoPause: boolean;
     showWordLevel: boolean;
+    autoPlayNext: boolean;
 
     changeShowEn: () => void;
     changeShowCn: () => void;
@@ -70,6 +71,7 @@ export interface ModeSlice {
     changeSingleRepeat: (target?:boolean) => void;
     changeShowWordLevel: () => void;
     changeAutoPause: (target?:boolean) => void;
+    changeAutoPlayNext: (target?:boolean) => void;
 }
 
 export interface ControllerSlice {