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

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