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

.prettierignore

@@ -8,3 +8,4 @@ packages/*/node_modules
 packages/*/.parcel-cache
 packages/artplayer-template/*/.next
 packages/artplayer-template/*/.nuxt
+scripts/plugin/template

.prettierrc

@@ -3,5 +3,10 @@
     "tabWidth": 4,
     "singleQuote": true,
     "trailingComma": "all",
-    "printWidth": 120
+    "printWidth": 120,
+    "semi": true,
+    "bracketSpacing": true,
+    "arrowParens": "always",
+    "endOfLine": "lf",
+    "quoteProps": "as-needed"
 }

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');
+    const $codeMirror = document.querySelector('.codeMirrorWrap');
-    var $lib = document.querySelector('.libsInput');
+    const $lib = document.querySelector('.libsInput');
-    var $run = document.querySelector('.run');
+    const $run = document.querySelector('.run');
-    var $popups = document.querySelector('.popups');
+    const $popups = document.querySelector('.popups');
-    var $console = document.querySelector('.console');
+    const $console = document.querySelector('.console');
-    var $prod = document.querySelector('#prod');
+    const $prod = document.querySelector('#prod');
-    var $ts = document.querySelector('#ts');
+    const $ts = document.querySelector('#ts');
-    var $code = document.querySelector('#code');
+    const $code = document.querySelector('#code');
-    var $log = document.querySelector('#log');
+    const $log = document.querySelector('#log');
-    var $file = document.querySelector('#file');
+    const $file = document.querySelector('#file');
-    var $editor = document.querySelector('#editor');
+    const $editor = document.querySelector('#editor');
 
-    window['consoleLog']($console);
+    window.consoleLog($console);
 
-    $prod.checked = localStorage.getItem('prod') === 'true';
+    // Initialize checkboxes from localStorage
-    $ts.checked = localStorage.getItem('ts') === 'true';
+    const initCheckbox = ($element, key) => {
-    $code.checked = localStorage.getItem('code') === 'true';
+        $element.checked = localStorage.getItem(key) === 'true';
-    $log.checked = localStorage.getItem('log') === 'true';
+        if ($element.checked) {
-
+            $element.style.display = 'none';
-    if ($code.checked) {
-        $editor.style.display = 'none';
         }
+    };
 
-    if ($log.checked) {
+    initCheckbox($prod, 'prod');
-        $console.style.display = 'none';
+    initCheckbox($ts, 'ts');
-    }
+    initCheckbox($code, 'code');
+    initCheckbox($log, 'log');
+
+    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',
@@ -60,14 +62,13 @@
             './assets/ts/artplayer-plugin-vtt-thumbnail.d.ts',
         ];
 
-        for (let index = 0; index < libUris.length; index++) {
+        for (const libUri of libUris) {
-            var libUri = libUris[index];
+            const libSource = await (await fetch(libUri)).text();
-            var 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: {
+            quickSuggestions: { other: true, comments: true, strings: true },
-                other: true,
-                comments: true,
-                strings: true,
-            },
             model: monaco.editor.createModel(
-                [
+                `var art = new Artplayer({
-                    'var art = new Artplayer({',
+                    container: '.artplayer-app',
-                    "\tcontainer: '.artplayer-app',",
+                    url: '/assets/sample/video.mp4',
-                    "\turl: '/assets/sample/video.mp4',",
+                });`,
-                    '});',
+                $ts.checked ? 'typescript' : 'javascript'
-                ].join('\n'),
-                $ts.checked ? 'typescript' : 'javascript',
             ),
         });
     });
 
-    function getURLParameters(url) {
+    const getURLParameters = (url) => (
-        return (url.match(/([^?=&]+)(=([^&]*))/g) || []).reduce(function (a, v) {
+        (url.match(/([^?=&]+)(=([^&]*))/g) || []).reduce((a, v) => {
-            return (a[v.slice(0, v.indexOf('='))] = v.slice(v.indexOf('=') + 1)), a;
+            a[v.slice(0, v.indexOf('='))] = v.slice(v.indexOf('=') + 1);
-        }, {});
+            return a;
-    }
+        }, {})
+    );
 
