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

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

@@ -0,0 +1,265 @@
+// modules are defined as an array
+// [ module function, map of requires ]
+//
+// map of requires is short require name -> numeric require
+//
+// anything defined in a previous bundle is accessed via the
+// orig method which is the require for previous bundles
+
+(function (modules, entry, mainEntry, parcelRequireName, globalName) {
+  /* eslint-disable no-undef */
+  var globalObject =
+    typeof globalThis !== 'undefined'
+      ? globalThis
+      : typeof self !== 'undefined'
+      ? self
+      : typeof window !== 'undefined'
+      ? window
+      : typeof global !== 'undefined'
+      ? global
+      : {};
+  /* eslint-enable no-undef */
+
+  // Save the require from previous bundle to this closure if any
+  var previousRequire =
+    typeof globalObject[parcelRequireName] === 'function' &&
+    globalObject[parcelRequireName];
+
+  var cache = previousRequire.cache || {};
+  // Do not use `require` to prevent Webpack from trying to bundle this call
+  var nodeRequire =
+    typeof module !== 'undefined' &&
+    typeof module.require === 'function' &&
+    module.require.bind(module);
+
+  function newRequire(name, jumped) {
+    if (!cache[name]) {
+      if (!modules[name]) {
+        // if we cannot find the module within our internal map or
+        // cache jump to the current global require ie. the last bundle
+        // that was added to the page.
+        var currentRequire =
+          typeof globalObject[parcelRequireName] === 'function' &&
+          globalObject[parcelRequireName];
+        if (!jumped && currentRequire) {
+          return currentRequire(name, true);
+        }
+
+        // If there are other bundles on this page the require from the
+        // previous one is saved to 'previousRequire'. Repeat this as
+        // many times as there are bundles until the module is found or
+        // we exhaust the require chain.
+        if (previousRequire) {
+          return previousRequire(name, true);
+        }
+
+        // Try the node require function if it exists.
+        if (nodeRequire && typeof name === 'string') {
+          return nodeRequire(name);
+        }
+
+        var err = new Error("Cannot find module '" + name + "'");
+        err.code = 'MODULE_NOT_FOUND';
+        throw err;
+      }
+
+      localRequire.resolve = resolve;
+      localRequire.cache = {};
+
+      var module = (cache[name] = new newRequire.Module(name));
+
+      modules[name][0].call(
+        module.exports,
+        localRequire,
+        module,
+        module.exports,
+        this
+      );
+    }
+
+    return cache[name].exports;
+
+    function localRequire(x) {
+      var res = localRequire.resolve(x);
+      return res === false ? {} : newRequire(res);
+    }
+
+    function resolve(x) {
+      var id = modules[name][1][x];
+      return id != null ? id : x;
+    }
+  }
+
+  function Module(moduleName) {
+    this.id = moduleName;
+    this.bundle = newRequire;
+    this.exports = {};
+  }
+
+  newRequire.isParcelRequire = true;
+  newRequire.Module = Module;
+  newRequire.modules = modules;
+  newRequire.cache = cache;
+  newRequire.parent = previousRequire;
+  newRequire.register = function (id, exports) {
+    modules[id] = [
+      function (require, module) {
+        module.exports = exports;
+      },
+      {},
+    ];
+  };
+
+  Object.defineProperty(newRequire, 'root', {
+    get: function () {
+      return globalObject[parcelRequireName];
+    },
+  });
+
+  globalObject[parcelRequireName] = newRequire;
+
+  for (var i = 0; i < entry.length; i++) {
+    newRequire(entry[i]);
+  }
+
+  if (mainEntry) {
+    // Expose entry point to Node, AMD or browser globals
+    // Based on https://github.com/ForbesLindesay/umd/blob/master/template.js
+    var mainExports = newRequire(mainEntry);
+
+    // CommonJS
+    if (typeof exports === 'object' && typeof module !== 'undefined') {
+      module.exports = mainExports;
+
+      // RequireJS
+    } else if (typeof define === 'function' && define.amd) {
+      define(function () {
+        return mainExports;
+      });
+
+      // <script>
+    } else if (globalName) {
+      this[globalName] = mainExports;
+    }
+  }
+})({"iXeaa":[function(require,module,exports) {
+var parcelHelpers = require("@parcel/transformer-js/src/esmodule-helpers.js");
+parcelHelpers.defineInteropFlag(exports);
+parcelHelpers.export(exports, "default", ()=>artplayerProxyCanvas);
+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;
+
+},{"@parcel/transformer-js/src/esmodule-helpers.js":"5dUr6"}],"5dUr6":[function(require,module,exports) {
+exports.interopDefault = function(a) {
+    return a && a.__esModule ? a : {
+        default: a
+    };
+};
+exports.defineInteropFlag = function(a) {
+    Object.defineProperty(a, "__esModule", {
+        value: true
+    });
+};
+exports.exportAll = function(source, dest) {
+    Object.keys(source).forEach(function(key) {
+        if (key === "default" || key === "__esModule" || Object.prototype.hasOwnProperty.call(dest, key)) return;
+        Object.defineProperty(dest, key, {
+            enumerable: true,
+            get: function() {
+                return source[key];
+            }
+        });
+    });
+    return dest;
+};
+exports.export = function(dest, destName, get) {
+    Object.defineProperty(dest, destName, {
+        enumerable: true,
+        get: get
+    });
+};
+
+},{}]},["iXeaa"], "iXeaa", "parcelRequire4dc0")
+
+//# sourceMappingURL=index.js.map