refactor: Update thumbnail scale in Artplayer

packages/artplayer-vitepress/docs/en/start/option.md

@@ -412,13 +412,13 @@ var art = new Artplayer({
 });
 ```
 
-| Hotkey  | Description          |
-| ------- | --------------------- |
-| `↑`     | Increase volume       |
-| `↓`     | Decrease volume       |
-| `←`     | Fast forward video    |
-| `→`     | Rewind video          |
-| `space` | Toggle play/pause     |
+| Hotkey  | Description        |
+| ------- | ------------------ |
+| `↑`     | Increase volume    |
+| `↓`     | Decrease volume    |
+| `←`     | Fast forward video |
+| `→`     | Rewind video       |
+| `space` | Toggle play/pause  |
 
 :::warning Tip
 
@@ -734,11 +734,11 @@ var art = new Artplayer({
 
 Whether to show the `quality selection` list in the bottom control bar
 
-| Property   | Type      | Description    |
-| ---------- | --------- | -------------- |
-| `default`  | `Boolean` | Default quality|
-| `html`     | `String`  | Quality name   |
-| `url`      | `String`  | Quality URL    |
+| Property  | Type      | Description     |
+| --------- | --------- | --------------- |
+| `default` | `Boolean` | Default quality |
+| `html`    | `String`  | Quality name    |
+| `url`     | `String`  | Quality URL     |
 
 <div className="run-code">▶ Run Code</div>
 
@@ -766,10 +766,10 @@ var art = new Artplayer({
 
 Show `highlight information` on the progress bar
 
-| Property | Type     | Description          |
-| -------- | -------- | -------------------- |
-| `time`   | `Number` | Highlight time (in seconds)|
-| `text`   | `String` | Highlight text       |
+| Property | Type     | Description                 |
+| -------- | -------- | --------------------------- |
+| `time`   | `Number` | Highlight time (in seconds) |
+| `text`   | `String` | Highlight text              |
 
 <div className="run-code">▶ Run Code</div>
 
@@ -836,13 +836,14 @@ var art = new Artplayer({
 
 Set `thumbnails` on the progress bar
 
-| Property | Type     | Description         |
-| -------- | -------- | ------------------- |
-| `url`    | `String` | Thumbnail URL       |
-| `number` | `Number` | Number of thumbnails|
-| `column` | `Number` | Columns of thumbnails|
-| `width`  | `Number` | Thumbnail width     |
-| `height` | `Number` | Thumbnail height    |
+| Property | Type     | Description           |
+| -------- | -------- | --------------------- |
+| `url`    | `String` | Thumbnail URL         |
+| `number` | `Number` | Number of thumbnails  |
+| `column` | `Number` | Columns of thumbnails |
+| `width`  | `Number` | Thumbnail width       |
+| `height` | `Number` | Thumbnail height      |
+| `scale`  | `Number` | Thumbnail scale       |
 
 <div className="run-code">▶ Run Code</div>
 
@@ -870,11 +871,11 @@ var art = new Artplayer({
 
 Set the video subtitles, supporting subtitle formats: `vtt`, `srt`, `ass`
 
-| Property    | Type       | Description                          |
-| ----------- | ---------- | ----------------------------------- |
-| `name`      | `String`   | Subtitle name                       |
-| `url`       | `String`   | Subtitle URL                        |
-| `type`      | `String`   | Subtitle type, options: `vtt`, `srt`, `ass` |
+| Property | Type     | Description                                 |
+| -------- | -------- | ------------------------------------------- |
+| `name`   | `String` | Subtitle name                               |
+| `url`    | `String` | Subtitle URL                                |
+| `type`   | `String` | Subtitle type, options: `vtt`, `srt`, `ass` |
 
 | `style`     | `Object`   | Subtitle style                      |
 | `encoding`  | `String`   | Subtitle encoding, default `utf-8`  |

packages/artplayer-vitepress/docs/start/option.md

@@ -853,6 +853,7 @@ var art = new Artplayer({
 | `column` | `Number` | 预览图列数 |
 | `width`  | `Number` | 预览图宽度 |
 | `height` | `Number` | 预览图高度 |
+| `scale`  | `Number` | 预览图缩放 |
 
 <div className="run-code">▶ Run Code</div>
 
@@ -883,7 +884,7 @@ var art = new Artplayer({
 
 | 属性        | 类型       | 描述                                |
 | ----------- | ---------- | ----------------------------------- |
-| `name`       | `String`   | 字幕名字                            |
+| `name`      | `String`   | 字幕名字                            |
 | `url`       | `String`   | 字幕地址                            |
 | `type`      | `String`   | 字幕类型，可选 `vtt`, `srt`, `ass`  |
 | `style`     | `Object`   | 字幕样式                            |

packages/artplayer/src/events/index.js

@@ -1,4 +1,3 @@
-import { ArtPlayerError } from '../utils/error';
 import clickInit from './clickInit';
 import hoverInit from './hoverInit';
 import moveInit from './moveInit';
@@ -13,7 +12,6 @@ export default class Events {
         this.destroyEvents = [];
         this.proxy = this.proxy.bind(this);
         this.hover = this.hover.bind(this);
-        this.loadImg = this.loadImg.bind(this);
 
         clickInit(art, this);
         hoverInit(art, this);
@@ -45,28 +43,6 @@ export default class Events {
         }
     }
 
-    loadImg(img) {
-        return new Promise((resolve, reject) => {
-            let image;
-
-            if (img instanceof HTMLImageElement) {
-                image = img;
-            } else if (typeof img === 'string') {
-                image = new Image();
-                image.src = img;
-            } else {
-                return reject(new ArtPlayerError('Unable to get Image'));
-            }
-
-            if (image.complete) {
-                return resolve(image);
-            }
-
-            this.proxy(image, 'load', () => resolve(image));
-            this.proxy(image, 'error', () => reject(new ArtPlayerError(`Failed to load Image: ${image.src}`)));
-        });
-    }
-
     remove(destroyEvent) {
         const index = this.destroyEvents.indexOf(destroyEvent);
         if (index > -1) {

packages/artplayer/src/index.js

@@ -170,6 +170,7 @@ export default class Artplayer extends Emitter {
                 column: 10,
                 width: 0,
                 height: 0,
+                scale: 1,
             },
             subtitle: {
                 url: '',

packages/artplayer/src/player/thumbnailsMix.js

@@ -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;
             }
 

packages/artplayer/src/scheme/index.js

@@ -104,6 +104,7 @@ export default {
         column: n,
         width: n,
         height: n,
+        scale: n,
     },
     subtitle: {
         url: s,

packages/artplayer/src/utils/dom.js

@@ -117,3 +117,44 @@ export function supportsFlex() {
 export function getRect(el) {
     return el.getBoundingClientRect();
 }
+
+export function loadImg(imageUrl, scale) {
+    return new Promise((resolve, reject) => {
+        const img = new Image();
+        img.crossOrigin = 'Anonymous';
+
+        img.onload = function () {
+            if (!scale || scale === 1) {
+                resolve(img);
+            } else {
+                const canvas = document.createElement('canvas');
+                const ctx = canvas.getContext('2d');
+                canvas.width = img.width * scale;
+                canvas.height = img.height * scale;
+                ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
+
+                canvas.toBlob((blob) => {
+                    const blobUrl = URL.createObjectURL(blob);
+                    const scaledImg = new Image();
+
+                    scaledImg.onload = function () {
+                        resolve(scaledImg);
+                    };
+
+                    scaledImg.onerror = function () {
+                        URL.revokeObjectURL(blobUrl);
+                        reject(new Error(`Image load failed: ${imageUrl}`));
+                    };
+
+                    scaledImg.src = blobUrl;
+                });
+            }
+        };
+
+        img.onerror = function () {
+            reject(new Error(`Image load failed: ${imageUrl}`));
+        };
+
+        img.src = imageUrl;
+    });
+}

packages/artplayer/types/option.d.ts

@@ -34,6 +34,11 @@ export type Thumbnails = {
      * The thumbnail height
      */
     height?: number;
+
+    /**
+     * The thumbnail scale
+     */
+    scale?: number;
 };
 
 export type Option = {