perf: 优化媒体播放

electron/electron.js

@@ -54,6 +54,8 @@ let screenshotObj = null,
 
 let childWindow = [],
     preloadWindow = null,
+    mediaWindow = null,
+    mediaType = null,
     webTabWindow = null,
     webTabView = [],
     webTabHeight = 38;
@@ -475,36 +477,63 @@ function updateChildWindow(browser, args) {
  * @param type
  */
 function createMediaWindow(args, type = 'image') {
-    const imageWindow = new BrowserWindow({
+    if (mediaWindow === null) {
-        width: args.width || 970,
+        mediaWindow = new BrowserWindow({
-        height: args.height || 700,
+            width: args.width || 970,
-        minWidth: 360,
+            height: args.height || 700,
-        minHeight: 360,
+            minWidth: 360,
-        autoHideMenuBar: true,
+            minHeight: 360,
-        webPreferences: {
+            autoHideMenuBar: true,
-            nodeIntegration: true,
+            webPreferences: {
-            contextIsolation: false,
+                nodeIntegration: true,
-            webSecurity: false,
+                contextIsolation: false,
-            plugins: true
+                webSecurity: false,
-        },
+                plugins: true
-        show: false
+            },
-    });
+            show: false
+        });
+
+        // 监听关闭事件
+        mediaWindow.addListener('close', event => {
+            if (!willQuitApp) {
+                event.preventDefault()
+                mediaWindow.webContents.send('on-close');
+                mediaWindow.hide();
+            }
+        })
+
+        // 监听关闭事件
+        mediaWindow.addListener('closed', () => {
+            mediaWindow = null;
+            mediaType = null;
+        })
+
+        // 设置右键菜单
+        electronMenu.webContentsMenu(mediaWindow.webContents)
+    } else {
+        // 直接显示
+        mediaWindow.show();
+    }
 
     // 加载图片浏览器的HTML
-    let filePath = './render/viewer/index.html';
+    if (mediaType === type) {
-    if (type === 'video') {
+        // 更新窗口
-        filePath = './render/video/index.html';
+        mediaWindow.webContents.send('load-media', args);
+    } else {
+        // 重置窗口
+        mediaType = type;
+        let filePath = './render/viewer/index.html';
+        if (type === 'video') {
+            filePath = './render/video/index.html';
+        }
+        mediaWindow.loadFile(filePath, {}).then(_ => { }).catch(_ => { })
     }
-    imageWindow.loadFile(filePath, {}).then(_ => { }).catch(_ => { })
 
-    // 设置右键菜单
+    // 窗口准备好后事件
-    electronMenu.webContentsMenu(imageWindow.webContents)
+    mediaWindow.removeAllListeners("ready-to-show");
-
+    mediaWindow.addListener('ready-to-show', () => {
-    // 窗口准备好后显示
+        mediaWindow.show();
-    imageWindow.on('ready-to-show', () => {
+        mediaWindow.webContents.send('load-media', args);
-        imageWindow.show();
-        // 发送图片数据到渲染进程
-        imageWindow.webContents.send('load-media', args);
     });
 }
 
@@ -840,6 +869,7 @@ function monitorThemeChanges() {
         const backgroundColor = utils.getDefaultBackgroundColor()
         mainWindow?.setBackgroundColor(backgroundColor);
         preloadWindow?.setBackgroundColor(backgroundColor);
+        mediaWindow?.setBackgroundColor(backgroundColor);
         childWindow.some(({browser}) => browser.setBackgroundColor(backgroundColor))
         webTabWindow?.setBackgroundColor(nativeTheme.shouldUseDarkColors ? '#3B3B3D' : '#EFF0F4')
         // 通知所有窗口
@@ -1110,6 +1140,7 @@ ipcMain.on('childWindowCloseAll', (event) => {
         browser && browser.close()
     })
     preloadWindow?.close()
+    mediaWindow?.close()
     event.returnValue = "ok"
 })
 
@@ -1121,6 +1152,7 @@ ipcMain.on('childWindowDestroyAll', (event) => {
         browser && browser.destroy()
     })
     preloadWindow?.destroy()
+    mediaWindow?.destroy()
     event.returnValue = "ok"
 })
 
@@ -1437,6 +1469,7 @@ ipcMain.on('updateQuitAndInstall', (event, args) => {
         browser && browser.destroy()
     })
     preloadWindow?.destroy()
+    mediaWindow?.destroy()
 
     // 启动更新子窗口
     createUpdaterWindow(args.updateTitle)

electron/render/video/index.html

@@ -235,7 +235,7 @@
             disableCaptions: 'Désactiver les sous-titres',
             enterFullscreen: 'Plein écran',
             exitFullscreen: 'Quitter le plein écran',
-            frameTitle: 'Lecteur vidéo',
+            frameTitle: 'Lecteur Vidéo',
             captions: 'Sous-titres',
             settings: 'Paramètres',
             menuBack: 'Retour au menu précédent',
@@ -310,46 +310,79 @@
         ru: 'Видеоплеер'
     };
 
