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-17 10:01:20 -08:00 · 2024-05-26 14:57:22 +08:00
1 parent dfd1cf968d
commit 699135afcf
@@ -252,6 +252,7 @@ input[type="file"] {

 .part-right .video-wrap .artplayer-app {
    display: flex;
+    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-size: 20px;
@@ -5,78 +5,30 @@ var art = new Artplayer({
    fullscreen: true,
    fullscreenWeb: true,
    autoOrientation: true,
-    flip: true,
-    playbackRate: true,
-    aspectRatio: true,
-    setting: true,
    plugins: [
        artplayerPluginDanmuku({
            danmuku: '/assets/sample/danmuku.xml',
-            speed: 5, // 弹幕持续时间，单位秒，范围在[1 ~ 10]
-            opacity: 1, // 弹幕透明度，范围在[0 ~ 1]
-            fontSize: 25, // 字体大小，支持数字和百分比
-            color: '#FFFFFF', // 默认字体颜色
-            mode: 0, // 默认模式，0-滚动，1-静止
-            margin: [10, '25%'], // 弹幕上下边距，支持数字和百分比
-            antiOverlap: true, // 是否防重叠
-            useWorker: true, // 是否使用 web worker
-            synchronousPlayback: false, // 是否同步到播放速度
-            filter: (danmu) => danmu.text.length < 50, // 弹幕过滤函数，返回 true 则可以发送
-            lockTime: 5, // 输入框锁定时间，单位秒，范围在[1 ~ 60]
-            maxLength: 100, // 输入框最大可输入的字数，范围在[0 ~ 500]
-            minWidth: 200, // 输入框最小宽度，范围在[0 ~ 500]，填 0 则为无限制
-            maxWidth: 600, // 输入框最大宽度，范围在[0 ~ Infinity]，填 0 则为 100% 宽度
-            theme: 'light', // 输入框自定义挂载时的主题色，默认为 dark，可以选填亮色 light
-            heatmap: true, // 是否开启弹幕热度图, 默认为 false
-            beforeEmit: (danmu) => !!danmu.text.trim(), // 发送弹幕前的自定义校验，返回 true 则可以发送

-            // 通过 mount 选项可以自定义输入框挂载的位置，默认挂载于播放器底部，仅在当宽度小于最小值时生效
-            // mount: document.querySelector('.artplayer-danmuku'),
+            // 以下为配置为非必填
+            speed: 5, // 弹幕持续时间，范围在[1 ~ 10]
+            margin: [10, '25%'], // 弹幕上下边距，支持像素数字和百分比
+            opacity: 1, // 弹幕透明度，范围在[0 ~ 1]
+            color: '#FFFFFF', // 默认弹幕颜色，可以被单独弹幕项覆盖
+            mode: 0, // 默认弹幕模式: 0: 滚动，1: 顶部，2: 底部
+            modes: [0, 1, 2], // 弹幕可见的模式
+            fontSize: 25, // 弹幕字体大小，支持像素数字和百分比
+            antiOverlap: true, // 弹幕是否防重叠
+            synchronousPlayback: false, // 是否同步播放速度
+            mount: undefined, // 弹幕发射器挂载点, 默认为播放器控制栏中部
+            heatmap: true, // 是否开启热力图
+            points: [], // 热力图数据
+            filter: () => true, // 弹幕载入前的过滤器，只支持返回布尔值
+            beforeEmit: () => true, // 弹幕发送前的过滤器，支持返回 Promise
+            beforeVisible: () => true, // 弹幕显示前的过滤器，支持返回 Promise
+            visible: true, // 弹幕层是否可见
+            maxLength: 200, // 弹幕输入框最大长度, 范围在[1 ~ 1000]
+            lockTime: 5, // 输入框锁定时间，范围在[1 ~ 60]
+            theme: 'dark', // 弹幕主题，支持 dark 和 light，只在自定义挂载时生效
        }),
    ],
-});
-
-// 监听手动输入的弹幕，保存到数据库
-art.on('artplayerPluginDanmuku:emit', (danmu) => {
-    console.info('新增弹幕', danmu);
-});
-
-// 监听加载到的弹幕数组
-art.on('artplayerPluginDanmuku:loaded', (danmus) => {
-    console.info('加载弹幕', danmus.length);
-});
-
-// 监听加载到弹幕的错误
-art.on('artplayerPluginDanmuku:error', (error) => {
-    console.info('加载错误', error);
-});
-
-// 监听弹幕配置变化
-art.on('artplayerPluginDanmuku:config', (option) => {
-    console.info('配置变化', option);
-});
-
-// 监听弹幕停止
-art.on('artplayerPluginDanmuku:stop', () => {
-    console.info('弹幕停止');
-});
-
-// 监听弹幕开始
-art.on('artplayerPluginDanmuku:start', () => {
-    console.info('弹幕开始');
-});
-
-// 监听弹幕隐藏
-art.on('artplayerPluginDanmuku:hide', () => {
-    console.info('弹幕隐藏');
-});
-
-// 监听弹幕显示
-art.on('artplayerPluginDanmuku:show', () => {
-    console.info('弹幕显示');
-});
-
-// 监听弹幕销毁
-art.on('artplayerPluginDanmuku:destroy', () => {
-    console.info('弹幕销毁');
-});
+});
@@ -0,0 +1,17 @@
+import type Artplayer from 'artplayer';
+
+export = artplayerPluginChromecast;
+export as namespace artplayerPluginChromecast;
+
+type Option = {
+    url?: string;
+    sdk?: string;
+    icon?: string;
+    mimeType?: string;
+};
+
+type Chromecast = {
+    name: 'artplayerPluginChromecast';
+};
+
+declare const artplayerPluginChromecast: (option: Option) => (art: Artplayer) => Chromecast;
@@ -3,6 +3,8 @@ import type Artplayer from 'artplayer';
 export = artplayerPluginDanmuku;
 export as namespace artplayerPluginDanmuku;

