Vast (#762)

* add artplayer-plugin-vast

* chore: Add create:plugin script to package.json

* chore: Remove deprecated artplayer-plugin-{{name}} and artplayer-plugin-vast types

* chore: Update artplayer-plugin-vast package description

* chore: Update Prettier configuration and dependencies

docs/assets/js/common.js

@@ -1,41 +1,43 @@
-(function () {
+(() => {
     Artplayer.DEBUG = true;
 
     if (Artplayer.utils.isMobile) {
         window.location.href = './mobile.html' + location.search;
     }
 
-    var $codeMirror = document.querySelector('.codeMirrorWrap');
-    var $lib = document.querySelector('.libsInput');
-    var $run = document.querySelector('.run');
-    var $popups = document.querySelector('.popups');
-    var $console = document.querySelector('.console');
-    var $prod = document.querySelector('#prod');
-    var $ts = document.querySelector('#ts');
-    var $code = document.querySelector('#code');
-    var $log = document.querySelector('#log');
-    var $file = document.querySelector('#file');
-    var $editor = document.querySelector('#editor');
+    const $codeMirror = document.querySelector('.codeMirrorWrap');
+    const $lib = document.querySelector('.libsInput');
+    const $run = document.querySelector('.run');
+    const $popups = document.querySelector('.popups');
+    const $console = document.querySelector('.console');
+    const $prod = document.querySelector('#prod');
+    const $ts = document.querySelector('#ts');
+    const $code = document.querySelector('#code');
+    const $log = document.querySelector('#log');
+    const $file = document.querySelector('#file');
+    const $editor = document.querySelector('#editor');
 
-    window['consoleLog']($console);
+    window.consoleLog($console);
 
-    $prod.checked = localStorage.getItem('prod') === 'true';
-    $ts.checked = localStorage.getItem('ts') === 'true';
-    $code.checked = localStorage.getItem('code') === 'true';
-    $log.checked = localStorage.getItem('log') === 'true';
+    // Initialize checkboxes from localStorage
+    const initCheckbox = ($element, key) => {
+        $element.checked = localStorage.getItem(key) === 'true';
+        if ($element.checked) {
+            $element.style.display = 'none';
+        }
+    };
 
-    if ($code.checked) {
-        $editor.style.display = 'none';
-    }
+    initCheckbox($prod, 'prod');
+    initCheckbox($ts, 'ts');
+    initCheckbox($code, 'code');
+    initCheckbox($log, 'log');
 
-    if ($log.checked) {
-        $console.style.display = 'none';
-    }
+    let editor = null;
+    let loadedLibs = [];
 
-    var editor = null;
-    var loadedLibs = [];
     require.config({ paths: { vs: './assets/js/vs' } });
-    require(['vs/editor/editor.main'], async function () {
+
+    require(['vs/editor/editor.main'], async () => {
         monaco.languages.typescript.javascriptDefaults.setDiagnosticsOptions({
             noSemanticValidation: true,
             noSyntaxValidation: false,
@@ -46,7 +48,7 @@
             allowNonTsExtensions: true,
         });
 
-        var libUris = [
+        const libUris = [
             './assets/ts/artplayer.d.ts',
             './assets/ts/artplayer-plugin-ads.d.ts',
             './assets/ts/artplayer-plugin-control.d.ts',
@@ -59,15 +61,14 @@
             './assets/ts/artplayer-plugin-multiple-subtitles.d.ts',
             './assets/ts/artplayer-plugin-vtt-thumbnail.d.ts',
         ];
-        
-        for (let index = 0; index < libUris.length; index++) {
-            var libUri = libUris[index];
-            var libSource = await (await fetch(libUri)).text();
+
+        for (const libUri of libUris) {
+            const libSource = await (await fetch(libUri)).text();
             monaco.languages.typescript.javascriptDefaults.addExtraLib(libSource, libUri);
             monaco.editor.createModel(libSource, 'typescript', monaco.Uri.parse(libUri));
         }
 
-        var disposable = monaco.editor.onDidCreateEditor(function () {
+        const disposable = monaco.editor.onDidCreateEditor(() => {
             disposable.dispose();
             setTimeout(initApp, 1000);
         });
@@ -75,109 +76,84 @@
         editor = monaco.editor.create($codeMirror, {
             theme: 'vs-dark',
             automaticLayout: true,
-            quickSuggestions: {
-                other: true,
-                comments: true,
-                strings: true,
-            },
+            quickSuggestions: { other: true, comments: true, strings: true },
             model: monaco.editor.createModel(
-                [
-                    'var art = new Artplayer({',
-                    "\tcontainer: '.artplayer-app',",
-                    "\turl: '/assets/sample/video.mp4',",
-                    '});',
-                ].join('\n'),
-                $ts.checked ? 'typescript' : 'javascript',
+                `var art = new Artplayer({
+                    container: '.artplayer-app',
+                    url: '/assets/sample/video.mp4',
+                });`,
+                $ts.checked ? 'typescript' : 'javascript'
             ),
         });
     });
 
-    function getURLParameters(url) {
-        return (url.match(/([^?=&]+)(=([^&]*))/g) || []).reduce(function (a, v) {
-            return (a[v.slice(0, v.indexOf('='))] = v.slice(v.indexOf('=') + 1)), a;
-        }, {});
-    }
+    const getURLParameters = (url) => (
+        (url.match(/([^?=&]+)(=([^&]*))/g) || []).reduce((a, v) => {
+            a[v.slice(0, v.indexOf('='))] = v.slice(v.indexOf('=') + 1);
+            return a;
+        }, {})
+    );
 
-    function getExt(url) {
-        if (url.includes('?')) {
-            return getExt(url.split('?')[0]);
-        }
+    const getExt = (url) => {
+        const cleanUrl = url.split(/[?#]/)[0];
+        return cleanUrl.trim().toLowerCase().split('.').pop();
+    };
 
-        if (url.includes('#')) {
-            return getExt(url.split('#')[0]);
-        }
+    const loadScript = (url) => new Promise((resolve, reject) => {
+        const originalDefine = window.define;
+        window.define = undefined;
+        const script = document.createElement('script');
+        script.type = 'text/javascript';
+        script.src = url;
+        script.onload = () => {
+            window.define = originalDefine;
+            resolve(url);
+        };
+        script.onerror = () => reject(new Error(`Loading script failed: ${url}`));
+        document.head.appendChild(script);
+    });
 
-        return url.trim().toLowerCase().split('.').pop();
-    }
+    const loadStyle = (url) => new Promise((resolve, reject) => {
+        const link = document.createElement('link');
+        link.rel = 'stylesheet';
+        link.href = url;
+        link.onload = () => resolve(url);
+        link.onerror = () => reject(new Error(`Loading style failed: ${url}`));
+        document.head.appendChild(link);
+    });
 
-    function loadScript(url) {
-        return new Promise(function (resolve, reject) {
-            var define2 = window.define;
-            window.define = undefined;
-            var script = document.createElement('script');
-            script.type = 'text/javascript';
-            script.src = url;
-            script.onload = function () {
-                window.define = define2;
-                resolve(url);
-            };
-            script.onerror = function () {
-                reject(new Error('Loading script failed:' + url));
-            };
-            document.querySelector('head').appendChild(script);
-        });
-    }
+    const loadLib = (libs) => {
+        const libPromises = [];
+        const libsDecode = decodeURIComponent(libs || '');
 
-    function loadStyle(url) {
-        return new Promise(function (resolve, reject) {
-            var link = document.createElement('link');
-            link.rel = 'stylesheet';
-            link.href = url;
-            link.onload = function () {
-                resolve(url);
-            };
-            link.onerror = function () {
-                reject(new Error('Loading style failed:' + url));
-            };
-            document.querySelector('head').appendChild(link);
-        });
-    }
-
-    function loadLib(libs) {
-        var libPromise = [];
-        var libsDecode = decodeURIComponent(libs || '');
         libsDecode
             .split(/\r?\n/)
-            .filter(function (url) {
-                return !loadedLibs.includes(url);
-            })
-            .forEach(function (url) {
-                var ext = getExt(url);
+            .filter(url => !loadedLibs.includes(url))
+            .forEach(url => {
+                const ext = getExt(url);
                 if (ext === 'js') {
-                    libPromise.push(loadScript(url));
+                    libPromises.push(loadScript(url));
                 } else if (ext === 'css') {
-                    libPromise.push(loadStyle(url));
+                    libPromises.push(loadStyle(url));
                 }
             });
+
         $lib.value = libsDecode;
-        return Promise.all(libPromise);
-    }
+        return Promise.all(libPromises);
+    };
 
-    function runExample(name) {
-        fetch('./assets/example/' + name + '.js')
-            .then(function (response) {
-                return response.text();
-            })
-            .then(function (text) {
-                editor.setValue(text);
-                runCode();
-            })
-            .catch(function (err) {
-                console.error(err);
-            });
-    }
+    const runExample = async (name) => {
+        try {
+            const response = await fetch(`./assets/example/${name}.js`);
+            const text = await response.text();
+            editor.setValue(text);
+            runCode();
+        } catch (err) {
+            console.error(err);
+        }
+    };
 
-    function loadCode(code, example) {
+    const loadCode = (code, example) => {
         if (example) {
             runExample(example);
         } else if (code) {
@@ -186,111 +162,87 @@
         } else {
             runExample('index');
         }
-    }
+    };
 
-    function runCode() {
-        [...Artplayer.instances].forEach(function (art) {
-            art.destroy(true);
-        });
-        const value = editor.getValue();
-        eval(value);
+    const runCode = () => {
+        Artplayer.instances.forEach(art => art.destroy(true));
+        eval(editor.getValue());
         window.art = Artplayer.instances[0];
-    }
-
-    function initApp() {
-        var _getURLParameters = getURLParameters(window.location.href),
-            code = _getURLParameters.code,
-            libs = _getURLParameters.libs;
-        example = _getURLParameters.example;
+    };
 
+    const initApp = () => {
+        const { code, libs, example } = getURLParameters(window.location.href);
         loadLib(libs)
-            .then(function (result) {
+            .then(result => {
                 loadedLibs = loadedLibs.concat(result);
                 loadCode(code, example);
             })
-            .catch(function (err) {
-                console.error(err);
-            });
-    }
+            .catch(console.error);
+    };
 
-    function restart() {
-        var libs = encodeURIComponent($lib.value);
-        var code = encodeURIComponent(editor.getValue());
-        var url = window.location.origin + window.location.pathname + '?libs=' + libs + '&code=' + code;
+    const restart = () => {
+        const libs = encodeURIComponent($lib.value);
+        const code = encodeURIComponent(editor.getValue());
+        const url = `${window.location.origin}${window.location.pathname}?libs=${libs}&code=${code}`;
         history.pushState(null, null, url);
         initApp();
-    }
+    };
 
-    function readFile(file) {
-        return new Promise((resolve) => {
-            const reader = new FileReader();
-            reader.onload = () => resolve(reader.result);
-            reader.readAsText(file);
-        })
-    }
-
-    $run.addEventListener('click', function () {
-        restart();
+    const readFile = (file) => new Promise(resolve => {
+        const reader = new FileReader();
+        reader.onload = () => resolve(reader.result);
+        reader.readAsText(file);
     });
 
-    $popups.addEventListener('click', function (event) {
-        if (event.target === this) {
-            this.style.display = 'none';
+    $run.addEventListener('click', restart);
+
+    $popups.addEventListener('click', (event) => {
+        if (event.target === $popups) {
+            $popups.style.display = 'none';
         }
     });
 
-    $prod.addEventListener('change', function () {
-        localStorage.setItem('prod', $prod.checked ? 'true' : 'false');
+    $prod.addEventListener('change', () => {
+        localStorage.setItem('prod', $prod.checked);
         window.location.reload();
     });
 
-    $ts.addEventListener('change', function () {
-        localStorage.setItem('ts', $ts.checked ? 'true' : 'false');
+    $ts.addEventListener('change', () => {
+        localStorage.setItem('ts', $ts.checked);
         window.location.reload();
     });
 
-    $code.addEventListener('change', function () {
-        localStorage.setItem('code', $code.checked ? 'true' : 'false');
+    $code.addEventListener('change', () => {
+        localStorage.setItem('code', $code.checked);
         window.location.reload();
     });
 
-    $log.addEventListener('change', function () {
-        localStorage.setItem('log', $log.checked ? 'true' : 'false');
+    $log.addEventListener('change', () => {
+        localStorage.setItem('log', $log.checked);
         window.location.reload();
     });
 
-    $file.addEventListener('change', async function () {
-        for (let index = 0; index < $file.files.length; index++) {
-            const file = $file.files[index];
-            const name = file.name.toLowerCase().trim()
+    $file.addEventListener('change', async () => {
+        for (const file of $file.files) {
+            const name = file.name.toLowerCase().trim();
+            const text = await readFile(file);
             if (name.endsWith('.css')) {
-                const text = await readFile(file);
                 const $style = document.createElement('style');
                 $style.textContent = text;
                 document.body.appendChild($style);
-                $lib.value = `\n[${name}]`;
-                $lib.value = $lib.value.trim();
-            }
-            if (name.endsWith('.js')) {
-                const text = await readFile(file);
+            } else if (name.endsWith('.js')) {
                 const $script = document.createElement('script');
                 $script.textContent = text;
                 document.body.appendChild($script);
-                $lib.value = `\n[${name}]`;
-                $lib.value = $lib.value.trim();
             }
+            $lib.value += `\n[${name}]`.trim();
         }
     });
 
-    window.addEventListener('error', function (err) {
-        console.error(err);
-    });
+    window.addEventListener('error', console.error);
+    window.addEventListener('unhandledrejection', console.error);
 
-    window.addEventListener('unhandledrejection', function (err) {
-        console.error(err);
-    });
-
-    document.addEventListener('keydown', function (event) {
+    document.addEventListener('keydown', (event) => {
         if ((event.ctrlKey || event.metaKey) && event.key === 's') {
             event.preventDefault();
             restart();

docs/uncompiled/artplayer-plugin-test/index.js

@@ -0,0 +1,206 @@
+// 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;
+    }
+  }
+})({"fryej":[function(require,module,exports) {
+var parcelHelpers = require("@parcel/transformer-js/src/esmodule-helpers.js");
+parcelHelpers.defineInteropFlag(exports);
+parcelHelpers.export(exports, "default", ()=>artplayerPluginTest);
+var _styleLess = require("bundle-text:./style.less");
+var _styleLessDefault = parcelHelpers.interopDefault(_styleLess);
+function artplayerPluginTest(option) {
+    return (art)=>{
+        return {
+            name: "artplayerPluginTest"
+        };
+    };
+}
+if (typeof document !== "undefined") {
+    const id = "artplayer-plugin-test";
+    const $style = document.getElementById(id);
+    if ($style) $style.textContent = (0, _styleLessDefault.default);
+    else {
+        const $style = document.createElement("style");
+        $style.id = id;
+        $style.textContent = (0, _styleLessDefault.default);
+        document.head.appendChild($style);
+    }
+}
+if (typeof window !== "undefined") window["artplayerPluginTest"] = artplayerPluginTest;
+
+},{"bundle-text:./style.less":"hbz6Y","@parcel/transformer-js/src/esmodule-helpers.js":"5dUr6"}],"hbz6Y":[function(require,module,exports) {
+module.exports = "\n";
+
+},{}],"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
+    });
+};
+
+},{}]},["fryej"], "fryej", "parcelRequire4dc0")
+
+//# sourceMappingURL=index.js.map

docs/uncompiled/artplayer-plugin-test/index.js.map

@@ -0,0 +1 @@
+{"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;6CAEwB;AAFxB;;AAEe,SAAS,oBAAoB,MAAM;IAC9C,OAAO,CAAC;QACJ,OAAO;YACH,MAAM;QACV;IACJ;AACJ;AAEA,IAAI,OAAO,aAAa,aAAa;IACjC,MAAM,KAAK;IACX,MAAM,SAAS,SAAS,cAAc,CAAC;IACvC,IAAI,QACA,OAAO,WAAW,GAAG,CAAA,GAAA,yBAAK,AAAD;SACtB;QACH,MAAM,SAAS,SAAS,aAAa,CAAC;QACtC,OAAO,EAAE,GAAG;QACZ,OAAO,WAAW,GAAG,CAAA,GAAA,yBAAK,AAAD;QACzB,SAAS,IAAI,CAAC,WAAW,CAAC;IAC9B;AACJ;AAEA,IAAI,OAAO,WAAW,aAClB,MAAM,CAAC,sBAAsB,GAAG;;;ACxBpC,OAAO,OAAO,GAAG;;;ACAjB,QAAQ,cAAc,GAAG,SAAU,CAAC;IAClC,OAAO,KAAK,EAAE,UAAU,GAAG,IAAI;QAAC,SAAS;IAAC;AAC5C;AAEA,QAAQ,iBAAiB,GAAG,SAAU,CAAC;IACrC,OAAO,cAAc,CAAC,GAAG,cAAc;QAAC,OAAO;IAAI;AACrD;AAEA,QAAQ,SAAS,GAAG,SAAU,MAAM,EAAE,IAAI;IACxC,OAAO,IAAI,CAAC,QAAQ,OAAO,CAAC,SAAU,GAAG;QACvC,IACE,QAAQ,aACR,QAAQ,gBACR,OAAO,SAAS,CAAC,cAAc,CAAC,IAAI,CAAC,MAAM,MAE3C;QAGF,OAAO,cAAc,CAAC,MAAM,KAAK;YAC/B,YAAY;YACZ,KAAK;gBACH,OAAO,MAAM,CAAC,IAAI;YACpB;QACF;IACF;IAEA,OAAO;AACT;AAEA,QAAQ,MAAM,GAAG,SAAU,IAAI,EAAE,QAAQ,EAAE,GAAG;IAC5C,OAAO,cAAc,CAAC,MAAM,UAAU;QACpC,YAAY;QACZ,KAAK;IACP;AACF","sources":["packages/artplayer-plugin-test/src/index.js","node_modules/@parcel/runtime-js/lib/bundles/runtime-e68a27fd2c174153.js","node_modules/@parcel/transformer-js/src/esmodule-helpers.js"],"sourcesContent":["import style from 'bundle-text:./style.less';\n\nexport default function artplayerPluginTest(option) {\n    return (art) => {\n        return {\n            name: 'artplayerPluginTest',\n        };\n    };\n}\n\nif (typeof document !== 'undefined') {\n    const id = 'artplayer-plugin-test';\n    const $style = document.getElementById(id);\n    if ($style) {\n        $style.textContent = style;\n    } else {\n        const $style = document.createElement('style');\n        $style.id = id;\n        $style.textContent = style;\n        document.head.appendChild($style);\n    }\n}\n\nif (typeof window !== 'undefined') {\n    window['artplayerPluginTest'] = artplayerPluginTest;\n}\n","module.exports = \"91206404fcaa1496\";","exports.interopDefault = function (a) {\n  return a && a.__esModule ? a : {default: a};\n};\n\nexports.defineInteropFlag = function (a) {\n  Object.defineProperty(a, '__esModule', {value: true});\n};\n\nexports.exportAll = function (source, dest) {\n  Object.keys(source).forEach(function (key) {\n    if (\n      key === 'default' ||\n      key === '__esModule' ||\n      Object.prototype.hasOwnProperty.call(dest, key)\n    ) {\n      return;\n    }\n\n    Object.defineProperty(dest, key, {\n      enumerable: true,\n      get: function () {\n        return source[key];\n      },\n    });\n  });\n\n  return dest;\n};\n\nexports.export = function (dest, destName, get) {\n  Object.defineProperty(dest, destName, {\n    enumerable: true,\n    get: get,\n  });\n};\n"],"names":[],"version":3,"file":"index.js.map","sourceRoot":"../../../"}