trigger video info panel in contextmenu

demo/demo.js

@@ -18,6 +18,7 @@ function initPlayers () {
     window.dp1 = new DPlayer({
         container: document.getElementById('dplayer1'),
         preload: 'none',
+        screenshot: true,
         video: {
             url: 'https://moeplayer.b0.upaiyun.com/dplayer/hikarunara.mp4',
             pic: 'https://moeplayer.b0.upaiyun.com/dplayer/hikarunara.png',

src/js/contextmenu.js

@@ -2,6 +2,15 @@ class ContextMenu {
     constructor (player) {
         this.player = player;
 
+        [...this.player.template.menuItem].map((item, index) => {
+            if (this.player.options.contextmenu[index].click) {
+                item.addEventListener('click', () => {
+                    this.player.options.contextmenu[index].click(this.player);
+                });
+            }
+            return item;
+        });
+
         this.player.container.addEventListener('contextmenu', (e) => {
             const event = e || window.event;
             event.preventDefault();

src/js/i18n.js

@@ -56,6 +56,7 @@ const tranTxt = {
         'Hide subtitle': '隐藏字幕',
         'Volume': '音量',
         'Live': '直播',
+        'Video info': '视频统计信息',
     },
     "zh-tw" : {
         'Danmaku is loading': '彈幕加載中',
@@ -92,6 +93,7 @@ const tranTxt = {
         'Hide subtitle': '隱藏字幕',
         'Volume': '音量',
         'Live': '直播',
+        'Video info': '視頻統計信息',
     }
 };
 

src/js/index.js

@@ -2,6 +2,6 @@ import '../css/index.scss';
 import DPlayer from './player';
 
 /* global DPLAYER_VERSION GIT_HASH */
-console.log(`${'\n'} %c DPlayer ${DPLAYER_VERSION} ${GIT_HASH} %c http://dplayer.js.org ${'\n'}${'\n'}`, 'color: #fadfa3; background: #030307; padding:5px 0;', 'background: #fadfa3; padding:5px 0;');
+console.log(`${'\n'} %c DPlayer v${DPLAYER_VERSION} ${GIT_HASH} %c http://dplayer.js.org ${'\n'}${'\n'}`, 'color: #fadfa3; background: #030307; padding:5px 0;', 'background: #fadfa3; padding:5px 0;');
 
 export default DPlayer;

src/js/options.js

@@ -1,4 +1,4 @@
-/* global DPLAYER_VERSION GIT_HASH */
+/* global DPLAYER_VERSION */
 import objectAssign from 'object-assign';
 import defaultApiBackend from './api.js';
 
@@ -121,21 +121,19 @@ export default (options) => {
     }
 
     options.contextmenu = options.contextmenu.concat([
+        {
+            text: 'Video info',
+            click: (player) => {
+                player.infoPanel.show();
+            }
+        },
         {
             text: 'About author',
             link: 'https://diygod.me'
         },
         {
-            text: 'About DPlayer',
+            text: `DPlayer v${DPLAYER_VERSION}`,
             link: 'https://github.com/MoePlayer/DPlayer'
-        },
-        {
-            text: 'DPlayer feedback',
-            link: 'https://github.com/DIYgod/DPlayer/issues'
-        },
-        {
-            text: `DPlayer ${DPLAYER_VERSION} ${GIT_HASH}`,
-            link: 'https://github.com/MoePlayer/DPlayer/releases'
         }
     ]);
 

src/js/template.js

@@ -56,6 +56,7 @@ class Template {
         this.browserFullButton = this.container.querySelector('.dplayer-full-icon');
         this.webFullButton = this.container.querySelector('.dplayer-full-in-icon');
         this.menu = this.container.querySelector('.dplayer-menu');
+        this.menuItem = this.container.querySelectorAll('.dplayer-menu-item');
         this.qualityList = this.container.querySelector('.dplayer-quality-list');
         this.camareButton = this.container.querySelector('.dplayer-camera-icon');
         this.subtitleButton = this.container.querySelector('.dplayer-subtitle-icon');
@@ -315,7 +316,7 @@ class Template {
     tplContextmenuList (contextmenu, tran) {
         let result = '<div class="dplayer-menu">';
         for (let i = 0; i < contextmenu.length; i++) {
-            result += `<div class="dplayer-menu-item"><a target="_blank" href="${contextmenu[i].link}">${tran(contextmenu[i].text)}</a></div>`;
+            result += `<div class="dplayer-menu-item"><a target="_blank" href="${contextmenu[i].link || 'javascript:void(0);'}">${tran(contextmenu[i].text)}</a></div>`;
         }
         result += '</div>';