fix thumbnails option

packages/artplayer-document/docs/en/Options.md

@@ -922,8 +922,6 @@ Set a preview map on the progress bar
 | -------- | -------- | -------------- |
 | `url`    | `String` | Preview url    |
 | `number` | `Number` | Preview number |
-| `width`  | `Number` | Preview width  |
-| `height` | `Number` | Preview height |
 | `column` | `Number` | Preview column |
 
 <div className="run-code">▶ Run Code</div>
@@ -935,8 +933,6 @@ var art = new Artplayer({
     thumbnails: {
         url: '/assets/sample/thumbnails.png',
         number: 100,
-        width: 160,
-        height: 90,
         column: 10,
     },
 });

packages/artplayer-document/docs/zh-cn/Options.md

@@ -923,8 +923,6 @@ var art = new Artplayer({
 | -------- | -------- | ---------- |
 | `url`    | `String` | 预览图地址 |
 | `number` | `Number` | 预览图数量 |
-| `width`  | `Number` | 预览图宽度 |
-| `height` | `Number` | 预览图高度 |
 | `column` | `Number` | 预览图列数 |
 
 <div className="run-code">▶ Run Code</div>
@@ -936,8 +934,6 @@ var art = new Artplayer({
     thumbnails: {
         url: '/assets/sample/thumbnails.png',
         number: 100,
-        width: 160,
-        height: 90,
         column: 10,
     },
 });

packages/artplayer/src/control/thumbnails.js

@@ -7,16 +7,19 @@ export default function thumbnails(options) {
         mounted: ($control) => {
             const {
                 option,
-                template: { $progress },
+                template: { $progress, $video },
                 events: { proxy, loadImg },
             } = art;
 
+            let image = null;
             let loading = false;
             let isLoad = false;
 
             function showThumbnails(event) {
                 const { width: posWidth } = getPosFromEvent(art, event);
-                const { url, height, width, number, column } = option.thumbnails;
+                const { url, number, column } = option.thumbnails;
+                const width = image.naturalWidth / column;
+                const height = width / ($video.videoWidth / $video.videoHeight);
                 const perWidth = $progress.clientWidth / number;
                 const perIndex = Math.floor(posWidth / perWidth);
                 const yIndex = Math.ceil(perIndex / column) - 1;
@@ -37,7 +40,8 @@ export default function thumbnails(options) {
             proxy($progress, 'mousemove', (event) => {
                 if (!loading) {
                     loading = true;
-                    loadImg(option.thumbnails.url).then(() => {
+                    loadImg(option.thumbnails.url).then((img) => {
+                        image = img;
                         isLoad = true;
                     });
                 }

packages/artplayer/src/index.js

@@ -156,8 +156,6 @@ export default class Artplayer extends Emitter {
             thumbnails: {
                 url: '',
                 number: 60,
-                width: 160,
-                height: 90,
                 column: 10,
             },
             subtitle: {

packages/artplayer/src/scheme/index.js

@@ -95,8 +95,6 @@ export default {
     thumbnails: {
         url: s,
         number: n,
-        width: n,
-        height: n,
         column: n,
     },
     subtitle: {

packages/artplayer/types/artplayer.d.ts

@@ -386,16 +386,6 @@ type Option = {
          */
         number?: number;
 
-        /**
-         * The thumbnail item width
-         */
-        width?: number;
-
-        /**
-         * The thumbnail item height
-         */
-        height?: number;
-
         /**
          * The thumbnail column size
          */