mirror of
https://github.com/kuaifan/dootask.git
synced 2026-01-05 20:10:26 +00:00
perf: 优化客户端媒体浏览器
This commit is contained in:
kuaifan
parent
71f13a0b50
commit
8afc1db72f
46
electron/electron.js
vendored
46
electron/electron.js
vendored
@ -468,6 +468,44 @@ function updateChildWindow(browser, args) {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 创建媒体浏览器窗口
|
||||||
|
* @param args
|
||||||
|
* @param type
|
||||||
|
*/
|
||||||
|
function createMediaWindow(args, type = 'image') {
|
||||||
|
const imageWindow = new BrowserWindow({
|
||||||
|
width: args.width || 970,
|
||||||
|
height: args.height || 700,
|
||||||
|
minWidth: 360,
|
||||||
|
minHeight: 360,
|
||||||
|
webPreferences: {
|
||||||
|
nodeIntegration: true,
|
||||||
|
contextIsolation: false,
|
||||||
|
webSecurity: false,
|
||||||
|
plugins: true
|
||||||
|
},
|
||||||
|
show: false
|
||||||
|
});
|
||||||
|
|
||||||
|
// 加载图片浏览器的HTML
|
||||||
|
let filePath = './render/viewer/index.html';
|
||||||
|
if (type === 'video') {
|
||||||
|
filePath = './render/video/index.html';
|
||||||
|
}
|
||||||
|
imageWindow.loadFile(filePath, {}).then(_ => { }).catch(_ => { })
|
||||||
|
|
||||||
|
// 设置右键菜单
|
||||||
|
electronMenu.webContentsMenu(imageWindow.webContents)
|
||||||
|
|
||||||
|
// 窗口准备好后显示
|
||||||
|
imageWindow.on('ready-to-show', () => {
|
||||||
|
imageWindow.show();
|
||||||
|
// 发送图片数据到渲染进程
|
||||||
|
imageWindow.webContents.send('load-media', args);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* 创建内置浏览器
|
* 创建内置浏览器
|
||||||
* @param args {url, ?}
|
* @param args {url, ?}
|
||||||
@ -963,6 +1001,14 @@ ipcMain.handle('getChildWindow', (event, args) => {
|
|||||||
return null;
|
return null;
|
||||||
});
|
});
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 打开媒体浏览器
|
||||||
|
*/
|
||||||
|
ipcMain.on('openMediaViewer', (event, args) => {
|
||||||
|
createMediaWindow(args, ['image', 'video'].includes(args.type) ? args.type : 'image');
|
||||||
|
event.returnValue = "ok"
|
||||||
|
});
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* 内置浏览器 - 打开创建
|
* 内置浏览器 - 打开创建
|
||||||
* @param args {url, ?}
|
* @param args {url, ?}
|
||||||
|
|||||||
366
electron/render/video/index.html
Normal file
366
electron/render/video/index.html
Normal file
@ -0,0 +1,366 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<title>Video</title>
|
||||||
|
<link rel="stylesheet" href="./plyr.css" />
|
||||||
|
<style>
|
||||||
|
html, body {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
background: #000;
|
||||||
|
overflow: hidden;
|
||||||
|
user-select: none;
|
||||||
|
}
|
||||||
|
#video-container {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
.plyr {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
video {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
/* 自定义播放器主题色 */
|
||||||
|
:root {
|
||||||
|
--plyr-color-main: #409eff;
|
||||||
|
}
|
||||||
|
/* 黑色背景主题 */
|
||||||
|
.plyr--video {
|
||||||
|
background: #000;
|
||||||
|
}
|
||||||
|
.plyr__control--overlaid {
|
||||||
|
background: rgba(64, 158, 255, 0.8);
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div id="video-container">
|
||||||
|
<video id="player" playsinline controls>
|
||||||
|
Your browser does not support the video tag.
|
||||||
|
</video>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script src="./plyr.polyfilled.js"></script>
|
||||||
|
<script>
|
||||||
|
const { ipcRenderer } = require('electron');
|
||||||
|
|
||||||
|
// 多语言翻译
|
||||||
|
const translations = {
|
||||||
|
zh: {
|
||||||
|
speed: '播放速度',
|
||||||
|
normal: '正常',
|
||||||
|
quality: '视频质量',
|
||||||
|
loop: '循环播放',
|
||||||
|
play: '播放',
|
||||||
|
pause: '暂停',
|
||||||
|
played: '已播放',
|
||||||
|
buffered: '已缓冲',
|
||||||
|
currentTime: '当前时间',
|
||||||
|
duration: '总时长',
|
||||||
|
volume: '音量',
|
||||||
|
mute: '静音',
|
||||||
|
unmute: '取消静音',
|
||||||
|
enableCaptions: '启用字幕',
|
||||||
|
disableCaptions: '禁用字幕',
|
||||||
|
enterFullscreen: '进入全屏',
|
||||||
|
exitFullscreen: '退出全屏',
|
||||||
|
frameTitle: '视频播放器',
|
||||||
|
captions: '字幕',
|
||||||
|
settings: '设置',
|
||||||
|
menuBack: '返回上级菜单',
|
||||||
|
restart: '重新播放',
|
||||||
|
rewind: '后退 {seektime} 秒',
|
||||||
|
forward: '前进 {seektime} 秒'
|
||||||
|
},
|
||||||
|
'zh-CHT': {
|
||||||
|
speed: '播放速度',
|
||||||
|
normal: '正常',
|
||||||
|
quality: '視頻質量',
|
||||||
|
loop: '循環播放',
|
||||||
|
play: '播放',
|
||||||
|
pause: '暫停',
|
||||||
|
played: '已播放',
|
||||||
|
buffered: '已緩衝',
|
||||||
|
currentTime: '當前時間',
|
||||||
|
duration: '總時長',
|
||||||
|
volume: '音量',
|
||||||
|
mute: '靜音',
|
||||||
|
unmute: '取消靜音',
|
||||||
|
enableCaptions: '啟用字幕',
|
||||||
|
disableCaptions: '禁用字幕',
|
||||||
|
enterFullscreen: '進入全屏',
|
||||||
|
exitFullscreen: '退出全屏',
|
||||||
|
frameTitle: '視頻播放器',
|
||||||
|
captions: '字幕',
|
||||||
|
settings: '設置',
|
||||||
|
menuBack: '返回上級菜單',
|
||||||
|
restart: '重新播放',
|
||||||
|
rewind: '後退 {seektime} 秒',
|
||||||
|
forward: '前進 {seektime} 秒'
|
||||||
|
},
|
||||||
|
en: {
|
||||||
|
speed: 'Speed',
|
||||||
|
normal: 'Normal',
|
||||||
|
quality: 'Quality',
|
||||||
|
loop: 'Loop',
|
||||||
|
play: 'Play',
|
||||||
|
pause: 'Pause',
|
||||||
|
played: 'Played',
|
||||||
|
buffered: 'Buffered',
|
||||||
|
currentTime: 'Current time',
|
||||||
|
duration: 'Duration',
|
||||||
|
volume: 'Volume',
|
||||||
|
mute: 'Mute',
|
||||||
|
unmute: 'Unmute',
|
||||||
|
enableCaptions: 'Enable captions',
|
||||||
|
disableCaptions: 'Disable captions',
|
||||||
|
enterFullscreen: 'Enter fullscreen',
|
||||||
|
exitFullscreen: 'Exit fullscreen',
|
||||||
|
frameTitle: 'Video player',
|
||||||
|
captions: 'Captions',
|
||||||
|
settings: 'Settings',
|
||||||
|
menuBack: 'Go back to previous menu',
|
||||||
|
restart: 'Restart',
|
||||||
|
rewind: 'Rewind {seektime}s',
|
||||||
|
forward: 'Forward {seektime}s'
|
||||||
|
},
|
||||||
|
ja: {
|
||||||
|
speed: '再生速度',
|
||||||
|
normal: '標準',
|
||||||
|
quality: '画質',
|
||||||
|
loop: 'ループ',
|
||||||
|
play: '再生',
|
||||||
|
pause: '一時停止',
|
||||||
|
played: '再生済み',
|
||||||
|
buffered: 'バッファリング済み',
|
||||||
|
currentTime: '現在の時間',
|
||||||
|
duration: '合計時間',
|
||||||
|
volume: '音量',
|
||||||
|
mute: 'ミュート',
|
||||||
|
unmute: 'ミュート解除',
|
||||||
|
enableCaptions: '字幕をオン',
|
||||||
|
disableCaptions: '字幕をオフ',
|
||||||
|
enterFullscreen: '全画面表示',
|
||||||
|
exitFullscreen: '全画面解除',
|
||||||
|
frameTitle: 'ビデオプレーヤー',
|
||||||
|
captions: '字幕',
|
||||||
|
settings: '設定',
|
||||||
|
menuBack: '前のメニューに戻る',
|
||||||
|
restart: '最初から再生',
|
||||||
|
rewind: '{seektime}秒戻る',
|
||||||
|
forward: '{seektime}秒進む'
|
||||||
|
},
|
||||||
|
ko: {
|
||||||
|
speed: '재생 속도',
|
||||||
|
normal: '보통',
|
||||||
|
quality: '품질',
|
||||||
|
loop: '반복',
|
||||||
|
play: '재생',
|
||||||
|
pause: '일시정지',
|
||||||
|
played: '재생됨',
|
||||||
|
buffered: '버퍼링됨',
|
||||||
|
currentTime: '현재 시간',
|
||||||
|
duration: '총 시간',
|
||||||
|
volume: '볼륨',
|
||||||
|
mute: '음소거',
|
||||||
|
unmute: '음소거 해제',
|
||||||
|
enableCaptions: '자막 켜기',
|
||||||
|
disableCaptions: '자막 끄기',
|
||||||
|
enterFullscreen: '전체화면',
|
||||||
|
exitFullscreen: '전체화면 나가기',
|
||||||
|
frameTitle: '비디오 플레이어',
|
||||||
|
captions: '자막',
|
||||||
|
settings: '설정',
|
||||||
|
menuBack: '이전 메뉴로 돌아가기',
|
||||||
|
restart: '다시 시작',
|
||||||
|
rewind: '{seektime}초 뒤로',
|
||||||
|
forward: '{seektime}초 앞으로'
|
||||||
|
},
|
||||||
|
de: {
|
||||||
|
speed: 'Geschwindigkeit',
|
||||||
|
normal: 'Normal',
|
||||||
|
quality: 'Qualität',
|
||||||
|
loop: 'Wiederholen',
|
||||||
|
play: 'Abspielen',
|
||||||
|
pause: 'Pause',
|
||||||
|
played: 'Gespielt',
|
||||||
|
buffered: 'Gepuffert',
|
||||||
|
currentTime: 'Aktuelle Zeit',
|
||||||
|
duration: 'Gesamtzeit',
|
||||||
|
volume: 'Lautstärke',
|
||||||
|
mute: 'Stummschalten',
|
||||||
|
unmute: 'Ton einschalten',
|
||||||
|
enableCaptions: 'Untertitel aktivieren',
|
||||||
|
disableCaptions: 'Untertitel deaktivieren',
|
||||||
|
enterFullscreen: 'Vollbild',
|
||||||
|
exitFullscreen: 'Vollbild beenden',
|
||||||
|
frameTitle: 'Video-Player',
|
||||||
|
captions: 'Untertitel',
|
||||||
|
settings: 'Einstellungen',
|
||||||
|
menuBack: 'Zurück zum vorherigen Menü',
|
||||||
|
restart: 'Neu starten',
|
||||||
|
rewind: '{seektime}s zurück',
|
||||||
|
forward: '{seektime}s vorwärts'
|
||||||
|
},
|
||||||
|
fr: {
|
||||||
|
speed: 'Vitesse',
|
||||||
|
normal: 'Normale',
|
||||||
|
quality: 'Qualité',
|
||||||
|
loop: 'Boucle',
|
||||||
|
play: 'Lecture',
|
||||||
|
pause: 'Pause',
|
||||||
|
played: 'Lu',
|
||||||
|
buffered: 'Tamponné',
|
||||||
|
currentTime: 'Temps actuel',
|
||||||
|
duration: 'Durée',
|
||||||
|
volume: 'Volume',
|
||||||
|
mute: 'Muet',
|
||||||
|
unmute: 'Son activé',
|
||||||
|
enableCaptions: 'Activer les sous-titres',
|
||||||
|
disableCaptions: 'Désactiver les sous-titres',
|
||||||
|
enterFullscreen: 'Plein écran',
|
||||||
|
exitFullscreen: 'Quitter le plein écran',
|
||||||
|
frameTitle: 'Lecteur vidéo',
|
||||||
|
captions: 'Sous-titres',
|
||||||
|
settings: 'Paramètres',
|
||||||
|
menuBack: 'Retour au menu précédent',
|
||||||
|
restart: 'Redémarrer',
|
||||||
|
rewind: 'Reculer de {seektime}s',
|
||||||
|
forward: 'Avancer de {seektime}s'
|
||||||
|
},
|
||||||
|
id: {
|
||||||
|
speed: 'Kecepatan',
|
||||||
|
normal: 'Normal',
|
||||||
|
quality: 'Kualitas',
|
||||||
|
loop: 'Putar Ulang',
|
||||||
|
play: 'Putar',
|
||||||
|
pause: 'Jeda',
|
||||||
|
played: 'Telah Diputar',
|
||||||
|
buffered: 'Telah Buffer',
|
||||||
|
currentTime: 'Waktu Saat Ini',
|
||||||
|
duration: 'Durasi',
|
||||||
|
volume: 'Volume',
|
||||||
|
mute: 'Bisukan',
|
||||||
|
unmute: 'Suarakan',
|
||||||
|
enableCaptions: 'Aktifkan Teks',
|
||||||
|
disableCaptions: 'Nonaktifkan Teks',
|
||||||
|
enterFullscreen: 'Layar Penuh',
|
||||||
|
exitFullscreen: 'Keluar Layar Penuh',
|
||||||
|
frameTitle: 'Pemutar Video',
|
||||||
|
captions: 'Teks',
|
||||||
|
settings: 'Pengaturan',
|
||||||
|
menuBack: 'Kembali ke menu sebelumnya',
|
||||||
|
restart: 'Mulai Ulang',
|
||||||
|
rewind: 'Mundur {seektime} detik',
|
||||||
|
forward: 'Maju {seektime} detik'
|
||||||
|
},
|
||||||
|
ru: {
|
||||||
|
speed: 'Скорость',
|
||||||
|
normal: 'Нормальная',
|
||||||
|
quality: 'Качество',
|
||||||
|
loop: 'Повтор',
|
||||||
|
play: 'Воспроизвести',
|
||||||
|
pause: 'Пауза',
|
||||||
|
played: 'Воспроизведено',
|
||||||
|
buffered: 'Буферизовано',
|
||||||
|
currentTime: 'Текущее время',
|
||||||
|
duration: 'Продолжительность',
|
||||||
|
volume: 'Громкость',
|
||||||
|
mute: 'Без звука',
|
||||||
|
unmute: 'Со звуком',
|
||||||
|
enableCaptions: 'Включить субтитры',
|
||||||
|
disableCaptions: 'Отключить субтитры',
|
||||||
|
enterFullscreen: 'Полноэкранный режим',
|
||||||
|
exitFullscreen: 'Выйти из полноэкранного режима',
|
||||||
|
frameTitle: 'Видеоплеер',
|
||||||
|
captions: 'Субтитры',
|
||||||
|
settings: 'Настройки',
|
||||||
|
menuBack: 'Вернуться в предыдущее меню',
|
||||||
|
restart: 'Перезапустить',
|
||||||
|
rewind: 'Назад на {seektime} сек',
|
||||||
|
forward: 'Вперед на {seektime} сек'
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
// 标题翻译
|
||||||
|
const titleTranslations = {
|
||||||
|
zh: '视频播放器',
|
||||||
|
'zh-CHT': '視頻播放器',
|
||||||
|
en: 'Video Player',
|
||||||
|
ko: '비디오 플레이어',
|
||||||
|
ja: 'ビデオプレーヤー',
|
||||||
|
de: 'Video-Player',
|
||||||
|
fr: 'Lecteur Vidéo',
|
||||||
|
id: 'Pemutar Video',
|
||||||
|
ru: 'Видеоплеер'
|
||||||
|
};
|
||||||
|
|
||||||
|
let player = null;
|
||||||
|
|
||||||
|
// 接收主进程传来的视频路径
|
||||||
|
ipcRenderer.on('load-media', (event, args) => {
|
||||||
|
const videoElement = document.querySelector('video');
|
||||||
|
videoElement.src = args.video;
|
||||||
|
|
||||||
|
// 销毁旧的播放器实例
|
||||||
|
if (player) {
|
||||||
|
player.destroy();
|
||||||
|
}
|
||||||
|
|
||||||
|
// 设置语言
|
||||||
|
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'] // 设置语言
|
||||||
|
});
|
||||||
|
|
||||||
|
// 错误处理
|
||||||
|
player.on('error', (event) => {
|
||||||
|
console.error('Player error:', event);
|
||||||
|
});
|
||||||
|
|
||||||
|
// 更新网页标题
|
||||||
|
document.title = args.title || titleTranslations[currentLang] || titleTranslations['en'];
|
||||||
|
|
||||||
|
// 自动播放
|
||||||
|
player.play().catch(e => {
|
||||||
|
console.log('Auto-play failed:', e);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
// 快捷键处理
|
||||||
|
document.addEventListener('keydown', (e) => {
|
||||||
|
// ESC 键关闭窗口
|
||||||
|
if (e.key === 'Escape' && player && !player.fullscreen.active) {
|
||||||
|
window.close();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
1
electron/render/video/plyr.css
vendored
Normal file
1
electron/render/video/plyr.css
vendored
Normal file
File diff suppressed because one or more lines are too long
2
electron/render/video/plyr.polyfilled.js
vendored
Normal file
2
electron/render/video/plyr.polyfilled.js
vendored
Normal file
File diff suppressed because one or more lines are too long
184
electron/render/viewer/index.html
Normal file
184
electron/render/viewer/index.html
Normal file
@ -0,0 +1,184 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<title>Viewer</title>
|
||||||
|
<link href="./viewer.min.css" rel="stylesheet">
|
||||||
|
<style>
|
||||||
|
* {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
background: #1a1a1a;
|
||||||
|
height: 100vh;
|
||||||
|
overflow: hidden;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
#image-container {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.viewer-close {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 加载动画 */
|
||||||
|
.loading {
|
||||||
|
position: fixed;
|
||||||
|
top: 50%;
|
||||||
|
left: 50%;
|
||||||
|
transform: translate(-50%, -50%);
|
||||||
|
width: 40px;
|
||||||
|
height: 40px;
|
||||||
|
border: 3px solid rgba(255, 255, 255, 0.3);
|
||||||
|
border-radius: 50%;
|
||||||
|
border-top-color: #fff;
|
||||||
|
animation: spin 1s ease-in-out infinite;
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes spin {
|
||||||
|
to { transform: translate(-50%, -50%) rotate(360deg); }
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div id="image-container"></div>
|
||||||
|
<div class="loading"></div>
|
||||||
|
|
||||||
|
<script src="./viewer.min.js"></script>
|
||||||
|
<script>
|
||||||
|
const {ipcRenderer} = require('electron');
|
||||||
|
let viewer = null;
|
||||||
|
|
||||||
|
// 标题翻译
|
||||||
|
const titleTranslations = {
|
||||||
|
zh: '图片查看器',
|
||||||
|
'zh-CHT': '圖片查看器',
|
||||||
|
en: 'Image Viewer',
|
||||||
|
ko: '이미지 뷰어',
|
||||||
|
ja: '画像ビューア',
|
||||||
|
de: 'Bildbetrachter',
|
||||||
|
fr: 'Visionneuse d\'images',
|
||||||
|
id: 'Penampil Gambar',
|
||||||
|
ru: 'Просмотр изображений'
|
||||||
|
};
|
||||||
|
|
||||||
|
// 接收主进程发送的图片数据
|
||||||
|
ipcRenderer.on('load-media', (event, args) => {
|
||||||
|
const container = document.getElementById('image-container');
|
||||||
|
const loading = document.querySelector('.loading');
|
||||||
|
|
||||||
|
loading.style.display = 'block';
|
||||||
|
container.innerHTML = ''; // 清空容器
|
||||||
|
|
||||||
|
// 更新网页标题
|
||||||
|
const currentLang = args.lang || 'en';
|
||||||
|
document.title = args.title || titleTranslations[currentLang] || titleTranslations['en'];
|
||||||
|
|
||||||
|
// 创建图片元素
|
||||||
|
args.images.forEach((src, index) => {
|
||||||
|
const img = document.createElement('img');
|
||||||
|
img.src = src;
|
||||||
|
container.appendChild(img);
|
||||||
|
});
|
||||||
|
|
||||||
|
// 如果已存在查看器，则销毁
|
||||||
|
if (viewer) {
|
||||||
|
viewer.destroy();
|
||||||
|
}
|
||||||
|
|
||||||
|
// 初始化 ViewerJS
|
||||||
|
viewer = new Viewer(container, {
|
||||||
|
// 是否使用内联模式显示
|
||||||
|
// false: 以模态框形式显示（推荐，支持完整键盘快捷键）
|
||||||
|
// true: 直接在页面中显示
|
||||||
|
inline: false,
|
||||||
|
|
||||||
|
// 是否显示图片标题
|
||||||
|
title: false,
|
||||||
|
|
||||||
|
// 工具栏按钮配置
|
||||||
|
toolbar: {
|
||||||
|
zoomIn: true, // 放大按钮
|
||||||
|
zoomOut: true, // 缩小按钮
|
||||||
|
oneToOne: true, // 1:1 原始尺寸按钮
|
||||||
|
reset: true, // 重置按钮
|
||||||
|
prev: true, // 上一张图片按钮
|
||||||
|
next: true, // 下一张图片按钮
|
||||||
|
rotateLeft: true, // 向左旋转按钮
|
||||||
|
rotateRight: true, // 向右旋转按钮
|
||||||
|
flipHorizontal: true, // 水平翻转按钮
|
||||||
|
flipVertical: true, // 垂直翻转按钮
|
||||||
|
},
|
||||||
|
|
||||||
|
// 是否显示缩略图导航栏
|
||||||
|
navbar: true,
|
||||||
|
|
||||||
|
// 是否显示工具提示
|
||||||
|
tooltip: true,
|
||||||
|
|
||||||
|
// 是否允许拖动图片
|
||||||
|
movable: true,
|
||||||
|
|
||||||
|
// 是否允许缩放图片
|
||||||
|
zoomable: true,
|
||||||
|
|
||||||
|
// 是否允许旋转图片
|
||||||
|
rotatable: true,
|
||||||
|
|
||||||
|
// 是否允许翻转图片
|
||||||
|
scalable: true,
|
||||||
|
|
||||||
|
// 是否启用过渡动画效果
|
||||||
|
transition: false,
|
||||||
|
|
||||||
|
// 是否启用全屏模式
|
||||||
|
fullscreen: false,
|
||||||
|
|
||||||
|
// 是否启用键盘快捷键
|
||||||
|
// 支持的快捷键：
|
||||||
|
// ← / →：上一张/下一张图片
|
||||||
|
// ↑ / ↓：放大/缩小
|
||||||
|
// Ctrl + ← / Ctrl + →：向左/向右旋转
|
||||||
|
// Space：切换1:1模式
|
||||||
|
// Esc：关闭查看器
|
||||||
|
keyboard: true,
|
||||||
|
|
||||||
|
// 背景遮罩层设置
|
||||||
|
// 'static'：点击背景不会关闭查看器
|
||||||
|
backdrop: 'static',
|
||||||
|
|
||||||
|
// 初始显示第几张图片（从0开始计数）
|
||||||
|
initialViewIndex: args.currentIndex || 0,
|
||||||
|
|
||||||
|
// 图片加载完成后的回调函数
|
||||||
|
viewed() {
|
||||||
|
loading.style.display = 'none';
|
||||||
|
},
|
||||||
|
|
||||||
|
// 查看器隐藏时的回调函数
|
||||||
|
hidden() {
|
||||||
|
window.close();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// 立即显示查看器
|
||||||
|
viewer.show();
|
||||||
|
|
||||||
|
// 监听键盘事件
|
||||||
|
document.addEventListener('keydown', (e) => {
|
||||||
|
if (e.key === 'Escape' && !document.fullscreenElement) {
|
||||||
|
window.close();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
9
electron/render/viewer/viewer.min.css
vendored
Normal file
9
electron/render/viewer/viewer.min.css
vendored
Normal file
File diff suppressed because one or more lines are too long
10
electron/render/viewer/viewer.min.js
vendored
Normal file
10
electron/render/viewer/viewer.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
@ -5,6 +5,7 @@
|
|||||||
<script>
|
<script>
|
||||||
import {mapState} from "vuex";
|
import {mapState} from "vuex";
|
||||||
import PreviewImage from "./index";
|
import PreviewImage from "./index";
|
||||||
|
import {getLanguage} from "../../language";
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: 'PreviewImageState',
|
name: 'PreviewImageState',
|
||||||
@ -31,7 +32,7 @@ export default {
|
|||||||
},
|
},
|
||||||
previewImageList(l) {
|
previewImageList(l) {
|
||||||
if (l.length > 0) {
|
if (l.length > 0) {
|
||||||
if ($A.isEEUiApp) {
|
if ($A.isEEUiApp || $A.isElectron) {
|
||||||
let position = Math.min(Math.max(this.$store.state.previewImageIndex, 0), this.$store.state.previewImageList.length - 1)
|
let position = Math.min(Math.max(this.$store.state.previewImageIndex, 0), this.$store.state.previewImageList.length - 1)
|
||||||
let paths = l.map(item => {
|
let paths = l.map(item => {
|
||||||
if ($A.isJson(item)) {
|
if ($A.isJson(item)) {
|
||||||
@ -61,22 +62,47 @@ export default {
|
|||||||
return /\.mp4$/i.test(src)
|
return /\.mp4$/i.test(src)
|
||||||
});
|
});
|
||||||
if (videoPath) {
|
if (videoPath) {
|
||||||
$A.eeuiAppSendMessage({
|
this.videoPreview(videoPath);
|
||||||
action: 'videoPreview',
|
} else {
|
||||||
path: videoPath
|
this.imagePreview(position, paths);
|
||||||
});
|
|
||||||
return
|
|
||||||
}
|
}
|
||||||
$A.eeuiAppSendMessage({
|
|
||||||
action: 'picturePreview',
|
|
||||||
position,
|
|
||||||
paths
|
|
||||||
});
|
|
||||||
} else {
|
} else {
|
||||||
this.show = true;
|
this.show = true;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
videoPreview(path) {
|
||||||
|
if ($A.isEEUiApp) {
|
||||||
|
$A.eeuiAppSendMessage({
|
||||||
|
action: 'videoPreview',
|
||||||
|
path
|
||||||
|
});
|
||||||
|
} else if ($A.isElectron) {
|
||||||
|
this.$Electron.sendMessage('openMediaViewer', {
|
||||||
|
type: 'video',
|
||||||
|
lang: getLanguage(),
|
||||||
|
video: path,
|
||||||
|
})
|
||||||
|
}
|
||||||
|
},
|
||||||
|
imagePreview(index, paths) {
|
||||||
|
if ($A.isEEUiApp) {
|
||||||
|
$A.eeuiAppSendMessage({
|
||||||
|
action: 'picturePreview',
|
||||||
|
position: index,
|
||||||
|
paths
|
||||||
|
});
|
||||||
|
} else if ($A.isElectron) {
|
||||||
|
this.$Electron.sendMessage('openMediaViewer', {
|
||||||
|
type: 'image',
|
||||||
|
lang: getLanguage(),
|
||||||
|
currentIndex: index,
|
||||||
|
images: paths,
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user