feat: Add artplayer-plugin-auto-thumbnail plugin

packages/artplayer-plugin-auto-thumbnail/README.md

@@ -0,0 +1,11 @@
+# artplayer-plugin-auto-thumbnail
+
+Auto thumbnail plugin for ArtPlayer
+
+## Demo
+
+[https://artplayer.org](https://artplayer.org/?libs=./uncompiled/artplayer-plugin-auto-thumbnail/index.js&example=auto.thumbnail)
+
+## License
+
+MIT © Harvey Zack

packages/artplayer-plugin-auto-thumbnail/package.json

@@ -0,0 +1,24 @@
+{
+    "license": "MIT",
+    "version": "1.0.0",
+    "name": "artplayer-plugin-auto-thumbnail",
+    "types": "types/artplayer-plugin-auto-thumbnail.d.ts",
+    "description": "auto-thumbnail plugin for ArtPlayer",
+    "main": "dist/artplayer-plugin-auto-thumbnail.js",
+    "legacy": "dist/artplayer-plugin-auto-thumbnail.legacy.js",
+    "author": "Harvey Zack <laozhaochaguan@gmail.com>",
+    "browserslist": "last 1 Chrome version",
+    "homepage": "https://artplayer.org",
+    "repository": {
+        "type": "git",
+        "url": "git+https://github.com/zhw2590582/ArtPlayer.git"
+    },
+    "bugs": {
+        "url": "https://github.com/zhw2590582/ArtPlayer/issues"
+    },
+    "keywords": [
+        "html5",
+        "video",
+        "player"
+    ]
+}

packages/artplayer-plugin-auto-thumbnail/src/index.js

@@ -0,0 +1,69 @@
+function create({ url, width, number }, callback) {
+    const video = document.createElement('video');
+    video.crossOrigin = 'anonymous';
+    video.src = url;
+
+    video.onloadedmetadata = () => {
+        const duration = video.duration;
+        const canvas = document.createElement('canvas');
+        const ctx = canvas.getContext('2d');
+        const height = Math.floor((width * video.videoHeight) / video.videoWidth);
+
+        canvas.width = width * 10;
+        canvas.height = height * Math.ceil(number / 10);
+
+        let loadedCount = 0;
+        let blobUrl = null;
+
+        function seekAndDraw(index) {
+            canvas.toBlob((blob) => {
+                URL.revokeObjectURL(blobUrl);
+                blobUrl = URL.createObjectURL(blob);
+
+                callback({
+                    url: blobUrl,
+                    height: height,
+                });
+            }, 'image/jpeg');
+
+            if (index >= number) return;
+            video.currentTime = (duration * index) / number;
+
+            video.onseeked = () => {
+                ctx.drawImage(video, (index % 10) * width, Math.floor(index / 10) * height, width, height);
+                loadedCount++;
+                seekAndDraw(index + 1);
+            };
+        }
+
+        seekAndDraw(0);
+    };
+}
+
+export default function artplayerPluginAutoThumbnail(option) {
+    return async (art) => {
+        art.on('video:loadedmetadata', () => {
+            const url = option.url || art.option.url;
+            const width = option.width || 160;
+            const number = option.number || 100;
+            const scale = option.scale || 1;
+            create({ url, width, number }, (config) => {
+                art.thumbnails = {
+                    ...config,
+                    column: 10,
+                    number,
+                    width,
+                    scale,
+                };
+            });
+        });
+
+        return {
+            name: 'artplayerPluginAutoThumbnail',
+        };
+    };
+}
+
+if (typeof window !== 'undefined') {
+    window['artplayerPluginAutoThumbnail'] = artplayerPluginAutoThumbnail;
+}

packages/artplayer-plugin-auto-thumbnail/types/artplayer-plugin-auto-thumbnail.d.ts

@@ -0,0 +1,17 @@
+import type Artplayer from 'artplayer';
+
+export = artplayerPluginAutoThumbnail;
+export as namespace artplayerPluginAutoThumbnail;
+
+type Option = {
+    url?: string;
+    width?: number;
+    height?: number;
+    scale?: number;
+};
+
+type Result = {
+    name: 'artplayerPluginAutoThumbnail';
+};
+
+declare const artplayerPluginAutoThumbnail: (option: Option) => (art: Artplayer) => Result;