info panel

src/css/info-panel.scss

@@ -3,8 +3,41 @@
     top: 10px;
     left: 10px;
     width: 400px;
+    background: rgba(28, 28, 28, 0.8);
+    padding: 10px;
+    color: #fff;
+    font-size: 12px;
+    border-radius: 2px;
 
     &-hide {
         display: none;
     }
+
+    .dplayer-info-panel-close {
+        cursor: pointer;
+        position: absolute;
+        right: 10px;
+        top: 10px;
+    }
+
+    .dplayer-info-panel-item {
+        & > span {
+            display: inline-block;
+            vertical-align: middle;
+            line-height: 15px;
+            white-space: nowrap;
+            text-overflow: ellipsis;
+            overflow: hidden;
+        }
+    }
+
+    .dplayer-info-panel-item-title {
+        width: 100px;
+        text-align: right;
+        margin-right: 10px;
+    }
+    
+    .dplayer-info-panel-item-data {
+        width: 260px;
+    }
 }

src/js/info-panel.js

@@ -1,14 +1,28 @@
+/* global DPLAYER_VERSION GIT_HASH */
+
 class InfoPanel {
     constructor (player) {
         this.container = player.template.infoPanel;
+        this.template = player.template;
         this.video = player.video;
+        this.player = player;
+
+        this.template.infoPanelClose.addEventListener('click', () => {
+            this.hide();
+        });
     }
 
     show () {
+        this.beginTime = Date.now();
+        this.update();
+        this.player.time.enable('info');
+        this.player.time.enable('fps');
         this.container.classList.remove('dplayer-info-panel-hide');
     }
 
     hide () {
+        this.player.time.disable('info');
+        this.player.time.disable('fps');
         this.container.classList.add('dplayer-info-panel-hide');
     }
 
@@ -22,7 +36,20 @@ class InfoPanel {
     }
 
     update () {
+        this.template.infoVersion.innerHTML = `v${DPLAYER_VERSION} ${GIT_HASH}`;
+        this.template.infoType.innerHTML = this.player.type;
+        this.template.infoUrl.innerHTML = this.player.options.video.url;
+        this.template.infoResolution.innerHTML = `${this.player.video.videoWidth} x ${this.player.video.videoHeight}`;
+        this.template.infoDuration.innerHTML = this.player.video.duration;
+        if (this.player.options.danmaku) {
+            this.template.infoDanmakuId.innerHTML = this.player.options.danmaku.id;
+            this.template.infoDanmakuApi.innerHTML = this.player.options.danmaku.api;
+            this.template.infoDanmakuAmount.innerHTML = this.player.danmaku.dan.length;
+        }
+    }
 
+    fps (value) {
+        this.template.infoFPS.innerHTML = `${value.toFixed(1)}`;
     }
 }
 

src/js/player.js

@@ -182,7 +182,8 @@ class DPlayer {
             this.pause();
         }).then(() => {
         });
