update

src/contextmenu.js

@@ -1,3 +1,5 @@
+import { append } from './utils';
+
 export default class Contextmenu {
   constructor(art) {
     this.art = art;
@@ -75,9 +77,9 @@ export default class Contextmenu {
           this.hide();
         });
       }
-      refs.$contextmenu.appendChild($menu);
+      append(refs.$contextmenu, $menu);
     });
-    refs.$wrap.appendChild(refs.$contextmenu);
+    append(refs.$wrap, refs.$contextmenu);
   }
 
   setPos(event) {

src/icons/index.js

@@ -1,7 +1,7 @@
 import loading from './loading.svg';
 import play from './play.svg';
 
-const Icons = {
+const icons = {
   loading,
   play
 };
@@ -16,4 +16,4 @@ function creatDomFromSvg(map) {
   return result;
 }
 
-export default creatDomFromSvg(Icons);
+export default creatDomFromSvg(icons);

src/layers.js

@@ -1,3 +1,5 @@
+import { append, setStyle } from './utils';
+
 let id = 0;
 export default class Layers {
   constructor(art) {
@@ -24,19 +26,8 @@ export default class Layers {
     $layer.setAttribute('data-art-layer-id', id);
     $layer.setAttribute('class', `art-layer art-layer-${option.name || id}`);
     $layer.style.zIndex = option.index || id;
-
-    if (option.html instanceof Element) {
-      $layer.appendChild(option.html);
-    } else {
-      $layer.innerHTML = option.html;
-    }
-
-    if (option.style) {
-      Object.keys(option.style).forEach(key => {
-        $layer.style[key] = option.style[key];
-      });
-    }
-
+    append($layer, option.html);
+    setStyle($layer, option.style || {});
     refs.$layers.appendChild($layer);
     callback && callback($layer);
   }

src/loading.js

@@ -1,4 +1,5 @@
-import Icons from './icons';
+import icons from './icons';
+import { append } from './utils';
 
 export default class Loading {
   constructor(art) {
@@ -9,13 +10,9 @@ export default class Loading {
   init() {
     const { option, refs: { $loading } } = this.art;
     if (option.loading) {
-      if (option.loading instanceof Element) {
-        $loading.appendChild(option.loading);
-      } else {
-        $loading.innerHTML = option.loading;
-      }
+      append($loading, option.loading);
     } else {
-      $loading.appendChild(Icons.loading);
+      append($loading, icons.loading);
     }
   }
 

src/mask.js

@@ -1,4 +1,5 @@
-import Icons from './icons';
+import icons from './icons';
+import { append } from './utils';
 
 export default class Mask {
   constructor(art) {
@@ -14,8 +15,8 @@ export default class Mask {
       events: { proxy }
     } = this.art;
 
-    Icons.play.style.backgroundColor = option.theme;
-    refs.$mask.appendChild(Icons.play);
+    icons.play.style.backgroundColor = option.theme;
+    append(refs.$mask, icons.play);
 
     proxy(refs.$mask, 'click', () => {
       player.play();

src/subtitle.js

@@ -1,4 +1,4 @@
-import { errorHandle, getExt } from './utils';
+import { errorHandle, getExt, setStyle } from './utils';
 
 export default class Subtitle {
   constructor(art) {
@@ -19,10 +19,7 @@ export default class Subtitle {
       refs: { $video, $subtitle }
     } = this.art;
 
-    Object.keys(subtitleStyle).forEach(key => {
-      $subtitle.style[key] = subtitleStyle[key];
-    });
-
+    setStyle($subtitle, subtitleStyle);
     const $track = document.createElement('track');
     $track.default = true;
     $track.kind = 'metadata';

src/utils/index.js

@@ -29,3 +29,20 @@ export function getExt(url) {
     .split('.')
     .pop();
 }
+
+
+export function append(parent, child) {
+  if (child instanceof Element) {
+    parent.appendChild(child);
+  } else {
+    parent.innerHTML = child;
+  }
+  return parent;
+}
+
+export function setStyle(element, styles) {
+  Object.keys(styles).forEach(key => {
+    element.style[key] = styles[key];
+  });
+  return element;
+}