+type Mode = 0 | 1 | 2;
+
 type Danmu = {
    /**
     * 弹幕文本
@@ -10,9 +12,9 @@ type Danmu = {
    text: string;

    /**
-     * 弹幕发送模式，0为滚动，1为静止
+     * 弹幕发送模式: 0: 滚动，1: 顶部，2: 底部
     */
-    mode?: 0 | 1;
+    mode?: Mode;

    /**
     * 弹幕颜色
@@ -25,24 +27,34 @@ type Danmu = {
    time?: number;

    /**
-     * 弹幕是否有描边
+     * 弹幕是否有描边, 默认为 false
     */
    border?: boolean;
+
+    /**
+     * 弹幕自定义样式
+     */
+    style?: Partial<CSSStyleDeclaration>;
+
+    /**
+     * 弹幕文本是否转义, 默认为 true
+     */
+    escape?: boolean;
 };

 type Option = {
    /**
-     * 弹幕源，可以是弹幕数组，xml 地址或者一个返回 Promise 的函数
+     * 弹幕数据: 函数，数组，Promise，URL
     */
    danmuku: Danmu[] | string | (() => Promise<Danmu[]>) | Promise<Danmu[]>;

    /**
-     * 弹幕持续时间，单位秒，范围在[1 ~ 10]
+     * 弹幕持续时间，范围在[1 ~ 10]
     */
    speed?: number;

    /**
-     * 弹幕上下边距，支持数字和高度的百分比
+     * 弹幕上下边距，支持像素数字和百分比
     */
    margin?: [number | `${number}%`, number | `${number}%`];

@@ -52,70 +64,40 @@ type Option = {
    opacity?: number;

    /**
-     * 默认字体颜色
+     * 默认弹幕颜色，可以被单独弹幕项覆盖
     */
    color?: string;

    /**
-     * 默认弹幕发送模式，0为滚动，1为静止
+     *  弹幕模式: 0: 滚动，1: 顶部，2: 底部
     */
-    mode?: 0 | 1;
+    mode?: Mode;

    /**
-     * 字体大小，支持数字和高度的百分比
+     *  幕可见的模式
+     */
+    modes?: Mode[];
+
+    /**
+     * 弹幕字体大小，支持像素数字和百分比
     */
    fontSize?: number | `${number}%`;

    /**
-     * 弹幕过滤函数，返回 true 则可以发送
-     */
-    filter?: (danmu: Danmu) => boolean;
-
-    /**
-     * 是否防重叠
+     * 弹幕是否防重叠
     */
    antiOverlap?: boolean;

    /**
-     * 是否使用 web worker
-     */
-    useWorker?: boolean;
-
-    /**
-     * 是否同步到播放速度
+     * 是否同步播放速度
     */
    synchronousPlayback?: boolean;

    /**
-     * 输入框锁定时间，单位秒，范围在[1 ~ 60]
-     */
-    lockTime?: number;
-
-    /**
-     * 输入框最大可输入的字数，范围在[0 ~ 500]
-     */
-    maxLength?: number;
-
-    /**
-     * 输入框最小宽度，范围在[0 ~ 500]，填 0 则为无限制
-     */
-    minWidth?: number;
-
-    /**
-     * 输入框最大宽度，范围在[0 ~ Infinity]，填 0 则为 100% 宽度
-     */
-    maxWidth?: number;
-
-    /**
-     * 通过 mount 选项可以自定义输入框挂载的位置，默认挂载于播放器底部，仅在当宽度小于最小值时生效
+     * 弹幕发射器挂载点, 默认为播放器控制栏中部
     */
    mount?: Element;

-    /**
-     * 输入框自定义挂载时的主题色，默认为 dark，可以选填亮色 light
-     */
-    theme?: 'dark' | 'light';
-
    /**
     * 是否开启弹幕热度图
     */
@@ -135,9 +117,44 @@ type Option = {
          };

    /**
-     * 发送弹幕前的自定义校验，返回 true 则可以发送
+     * 热力图数据
     */
-    beforeEmit?: (danmu: Danmu) => boolean;
+    points?: any[];
+
+    /**
+     * 弹幕载入前的过滤器，只支持返回布尔值
+     */
+    filter?: (danmu: Danmu) => boolean;
+
+    /**
+     * 弹幕发送前的过滤器，支持返回 Promise
+     */
+    beforeEmit?: (danmu: Danmu) => boolean | (() => Promise<boolean>);
+
+    /**
+     * 弹幕显示前的过滤器，支持返回 Promise
+     */
+    beforeVisible?: (danmu: Danmu) => boolean | (() => Promise<boolean>);
+
+    /**
+     * 弹幕是否可见
+     */
+    visible?: boolean;
+
+    /**
+     * 弹幕输入框最大长度, 范围在[1 ~ 1000]
+     */
+    maxLength?: number;
+
+    /**
+     * 输入框锁定时间，范围在[1 ~ 60]
+     */
+    lockTime?: number;
+
+    /**
+     * 弹幕主题，只在自定义挂载时生效
+     */
+    theme?: 'light' | 'dark';
 };

 type Danmuku = {
@@ -168,6 +185,21 @@ type Danmuku = {
     */
    show: () => Danmuku;

+    /**
+     * 挂载弹幕输入框
+     */
+    mount: (el?: Element) => void;
+
+    /**
+     * 重置弹幕
+     */
+    reset: () => void;
+
+    /**
+     * 弹幕配置
+     */
+    option: Option;
+
    /**
     * 是否隐藏弹幕层
     */
@@ -1,9 +1,9 @@
 import type Artplayer from 'artplayer';
-import type SubtitlesOctopus from "@hrgui/libass-wasm-ts"
-import { type Options } from "libass-wasm"
+import type SubtitlesOctopus from '@hrgui/libass-wasm-ts';
+import { type Options } from 'libass-wasm';

-export = artplayerPluginAss
-export as namespace artplayerPluginAss
+export = artplayerPluginAss;
+export as namespace artplayerPluginAss;

 declare const artplayerPluginAss: (options: Options) => (art: Artplayer) => {
    name: 'artplayerPluginLibass';