Danmuku (#759)

* chore: Bump artplayer-plugin-danmuku version to 5.1.0 * chore: Update danmuku plugin with new mount option * chore: Update danmuku plugin with new mount option * chore: Update danmuku plugin with new mount option * chore: Update danmuku plugin with new mount option * chore: Update danmuku plugin with new mount option * chore: Update danmuku plugin with new mount option * chore: Refactor getDanmuTop function to handle additional cases * chore: Refactor getDanmuTop function to handle additional cases * chore: Update danmuku plugin with new mount option * chore: Update danmuku plugin with new mount option * chore: Refactor danmuku plugin to always create a new Setting instance * Refactor danmuku plugin to always create a new Setting instance * Refactor danmuku plugin to always create a new Setting instance * Update danmuku.js * Update danmuku.js * Refactor danmuku plugin to include a new Setting instance * Refactor danmuku plugin to include a new Setting instance * Refactor danmuku plugin styles for better alignment and spacing * Refactor danmuku plugin styles for better alignment and spacing * Refactor danmuku plugin styles for better alignment and spacing * Refactor danmuku plugin styles for better alignment and spacing * Refactor danmuku plugin styles for better alignment and spacing * chore: Update package.json files * Refactor danmuku plugin to remove unnecessary whitespace in the setting template * chore: Remove ESLint configuration files and update npm dependencies * chore: Update ESLint configuration to disable console warnings and fix unused variable warnings * chore: Update ESLint configuration to fix quotes rule * Update package.json * Update package.json * Update setting.js * chore: Compress CSS code in build script * chore: Update build script to compress JavaScript code * chore: Update build script to compress JavaScript code * chore: Refactor setting.js to improve code organization and remove unused variables * chore: Add isHover flag to Control component for better control hiding behavior * chore: Update Control component to use $bottom instead of $controls for better control hiding behavior * Update package.json * Update package.json * Update package.json * chore: Update lerna.json to use independent versioning and yarn as npm client * refactor: Update Danmuku class to support configurable modes and visibility * refactor: Update Danmuku styles for better visibility and configurability * feat: Update font weight in Danmuku styles for better readability * refactor: Update Danmuku class to support configurable modes and visibility * refactor: Add opacity, area, font, and speed sliders to Danmuku settings * refactor: Initialize sliders for opacity, area, font, and speed in Danmuku settings * feat: Add slider UI for opacity, area, and speed in Danmuku settings * feat: Update slider styles in Danmuku settings for better visibility and configurability * refactor: Improve Danmuku settings UI for better visibility and configurability * refactor: Improve Danmuku settings UI for better visibility and configurability * refactor: Update slider styles in Danmuku settings for better visibility and configurability * refactor: Update margin slider initialization in Danmuku settings * refactor: Update slider styles and initialization in Danmuku settings * refactor: Update Danmuku class to support configurable visibility * refactor: Update Danmuku class to support configurable visibility * refactor: Update Danmuku class to support configurable visibility * refactor: Update Danmuku class to support configurable visibility * refactor: Update Danmuku settings UI for better visibility and configurability * refactor: Update Danmuku settings UI for better visibility and configurability * refactor: Update Danmuku settings UI for better visibility and configurability * refactor: Update Danmuku settings UI for better visibility and configurability * refactor: Improve Danmuku settings UI for better visibility and configurability * add lock * refactor: Add lock and unlock methods to Danmuku settings * refactor: Update Danmuku settings UI for better visibility and configurability * refactor: Update Danmuku settings UI for better visibility and configurability * refactor: Update Danmuku settings UI for better visibility and configurability * refactor: Update Danmuku settings UI for better visibility and configurability * Update artplayer-plugin-danmuku.d.ts * refactor: Update Danmuku settings UI for better visibility and configurability * refactor: Update Danmuku settings UI for better visibility and configurability * refactor: Update Danmuku settings UI for better visibility and configurability * refactor: Update Danmuku settings UI for better visibility and configurability * refactor: Update Danmuku settings event listeners * refactor: Update Danmuku settings UI for better visibility and configurability * refactor: Update Danmuku settings UI for better visibility and configurability * refactor: Update Danmuku settings UI for better visibility and configurability * refactor: Update Danmuku settings UI for better visibility and configurability
2026-10-25 16:11:20 -08:00 · 2024-05-26 14:57:22 +08:00
1 parent dfd1cf968d
commit 699135afcf
@@ -1,13 +1,24 @@
 function getDanmuTop({ target, emits, clientWidth, clientHeight, marginBottom, marginTop, antiOverlap }) {
+    // 弹幕最大高度
+    const maxTop = clientHeight - marginBottom;
+
+    // 过滤同模式的弹幕，即每种模式各不影响
    const danmus = emits
-        .filter((item) => item.mode === target.mode && item.top <= clientHeight - marginBottom)
+        .filter((item) => item.mode === target.mode && item.top <= maxTop)
        .sort((prev, next) => prev.top - next.top);

+    // 如果没有同模式的弹幕，直接返回
    if (danmus.length === 0) {
-        return marginTop;
+        if (target.mode === 2) {
+            return maxTop - target.height;
+        } else {
+            return marginTop;
+        }
    }

+    // 上下各加一个虚拟弹幕，方便计算
    danmus.unshift({
+        type: 'top',
        top: 0,
        left: 0,
        right: 0,
@@ -18,7 +29,8 @@ function getDanmuTop({ target, emits, clientWidth, clientHeight, marginBottom, m
    });

    danmus.push({
-        top: clientHeight - marginBottom,
+        type: 'bottom',
+        top: maxTop,
        left: 0,
        right: 0,
        height: marginBottom,
@@ -27,13 +39,28 @@ function getDanmuTop({ target, emits, clientWidth, clientHeight, marginBottom, m
        distance: clientWidth,
    });

-    for (let index = 1; index < danmus.length; index += 1) {
-        const item = danmus[index];
-        const prev = danmus[index - 1];
-        const prevBottom = prev.top + prev.height;
-        const diff = item.top - prevBottom;
-        if (diff >= target.height) {
-            return prevBottom;
+    // 查找是否有多余的缝隙足以容纳当前弹幕
+    if (target.mode === 2) {
+        // 倒序查找
+        for (let index = danmus.length - 2; index >= 0; index -= 1) {
+            const item = danmus[index];
+            const prev = danmus[index + 1];
+            const itemBottom = item.top + item.height;
+            const diff = prev.top - itemBottom;
+            if (diff >= target.height) {
+                return prev.top - target.height;
+            }
+        }
+    } else {
+        // 顺序查找
+        for (let index = 1; index < danmus.length; index += 1) {
+            const item = danmus[index];
+            const prev = danmus[index - 1];
+            const prevBottom = prev.top + prev.height;
+            const diff = item.top - prevBottom;
+            if (diff >= target.height) {
+                return prevBottom;
+            }
        }
    }

@@ -67,7 +94,10 @@ function getDanmuTop({ target, emits, clientWidth, clientHeight, marginBottom, m

                return result && result[0] ? result[0].top : undefined;
            }
+
+            // 静止弹幕没有重叠问题
            case 1:
+            case 2:
                return undefined;
            default:
                break;
@@ -82,6 +112,7 @@ function getDanmuTop({ target, emits, clientWidth, clientHeight, marginBottom, m
                });
                break;
            case 1:
+            case 2:
                topMap.sort((prev, next) => {
                    const nextMaxWidth = Math.max(...next.map((item) => item.width));
                    const prevMaxWidth = Math.max(...prev.map((item) => item.width));
@@ -98,6 +129,7 @@ function getDanmuTop({ target, emits, clientWidth, clientHeight, marginBottom, m

 onmessage = (event) => {
    const { data } = event;
+    if (!data.id) return;
    const top = getDanmuTop(data);
    self.postMessage({
        top,