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

add createElement

Browse Source
This commit is contained in:
Harvey committed 2022-08-18 09:40:33 +08:00
1 parent 326a292e27
commit 8c9db3f302
10 files changed
+50 -42
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

packages/artplayer/src/icons/index.js
+2 -2
View File
@@ -1,4 +1,4 @@
import { append, def, addClass } from '../utils';
import { append, def, addClass, createElement } from '../utils';
import loading from 'bundle-text:./loading.svg';
import state from 'bundle-text:./state.svg';
import check from 'bundle-text:./check.svg';
@@ -63,7 +63,7 @@ export default class Icons {
Object.keys(icons).forEach((key) => {
def(this, key, {
get: () => {
const icon = document.createElement('i');
const icon = createElement('i');
addClass(icon, 'art-icon');
addClass(icon, `art-icon-${key}`);
append(icon, icons[key]);
packages/artplayer/src/index.js
+1 -1
View File
@@ -230,7 +230,7 @@ Artplayer.TOUCH_MOVE_RATIO = 0.5;
if (typeof document !== 'undefined') {
if (!document.getElementById('artplayer-style')) {
const $style = document.createElement('style');
const $style = utils.createElement('style');
$style.id = 'artplayer-style';
$style.textContent = style;
document.head.appendChild($style);
packages/artplayer/src/player/screenshotMix.js
+2 -2
View File
@@ -1,4 +1,4 @@
import { secondToTime, download, def } from '../utils';
import { secondToTime, download, def, createElement } from '../utils';
export default function screenshotMix(art) {
const {
@@ -7,7 +7,7 @@ export default function screenshotMix(art) {
template: { $video },
} = art;
const $canvas = document.createElement('canvas');
const $canvas = createElement('canvas');
def(art, 'getDataURL', {
value: () =>
packages/artplayer/src/setting/index.js
+11 -11
View File
@@ -3,7 +3,7 @@ import aspectRatio from './aspectRatio';
import playbackRate from './playbackRate';
import subtitleOffset from './subtitleOffset';
import Component from '../utils/component';
import { append, addClass, setStyle, inverseClass, includeFromEvent, def, has } from '../utils';
import { append, addClass, setStyle, inverseClass, includeFromEvent, def, has, createElement } from '../utils';
function makeRecursion(option, parentItem, parentList) {
for (let index = 0; index < option.length; index++) {
@@ -104,11 +104,11 @@ export default class Setting extends Component {
events: { proxy },
} = this.art;
const $item = document.createElement('div');
const $item = 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');
const $icon = createElement('div');
addClass($icon, 'art-setting-item-left-icon');
append($icon, icons.arrowLeft);
append($left, $icon);
@@ -129,7 +129,7 @@ export default class Setting extends Component {
events: { proxy },
} = this.art;
const $item = document.createElement('div');
const $item = createElement('div');
addClass($item, 'art-setting-item');
if (isStringOrNumber(item.name)) {
@@ -143,7 +143,7 @@ export default class Setting extends Component {
const $left = append($item, '<div class="art-setting-item-left"></div>');
const $right = append($item, '<div class="art-setting-item-right"></div>');
const $icon = document.createElement('div');
const $icon = createElement('div');
addClass($icon, 'art-setting-item-left-icon');
switch (type) {
@@ -180,7 +180,7 @@ export default class Setting extends Component {
},
});
const $html = document.createElement('div');
const $html = createElement('div');
addClass($html, 'art-setting-item-left-text');
append($html, item.html || '');
append($left, $html);
@@ -198,7 +198,7 @@ export default class Setting extends Component {
},
});
const $tooltip = document.createElement('div');
const $tooltip = createElement('div');
addClass($tooltip, 'art-setting-item-right-tooltip');
append($tooltip, item.tooltip || '');
append($right, $tooltip);
@@ -218,7 +218,7 @@ export default class Setting extends Component {
switch (type) {
case 'switch': {
const $state = document.createElement('div');
const $state = createElement('div');
addClass($state, 'art-setting-item-right-icon');
const $switchOn = append($state, icons.switchOn);
const $switchOff = append($state, icons.switchOff);
@@ -246,7 +246,7 @@ export default class Setting extends Component {
}
case 'range':
{
const $state = document.createElement('div');
const $state = createElement('div');
addClass($state, 'art-setting-item-right-icon');
const $range = append($state, '<input type="range">');
$range.value = item.range[0] || 0;
@@ -270,7 +270,7 @@ export default class Setting extends Component {
break;
case 'selector':
if (item.selector && item.selector.length) {
const $state = document.createElement('div');
const $state = createElement('div');
addClass($state, 'art-setting-item-right-icon');
append($state, icons.arrowRight);
append($right, $state);
@@ -345,7 +345,7 @@ export default class Setting extends Component {
setStyle(this.$parent, 'width', `${$panel.dataset.width}px`);
setStyle(this.$parent, 'height', `${$panel.dataset.height}px`);
} else {
const $panel = document.createElement('div');
const $panel = createElement('div');
addClass($panel, 'art-setting-panel');
$panel.dataset.width = width || constructor.SETTING_WIDTH;
$panel.dataset.height = option.length * constructor.SETTING_ITEM_HEIGHT;
packages/artplayer/src/subtitle.js
+2 -2
View File
@@ -1,4 +1,4 @@
import { setStyle, setStyles, srtToVtt, vttToBlob, getExt, assToVtt, escape, errorHandle } from './utils';
import { setStyle, setStyles, srtToVtt, vttToBlob, getExt, assToVtt, escape, errorHandle, createElement } from './utils';
import Component from './utils/component';
import validator from 'option-validator';
import scheme from './scheme';
@@ -69,7 +69,7 @@ export default class Subtitle extends Component {
} = this.art;
if (!$track) {
const $track = document.createElement('track');
const $track = createElement('track');
$track.default = true;
$track.kind = 'metadata';
$video.appendChild($track);
packages/artplayer/src/utils/component.js
+4 -4
View File
@@ -1,4 +1,4 @@
import { hasClass, addClass, removeClass, append, setStyles, tooltip, getStyle, inverseClass } from './dom';
import { hasClass, addClass, removeClass, append, setStyles, tooltip, getStyle, inverseClass, createElement } from './dom';
import validator from 'option-validator';
import { ComponentOption } from '../scheme';
import { has, def } from './property';
@@ -42,7 +42,7 @@ export default class Component {
errorHandle(!has(this, name), `Cannot add an existing name [${name}] to the [${this.name}]`);
this.id += 1;
const $ref = document.createElement('div');
const $ref = createElement('div');
addClass($ref, `art-${this.name}`);
addClass($ref, `art-${this.name}-${name}`);
@@ -97,7 +97,7 @@ export default class Component {
const { hover, proxy } = this.art.events;
addClass($ref, 'art-control-selector');
const $value = document.createElement('div');
const $value = createElement('div');
addClass($value, 'art-selector-value');
append($value, option.html);
$ref.innerText = '';
@@ -111,7 +111,7 @@ export default class Component {
}</div>`,
)
.join('');
const $list = document.createElement('div');
const $list = createElement('div');
addClass($list, 'art-selector-list');
append($list, list);
append($ref, $list);
packages/artplayer/src/utils/dom.js
+4
View File
@@ -83,3 +83,7 @@ export function replaceElement(newChild, oldChild) {
oldChild.parentNode.replaceChild(newChild, oldChild);
return newChild;
}
export function createElement(tag) {
return document.createElement(tag);
}