mirror of
https://github.com/zhw2590582/ArtPlayer.git
synced 2026-10-27 01:21:20 -08:00
格式化
This commit is contained in:
Harvey Zack committed
1 parent
0454f785be
commit
203ad0d3a0
75 files changed
+3120
-2904
No files matched your search
@@ -14,159 +14,187 @@ import Quality from './quality';
|
||||
|
||||
let id = 0;
|
||||
export default class Controls {
|
||||
constructor(art) {
|
||||
id = 0;
|
||||
this.art = art;
|
||||
this.art.on('firstCanplay', () => {
|
||||
this.init();
|
||||
});
|
||||
}
|
||||
|
||||
init() {
|
||||
this.add(new Progress({
|
||||
name: 'progress',
|
||||
disable: false,
|
||||
position: 'top',
|
||||
index: 10
|
||||
}));
|
||||
|
||||
this.add(new Thumbnails({
|
||||
name: 'thumbnails',
|
||||
disable: !this.art.option.thumbnails.url,
|
||||
position: 'top',
|
||||
index: 20
|
||||
}));
|
||||
|
||||
this.add(new PlayAndPause({
|
||||
name: 'playAndPause',
|
||||
disable: false,
|
||||
position: 'left',
|
||||
index: 10
|
||||
}));
|
||||
|
||||
this.add(new Volume({
|
||||
name: 'volume',
|
||||
disable: false,
|
||||
position: 'left',
|
||||
index: 20
|
||||
}));
|
||||
|
||||
this.add(new Time({
|
||||
name: 'time',
|
||||
disable: false,
|
||||
position: 'left',
|
||||
index: 30
|
||||
}));
|
||||
|
||||
this.add(new Quality({
|
||||
name: 'quality',
|
||||
disable: this.art.option.quality.length === 0,
|
||||
position: 'right',
|
||||
index: 10
|
||||
}));
|
||||
|
||||
this.add(new Screenshot({
|
||||
name: 'screenshot',
|
||||
disable: !this.art.option.screenshot,
|
||||
position: 'right',
|
||||
index: 20
|
||||
}));
|
||||
|
||||
this.add(new Subtitle({
|
||||
name: 'subtitle',
|
||||
disable: !this.art.option.subtitle.url,
|
||||
position: 'right',
|
||||
index: 30
|
||||
}));
|
||||
|
||||
this.add(new Setting({
|
||||
name: 'setting',
|
||||
disable: !this.art.option.setting,
|
||||
position: 'right',
|
||||
index: 40
|
||||
}));
|
||||
|
||||
this.add(new Pip({
|
||||
name: 'pip',
|
||||
disable: !this.art.option.pip,
|
||||
position: 'right',
|
||||
index: 50
|
||||
}));
|
||||
|
||||
this.add(new FullscreenWeb({
|
||||
name: 'fullscreenWeb',
|
||||
disable: !this.art.option.fullscreenWeb,
|
||||
position: 'right',
|
||||
index: 60
|
||||
}));
|
||||
|
||||
this.add(new Fullscreen({
|
||||
name: 'fullscreen',
|
||||
disable: !this.art.option.fullscreen,
|
||||
position: 'right',
|
||||
index: 70
|
||||
}));
|
||||
|
||||
this.art.option.controls.forEach(item => {
|
||||
this.add(item);
|
||||
});
|
||||
}
|
||||
|
||||
add(control, callback) {
|
||||
const { option } = control;
|
||||
if (option && !option.disable) {
|
||||
id++;
|
||||
const name = option.name || `control${id}`;
|
||||
const $control = document.createElement('div');
|
||||
$control.classList.value = `art-control art-control-${name}`;
|
||||
this.mount(option.position, $control, option.index || id);
|
||||
this.commonMethod(control, $control);
|
||||
control.apply && control.apply(this.art, $control);
|
||||
callback && callback($control);
|
||||
this[name] = control;
|
||||
constructor(art) {
|
||||
id = 0;
|
||||
this.art = art;
|
||||
this.art.on('firstCanplay', () => {
|
||||
this.init();
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
mount(position, $control, index) {
|
||||
const { $progress, $controlsLeft, $controlsRight } = this.art.refs;
|
||||
switch (position) {
|
||||
case 'top':
|
||||
insertByIndex($progress, $control, index);
|
||||
break;
|
||||
case 'left':
|
||||
insertByIndex($controlsLeft, $control, index);
|
||||
break;
|
||||
case 'right':
|
||||
insertByIndex($controlsRight, $control, index);
|
||||
break;
|
||||
default:
|
||||
break;
|
||||
init() {
|
||||
this.add(
|
||||
new Progress({
|
||||
name: 'progress',
|
||||
disable: false,
|
||||
position: 'top',
|
||||
index: 10,
|
||||
}),
|
||||
);
|
||||
|
||||
this.add(
|
||||
new Thumbnails({
|
||||
name: 'thumbnails',
|
||||
disable: !this.art.option.thumbnails.url,
|
||||
position: 'top',
|
||||
index: 20,
|
||||
}),
|
||||
);
|
||||
|
||||
this.add(
|
||||
new PlayAndPause({
|
||||
name: 'playAndPause',
|
||||
disable: false,
|
||||
position: 'left',
|
||||
index: 10,
|
||||
}),
|
||||
);
|
||||
|
||||
this.add(
|
||||
new Volume({
|
||||
name: 'volume',
|
||||
disable: false,
|
||||
position: 'left',
|
||||
index: 20,
|
||||
}),
|
||||
);
|
||||
|
||||
this.add(
|
||||
new Time({
|
||||
name: 'time',
|
||||
disable: false,
|
||||
position: 'left',
|
||||
index: 30,
|
||||
}),
|
||||
);
|
||||
|
||||
this.add(
|
||||
new Quality({
|
||||
name: 'quality',
|
||||
disable: this.art.option.quality.length === 0,
|
||||
position: 'right',
|
||||
index: 10,
|
||||
}),
|
||||
);
|
||||
|
||||
this.add(
|
||||
new Screenshot({
|
||||
name: 'screenshot',
|
||||
disable: !this.art.option.screenshot,
|
||||
position: 'right',
|
||||
index: 20,
|
||||
}),
|
||||
);
|
||||
|
||||
this.add(
|
||||
new Subtitle({
|
||||
name: 'subtitle',
|
||||
disable: !this.art.option.subtitle.url,
|
||||
position: 'right',
|
||||
index: 30,
|
||||
}),
|
||||
);
|
||||
|
||||
this.add(
|
||||
new Setting({
|
||||
name: 'setting',
|
||||
disable: !this.art.option.setting,
|
||||
position: 'right',
|
||||
index: 40,
|
||||
}),
|
||||
);
|
||||
|
||||
this.add(
|
||||
new Pip({
|
||||
name: 'pip',
|
||||
disable: !this.art.option.pip,
|
||||
position: 'right',
|
||||
index: 50,
|
||||
}),
|
||||
);
|
||||
|
||||
this.add(
|
||||
new FullscreenWeb({
|
||||
name: 'fullscreenWeb',
|
||||
disable: !this.art.option.fullscreenWeb,
|
||||
position: 'right',
|
||||
index: 60,
|
||||
}),
|
||||
);
|
||||
|
||||
this.add(
|
||||
new Fullscreen({
|
||||
name: 'fullscreen',
|
||||
disable: !this.art.option.fullscreen,
|
||||
position: 'right',
|
||||
index: 70,
|
||||
}),
|
||||
);
|
||||
|
||||
this.art.option.controls.forEach(item => {
|
||||
this.add(item);
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
commonMethod(control, $control) {
|
||||
Object.defineProperty(control, 'hide', {
|
||||
value: () => {
|
||||
setStyle($control, 'display', 'none');
|
||||
this.art.emit('control:hide', $control);
|
||||
}
|
||||
});
|
||||
add(control, callback) {
|
||||
const { option } = control;
|
||||
if (option && !option.disable) {
|
||||
id += 1;
|
||||
const name = option.name || `control${id}`;
|
||||
const $control = document.createElement('div');
|
||||
$control.classList.value = `art-control art-control-${name}`;
|
||||
this.mount(option.position, $control, option.index || id);
|
||||
this.commonMethod(control, $control);
|
||||
if (control.apply) {
|
||||
control.apply(this.art, $control);
|
||||
}
|
||||
if (callback) {
|
||||
callback($control);
|
||||
}
|
||||
this[name] = control;
|
||||
}
|
||||
}
|
||||
|
||||
Object.defineProperty(control, 'show', {
|
||||
value: () => {
|
||||
setStyle($control, 'display', 'block');
|
||||
this.art.emit('control:show', $control);
|
||||
}
|
||||
});
|
||||
}
|
||||
mount(position, $control, index) {
|
||||
const { $progress, $controlsLeft, $controlsRight } = this.art.refs;
|
||||
switch (position) {
|
||||
case 'top':
|
||||
insertByIndex($progress, $control, index);
|
||||
break;
|
||||
case 'left':
|
||||
insertByIndex($controlsLeft, $control, index);
|
||||
break;
|
||||
case 'right':
|
||||
insertByIndex($controlsRight, $control, index);
|
||||
break;
|
||||
default:
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
show() {
|
||||
const { $player } = this.art.refs;
|
||||
$player.classList.add('artplayer-controls-show');
|
||||
}
|
||||
commonMethod(control, $control) {
|
||||
Object.defineProperty(control, 'hide', {
|
||||
value: () => {
|
||||
setStyle($control, 'display', 'none');
|
||||
this.art.emit('control:hide', $control);
|
||||
},
|
||||
});
|
||||
|
||||
hide() {
|
||||
const { $player } = this.art.refs;
|
||||
$player.classList.remove('artplayer-controls-show');
|
||||
}
|
||||
Object.defineProperty(control, 'show', {
|
||||
value: () => {
|
||||
setStyle($control, 'display', 'block');
|
||||
this.art.emit('control:show', $control);
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
show() {
|
||||
const { $player } = this.art.refs;
|
||||
$player.classList.add('artplayer-controls-show');
|
||||
}
|
||||
|
||||
hide() {
|
||||
const { $player } = this.art.refs;
|
||||
$player.classList.remove('artplayer-controls-show');
|
||||
}
|
||||
}
|
||||
Reference in new issue
Block a user