add danmu filter

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

@@ -35,6 +35,7 @@ export default class Danmuku {
             margin: [10, 100],
             opacity: 1,
             fontSize: 25,
+            filter: () => true,
             synchronousPlayback: false,
         };
     }
@@ -47,6 +48,7 @@ export default class Danmuku {
             margin: 'array',
             opacity: 'number',
             fontSize: 'number',
+            filter: 'function',
             synchronousPlayback: 'boolean',
         };
     }
@@ -55,6 +57,40 @@ export default class Danmuku {
         return this.art.plugins.autoOrientation && this.art.plugins.autoOrientation.state;
     }
 
+    get marginTop() {
+        const { clamp } = this.utils;
+        const { $player } = this.art.template;
+        const value = this.option.margin[0];
+
+        if (typeof value === 'number') {
+            return clamp(value, 0, $player.clientHeight);
+        }
+
+        if (typeof value === 'string' && value.endsWith('%')) {
+            const ratio = parseFloat(value) / 100;
+            return clamp($player.clientHeight * ratio, 0, $player.clientHeight);
+        }
+
+        return Danmuku.option.margin[0];
+    }
+
+    get marginBottom() {
+        const { clamp } = this.utils;
+        const { $player } = this.art.template;
+        const value = this.option.margin[1];
+
+        if (typeof value === 'number') {
+            return clamp(value, 0, $player.clientHeight);
+        }
+
+        if (typeof value === 'string' && value.endsWith('%')) {
+            const ratio = parseFloat(value) / 100;
+            return clamp($player.clientHeight * ratio, 0, $player.clientHeight);
+        }
+
+        return Danmuku.option.margin[1];
+    }
+
     filter(state, callback) {
         return this.queue.filter((danmu) => danmu.$state === state).map(callback);
     }
@@ -160,8 +196,6 @@ export default class Danmuku {
 
         this.option.speed = clamp(this.option.speed, 1, 10);
         this.option.maxlength = clamp(this.option.maxlength, 10, 100);
-        this.option.margin[0] = clamp(this.option.margin[0], 0, 200);
-        this.option.margin[1] = clamp(this.option.margin[1], 0, 200);
         this.option.opacity = clamp(this.option.opacity, 0, 1);
         this.option.fontSize = clamp(this.option.fontSize, 12, 100);
 
@@ -348,6 +382,7 @@ export default class Danmuku {
             border: 'boolean|undefined',
         });
 
+        if (!this.option.filter(danmu)) return this;
         if (!danmu.text.trim()) return this;
         if (danmu.text.length > this.option.maxlength) return this;
 

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

@@ -57,7 +57,6 @@ function calculatedTop(danmus) {
 }
 
 export default function getDanmuTop(ins, danmu) {
-    const [marginTop, marginBottom] = ins.option.margin;
     const { $player } = ins.art.template;
 
     const danmus = ins.queue
@@ -67,7 +66,7 @@ export default function getDanmuTop(ins, danmu) {
                 item.$state === 'emit' &&
                 item.$ref &&
                 item.$ref.style.fontSize === danmu.$ref.style.fontSize &&
-                item.$ref.offsetTop <= $player.clientHeight - marginBottom
+                item.$ref.offsetTop <= $player.clientHeight - ins.marginBottom
             );
         })
         .map((item) => {
@@ -82,22 +81,22 @@ export default function getDanmuTop(ins, danmu) {
         .sort((prev, next) => prev.top - next.top);
 
     if (danmus.length === 0) {
-        return marginTop;
+        return ins.marginTop;
     }
 
     danmus.unshift({
         top: 0,
         left: 0,
         right: 0,
-        height: marginTop,
+        height: ins.marginTop,
         width: $player.clientWidth,
     });
 
     danmus.push({
-        top: $player.clientHeight - marginBottom,
+        top: $player.clientHeight - ins.marginBottom,
         left: 0,
         right: 0,
-        height: marginBottom,
+        height: ins.marginBottom,
         width: $player.clientWidth,
     });