build all packages

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

@@ -12,7 +12,6 @@ export default class Danmuku {
         art.setting.add(speed);
         this.art = art;
         this.queue = [];
-        this.refs = [];
         this.option = {};
         this.config(option);
         this.isStop = false;
@@ -126,52 +125,6 @@ export default class Danmuku {
         });
     }
 
-    getDanmuTop(mode) {
-        const { $player } = this.art.template;
-        const { left: playerLeft, top: playerTop, height: playerHeight, width: playerWidth } = getRect($player);
-        const danmus = this.queue.filter(danmu => danmu.mode === mode && danmu.$state === 'emit');
-
-        if (danmus.length === 0) {
-            return this.option.margin[0];
-        }
-
-        const danmusBySort = danmus
-            .map(danmu => {
-                const { left: danmuLeft, top: danmuTop, width: danmuWidth, height: danmuHeight } = getRect(danmu.$ref);
-                const top = danmuTop - playerTop;
-                const left = danmuLeft - playerLeft;
-                const right = playerWidth - left - danmuWidth;
-                return {
-                    top,
-                    left,
-                    right,
-                    height: danmuHeight,
-                    width: danmuWidth,
-                };
-            })
-            .sort((prev, next) => {
-                return prev.top - next.top;
-            });
-
-        danmusBySort.unshift({
-            top: 0,
-            left: 0,
-            right: 0,
-            height: this.option.margin[0],
-            width: playerWidth,
-        });
-
-        danmusBySort.push({
-            top: playerHeight - this.option.margin[1],
-            left: 0,
-            right: 0,
-            height: this.option.margin[1],
-            width: playerWidth,
-        });
-
-        return getDanmuTop(danmusBySort);
-    }
-
     update() {
         const {
             player,
@@ -203,12 +156,8 @@ export default class Danmuku {
                         );
                     })
                     .forEach(danmu => {
-                        danmu.$state = 'emit';
                         danmu.$ref = getDanmuRef(this.queue);
                         this.$danmuku.appendChild(danmu.$ref);
-                        if (!this.refs.includes(danmu.$ref)) {
-                            this.refs.push(danmu.$ref);
-                        }
                         danmu.$ref.style.opacity = this.option.opacity;
                         danmu.$ref.style.fontSize = `${this.option.fontSize}px`;
                         danmu.$ref.innerText = danmu.text;
@@ -217,7 +166,8 @@ export default class Danmuku {
                         danmu.$restTime = this.option.speed;
                         danmu.$lastStartTime = Date.now();
                         const danmuWidth = getRect(danmu.$ref, 'width');
-                        const danmuTop = this.getDanmuTop(danmu.mode);
+                        const danmuTop = getDanmuTop(this, danmu);
+                        danmu.$state = 'emit';
                         switch (danmu.mode) {
                             case 'scroll': {
                                 danmu.$restWidth = danmuLeft + danmuWidth + 5;
@@ -285,6 +235,7 @@ export default class Danmuku {
         }
 
         this.queue.push({
+            mode: 'scroll',
             ...danmu,
             $state: 'wait',
             $ref: null,

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

@@ -1,5 +1,18 @@
-function getDanmuTopByDiff(danmus) {
+import { getRect } from './utils';
+
+function calculatedTop(danmus) {
     let top = 0;
+    const topMap = {};
+    for (let index = 0; index < danmus.length; index += 1) {
+        const item = danmus[index];
+        if (topMap[item.top]) {
+            topMap[item.top].push(item);
+        } else {
+            topMap[item.top] = [item];
+        }
+    }
+    const topMapKeys = Object.keys(topMap);
+
     let maxDiff = 0;
     for (let index = 1; index < danmus.length; index += 1) {
         const item = danmus[index];
@@ -11,52 +24,82 @@ function getDanmuTopByDiff(danmus) {
             maxDiff = diff;
         }
     }
-    return top;
-}
 
-function getDanmuTopBySparse(danmus) {
-    const topMap = {};
-    for (let index = 0; index < danmus.length; index += 1) {
-        const item = danmus[index];
-        if (topMap[item.top]) {
-            topMap[item.top].push(item);
-        } else {
-            topMap[item.top] = [item];
-        }
-    }
+    if (top === 0) {
+        let maxRight = 0;
+        for (let index = 0; index < topMapKeys.length; index += 1) {
+            let minRight = danmus[0].width;
+            const topKey = topMapKeys[index];
+            const danmuArr = topMap[topKey];
+            for (let index = 0; index < danmuArr.length; index += 1) {
+                const danmu = danmuArr[index];
+                if (danmu.right < minRight) {
+                    minRight = danmu.right;
+                }
+            }
 
-    let maxRight = 0;
-    let top = 0;
-    const topMapKeys = Object.keys(topMap);
-    for (let index = 0; index < topMapKeys.length; index += 1) {
-        let minRight = danmus[0].width;
-        const topKey = topMapKeys[index];
-        const danmuArr = topMap[topKey];
-        for (let index = 0; index < danmuArr.length; index += 1) {
-            const danmu = danmuArr[index];
-            if (danmu.right < minRight) {
-                minRight = danmu.right;
+            if (minRight > maxRight) {
+                maxRight = minRight;
+                [{ top }] = danmuArr;
             }
         }
-
-        if (minRight > maxRight) {
-            maxRight = minRight;
-            [{ top }] = danmuArr;
-        }
     }
 
     if (top === 0) {
-        const randomKey = Math.floor(Math.random() * (2 - topMapKeys.length) + topMapKeys.length - 1);
-        top = topMapKeys[randomKey];
+        [top] = topMapKeys
+            .filter((item, index) => {
+                return index !== 0 && index !== topMapKeys.length - 1;
+            })
+            .sort((prev, next) => {
+                return topMap[prev].length - topMap[next].length;
+            });
     }
 
     return top;
 }
 
-export default function getDanmuTop(danmus) {
-    let top = getDanmuTopByDiff(danmus);
-    if (top === 0) {
-        top = getDanmuTopBySparse(danmus);
+export default function getDanmuTop(ins, danmu) {
+    const [marginTop, marginBottom] = ins.option.margin;
+    const playerData = getRect(ins.art.template.$player);
+    const danmus = ins.queue
+        .filter(
+            item =>
+                item.mode === danmu.mode &&
+                item.$state === 'emit' &&
+                item.$ref &&
+                item.$ref.style.fontSize === danmu.$ref.style.fontSize,
+        )
+        .map(item => {
+            const danmuData = getRect(item.$ref);
+            const { width, height } = danmuData;
+            const top = danmuData.top - playerData.top;
+            const left = danmuData.left - playerData.left;
+            const right = playerData.width - left - width;
+            return { top, left, height, width, right, item };
+        })
+        .sort((prev, next) => {
+            return prev.top - next.top;
+        });
+
+    if (danmus.length === 0) {
+        return marginTop;
     }
-    return top;
+
+    danmus.unshift({
+        top: 0,
+        left: 0,
+        right: 0,
+        height: marginTop,
+        width: playerData.width,
+    });
+
+    danmus.push({
+        top: playerData.height - marginBottom,
+        left: 0,
+        right: 0,
+        height: marginBottom,
+        width: playerData.width,
+    });
+
+    return calculatedTop(danmus);
 }