x15904151985/ArtPlayer
1
0 Fork 0
mirror of https://github.com/zhw2590582/ArtPlayer.git synced 2026-10-25 16:11:20 -08:00
Code Issues Packages Projects Releases Wiki Activity

refactor: Update thumbnail scale in Artplayer

Browse Source
This commit is contained in:
Harvey Zack committed 2024-08-23 12:05:06 +08:00
1 parent 3a2e7addd9
commit 5764344aaf
12 files changed
+135 -88
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

packages/artplayer/src/player/thumbnailsMix.js
+7 -8
View File
@@ -1,9 +1,8 @@
import { def, setStyle, isMobile } from '../utils';
import { def, setStyle, isMobile, loadImg } from '../utils';
export default function thumbnailsMix(art) {
const {
option,
events: { loadImg },
template: { $progress, $video },
} = art;
@@ -24,14 +23,14 @@ export default function thumbnailsMix(art) {
const $thumbnails = art.controls?.thumbnails;
if (!$thumbnails) return;
const { url, number, column, width, height } = option.thumbnails;
const width2 = width || image.naturalWidth / column;
const height2 = height || width2 / ($video.videoWidth / $video.videoHeight);
const { number, column, width, height, scale } = option.thumbnails;
const width2 = width * scale || image.naturalWidth / column;
const height2 = height * scale || width2 / ($video.videoWidth / $video.videoHeight);
const perWidth = $progress.clientWidth / number;
const perIndex = Math.floor(posWidth / perWidth);
const yIndex = Math.ceil(perIndex / column) - 1;
const xIndex = perIndex % column || column - 1;
setStyle($thumbnails, 'backgroundImage', `url(${url})`);
setStyle($thumbnails, 'backgroundImage', `url(${image.src})`);
setStyle($thumbnails, 'height', `${height2}px`);
setStyle($thumbnails, 'width', `${width2}px`);
setStyle($thumbnails, 'backgroundPosition', `-${xIndex * width2}px -${yIndex * height2}px`);
@@ -46,7 +45,7 @@ export default function thumbnailsMix(art) {
art.on('setBar', async (type, percentage, event) => {
const $thumbnails = art.controls?.thumbnails;
const { url } = option.thumbnails;
const { url, scale } = option.thumbnails;
if (!$thumbnails || !url) return;
const isMobileDroging = type === 'played' && event && isMobile;
@@ -54,7 +53,7 @@ export default function thumbnailsMix(art) {
if (type === 'hover' || isMobileDroging) {
if (!loading) {
loading = true;
image = await loadImg(url);
image = await loadImg(url, scale);
isLoad = true;
}