mirror of
https://github.com/kuaifan/dootask.git
synced 2025-12-12 03:01:12 +00:00
perf: 优化客户端媒体浏览器
This commit is contained in:
kuaifan
parent
8afc1db72f
commit
65e75f974d
1
electron/electron.js
vendored
1
electron/electron.js
vendored
@ -479,6 +479,7 @@ function createMediaWindow(args, type = 'image') {
|
||||
height: args.height || 700,
|
||||
minWidth: 360,
|
||||
minHeight: 360,
|
||||
autoHideMenuBar: true,
|
||||
webPreferences: {
|
||||
nodeIntegration: true,
|
||||
contextIsolation: false,
|
||||
|
||||
@ -3,7 +3,7 @@
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Video</title>
|
||||
<link rel="stylesheet" href="./plyr.css" />
|
||||
<link rel="stylesheet" href="./plyr.css"/>
|
||||
<style>
|
||||
html, body {
|
||||
margin: 0;
|
||||
@ -14,6 +14,7 @@
|
||||
overflow: hidden;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
#video-container {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
@ -21,37 +22,42 @@
|
||||
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">
|
||||
<div id="video-container">
|
||||
<video id="player" playsinline controls>
|
||||
Your browser does not support the video tag.
|
||||
</video>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="./plyr.polyfilled.js"></script>
|
||||
<script>
|
||||
const { ipcRenderer } = require('electron');
|
||||
<script src="./plyr.polyfilled.js"></script>
|
||||
<script>
|
||||
const {ipcRenderer} = require('electron');
|
||||
|
||||
// 多语言翻译
|
||||
const translations = {
|
||||
@ -333,9 +339,9 @@
|
||||
'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 }, // 显示工具提示
|
||||
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'] // 设置语言
|
||||
});
|
||||
@ -361,6 +367,6 @@
|
||||
window.close();
|
||||
}
|
||||
});
|
||||
</script>
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -27,36 +27,29 @@
|
||||
.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 thumbnailUrl = (url) => {
|
||||
const crops = {
|
||||
ratio: 3,
|
||||
percentage: '320x0'
|
||||
}
|
||||
url = `${url}`
|
||||
.replace(/_thumb\.(png|jpg|jpeg)$/, '')
|
||||
.replace(/\/crop\/([^\/]+)$/, '')
|
||||
return url + "/crop/" + Object.keys(crops).map(key => {
|
||||
return `${key}:${crops[key]}`
|
||||
}).join(",")
|
||||
}
|
||||
|
||||
// 标题翻译
|
||||
const titleTranslations = {
|
||||
zh: '图片查看器',
|
||||
@ -73,9 +66,6 @@
|
||||
// 接收主进程发送的图片数据
|
||||
ipcRenderer.on('load-media', (event, args) => {
|
||||
const container = document.getElementById('image-container');
|
||||
const loading = document.querySelector('.loading');
|
||||
|
||||
loading.style.display = 'block';
|
||||
container.innerHTML = ''; // 清空容器
|
||||
|
||||
// 更新网页标题
|
||||
@ -83,9 +73,10 @@
|
||||
document.title = args.title || titleTranslations[currentLang] || titleTranslations['en'];
|
||||
|
||||
// 创建图片元素
|
||||
args.images.forEach((src, index) => {
|
||||
args.images.forEach(src => {
|
||||
const img = document.createElement('img');
|
||||
img.src = src;
|
||||
img.src = thumbnailUrl(src);
|
||||
img.setAttribute('data-original', src);
|
||||
container.appendChild(img);
|
||||
});
|
||||
|
||||
@ -119,7 +110,7 @@
|
||||
},
|
||||
|
||||
// 是否显示缩略图导航栏
|
||||
navbar: true,
|
||||
navbar: 2,
|
||||
|
||||
// 是否显示工具提示
|
||||
tooltip: true,
|
||||
@ -155,14 +146,12 @@
|
||||
// 'static'：点击背景不会关闭查看器
|
||||
backdrop: 'static',
|
||||
|
||||
// 使用url属性来加载原始图片
|
||||
url: 'data-original',
|
||||
|
||||
// 初始显示第几张图片（从0开始计数）
|
||||
initialViewIndex: args.currentIndex || 0,
|
||||
|
||||
// 图片加载完成后的回调函数
|
||||
viewed() {
|
||||
loading.style.display = 'none';
|
||||
},
|
||||
|
||||
// 查看器隐藏时的回调函数
|
||||
hidden() {
|
||||
window.close();
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user