调整参数验证

src/contextmenu.js

@@ -17,9 +17,9 @@ export default class Contextmenu {
         html: `${i18n.get('Play speed')}: <span>0.5</span><span>0.75</span><span class="current">1.0</span><span>1.25</span><span>1.5</span><span>2.0</span>`,
         click: (art, event) => {
           const { target } = event;
-          const rate = Number(target.innerText);
-          if (rate && typeof rate === 'number') {
-            player.playbackRate(rate);
+          const rate = target.innerText;
+          if (rate) {
+            player.playbackRate(Number(rate));
             const sublings = Array.from(target.parentElement.querySelectorAll('span')).filter(item => item !== target);
             sublings.forEach(item => item.classList.remove('current'));
             target.classList.add('current');

src/index.js

@@ -1,7 +1,8 @@
 import './style';
 import 'balloon-css/balloon.min.css';
 import { deepMerge } from './utils';
-import validOption from './verification';
+import OptionValidator from 'option-validator';
+import scheme from './scheme';
 import config from './config';
 import Emitter from 'tiny-emitter';
 import Template from './template';
@@ -27,7 +28,7 @@ class Artplayer extends Emitter {
     super();
     this.emit('init:start');
     this.option = deepMerge({}, Artplayer.DEFAULTS, option);
-    validOption(this.option);
+    new OptionValidator(this.option, scheme);
     this.init();
     this.emit('init:end');
   }

src/scheme/index.js

@@ -0,0 +1,83 @@
+import validElement from './validElement';
+
+export default {
+  container: {
+    validator: validElement,
+    required: true
+  },
+  url: {
+    type: 'string',
+    required: true
+  },
+  volume: 'number',
+  thumbnails: {
+    type: 'object',
+    child: {
+      url: 'string',
+      number: 'number',
+      width: 'number',
+      height: 'number',
+      column: 'number'
+    }
+  },
+  screenshot: 'boolean',
+  autoplay: 'boolean',
+  playbackRate: 'boolean',
+  aspectRatio: 'boolean',
+  loop: 'boolean',
+  type: 'string',
+  mimeCodec: 'string',
+  layers: {
+    type: 'array',
+    child: {
+      name: 'string',
+      index: 'number',
+      html: {
+        validator: validElement
+      },
+      style: 'object'
+    }
+  },
+  contextmenu: {
+    type: 'array',
+    child: {
+      name: 'string',
+      html: {
+        validator: validElement
+      },
+      click: 'function'
+    }
+  },
+  loading: 'string',
+  theme: 'string',
+  hotkey: 'boolean',
+  subtitle: {
+    type: 'object',
+    child: {
+      url: 'string',
+      style: 'object'
+    }
+  },
+  controls: {
+    type: 'array',
+    child: {
+      option: {
+        type: 'object',
+        child: {
+          disable: 'boolean',
+          position: 'boolean',
+          index: 'number'
+        }
+      }
+    }
+  },
+  highlight: {
+    type: 'array',
+    child: {
+      time: 'number',
+      text: 'string'
+    }
+  },
+  moreVideoAttr: 'object',
+  lang: 'string'
+};

src/scheme/validElement.js

@@ -0,0 +1,17 @@
+import { ArtPlayerError } from '../utils';
+
+export default function validElement(paths, value, type) {
+  if (type === 'string') {
+    if (value.trim() === '') {
+      throw new ArtPlayerError(`${paths.join('.')} can not be empty'`);
+    } else {
+      return true;
+    }
+  }
+
+  if (value instanceof Element) {
+    return true;
+  }
+
+  throw new ArtPlayerError(`${paths.join('.')} require 'string' or 'Element' type, but got '${type}'`);
+}

src/style/notice.scss

@@ -8,6 +8,7 @@
         top: 0;
         padding: 10px;
         width: 100%;
+        pointer-events: none;
         .artplayer-notice-inner {
             display: inline-block;
             padding: 5px 10px;

src/verification/index.js

@@ -1,39 +0,0 @@
-import { errorHandle, getType } from '../utils';
-import scheme from './scheme';
-
-export default function validOption(option, param = scheme, path = ['option']) {
-  Object.keys(option).some(key => {
-    const paramObj = param[key];
-
-    if (!paramObj) {
-      return true;
-    }
-
-    const value = option[key];
-    const type = getType(value);
-    const paramType = paramObj.type;
-    const paramRequired = paramObj.required;
-    const paramChild = paramObj.child;
-    const paramValidator = paramObj.validator;
-
-    if (type === 'object' && paramChild) {
-      validOption(value, paramChild, path.concat(key));
-    }
-
-    if (type === 'array' && paramChild) {
-      value.forEach((item, index) => {
-        validOption(item, paramChild, path.concat(`${key}[${index}]`));
-      });
-    }
-
-    if (paramValidator) {
-      const result = paramValidator(key, value, type, path);
-      errorHandle(result.handle, result.msg);
-    } else {
-      errorHandle(!paramRequired || value, `'${path.join('.')}.${key}' is required`);
-      errorHandle(paramType === type, `'${path.join('.')}.${key}' require '${paramType}' type, but got '${type}'`);
-    }
-
-    return false;
-  });
-}

src/verification/scheme.js

@@ -1,163 +0,0 @@
-const validElement = (key, value, type, path) => {
-  let handle = false;
-  let msg = `${path.join('.')}.${key} require 'string' or 'Element' type, but got '${type}'`;
-
-  if (type === 'string') {
-    if (value.trim() === '') {
-      handle = false;
-      msg = `${path.join('.')}.${key} can not be empty'`;
-    } else {
-      handle = true;
-    }
-  }
-
-  if (value instanceof Element) {
-    handle = true;
-  }
-
-  return {
-    handle: handle,
-    msg: msg
-  };
-};
-
-export default {
-  container: {
-    validator: validElement
-  },
-  url: {
-    type: 'string',
-    required: true
-  },
-  poster: {
-    type: 'string'
-  },
-  volume: {
-    type: 'number'
-  },
-  thumbnails: {
-    type: 'object',
-    child: {
-      url: {
-        type: 'string'
-      },
-      number: {
-        type: 'number'
-      },
-      width: {
-        type: 'number'
-      },
-      height: {
-        type: 'number'
-      },
-      column: {
-        type: 'number'
-      }
-    }
-  },
-  screenshot: {
-    type: 'boolean'
-  },
-  autoplay: {
-    type: 'boolean'
-  },
-  playbackRate: {
-    type: 'boolean'
-  },
-  aspectRatio: {
-    type: 'boolean'
-  },
-  loop: {
-    type: 'boolean'
-  },
-  type: {
-    type: 'string'
-  },
-  mimeCodec: {
-    type: 'string'
-  },
-  layers: {
-    type: 'array',
-    child: {
-      name: {
-        type: 'string'
-      },
-      index: {
-        type: 'number'
-      },
-      html: {
-        validator: validElement
-      },
-      style: {
-        type: 'object'
-      }
-    }
-  },
-  contextmenu: {
-    type: 'array',
-    child: {
-      name: {
-        type: 'string'
-      },
-      html: {
-        validator: validElement
-      },
-      click: {
-        type: 'function'
-      }
-    }
-  },
-  loading: {
-    type: 'string'
-  },
-  theme: {
-    type: 'string'
-  },
-  hotkey: {
-    type: 'boolean'
-  },
-  subtitle: {
-    type: 'object',
-    child: {
-      url: {
-        type: 'string'
-      },
-      style: {
-        type: 'object'
-      }
-    }
-  },
-  controls: {
-    type: 'array',
-    child: {
-      option: {
-        disable: {
-          type: 'boolean'
-        },
-        position: {
-          type: 'string'
-        },
-        index: {
-          type: 'number'
-        }
-      }
-    }
-  },
-  highlight: {
-    type: 'array',
-    child: {
-      time: {
-        type: 'number'
-      },
-      text: {
-        type: 'string'
-      }
-    }
-  },
-  moreVideoAttr: {
-    type: 'object'
-  },
-  lang: {
-    type: 'string'
-  }
-};