add meun

src/contextmenu.js

@@ -1,62 +1,107 @@
 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);
+    const {
+      option,
+      i18n,
+      refs,
+      events: { proxy }
+    } = this.art;
+
+    option.contextmenu.push(
+      {
+        text: i18n.get('Video info'),
+        click: art => {
+          art.info.show();
+        }
+      },
+      {
+        text: i18n.get('About author'),
+        link: 'https://github.com/zhw2590582'
+      },
+      {
+        text: 'ArtPlayer __VERSION__',
+        link: 'https://github.com/zhw2590582/artplayer'
       }
-    }, {
-      text: i18n.get('About author'),
-      link: 'https://github.com/zhw2590582'
-    });
+    );
 
     proxy(refs.$container, 'contextmenu', event => {
       event.preventDefault();
-      if (!this.state) {
+      if (!refs.$contextmenu) {
         this.creatMenu();
-        this.state = true;
       }
-      this.setPos(event);
       this.show();
+      this.setPos(event);
     });
 
-    proxy(document, 'contextmenu', event => {
-      if (!event.path.includes(refs.$container)) {
+    proxy(refs.$container, 'click', () => {
+      if (refs.$contextmenu) {
         this.hide();
       }
     });
   }
 
   creatMenu() {
-    console.log('creatMenu');
+    const {
+      option,
+      refs,
+      events: { proxy }
+    } = this.art;
+    refs.$contextmenu = document.createElement('div');
+    refs.$contextmenu.classList.add('artplayer-contextmenu');
+    option.contextmenu.forEach(item => {
+      const $menu = document.createElement('a');
+      $menu.innerHTML = item.text;
+      $menu.classList.add('art-menu');
+      if (item.link) {
+        $menu.target = '_blank';
+        $menu.href = item.link;
+      } else if (item.click) {
+        $menu.href = '#';
+        proxy($menu, 'click', event => {
+          event.preventDefault();
+          item.click(this.art, event);
+          this.hide();
+        });
+      }
+      refs.$contextmenu.appendChild($menu);
+    });
+    refs.$wrap.appendChild(refs.$contextmenu);
   }
 
-  setPos() {
-    console.log('setPos');
+  setPos(event) {
+    const { refs } = this.art;
+    const mouseX = event.clientX;
+    const mouseY = event.clientY;
+    const { height: cHeight, width: cWidth, left: cLeft, top: cTop } = refs.$container.getBoundingClientRect();
+    const { height: mHeight, width: mWidth } = refs.$contextmenu.getBoundingClientRect();
+
+    let menuLeft = mouseX - cLeft;
+    let menuTop = mouseY - cTop;
+
+    if (mouseX + mWidth > cLeft + cWidth) {
+      menuLeft -= mWidth;
+    }
+
+    if (mouseY + mHeight > cTop + cHeight) {
+      menuTop -= mHeight;
+    }
+
+    refs.$contextmenu.style.left = `${menuLeft}px`;
+    refs.$contextmenu.style.top = `${menuTop}px`;
   }
 
   hide() {
-    console.log('hide');
+    const { refs } = this.art;
+    refs.$contextmenu && (refs.$contextmenu.style.display = 'none');
   }
 
   show() {
-    console.log('show');
+    const { refs } = this.art;
+    refs.$contextmenu && (refs.$contextmenu.style.display = 'block');
   }
 }

src/events.js

@@ -3,6 +3,7 @@ export default class Events {
     this.art = art;
     this.destroys = [];
     this.proxy = this.proxy.bind(this);
+    this.init();
   }
 
   proxy(target, name, callback) {
@@ -11,4 +12,8 @@ export default class Events {
       target.removeEventListener(name, callback);
     });
   }
+
+  init() {
+    console.log('init');
+  }
 }

src/index.js

@@ -39,6 +39,7 @@ class Artplayer extends Emitter {
       preload: 'auto',
       type: '',
       mimeCodec: '',
+      layers: [],
       contextmenu: [],
       lang: navigator.language.toLowerCase()
     };

src/info.js

@@ -2,4 +2,12 @@ export default class Info {
   constructor(art) {
     this.art = art;
   }
+
+  show() {
+    console.log('info show');
+  }
+
+  hide() {
+    console.log('info hide');
+  }
 }

src/layers.js

@@ -2,15 +2,25 @@ let id = 0;
 export default class Layers {
   constructor(art) {
     this.art = art;
+    this.add = this.add.bind(this);
+    this.art.option.layers.forEach(this.add);
   }
 
   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
+        data-art-layer-id="${id}"
+        class="art-layer art-layer-${option.name || id}"
+        style="z-index: ${option.index || id}"
+      >
+        ${option.html || ''}
       </div>
     `);
+
+    const $layer = refs.$layers.querySelector(`[data-art-layer-id="${id}"]`);
+    option.callback && option.callback($layer);
   }
 }

src/style/index.scss

@@ -28,4 +28,24 @@
         width: 100%;
         height: 100%;
     }
+
+    .artplayer-contextmenu {
+        position: absolute;
+        z-index: 3;
+        left: 0;
+        top: 0;
+        width: 170px;
+        padding: 5px 0;
+        background:rgba(0, 0, 0, 0.75);
+        a {
+            font-size: 13px;
+            display: block;
+            color: #fff;
+            padding: 7px 10px;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+            text-decoration: none;
+        }
+    }
 }

src/utils/verification.js

@@ -56,4 +56,8 @@ export default function verification(option) {
     `'mimeCodec' option require 'string' type, but got '${typeof option.mimeCodec}'.`
   );
 
+  errorHandle(
+    Array.isArray(option.layers),
+    `'layers' option require 'array' type, but got '${typeof option.layers}'.`
+  );
 }