feat: Fix dropdown menu bug in dev.js and build.js

Author: zhw2590582

Diff for: CHANGELOG_CN.md

@@ -9,6 +9,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 -   优化 `setBar` 事件
 -   新增 `artplayerPluginChapter` 插件
 -   新增 `art.plugins.artplayerPluginDanmuku.load(target)` 参数，用于追加弹幕库
+-   修复 `artplayerPluginVttThumbnail` 在移动端不显示的问题
 -   修复弹幕插件样式，和字号百分比显示的 `bug`
 -   移动端也可以看到 `thumbnails` 了
 

Diff for: docs/uncompiled/artplayer-plugin-vtt-thumbnail/index.js

@@ -1,6 +1,6 @@
 {
     "license": "MIT",
-    "version": "1.0.0",
+    "version": "1.0.1",
     "name": "artplayer-plugin-vtt-thumbnail",
     "types": "types/artplayer-plugin-vtt-thumbnail.d.ts",
     "description": "vtt thumbnail plugin for ArtPlayer",
@@ -21,4 +21,4 @@
         "video",
         "player"
     ]
-}
+}

Diff for: docs/uncompiled/artplayer-plugin-vtt-thumbnail/index.js.map

@@ -4,20 +4,26 @@ export default function artplayerPluginVttThumbnail(option) {
     return async (art) => {
         const {
             constructor: {
-                utils: { setStyle, clamp },
+                utils: { setStyle, isMobile },
             },
             template: { $progress },
-            events: { proxy },
         } = art;
 
-        const vttArray = await getVttArray(option.vtt);
+        let timer = null;
+        const thumbnails = await getVttArray(option.vtt);
 
-        function getPosFromEvent(art, event) {
-            const { $progress } = art.template;
-            const { left } = $progress.getBoundingClientRect();
-            const width = clamp(event.pageX - left, 0, $progress.clientWidth);
-            const second = (width / $progress.clientWidth) * art.duration;
-            return { width, second };
+        function showThumbnails($control, find, width) {
+            setStyle($control, 'backgroundImage', `url(${find.url})`);
+            setStyle($control, 'height', `${find.h}px`);
+            setStyle($control, 'width', `${find.w}px`);
+            setStyle($control, 'backgroundPosition', `-${find.x}px -${find.y}px`);
+            if (width <= find.w / 2) {
+                setStyle($control, 'left', 0);
+            } else if (width > $progress.clientWidth - find.w / 2) {
+                setStyle($control, 'left', `${$progress.clientWidth - find.w}px`);
+            } else {
+                setStyle($control, 'left', `${width - find.w / 2}px`);
+            }
         }
 
         art.controls.add({
@@ -26,33 +32,31 @@ export default function artplayerPluginVttThumbnail(option) {
             index: 20,
             style: option.style || {},
             mounted($control) {
-                proxy($progress, 'mousemove', async (event) => {
-                    setStyle($control, 'display', 'block');
-                    const { second, width } = getPosFromEvent(art, event);
-                    const find = vttArray.find((item) => second >= item.start && second <= item.end);
-                    if (!find) return setStyle($control, 'display', 'none');
+                art.on('setBar', async (type, percentage, event) => {
+                    const isMobileDroging = type === 'played' && event && isMobile;
 
-                    setStyle($control, 'backgroundImage', `url(${find.url})`);
-                    setStyle($control, 'height', `${find.h}px`);
-                    setStyle($control, 'width', `${find.w}px`);
-                    setStyle($control, 'backgroundPosition', `-${find.x}px -${find.y}px`);
+                    if (type === 'hover' || isMobileDroging) {
+                        const width = $progress.clientWidth * percentage;
+                        const second = percentage * art.duration;
+                        setStyle($control, 'display', 'flex');
 
-                    if (width <= find.w / 2) {
-                        setStyle($control, 'left', 0);
-                    } else if (width > $progress.clientWidth - find.w / 2) {
-                        setStyle($control, 'left', `${$progress.clientWidth - find.w}px`);
-                    } else {
-                        setStyle($control, 'left', `${width - find.w / 2}px`);
-                    }
-                });
+                        const find = thumbnails.find((item) => second >= item.start && second <= item.end);
+                        if (!find) return setStyle($control, 'display', 'none');
 
-                proxy($progress, 'mouseleave', () => {
-                    setStyle($control, 'display', 'none');
-                });
+                        if (width > 0 && width < $progress.clientWidth) {
+                            showThumbnails($control, find, width);
+                        } else {
+                            if (!isMobile) {
+                                setStyle($control, 'display', 'none');
+                            }
+                        }
 
-                art.on('hover', (state) => {
-                    if (!state) {
-                        setStyle($control, 'display', 'none');
+                        if (isMobileDroging) {
+                            clearTimeout(timer);
+                            timer = setTimeout(() => {
+                                setStyle($control, 'display', 'none');
+                            }, 500);
+                        }
                     }
                 });
             },

Diff for: docs/uncompiled/artplayer-tool-thumbnail/index.js

@@ -111,7 +111,6 @@ async function runBuild() {
             choices: Object.keys(projects).map((name) => ({
                 title: name,
                 value: name,
-                description: projects[name],
             })),
             initial: 0,
         });

Diff for: docs/uncompiled/artplayer-tool-thumbnail/index.js.map

@@ -85,7 +85,6 @@ async function develop(name) {
             choices: Object.keys(projects).map((name) => ({
                 title: name,
                 value: name,
-                description: projects[name],
             })),
             initial: 0,
         });

Diff for: packages/artplayer-plugin-vtt-thumbnail/package.json

@@ -16,6 +16,7 @@ export function formatDate(date) {
 export function getProjects() {
     return glob
         .sync('packages/*')
+        .sort()
         .filter((item) => !item.endsWith('artplayer-template') && !item.endsWith('artplayer-vitepress'))
         .reduce((result, item) => {
             const name = item.split(/\/|\\/g).pop();