Merge pull request #18 from xqq/master

Display more playback information on InfoPanel
tsukumijima · Oct 29, 2023 · 68cd76d · 68cd76d
2 parents 7d2417a + 90ced5b
commit 68cd76d
Show file tree

Hide file tree

Showing 4 changed files with 73 additions and 33 deletions.
diff --git a/src/css/info-panel.scss b/src/css/info-panel.scss
@@ -2,7 +2,7 @@
     position: absolute;
     top: 10px;
     left: 10px;
-    width: 400px;
+    width: 450px;
     background: rgba(28, 28, 28, 0.8);
     padding: 10px;
     color: #fff;
@@ -32,12 +32,12 @@
     }
 
     .dplayer-info-panel-item-title {
-        width: 107px;
+        width: 100px;
         text-align: right;
         margin-right: 10px;
     }
 
     .dplayer-info-panel-item-data {
-        width: 260px;
+        width: 320px;
     }
 }
diff --git a/src/template/player.art b/src/template/player.art
@@ -275,43 +275,49 @@
 <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-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>
+    <div class="dplayer-info-panel-item dplayer-info-panel-item-mimetype">
+        <span class="dplayer-info-panel-item-title">Mime Type</span>
+        <span class="dplayer-info-panel-item-data"></span>
+    </div>
+    <div class="dplayer-info-panel-item dplayer-info-panel-item-video-fps">
+        <span class="dplayer-info-panel-item-title">Video FPS</span>
+        <span class="dplayer-info-panel-item-data"></span>
+    </div>
+    <div class="dplayer-info-panel-item dplayer-info-panel-item-page-fps">
+        <span class="dplayer-info-panel-item-title">Page FPS</span>
+        <span class="dplayer-info-panel-item-data"></span>
+    </div>
+    <div class="dplayer-info-panel-item dplayer-info-panel-item-dropped-frames">
+        <span class="dplayer-info-panel-item-title">Dropped Frames</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-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-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-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>
-    {{ if options.danmaku }}
-    <div class="dplayer-info-panel-item dplayer-info-panel-item-danmaku-id">
-        <span class="dplayer-info-panel-item-title">Danmaku id</span>
+        <span class="dplayer-info-panel-item-title">Video Duration</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">Danmaku api</span>
+    <div class="dplayer-info-panel-item dplayer-info-panel-item-buffer-remain">
+        <span class="dplayer-info-panel-item-title">Buffer Remain</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">Danmaku amount</span>
+    <div class="dplayer-info-panel-item dplayer-info-panel-item-download-speed">
+        <span class="dplayer-info-panel-item-title">Downlaod Speed</span>
         <span class="dplayer-info-panel-item-data"></span>
     </div>
-    {{ /if }}
 </div>
 <div class="dplayer-menu">
     {{ each options.contextmenu }}

diff --git a/src/ts/info-panel.ts b/src/ts/info-panel.ts
@@ -1,6 +1,8 @@
 /* global DPLAYER_VERSION GIT_HASH */
 import DPlayer from './player';
 import Template from './template';
