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,7 +477,8 @@ function updateChildWindow(browser, args) {
  * @param type
  */
 function createMediaWindow(args, type = 'image') {
-    const imageWindow = new BrowserWindow({
+    if (mediaWindow === null) {
+        mediaWindow = new BrowserWindow({
             width: args.width || 970,
             height: args.height || 700,
             minWidth: 360,
@@ -490,21 +493,47 @@ function createMediaWindow(args, type = 'image') {
             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
+    if (mediaType === type) {
+        // 更新窗口
+        mediaWindow.webContents.send('load-media', args);
+    } else {
+        // 重置窗口
+        mediaType = type;
         let filePath = './render/viewer/index.html';
         if (type === 'video') {
             filePath = './render/video/index.html';
         }
-    imageWindow.loadFile(filePath, {}).then(_ => { }).catch(_ => { })
+        mediaWindow.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,22 +310,45 @@
         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';
 
-        // 创建新的播放器实例
+        // 如果播放器不存在，创建新的实例
+        if (!player) {
             player = new Plyr('#player', {
                 controls: [
                     'play-large', // 大播放按钮
@@ -350,6 +373,16 @@
             player.on('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 = ''; // 清空容器