mirror of
https://github.com/zhw2590582/ArtPlayer.git
synced 2026-10-21 21:01:20 -08:00
Aliyundrive (#436)
* init * init * add example * add initControl * add initControl * update style * update style * update style * update style * update style * update style * update style * update style * build all * build all * update style
This commit is contained in:
Harvey Zack authored and GitHub committed
1 parent
4dcde5a539
commit
6b791be35a
52 files changed
+689
-50
No files matched your search
@@ -242,13 +242,13 @@ class Artplayer extends (0, _emitterDefault.default) {
|
||||
return instances;
|
||||
}
|
||||
static get version() {
|
||||
return "4.5.13";
|
||||
return "4.6.0";
|
||||
}
|
||||
static get env() {
|
||||
return "development";
|
||||
}
|
||||
static get build() {
|
||||
return "2022-12-25 17:41:09";
|
||||
return "2022-12-31 21:05:45";
|
||||
}
|
||||
static get config() {
|
||||
return 0, _configDefault.default;
|
||||
@@ -417,7 +417,7 @@ if (typeof window !== "undefined") window["Artplayer"] = Artplayer;
|
||||
console.log(`%c ArtPlayer %c ${Artplayer.version} %c https://artplayer.org`, "color: #fff; background: #5f5f5f", "color: #fff; background: #4bc729", "");
|
||||
|
||||
},{"bundle-text:./style/index.less":"SvnDa","option-validator":"2tbdu","./utils/emitter":"elSLF","./utils":"jmgNb","./scheme":"gL38d","./config":"2ZnKD","./whitelist":"gd0pl","./template":"bDTDS","./i18n":"k0CtI","./player":"35XKf","./control":"faO0X","./contextmenu":"5npaZ","./info":"6vVKE","./subtitle":"4exyO","./events":"dz5ul","./hotkey":"1nFqF","./layer":"fvy8V","./loading":"h8KPY","./notice":"cr1XY","./mask":"llnR4","./icons":"gP6M7","./setting":"e5Aaq","./storage":"feFxw","./plugins":"h1hfO","./mobile":"c9n1Y","@parcel/transformer-js/src/esmodule-helpers.js":"5dUr6"}],"SvnDa":[function(require,module,exports) {
|
||||
module.exports = ".art-video-player {\n z-index: 20;\n width: 100%;\n height: 100%;\n zoom: 1;\n color: #eee;\n text-align: left;\n direction: ltr;\n user-select: none;\n -webkit-tap-highlight-color: #0000;\n touch-action: manipulation;\n -ms-high-contrast-adjust: none;\n background-color: #000;\n outline: 0;\n margin: 0 auto;\n font-family: Roboto, Arial, Helvetica, sans-serif;\n font-size: 14px;\n line-height: 1.3;\n display: flex;\n position: relative;\n}\n\n.art-video-player *, .art-video-player :before, .art-video-player :after {\n box-sizing: border-box;\n margin: 0;\n padding: 0;\n}\n\n.art-video-player ::-webkit-scrollbar {\n width: 5px;\n height: 5px;\n}\n\n.art-video-player ::-webkit-scrollbar-thumb {\n background-color: #666;\n}\n\n.art-video-player ::-webkit-scrollbar-thumb:hover {\n background-color: #ccc;\n}\n\n.art-video-player .art-icon {\n justify-content: center;\n align-items: center;\n line-height: 1.5;\n display: inline-flex;\n}\n\n.art-video-player .art-icon svg {\n fill: #fff;\n}\n\n.art-video-player img {\n max-width: 100%;\n vertical-align: top;\n}\n\n@supports ((-webkit-backdrop-filter: initial) or (backdrop-filter: initial)) {\n .art-video-player .art-backdrop-filter {\n -webkit-backdrop-filter: saturate(180%) blur(20px);\n backdrop-filter: saturate(180%) blur(20px);\n background-color: #000000b3 !important;\n }\n}\n\n.art-video-player .art-video {\n z-index: 10;\n width: 100%;\n height: 100%;\n cursor: pointer;\n background-color: #000;\n position: absolute;\n inset: 0;\n}\n\n.art-video-player .art-poster {\n z-index: 11;\n width: 100%;\n height: 100%;\n user-select: none;\n pointer-events: none;\n background-position: center;\n background-repeat: no-repeat;\n background-size: cover;\n position: absolute;\n inset: 0;\n}\n\n.art-video-player .art-subtitle {\n z-index: 20;\n width: 100%;\n text-align: center;\n color: #fff;\n pointer-events: none;\n text-shadow: 1px 0 1px #000, 0 1px 1px #000, -1px 0 1px #000, 0 -1px 1px #000, 1px 1px 1px #000, -1px -1px 1px #000, 1px -1px 1px #000, -1px 1px 1px #000;\n padding: 0 20px;\n font-size: 20px;\n transition: bottom .2s;\n display: none;\n position: absolute;\n bottom: 10px;\n}\n\n.art-video-player .art-subtitle p {\n word-break: break-all;\n height: fit-content;\n margin: 5px 0 0;\n line-height: 1.2;\n}\n\n.art-video-player.art-subtitle-show .art-subtitle {\n display: block;\n}\n\n.art-video-player.art-control-show .art-subtitle {\n bottom: 50px;\n}\n\n.art-video-player .art-danmuku {\n z-index: 30;\n width: 100%;\n height: 100%;\n pointer-events: none;\n position: absolute;\n inset: 0;\n overflow: hidden;\n}\n\n.art-video-player .art-layers {\n z-index: 40;\n width: 100%;\n height: 100%;\n pointer-events: none;\n display: none;\n position: absolute;\n inset: 0;\n overflow: hidden;\n}\n\n.art-video-player .art-layers .art-layer {\n pointer-events: auto;\n}\n\n.art-video-player.art-layer-show .art-layers {\n display: block;\n}\n\n.art-video-player .art-mask {\n z-index: 50;\n width: 100%;\n height: 100%;\n pointer-events: none;\n justify-content: center;\n align-items: center;\n display: none;\n position: absolute;\n inset: 0;\n overflow: hidden;\n}\n\n.art-video-player .art-mask .art-state {\n width: 60px;\n height: 60px;\n opacity: .85;\n cursor: pointer;\n pointer-events: auto;\n justify-content: center;\n align-items: center;\n display: flex;\n position: absolute;\n bottom: 65px;\n right: 30px;\n}\n\n.art-video-player.art-mask-show .art-mask {\n display: flex;\n}\n\n.art-video-player.art-mobile .art-state {\n position: static;\n}\n\n.art-video-player .art-loading {\n z-index: 70;\n width: 100%;\n height: 100%;\n pointer-events: none;\n justify-content: center;\n align-items: center;\n display: none;\n position: absolute;\n inset: 0;\n}\n\n.art-video-player.art-loading-show .art-loading {\n display: flex;\n}\n\n.art-video-player .art-bottom {\n z-index: 60;\n height: 100px;\n opacity: 0;\n visibility: hidden;\n pointer-events: none;\n background-image: linear-gradient(to top, #000, #0006, #0000);\n background-position: bottom;\n background-repeat: repeat-x;\n flex-direction: column;\n justify-content: space-between;\n padding: 50px 10px 0;\n transition: all .2s ease-in-out;\n display: flex;\n position: absolute;\n bottom: 0;\n left: 0;\n right: 0;\n}\n\n.art-video-player .art-bottom .art-progress {\n z-index: 0;\n pointer-events: auto;\n flex: 1;\n position: relative;\n}\n\n.art-video-player .art-bottom .art-progress .art-control-progress {\n height: 4px;\n cursor: pointer;\n flex-direction: row;\n align-items: center;\n display: flex;\n position: relative;\n}\n\n.art-video-player .art-bottom .art-progress .art-control-progress .art-control-progress-inner {\n height: 50%;\n width: 100%;\n background: #fff3;\n align-items: center;\n transition: all .2s;\n display: flex;\n posLine truncated
|
||||
module.exports = ".art-video-player {\n z-index: 20;\n width: 100%;\n height: 100%;\n zoom: 1;\n color: #eee;\n text-align: left;\n direction: ltr;\n user-select: none;\n -webkit-tap-highlight-color: #0000;\n touch-action: manipulation;\n -ms-high-contrast-adjust: none;\n background-color: #000;\n outline: 0;\n margin: 0 auto;\n font-family: Roboto, Arial, Helvetica, sans-serif;\n font-size: 14px;\n line-height: 1.3;\n display: flex;\n position: relative;\n}\n\n.art-video-player *, .art-video-player :before, .art-video-player :after {\n box-sizing: border-box;\n margin: 0;\n padding: 0;\n}\n\n.art-video-player ::-webkit-scrollbar {\n width: 5px;\n height: 5px;\n}\n\n.art-video-player ::-webkit-scrollbar-thumb {\n background-color: #666;\n}\n\n.art-video-player ::-webkit-scrollbar-thumb:hover {\n background-color: #ccc;\n}\n\n.art-video-player .art-icon {\n justify-content: center;\n align-items: center;\n line-height: 1.5;\n display: inline-flex;\n}\n\n.art-video-player .art-icon svg {\n fill: #fff;\n}\n\n.art-video-player img {\n max-width: 100%;\n vertical-align: top;\n}\n\n@supports ((-webkit-backdrop-filter: initial) or (backdrop-filter: initial)) {\n .art-video-player .art-backdrop-filter {\n -webkit-backdrop-filter: saturate(180%) blur(20px);\n backdrop-filter: saturate(180%) blur(20px);\n background-color: #000000b3 !important;\n }\n}\n\n.art-video-player .art-video {\n z-index: 10;\n width: 100%;\n height: 100%;\n cursor: pointer;\n background-color: #000;\n position: absolute;\n inset: 0;\n}\n\n.art-video-player .art-poster {\n z-index: 11;\n width: 100%;\n height: 100%;\n user-select: none;\n pointer-events: none;\n background-position: center;\n background-repeat: no-repeat;\n background-size: cover;\n position: absolute;\n inset: 0;\n}\n\n.art-video-player .art-subtitle {\n z-index: 20;\n width: 100%;\n text-align: center;\n color: #fff;\n pointer-events: none;\n text-shadow: 1px 0 1px #000, 0 1px 1px #000, -1px 0 1px #000, 0 -1px 1px #000, 1px 1px 1px #000, -1px -1px 1px #000, 1px -1px 1px #000, -1px 1px 1px #000;\n padding: 0 20px;\n font-size: 20px;\n transition: bottom .2s;\n display: none;\n position: absolute;\n bottom: 10px;\n}\n\n.art-video-player .art-subtitle p {\n word-break: break-all;\n height: fit-content;\n margin: 5px 0 0;\n line-height: 1.2;\n}\n\n.art-video-player.art-subtitle-show .art-subtitle {\n display: block;\n}\n\n.art-video-player.art-control-show .art-subtitle {\n bottom: 50px;\n}\n\n.art-video-player .art-danmuku {\n z-index: 30;\n width: 100%;\n height: 100%;\n pointer-events: none;\n position: absolute;\n inset: 0;\n overflow: hidden;\n}\n\n.art-video-player .art-layers {\n z-index: 40;\n width: 100%;\n height: 100%;\n pointer-events: none;\n display: none;\n position: absolute;\n inset: 0;\n overflow: hidden;\n}\n\n.art-video-player .art-layers .art-layer {\n pointer-events: auto;\n}\n\n.art-video-player.art-layer-show .art-layers {\n display: block;\n}\n\n.art-video-player .art-mask {\n z-index: 50;\n width: 100%;\n height: 100%;\n pointer-events: none;\n justify-content: center;\n align-items: center;\n display: none;\n position: absolute;\n inset: 0;\n overflow: hidden;\n}\n\n.art-video-player .art-mask .art-state {\n width: 60px;\n height: 60px;\n opacity: .85;\n cursor: pointer;\n pointer-events: auto;\n justify-content: center;\n align-items: center;\n display: flex;\n position: absolute;\n bottom: 65px;\n right: 30px;\n}\n\n.art-video-player.art-mask-show .art-mask {\n display: flex;\n}\n\n.art-video-player.art-mobile .art-state {\n position: static;\n}\n\n.art-video-player .art-loading {\n z-index: 70;\n width: 100%;\n height: 100%;\n pointer-events: none;\n justify-content: center;\n align-items: center;\n display: none;\n position: absolute;\n inset: 0;\n}\n\n.art-video-player.art-loading-show .art-loading {\n display: flex;\n}\n\n.art-video-player .art-bottom {\n z-index: 60;\n height: 100px;\n opacity: 0;\n visibility: hidden;\n pointer-events: none;\n background-image: linear-gradient(to top, #000, #0006, #0000);\n background-position: bottom;\n background-repeat: repeat-x;\n flex-direction: column;\n justify-content: space-between;\n padding: 50px 10px 0;\n transition: all .2s ease-in-out;\n display: flex;\n position: absolute;\n bottom: 0;\n left: 0;\n right: 0;\n}\n\n.art-video-player .art-bottom .art-progress {\n z-index: 0;\n pointer-events: auto;\n flex: 1;\n position: relative;\n}\n\n.art-video-player .art-bottom .art-progress .art-control-progress {\n height: 4px;\n cursor: pointer;\n flex-direction: row;\n align-items: center;\n display: flex;\n position: relative;\n}\n\n.art-video-player .art-bottom .art-progress .art-control-progress .art-control-progress-inner {\n height: 100%;\n width: 100%;\n background: #fff3;\n border-radius: 5px;\n align-items: center;\n transition: all .2s;\Line truncated
|
||||
|
||||
},{}],"2tbdu":[function(require,module,exports) {
|
||||
!function(r, t) {
|
||||
@@ -1265,7 +1265,7 @@ class Template {
|
||||
<div class="art-info-panel">
|
||||
<div class="art-info-item">
|
||||
<div class="art-info-title">Player version:</div>
|
||||
<div class="art-info-content">${"4.5.13"}</div>
|
||||
<div class="art-info-content">${"4.6.0"}</div>
|
||||
</div>
|
||||
<div class="art-info-item">
|
||||
<div class="art-info-title">Video url:</div>
|
||||
@@ -2977,6 +2977,7 @@ class Component {
|
||||
(0, _dom.addClass)($list, "art-selector-list");
|
||||
(0, _dom.append)($list, list);
|
||||
(0, _dom.append)($ref, $list);
|
||||
if (this.art.option.backdrop) (0, _dom.addClass)($list, "art-backdrop-filter");
|
||||
const setLeft = ()=>{
|
||||
const left = (0, _dom.getStyle)($ref, "width") / 2 - (0, _dom.getStyle)($list, "width") / 2;
|
||||
$list.style.left = `${left}px`;
|
||||
@@ -3004,6 +3005,8 @@ exports.default = Component;
|
||||
},{"./dom":"dNynC","option-validator":"2tbdu","../scheme":"gL38d","./property":"91nLd","./error":"622b3","@parcel/transformer-js/src/esmodule-helpers.js":"5dUr6"}],"bHDMy":[function(require,module,exports) {
|
||||
var parcelHelpers = require("@parcel/transformer-js/src/esmodule-helpers.js");
|
||||
parcelHelpers.defineInteropFlag(exports);
|
||||
var _screenfull = require("../libs/screenfull");
|
||||
var _screenfullDefault = parcelHelpers.interopDefault(_screenfull);
|
||||
var _utils = require("../utils");
|
||||
function fullscreen(option) {
|
||||
return (art)=>({
|
||||
@@ -3017,8 +3020,8 @@ function fullscreen(option) {
|
||||
proxy($control, "click", ()=>{
|
||||
art.fullscreen = !art.fullscreen;
|
||||
});
|
||||
art.on("fullscreen", (value)=>{
|
||||
if (value) {
|
||||
(0, _screenfullDefault.default).on("change", ()=>{
|
||||
if (art.fullscreen) {
|
||||
(0, _utils.tooltip)($control, i18n.get("Exit Fullscreen"));
|
||||
(0, _utils.setStyle)($fullscreenOn, "display", "none");
|
||||
(0, _utils.setStyle)($fullscreenOff, "display", "inline-flex");
|
||||
@@ -3033,7 +3036,7 @@ function fullscreen(option) {
|
||||
}
|
||||
exports.default = fullscreen;
|
||||
|
||||
},{"../utils":"jmgNb","@parcel/transformer-js/src/esmodule-helpers.js":"5dUr6"}],"8HUSd":[function(require,module,exports) {
|
||||
},{"../libs/screenfull":"eQous","../utils":"jmgNb","@parcel/transformer-js/src/esmodule-helpers.js":"5dUr6"}],"8HUSd":[function(require,module,exports) {
|
||||
var parcelHelpers = require("@parcel/transformer-js/src/esmodule-helpers.js");
|
||||
parcelHelpers.defineInteropFlag(exports);
|
||||
var _utils = require("../utils");
|
||||
@@ -3384,6 +3387,7 @@ function setting(option) {
|
||||
(0, _utils.append)($control, icons.setting);
|
||||
proxy($control, "click", ()=>{
|
||||
art.setting.toggle = true;
|
||||
art.setting.updateStyle();
|
||||
});
|
||||
art.on("setting", (value)=>{
|
||||
(0, _utils.tooltip)($control, i18n.get(value ? "Hide Setting" : "Show Setting"));
|
||||
@@ -3719,7 +3723,7 @@ parcelHelpers.defineInteropFlag(exports);
|
||||
function version(option) {
|
||||
return {
|
||||
...option,
|
||||
html: `<a href="https://artplayer.org" target="_blank">ArtPlayer ${"4.5.13"}</a>`
|
||||
html: `<a href="https://artplayer.org" target="_blank">ArtPlayer ${"4.6.0"}</a>`
|
||||
};
|
||||
}
|
||||
exports.default = version;
|
||||
@@ -4694,6 +4698,19 @@ class Setting extends (0, _componentDefault.default) {
|
||||
}
|
||||
return $item;
|
||||
}
|
||||
updateStyle(width) {
|
||||
const { controls , constructor , template: { $player , $setting } } = this.art;
|
||||
if (controls.setting && !(0, _utils.isMobile)) {
|
||||
const { left: controlLeft , width: controlWidth } = controls.setting.getBoundingClientRect();
|
||||
const { left: playerlLeft } = $player.getBoundingClientRect();
|
||||
const settingLeft = controlLeft - playerlLeft + controlWidth / 2 - (width || constructor.SETTING_WIDTH) / 2;
|
||||
(0, _utils.setStyle)($setting, "left", `${settingLeft}px`);
|
||||
(0, _utils.setStyle)($setting, "right", "auto");
|
||||
} else {
|
||||
(0, _utils.setStyle)($setting, "left", "auto");
|
||||
(0, _utils.setStyle)($setting, "right", "10px");
|
||||
}
|
||||
}
|
||||
init(option, width) {
|
||||
const { constructor } = this.art;
|
||||
if (this.cache.has(option)) {
|
||||
@@ -4701,6 +4718,7 @@ class Setting extends (0, _componentDefault.default) {
|
||||
(0, _utils.inverseClass)($panel, "art-current");
|
||||
(0, _utils.setStyle)(this.$parent, "width", `${$panel.dataset.width}px`);
|
||||
(0, _utils.setStyle)(this.$parent, "height", `${$panel.dataset.height}px`);
|
||||
this.updateStyle(Number($panel.dataset.width));
|
||||
} else {
|
||||
const $panel1 = (0, _utils.createElement)("div");
|
||||
(0, _utils.addClass)($panel1, "art-setting-panel");
|
||||
@@ -4721,6 +4739,7 @@ class Setting extends (0, _componentDefault.default) {
|
||||
(0, _utils.inverseClass)($panel1, "art-current");
|
||||
(0, _utils.setStyle)(this.$parent, "width", `${$panel1.dataset.width}px`);
|
||||
(0, _utils.setStyle)(this.$parent, "height", `${$panel1.dataset.height}px`);
|
||||
this.updateStyle(Number($panel1.dataset.width));
|
||||
if (option[0] && option[0].$parentItem && option[0].$parentItem.mounted) option[0].$parentItem.mounted.call(this.art, $panel1, option[0].$parentItem);
|
||||
}
|
||||
}
|
||||
|
||||
Reference in new issue
Block a user