add layer

src/contextmenu.js

@@ -1,5 +1,62 @@
 export default class Contextmenu {
   constructor(art) {
     this.art = art;
+    this.state = false;
+    this.init();
+  }
+
+  init() {
+    this.art.layers.add({
+      name: 'test1',
+      html: 'test2',
+      index: 10
+    });
+    this.art.layers.add({
+      name: 'test3',
+      html: 'test4',
+      index: 11
+    });
+    const { option, i18n, refs, events: { proxy } } = this.art;
+    option.contextmenu.push({
+      text: i18n.get('Video info'),
+      click: art => {
+        console.log(art);
+      }
+    }, {
+      text: i18n.get('About author'),
+      link: 'https://github.com/zhw2590582'
+    });
+
+    proxy(refs.$container, 'contextmenu', event => {
+      event.preventDefault();
+      if (!this.state) {
+        this.creatMenu();
+        this.state = true;
+      }
+      this.setPos(event);
+      this.show();
+    });
+
+    proxy(document, 'contextmenu', event => {
+      if (!event.path.includes(refs.$container)) {
+        this.hide();
+      }
+    });
+  }
+
+  creatMenu() {
+    console.log('creatMenu');
+  }
+
+  setPos() {
+    console.log('setPos');
+  }
+
+  hide() {
+    console.log('hide');
+  }
+
+  show() {
+    console.log('show');
   }
 }

src/i18n.js

@@ -1,14 +1,12 @@
-import ZHCN from './zh-CN';
-import ZHTW from './zh-TW';
-import EN from './en';
-import JP from './jp';
-
 const i18nMap = {
-  zh: ZHCN,
-  'zh-cn': ZHCN,
-  'zh-tw': ZHTW,
-  en: EN,
-  jp: JP
+  'zh-cn': {
+    'About author': '关于作者',
+    'Video info': '视频统计信息'
+  },
+  'zh-tw': {
+    'About author': '關於作者',
+    'Video info': '影片統計訊息'
+  }
 };
 
 export default class I18n {

src/i18n/en.js

@@ -1,3 +0,0 @@
-export default {
-    
-}

src/i18n/jp.js

@@ -1,3 +0,0 @@
-export default {
-    
-}

src/i18n/zh-CN.js

@@ -1,3 +0,0 @@
-export default {
-    
-}

src/i18n/zh-TW.js

@@ -1,3 +0,0 @@
-export default {
-    
-}

src/index.js

@@ -39,6 +39,7 @@ class Artplayer extends Emitter {
       preload: 'auto',
       type: '',
       mimeCodec: '',
+      contextmenu: [],
       lang: navigator.language.toLowerCase()
     };
   }
@@ -70,13 +71,13 @@ class Artplayer extends Emitter {
     this.events = new Events(this);
     this.player = new Player(this);
     this.mse = new Mse(this);
+    this.layers = new Layers(this);
     this.controls = new Controls(this);
     this.contextmenu = new Contextmenu(this);
     this.danmaku = new Danmaku(this);
     this.subtitle = new Subtitle(this);
     this.info = new Info(this);
     this.hotkey = new Hotkey(this);
-    this.layers = new Layers(this);
 
     this.id = id++;
     instances.push(this);

src/layers.js

@@ -1,5 +1,16 @@
+let id = 0;
 export default class Layers {
   constructor(art) {
     this.art = art;
   }
+
+  add(option) {
+    const { refs } = this.art;
+    id++;
+    refs.$layers.insertAdjacentHTML('beforeend', `
+      <div data-layer-index="${id}" class="art-layer art-layer-${option.name}" style="z-index: ${option.index || id}">
+        ${option.html}
+      </div>
+    `);
+  }
 }

src/style/index.scss

@@ -5,9 +5,11 @@
     width: 100%;
     height: 100%;
     text-align: left;
+    user-select: none;
 
     .artplayer-video {
         position: absolute;
+        z-index: 1;
         left: 0;
         top: 0;
         right: 0;
@@ -16,53 +18,14 @@
         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;
+        z-index: 2;
         left: 0;
         top: 0;
         right: 0;
         bottom: 0;
         width: 100%;
-        height: 100%; 
+        height: 100%;
     }
 }

src/template.js

@@ -5,7 +5,8 @@ export default class Template {
   }
 
   init() {
-    this.art.refs.$container.innerHTML = `
+    const { refs } = this.art;
+    refs.$container.innerHTML = `
         <div class="artplayer-wrap">
           <video class="artplayer-video" webkit-playsinline playsinline></video>
           <div class="artplayer-controls"></div>
@@ -14,23 +15,11 @@ export default class Template {
           <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'
-    );
+    refs.$wrap = refs.$container.querySelector('.artplayer-wrap');
+    refs.$video = refs.$container.querySelector('.artplayer-video');
+    refs.$controls = refs.$container.querySelector('.artplayer-controls');
+    refs.$layers = refs.$container.querySelector('.artplayer-layers');
+    refs.$loading = refs.$container.querySelector('.artplayer-loading');
+    refs.$notice = refs.$container.querySelector('.artplayer-notice');
   }
 }