mirror of
https://github.com/zhw2590582/ArtPlayer.git
synced 2026-10-08 10:56:15 -08:00
feat: add liquid-glass plugin for ArtPlayer with documentation and styles
This commit is contained in:
Harvey Zhao committed
1 parent
2f42f85f90
commit
7b4ca85844
10 files changed
+395
No files matched your search
@@ -0,0 +1,28 @@
|
||||
// npm i artplayer-plugin-liquid-glass
|
||||
// import artplayerPluginLiquidGlass from 'artplayer-plugin-liquid-glass';
|
||||
|
||||
let art = new Artplayer({
|
||||
container: '.artplayer-app',
|
||||
url: '/assets/sample/video.mp4',
|
||||
autoSize: true,
|
||||
pip: true,
|
||||
setting: true,
|
||||
fullscreen: true,
|
||||
fullscreenWeb: true,
|
||||
miniProgressBar: true,
|
||||
autoPlayback: true,
|
||||
flip: true,
|
||||
playbackRate: true,
|
||||
aspectRatio: true,
|
||||
thumbnails: {
|
||||
url: '/assets/sample/thumbnails.png',
|
||||
number: 60,
|
||||
column: 10,
|
||||
scale: 0.85,
|
||||
},
|
||||
plugins: [
|
||||
artplayerPluginLiquidGlass({
|
||||
//
|
||||
}),
|
||||
],
|
||||
})
|
||||
@@ -116,6 +116,10 @@
|
||||
<li>
|
||||
<a href="/?libs=./uncompiled/artplayer-plugin-document-pip/index.js&example=document.pip">artplayer-plugin-document-pip</a>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
href="/?libs=./uncompiled/artplayer-plugin-liquid-glass/index.js&example=liquid.glass">artplayer-plugin-liquid-glass</a>
|
||||
</li>
|
||||
</ul>
|
||||
<ul>
|
||||
<li class="title">Proxys</li>
|
||||
|
||||
@@ -0,0 +1,235 @@
|
||||
// modules are defined as an array
|
||||
// [ module function, map of requires ]
|
||||
//
|
||||
// map of requires is short require name -> numeric require
|
||||
//
|
||||
// anything defined in a previous bundle is accessed via the
|
||||
// orig method which is the require for previous bundles
|
||||
|
||||
(function (
|
||||
modules,
|
||||
entry,
|
||||
mainEntry,
|
||||
parcelRequireName,
|
||||
externals,
|
||||
distDir,
|
||||
publicUrl,
|
||||
devServer
|
||||
) {
|
||||
/* eslint-disable no-undef */
|
||||
var globalObject =
|
||||
typeof globalThis !== 'undefined'
|
||||
? globalThis
|
||||
: typeof self !== 'undefined'
|
||||
? self
|
||||
: typeof window !== 'undefined'
|
||||
? window
|
||||
: typeof global !== 'undefined'
|
||||
? global
|
||||
: {};
|
||||
/* eslint-enable no-undef */
|
||||
|
||||
// Save the require from previous bundle to this closure if any
|
||||
var previousRequire =
|
||||
typeof globalObject[parcelRequireName] === 'function' &&
|
||||
globalObject[parcelRequireName];
|
||||
|
||||
var importMap = previousRequire.i || {};
|
||||
var cache = previousRequire.cache || {};
|
||||
// Do not use `require` to prevent Webpack from trying to bundle this call
|
||||
var nodeRequire =
|
||||
typeof module !== 'undefined' &&
|
||||
typeof module.require === 'function' &&
|
||||
module.require.bind(module);
|
||||
|
||||
function newRequire(name, jumped) {
|
||||
if (!cache[name]) {
|
||||
if (!modules[name]) {
|
||||
if (externals[name]) {
|
||||
return externals[name];
|
||||
}
|
||||
// if we cannot find the module within our internal map or
|
||||
// cache jump to the current global require ie. the last bundle
|
||||
// that was added to the page.
|
||||
var currentRequire =
|
||||
typeof globalObject[parcelRequireName] === 'function' &&
|
||||
globalObject[parcelRequireName];
|
||||
if (!jumped && currentRequire) {
|
||||
return currentRequire(name, true);
|
||||
}
|
||||
|
||||
// If there are other bundles on this page the require from the
|
||||
// previous one is saved to 'previousRequire'. Repeat this as
|
||||
// many times as there are bundles until the module is found or
|
||||
// we exhaust the require chain.
|
||||
if (previousRequire) {
|
||||
return previousRequire(name, true);
|
||||
}
|
||||
|
||||
// Try the node require function if it exists.
|
||||
if (nodeRequire && typeof name === 'string') {
|
||||
return nodeRequire(name);
|
||||
}
|
||||
|
||||
var err = new Error("Cannot find module '" + name + "'");
|
||||
err.code = 'MODULE_NOT_FOUND';
|
||||
throw err;
|
||||
}
|
||||
|
||||
localRequire.resolve = resolve;
|
||||
localRequire.cache = {};
|
||||
|
||||
var module = (cache[name] = new newRequire.Module(name));
|
||||
|
||||
modules[name][0].call(
|
||||
module.exports,
|
||||
localRequire,
|
||||
module,
|
||||
module.exports,
|
||||
globalObject
|
||||
);
|
||||
}
|
||||
|
||||
return cache[name].exports;
|
||||
|
||||
function localRequire(x) {
|
||||
var res = localRequire.resolve(x);
|
||||
return res === false ? {} : newRequire(res);
|
||||
}
|
||||
|
||||
function resolve(x) {
|
||||
var id = modules[name][1][x];
|
||||
return id != null ? id : x;
|
||||
}
|
||||
}
|
||||
|
||||
function Module(moduleName) {
|
||||
this.id = moduleName;
|
||||
this.bundle = newRequire;
|
||||
this.require = nodeRequire;
|
||||
this.exports = {};
|
||||
}
|
||||
|
||||
newRequire.isParcelRequire = true;
|
||||
newRequire.Module = Module;
|
||||
newRequire.modules = modules;
|
||||
newRequire.cache = cache;
|
||||
newRequire.parent = previousRequire;
|
||||
newRequire.distDir = distDir;
|
||||
newRequire.publicUrl = publicUrl;
|
||||
newRequire.devServer = devServer;
|
||||
newRequire.i = importMap;
|
||||
newRequire.register = function (id, exports) {
|
||||
modules[id] = [
|
||||
function (require, module) {
|
||||
module.exports = exports;
|
||||
},
|
||||
{},
|
||||
];
|
||||
};
|
||||
|
||||
// Only insert newRequire.load when it is actually used.
|
||||
// The code in this file is linted against ES5, so dynamic import is not allowed.
|
||||
// INSERT_LOAD_HERE
|
||||
|
||||
Object.defineProperty(newRequire, 'root', {
|
||||
get: function () {
|
||||
return globalObject[parcelRequireName];
|
||||
},
|
||||
});
|
||||
|
||||
globalObject[parcelRequireName] = newRequire;
|
||||
|
||||
for (var i = 0; i < entry.length; i++) {
|
||||
newRequire(entry[i]);
|
||||
}
|
||||
|
||||
if (mainEntry) {
|
||||
// Expose entry point to Node, AMD or browser globals
|
||||
// Based on https://github.com/ForbesLindesay/umd/blob/master/template.js
|
||||
var mainExports = newRequire(mainEntry);
|
||||
|
||||
// CommonJS
|
||||
if (typeof exports === 'object' && typeof module !== 'undefined') {
|
||||
module.exports = mainExports;
|
||||
|
||||
// RequireJS
|
||||
} else if (typeof define === 'function' && define.amd) {
|
||||
define(function () {
|
||||
return mainExports;
|
||||
});
|
||||
}
|
||||
}
|
||||
})({"iN7Pn":[function(require,module,exports,__globalThis) {
|
||||
var parcelHelpers = require("@parcel/transformer-js/src/esmodule-helpers.js");
|
||||
parcelHelpers.defineInteropFlag(exports);
|
||||
parcelHelpers.export(exports, "default", ()=>artplayerPluginLiquidGlass);
|
||||
var _styleLess = require("bundle-text:./style.less");
|
||||
var _styleLessDefault = parcelHelpers.interopDefault(_styleLess);
|
||||
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 = (0, _styleLessDefault.default);
|
||||
}
|
||||
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 !important;\n}\n\n.artplayer-plugin-liquid-glass.art-control-show .art-bottom .art-liquid-glass {\n padding: var(--art-padding) var(--art-padding) 5px;\n backdrop-filter: blur(10px);\n background-color: #ffffff1a;\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";
|
||||
|
||||
},{}],"8oCsH":[function(require,module,exports,__globalThis) {
|
||||
exports.interopDefault = function(a) {
|
||||
return a && a.__esModule ? a : {
|
||||
default: a
|
||||
};
|
||||
};
|
||||
exports.defineInteropFlag = function(a) {
|
||||
Object.defineProperty(a, '__esModule', {
|
||||
value: true
|
||||
});
|
||||
};
|
||||
exports.exportAll = function(source, dest) {
|
||||
Object.keys(source).forEach(function(key) {
|
||||
if (key === 'default' || key === '__esModule' || Object.prototype.hasOwnProperty.call(dest, key)) return;
|
||||
Object.defineProperty(dest, key, {
|
||||
enumerable: true,
|
||||
get: function() {
|
||||
return source[key];
|
||||
}
|
||||
});
|
||||
});
|
||||
return dest;
|
||||
};
|
||||
exports.export = function(dest, destName, get) {
|
||||
Object.defineProperty(dest, destName, {
|
||||
enumerable: true,
|
||||
get: get
|
||||
});
|
||||
};
|
||||
|
||||
},{}]},["iN7Pn"], "iN7Pn", "parcelRequire4dc0", {})
|
||||
|
||||
//# sourceMappingURL=index.js.map
|
||||
@@ -0,0 +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":"../../../"}
|
||||
@@ -0,0 +1,6 @@
|
||||
node_modules
|
||||
.DS_Store
|
||||
.parcel-cache
|
||||
yarn.lock
|
||||
package-lock.json
|
||||
src
|
||||
@@ -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
|
||||
@@ -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"
|
||||
}
|
||||
@@ -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
|
||||
}
|
||||
@@ -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);
|
||||
}
|
||||
}
|
||||
+13
@@ -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
|
||||
Reference in new issue
Block a user