添加弹幕插件方法

packages/artplayer-plugin-danmu/src/danmuku.js

@@ -1,10 +1,10 @@
 export default class Danmuku {
-    constructor(art, option) {
+    constructor(art, option = {}) {
         this.art = art;
         this.option = {};
         this.config(option);
         this.current = [];
-        this.layer = null;
+        this.layer = {};
         this.isStop = false;
         this.init();
     }
@@ -12,7 +12,7 @@ export default class Danmuku {
     static get option() {
         return {
             danmu: [],
-            speed: 3,
+            speed: 5,
             opacity: 1,
             color: '#fff',
             size: 14,
@@ -53,15 +53,37 @@ export default class Danmuku {
                 overflow: 'hidden',
             },
         });
+
+        this.art.on('video:timeupdate', this.update.bind(this));
+        this.art.on('video:play', this.start.bind(this));
+        this.art.on('video:pause', this.stop.bind(this));
+        this.art.on('video:ended', this.stop.bind(this));
+        this.art.on('destroy', this.stop.bind(this));
     }
 
     emit(danmu) {
-        const { errorHandle, setStyles, append } = this.art.constructor.utils;
-        errorHandle(danmu.text, 'Danmu text cannot be empty');
-        errorHandle(danmu.time, 'Danmu time cannot be empty');
-        const $danmu = document.createElement('div');
-        $danmu.innerText = danmu.text;
-        setStyles($danmu, {
+        const { errorHandle } = this.art.constructor.utils;
+        errorHandle(danmu.text.trim(), 'Danmu text cannot be empty');
+        const { clientWidth: playerWidth, clientHeight: playerHeight } = this.art.template.$player;
+        const danmuItem = this.getDanmuItem();
+        danmuItem.$ref.innerText = danmu.text;
+        danmuItem.$ref.style.fontSize = danmu.size || this.option.size;
+        const { clientWidth: danmuWidth, clientHeight: danmuHeight } = danmuItem.$ref;
+        danmuItem.$ref.style.opacity = danmu.opacity || this.option.opacity;
+        danmuItem.$ref.style.color = danmu.color || this.option.color;
+        danmuItem.$ref.style.top = this.getDanmuTop(playerHeight, danmuHeight);
+        danmuItem.$ref.style.left = `${playerWidth}px`;
+        danmuItem.$ref.style.transform = `translateX(${-playerWidth - danmuWidth}px) translateY(0px) translateZ(0px)`;
+        danmuItem.$ref.style.transition = `-webkit-transform ${danmu.speed || this.option.speed}s linear 0s`;
+        this.art.emit('artplayerPluginDanmu:emit', danmu);
+    }
+
+    getDanmuItem() {
+        const { setStyles, append } = this.art.constructor.utils;
+        const inactiveItem = this.current.find(item => item.state === 'inactive');
+        if (inactiveItem) return inactiveItem;
+        const $ref = document.createElement('div');
+        setStyles($ref, {
             userSelect: 'none',
             position: 'absolute',
             whiteSpace: 'pre',
@@ -69,21 +91,26 @@ export default class Danmuku {
             perspective: '500px',
             display: 'inline-block',
             willChange: 'transform',
-            fontSize: `${danmu.size || 14}px`,
-            color: danmu.color || '#fff',
             fontFamily: 'SimHei, "Microsoft JhengHei", Arial, Helvetica, sans-serif',
             fontWeight: 'normal',
             lineHeight: '1.125',
-            opacity: '1',
             textShadow:
                 'rgb(0, 0, 0) 1px 0px 1px, rgb(0, 0, 0) 0px 1px 1px, rgb(0, 0, 0) 0px -1px 1px, rgb(0, 0, 0) -1px 0px 1px',
-            left: '638px',
-            top: '0px',
-            transform: 'translateX(-626.14px) translateY(0px) translateZ(0px)',
-            transition: '-webkit-transform 0s linear 0s',
         });
-        this.current.push(append(this.layer.$ref, $danmu));
-        this.art.emit('artplayerPluginDanmu:emit', danmu);
+        return {
+            state: 'active',
+            $ref: append(this.layer.$ref, $ref),
+        };
+    }
+
+    getDanmuTop(playerHeight, danmuHeight) {
+        return 0;
+    }
+
+    update() {
+        if (!this.isStop && this.option.danmu.length) {
+            // 播放速度
+        }
     }
 
     config(option) {

packages/artplayer-plugin-danmu/src/index.js

@@ -6,12 +6,12 @@ function artplayerPluginDanmu(option) {
         const danmuku = new Danmuku(art, option);
         return {
             name: 'artplayerPluginDanmu',
-            emit: danmuku.emit,
-            start: danmuku.start,
-            stop: danmuku.stop,
-            hide: danmuku.hide,
-            show: danmuku.show,
-            config: danmuku.config,
+            emit: danmuku.emit.bind(danmuku),
+            start: danmuku.start.bind(danmuku),
+            stop: danmuku.stop.bind(danmuku),
+            hide: danmuku.hide.bind(danmuku),
+            show: danmuku.show.bind(danmuku),
+            config: danmuku.config.bind(danmuku),
         };
     };
 }