feat: Add support for dynamic thumbnails in Artplayer

The code changes introduce a new `art.thumbnails` property that allows for dynamic setting of thumbnails in Artplayer. This feature enhances the user experience by providing a visual preview of the video content.
zhw2590582 · Aug 15, 2024 · 52d9064 · 52d9064
1 parent 5655db4
commit 52d9064
Show file tree

Hide file tree

Showing 10 changed files with 260 additions and 110 deletions.
diff --git a/CHANGELOG_CN.md b/CHANGELOG_CN.md
@@ -9,6 +9,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 -   新增 `Artplayer.STYLE` 属性，返回播放器样式文本
 -   `art.screenshot('your-name')` 截图功能支持自定义文件名字
 -   `Artplayer.CONTEXTMENU` 为 `false` 时，不再隐藏默认右键菜单
+-   新增 `art.thumbnails` 属性，用于动态设置 `thumbnails`
 
 ## [5.1.6] - 2024-6-15
 

diff --git a/docs/uncompiled/artplayer/index.js b/docs/uncompiled/artplayer/index.js
diff --git a/docs/uncompiled/artplayer/index.js.map b/docs/uncompiled/artplayer/index.js.map
diff --git a/packages/artplayer-vitepress/docs/advanced/property.md b/packages/artplayer-vitepress/docs/advanced/property.md
@@ -940,4 +940,28 @@ art.on('ready', () => {
 		];
 	}, 3000);
 })
+```
+
+## `thumbnails`
+
+-   Type: `Setter/Getter`
+-   Parameter: `Object`
+
+动态设置缩略图
+
+<div className="run-code">▶ Run Code</div>
+
+```js
+var art = new Artplayer({
+	container: '.artplayer-app',
+	url: '/assets/sample/video.mp4',
+});
+
+art.on('ready', () => {
+    art.thumbnails = {
+        url: '/assets/sample/thumbnails.png',
+        number: 60,
+        column: 10,
+    };
+});
 ```
diff --git a/packages/artplayer/src/control/index.js b/packages/artplayer/src/control/index.js
@@ -81,15 +81,13 @@ export default class Control extends Component {
             );
         }
 
-        if (option.thumbnails.url && !option.isLive) {
-            this.add(
-                thumbnails({
-                    name: 'thumbnails',
-                    position: 'top',
-                    index: 20,
-                }),
-            );
-        }
+        this.add(
+            thumbnails({
+                name: 'thumbnails',
+                position: 'top',
+                index: 20,
+            }),
+        );
 
         this.add(
             playAndPause({

diff --git a/packages/artplayer/src/control/thumbnails.js b/packages/artplayer/src/control/thumbnails.js
@@ -1,72 +1,8 @@
-import { setStyle, isMobile } from '../utils';
-
 export default function thumbnails(options) {
     return (art) => ({
         ...options,
-        mounted: ($control) => {
-            const {
-                option,
-                events: { loadImg },
-                template: { $progress, $video },
-            } = art;
-
-            let timer = null;
-            let image = null;
-            let loading = false;
-            let isLoad = false;
-
-            function showThumbnails(posWidth) {
-                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', `${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 - width2 / 2) {
-                    setStyle($control, 'left', `${$progress.clientWidth - width2}px`);
-                } else {
-                    setStyle($control, 'left', `${posWidth - width2 / 2}px`);
-                }
-            }
-
-            art.on('setBar', async (type, percentage, event) => {
-                const isMobileDroging = type === 'played' && event && isMobile;
-
-                if (type === 'hover' || isMobileDroging) {
-                    if (!loading) {
-                        loading = true;
-                        image = await loadImg(option.thumbnails.url);
-                        isLoad = true;
-                    }
-
-                    if (!isLoad) return;
-
-                    const width = $progress.clientWidth * percentage;
-                    setStyle($control, 'display', 'flex');
-
-                    if (width > 0 && width < $progress.clientWidth) {
-                        showThumbnails(width);
-                    } else {
-                        if (!isMobile) {
-                            setStyle($control, 'display', 'none');
-                        }
-                    }
-
-                    if (isMobileDroging) {
-                        clearTimeout(timer);
-                        timer = setTimeout(() => {
-                            setStyle($control, 'display', 'none');
-                        }, 500);
-                    }
-                }
-            });
+        mounted: () => {
+            this.art.thumbnails = art.options.thumbnails;
         },
     });
 }
diff --git a/packages/artplayer/src/player/index.js b/packages/artplayer/src/player/index.js
@@ -30,6 +30,7 @@ import stateMix from './stateMix';
 import subtitleOffsetMix from './subtitleOffsetMix';
 import airplayMix from './airplayMix';
 import qualityMix from './qualityMix';
+import thumbnailsMix from './thumbnailsMix';
 import optionInit from './optionInit';
 import eventInit from './eventInit';
 
@@ -67,6 +68,7 @@ export default class Player {
         subtitleOffsetMix(art);
         airplayMix(art);
         qualityMix(art);
+        thumbnailsMix(art);
         eventInit(art);
         optionInit(art);
     }