feat: add danmuku mask plugin for ArtPlayer with initial implementation and documentation

README.md

@@ -96,6 +96,7 @@ var art = new Artplayer({
 ## Plugins
 
 -   [artplayer-plugin-danmuku](https://artplayer.org/?libs=./uncompiled/artplayer-plugin-danmuku/index.js&example=danmuku)
+-   [artplayer-plugin-danmuku-mask](https://artplayer.org/?libs=./uncompiled/artplayer-plugin-danmuku/index.js%0A./uncompiled/artplayer-plugin-danmuku-mask/index.js&example=danmuku.mask)
 -   [artplayer-plugin-ads](https://artplayer.org/?libs=./uncompiled/artplayer-plugin-ads/index.js&example=ads) (WIP)
 -   [artplayer-plugin-iframe](https://artplayer.org/?libs=./uncompiled/artplayer-plugin-iframe/index.js&example=iframe)
 -   [artplayer-plugin-hls-control](https://artplayer.org/?libs=https://cdnjs.cloudflare.com/ajax/libs/hls.js/8.0.0-beta.3/hls.min.js%0A./uncompiled/artplayer-plugin-hls-control/index.js&example=hls.control)

docs/assets/example/danmuku.mask.js

@@ -0,0 +1,19 @@
+// npm i artplayer-plugin-danmuku-mask
+// import artplayerPluginDanmukuMask from 'artplayer-plugin-danmuku-mask';
+
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    autoSize: true,
+    fullscreen: true,
+    fullscreenWeb: true,
+    autoOrientation: true,
+    plugins: [
+        artplayerPluginDanmuku({
+            danmuku: '/assets/sample/danmuku.xml'
+        }),
+        artplayerPluginDanmukuMask({
+            //
+        }),
+    ],
+});

docs/index.html

@@ -55,6 +55,10 @@
                             <a
                                 href="/?libs=./uncompiled/artplayer-plugin-danmuku/index.js&example=danmuku">artplayer-plugin-danmuku</a>
                         </li>
+                        <li>
+                            <a
+                                href="/?libs=./uncompiled/artplayer-plugin-danmuku/index.js%0A./uncompiled/artplayer-plugin-danmuku-mask/index.js&example=danmuku.mask">artplayer-plugin-danmuku-mask</a>
+                        </li>
                         <li>
                             <a
                                 href="/?libs=./uncompiled/artplayer-plugin-ads/index.js&example=ads">artplayer-plugin-ads</a>

docs/uncompiled/artplayer-plugin-danmuku-mask/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;
+    }
+  }
+})({"8uLJa":[function(require,module,exports) {
+var parcelHelpers = require("@parcel/transformer-js/src/esmodule-helpers.js");
+parcelHelpers.defineInteropFlag(exports);
+parcelHelpers.export(exports, "default", ()=>artplayerPluginDanmukuMask);
+var _styleLess = require("bundle-text:./style.less");
+var _styleLessDefault = parcelHelpers.interopDefault(_styleLess);
+function artplayerPluginDanmukuMask(option) {
+    return (art)=>{
+        return {
+            name: "artplayerPluginDanmukuMask"
+        };
+    };
+}
+if (typeof document !== "undefined") {
+    const id = "artplayer-plugin-danmuku-mask";
+    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["artplayerPluginDanmukuMask"] = artplayerPluginDanmukuMask;
+
+},{"bundle-text:./style.less":"f0gDl","@parcel/transformer-js/src/esmodule-helpers.js":"5dUr6"}],"f0gDl":[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
+    });
+};
+
+},{}]},["8uLJa"], "8uLJa", "parcelRequire4dc0")
+
+//# sourceMappingURL=index.js.map

docs/uncompiled/artplayer-plugin-danmuku-mask/index.js.map

@@ -0,0 +1 @@
+{"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;6CAEwB;AAFxB;;AAEe,SAAS,2BAA2B,MAAM;IACrD,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,6BAA6B,GAAG;;;ACxB3C,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-danmuku-mask/src/index.js","node_modules/@parcel/runtime-js/lib/bundles/runtime-4813196337716b1e.js","node_modules/@parcel/transformer-js/src/esmodule-helpers.js"],"sourcesContent":["import style from 'bundle-text:./style.less';\n\nexport default function artplayerPluginDanmukuMask(option) {\n    return (art) => {\n        return {\n            name: 'artplayerPluginDanmukuMask',\n        };\n    };\n}\n\nif (typeof document !== 'undefined') {\n    const id = 'artplayer-plugin-danmuku-mask';\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['artplayerPluginDanmukuMask'] = artplayerPluginDanmukuMask;\n}\n","module.exports = \"830a33c473447305\";","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":"../../../"}

packages/artplayer-plugin-danmuku-mask/README.md

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

packages/artplayer-plugin-danmuku-mask/package.json

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

@@ -0,0 +1,26 @@
+import style from 'bundle-text:./style.less';
+
+export default function artplayerPluginDanmukuMask(option) {
+    return (art) => {
+        return {
+            name: 'artplayerPluginDanmukuMask',
+        };
+    };
+}
+
+if (typeof document !== 'undefined') {
+    const id = 'artplayer-plugin-danmuku-mask';
+    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['artplayerPluginDanmukuMask'] = artplayerPluginDanmukuMask;
+}

packages/artplayer-plugin-danmuku-mask/src/style.less

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

packages/artplayer-plugin-danmuku-mask/types/artplayer-plugin-danmuku-mask.d.ts

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