update readme

packages/artplayer/package.json

@@ -47,7 +47,7 @@
   "dependencies": {
     "balloon-css": "^0.5.0",
     "draggabilly": "^2.2.0",
-    "option-validator": "^1.1.0",
+    "option-validator": "^1.1.1",
     "resize-observer": "^1.0.0-alpha.1",
     "screenfull": "^3.3.3",
     "tiny-emitter": "^2.0.2"

packages/artplayer/src/contextmenu/index.js

@@ -51,8 +51,8 @@ export default class Contextmenu {
       const name = menu.name || `contextmenu${id}`;
       const $menu = document.createElement('div');
       $menu.classList.value = `art-contextmenu art-contextmenu-${name}`;
-      append($menu, menu.html);
       setStyles($menu, menu.style || {});
+      append($menu, menu.html);
       if (menu.click) {
         proxy($menu, 'click', event => {
           event.preventDefault();
@@ -60,6 +60,7 @@ export default class Contextmenu {
           this.art.emit('contextmenu:click', $menu);
         });
       }
+      this.art.emit('contextmenu:add', $menu);
       callback && callback($menu);
       this[name] = $menu;
       insertByIndex($contextmenu, $menu, menu.index || id);

packages/artplayer/src/index.js

@@ -50,6 +50,9 @@ class Artplayer extends Emitter {
       url: '',
       poster: '',
       title: '',
+      type: '',
+      mimeCodec: '',
+      theme: '#f00',
       volume: 0.7,
       autoplay: false,
       autoSize: false,
@@ -63,9 +66,6 @@ class Artplayer extends Emitter {
       mutex: true,
       fullscreen: false,
       fullscreenWeb: false,
-      type: '',
-      mimeCodec: '',
-      theme: '#f00',
       layers: [],
       contextmenu: [],
       quality: [],

packages/artplayer/src/layers.js

@@ -12,25 +12,26 @@ export default class Layers {
   }
 
   add(item, callback) {
-    if (!item.disable) {
-      const { refs: { $layers }, events: { proxy } } = this.art;
+    const layer = typeof item === 'function' ? item(this.art) : item;
+    if (!layer.disable) {
       id++;
-      const name = item.name || `layer${id}`;
+      const { refs: { $layers }, events: { proxy } } = this.art;
+      const name = layer.name || `layer${id}`;
       const $layer = document.createElement('div');
-      $layer.setAttribute('class', `art-layer art-layer-${name}`);
-      setStyle($layer, 'z-index', item.index || id);
-      append($layer, item.html);
-      setStyles($layer, item.style || {});
-      if (item.click) {
+      $layer.classList.value = `art-layer art-layer-${name}`;
+      setStyles($layer, layer.style || {});
+      append($layer, layer.html);
+      if (layer.click) {
         proxy($layer, 'click', event => {
           event.preventDefault();
-          item.click.call(this, event);
+          layer.click.call(this, event);
           this.art.emit('layers:click', $layer);
         });
       }
       this.art.emit('layers:add', $layer);
       callback && callback($layer);
-      insertByIndex($layers, $layer, item.index || id);
+      this[name] = $layer;
+      insertByIndex($layers, $layer, layer.index || id);
     }
   }
 

packages/artplayer/src/scheme/index.js

@@ -11,36 +11,34 @@ export default {
     required: true,
     validator: validStringEmpty
   },
+  poster: 'string',
   title: 'string',
-  volume: 'number',
-  thumbnails: {
-    type: 'object',
-    child: {
-      url: 'string',
-      number: 'number',
-      width: 'number',
-      height: 'number',
-      column: 'number'
-    }
-  },
-  screenshot: 'boolean',
-  autoplay: 'boolean',
-  autoSize: 'boolean',
-  playbackRate: 'boolean',
-  aspectRatio: 'boolean',
-  loop: 'boolean',
   type: {
     type: 'string'
   },
   mimeCodec: 'string',
+  theme: 'string',
+  volume: 'number',
+  autoplay: 'boolean',
+  autoSize: 'boolean',
+  loop: 'boolean',
+  playbackRate: 'boolean',
+  aspectRatio: 'boolean',
+  screenshot: 'boolean',
+  setting: 'boolean',
+  hotkey: 'boolean',
+  pip: 'boolean',
+  mutex: 'boolean',
+  fullscreen: 'boolean',
+  fullscreenWeb: 'boolean',
   layers: {
     type: 'array',
     child: {
+      disable: 'boolean',
+      type: 'object|function',
       name: 'string',
       index: 'number',
-      html: {
-        validator: validElement
-      },
+      html: validElement,
       style: 'object',
       click: 'function'
     }
@@ -48,11 +46,12 @@ export default {
   contextmenu: {
     type: 'array',
     child: {
+      disable: 'boolean',
       type: 'object|function',
       name: 'string',
-      html: {
-        validator: validElement
-      },
+      index: 'number',
+      html: validElement,
+      style: 'object',
       click: 'function'
     }
   },
@@ -64,28 +63,17 @@ export default {
       url: 'string'
     }
   },
-  theme: 'string',
-  hotkey: 'boolean',
-  pip: 'boolean',
-  mutex: 'boolean',
-  fullscreen: 'boolean',
-  fullscreenWeb: 'boolean',
-  subtitle: {
-    type: 'object',
-    child: {
-      url: 'string',
-      style: 'object'
-    }
-  },
   controls: {
     type: 'array',
     child: {
+      type: 'object',
       option: {
         type: 'object',
         child: {
           disable: 'boolean',
-          position: 'string',
-          index: 'number'
+          name: 'string',
+          index: 'number',
+          position: 'string'
         }
       }
     }
@@ -93,10 +81,30 @@ export default {
   highlight: {
     type: 'array',
     child: {
+      type: 'object',
       time: 'number',
       text: 'string'
     }
   },
+  thumbnails: {
+    type: 'object',
+    child: {
+      type: 'object',
+      url: 'string',
+      number: 'number',
+      width: 'number',
+      height: 'number',
+      column: 'number'
+    }
+  },
+  subtitle: {
+    type: 'object',
+    child: {
+      type: 'object',
+      url: 'string',
+      style: 'object'
+    }
+  },
   moreVideoAttr: 'object',
   lang: 'string'
 };