mirror of
https://github.com/zhw2590582/ArtPlayer.git
synced 2026-10-23 13:51:20 -08:00
添加滑动设置
This commit is contained in:
Harvey Zack committed
1 parent
4c12972101
commit
fc978e9d85
54 files changed
+462
-205
No files matched your search
@@ -243,7 +243,7 @@ class Artplayer extends _emitterDefault.default {
|
||||
return "development";
|
||||
}
|
||||
static get build() {
|
||||
return "1652571170551";
|
||||
return "1652602797782";
|
||||
}
|
||||
static get config() {
|
||||
return _configDefault.default;
|
||||
@@ -381,7 +381,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":"doPnH","option-validator":"2tbdu","./utils/emitter":"8uSwy","./utils":"euhMG","./scheme":"jVxq1","./config":"1hSww","./whitelist":"eCrHi","./template":"eG0JW","./i18n":"6Q0In","./player":"kmRM5","./control":"nK2ZQ","./contextmenu":"iygWX","./info":"6tuCt","./subtitle":"1kFyE","./events":"akAUN","./hotkey":"f1oWx","./layer":"bKuSu","./loading":"4AfId","./notice":"aKncc","./mask":"1R5LH","./icons":"bPpva","./setting":"i2oRN","./storage":"9ruid","./plugins":"7Fd4c","./ads":"47pqz","./mobile":"hMVZh","@parcel/transformer-js/src/esmodule-helpers.js":"6SDkN"}],"doPnH":[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: none;\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 * {\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 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: all;\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 display: flex;\n position: relative;\n}\n\n.art-video-player .art-bottom .art-progress .art-control-progress .art-control-Line 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: none;\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 * {\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 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: all;\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 display: flex;\n position: relative;\n}\n\n.art-video-player .art-bottom .art-progress .art-control-progress .art-control-Line truncated
|
||||
|
||||
},{}],"2tbdu":[function(require,module,exports) {
|
||||
!function(r, t) {
|
||||
@@ -984,10 +984,14 @@ const ComponentOption = {
|
||||
style: `?${o}`,
|
||||
click: `?${f}`,
|
||||
mounted: `?${f}`,
|
||||
tooltip: `?${s}`,
|
||||
tooltip: `?${s}|${n}`,
|
||||
width: `?${n}`,
|
||||
selector: `?${a}`,
|
||||
onSelect: `?${f}`
|
||||
onSelect: `?${f}`,
|
||||
switch: `?${b}`,
|
||||
onSwitch: `?${f}`,
|
||||
range: `?${a}`,
|
||||
onRange: `?${f}`
|
||||
};
|
||||
exports.default = {
|
||||
container: validElement,
|
||||
@@ -4471,6 +4475,7 @@ class Setting extends _componentDefault.default {
|
||||
_utils.addClass($icon, 'art-setting-item-left-icon');
|
||||
switch(type){
|
||||
case 'switch':
|
||||
case 'range':
|
||||
_utils.append($icon, isStringOrNumber(item.icon) || item.icon instanceof Element ? item.icon : icons.config);
|
||||
break;
|
||||
case 'selector':
|
||||
@@ -4543,6 +4548,28 @@ class Setting extends _componentDefault.default {
|
||||
});
|
||||
break;
|
||||
}
|
||||
case 'range':
|
||||
{
|
||||
const $state = document.createElement('div');
|
||||
_utils.addClass($state, 'art-setting-item-right-icon');
|
||||
const $range = _utils.append($state, '<input type="range">');
|
||||
$range.value = item.range[0] || 0;
|
||||
$range.min = item.range[1] || 0;
|
||||
$range.max = item.range[2] || 10;
|
||||
$range.step = item.range[3] || 1;
|
||||
_utils.addClass($range, 'art-setting-range');
|
||||
_utils.append($right, $state);
|
||||
item.$range = $range;
|
||||
_utils.def(item, 'range', {
|
||||
get () {
|
||||
return $range.valueAsNumber;
|
||||
},
|
||||
set (value) {
|
||||
$range.value = Number(value);
|
||||
}
|
||||
});
|
||||
}
|
||||
break;
|
||||
case 'selector':
|
||||
if (item.selector && item.selector.length) {
|
||||
const $state = document.createElement('div');
|
||||
@@ -4554,33 +4581,39 @@ class Setting extends _componentDefault.default {
|
||||
default:
|
||||
break;
|
||||
}
|
||||
const event1 = proxy($item, 'click', async (event)=>{
|
||||
switch(type){
|
||||
case 'switch':
|
||||
if (item.onSwitch) item.switch = await item.onSwitch.call(this.art, item, $item, event);
|
||||
break;
|
||||
case 'selector':
|
||||
if (item.selector && item.selector.length) this.init(item.selector, item.width);
|
||||
else {
|
||||
_utils.inverseClass($item, 'art-current');
|
||||
if (item._parentList) this.init(item._parentList);
|
||||
if (item._parentItem && item._parentItem.onSelect) {
|
||||
const result = await item._parentItem.onSelect.call(this.art, item, $item, event);
|
||||
if (item._parentItem.$tooltip && isStringOrNumber(result)) item._parentItem.$tooltip.innerHTML = result;
|
||||
}
|
||||
}
|
||||
break;
|
||||
default:
|
||||
break;
|
||||
}
|
||||
});
|
||||
this.events.push(event1);
|
||||
switch(type){
|
||||
case 'switch':
|
||||
if (item.mounted) item.mounted.call(this.art, item, $item);
|
||||
if (item.onSwitch) {
|
||||
const event1 = proxy($item, 'click', async (event)=>{
|
||||
item.switch = await item.onSwitch.call(this.art, item, $item, event);
|
||||
});
|
||||
this.events.push(event1);
|
||||
}
|
||||
break;
|
||||
case 'range':
|
||||
if (item.onRange && item.$range) {
|
||||
const event3 = proxy(item.$range, 'change', async (event)=>{
|
||||
item.tooltip = await item.onRange.call(this.art, item, $item, event);
|
||||
});
|
||||
this.events.push(event3);
|
||||
}
|
||||
break;
|
||||
case 'selector':
|
||||
if (item.default) _utils.addClass($item, 'art-current');
|
||||
{
|
||||
const event5 = proxy($item, 'click', async (event)=>{
|
||||
if (item.selector && item.selector.length) this.init(item.selector, item.width);
|
||||
else {
|
||||
_utils.inverseClass($item, 'art-current');
|
||||
if (item._parentList) this.init(item._parentList);
|
||||
if (item._parentItem && item._parentItem.onSelect) {
|
||||
const result = await item._parentItem.onSelect.call(this.art, item, $item, event);
|
||||
if (item._parentItem.$tooltip && isStringOrNumber(result)) item._parentItem.$tooltip.innerHTML = result;
|
||||
}
|
||||
}
|
||||
});
|
||||
this.events.push(event5);
|
||||
if (item.default) _utils.addClass($item, 'art-current');
|
||||
}
|
||||
break;
|
||||
default:
|
||||
break;
|
||||
@@ -4606,6 +4639,7 @@ class Setting extends _componentDefault.default {
|
||||
for(let index = 0; index < option.length; index++){
|
||||
const item = option[index];
|
||||
if (_utils.has(item, 'switch')) _utils.append($panel, this.creatItem('switch', item));
|
||||
else if (_utils.has(item, 'range')) _utils.append($panel, this.creatItem('range', item));
|
||||
else _utils.append($panel, this.creatItem('selector', item));
|
||||
}
|
||||
_utils.append(this.$parent, $panel);
|
||||
|
||||
Reference in new issue
Block a user