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

Update thumbnails.js

Browse Source
This commit is contained in:
Harvey Zack committed 2022-07-18 21:33:08 +08:00
1 parent 9f1971f7d6
commit e6b4669ae9
1 file changed
+10 -10
Download Patch File Download Diff File Expand all files Collapse all files
packages/artplayer/src/control/thumbnails.js
+10 -10
View File
@@ -17,23 +17,23 @@ export default function thumbnails(options) {
function showThumbnails(event) {
const { width: posWidth } = getPosFromEvent(art, event);
const { url, number, column } = option.thumbnails;
const width = image.naturalWidth / column;
const height = width / ($video.videoWidth / $video.videoHeight);
const { url, number, column, width, height } = option.thumbnails;
const width2 = width || image.naturalWidth / column;
const height2 = height || 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($control, 'backgroundImage', `url(${url})`);
setStyle($control, 'height', `${height}px`);
setStyle($control, 'width', `${width}px`);
setStyle($control, 'backgroundPosition', `-${xIndex * width}px -${yIndex * height}px`);
if (posWidth <= width / 2) {
setStyle($control, 'height', `${height2}px`);
setStyle($control, 'width', `${width2}px`);
setStyle($control, 'backgroundPosition', `-${xIndex * width2}px -${yIndex * height2}px`);
if (posWidth <= width2 / 2) {
setStyle($control, 'left', 0);
} else if (posWidth > $progress.clientWidth - width / 2) {
setStyle($control, 'left', `${$progress.clientWidth - width}px`);
} else if (posWidth > $progress.clientWidth - width2 / 2) {
setStyle($control, 'left', `${$progress.clientWidth - width2}px`);
} else {
setStyle($control, 'left', `${posWidth - width / 2}px`);
setStyle($control, 'left', `${posWidth - width2 / 2}px`);
}
}