From 7b4ca8584429f9003e9e3bfcf8174617042dd0d9 Mon Sep 17 00:00:00 2001
From: Harvey Zhao <laozhaochaguan@gmail.com>
Date: Mon, 8 Dec 2025 14:35:09 +0800
Subject: [PATCH] feat: add liquid-glass plugin for ArtPlayer with
 documentation and styles

---
 docs/assets/example/liquid.glass.js           |  28 +++
 docs/index.html                               |   4 +
 .../artplayer-plugin-liquid-glass/index.js    | 235 ++++++++++++++++++
 .../index.js.map                              |   1 +
 .../artplayer-plugin-liquid-glass/.npmignore  |   6 +
 .../artplayer-plugin-liquid-glass/README.md   |  11 +
 .../package.json                              |  38 +++
 .../src/index.js                              |  42 ++++
 .../src/style.less                            |  17 ++
 .../types/artplayer-plugin-liquid-glass.d.ts  |  13 +
 10 files changed, 395 insertions(+)
 create mode 100644 docs/assets/example/liquid.glass.js
 create mode 100644 docs/uncompiled/artplayer-plugin-liquid-glass/index.js
 create mode 100644 docs/uncompiled/artplayer-plugin-liquid-glass/index.js.map
 create mode 100644 packages/artplayer-plugin-liquid-glass/.npmignore
 create mode 100644 packages/artplayer-plugin-liquid-glass/README.md
 create mode 100644 packages/artplayer-plugin-liquid-glass/package.json
 create mode 100644 packages/artplayer-plugin-liquid-glass/src/index.js
 create mode 100644 packages/artplayer-plugin-liquid-glass/src/style.less
 create mode 100644 packages/artplayer-plugin-liquid-glass/types/artplayer-plugin-liquid-glass.d.ts

diff --git a/docs/assets/example/liquid.glass.js b/docs/assets/example/liquid.glass.js
new file mode 100644
index 000000000..a0dd9f33f
--- /dev/null
+++ b/docs/assets/example/liquid.glass.js
@@ -0,0 +1,28 @@
+// npm i artplayer-plugin-liquid-glass
+// import artplayerPluginLiquidGlass from 'artplayer-plugin-liquid-glass';
+
+let art = new Artplayer({
+  container: '.artplayer-app',
+  url: '/assets/sample/video.mp4',
+  autoSize: true,
+  pip: true,
+  setting: true,
+  fullscreen: true,
+  fullscreenWeb: true,
+  miniProgressBar: true,
+  autoPlayback: true,
+  flip: true,
+  playbackRate: true,
+  aspectRatio: true,
+  thumbnails: {
+    url: '/assets/sample/thumbnails.png',
+    number: 60,
+    column: 10,
+    scale: 0.85,
+  },
+  plugins: [
+    artplayerPluginLiquidGlass({
+      //
+    }),
+  ],
+})
diff --git a/docs/index.html b/docs/index.html
index b9cc8d88b..5a2d4e8d4 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -116,6 +116,10 @@
                         <li>
                             <a href="/?libs=./uncompiled/artplayer-plugin-document-pip/index.js&example=document.pip">artplayer-plugin-document-pip</a>
                         </li>
+                        <li>
+                            <a
+                                href="/?libs=./uncompiled/artplayer-plugin-liquid-glass/index.js&example=liquid.glass">artplayer-plugin-liquid-glass</a>
+                        </li>
                     </ul>
                     <ul>
                         <li class="title">Proxys</li>
