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

update docs

Browse Source
This commit is contained in:
Harvey committed 2022-02-11 15:33:28 +08:00
1 parent 7b0dd9618d
commit c0ed71881b
62 files changed
+525 -396
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

packages/artplayer/src/setting/aspectRatio.js
+17 -4
View File
@@ -1,18 +1,31 @@
import { inverseClass, queryAll } from '../utils';
export default function aspectRatio(art) {
const { i18n, icons } = art;
console.log(art.aspectRatio);
return {
width: 150,
html: i18n.get('Aspect Ratio'),
icon: icons.aspectRatio,
selector: ['default', '4:3', '16:9'].map((item) => {
return {
value: item,
default: item === art.aspectRatio,
html: item === 'default' ? i18n.get('Default') : item,
default: item === 'default',
onSelect() {
art.aspectRatio = item;
},
};
}),
onSelect(item) {
art.aspectRatio = item.value;
},
mounted: ($panel) => {
art.on('aspectRatio', (value) => {
const $current = queryAll('.art-setting-item', $panel).find((item) => item.dataset.value === value);
if ($current) {
inverseClass($current, 'art-current');
}
});
},
};
}
packages/artplayer/src/setting/flip.js
+17 -6
View File
@@ -1,3 +1,5 @@
import { inverseClass, queryAll } from '../utils';
export default function flip(art) {
const { i18n } = art;
@@ -10,14 +12,23 @@ export default function flip(art) {
return {
width: 150,
html: i18n.get('Video Flip'),
selector: Object.keys(keys).map((key) => {
selector: Object.keys(keys).map((item) => {
return {
html: i18n.get(keys[key]),
default: key === 'normal',
onSelect() {
art.flip = key;
},
value: item,
default: item === art.flip,
html: i18n.get(keys[item]),
};
}),
onSelect(item) {
art.flip = item.value;
},
mounted: ($panel) => {
art.on('flip', (value) => {
const $current = queryAll('.art-setting-item', $panel).find((item) => item.dataset.value === value);
if ($current) {
inverseClass($current, 'art-current');
}
});
},
};
}
packages/artplayer/src/setting/index.js
+74 -42
View File
@@ -5,16 +5,13 @@ import subtitleOffset from './subtitleOffset';
import Component from '../utils/component';
import { append, addClass, setStyle, inverseClass, includeFromEvent } from '../utils';
function makeRecursion(option) {
function makeRecursion(option, parentItem, parentList) {
for (let index = 0; index < option.length; index++) {
const item = option[index];
if (!item.back && item.selector) {
item.selector.unshift({
html: item.html,
selector: option,
back: true,
});
makeRecursion(item.selector);
item.parentItem = parentItem;
item.parentList = parentList;
if (item.selector) {
makeRecursion(item.selector, item, option);
}
}
return option;
@@ -39,29 +36,29 @@ export default class Setting extends Component {
this.cache = new Map();
if (option.setting) {
if (option.playbackRate) {
this.option.push(playbackRate(art));
}
if (option.aspectRatio) {
this.option.push(aspectRatio(art));
}
if (option.flip) {
this.option.push(flip(art));
}
if (option.subtitleOffset) {
this.option.push(subtitleOffset(art));
}
for (let index = 0; index < option.settings.length; index++) {
this.option.push(option.settings[index]);
}
this.option = makeRecursion(this.option);
art.once('ready', () => {
if (option.playbackRate) {
this.option.push(playbackRate(art));
}
if (option.aspectRatio) {
this.option.push(aspectRatio(art));
}
if (option.flip) {
this.option.push(flip(art));
}
if (option.subtitleOffset) {
this.option.push(subtitleOffset(art));
}
for (let index = 0; index < option.settings.length; index++) {
this.option.push(option.settings[index]);
}
this.option = makeRecursion(this.option);
this.init(this.option);
});
@@ -83,6 +80,29 @@ export default class Setting extends Component {
}
}
creatHeader(item) {
const {
icons,
events: { proxy },
} = this.art;
const $item = document.createElement('div');
addClass($item, 'art-setting-item');
addClass($item, 'art-setting-item-back');
const $left = append($item, '<div class="art-setting-item-left"></div>');
const $icon = document.createElement('div');
addClass($icon, 'art-setting-item-left-icon');
append($icon, icons.arrowLeft);
append($left, $icon);
append($left, item.parentItem.html);
proxy($item, 'click', () => {
this.init(item.parentList);
});
return $item;
}
creatItem(item) {
const {
icons,
@@ -91,7 +111,14 @@ export default class Setting extends Component {
const $item = document.createElement('div');
addClass($item, 'art-setting-item');
if (item.default) addClass($item, 'art-current');
if (item.default) {
addClass($item, 'art-current');
}
if (item.value) {
$item.dataset.value = item.value;
}
const $left = append($item, '<div class="art-setting-item-left"></div>');
const $right = append($item, '<div class="art-setting-item-right"></div>');
@@ -100,16 +127,11 @@ export default class Setting extends Component {
addClass($icon, 'art-setting-item-left-icon');
const hasChildren = item.selector && item.selector.length;
if (item.back) {
addClass($item, 'art-setting-item-back');
append($icon, icons.arrowLeft);
if (hasChildren) {
append($icon, item.icon || icons.config);
append($right, icons.arrowRight);
} else {
if (hasChildren) {
append($icon, item.icon || icons.config);
append($right, icons.arrowRight);
} else {
append($icon, icons.check);
}
append($icon, icons.check);
}
append($left, $icon);
@@ -120,8 +142,8 @@ export default class Setting extends Component {
this.init(item.selector, item.width);
} else {
inverseClass($item, 'art-current');
if (item.onSelect) {
const result = item.onSelect.call(this.art, item, $item, event);
if (item.parentItem && item.parentItem.onSelect) {
const result = item.parentItem.onSelect.call(this.art, item, $item, event);
if (typeof result === 'string') {
$item.innerHTML = result;
}
@@ -146,14 +168,24 @@ export default class Setting extends Component {
} else {
const $panel = document.createElement('div');
addClass($panel, 'art-setting-panel');
if (option[0] && option[0].parentItem) {
append($panel, this.creatHeader(option[0]));
}
for (let index = 0; index < option.length; index++) {
append($panel, this.creatItem(option[index]));
}
$panel.dataset.width = width || this.width;
append(this.$parent, $panel);
this.cache.set(option, $panel);
inverseClass($panel, 'art-current');
setStyle(this.$parent, 'width', `${$panel.dataset.width}px`);
if (option[0] && option[0].parentItem && option[0].parentItem.mounted) {
option[0].parentItem.mounted.call(this.art, $panel);
}
}
}
}
packages/artplayer/src/setting/playbackRate.js
+17 -4
View File
@@ -1,3 +1,5 @@
import { inverseClass, queryAll } from '../utils';
export default function playbackRate(art) {
const { i18n, icons } = art;
@@ -7,12 +9,23 @@ export default function playbackRate(art) {
icon: icons.playbackRate,
selector: [0.25, 0.5, 0.75, 1.0, 1.25, 1.5, 1.75, 2.0].map((item) => {
return {
value: item,
default: item === art.playbackRate,
html: item === 1.0 ? i18n.get('Normal') : item,
default: item === 1.0,
onSelect() {
art.playbackRate = item;
},
};
}),
onSelect(item) {
art.playbackRate = item.value;
},
mounted: ($panel) => {
art.on('playbackRate', (value) => {
const $current = queryAll('.art-setting-item', $panel).find(
(item) => Number(item.dataset.value) === value,
);
if ($current) {
inverseClass($current, 'art-current');
}
});
},
};
}
packages/artplayer/src/setting/subtitleOffset.js
+15 -4
View File
@@ -1,3 +1,5 @@
import { inverseClass, queryAll } from '../utils';
export default function subtitleOffset(art) {
const { i18n, icons } = art;
@@ -7,12 +9,21 @@ export default function subtitleOffset(art) {
icon: icons.subtitle,
selector: [-5, -4, -3, -2, -1, 0, 1, 2, 3, 4, 5].map((item) => {
return {
value: item,
default: item === art.subtitleOffset,
html: item === 0 ? i18n.get('Normal') : item,
default: item === 0,
onSelect() {
art.subtitleOffset = item;
},
};
}),
onSelect(item) {
art.subtitleOffset = item.value;
},
mounted: ($panel) => {
art.on('subtitleOffset', (value) => {
const $current = queryAll('.art-setting-item', $panel).find((item) => item.dataset.value === value);
if ($current) {
inverseClass($current, 'art-current');
}
});
},
};
}