add createElement

docs/assets/js/common.js

@@ -49,7 +49,7 @@
                         [
                             'var art = new Artplayer({',
                             "\tcontainer: '.artplayer-app',",
-                            "\turl: 'https://artplayer.org/assets/sample/video.mp4',",
+                            "\turl: '/assets/sample/video.mp4',",
                             '});',
                         ].join('\n'),
                         'javascript',

docs/uncompiled/artplayer/index.js

@@ -240,7 +240,7 @@ class Artplayer extends (0, _emitterDefault.default) {
         return "development";
     }
     static get build() {
-        return "1660634084987";
+        return "1660786773540";
     }
     static get config() {
         return 0, _configDefault.default;
@@ -373,7 +373,7 @@ Artplayer.FAST_FORWARD_TIME = 1000;
 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 = (0, _indexLessDefault.default);
         document.head.appendChild($style);
@@ -638,6 +638,7 @@ parcelHelpers.export(exports, "tooltip", ()=>tooltip);
 parcelHelpers.export(exports, "isInViewport", ()=>isInViewport);
 parcelHelpers.export(exports, "includeFromEvent", ()=>includeFromEvent);
 parcelHelpers.export(exports, "replaceElement", ()=>replaceElement);
+parcelHelpers.export(exports, "createElement", ()=>createElement);
 var _compatibility = require("./compatibility");
 function query(selector, parent = document) {
     return parent.querySelector(selector);
@@ -704,6 +705,9 @@ function replaceElement(newChild, oldChild) {
     oldChild.parentNode.replaceChild(newChild, oldChild);
     return newChild;
 }
+function createElement(tag) {
+    return document.createElement(tag);
+}
 
 },{"./compatibility":"bRDYJ","@parcel/transformer-js/src/esmodule-helpers.js":"8MjWm"}],"bRDYJ":[function(require,module,exports) {
 var parcelHelpers = require("@parcel/transformer-js/src/esmodule-helpers.js");
@@ -1786,7 +1790,7 @@ parcelHelpers.defineInteropFlag(exports);
 var _utils = require("../utils");
 function screenshotMix(art) {
     const { option , notice , template: { $video  } ,  } = art;
-    const $canvas = document.createElement("canvas");
+    const $canvas = (0, _utils.createElement)("canvas");
     (0, _utils.def)(art, "getDataURL", {
         value: ()=>new Promise((resolve, reject)=>{
                 try {
@@ -2883,7 +2887,7 @@ class Component {
         const name = option.name || `${this.name}${this.id}`;
         (0, _error.errorHandle)(!(0, _property.has)(this, name), `Cannot add an existing name [${name}] to the [${this.name}]`);
         this.id += 1;
-        const $ref = document.createElement("div");
+        const $ref = (0, _dom.createElement)("div");
         (0, _dom.addClass)($ref, `art-${this.name}`);
         (0, _dom.addClass)($ref, `art-${this.name}-${name}`);
         const childs = Array.from(this.$parent.children);
@@ -2912,13 +2916,13 @@ class Component {
     selector(option, $ref) {
         const { hover , proxy  } = this.art.events;
         (0, _dom.addClass)($ref, "art-control-selector");
-        const $value = document.createElement("div");
+        const $value = (0, _dom.createElement)("div");
         (0, _dom.addClass)($value, "art-selector-value");
         (0, _dom.append)($value, option.html);
         $ref.innerText = "";
         (0, _dom.append)($ref, $value);
         const list = option.selector.map((item, index)=>`<div class="art-selector-item ${item.default ? "art-current" : ""}" data-index="${index}">${item.html}</div>`).join("");
-        const $list = document.createElement("div");
+        const $list = (0, _dom.createElement)("div");
         (0, _dom.addClass)($list, "art-selector-list");
         (0, _dom.append)($list, list);
         (0, _dom.append)($ref, $list);
@@ -3763,7 +3767,7 @@ class Subtitle extends (0, _componentDefault.default) {
         if (!subtitleOption.url) return;
         const { notice , events: { proxy  } , template: { $subtitle , $video , $track  } ,  } = this.art;
         if (!$track) {
-            const $track = document.createElement("track");
+            const $track = (0, _utils.createElement)("track");
             $track.default = true;
             $track.kind = "metadata";
             $video.appendChild($track);
@@ -4254,7 +4258,7 @@ class Icons {
         Object.keys(icons).forEach((key)=>{
             (0, _utils.def)(this, key, {
                 get: ()=>{
-                    const icon = document.createElement("i");
+                    const icon = (0, _utils.createElement)("i");
                     (0, _utils.addClass)(icon, "art-icon");
                     (0, _utils.addClass)(icon, `art-icon-${key}`);
                     (0, _utils.append)(icon, icons[key]);
@@ -4419,11 +4423,11 @@ class Setting extends (0, _componentDefault.default) {
     }
     creatHeader(item) {
         const { icons , events: { proxy  } ,  } = this.art;
-        const $item = document.createElement("div");
+        const $item = (0, _utils.createElement)("div");
         (0, _utils.addClass)($item, "art-setting-item");
         (0, _utils.addClass)($item, "art-setting-item-back");
         const $left = (0, _utils.append)($item, '<div class="art-setting-item-left"></div>');
-        const $icon = document.createElement("div");
+        const $icon = (0, _utils.createElement)("div");
         (0, _utils.addClass)($icon, "art-setting-item-left-icon");
         (0, _utils.append)($icon, icons.arrowLeft);
         (0, _utils.append)($left, $icon);
@@ -4436,13 +4440,13 @@ class Setting extends (0, _componentDefault.default) {
     }
     creatItem(type, item) {
         const { icons , events: { proxy  } ,  } = this.art;
-        const $item = document.createElement("div");
+        const $item = (0, _utils.createElement)("div");
         (0, _utils.addClass)($item, "art-setting-item");
         if (isStringOrNumber(item.name)) $item.dataset.name = item.name;
         if (isStringOrNumber(item.value)) $item.dataset.value = item.value;
         const $left = (0, _utils.append)($item, '<div class="art-setting-item-left"></div>');
         const $right = (0, _utils.append)($item, '<div class="art-setting-item-right"></div>');
-        const $icon = document.createElement("div");
+        const $icon = (0, _utils.createElement)("div");
         (0, _utils.addClass)($icon, "art-setting-item-left-icon");
         switch(type){
             case "switch":
@@ -4467,7 +4471,7 @@ class Setting extends (0, _componentDefault.default) {
                 if (isStringOrNumber(value)) $icon.innerHTML = value;
             }
         });
-        const $html = document.createElement("div");
+        const $html = (0, _utils.createElement)("div");
         (0, _utils.addClass)($html, "art-setting-item-left-text");
         (0, _utils.append)($html, item.html || "");
         (0, _utils.append)($left, $html);
@@ -4481,7 +4485,7 @@ class Setting extends (0, _componentDefault.default) {
                 if (isStringOrNumber(value)) $html.innerHTML = value;
             }
         });
-        const $tooltip = document.createElement("div");
+        const $tooltip = (0, _utils.createElement)("div");
         (0, _utils.addClass)($tooltip, "art-setting-item-right-tooltip");
         (0, _utils.append)($tooltip, item.tooltip || "");
         (0, _utils.append)($right, $tooltip);
@@ -4498,7 +4502,7 @@ class Setting extends (0, _componentDefault.default) {
         switch(type){
             case "switch":
                 {
-                    const $state = document.createElement("div");
+                    const $state = (0, _utils.createElement)("div");
                     (0, _utils.addClass)($state, "art-setting-item-right-icon");
                     const $switchOn = (0, _utils.append)($state, icons.switchOn);
                     const $switchOff = (0, _utils.append)($state, icons.switchOff);
@@ -4525,7 +4529,7 @@ class Setting extends (0, _componentDefault.default) {
                 }
             case "range":
                 {
-                    const $state = document.createElement("div");
+                    const $state = (0, _utils.createElement)("div");
                     (0, _utils.addClass)($state, "art-setting-item-right-icon");
                     const $range = (0, _utils.append)($state, '<input type="range">');
                     $range.value = item.range[0] || 0;
@@ -4548,7 +4552,7 @@ class Setting extends (0, _componentDefault.default) {
                 break;
             case "selector":
                 if (item.selector && item.selector.length) {
-                    const $state = document.createElement("div");
+                    const $state = (0, _utils.createElement)("div");
                     (0, _utils.addClass)($state, "art-setting-item-right-icon");
                     (0, _utils.append)($state, icons.arrowRight);
                     (0, _utils.append)($right, $state);
@@ -4604,7 +4608,7 @@ class Setting extends (0, _componentDefault.default) {
             (0, _utils.setStyle)(this.$parent, "width", `${$panel.dataset.width}px`);
             (0, _utils.setStyle)(this.$parent, "height", `${$panel.dataset.height}px`);
         } else {
-            const $panel = document.createElement("div");
+            const $panel = (0, _utils.createElement)("div");
             (0, _utils.addClass)($panel, "art-setting-panel");
             $panel.dataset.width = width || constructor.SETTING_WIDTH;
             $panel.dataset.height = option.length * constructor.SETTING_ITEM_HEIGHT;

docs/uncompiled/artplayer/index.js.map

@@ -1 +1 @@
-{"mappings":"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 truncated
+{"mappings":"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 truncated

packages/artplayer/src/icons/index.js

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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

@@ -83,3 +83,7 @@ export function replaceElement(newChild, oldChild) {
     oldChild.parentNode.replaceChild(newChild, oldChild);
     return newChild;
 }
+
+export function createElement(tag) {
+    return document.createElement(tag);
+}