-    function getExt(url) {
+    const getExt = (url) => {
-        if (url.includes('?')) {
+        const cleanUrl = url.split(/[?#]/)[0];
-            return getExt(url.split('?')[0]);
+        return cleanUrl.trim().toLowerCase().split('.').pop();
-        }
+    };
 
-        if (url.includes('#')) {
+    const loadScript = (url) => new Promise((resolve, reject) => {
-            return getExt(url.split('#')[0]);
+        const originalDefine = window.define;
-        }
-
-        return url.trim().toLowerCase().split('.').pop();
-    }
-
-    function loadScript(url) {
-        return new Promise(function (resolve, reject) {
-            var define2 = window.define;
         window.define = undefined;
-            var script = document.createElement('script');
+        const script = document.createElement('script');
         script.type = 'text/javascript';
         script.src = url;
-            script.onload = function () {
+        script.onload = () => {
-                window.define = define2;
+            window.define = originalDefine;
             resolve(url);
         };
-            script.onerror = function () {
+        script.onerror = () => reject(new Error(`Loading script failed: ${url}`));
-                reject(new Error('Loading script failed:' + url));
+        document.head.appendChild(script);
-            };
-            document.querySelector('head').appendChild(script);
     });
-    }
 
-    function loadStyle(url) {
+    const loadStyle = (url) => new Promise((resolve, reject) => {
-        return new Promise(function (resolve, reject) {
+        const link = document.createElement('link');
-            var link = document.createElement('link');
         link.rel = 'stylesheet';
         link.href = url;
-            link.onload = function () {
+        link.onload = () => resolve(url);
-                resolve(url);
+        link.onerror = () => reject(new Error(`Loading style failed: ${url}`));
-            };
+        document.head.appendChild(link);
-            link.onerror = function () {
-                reject(new Error('Loading style failed:' + url));
-            };
-            document.querySelector('head').appendChild(link);
     });
-    }
 
-    function loadLib(libs) {
+    const loadLib = (libs) => {
-        var libPromise = [];
+        const libPromises = [];
-        var libsDecode = decodeURIComponent(libs || '');
+        const libsDecode = decodeURIComponent(libs || '');
+
         libsDecode
             .split(/\r?\n/)
-            .filter(function (url) {
+            .filter(url => !loadedLibs.includes(url))
-                return !loadedLibs.includes(url);
+            .forEach(url => {
-            })
+                const ext = getExt(url);
-            .forEach(function (url) {
-                var 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);
-    }
 
-    function runExample(name) {
+        $lib.value = libsDecode;
-        fetch('./assets/example/' + name + '.js')
+        return Promise.all(libPromises);
-            .then(function (response) {
+    };
-                return response.text();
+
-            })
+    const runExample = async (name) => {
-            .then(function (text) {
+        try {
+            const response = await fetch(`./assets/example/${name}.js`);
+            const text = await response.text();
             editor.setValue(text);
             runCode();
-            })
+        } catch (err) {
-            .catch(function (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() {
+    const runCode = () => {
-        [...Artplayer.instances].forEach(function (art) {
+        Artplayer.instances.forEach(art => art.destroy(true));
-            art.destroy(true);
+        eval(editor.getValue());
-        });
-        const value = editor.getValue();
-        eval(value);
         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) {
+            .catch(console.error);
-                console.error(err);
+    };
-            });
-    }
 
-    function restart() {
+    const restart = () => {
-        var libs = encodeURIComponent($lib.value);
+        const libs = encodeURIComponent($lib.value);
-        var code = encodeURIComponent(editor.getValue());
+        const code = encodeURIComponent(editor.getValue());
-        var url = window.location.origin + window.location.pathname + '?libs=' + libs + '&code=' + code;
+        const url = `${window.location.origin}${window.location.pathname}?libs=${libs}&code=${code}`;
         history.pushState(null, null, url);
         initApp();
-    }
+    };
 
-    function readFile(file) {
+    const readFile = (file) => new Promise(resolve => {
-        return new Promise((resolve) => {
         const reader = new FileReader();
         reader.onload = () => resolve(reader.result);
         reader.readAsText(file);
-        })
-    }
-
-    $run.addEventListener('click', function () {
-        restart();
     });
 
-    $popups.addEventListener('click', function (event) {
+    $run.addEventListener('click', restart);
-        if (event.target === this) {
+
-            this.style.display = 'none';
+    $popups.addEventListener('click', (event) => {
+        if (event.target === $popups) {
+            $popups.style.display = 'none';
         }
     });
 
-    $prod.addEventListener('change', function () {
+    $prod.addEventListener('change', () => {
-        localStorage.setItem('prod', $prod.checked ? 'true' : 'false');
+        localStorage.setItem('prod', $prod.checked);
         window.location.reload();
     });
 
-    $ts.addEventListener('change', function () {
+    $ts.addEventListener('change', () => {
-        localStorage.setItem('ts', $ts.checked ? 'true' : 'false');
+        localStorage.setItem('ts', $ts.checked);
         window.location.reload();
     });
 
-    $code.addEventListener('change', function () {
+    $code.addEventListener('change', () => {
-        localStorage.setItem('code', $code.checked ? 'true' : 'false');
+        localStorage.setItem('code', $code.checked);
         window.location.reload();
     });
 
-    $log.addEventListener('change', function () {
+    $log.addEventListener('change', () => {
-        localStorage.setItem('log', $log.checked ? 'true' : 'false');
+        localStorage.setItem('log', $log.checked);
         window.location.reload();
     });
 
-    $file.addEventListener('change', async function () {
+    $file.addEventListener('change', async () => {
-        for (let index = 0; index < $file.files.length; index++) {
+        for (const file of $file.files) {
-            const file = $file.files[index];
+            const name = file.name.toLowerCase().trim();
-            const name = file.name.toLowerCase().trim()
-            if (name.endsWith('.css')) {
             const text = await readFile(file);
+            if (name.endsWith('.css')) {
                 const $style = document.createElement('style');
                 $style.textContent = text;
                 document.body.appendChild($style);
-                $lib.value = `\n[${name}]`;
+            } else if (name.endsWith('.js')) {
-                $lib.value = $lib.value.trim();
-            }
-            if (name.endsWith('.js')) {
-                const text = await readFile(file);
                 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) {
+    window.addEventListener('error', console.error);
-        console.error(err);
+    window.addEventListener('unhandledrejection', console.error);
-    });
 
-    window.addEventListener('unhandledrejection', function (err) {
+    document.addEventListener('keydown', (event) => {
-        console.error(err);
-    });
-
-    document.addEventListener('keydown', function (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":"../../../"}

lerna.json

@@ -1,7 +1,5 @@
 {
-    "packages": [
+    "packages": ["packages/*"],
-        "packages/*"
-    ],
     "version": "independent",
     "npmClient": "yarn"
 }

package.json

@@ -15,6 +15,7 @@
         "build:docs": "node ./scripts/build-docs.js",
         "build:i18n": "node ./scripts/build-i18n.js",
         "trans:docs": "node ./scripts/trans-docs.js",
+        "create:plugin": "node ./scripts/plugin/create.js",
         "dev": "npx cross-env NODE_ENV=development node ./scripts/dev.js",
         "build": "npx cross-env NODE_ENV=production node ./scripts/build.js",
         "prettier": "npx prettier --write .",
@@ -48,14 +49,14 @@
         "cross-env": "^7.0.3",
         "cross-spawn": "^7.0.3",
         "dotenv": "^16.4.5",
-        "eslint": "^9.3.0",
+        "eslint": "^9.4.0",
         "glob": "^10.4.1",
         "globals": "^15.3.0",
         "lerna": "^8.1.3",
-        "prettier": "^3.2.5",
+        "prettier": "^3.3.0",
         "prompts": "^2.4.2",
         "servor": "^4.0.2",
-        "workbox-build": "^7.1.0"
+        "workbox-build": "^7.1.1"
     },
     "engines": {
         "node": ">= 20.0.0"

packages/artplayer-plugin-vast/README.md

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

packages/artplayer-plugin-vast/package.json

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

@@ -0,0 +1,26 @@
+import style from 'bundle-text:./style.less';
+
+export default function artplayerPluginVast(option) {
+    return (art) => {
+        return {
+            name: 'artplayerPluginVast',
+        };
+    };
+}
+
+if (typeof document !== 'undefined') {
+    const id = 'artplayer-plugin-vast';
+    const $style = document.getElementById(id);
+    if ($style) {
+        $style.textContent = style;
+    } else {
+        const $style = document.createElement('style');
+        $style.id = id;
+        $style.textContent = style;
+        document.head.appendChild($style);
+    }
+}
+
+if (typeof window !== 'undefined') {
+    window['artplayerPluginVast'] = artplayerPluginVast;
+}

packages/artplayer-plugin-vast/src/style.less

@@ -0,0 +1,3 @@
+.artplayer-plugin-vast {
+    //
+}

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

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

scripts/build.js

@@ -6,25 +6,26 @@ import { Parcel } from '@parcel/core';
 import { formatDate, getProjects } from './utils.js';
 
 const projects = getProjects();
-const compiledPath = path.resolve(`docs/compiled`);
+const compiledPath = path.resolve('docs/compiled');
 
 function compressString(input) {
-    const compressedHtmlString = input.replace(/\s*(<[^>]+>)\s*/g, '$1');
+    return input
-    const compressedCssString = compressedHtmlString
+        .replace(/\s*(<[^>]+>)\s*/g, '$1')
         .replace(/(\r\n|\n|\r)/gm, ' ')
         .replace(/\s+/g, ' ')
         .trim();
-    return compressedCssString;
 }
 
 async function build(name, targetName) {
-    const { version } = JSON.parse(fs.readFileSync(`${projects[name]}/package.json`, 'utf-8'));
+    const projectPackageJson = path.join(projects[name], 'package.json');
+    const { version } = JSON.parse(fs.readFileSync(projectPackageJson, 'utf-8'));
+
     process.chdir(projects[name]);
 
     const targets = {
         main: {
             context: 'browser',
-            distDir: `${projects[name]}/dist`,
+            distDir: path.join(projects[name], 'dist'),
             sourceMap: false,
             outputFormat: 'global',
             engines: {
@@ -33,7 +34,7 @@ async function build(name, targetName) {
         },
         legacy: {
             context: 'browser',
-            distDir: `${projects[name]}/dist`,
+            distDir: path.join(projects[name], 'dist'),
             sourceMap: false,
             outputFormat: 'global',
             engines: {
@@ -48,7 +49,7 @@ async function build(name, targetName) {
     };
 
     const bundler = new Parcel({
-        entries: `${projects[name]}/src/index.js`,
+        entries: path.join(projects[name], 'src/index.js'),
         defaultConfig: '@parcel/config-default',
         mode: 'production',
         targets: {
@@ -61,58 +62,57 @@ async function build(name, targetName) {
         },
     });
 
-    const banner =
+    const banner = `
-        '/*!\n' +
+/*!
-        ` * ${name}.js v${version}\n` +
+ * ${name}.js v${version}
-        ` * Github: https://github.com/zhw2590582/ArtPlayer\n` +
+ * Github: https://github.com/zhw2590582/ArtPlayer
-        ` * (c) 2017-${new Date().getFullYear()} Harvey Zack\n` +
+ * (c) 2017-${new Date().getFullYear()} Harvey Zack
-        ' * Released under the MIT License.\n' +
+ * Released under the MIT License.
-        ' */\n';
+ */
+`;
 
+    try {
         const { bundleGraph, buildTime } = await bundler.run();
         const bundles = bundleGraph.getBundles();
 
-    const filePath = `${projects[name]}/dist/index.js`;
+        const filePath = path.join(projects[name], 'dist/index.js');
-    const newFilePath = `${projects[name]}/dist/${names[targetName]}.js`;
+        const newFilePath = path.join(projects[name], `dist/${names[targetName]}.js`);
-    const code = String(fs.readFileSync(filePath));
+        const code = fs.readFileSync(filePath, 'utf-8');
         fs.writeFileSync(filePath, banner + compressString(code));
         fs.renameSync(filePath, newFilePath);
         await cpy(newFilePath, compiledPath);
         const size = fs.statSync(newFilePath).size / 1024;
+
         console.log(
             `✨ Built@${targetName} ${name}@${version}`,
             `Bundles@${bundles.length}`,
             `Time@${buildTime}ms`,
-        `Size@${size}kb`,
+            `Size@${size.toFixed(2)}kb`,
         );
+    } catch (error) {
+        console.error(`Failed to build ${name}:`, error);
+    }
 }
 
-function runPromisesInSeries(ps) {
+async function runBuild() {
-    return ps.reduce((p, next) => p.then(next), Promise.resolve());
+    if (process.argv.pop() === 'all') {
-}
-
-if (process.argv.pop() === 'all') {
         const bundles = Object.keys(projects).map((name) => async () => {
             await build(name, 'main');
             await build(name, 'legacy');
         });
 
-    runPromisesInSeries(bundles).then(() => {
+        await runPromisesInSeries(bundles);
-        console.log(`✨ Finished building all packages!`);
+        console.log('✨ Finished building all packages!');
-    });
+    } else {
-} else {
-    (async () => {
         const response = await prompts({
             type: 'select',
             name: 'value',
             message: 'Which project do you want to build?',
-            choices: Object.keys(projects).map((name) => {
+            choices: Object.keys(projects).map((name) => ({
-                return {
                 title: name,
                 value: name,
                 description: projects[name],
-                };
+            })),
-            }),
             initial: 0,
         });
 
@@ -120,5 +120,13 @@ if (process.argv.pop() === 'all') {
             await build(response.value, 'main');
             await build(response.value, 'legacy');
         }
-    })();
+    }
 }
+
+function runPromisesInSeries(ps) {
+    return ps.reduce((p, next) => p.then(next), Promise.resolve());
+}
+
+runBuild().catch((error) => {
+    console.error('Build script encountered an error:', error);
+});

scripts/dev.js

@@ -12,18 +12,22 @@ const projects = getProjects();
 async function develop(name) {
     let isOpenBrowser = false;
     const uncompiledPath = path.resolve(`docs/uncompiled/${name}`);
-    const { version } = JSON.parse(fs.readFileSync(`${projects[name]}/package.json`, 'utf-8'));
 
-    const { url } = await servor({
+    const projectPackageJson = path.join(projects[name], 'package.json');
+    const { version } = JSON.parse(fs.readFileSync(projectPackageJson, 'utf-8'));
+
+    const serverConfig = {
         root: 'docs',
         fallback: 'index.html',
         reload: true,
         port: 8082,
-    });
+    };
 
+    try {
+        const { url } = await servor(serverConfig);
         process.chdir(projects[name]);
 
-    const bundler = new Parcel({
+        const bundlerConfig = {
             entries: `${projects[name]}/src/index.js`,
             defaultConfig: '@parcel/config-default',
             mode: 'development',
@@ -47,39 +51,49 @@ async function develop(name) {
                     resolveFrom: fileURLToPath(import.meta.url),
                 },
             ],
-    });
+        };
 
-    bundler.watch(async (error, event) => {
+        const bundler = new Parcel(bundlerConfig);
-        if (error) throw error;
+
+        bundler.watch((error, event) => {
+            if (error) {
+                console.error(`Build error: ${error}`);
+                return;
+            }
             if (event.type === 'buildSuccess') {
                 const bundles = event.bundleGraph.getBundles();
-            console.log(`[${name}]`, `✨ Built ${bundles.length} bundles in ${event.buildTime}ms!`);
+                console.log(`[${name}] ✨ Built ${bundles.length} bundles in ${event.buildTime}ms!`);
                 if (!isOpenBrowser) {
                     isOpenBrowser = true;
                     openBrowser(url);
                 }
             } else if (event.type === 'buildFailure') {
-            console.log(`[${name}]`, event.diagnostics);
+                console.error(`[${name}] Build failure:`, event.diagnostics);
             }
         });
+    } catch (error) {
+        console.error(`Failed to start development server for ${name}: ${error.message}`);
+    }
 }
 
 (async () => {
+    try {
         const response = await prompts({
             type: 'select',
             name: 'value',
             message: 'Which project do you want to develop?',
-        choices: Object.keys(projects).map((name) => {
+            choices: Object.keys(projects).map((name) => ({
-            return {
                 title: name,
                 value: name,
                 description: projects[name],
-            };
+            })),
-        }),
             initial: 0,
         });
 
         if (response.value) {
             develop(response.value);
         }
+    } catch (error) {
+        console.error(`Prompt error: ${error.message}`);
+    }
 })();

scripts/plugin/create.js

@@ -0,0 +1,65 @@
+import fs from 'fs';
+import path from 'path';
+import { fileURLToPath } from 'url';
+
+// Get the current file path
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+
+// Get the plugin name from command line arguments
+const args = process.argv.slice(2);
+const pluginName = args[0];
+
+if (!pluginName) {
+    console.error('Please provide a plugin name, e.g., npm run create:plugin somePluginName');
+    process.exit(1);
+}
+
+// Define paths
+const templateDir = path.join(__dirname, 'template');
+const destDir = path.join(__dirname, '../../packages', `artplayer-plugin-${pluginName}`);
+
+// Check if a plugin with the same name already exists
+if (fs.existsSync(destDir)) {
+    console.error(`Plugin ${pluginName} already exists. Please choose another name.`);
+    process.exit(1);
+}
+
+// Create the destination directory
+fs.mkdirSync(destDir, { recursive: true });
+
+// Read files from the template directory and copy them to the destination directory
+function copyTemplateFiles(templateDir, destDir) {
+    const files = fs.readdirSync(templateDir);
+
+    files.forEach((file) => {
+        const templateFilePath = path.join(templateDir, file);
+        let destFilePath = path.join(destDir, file);
+
+        const stats = fs.statSync(templateFilePath);
+
+        if (stats.isDirectory()) {
+            fs.mkdirSync(destFilePath, { recursive: true });
+            copyTemplateFiles(templateFilePath, destFilePath);
+        } else {
+            // Replace placeholders in the file name
+            destFilePath = destFilePath.replace(/{{name}}/g, pluginName);
+
+            let content = fs.readFileSync(templateFilePath, 'utf8');
+
+            // Replace placeholders in the file content
+            content = content.replace(/{{name}}/g, pluginName);
+            content = content.replace(
+                /{{export}}/g,
+                `artplayerPlugin${pluginName.charAt(0).toUpperCase() + pluginName.slice(1)}`,
+            );
+
+            fs.writeFileSync(destFilePath, content);
+        }
+    });
+}
+
+// Start copying template files
+copyTemplateFiles(templateDir, destDir);
+
+console.log(`Plugin ${pluginName} has been successfully created at ${destDir}`);

scripts/plugin/template/README.md

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

scripts/plugin/template/package.json

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

scripts/plugin/template/src/index.js

@@ -0,0 +1,26 @@
+import style from 'bundle-text:./style.less';
+
+export default function {{export}}(option) {
+    return (art) => {
+        return {
+            name: '{{export}}',
+        };
+    };
+}
+
+if (typeof document !== 'undefined') {
+    const id = 'artplayer-plugin-{{name}}';
+    const $style = document.getElementById(id);
+    if ($style) {
+        $style.textContent = style;
+    } else {
+        const $style = document.createElement('style');
+        $style.id = id;
+        $style.textContent = style;
+        document.head.appendChild($style);
+    }
+}
+
+if (typeof window !== 'undefined') {
+    window['{{export}}'] = {{export}};
+}

scripts/plugin/template/src/style.less

@@ -0,0 +1,3 @@
+.artplayer-plugin-{{name}} {
+    //
+}

scripts/plugin/template/types/artplayer-plugin-{{name}}.d.ts

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