From e6b4669ae9d51bc1caa5d63de29a1dd4c7bddab1 Mon Sep 17 00:00:00 2001 From: Harvey Zack Date: Mon, 18 Jul 2022 21:33:08 +0800 Subject: [PATCH] Update thumbnails.js --- packages/artplayer/src/control/thumbnails.js | 20 ++++++++++---------- 1 file changed, 10 insertions(+), 10 deletions(-) diff --git a/packages/artplayer/src/control/thumbnails.js b/packages/artplayer/src/control/thumbnails.js index 21213a7a2..f73836cc2 100644 --- a/packages/artplayer/src/control/thumbnails.js +++ b/packages/artplayer/src/control/thumbnails.js @@ -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`); } }