mirror of
https://github.com/zhw2590582/ArtPlayer.git
synced 2026-10-08 10:56:15 -08:00
feat: enhance liquid glass plugin with customizable width and improved styles
This commit is contained in:
Harvey Zhao committed
1 parent
04b955f455
commit
efa757ca2d
5 files changed
+95
-20
No files matched your search
@@ -22,7 +22,7 @@ let art = new Artplayer({
|
||||
},
|
||||
plugins: [
|
||||
artplayerPluginLiquidGlass({
|
||||
//
|
||||
width: '500px',
|
||||
}),
|
||||
],
|
||||
})
|
||||
@@ -94,7 +94,54 @@
|
||||
|
||||
function localRequire(x) {
|
||||
var res = localRequire.resolve(x);
|
||||
return res === false ? {} : newRequire(res);
|
||||
if (res === false) {
|
||||
return {};
|
||||
}
|
||||
// Synthesize a module to follow re-exports.
|
||||
if (Array.isArray(res)) {
|
||||
var m = {__esModule: true};
|
||||
res.forEach(function (v) {
|
||||
var key = v[0];
|
||||
var id = v[1];
|
||||
var exp = v[2] || v[0];
|
||||
var x = newRequire(id);
|
||||
if (key === '*') {
|
||||
Object.keys(x).forEach(function (key) {
|
||||
if (
|
||||
key === 'default' ||
|
||||
key === '__esModule' ||
|
||||
Object.prototype.hasOwnProperty.call(m, key)
|
||||
) {
|
||||
return;
|
||||
}
|
||||
|
||||
Object.defineProperty(m, key, {
|
||||
enumerable: true,
|
||||
get: function () {
|
||||
return x[key];
|
||||
},
|
||||
});
|
||||
});
|
||||
} else if (exp === '*') {
|
||||
Object.defineProperty(m, key, {
|
||||
enumerable: true,
|
||||
value: x,
|
||||
});
|
||||
} else {
|
||||
Object.defineProperty(m, key, {
|
||||
enumerable: true,
|
||||
get: function () {
|
||||
if (exp === 'default') {
|
||||
return x.__esModule ? x.default : x;
|
||||
}
|
||||
return x[exp];
|
||||
},
|
||||
});
|
||||
}
|
||||
});
|
||||
return m;
|
||||
}
|
||||
return newRequire(res);
|
||||
}
|
||||
|
||||
function resolve(x) {
|
||||
@@ -166,7 +213,7 @@ parcelHelpers.defineInteropFlag(exports);
|
||||
parcelHelpers.export(exports, "default", ()=>artplayerPluginLiquidGlass);
|
||||
var _styleLess = require("bundle-text:./style.less");
|
||||
var _styleLessDefault = parcelHelpers.interopDefault(_styleLess);
|
||||
function artplayerPluginLiquidGlass(option) {
|
||||
function artplayerPluginLiquidGlass(option = {}) {
|
||||
return (art)=>{
|
||||
const { constructor } = art;
|
||||
const { addClass, append, createElement } = constructor.utils;
|
||||
@@ -177,6 +224,10 @@ function artplayerPluginLiquidGlass(option) {
|
||||
append($bottom, $liquidGlass);
|
||||
append($liquidGlass, $progress);
|
||||
append($liquidGlass, $controls);
|
||||
art.on('control', (state)=>{
|
||||
if (state) $liquidGlass.style.width = option.width || '500px';
|
||||
else $liquidGlass.style.width = '';
|
||||
});
|
||||
return {
|
||||
name: 'artplayerPluginLiquidGlass'
|
||||
};
|
||||
@@ -198,7 +249,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 .art-bottom {\n padding-bottom: var(--art-padding);\n background-image: none;\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) var(--art-padding) 5px;\n background-color: #0003;\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";
|
||||
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";
|
||||
|
||||
},{}],"8oCsH":[function(require,module,exports,__globalThis) {
|
||||
exports.interopDefault = function(a) {
|
||||
|
||||
@@ -1 +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":"../../../"}
|
||||
{"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;6CAEwB;AAFxB;;AAEe,SAAS,2BAA2B,SAAS,CAAC,CAAC;IAC5D,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,IAAI,EAAE,CAAC,WAAW,CAAC;YACjB,IAAI,OACF,aAAa,KAAK,CAAC,KAAK,GAAG,OAAO,KAAK,IAAI;iBAE3C,aAAa,KAAK,CAAC,KAAK,GAAG;QAE/B;QAEA,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;;;AChDtC,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 art.on('control', (state) => {\n if (state) {\n $liquidGlass.style.width = option.width || '500px'\n } else {\n $liquidGlass.style.width = '';\n }\n })\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":"../../../"}
|
||||
@@ -1,6 +1,6 @@
|
||||
import style from 'bundle-text:./style.less'
|
||||
|
||||
export default function artplayerPluginLiquidGlass(option) {
|
||||
export default function artplayerPluginLiquidGlass(option = {}) {
|
||||
return (art) => {
|
||||
const { constructor } = art
|
||||
const { addClass, append, createElement } = constructor.utils
|
||||
@@ -13,6 +13,14 @@ export default 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 = '';
|
||||
}
|
||||
})
|
||||
|
||||
return {
|
||||
name: 'artplayerPluginLiquidGlass',
|
||||
}
|
||||
|
||||
@@ -1,17 +1,33 @@
|
||||
.artplayer-plugin-liquid-glass.art-control-show {
|
||||
.art-bottom {
|
||||
background-image: none;
|
||||
padding-bottom: var(--art-padding);
|
||||
.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-liquid-glass {
|
||||
border-radius: 5px;
|
||||
backdrop-filter: blur(12px);
|
||||
background-color: rgba(0, 0, 0, 0.2);
|
||||
padding: var(--art-padding) var(--art-padding) 5px;
|
||||
.art-bottom {
|
||||
align-items: center;
|
||||
background-image: none;
|
||||
padding-bottom: var(--art-padding);
|
||||
|
||||
.art-liquid-glass {
|
||||
border-radius: 8px;
|
||||
backdrop-filter: blur(12px);
|
||||
background-color: rgba(0, 0, 0, 0.25);
|
||||
padding: var(--art-padding) calc(var(--art-padding) * 1.5) 5px;
|
||||
}
|
||||
|
||||
.art-control-progress-inner {
|
||||
border-radius: 5px;
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
.art-settings {
|
||||
bottom: calc(var(--art-control-height) + var(--art-bottom-gap) + var(--art-padding));
|
||||
}
|
||||
|
||||
.art-layer-auto-playback {
|
||||
bottom: calc(var(--art-control-height) + var(--art-bottom-gap) + var(--art-padding) * 4 + 10px);
|
||||
}
|
||||
}
|
||||
|
||||
.art-layer-auto-playback {
|
||||
bottom: calc(var(--art-control-height) + var(--art-bottom-gap) + var(--art-padding) * 4 + 10px);
|
||||
}
|
||||
}
|
||||
}
|
||||
Reference in new issue
Block a user