add more files

src/index.js

@@ -1,5 +1,7 @@
 import './style/index.scss';
+import verification from './utils/verification';
 import Emitter from 'tiny-emitter';
+import Template from './template';
 import I18n from './i18n';
 import Player from './player';
 import Controls from './controls';
@@ -17,6 +19,7 @@ class Artplayer extends Emitter {
   constructor(option) {
     super();
     this.option = Object.assign({}, Artplayer.DEFAULTS, option);
+    verification(this.option);
     this.init();
   }
 
@@ -27,46 +30,12 @@ class Artplayer extends Emitter {
   static get DEFAULTS() {
     return {
       container: document.querySelector('.artplayer'),
-      live: false,
-      autoplay: false,
-      theme: '#b7daff',
-      loop: false,
-      lang: navigator.language.toLowerCase(),
-      screenshot: false,
-      hotkey: true,
-      preload: 'auto',
+      url: '',
+      poster: '',
       volume: 0.7,
-      logo: '',
-      apiBackend: '',
-      video: {
-        quality: '',
-        defaultQuality: '',
-        url: '',
-        pic: '',
-        thumbnails: '',
-        type: 'auto',
-        customType: ''
-      },
-      subtitle: {
-        url: '',
-        type: 'webvtt',
-        fontSize: '20px',
-        bottom: '40px',
-        color: '#fff'
-      },
-      danmaku: {
-        id: '',
-        api: '',
-        token: '',
-        maximum: '',
-        addition: '',
-        user: '',
-        bottom: '',
-        unlimited: ''
-      },
-      contextmenu: [],
-      highlight: [],
-      mutex: true
+      autoplay: false,
+      preload: 'auto',
+      lang: navigator.language.toLowerCase()
     };
   }
 
@@ -89,11 +58,12 @@ class Artplayer extends Emitter {
 
   init() {
     this.refs = {
-      container: this.option.container
+      $container: this.option.container
     };
 
     this.destroyEvents = [];
 
+    this.template = new Template(this);
     this.i18n = new I18n(this);
     this.player = new Player(this);
     this.controls = new Controls(this);

src/player.js

@@ -1,5 +1,24 @@
+import { clamp } from './utils';
+
 export default class Player {
-  constructor({ option }) {
-    //
+  constructor(art) {
+    this.art = art;
+    this.init();
+  }
+
+  init() {
+    const { option } = this.art;
+    const { $video } = this.art.refs;
+    $video.controls = false;
+    $video.poster = option.poster;
+    $video.volume = clamp(option.volume, 0, 1);
+    $video.autoplay = option.autoplay;
+    $video.preload = option.preload;
+
+    if (typeof option.url === 'string') {
+      $video.src = option.url;
+    } else if (Array.isArray(option.url)) {
+      //
+    }
   }
 }

src/style/index.scss

@@ -1,3 +1,68 @@
-body {
-    background: #fff;
+@charset "UTF-8";
+
+.artplayer-wrap {
+    position: relative;
+    width: 100%;
+    height: 100%;
+    text-align: left;
+
+    .artplayer-video {
+        position: absolute;
+        left: 0;
+        top: 0;
+        right: 0;
+        bottom: 0;
+        width: 100%;
+        height: 100%;
+    }
+
+    .artplayer-poster {
+        position: absolute;
+        left: 0;
+        top: 0;
+        right: 0;
+        bottom: 0;
+        width: 100%;
+        height: 100%; 
+    }
+
+    .artplayer-controls {
+        position: absolute;
+        left: 0;
+        top: 0;
+        right: 0;
+        bottom: 0;
+        width: 100%;
+        height: 100%; 
+    }
+
+    .artplayer-loading {
+        position: absolute;
+        left: 0;
+        top: 0;
+        right: 0;
+        bottom: 0;
+        width: 100%;
+        height: 100%; 
+    }
+
+    .artplayer-notice {
+        position: absolute;
+        left: 0;
+        top: 0;
+        right: 0;
+        bottom: 0;
+        width: 100%;
+        height: 100%; 
+    }
+
+    .artplayer-layers {
+        position: absolute;
+        left: 0;
+        top: 0;
+        right: 0;
+        bottom: 0;
+        width: 100%;
+        height: 100%; 
+    }
 }

src/template.js

@@ -0,0 +1,36 @@
+export default class Template {
+  constructor(art) {
+    this.art = art;
+    this.init();
+  }
+
+  init() {
+    this.art.refs.$container.innerHTML = `
+        <div class="artplayer-wrap">
+          <video class="artplayer-video" webkit-playsinline playsinline></video>
+          <div class="artplayer-controls"></div>
+          <div class="artplayer-layers"></div>
+          <div class="artplayer-loading"></div>
+          <div class="artplayer-notice"></div>
+        </div>
+      `;
+    this.art.refs.$wrap = this.art.refs.$container.querySelector(
+      '.artplayer-wrap'
+    );
+    this.art.refs.$video = this.art.refs.$container.querySelector(
+      '.artplayer-video'
+    );
+    this.art.refs.$controls = this.art.refs.$container.querySelector(
+      '.artplayer-controls'
+    );
+    this.art.refs.$layers = this.art.refs.$container.querySelector(
+      '.artplayer-layers'
+    );
+    this.art.refs.$loading = this.art.refs.$container.querySelector(
+      '.artplayer-loading'
+    );
+    this.art.refs.$notice = this.art.refs.$container.querySelector(
+      '.artplayer-notice'
+    );
+  }
+}

src/utils/index.js

@@ -1,8 +1,11 @@
 import ArtPlayerError from './ArtPlayerError';
-export * from './verification';
 
 export function errorHandle(condition, msg) {
   if (!condition) {
     throw new ArtPlayerError(msg);
   }
 }
+
+export function clamp(num, a, b) {
+  return Math.max(Math.min(num, Math.max(a, b)), Math.min(a, b));
+}

src/utils/verification.js

@@ -0,0 +1,37 @@
+import { errorHandle } from './index';
+
+export default function verification(option) {
+  errorHandle(option.container, '\'container\' option is required.');
+
+  errorHandle(option.url, '\'url\' option is required.');
+
+  errorHandle(
+    option.container instanceof Element,
+    `'container' option require 'Element' type, but got '${typeof option.container}'.`
+  );
+
+  errorHandle(
+    typeof option.url === 'string' || Array.isArray(option.url),
+    `'url' option require 'string' or 'array' type, but got '${typeof option.url}'.`
+  );
+
+  errorHandle(
+    typeof option.poster === 'string',
+    `'url' option require 'string' type, but got '${typeof option.poster}'.`
+  );
+
+  errorHandle(
+    typeof option.volume === 'number',
+    `'volume' option require 'number' type, but got '${typeof option.volume}'.`
+  );
+
+  errorHandle(
+    typeof option.autoplay === 'boolean',
+    `'autoplay' option require 'boolean' type, but got '${typeof option.autoplay}'.`
+  );
+
+  errorHandle(
+    ['none', 'metadata', 'auto'].indexOf(option.preload) > -1,
+    '\'preload\' option require one of \'none、metadata、auto\'.'
+  );
+}