refactor: simplify artplayerProxyCanvas implementation and improve event handling

docs/uncompiled/artplayer-proxy-canvas/index.js

@@ -142,61 +142,40 @@
       this[globalName] = mainExports;
     }
   }
-})({"iXeaa":[function(require,module,exports) {
+})({"bBRui":[function(require,module,exports) {
 var parcelHelpers = require("@parcel/transformer-js/src/esmodule-helpers.js");
 parcelHelpers.defineInteropFlag(exports);
 parcelHelpers.export(exports, "default", ()=>artplayerProxyCanvas);
 function artplayerProxyCanvas() {
     return (art)=>{
-        const { option, constructor } = art;
-        const { createElement, def } = constructor.utils;
-        let animationId = null;
+        const { constructor } = art;
+        const { createElement } = constructor.utils;
         const canvas = createElement("canvas");
-        const ctx = canvas.getContext("2d");
         const video = createElement("video");
-        const canvasProperties = {};
-        const canvasKeys = [
-            "width",
-            "height"
-        ];
-        const { propertys, methods, prototypes, events } = constructor.config;
-        const videoKeys = [
-            ...propertys,
-            ...methods,
-            ...prototypes
-        ];
-        initCanvasProperties();
-        proxyVideoToCanvas();
+        const ctx = canvas.getContext("2d");
+        let animationId = null;
+        const originalCanvasMethods = {};
+        for(const prop in canvas)if (typeof canvas[prop] === "function") originalCanvasMethods[prop] = canvas[prop].bind(canvas);
+        for(const prop in video)if (!(prop in canvas)) Object.defineProperty(canvas, prop, {
+            get () {
+                const value = video[prop];
+                return typeof value === "function" ? value.bind(video) : value;
+            },
+            set (value) {
+                video[prop] = value;
+            },
+            configurable: true,
+            enumerable: true
+        });
+        for(const prop in originalCanvasMethods)canvas[prop] = function(...args) {
+            if (prop in originalCanvasMethods) return originalCanvasMethods[prop](...args);
+            return video[prop].apply(video, args);
+        };
         setupEventListeners();
         setupArtPlayerEvents();
         return canvas;
-        function initCanvasProperties() {
-            canvasKeys.forEach((prop)=>{
-                canvasProperties[prop] = Object.getOwnPropertyDescriptor(HTMLCanvasElement.prototype, prop);
-            });
-        }
-        function proxyVideoToCanvas() {
-            videoKeys.forEach((key)=>{
-                if (canvasKeys.includes(key)) def(canvas, key, {
-                    get () {
-                        return canvasProperties[key].get.call(this);
-                    },
-                    set (value) {
-                        canvasProperties[key].set.call(this, value);
-                    }
-                });
-                else def(canvas, key, {
-                    get () {
-                        const value = video[key];
-                        return typeof value === "function" ? value.bind(video) : value;
-                    },
-                    set (value) {
-                        video[key] = value;
-                    }
-                });
-            });
-        }
         function setupEventListeners() {
+            const { events } = constructor.config;
             setTimeout(()=>{
                 events.forEach((event)=>{
                     art.proxy(video, event, (event)=>{
@@ -223,7 +202,7 @@ function artplayerProxyCanvas() {
         }
         function resize() {
             const player = art.template?.$player;
-            if (!player || option.autoSize) return;
+            if (!player || art.option.autoSize) return;
             const aspectRatio = video.videoWidth / video.videoHeight;
             const containerWidth = player.clientWidth;
             const containerHeight = player.clientHeight;
@@ -245,13 +224,13 @@ function artplayerProxyCanvas() {
             });
         }
         function setupArtPlayerEvents() {
-            art.on("video:loadedmetadata", async ()=>{
+            art.on("video:loadedmetadata", ()=>{
                 canvas.width = video.videoWidth;
                 canvas.height = video.videoHeight;
             });
             art.on("video:play", ()=>{
                 cancelAnimationFrame(animationId);
-                animationId = requestAnimationFrame(animation);
+                animation();
             });
             art.on("video:pause", ()=>{
                 cancelAnimationFrame(animationId);
@@ -268,7 +247,7 @@ function artplayerProxyCanvas() {
 }
 if (typeof window !== "undefined") window["artplayerProxyCanvas"] = artplayerProxyCanvas;
 
-},{"@parcel/transformer-js/src/esmodule-helpers.js":"5dUr6"}],"5dUr6":[function(require,module,exports) {
+},{"@parcel/transformer-js/src/esmodule-helpers.js":"kBreb"}],"kBreb":[function(require,module,exports) {
 exports.interopDefault = function(a) {
     return a && a.__esModule ? a : {
         default: a
@@ -298,6 +277,6 @@ exports.export = function(dest, destName, get) {
     });
 };
 
-},{}]},["iXeaa"], "iXeaa", "parcelRequire4dc0")
+},{}]},["bBRui"], "bBRui", "parcelRequire94c2")
 
 //# sourceMappingURL=index.js.map