feat: add liquid-glass plugin for ArtPlayer with documentation and styles

packages/artplayer-plugin-liquid-glass/.npmignore

@@ -0,0 +1,6 @@
+node_modules
+.DS_Store
+.parcel-cache
+yarn.lock
+package-lock.json
+src

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

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"
+}

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
+}

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);
+    }
+}

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