+import Mpegts from 'mpegts.js';
+import FlvJs from 'flv.js';
 
 class InfoPanel {
     player: DPlayer;
@@ -49,15 +51,43 @@ class InfoPanel {
         this.template.infoUrl.textContent = this.player.options.video.url ?? 'N/A';
         this.template.infoResolution.textContent = `${this.player.video.videoWidth} x ${this.player.video.videoHeight}`;
         this.template.infoDuration.textContent = `${this.player.video.duration}`;
-        if (this.player.options.danmaku && this.player.danmaku !== null) {
-            this.template.infoDanmakuId.textContent = this.player.options.danmaku.id ?? 'N/A';
-            this.template.infoDanmakuApi.textContent = this.player.options.danmaku.api ?? 'N/A';
-            this.template.infoDanmakuAmount.textContent = `${this.player.danmaku.dan.length}`;
+
+        // Dropped Frames
+        if (this.player.video['getVideoPlaybackQuality'] != undefined) {
+            const quality = this.player.video.getVideoPlaybackQuality();
+            this.template.infoDroppedFrames.textContent = `${quality.droppedVideoFrames} / ${quality.totalVideoFrames}`;
+        } else if ((this.player.video as any)['webkitDecodedFrameCount'] != undefined) {
+            const decoded: number = (this.player.video as any)['webkitDecodedFrameCount'];
+            const dropped: number = (this.player.video as any)['webkitDroppedFrameCount'];
+            this.template.infoDroppedFrames.textContent = `${dropped} / ${decoded}`;
+        } else {
+            this.template.infoDroppedFrames.textContent = `N/A`;
+        }
+
+        // Buffer Remain
+        if (this.player.video.buffered.length > 0) {
+            const bufferRemain = this.player.video.buffered.end(0) - this.player.video.currentTime;
+            this.template.infoBufferRemain.textContent = `${bufferRemain.toFixed(3)} s`;
+        } else {
+            this.template.infoBufferRemain.textContent = 'N/A';
+        }
+
+        // flv.js / mpegts.js related metrics
+        if (this.player.type === 'mpegts' || this.player.type === 'flv') {
+            const player: Mpegts.Player | Mpegts.MSEPlayer | Mpegts.NativePlayer | FlvJs.Player | undefined =
+                this.player.plugins.mpegts || this.player.plugins.flvjs;
+            if (player) {
+                const mediaInfo = player.mediaInfo as Mpegts.MSEPlayerMediaInfo;
+                const statisticsInfo = player.statisticsInfo as Mpegts.MSEPlayerStatisticsInfo;
+                this.template.infoMimeType.textContent = mediaInfo.mimeType ?? 'N/A';
+                this.template.infoVideoFPS.textContent = `${mediaInfo.fps?.toFixed(3) ?? 'N/A'}`;
+                this.template.infoDownloadSpeed.textContent = statisticsInfo.speed?.toFixed(3).toString() + ' KB/s' ?? 'N/A';
+            }
         }
     }
 
     fps(value: number): void {
-        this.template.infoFPS.textContent = `${value.toFixed(1)}`;
+        this.template.infoPageFPS.textContent = `${value.toFixed(1)}`;
     }
 }
 

diff --git a/src/ts/template.ts b/src/ts/template.ts
@@ -84,15 +84,17 @@ class Template {
     notice!: HTMLElement;
     infoPanel!: HTMLElement;
     infoPanelClose!: HTMLElement;
+    infoMimeType!: HTMLElement;
     infoVersion!: HTMLElement;
-    infoFPS!: HTMLElement;
+    infoVideoFPS!: HTMLElement;
+    infoPageFPS!: HTMLElement;
+    infoDroppedFrames!: HTMLElement;
     infoType!: HTMLElement;
     infoUrl!: HTMLElement;
     infoResolution!: HTMLElement;
     infoDuration!: HTMLElement;
-    infoDanmakuId!: HTMLElement;
-    infoDanmakuApi!: HTMLElement;
-    infoDanmakuAmount!: HTMLElement;
+    infoBufferRemain!: HTMLElement;
+    infoDownloadSpeed!: HTMLElement;
 
     constructor(options: { container: HTMLElement; options: DPlayerType.OptionsInternal; index: number; tran: (text: string) => string; }) {
         this.container = options.container;
@@ -196,15 +198,17 @@ class Template {
         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.infoMimeType = this.container.querySelector('.dplayer-info-panel-item-mimetype .dplayer-info-panel-item-data')!;
         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.infoVideoFPS = this.container.querySelector('.dplayer-info-panel-item-video-fps .dplayer-info-panel-item-data')!;
+        this.infoPageFPS = this.container.querySelector('.dplayer-info-panel-item-page-fps .dplayer-info-panel-item-data')!;
+        this.infoDroppedFrames = this.container.querySelector('.dplayer-info-panel-item-dropped-frames .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')!;
+        this.infoBufferRemain = this.container.querySelector('.dplayer-info-panel-item-buffer-remain .dplayer-info-panel-item-data')!;
+        this.infoDownloadSpeed = this.container.querySelector('.dplayer-info-panel-item-download-speed .dplayer-info-panel-item-data')!;
     }
 }