add danmuku d.ts

CHANGELOG_CN.md

@@ -6,6 +6,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 ## [Unreleased]
 
 ### Added
+- 添加弹幕库 d.ts
 
 ## [4.4.5] - 2022-65-2
 

package.json

@@ -39,6 +39,7 @@
     "@parcel/transformer-inline-string": "^2.5.0",
     "@parcel/transformer-less": "^2.5.0",
     "@parcel/transformer-vue": "^2.5.0",
+    "artplayer": "^4.4.5",
     "chai": "^4.3.6",
     "cpy": "^9.0.1",
     "cross-env": "^7.0.3",
@@ -53,4 +54,4 @@
     "servor": "^4.0.2",
     "workbox-build": "^6.5.3"
   }
-}
+}

packages/artplayer-plugin-danmuku/package.json

@@ -1,7 +1,8 @@
 {
   "license": "MIT",
-  "version": "4.4.3",
+  "version": "4.4.6",
   "name": "artplayer-plugin-danmuku",
+  "types": "types/artplayer-plugin-danmuku.d.ts",
   "description": "Danmuku plugin for ArtPlayer",
   "main": "dist/artplayer-plugin-danmuku.js",
   "author": "Harvey Zack <laozhaochaguan@gmail.com>",
@@ -18,8 +19,5 @@
     "html5",
     "video",
     "player"
-  ],
-  "dependencies": {
-    "vue": "^3.2.33"
-  }
-}
+  ]
+}

packages/artplayer-plugin-danmuku/types/artplayer-plugin-danmuku.d.ts

@@ -0,0 +1,164 @@
+import type Artplayer from 'artplayer';
+
+export = artplayerPluginDanmuku;
+export as namespace artplayerPluginDanmuku;
+
+type Danmu = {
+    /**
+     * 弹幕文本
+     */
+    text: string;
+
+    /**
+     * 弹幕发送模式，0为滚动，1为静止
+     */
+    mode?: 0 | 1;
+
+    /**
+     * 弹幕颜色
+     */
+    color?: string;
+
+    /**
+     * 弹幕出现的时间，单位为秒
+     */
+    time?: number;
+
+    /**
+     * 弹幕是否有描边
+     */
+    border?: boolean;
+};
+
+type Option = {
+    /**
+     * 弹幕源，可以是弹幕数组，xml 地址或者一个返回 Promise 的函数
+     */
+    danmuku: Danmu[] | string | (() => Promise<Danmu[]>) | Promise<Danmu[]>;
+
+    /**
+     * 弹幕持续时间，单位秒，范围在[1 ~ 10]
+     */
+    speed?: number;
+
+    /**
+     * 弹幕上下边距，支持数字和百分比
+     */
+    margin?: [number | `${number}%`, number | `${number}%`];
+
+    /**
+     * 弹幕透明度，范围在[0 ~ 1]
+     */
+    opacity?: number;
+
+    /**
+     * 默认字体颜色
+     */
+    color?: string;
+
+    /**
+     * 默认弹幕发送模式，0为滚动，1为静止
+     */
+    mode?: 0 | 1;
+
+    /**
+     * 字体大小，支持数字和高度的百分比
+     */
+    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';
+
+    /**
+     * 发送弹幕前的自定义校验，返回 true 则可以发送
+     */
+    beforeEmit?: (danmu: Danmu) => boolean;
+};
+
+type danmuku = {
+    name: 'artplayerPluginDanmuku';
+
+    /**
+     * 发送一条实时弹幕
+     */
+    emit: (danmu: Danmu) => danmuku;
+
+    /**
+     * 重载弹幕源，或者切换新弹幕
+     */
+    load: () => Promise<danmuku>;
+
+    /**
+     * 实时改变弹幕配置
+     */
+    config: (option: Option) => danmuku;
+
+    /**
+     * 隐藏弹幕层
+     */
+    hide: () => danmuku;
+
+    /**
+     * 显示弹幕层
+     */
+    show: () => danmuku;
+
+    /**
+     * 是否隐藏弹幕层
+     */
+    isHide: boolean;
+
+    /**
+     * 是否弹幕层停止状态
+     */
+    isStop: boolean;
+};
+
+declare const artplayerPluginDanmuku: (option: Option) => (art: Artplayer) => danmuku;

packages/artplayer/package.json

@@ -1,7 +1,7 @@
 {
     "license": "MIT",
     "name": "artplayer",
-    "version": "4.4.5",
+    "version": "4.4.6",
     "main": "dist/artplayer.js",
     "types": "types/artplayer.d.ts",
     "homepage": "https://artplayer.org",

packages/artplayer/types/artplayer.d.ts

@@ -375,7 +375,7 @@ type Option = {
     /**
      * Custom plugin list
      */
-    plugins?: PluginFunction[];
+    plugins?: PluginFunction[] | (() => any);
 
     /**
      * Custom mobile whitelist
@@ -731,6 +731,7 @@ declare class Artplayer extends Player {
     readonly plugins: {
         readonly id: number;
         add(plugin: PluginFunction): Artplayer['plugins'];
+        [pluginName: string]: any;
     };
 
     readonly i18n: {

test/types.test.ts

@@ -1,6 +1,22 @@
-import Artplayer from '../packages/artplayer/types/artplayer';
+import Artplayer from '../packages/artplayer';
+import artplayerPluginDanmuku from '../packages/artplayer-plugin-danmuku';
 
 const art = new Artplayer({
     container: '.artplayer-app',
     url: './assets/sample/video.mp4',
+    plugins: [
+        artplayerPluginDanmuku({
+            danmuku: '',
+            margin: [0, '10%'],
+            theme: 'light',
+        }),
+    ],
 });
+
+art.plugins.add(
+    artplayerPluginDanmuku({
+        danmuku: '',
+        margin: [0, '10%'],
+        theme: 'light',
+    }),
+);