trigger info panel

src/css/index.scss

@@ -8,4 +8,5 @@
 @import './menu';
 @import './notice';
 @import './subtitle';
-@import './video';
+@import './video';
+@import './info-panel';

src/css/info-panel.scss

@@ -0,0 +1,10 @@
+.dplayer-info-panel {
+    position: absolute;
+    top: 10px;
+    left: 10px;
+    width: 400px;
+
+    &-hide {
+        display: none;
+    }
+}

src/js/contextmenu.js

@@ -6,6 +6,7 @@ class ContextMenu {
             if (this.player.options.contextmenu[index].click) {
                 item.addEventListener('click', () => {
                     this.player.options.contextmenu[index].click(this.player);
+                    this.hide();
                 });
             }
             return item;

src/js/info-panel.js

@@ -0,0 +1,29 @@
+class InfoPanel {
+    constructor (player) {
+        this.container = player.template.infoPanel;
+        this.video = player.video;
+    }
+
+    show () {
+        this.container.classList.remove('dplayer-info-panel-hide');
+    }
+
+    hide () {
+        this.container.classList.add('dplayer-info-panel-hide');
+    }
+
+    triggle () {
+        if (this.container.classList.contains('dplayer-info-panel-hide')) {
+            this.show();
+        }
+        else {
+            this.hide();
+        }
+    }
+
+    update () {
+
+    }
+}
+
+export default InfoPanel;

src/js/options.js

@@ -124,7 +124,7 @@ export default (options) => {
         {
             text: 'Video info',
             click: (player) => {
-                player.infoPanel.show();
+                player.infoPanel.triggle();
             }
         },
         {

src/js/player.js

@@ -18,6 +18,7 @@ import Setting from './setting';
 import Comment from './comment';
 import HotKey from './hotkey';
 import ContextMenu from './contextmenu';
+import InfoPanel from './info-panel';
 
 let index = 0;
 const instances = [];
@@ -131,6 +132,8 @@ class DPlayer {
 
         this.initVideo(this.video, this.quality && this.quality.type || this.options.video.type);
 
+        this.infoPanel = new InfoPanel(this);
+
         if (!this.danmaku && this.options.autoplay) {
             this.play();
         }

src/js/template.js

@@ -66,6 +66,7 @@ class Template {
         this.barPreview = this.container.querySelector('.dplayer-bar-preview');
         this.barWrap = this.container.querySelector('.dplayer-bar-wrap');
         this.notice = this.container.querySelector('.dplayer-notice');
+        this.infoPanel = this.container.querySelector('.dplayer-info-panel');
     }
 
     tpl (options, index, tran, icons) {
@@ -299,6 +300,7 @@ class Template {
                 </div>
             </div>
         </div>
+        <div class="dplayer-info-panel dplayer-info-panel-hide"></div>
         ${this.tplContextmenuList(options.contextmenu, tran)}
         <div class="dplayer-notice"></div>`;
     }