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

Setting (#502)

Browse Source 
* init

* remove updateStyle

* Revert "remove updateStyle"

This reverts commit 053654ae72.

* add --art-tip-background
This commit is contained in:
Harvey Zack authored and GitHub committed 2023-04-18 16:02:00 +08:00
1 parent 4b9e8dfc9d
commit 058325d3cc
13 files changed
+32 -37
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

docs/uncompiled/artplayer/index.js
+4 -7
View File
@@ -248,7 +248,7 @@ class Artplayer extends (0, _emitterDefault.default) {
return "development";
}
static get build() {
return "2023-04-18 00:04:26";
return "2023-04-18 15:21:37";
}
static get config() {
return 0, _configDefault.default;
@@ -415,7 +415,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 --art-theme: red;\n --art-duration: .2s;\n --art-state-size: 80px;\n --art-state-opacity: .8;\n --art-subtitle-font-size: 20px;\n --art-subtitle-gap: 5px;\n --art-subtitle-bottom: 15px;\n --art-control-height: 46px;\n --art-bottom-height: 100px;\n --art-bottom-offset: -20px;\n --art-bottom-gap: 5px;\n --art-progress-height: 6px;\n --art-highlight-width: 8px;\n --art-loop-width: 2px;\n --art-control-opacity: .75;\n --art-control-icon-size: 36px;\n --art-control-icon-scale: 1.1;\n --art-volume-handle-size: 14px;\n --art-indicator-size: 16px;\n --art-subtitle-border: #000;\n --art-background: #000000d9;\n --art-settings-icon-size: 24px;\n --art-progress-color: #fff3;\n --art-hover-color: #ffffff80;\n --art-loaded-color: #fff3;\n --art-highlight-color: #ffffff80;\n --art-loop-color: #ffffffbf;\n --art-scrollbar-size: 5px;\n --art-scrollbar-background: #666;\n --art-scrollbar-background-hover: #ccc;\n --art-contextmenus-min-width: 250px;\n}\n\n.art-bg-cover {\n background-position: center;\n background-repeat: no-repeat;\n background-size: cover;\n}\n\n.art-bottom-gradient {\n background-image: linear-gradient(to top, #000, #0006, #0000);\n background-position: bottom;\n background-repeat: repeat-x;\n}\n\n.art-backdrop-filter {\n -webkit-backdrop-filter: saturate(180%) blur(20px);\n backdrop-filter: saturate(180%) blur(20px);\n background-color: #000000bf !important;\n}\n\n.art-truncate {\n text-overflow: ellipsis;\n white-space: nowrap;\n overflow: hidden;\n}\n\n.art-video-player {\n width: 100%;\n height: 100%;\n zoom: 1;\n color: #fff;\n text-align: left;\n direction: ltr;\n user-select: none;\n text-shadow: 0 0 2px #00000080;\n -webkit-tap-highlight-color: #0000;\n -ms-touch-action: manipulation;\n touch-action: manipulation;\n -ms-high-contrast-adjust: none;\n background-color: #000;\n outline: 0;\n margin: 0 auto;\n font-family: PingFang SC, Helvetica Neue, Microsoft YaHei, Roboto, Arial, sans-serif;\n font-size: 14px;\n line-height: 1.3;\n position: relative;\n overflow: hidden;\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: var(--art-scrollbar-size);\n height: var(--art-scrollbar-size);\n border-radius: 3px;\n}\n\n.art-video-player ::-webkit-scrollbar-thumb {\n background-color: var(--art-scrollbar-background);\n}\n\n.art-video-player ::-webkit-scrollbar-thumb:hover {\n background-color: var(--art-scrollbar-background-hover);\n}\n\n.art-video-player img {\n max-width: 100%;\n vertical-align: top;\n}\n\n.art-video-player svg {\n fill: #fff;\n}\n\n.art-video-player a {\n color: #fff;\n text-decoration: none;\n}\n\n.art-icon {\n justify-content: center;\n align-items: center;\n line-height: 1;\n display: flex;\n}\n\n.art-video-player.art-backdrop .art-contextmenus, .art-video-player.art-backdrop .art-info, .art-video-player.art-backdrop .art-settings, .art-video-player.art-backdrop .art-layer-auto-playback, .art-video-player.art-backdrop .art-selector-list, .art-video-player.art-backdrop .art-volume-inner {\n -webkit-backdrop-filter: saturate(180%) blur(20px);\n backdrop-filter: saturate(180%) blur(20px);\n background-color: #000000bf !important;\n}\n\n.art-video {\n z-index: 10;\n width: 100%;\n height: 100%;\n cursor: pointer;\n position: absolute;\n inset: 0;\n}\n\n.art-poster {\n z-index: 11;\n width: 100%;\n height: 100%;\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 justify-content: center;\n align-items: center;\n gap: var(--art-subtitle-gap);\n bottom: var(--art-subtitle-bottom);\n font-size: var(--art-subtitle-font-size);\n pointer-events: none;\n transition: bottom var(--art-duration) ease;\n text-shadow: var(--art-subtitle-border) 1px 0 1px, var(--art-subtitle-border) 0 1px 1px, var(--art-subtitle-border) -1px 0 1px, var(--art-subtitle-border) 0 -1px 1px, var(--art-subtitle-border) 1px 1px 1px, var(--art-subtitle-border) -1px -1px 1px, var(--art-subtitle-border) 1px -1px 1px, var(--art-subtitle-border) -1px 1px 1px;\n flex-direction: column;\n padding: 0 5%;\n display: none;\n position: absolute;\n}\n\n.art-video-player .art-subtitle p {\n word-break: break-all;\n height: fit-content;\n}\n\n.art-video-player.art-subtitle-show .art-subtitle {\n display: flex;\n}\n\n.art-video-player.art-control-show .art-subtitle {\n bottom: calc(var(--art-control-height) + var(--art-subtitle-bottom));\n}\n\n.art-danmuku {\n z-index: 30;\n width: 100%;\n height: 100%;\n pointer-events: none;\n position: absolute;\n inset: 0;\n}\n\n.art-video-player .art-layers {\n z-index: 40;\n width: 100%;\n height: 100%;\n pointer-events: none;\n displaLine truncated
module.exports = ".art-video-player {\n --art-theme: red;\n --art-duration: .2s;\n --art-padding: 10px;\n --art-state-size: 80px;\n --art-state-opacity: .8;\n --art-subtitle-font-size: 20px;\n --art-subtitle-gap: 5px;\n --art-subtitle-bottom: 15px;\n --art-control-height: 46px;\n --art-bottom-height: 100px;\n --art-bottom-offset: -20px;\n --art-bottom-gap: 5px;\n --art-progress-height: 6px;\n --art-highlight-width: 8px;\n --art-loop-width: 2px;\n --art-control-opacity: .75;\n --art-control-icon-size: 36px;\n --art-control-icon-scale: 1.1;\n --art-volume-handle-size: 14px;\n --art-indicator-size: 16px;\n --art-subtitle-border: #000;\n --art-widget-background: #000000d9;\n --art-tip-background: #00000080;\n --art-settings-icon-size: 24px;\n --art-progress-color: #fff3;\n --art-hover-color: #ffffff80;\n --art-loaded-color: #fff3;\n --art-highlight-color: #ffffff80;\n --art-loop-color: #ffffffbf;\n --art-scrollbar-size: 5px;\n --art-scrollbar-background: #666;\n --art-scrollbar-background-hover: #ccc;\n --art-contextmenus-min-width: 250px;\n}\n\n.art-bg-cover {\n background-position: center;\n background-repeat: no-repeat;\n background-size: cover;\n}\n\n.art-bottom-gradient {\n background-image: linear-gradient(to top, #000, #0006, #0000);\n background-position: bottom;\n background-repeat: repeat-x;\n}\n\n.art-backdrop-filter {\n -webkit-backdrop-filter: saturate(180%) blur(20px);\n backdrop-filter: saturate(180%) blur(20px);\n background-color: #000000bf !important;\n}\n\n.art-truncate {\n text-overflow: ellipsis;\n white-space: nowrap;\n overflow: hidden;\n}\n\n.art-video-player {\n width: 100%;\n height: 100%;\n zoom: 1;\n color: #fff;\n text-align: left;\n direction: ltr;\n user-select: none;\n text-shadow: 0 0 2px #00000080;\n -webkit-tap-highlight-color: #0000;\n -ms-touch-action: manipulation;\n touch-action: manipulation;\n -ms-high-contrast-adjust: none;\n background-color: #000;\n outline: 0;\n margin: 0 auto;\n font-family: PingFang SC, Helvetica Neue, Microsoft YaHei, Roboto, Arial, sans-serif;\n font-size: 14px;\n line-height: 1.3;\n position: relative;\n overflow: hidden;\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: var(--art-scrollbar-size);\n height: var(--art-scrollbar-size);\n border-radius: 3px;\n}\n\n.art-video-player ::-webkit-scrollbar-thumb {\n background-color: var(--art-scrollbar-background);\n}\n\n.art-video-player ::-webkit-scrollbar-thumb:hover {\n background-color: var(--art-scrollbar-background-hover);\n}\n\n.art-video-player img {\n max-width: 100%;\n vertical-align: top;\n}\n\n.art-video-player svg {\n fill: #fff;\n}\n\n.art-video-player a {\n color: #fff;\n text-decoration: none;\n}\n\n.art-icon {\n justify-content: center;\n align-items: center;\n line-height: 1;\n display: flex;\n}\n\n.art-video-player.art-backdrop .art-contextmenus, .art-video-player.art-backdrop .art-info, .art-video-player.art-backdrop .art-settings, .art-video-player.art-backdrop .art-layer-auto-playback, .art-video-player.art-backdrop .art-selector-list, .art-video-player.art-backdrop .art-volume-inner {\n -webkit-backdrop-filter: saturate(180%) blur(20px);\n backdrop-filter: saturate(180%) blur(20px);\n background-color: #000000bf !important;\n}\n\n.art-video {\n z-index: 10;\n width: 100%;\n height: 100%;\n cursor: pointer;\n position: absolute;\n inset: 0;\n}\n\n.art-poster {\n z-index: 11;\n width: 100%;\n height: 100%;\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 justify-content: center;\n align-items: center;\n gap: var(--art-subtitle-gap);\n bottom: var(--art-subtitle-bottom);\n font-size: var(--art-subtitle-font-size);\n pointer-events: none;\n transition: bottom var(--art-duration) ease;\n text-shadow: var(--art-subtitle-border) 1px 0 1px, var(--art-subtitle-border) 0 1px 1px, var(--art-subtitle-border) -1px 0 1px, var(--art-subtitle-border) 0 -1px 1px, var(--art-subtitle-border) 1px 1px 1px, var(--art-subtitle-border) -1px -1px 1px, var(--art-subtitle-border) 1px -1px 1px, var(--art-subtitle-border) -1px 1px 1px;\n flex-direction: column;\n padding: 0 5%;\n display: none;\n position: absolute;\n}\n\n.art-video-player .art-subtitle p {\n word-break: break-all;\n height: fit-content;\n}\n\n.art-video-player.art-subtitle-show .art-subtitle {\n display: flex;\n}\n\n.art-video-player.art-control-show .art-subtitle {\n bottom: calc(var(--art-control-height) + var(--art-subtitle-bottom));\n}\n\n.art-danmuku {\n z-index: 30;\n width: 100%;\n height: 100%;\n pointer-events: none;\n position: absolute;\n inset: 0;\n}\n\n.art-video-player .art-layers {\n z-index: 40;\Line truncated
},{}],"2tbdu":[function(require,module,exports) {
!function(r, t) {
@@ -4548,7 +4548,7 @@ class Setting extends (0, _componentDefault.default) {
const item = option[index];
item.$parentItem = parentItem;
item.$parentList = parentList;
if (item.selector) Setting.makeRecursion(item.selector, item, option);
Setting.makeRecursion(item.selector || [], item, option);
}
return option;
}
@@ -4777,7 +4777,7 @@ class Setting extends (0, _componentDefault.default) {
}
updateStyle(width) {
const { controls , constructor , template: { $player , $setting } } = this.art;
if (controls.setting) {
if (controls.setting && !(0, _utils.isMobile)) {
const settingWidth = width || constructor.SETTING_WIDTH;
const { left: controlLeft , width: controlWidth } = controls.setting.getBoundingClientRect();
const { left: playerLeft , width: playerWidth } = $player.getBoundingClientRect();
@@ -4789,9 +4789,6 @@ class Setting extends (0, _componentDefault.default) {
(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) {