perf: 优化媒体播放

2025-12-12 11:19:56 +00:00 · 2024-12-10 15:20:39 +08:00 · 2024-12-10 15:20:39 +08:00 · 0ddb696e90
commit 0ddb696e90
parent cc0a6d4706
3 changed files with 137 additions and 58 deletions
--- a/electron/electron.js
+++ b/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({
-        width: args.width || 970,
-        height: args.height || 700,
-        minWidth: 360,
-        minHeight: 360,
-        autoHideMenuBar: true,
-        webPreferences: {
-            nodeIntegration: true,
-            contextIsolation: false,
-            webSecurity: false,
-            plugins: true
-        },
-        show: false
-    });
+    if (mediaWindow === null) {
+        mediaWindow = new BrowserWindow({
+            width: args.width || 970,
+            height: args.height || 700,
+            minWidth: 360,
+            minHeight: 360,
+            autoHideMenuBar: true,
+            webPreferences: {
+                nodeIntegration: true,
+                contextIsolation: false,
+                webSecurity: false,
+                plugins: true
+            },
+            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 (type === 'video') {
-        filePath = './render/video/index.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';
+        }
+        mediaWindow.loadFile(filePath, {}).then(_ => { }).catch(_ => { })
    }
-    imageWindow.loadFile(filePath, {}).then(_ => { }).catch(_ => { })

-    // 设置右键菜单
-    electronMenu.webContentsMenu(imageWindow.webContents)
-
-    // 窗口准备好后显示
-    imageWindow.on('ready-to-show', () => {
-        imageWindow.show();
-        // 发送图片数据到渲染进程
-        imageWindow.webContents.send('load-media', args);
+    // 窗口准备好后事件
+    mediaWindow.removeAllListeners("ready-to-show");
+    mediaWindow.addListener('ready-to-show', () => {
+        mediaWindow.show();
+        mediaWindow.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)
--- a/electron/render/video/index.html
+++ b/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 (player) {
-            player.destroy();
+        // 检查视频源是否有效
+        if (!args || !args.video) {
+            return;
        }

        // 设置语言
        const currentLang = args.lang || 'en';

-        // 创建新的播放器实例
-        player = new Plyr('#player', {
-            controls: [
-                'play-large', // 大播放按钮
-                'play', // 播放/暂停
-                'progress', // 进度条
-                'current-time', // 当前时间
-                'duration', // 总时长
-                'mute', // 静音
-                'volume', // 音量
-                'settings', // 设置
-                'fullscreen' // 全屏
-            ],
-            settings: ['captions', 'quality', 'speed', 'loop'], // 设置菜单选项
-            speed: {selected: 1, options: [0.5, 0.75, 1, 1.25, 1.5, 2]}, // 播放速度选项
-            keyboard: {focused: true, global: true}, // 启用键盘快捷键
-            tooltips: {controls: true, seek: true}, // 显示工具提示
-            hideControls: true, // 自动隐藏控制栏
-            i18n: translations[currentLang] || translations['en'] // 设置语言
-        });
+        // 如果播放器不存在，创建新的实例
+        if (!player) {
+            player = new Plyr('#player', {
+                controls: [
+                    'play-large', // 大播放按钮
+                    'play', // 播放/暂停
+                    'progress', // 进度条
+                    'current-time', // 当前时间
+                    'duration', // 总时长
+                    'mute', // 静音
+                    'volume', // 音量
+                    'settings', // 设置
+                    'fullscreen' // 全屏
+                ],
+                settings: ['captions', 'quality', 'speed', 'loop'], // 设置菜单选项
+                speed: {selected: 1, options: [0.5, 0.75, 1, 1.25, 1.5, 2]}, // 播放速度选项
+                keyboard: {focused: true, global: true}, // 启用键盘快捷键
+                tooltips: {controls: true, seek: true}, // 显示工具提示
+                hideControls: true, // 自动隐藏控制栏
+                i18n: translations[currentLang] || translations['en'] // 设置语言
+            });

-        // 错误处理
-        player.on('error', (event) => {
-            console.error('Player error:', event);
-        });
+            // 错误处理
+            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'];
--- a/electron/render/viewer/index.html
+++ b/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 = ''; // 清空容器