diff --git a/docs/uncompiled/artplayer-plugin-liquid-glass/index.js b/docs/uncompiled/artplayer-plugin-liquid-glass/index.js
new file mode 100644
index 000000000..1e8b7febe
--- /dev/null
+++ b/docs/uncompiled/artplayer-plugin-liquid-glass/index.js
@@ -0,0 +1,235 @@
+// 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,
+  externals,
+  distDir,
+  publicUrl,
+  devServer
+) {
+  /* 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 importMap = previousRequire.i || {};
+  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 (externals[name]) {
+          return externals[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,
+        globalObject
+      );
+    }
+
+    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.require = nodeRequire;
+    this.exports = {};
+  }
+
+  newRequire.isParcelRequire = true;
+  newRequire.Module = Module;
+  newRequire.modules = modules;
+  newRequire.cache = cache;
+  newRequire.parent = previousRequire;
+  newRequire.distDir = distDir;
+  newRequire.publicUrl = publicUrl;
+  newRequire.devServer = devServer;
+  newRequire.i = importMap;
+  newRequire.register = function (id, exports) {
+    modules[id] = [
+      function (require, module) {
+        module.exports = exports;
+      },
+      {},
+    ];
+  };
+
+  // Only insert newRequire.load when it is actually used.
+  // The code in this file is linted against ES5, so dynamic import is not allowed.
+  // INSERT_LOAD_HERE
+
+  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;
+      });
+    }
+  }
+})({"iN7Pn":[function(require,module,exports,__globalThis) {
+var parcelHelpers = require("@parcel/transformer-js/src/esmodule-helpers.js");
+parcelHelpers.defineInteropFlag(exports);
+parcelHelpers.export(exports, "default", ()=>artplayerPluginLiquidGlass);
+var _styleLess = require("bundle-text:./style.less");
+var _styleLessDefault = parcelHelpers.interopDefault(_styleLess);
+function artplayerPluginLiquidGlass(option) {
+    return (art)=>{
+        const { constructor } = art;
+        const { addClass, append, createElement } = constructor.utils;
+        const { $bottom, $progress, $controls, $player } = art.template;
+        const $liquidGlass = createElement('div');
+        addClass($player, 'artplayer-plugin-liquid-glass');
+        addClass($liquidGlass, 'art-liquid-glass');
+        append($bottom, $liquidGlass);
+        append($liquidGlass, $progress);
+        append($liquidGlass, $controls);
+        return {
+            name: 'artplayerPluginLiquidGlass'
+        };
+    };
+}
+if (typeof document !== 'undefined') {
+    const id = 'artplayer-plugin-liquid-glass';
+    let $style = document.getElementById(id);
+    if (!$style) {
+        $style = document.createElement('style');
+        $style.id = id;
+        if (document.readyState === 'loading') document.addEventListener('DOMContentLoaded', ()=>{
+            document.head.appendChild($style);
+        });
+        else (document.head || document.documentElement).appendChild($style);
+    }
+    $style.textContent = (0, _styleLessDefault.default);
+}
+if (typeof window !== 'undefined') window.artplayerPluginLiquidGlass = artplayerPluginLiquidGlass;
+
+},{"bundle-text:./style.less":"aTKsv","@parcel/transformer-js/src/esmodule-helpers.js":"8oCsH"}],"aTKsv":[function(require,module,exports,__globalThis) {
+module.exports = ".artplayer-plugin-liquid-glass.art-control-show .art-bottom {\n  padding-bottom: var(--art-padding);\n  background-image: none !important;\n}\n\n.artplayer-plugin-liquid-glass.art-control-show .art-bottom .art-liquid-glass {\n  padding: var(--art-padding) var(--art-padding) 5px;\n  backdrop-filter: blur(10px);\n  background-color: #ffffff1a;\n  border-radius: 5px;\n}\n\n.artplayer-plugin-liquid-glass.art-control-show .art-layer-auto-playback {\n  bottom: calc(var(--art-control-height)  + var(--art-bottom-gap)  + var(--art-padding) * 4 + 10px);\n}\n";
+
+},{}],"8oCsH":[function(require,module,exports,__globalThis) {
+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
+    });
+};
+
+},{}]},["iN7Pn"], "iN7Pn", "parcelRequire4dc0", {})
+
+//# sourceMappingURL=index.js.map
diff --git a/docs/uncompiled/artplayer-plugin-liquid-glass/index.js.map b/docs/uncompiled/artplayer-plugin-liquid-glass/index.js.map
new file mode 100644
index 000000000..834810244
--- /dev/null
+++ b/docs/uncompiled/artplayer-plugin-liquid-glass/index.js.map
@@ -0,0 +1 @@
+{"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;6CAEwB;AAFxB;;AAEe,SAAS,2BAA2B,MAAM;IACvD,OAAO,CAAC;QACN,MAAM,EAAE,WAAW,EAAE,GAAG;QACxB,MAAM,EAAE,QAAQ,EAAE,MAAM,EAAE,aAAa,EAAE,GAAG,YAAY,KAAK;QAC7D,MAAM,EAAE,OAAO,EAAE,SAAS,EAAE,SAAS,EAAE,OAAO,EAAE,GAAG,IAAI,QAAQ;QAE/D,MAAM,eAAe,cAAc;QACnC,SAAS,SAAS;QAClB,SAAS,cAAc;QACvB,OAAO,SAAS;QAChB,OAAO,cAAc;QACrB,OAAO,cAAc;QAErB,OAAO;YACL,MAAM;QACR;IACF;AACF;AAEA,IAAI,OAAO,aAAa,aAAa;IACnC,MAAM,KAAK;IACX,IAAI,SAAS,SAAS,cAAc,CAAC;IACrC,IAAI,CAAC,QAAQ;QACX,SAAS,SAAS,aAAa,CAAC;QAChC,OAAO,EAAE,GAAG;QACZ,IAAI,SAAS,UAAU,KAAK,WAC1B,SAAS,gBAAgB,CAAC,oBAAoB;YAC5C,SAAS,IAAI,CAAC,WAAW,CAAC;QAC5B;aAGA,AAAC,CAAA,SAAS,IAAI,IAAI,SAAS,eAAe,AAAD,EAAG,WAAW,CAAC;IAE5D;IACA,OAAO,WAAW,GAAG,CAAA,GAAA,yBAAK,AAAD;AAC3B;AAEA,IAAI,OAAO,WAAW,aACpB,OAAO,0BAA0B,GAAG;;;ACxCtC,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-liquid-glass/src/index.js","node_modules/@parcel/runtime-js/lib/bundles/runtime-337dc7bedcf9e8cc.js","node_modules/@parcel/transformer-js/src/esmodule-helpers.js"],"sourcesContent":["import style from 'bundle-text:./style.less'\n\nexport default function artplayerPluginLiquidGlass(option) {\n  return (art) => {\n    const { constructor } = art\n    const { addClass, append, createElement } = constructor.utils\n    const { $bottom, $progress, $controls, $player } = art.template\n\n    const $liquidGlass = createElement('div')\n    addClass($player, 'artplayer-plugin-liquid-glass')\n    addClass($liquidGlass, 'art-liquid-glass')\n    append($bottom, $liquidGlass)\n    append($liquidGlass, $progress)\n    append($liquidGlass, $controls)\n\n    return {\n      name: 'artplayerPluginLiquidGlass',\n    }\n  }\n}\n\nif (typeof document !== 'undefined') {\n  const id = 'artplayer-plugin-liquid-glass'\n  let $style = document.getElementById(id)\n  if (!$style) {\n    $style = document.createElement('style')\n    $style.id = id\n    if (document.readyState === 'loading') {\n      document.addEventListener('DOMContentLoaded', () => {\n        document.head.appendChild($style)\n      })\n    }\n    else {\n      (document.head || document.documentElement).appendChild($style)\n    }\n  }\n  $style.textContent = style\n}\n\nif (typeof window !== 'undefined') {\n  window.artplayerPluginLiquidGlass = artplayerPluginLiquidGlass\n}\n","module.exports = \"b51d5559f0e96769\";","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":"../../../"}
\ No newline at end of file
diff --git a/packages/artplayer-plugin-liquid-glass/.npmignore b/packages/artplayer-plugin-liquid-glass/.npmignore
new file mode 100644
index 000000000..932395606
--- /dev/null
+++ b/packages/artplayer-plugin-liquid-glass/.npmignore
@@ -0,0 +1,6 @@
+node_modules
+.DS_Store
+.parcel-cache
+yarn.lock
+package-lock.json
+src
\ No newline at end of file
diff --git a/packages/artplayer-plugin-liquid-glass/README.md b/packages/artplayer-plugin-liquid-glass/README.md
new file mode 100644
index 000000000..81514406d
--- /dev/null
+++ b/packages/artplayer-plugin-liquid-glass/README.md
@@ -0,0 +1,11 @@
+# artplayer-plugin-liquid-glass
+
+liquid-glass plugin for ArtPlayer
+
+## Demo
+
+[https://artplayer.org](https://artplayer.org/?libs=./uncompiled/artplayer-plugin-liquid-glass/index.js&example=liquid-glass)
+
+## License
+
+MIT © Harvey Zack
diff --git a/packages/artplayer-plugin-liquid-glass/package.json b/packages/artplayer-plugin-liquid-glass/package.json
new file mode 100644
index 000000000..87c721bc2
--- /dev/null
+++ b/packages/artplayer-plugin-liquid-glass/package.json
@@ -0,0 +1,38 @@
+{
+  "name": "artplayer-plugin-liquid-glass",
+  "version": "1.0.0",
+  "description": "liquid-glass plugin for ArtPlayer",
+  "author": "Harvey Zack <laozhaochaguan@gmail.com>",
+  "license": "MIT",
+  "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"
+  ],
+  "exports": {
+    ".": {
+      "types": "./types/artplayer-plugin-liquid-glass.d.ts",
+      "import": "./dist/artplayer-plugin-liquid-glass.mjs",
+      "require": "./dist/artplayer-plugin-liquid-glass.js"
+    },
+    "./legacy": {
+      "types": "./types/artplayer-plugin-liquid-glass.d.ts",
+      "import": "./dist/artplayer-plugin-liquid-glass.legacy.js",
+      "require": "./dist/artplayer-plugin-liquid-glass.legacy.js"
+
+    }
+  },
+  "main": "dist/artplayer-plugin-liquid-glass.js",
+  "module": "./dist/artplayer-plugin-liquid-glass.mjs",
+  "types": "types/artplayer-plugin-liquid-glass.d.ts",
+  "legacy": "dist/artplayer-plugin-liquid-glass.legacy.js",
+  "browserslist": "last 1 Chrome version"
+}
diff --git a/packages/artplayer-plugin-liquid-glass/src/index.js b/packages/artplayer-plugin-liquid-glass/src/index.js
new file mode 100644
index 000000000..99a64bde5
--- /dev/null
+++ b/packages/artplayer-plugin-liquid-glass/src/index.js
@@ -0,0 +1,42 @@
+import style from 'bundle-text:./style.less'
+
+export default function artplayerPluginLiquidGlass(option) {
+  return (art) => {
+    const { constructor } = art
+    const { addClass, append, createElement } = constructor.utils
+    const { $bottom, $progress, $controls, $player } = art.template
+
+    const $liquidGlass = createElement('div')
+    addClass($player, 'artplayer-plugin-liquid-glass')
+    addClass($liquidGlass, 'art-liquid-glass')
+    append($bottom, $liquidGlass)
+    append($liquidGlass, $progress)
+    append($liquidGlass, $controls)
+
+    return {
+      name: 'artplayerPluginLiquidGlass',
+    }
+  }
+}
+
+if (typeof document !== 'undefined') {
+  const id = 'artplayer-plugin-liquid-glass'
+  let $style = document.getElementById(id)
+  if (!$style) {
+    $style = document.createElement('style')
+    $style.id = id
+    if (document.readyState === 'loading') {
+      document.addEventListener('DOMContentLoaded', () => {
+        document.head.appendChild($style)
+      })
+    }
+    else {
+      (document.head || document.documentElement).appendChild($style)
+    }
+  }
+  $style.textContent = style
+}
+
+if (typeof window !== 'undefined') {
+  window.artplayerPluginLiquidGlass = artplayerPluginLiquidGlass
+}
diff --git a/packages/artplayer-plugin-liquid-glass/src/style.less b/packages/artplayer-plugin-liquid-glass/src/style.less
new file mode 100644
index 000000000..5697253fd
--- /dev/null
+++ b/packages/artplayer-plugin-liquid-glass/src/style.less
@@ -0,0 +1,17 @@
+.artplayer-plugin-liquid-glass.art-control-show {
+    .art-bottom {
+        background-image: none !important;
+        padding-bottom: var(--art-padding);
+
+        .art-liquid-glass {
+            padding: var(--art-padding) var(--art-padding) 5px;
+            backdrop-filter: blur(10px);
+            background-color: rgba(255, 255, 255, 0.1);
+            border-radius: 5px;
+        }
+    }
+
+    .art-layer-auto-playback {
+        bottom: calc(var(--art-control-height) + var(--art-bottom-gap) + var(--art-padding) * 4 + 10px);
+    }
+}
diff --git a/packages/artplayer-plugin-liquid-glass/types/artplayer-plugin-liquid-glass.d.ts b/packages/artplayer-plugin-liquid-glass/types/artplayer-plugin-liquid-glass.d.ts
new file mode 100644
index 000000000..d0b9b45cf
--- /dev/null
+++ b/packages/artplayer-plugin-liquid-glass/types/artplayer-plugin-liquid-glass.d.ts
@@ -0,0 +1,13 @@
+import type Artplayer from 'artplayer'
+
+interface Option {
+  //
+}
+
+interface Result {
+  name: 'artplayerPluginLiquidGlass'
+}
+
+declare const artplayerPluginLiquidGlass: (option: Option) => (art: Artplayer) => Result
+
+export default artplayerPluginLiquidGlass