x15904151985/ArtPlayer
1
0 Fork 0
mirror of https://github.com/zhw2590582/ArtPlayer.git synced 2026-10-21 12:41:20 -08:00
Code Issues Packages Projects Releases Wiki Activity

Refactor Artplayer class to update qualityMix.js and component.js

Browse Source
This commit is contained in:
Harvey Zack committed 2024-10-21 11:18:22 +08:00
1 parent c82e381aa1
commit 945ff841d5
5 files changed
+159 -109
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

packages/artplayer/src/control/index.js
+90 -1
View File
@@ -1,4 +1,3 @@
import { errorHandle, addClass, removeClass, isMobile, sleep, includeFromEvent } from '../utils';
import Component from '../utils/component';
import fullscreen from './fullscreen';
import fullscreenWeb from './fullscreenWeb';
@@ -10,6 +9,20 @@ import volume from './volume';
import setting from './setting';
import screenshot from './screenshot';
import airplay from './airplay';
import {
def,
sleep,
append,
addClass,
isMobile,
getStyle,
hasClass,
removeClass,
errorHandle,
inverseClass,
createElement,
includeFromEvent,
} from '../utils';
export default class Control extends Component {
constructor(art) {
@@ -204,4 +217,80 @@ export default class Control extends Component {
super.add(option);
}
check(item) {
//
}
selector(option, $ref, events) {
const { hover, proxy } = this.art.events;
addClass($ref, 'art-control-selector');
const $value = createElement('div');
addClass($value, 'art-selector-value');
append($value, option.html);
$ref.innerText = '';
append($ref, $value);
const $list = createElement('div');
addClass($list, 'art-selector-list');
append($ref, $list);
for (let index = 0; index < option.selector.length; index++) {
const item = option.selector[index];
const $item = createElement('div');
addClass($item, 'art-selector-item');
if (item.default) addClass($item, 'art-current');
$item.dataset.index = index;
$item.dataset.value = item.value;
$item.innerHTML = item.html;
append($list, $item);
def(item, '$item', {
configurable: true,
get() {
return $item;
},
});
def(item, '$value', {
configurable: true,
get() {
return $value;
},
});
def(item, '$list', {
configurable: true,
get() {
return $list;
},
});
}
const setLeft = () => {
const refWidth = getStyle($ref, 'width');
const listWidth = getStyle($list, 'width');
const left = refWidth / 2 - listWidth / 2;
$list.style.left = `${left}px`;
};
hover($ref, setLeft);
const event = proxy($list, 'click', async (event) => {
const path = event.composedPath() || [];
const $item = path.find((item) => hasClass(item, 'art-selector-item'));
if (!$item) return;
inverseClass($item, 'art-current');
const index = Number($item.dataset.index);
const find = option.selector[index] || {};
$value.innerText = $item.innerText;
if (option.onSelect) {
$value.innerHTML = await option.onSelect.call(this.art, find, $item, event);
}
setLeft();
});
events.push(event);
}
}
packages/artplayer/src/player/qualityMix.js
+1
View File
@@ -17,6 +17,7 @@ export default function qualityMix(art) {
async onSelect(item) {
await art.switchQuality(item.url);
notice.show = `${i18n.get('Switch Video')}: ${item.html}`;
return item.html;
},
});
},
packages/artplayer/src/utils/component.js
+2 -66
View File
@@ -1,15 +1,4 @@
import {
remove,
append,
tooltip,
hasClass,
addClass,
getStyle,
setStyles,
removeClass,
inverseClass,
createElement,
} from './dom';
import { remove, append, tooltip, hasClass, addClass, setStyles, removeClass, createElement } from './dom';
import { errorHandle } from './error';
import validator from 'option-validator';
import { ComponentOption } from '../scheme';
@@ -88,7 +77,7 @@ export default class Component {
}
if (option.selector && ['left', 'right'].includes(option.position)) {
this.addSelector(option, $ref, events);
this.selector(option, $ref, events);
}
this[name] = $ref;
@@ -101,59 +90,6 @@ export default class Component {
return $ref;
}
addSelector(option, $ref, events) {
const { hover, proxy } = this.art.events;
addClass($ref, 'art-control-selector');
const $value = createElement('div');
addClass($value, 'art-selector-value');
append($value, option.html);
$ref.innerText = '';
append($ref, $value);
const list = option.selector
.map(
(item, index) =>
`<div
class="art-selector-item ${item.default ? 'art-current' : ''}"
data-index="${index}"
data-value="${item.value}"
>
${item.html}
</div>`,
)
.join('');
const $list = createElement('div');
addClass($list, 'art-selector-list');
append($list, list);
append($ref, $list);
const setLeft = () => {
const refWidth = getStyle($ref, 'width');
const listWidth = getStyle($list, 'width');
const left = refWidth / 2 - listWidth / 2;
$list.style.left = `${left}px`;
};
hover($ref, setLeft);
const destroyEvent = proxy($list, 'click', async (event) => {
const path = event.composedPath() || [];
const $item = path.find((item) => hasClass(item, 'art-selector-item'));
if (!$item) return;
inverseClass($item, 'art-current');
const index = Number($item.dataset.index);
const find = option.selector[index] || {};
$value.innerText = $item.innerText;
if (option.onSelect) {
$value.innerHTML = await option.onSelect.call(this.art, find, $item, event);
}
setLeft();
});
events.push(destroyEvent);
}
remove(name) {
const item = this.cache.get(name);
errorHandle(item, `Can't find [${name}] from the [${this.name}]`);