add log plugin

packages/artplayer/src/plugins/index.js

@@ -4,6 +4,7 @@ import localVideo from './localVideo';
 import localSubtitle from './localSubtitle';
 import miniProgressBar from './miniProgressBar';
 import networkMonitor from './networkMonitor';
+import log from './log';
 
 export default class Plugins {
     constructor(art) {
@@ -32,6 +33,10 @@ export default class Plugins {
             this.add(networkMonitor);
         }
 
+        if (option.log) {
+            this.add(log);
+        }
+
         art.option.plugins.forEach((plugin) => {
             this.add(plugin);
         });

packages/artplayer/src/plugins/log.js

@@ -0,0 +1,46 @@
+import { append, setStyle, remove, escape } from '../utils';
+
+export default function log(art) {
+    const { layers } = art;
+
+    let $log = null;
+    layers.add({
+        name: 'log',
+        mounted($el) {
+            $log = $el;
+        },
+    });
+
+    let timer = null;
+    const max = 5;
+    const timeout = 3000;
+
+    function check() {
+        const count = $log.childElementCount;
+        if (count) {
+            if (count > max) {
+                remove($log.firstElementChild);
+                timer = setTimeout(check, timeout);
+            } else {
+                timer = setTimeout(() => {
+                    remove($log.firstElementChild);
+                    check();
+                }, timeout);
+            }
+        } else {
+            setStyle($log, 'display', 'none');
+        }
+    }
+
+    art.on('destroy', () => clearTimeout(timer));
+
+    return {
+        name: 'log',
+        emit(msg) {
+            append($log, `<p>${escape(msg)}</p>`);
+            setStyle($log, 'display', 'block');
+            clearTimeout(timer);
+            check();
+        },
+    };
+}

packages/artplayer/src/style/index.scss

@@ -18,5 +18,6 @@
 @import './mini.scss';
 @import './autoSize.scss';
 @import './flip.scss';
+@import './plugins.scss';
 @import './selector.scss';
 @import './balloon.scss';

packages/artplayer/src/style/plugins.scss

@@ -0,0 +1,20 @@
+.art-video-player .art-layers .art-layer-log {
+    display: none;
+    position: absolute;
+    left: 10px;
+    bottom: 50px;
+    width: 120px;
+    color: #fff;
+    text-shadow: 0 0 2px rgba(0, 0, 0, 0.5);
+    background-color: rgba(0, 0, 0, 0.5);
+    border-radius: 3px;
+    padding: 5px;
+    font-size: 13px;
+    pointer-events: none;
+    user-select: none;
+
+    p {
+        margin-bottom: 0;
+        word-break: break-all;
+    }
+}