feat: enhance liquid glass plugin with customizable width and improved s…

packages/artplayer-plugin-liquid-glass/src/index.js

@@ -15,9 +15,13 @@ export default function artplayerPluginLiquidGlass(option = {}) {
 
     art.on('control', (state) => {
       if (state) {
-        $liquidGlass.style.width = option.width || '500px'
+        $liquidGlass.style.width = option.width;
+        $liquidGlass.style['max-width'] = option['max-width'];
+        $liquidGlass.style['min-width'] = option['min-width'];        
       } else {
         $liquidGlass.style.width = '';
+        $liquidGlass.style['max-width'] = '';
+        $liquidGlass.style['min-width'] = '';
       }
     })
 

packages/artplayer-plugin-liquid-glass/src/style.less

@@ -1,8 +1,8 @@
 .artplayer-plugin-liquid-glass {
     &.art-control-show {
-        --art-control-height: 42px !important;
-        --art-control-icon-size: 24px !important;
-        --art-control-icon-scale: 1.1 !important;
+        --art-control-height: 42px;
+        --art-control-icon-size: 24px;
+        --art-control-icon-scale: 1.1;
 
         .art-bottom {
             align-items: center;

packages/artplayer-plugin-liquid-glass/types/artplayer-plugin-liquid-glass.d.ts

@@ -1,13 +1,15 @@
 import type Artplayer from 'artplayer'
 
 interface Option {
-  //
+  width: string;
+  'max-width': string;
+  'min-width': string;
 }
 
 interface Result {
   name: 'artplayerPluginLiquidGlass'
 }
 
-declare const artplayerPluginLiquidGlass: (option: Option) => (art: Artplayer) => Result
+declare const artplayerPluginLiquidGlass: (option?: Option) => (art: Artplayer) => Result
 
 export default artplayerPluginLiquidGlass