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,

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

@ -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,22 +22,27 @@
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);
} }

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();