github/dootask
1
0
Fork 0
mirror of https://github.com/kuaifan/dootask.git synced 2025-12-12 11:19:56 +00:00
Code Issues Packages Projects Releases Wiki Activity

perf: 优化客户端媒体浏览器

Browse Source
This commit is contained in:
kuaifan 2024-12-02 20:50:10 +08:00
parent 8afc1db72f
commit 65e75f974d
3 changed files with 336 additions and 340 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
electron/electron.js vendored
View File

@ -479,6 +479,7 @@ function createMediaWindow(args, type = 'image') {
height: args.height || 700, height: args.height || 700,
minWidth: 360, minWidth: 360,
minHeight: 360, minHeight: 360,
autoHideMenuBar: true,
webPreferences: { webPreferences: {
nodeIntegration: true, nodeIntegration: true,
contextIsolation: false, contextIsolation: false,

26
electron/render/video/index.html
View File

@ -3,7 +3,7 @@
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<title>Video</title> <title>Video</title>
<link rel="stylesheet" href="./plyr.css" /> <link rel="stylesheet" href="./plyr.css"/>
<style> <style>
html, body { html, body {
margin: 0; margin: 0;
@ -14,6 +14,7 @@
overflow: hidden; overflow: hidden;
user-select: none; user-select: none;
} }
#video-container { #video-container {
width: 100%; width: 100%;
height: 100%; height: 100%;
@ -21,37 +22,42 @@
justify-content: center; justify-content: center;
align-items: center; align-items: center;
} }
.plyr { .plyr {
width: 100%; width: 100%;
height: 100%; height: 100%;
} }
video { video {
width: 100%; width: 100%;
height: 100%; height: 100%;
} }
/* 自定义播放器主题色 */ /* 自定义播放器主题色 */
:root { :root {
--plyr-color-main: #409eff; --plyr-color-main: #409eff;
} }
/* 黑色背景主题 */ /* 黑色背景主题 */
.plyr--video { .plyr--video {
background: #000; background: #000;
} }
.plyr__control--overlaid { .plyr__control--overlaid {
background: rgba(64, 158, 255, 0.8); background: rgba(64, 158, 255, 0.8);
} }
</style> </style>
</head> </head>
<body> <body>
<div id="video-container"> <div id="video-container">
<video id="player" playsinline controls> <video id="player" playsinline controls>
Your browser does not support the video tag. Your browser does not support the video tag.
</video> </video>
</div> </div>
<script src="./plyr.polyfilled.js"></script> <script src="./plyr.polyfilled.js"></script>
<script> <script>
const { ipcRenderer } = require('electron'); const {ipcRenderer} = require('electron');
// 多语言翻译 // 多语言翻译
const translations = { const translations = {
@ -333,9 +339,9 @@
'fullscreen' // 全屏 'fullscreen' // 全屏
], ],
settings: ['captions', 'quality', 'speed', 'loop'], // 设置菜单选项 settings: ['captions', 'quality', 'speed', 'loop'], // 设置菜单选项
speed: { selected: 1, options: [0.5, 0.75, 1, 1.25, 1.5, 2] }, // 播放速度选项 speed: {selected: 1, options: [0.5, 0.75, 1, 1.25, 1.5, 2]}, // 播放速度选项
keyboard: { focused: true, global: true }, // 启用键盘快捷键 keyboard: {focused: true, global: true}, // 启用键盘快捷键
tooltips: { controls: true, seek: true }, // 显示工具提示 tooltips: {controls: true, seek: true}, // 显示工具提示
hideControls: true, // 自动隐藏控制栏 hideControls: true, // 自动隐藏控制栏
i18n: translations[currentLang] || translations['en'] // 设置语言 i18n: translations[currentLang] || translations['en'] // 设置语言
}); });
@ -361,6 +367,6 @@
window.close(); window.close();
} }
}); });
</script> </script>
</body> </body>
</html> </html>

51
electron/render/viewer/index.html
View File

@ -27,36 +27,29 @@
.viewer-close { .viewer-close {
display: none; 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> </style>
</head> </head>
<body> <body>
<div id="image-container"></div> <div id="image-container"></div>
<div class="loading"></div>
<script src="./viewer.min.js"></script> <script src="./viewer.min.js"></script>
<script> <script>
const {ipcRenderer} = require('electron'); const {ipcRenderer} = require('electron');
let viewer = null; 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 = { const titleTranslations = {
zh: '图片查看器', zh: '图片查看器',
@ -73,9 +66,6 @@
// 接收主进程发送的图片数据 // 接收主进程发送的图片数据
ipcRenderer.on('load-media', (event, args) => { ipcRenderer.on('load-media', (event, args) => {
const container = document.getElementById('image-container'); const container = document.getElementById('image-container');
const loading = document.querySelector('.loading');
loading.style.display = 'block';
container.innerHTML = ''; // 清空容器 container.innerHTML = ''; // 清空容器
// 更新网页标题 // 更新网页标题
@ -83,9 +73,10 @@
document.title = args.title || titleTranslations[currentLang] || titleTranslations['en']; document.title = args.title || titleTranslations[currentLang] || titleTranslations['en'];
// 创建图片元素 // 创建图片元素
args.images.forEach((src, index) => { args.images.forEach(src => {
const img = document.createElement('img'); const img = document.createElement('img');
img.src = src; img.src = thumbnailUrl(src);
img.setAttribute('data-original', src);
container.appendChild(img); container.appendChild(img);
}); });
@ -119,7 +110,7 @@
}, },
// 是否显示缩略图导航栏 // 是否显示缩略图导航栏
navbar: true, navbar: 2,
// 是否显示工具提示 // 是否显示工具提示
tooltip: true, tooltip: true,
@ -155,14 +146,12 @@
// 'static'：点击背景不会关闭查看器 // 'static'：点击背景不会关闭查看器
backdrop: 'static', backdrop: 'static',
// 使用url属性来加载原始图片
url: 'data-original',
// 初始显示第几张图片（从0开始计数） // 初始显示第几张图片（从0开始计数）
initialViewIndex: args.currentIndex || 0, initialViewIndex: args.currentIndex || 0,
// 图片加载完成后的回调函数
viewed() {
loading.style.display = 'none';
},
// 查看器隐藏时的回调函数 // 查看器隐藏时的回调函数
hidden() { hidden() {
window.close(); window.close();