chore: Update artplayer-proxy-canvas to support canvas proxy

packages/artplayer-proxy-canvas/README.md

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

packages/artplayer-proxy-canvas/package.json

@@ -0,0 +1,24 @@
+{
+  "license": "MIT",
+  "version": "1.0.0",
+  "name": "artplayer-proxy-canvas",
+  "types": "types/artplayer-proxy-canvas.d.ts",
+  "description": "canvas proxy for ArtPlayer",
+  "main": "dist/artplayer-proxy-canvas.js",
+  "legacy": "dist/artplayer-proxy-canvas.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-proxy-canvas/src/index.js

@@ -0,0 +1,101 @@
+export default function artplayerProxyCanvas(callback) {
+    return (art) => {
+        const { option, constructor } = art;
+        const { createElement, def } = constructor.utils;
+
+        const canvas = createElement('canvas');
+        const ctx = canvas.getContext('2d');
+        const video = createElement('video');
+
+        let animationFrame = null;
+        const { propertys, methods, prototypes, events } = constructor.config;
+        const keys = [...propertys, ...methods, ...prototypes];
+
+        keys.forEach((key) => {
+            def(canvas, key, {
+                get() {
+                    const value = video[key];
+                    return typeof value === 'function' ? value.bind(video) : value;
+                },
+                set(value) {
+                    video[key] = value;
+                },
+            });
+        });
+
+        setTimeout(() => {
+            for (let index = 0; index < events.length; index++) {
+                const event = events[index];
+                art.proxy(video, event, (event) => {
+                    art.emit(`video:${event.type}`, event);
+                });
+            }
+        });
+
+        let lastDrawTime = 0;
+        const drawFrame = (timestamp) => {
+            if (!video.paused && !video.ended) {
+                if (timestamp - lastDrawTime > 1000 / 30) {
+                    ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
+                    lastDrawTime = timestamp;
+                }
+                animationFrame = requestAnimationFrame(drawFrame);
+            }
+        };
+
+        const resize = () => {
+            const player = art.template?.$player;
+            if (!player || option.autoSize) return;
+
+            const aspectRatio = canvas.videoWidth / canvas.videoHeight;
+            const containerWidth = player.clientWidth;
+            const containerHeight = player.clientHeight;
+            const containerRatio = containerWidth / containerHeight;
+
+            let paddingLeft = 0;
+            let paddingTop = 0;
+
+            if (containerRatio > aspectRatio) {
+                const canvasWidth = containerHeight * aspectRatio;
+                paddingLeft = (containerWidth - canvasWidth) / 2;
+            } else {
+                const canvasHeight = containerWidth / aspectRatio;
+                paddingTop = (containerHeight - canvasHeight) / 2;
+            }
+
+            Object.assign(canvas.style, {
+                padding: `${paddingTop}px ${paddingLeft}px`,
+            });
+        };
+
+        art.on('video:loadedmetadata', () => {
+            canvas.width = video.videoWidth;
+            canvas.height = video.videoHeight;
+            resize();
+        });
+
+        art.on('video:play', () => {
+            console.log('video:play');
+            cancelAnimationFrame(animationFrame);
+            animationFrame = requestAnimationFrame(drawFrame);
+        });
+
+        art.on('video:pause', () => {
+            cancelAnimationFrame(animationFrame);
+        });
+
+        art.on('resize', resize);
+
+        if (typeof callback === 'function') {
+            callback.call(art, video, option.url, art);
+        } else {
+            video.src = option.url;
+        }
+
+        return canvas;
+    };
+}
+
+if (typeof window !== 'undefined') {
+    window['artplayerProxyCanvas'] = artplayerProxyCanvas;
+}

packages/artplayer-proxy-canvas/types/artplayer-proxy-canvas.d.ts

@@ -0,0 +1,10 @@
+import type Artplayer from 'artplayer';
+
+export = artplayerProxyCanvas;
+export as namespace artplayerProxyCanvas;
+
+type Option = (video: HTMLVideoElement, url: String, art: Artplayer) => void;
+
+type Result = HTMLCanvasElement;
+
+declare const artplayerProxyCanvas: (option: Option) => (art: Artplayer) => Result;