-        this.time.enable();
+        this.time.enable('loading');
+        this.time.enable('progress');
         this.container.classList.remove('dplayer-paused');
         this.container.classList.add('dplayer-playing');
         if (this.danmaku) {
@@ -211,7 +212,8 @@ class DPlayer {
         this.ended = false;
         this.template.playButton.innerHTML = this.icons.get('play');
         this.video.pause();
-        this.time.disable();
+        this.time.disable('loading');
+        this.time.disable('progress');
         this.container.classList.remove('dplayer-playing');
         this.container.classList.add('dplayer-paused');
         if (this.danmaku) {

src/js/template.js

@@ -67,6 +67,16 @@ class Template {
         this.barWrap = this.container.querySelector('.dplayer-bar-wrap');
         this.notice = this.container.querySelector('.dplayer-notice');
         this.infoPanel = this.container.querySelector('.dplayer-info-panel');
+        this.infoPanelClose = this.container.querySelector('.dplayer-info-panel-close');
+        this.infoVersion = this.container.querySelector('.dplayer-info-panel-item-version .dplayer-info-panel-item-data');
+        this.infoFPS = this.container.querySelector('.dplayer-info-panel-item-fps .dplayer-info-panel-item-data');
+        this.infoType = this.container.querySelector('.dplayer-info-panel-item-type .dplayer-info-panel-item-data');
+        this.infoUrl = this.container.querySelector('.dplayer-info-panel-item-url .dplayer-info-panel-item-data');
+        this.infoResolution = this.container.querySelector('.dplayer-info-panel-item-resolution .dplayer-info-panel-item-data');
+        this.infoDuration = this.container.querySelector('.dplayer-info-panel-item-duration .dplayer-info-panel-item-data');
+        this.infoDanmakuId = this.container.querySelector('.dplayer-info-panel-item-danmaku-id .dplayer-info-panel-item-data');
+        this.infoDanmakuApi = this.container.querySelector('.dplayer-info-panel-item-danmaku-api .dplayer-info-panel-item-data');
+        this.infoDanmakuAmount = this.container.querySelector('.dplayer-info-panel-item-danmaku-amount .dplayer-info-panel-item-data');
     }
 
     tpl (options, index, tran, icons) {
@@ -300,7 +310,46 @@ class Template {
                 </div>
             </div>
         </div>
-        <div class="dplayer-info-panel dplayer-info-panel-hide"></div>
+        <div class="dplayer-info-panel dplayer-info-panel-hide">
+            <div class="dplayer-info-panel-close">[x]</div>
+            <div class="dplayer-info-panel-item dplayer-info-panel-item-version">
+                <span class="dplayer-info-panel-item-title">Player version</span>
+                <span class="dplayer-info-panel-item-data"></span>
+            </div>
+            <div class="dplayer-info-panel-item dplayer-info-panel-item-fps">
+                <span class="dplayer-info-panel-item-title">Player FPS</span>
+                <span class="dplayer-info-panel-item-data"></span>
+            </div>
+            <div class="dplayer-info-panel-item dplayer-info-panel-item-type">
+                <span class="dplayer-info-panel-item-title">Video type</span>
+                <span class="dplayer-info-panel-item-data"></span>
+            </div>
+            <div class="dplayer-info-panel-item dplayer-info-panel-item-url">
+                <span class="dplayer-info-panel-item-title">Video url</span>
+                <span class="dplayer-info-panel-item-data"></span>
+            </div>
+            <div class="dplayer-info-panel-item dplayer-info-panel-item-resolution">
+                <span class="dplayer-info-panel-item-title">Video resolution</span>
+                <span class="dplayer-info-panel-item-data"></span>
+            </div>
+            <div class="dplayer-info-panel-item dplayer-info-panel-item-duration">
+                <span class="dplayer-info-panel-item-title">Video duration</span>
+                <span class="dplayer-info-panel-item-data"></span>
+            </div>
+            ${options.danmaku ? `
+            <div class="dplayer-info-panel-item dplayer-info-panel-item-danmaku-id">
+                <span class="dplayer-info-panel-item-title">Danamku id</span>
+                <span class="dplayer-info-panel-item-data"></span>
+            </div>
+            <div class="dplayer-info-panel-item dplayer-info-panel-item-danmaku-api">
+                <span class="dplayer-info-panel-item-title">Danamku api</span>
+                <span class="dplayer-info-panel-item-data"></span>
+            </div>
+            <div class="dplayer-info-panel-item dplayer-info-panel-item-danmaku-amount">
+                <span class="dplayer-info-panel-item-title">Danamku amount</span>
+                <span class="dplayer-info-panel-item-data"></span>
+            </div>` : ''}
+        </div>
         ${this.tplContextmenuList(options.contextmenu, tran)}
         <div class="dplayer-notice"></div>`;
     }

src/js/time.js

@@ -15,7 +15,7 @@ class Time {
             }
         )();
 
-        this.types = ['loading', 'progress'];
+        this.types = ['loading', 'progress', 'info', 'fps'];
 
         this.init();
     }
@@ -23,7 +23,9 @@ class Time {
     init () {
         for (let i = 0; i < this.types.length; i++) {
             const type = this.types[i];
-            this[`init${type}Checker`]();
+            if (type !== 'fps') {
+                this[`init${type}Checker`]();
+            }
         }
     }
 
@@ -64,39 +66,53 @@ class Time {
         }, 100);
     }
 
-    enable (type) {
-        if (type) {
-            this[`enable${type}Checker`] = true;
-        }
-        else {
-            for (let i = 0; i < this.types.length; i++) {
-                const type = this.types[i];
-                this[`enable${type}Checker`] = true;
+    initfpsChecker () {
+        window.requestAnimationFrame(() => {
+            if (this.enablefpsChecker) {
+                this.initfpsChecker();
+                if (!this.fpsStart) {
+                    this.fpsStart = new Date();
+                    this.fpsIndex = 0;
+                }
+                else {
+                    this.fpsIndex++;
+                    const fpsCurrent = new Date();
+                    if (fpsCurrent - this.fpsStart > 1000) {
+                        this.player.infoPanel.fps(this.fpsIndex / (fpsCurrent - this.fpsStart) * 1000);
+                        this.fpsStart = new Date();
+                        this.fpsIndex = 0;
+                    }
+                }
             }
-        }
+            else {
+                this.fpsStart = 0;
+                this.fpsIndex = 0;
+            }
+        });
     }
 
-    disable (type) {
-        if (type) {
-            this[`enable${type}Checker`] = false;
-        }
-        else {
-            for (let i = 0; i < this.types.length; i++) {
-                const type = this.types[i];
-                this[`enable${type}Checker`] = false;
+    initinfoChecker () {
+        this.infoChecker = setInterval(() => {
+            if (this.enableinfoChecker) {
+                this.player.infoPanel.update();
             }
+        }, 1000);
+    }
+
+    enable (type) {
+        this[`enable${type}Checker`] = true;
+
+        if (type === 'fps') {
+            this.initfpsChecker();
         }
     }
 
+    disable (type) {
+        this[`enable${type}Checker`] = false;
+    }
+
     destroy (type) {
-        if (type) {
-            clearInterval(this[`${type}Checker`]);
-        }
-        else {
-            for (let i = 0; i < this.types.length; i++) {
-                clearInterval(this[`${this.types[i]}Checker`]);
-            }
-        }
+        this[`${type}Checker`] && clearInterval(this[`${type}Checker`]);
     }
 }