add info

src/info.js

@@ -1,13 +1,94 @@
+import { append } from './utils';
+
 export default class Info {
   constructor(art) {
     this.art = art;
+    this.init();
+  }
+
+  init() {
+    const { refs: { $infoClose }, events: { proxy } } = this.art;
+    proxy($infoClose, 'click', () => {
+      this.hide();
+    });
   }
 
   show() {
-    console.log('info show');
+    const { $info, $infoPanel } = this.art.refs;
+    $info.style.display = 'block';
+    if (!$infoPanel.innerHTML) {
+      append($infoPanel, this.creatInfo());
+    }
+    clearTimeout(this.timer);
+    this.loop();
+    this.art.emit('info:show', $info);
+  }
+
+  creatInfo() {
+    const infoHtml = [];
+
+    infoHtml.push(`
+      <div class="art-info-item ">
+        <div class="art-info-title">Player version:</div>
+        <div class="art-info-content">__VERSION__</div>
+      </div>
+    `);
+
+    infoHtml.push(`
+      <div class="art-info-item">
+        <div class="art-info-title">Video url:</div>
+        <div class="art-info-content" data-type="currentSrc"></div>
+      </div>
+    `);
+
+    infoHtml.push(`
+      <div class="art-info-item">
+        <div class="art-info-title">Video volume:</div>
+        <div class="art-info-content" data-type="volume"></div>
+      </div>
+    `);
+
+    infoHtml.push(`
+      <div class="art-info-item">
+        <div class="art-info-title">Video time:</div>
+        <div class="art-info-content" data-type="currentTime"></div>
+      </div>
+    `);
+
+    infoHtml.push(`
+      <div class="art-info-item">
+        <div class="art-info-title">Video duration:</div>
+        <div class="art-info-content" data-type="duration"></div>
+      </div>
+    `);
+
+    infoHtml.push(`
+      <div class="art-info-item">
+        <div class="art-info-title">Video resolution:</div>
+        <div class="art-info-content">
+          <span data-type="videoWidth"></span> x <span data-type="videoHeight"></span>
+        </div>
+      </div>
+    `);
+
+    return infoHtml.join('');
+  }
+
+  loop() {
+    const { $infoPanel, $video } = this.art.refs;
+    this.timer = setTimeout(() => {
+      const types = Array.from($infoPanel.querySelectorAll('[data-type]'));
+      types.forEach(item => {
+        item.innerHTML = $video[item.dataset.type];
+      });
+      this.loop();
+    }, 1000);
   }
 
   hide() {
-    console.log('info hide');
+    const { $info } = this.art.refs;
+    $info.style.display = 'none';
+    clearTimeout(this.timer);
+    this.art.emit('info:hide', $info);
   }
 }

src/style/index.scss

@@ -273,6 +273,43 @@
         }
     }
 
+    .artplayer-info {
+        display: none;
+        position: absolute;
+        left: 20px;
+        top: 20px;
+        z-index: 80;
+        width: 350px;
+        min-height: 150px;
+        padding: 10px;
+        color: #fff;
+        font-size: 12px;
+        font-family: Noto Sans CJK SC DemiLight,Roboto,Segoe UI,Tahoma,Arial,Helvetica,sans-serif;
+        -webkit-font-smoothing: antialiased;
+        background: rgba(0,0,0,.7);
+
+        .art-info-item {
+            display: flex;
+            margin-bottom: 5px;
+            .art-info-title {
+                width: 100px;
+                text-align: right;
+            }
+    
+            .art-info-content {
+                flex: 1;
+                padding-left: 5px;
+            }
+        }
+
+        .artplayer-info-close {
+            position: absolute;
+            top: 5px;
+            right: 5px;
+            cursor: pointer;
+        }
+    }
+
     &.artplayer-error {
         .art-progress-indicator, .art-progress-tip {
             display: none !important;

src/template.js

@@ -21,6 +21,10 @@ export default class Template {
           </div>
           <div class="artplayer-loading"></div>
           <div class="artplayer-notice"></div>
+          <div class="artplayer-info">
+            <div class="artplayer-info-panel"></div>
+            <div class="artplayer-info-close">[x]</div>
+          </div>
         </div>
       `;
     refs.$player = refs.$container.querySelector('.artplayer-video-player');
@@ -35,5 +39,8 @@ export default class Template {
     refs.$loading = refs.$container.querySelector('.artplayer-loading');
     refs.$notice = refs.$container.querySelector('.artplayer-notice');
     refs.$mask = refs.$container.querySelector('.artplayer-mask');
+    refs.$info = refs.$container.querySelector('.artplayer-info');
+    refs.$infoPanel = refs.$container.querySelector('.artplayer-info-panel');
+    refs.$infoClose = refs.$container.querySelector('.artplayer-info-close');
   }
 }