build all packages

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

@@ -22,17 +22,21 @@ export function bilibiliDanmuParseFromXml(xmlString) {
         : [];
 }
 
+export function bilibiliDanmuParseFromUrl(url) {
+    return fetch(url)
+        .then(res => res.text())
+        .then(xmlString => {
+            return bilibiliDanmuParseFromXml(xmlString);
+        });
+}
+
 export function bilibiliDanmuParseFromAv(av) {
     const corsUrl = 'https://cors-anywhere.herokuapp.com/';
     return fetch(`${corsUrl}https://api.bilibili.com/x/web-interface/view?aid=${av}`)
         .then(res => res.json())
         .then(res => {
             if (res.code === 0 && res.data && res.data.cid) {
-                return fetch(`${corsUrl}https://api.bilibili.com/x/v1/dm/list.so?oid=${res.data.cid}`)
-                    .then(res => res.text())
-                    .then(xmlString => {
-                        return bilibiliDanmuParseFromXml(xmlString);
-                    });
+                return bilibiliDanmuParseFromUrl(`${corsUrl}https://api.bilibili.com/x/v1/dm/list.so?oid=${res.data.cid}`);
             }
             throw new Error(`Unable to get data: ${JSON.stringify(res)}`);
         });

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

@@ -1,23 +1,31 @@
+import { bilibiliDanmuParseFromUrl } from './bilibiliDanmuParse';
+import getDanmuTop from './getDanmuTop';
+
 export default class Danmuku {
-    constructor(art, option = {}) {
+    constructor(art, option) {
         this.art = art;
         this.queue = [];
         this.layer = null;
         this.isStop = false;
         this.animationFrameTimer = null;
-        this.option = Object.assign({}, Danmuku.option, option);
-        art.constructor.validator(this.option, Danmuku.scheme);
         art.on('video:play', this.start.bind(this));
         art.on('video:playing', this.start.bind(this));
         art.on('video:pause', this.stop.bind(this));
         art.on('video:waiting', this.stop.bind(this));
         art.on('destroy', this.stop.bind(this));
+        this.config(option);
         if (typeof this.option.danmus === 'function') {
             this.option.danmus().then(danmus => {
                 danmus.forEach(this.addToQueue.bind(this));
                 this.init();
                 art.emit('artplayerPluginDanmu:loaded', danmus);
             });
+        } else if (typeof this.option.danmus === 'string') {
+            bilibiliDanmuParseFromUrl(this.option.danmus).then(danmus => {
+                danmus.forEach(this.addToQueue.bind(this));
+                this.init();
+                art.emit('artplayerPluginDanmu:loaded', danmus);
+            });
         } else {
             this.option.danmus.forEach(this.addToQueue.bind(this));
             this.init();
@@ -38,7 +46,7 @@ export default class Danmuku {
 
     static get scheme() {
         return {
-            danmus: 'array|function',
+            danmus: 'array|function|string',
             speed: 'number',
             opacity: 'number',
             color: 'string',
@@ -53,6 +61,21 @@ export default class Danmuku {
         return key ? result[key] : result;
     }
 
+    config(option) {
+        const {
+            utils: { clamp },
+            validator,
+        } = this.art.constructor;
+        this.option = Object.assign({}, Danmuku.option, option);
+        validator(this.option, Danmuku.scheme);
+        this.option.speed = clamp(this.option.speed, 1, 10);
+        this.option.opacity = clamp(this.option.opacity, 0, 1);
+        this.option.size = clamp(this.option.size, 12, 30);
+        this.option.maxlength = clamp(this.option.maxlength, 10, 100);
+        this.option.margin[0] = clamp(this.option.margin[0], 0, 100);
+        this.option.margin[1] = clamp(this.option.margin[1], 0, 100);
+    }
+
     init() {
         this.layer = this.art.layers.add({
             name: 'danmu',
@@ -86,6 +109,9 @@ export default class Danmuku {
         danmu.$ref.style.top = `${this.getDanmuTop()}px`;
         danmu.$ref.style.transform = `translateX(${-danmu.$restWidth}px) translateY(0px) translateZ(0px)`;
         danmu.$ref.style.transition = `-webkit-transform ${danmu.$restTime}s linear 0s`;
+        if (danmu.border) {
+            danmu.$ref.style.border = `1px solid ${danmu.border}`;
+        }
         danmu.$state = 'emit';
     }
 
@@ -174,17 +200,50 @@ export default class Danmuku {
 
     getDanmuTop() {
         const { $player } = this.art.template;
-        const playerHeight = Danmuku.getRect($player, 'height');
+        const { left: playerLeft, top: playerTop, height: playerHeight, width: playerWidth } = Danmuku.getRect($player);
         const danmus = this.queue.filter(danmu => danmu.$state === 'emit');
+
         if (danmus.length === 0) {
             return this.option.margin[0];
         }
 
-        if (danmus.length === 1) {
-            return this.option.margin[0] + Danmuku.getRect(danmus[0].$ref, 'height');
-        }
+        const danmusBySort = danmus
+            .map(danmu => {
+                const { left: danmuLeft, top: danmuTop, width: danmuWidth, height: danmuHeight } = Danmuku.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;
+            });
 
-        return 0;
+        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() {

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

@@ -0,0 +1,62 @@
+function getDanmuTopByDiff(danmus) {
+    let top = 0;
+    let maxDiff = 0;
+    for (let index = 1; index < danmus.length; index += 1) {
+        const item = danmus[index];
+        const prev = danmus[index - 1];
+        const prevTop = prev.top + prev.height;
+        const diff = item.top - prevTop;
+        if (diff > maxDiff) {
+            top = prevTop;
+            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];
+        }
+    }
+
+    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 (top === 0) {
+        const randomKey = Math.floor(Math.random() * (2 - topMapKeys.length) + topMapKeys.length - 1);
+        top = topMapKeys[randomKey];
+    }
+
+    return top;
+}
+
+export default function getDanmuTop(danmus) {
+    let top = getDanmuTopByDiff(danmus);
+    if (top === 0) {
+        top = getDanmuTopBySparse(danmus);
+    }
+    return top;
+}

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

@@ -1,4 +1,4 @@
-import { bilibiliDanmuParseFromXml, bilibiliDanmuParseFromAv } from './bilibiliDanmuParse';
+import { bilibiliDanmuParseFromXml, bilibiliDanmuParseFromAv, bilibiliDanmuParseFromUrl } from './bilibiliDanmuParse';
 import Danmuku from './danmuku';
 
 function artplayerPluginDanmu(option) {
@@ -7,6 +7,7 @@ function artplayerPluginDanmu(option) {
         return {
             name: 'artplayerPluginDanmu',
             emit: danmuku.addToQueue.bind(danmuku),
+            config: danmuku.config.bind(danmuku),
             start: danmuku.start.bind(danmuku),
             stop: danmuku.stop.bind(danmuku),
             hide: danmuku.hide.bind(danmuku),
@@ -17,5 +18,6 @@ function artplayerPluginDanmu(option) {
 
 artplayerPluginDanmu.bilibiliDanmuParseFromXml = bilibiliDanmuParseFromXml;
 artplayerPluginDanmu.bilibiliDanmuParseFromAv = bilibiliDanmuParseFromAv;
+artplayerPluginDanmu.bilibiliDanmuParseFromUrl = bilibiliDanmuParseFromUrl;
 window.artplayerPluginDanmu = artplayerPluginDanmu;
 export default artplayerPluginDanmu;