x15904151985/ArtPlayer
1
0 Fork 0
mirror of https://github.com/zhw2590582/ArtPlayer.git synced 2026-10-25 16:11:20 -08:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Harvey Zhao committed 2025-12-13 17:05:51 +08:00
1 parent efa757ca2d
commit b7d94558b2
6 files changed
+26 -12
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

docs/uncompiled/artplayer-plugin-liquid-glass/index.js
+10 -3
View File
@@ -225,8 +225,15 @@ function artplayerPluginLiquidGlass(option = {}) {
append($liquidGlass, $progress);
append($liquidGlass, $controls);
art.on('control', (state)=>{
if (state) $liquidGlass.style.width = option.width || '500px';
else $liquidGlass.style.width = '';
if (state) {
$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'] = '';
}
});
return {
name: 'artplayerPluginLiquidGlass'
@@ -249,7 +256,7 @@ if (typeof document !== 'undefined') {
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 {\n --art-control-height: 42px !important;\n --art-control-icon-size: 24px !important;\n --art-control-icon-scale: 1.1 !important;\n}\n\n.artplayer-plugin-liquid-glass.art-control-show .art-bottom {\n padding-bottom: var(--art-padding);\n background-image: none;\n align-items: center;\n}\n\n.artplayer-plugin-liquid-glass.art-control-show .art-bottom .art-liquid-glass {\n backdrop-filter: blur(12px);\n padding: var(--art-padding) calc(var(--art-padding) * 1.5) 5px;\n background-color: #00000040;\n border-radius: 8px;\n}\n\n.artplayer-plugin-liquid-glass.art-control-show .art-bottom .art-control-progress-inner {\n border-radius: 5px;\n overflow: hidden;\n}\n\n.artplayer-plugin-liquid-glass.art-control-show .art-settings {\n bottom: calc(var(--art-control-height) + var(--art-bottom-gap) + var(--art-padding));\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";
module.exports = ".artplayer-plugin-liquid-glass.art-control-show {\n --art-control-height: 42px;\n --art-control-icon-size: 24px;\n --art-control-icon-scale: 1.1;\n}\n\n.artplayer-plugin-liquid-glass.art-control-show .art-bottom {\n padding-bottom: var(--art-padding);\n background-image: none;\n align-items: center;\n}\n\n.artplayer-plugin-liquid-glass.art-control-show .art-bottom .art-liquid-glass {\n backdrop-filter: blur(12px);\n padding: var(--art-padding) calc(var(--art-padding) * 1.5) 5px;\n background-color: #00000040;\n border-radius: 8px;\n}\n\n.artplayer-plugin-liquid-glass.art-control-show .art-bottom .art-control-progress-inner {\n border-radius: 5px;\n overflow: hidden;\n}\n\n.artplayer-plugin-liquid-glass.art-control-show .art-settings {\n bottom: calc(var(--art-control-height) + var(--art-bottom-gap) + var(--art-padding));\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) {