refactor: Update video element in Artplayer to support custom canvas or video

packages/artplayer-plugin-canvas/src/Extension.js

@@ -1,65 +0,0 @@
-export default class Extension {
-    constructor(canvas) {
-        this.canvas = canvas;
-        this.methods = {};
-        this.listeners = {};
-        this.properties = {};
-
-        const handler = {
-            get: (target, prop) => {
-                if (prop in target.properties) {
-                    return target.properties[prop];
-                }
-                if (prop in target.methods) {
-                    return target.methods[prop];
-                }
-                if (prop === 'addEventListener') {
-                    return target.addEventListener.bind(target);
-                }
-                if (prop === 'removeEventListener') {
-                    return target.removeEventListener.bind(target);
-                }
-                if (prop === 'getOriginalCanvas') {
-                    return () => target.canvas;
-                }
-                return target.canvas[prop];
-            },
-            set: (target, prop, value) => {
-                if (prop in target.canvas) {
-                    target.canvas[prop] = value;
-                } else {
-                    target.properties[prop] = value;
-                }
-                return true;
-            },
-        };
-
-        handler[Symbol.hasInstance] = (instance) => {
-            return instance instanceof HTMLCanvasElement || instance === this.proxy;
-        };
-
-        this.proxy = new Proxy(this, handler);
-
-        return this.proxy;
-    }
-
-    addEventListener(type, listener, options) {
-        if (!this.listeners[type]) {
-            this.listeners[type] = [];
-            this.canvas.addEventListener(
-                type,
-                (event) => {
-                    this.listeners[type].forEach((l) => l(event));
-                },
-                options,
-            );
-        }
-        this.listeners[type].push(listener);
-    }
-
-    removeEventListener(type, listener) {
-        if (this.listeners[type]) {
-            this.listeners[type] = this.listeners[type].filter((l) => l !== listener);
-        }
-    }
-}

packages/artplayer-plugin-canvas/src/index.js

@@ -1,98 +0,0 @@
-export default class ArtplayerPluginCanvas extends HTMLCanvasElement {
-    constructor(art) {
-        super();
-
-        this.art = art;
-        console.log(art);
-
-        this._muted = false;
-        this._volume = 1;
-        this._src = '';
-        this._currentTime = 0;
-        this._playbackRate = 1;
-
-        this.loop = false;
-        this.ended = false;
-        this.paused = true;
-        this.readyState = 0;
-        this.videoWidth = 0;
-        this.videoHeight = 0;
-        this.autoplay = false;
-        this.duration = NaN;
-
-        this.buffered = {
-            length: 0,
-            start: () => 0,
-            end: () => 0,
-        };
-
-        this.textTracks = [{ activeCues: [] }];
-    }
-
-    get muted() {
-        console.log('get muted');
-        return this._muted;
-    }
-
-    set muted(muted) {
-        console.log('set muted');
-        this._muted = muted;
-    }
-
-    get volume() {
-        console.log('get volume');
-        return this._volume;
-    }
-
-    set volume(percentage) {
-        console.log('set volume');
-        this._volume = percentage;
-    }
-
-    get src() {
-        console.log('get src');
-        return this._src;
-    }
-
-    set src(newSrc) {
-        console.log('set src');
-        this._src = newSrc;
-    }
-
-    get currentTime() {
-        console.log('get currentTime');
-        return this._currentTime;
-    }
-
-    set currentTime(time) {
-        console.log('set currentTime');
-        this._currentTime = time;
-    }
-
-    get playbackRate() {
-        console.log('get playbackRate');
-        return this._playbackRate;
-    }
-
-    set playbackRate(rate) {
-        console.log('set playbackRate');
-        this._playbackRate = rate;
-    }
-
-    async play() {
-        console.log('play');
-        return true;
-    }
-
-    pause() {
-        console.log('pause');
-    }
-}
-
-if (typeof window !== 'undefined') {
-    window['ArtplayerPluginCanvas'] = ArtplayerPluginCanvas;
-
-    if (!customElements.get('art-plugin-canvas')) {
-        customElements.define('art-plugin-canvas', ArtplayerPluginCanvas, { extends: 'canvas' });
-    }
-}

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