+    // 获取视频MIME类型
+    const getVideoMimeType = (filename) => {
+        const ext = filename.split('.').pop().toLowerCase();
+        const mimeTypes = {
+            'mp4': 'video/mp4',
+            'webm': 'video/webm',
+            'ogg': 'video/ogg',
+            'mov': 'video/quicktime',
+            'm4v': 'video/mp4',
+            'avi': 'video/x-msvideo',
+            'wmv': 'video/x-ms-wmv',
+            'flv': 'video/x-flv',
+            'mkv': 'video/x-matroska',
+            '3gp': 'video/3gpp'
+        };
+        return mimeTypes[ext] || 'video/mp4';
+    };
+
     let player = null;
 
+    // 接收主进程传来的关闭事件
+    ipcRenderer.on('on-close', () => {
+        if (player) {
+            player.stop()
+        }
+    });
+
     // 接收主进程传来的视频路径
     ipcRenderer.on('load-media', (event, args) => {
-        const videoElement = document.querySelector('video');
+        // 检查视频源是否有效
-        videoElement.src = args.video;
+        if (!args || !args.video) {
-
+            return;
-        // 销毁旧的播放器实例
-        if (player) {
-            player.destroy();
         }
 
         // 设置语言
         const currentLang = args.lang || 'en';
 
-        // 创建新的播放器实例
+        // 如果播放器不存在，创建新的实例
-        player = new Plyr('#player', {
+        if (!player) {
-            controls: [
+            player = new Plyr('#player', {
-                'play-large', // 大播放按钮
+                controls: [
-                'play', // 播放/暂停
+                    'play-large', // 大播放按钮
-                'progress', // 进度条
+                    'play', // 播放/暂停
-                'current-time', // 当前时间
+                    'progress', // 进度条
-                'duration', // 总时长
+                    'current-time', // 当前时间
-                'mute', // 静音
+                    'duration', // 总时长
-                'volume', // 音量
+                    'mute', // 静音
-                'settings', // 设置
+                    'volume', // 音量
-                'fullscreen' // 全屏
+                    'settings', // 设置
-            ],
+                    'fullscreen' // 全屏
-            settings: ['captions', 'quality', 'speed', 'loop'], // 设置菜单选项
+                ],
-            speed: {selected: 1, options: [0.5, 0.75, 1, 1.25, 1.5, 2]}, // 播放速度选项
+                settings: ['captions', 'quality', 'speed', 'loop'], // 设置菜单选项
-            keyboard: {focused: true, global: true}, // 启用键盘快捷键
+                speed: {selected: 1, options: [0.5, 0.75, 1, 1.25, 1.5, 2]}, // 播放速度选项
-            tooltips: {controls: true, seek: true}, // 显示工具提示
+                keyboard: {focused: true, global: true}, // 启用键盘快捷键
-            hideControls: true, // 自动隐藏控制栏
+                tooltips: {controls: true, seek: true}, // 显示工具提示
-            i18n: translations[currentLang] || translations['en'] // 设置语言
+                hideControls: true, // 自动隐藏控制栏
-        });
+                i18n: translations[currentLang] || translations['en'] // 设置语言
+            });
 
-        // 错误处理
+            // 错误处理
-        player.on('error', (event) => {
+            player.on('error', (event) => {
-            console.error('Player error:', event);
+                console.error('Player error:', event);
-        });
+            });
+        }
+
+        // 直接更新播放器源
+        player.source = {
+            type: 'video',
+            sources: [{
+                src: args.video,
+                type: getVideoMimeType(args.video)
+            }]
+        };
 
         // 更新网页标题
         document.title = args.title || titleTranslations[currentLang] || titleTranslations['en'];

electron/render/viewer/index.html

@@ -35,7 +35,6 @@
 <script src="./viewer.min.js"></script>
 <script>
     const {ipcRenderer} = require('electron');
-    let viewer = null;
 
     const thumbnailUrl = (url) => {
         const crops = {
@@ -63,8 +62,22 @@
         ru: 'Просмотр изображений'
     };
 
+    let viewer = null;
+
+    // 接收主进程传来的关闭事件
+    ipcRenderer.on('on-close', () => {
+        if (viewer) {
+            viewer.destroy()
+        }
+    });
+
     // 接收主进程发送的图片数据
     ipcRenderer.on('load-media', (event, args) => {
+        // 检查数据源是否有效
+        if (!args || !args.images) {
+            return;
+        }
+
         const container = document.getElementById('image-container');
         container.innerHTML = ''; // 清空容器