mirror of
https://github.com/kuaifan/dootask.git
synced 2025-12-12 11:19:56 +00:00
perf: 优化媒体播放
This commit is contained in:
kuaifan
parent
cc0a6d4706
commit
0ddb696e90
85
electron/electron.js
vendored
85
electron/electron.js
vendored
@ -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)
|
||||
|
||||
@ -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'];
|
||||
|
||||
@ -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 = ''; // 清空容器
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user