@@ -1,14 +0,0 @@
-import type Artplayer from 'artplayer';
-
-export = ArtplayerPluginCanvas;
-export as namespace ArtplayerPluginCanvas;
-
-type Option = {
-    //
-};
-
-type Result = {
-    name: 'ArtplayerPluginCanvas';
-};
-
-declare const ArtplayerPluginCanvas: (option: Option) => (art: Artplayer) => Result;

packages/artplayer-plugin-vast/src/index.js

@@ -22,5 +22,5 @@ if (typeof document !== 'undefined') {
 }
 
 if (typeof window !== 'undefined') {
-    window['ArtplayerPluginVast'] = artplayerPluginVast;
+    window['artplayerPluginVast'] = artplayerPluginVast;
 }

packages/artplayer-proxy-libmedia/README.md

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

packages/artplayer-proxy-libmedia/package.json

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

@@ -0,0 +1,9 @@
+export default function artplayerProxyLibmedia(option) {
+    return (art) => {
+        return document.createElement('video');
+    };
+}
+
+if (typeof window !== 'undefined') {
+    window['artplayerProxyLibmedia'] = artplayerProxyLibmedia;
+}

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

@@ -0,0 +1,14 @@
+import type Artplayer from 'artplayer';
+
+export = artplayerProxyLibmedia;
+export as namespace artplayerProxyLibmedia;
+
+type Option = {
+    //
+};
+
+type Result = {
+    name: 'artplayerProxyLibmedia';
+};
+
+declare const artplayerProxyLibmedia: (option: Option) => (art: Artplayer) => Result;

packages/artplayer-proxy-webav/README.md

@@ -1,10 +1,10 @@
-# artplayer-plugin-canvas
+# artplayer-proxy-webav
 
-canvas plugin for ArtPlayer
+webav proxy for ArtPlayer
 
 ## Demo
 
-[https://artplayer.org](https://artplayer.org/?libs=./uncompiled/artplayer-plugin-canvas/index.js&example=canvas)
+[https://artplayer.org](https://artplayer.org/?libs=./uncompiled/artplayer-proxy-webav/index.js&example=webav)
 
 ## License
 

packages/artplayer-proxy-webav/package.json

@@ -1,11 +1,11 @@
 {
     "license": "MIT",
     "version": "1.0.0",
-    "name": "artplayer-plugin-canvas",
-    "types": "types/artplayer-plugin-canvas.d.ts",
-    "description": "Canvas plugin for ArtPlayer",
-    "main": "dist/artplayer-plugin-canvas.js",
-    "legacy": "dist/artplayer-plugin-canvas.legacy.js",
+    "name": "artplayer-proxy-webav",
+    "types": "types/artplayer-proxy-webav.d.ts",
+    "description": "webav proxy for ArtPlayer",
+    "main": "dist/artplayer-proxy-webav.js",
+    "legacy": "dist/artplayer-proxy-webav.legacy.js",
     "author": "Harvey Zack <laozhaochaguan@gmail.com>",
     "browserslist": "last 1 Chrome version",
     "homepage": "https://artplayer.org",

packages/artplayer-proxy-webav/src/index.js

@@ -0,0 +1,9 @@
+export default function artplayerProxyWebAV(option) {
+    return (art) => {
+        return document.createElement('video');
+    };
+}
+
+if (typeof window !== 'undefined') {
+    window['artplayerProxyWebAV'] = artplayerProxyWebAV;
+}

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

@@ -0,0 +1,14 @@
+import type Artplayer from 'artplayer';
+
+export = artplayerProxyWebAV;
+export as namespace artplayerProxyWebAV;
+
+type Option = {
+    //
+};
+
+type Result = {
+    name: 'artplayerProxyWebAV';
+};
+
+declare const artplayerProxyWebAV: (option: Option) => (art: Artplayer) => Result;

packages/artplayer/src/index.js

@@ -156,7 +156,7 @@ export default class Artplayer extends Emitter {
             autoPlayback: false,
             autoOrientation: false,
             airplay: false,
-            proxy: null,
+            proxy: undefined,
             layers: [],
             contextmenu: [],
             controls: [],

packages/artplayer/src/scheme/index.js

@@ -68,7 +68,7 @@ export default {
     autoPlayback: b,
     autoOrientation: b,
     airplay: b,
-    proxy: f,
+    proxy: `?${f}`,
     plugins: [f],
     layers: [ComponentOption],
     contextmenu: [ComponentOption],