添加弹幕插件

packages/artplayer-plugin-danmu/package.json

@@ -3,7 +3,6 @@
   "version": "3.1.7",
   "description": "Danmu plugin for ArtPlayer",
   "main": "dist/artplayer-plugin-danmu.js",
-  "style": "dist/artplayer-plugin-danmu.css",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1"
   },

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

@@ -1,8 +1,59 @@
-import './index.scss';
+function artplayerPluginDanmu(art) {
+    const { layers } = art;
+    const {
+        utils: { append, errorHandle, setStyles },
+    } = art.constructor;
 
-function artplayerPluginDanmu(Artplayer) {
-    const art = Artplayer.prototype;
-    console.log(art);
+    const layer = layers.add({
+        name: 'danmu',
+        style: {
+            position: 'absolute',
+            left: 0,
+            top: 0,
+            right: 0,
+            bottom: 0,
+            width: '100%',
+            height: '100%',
+            overflow: 'hidden',
+        },
+    });
+
+    const danmuList = [];
+    function emit(style = {}) {
+        const $danmu = document.createElement('div');
+        $danmu.innerText = '23333';
+        setStyles($danmu, {
+            'user-select': 'none',
+            'position': 'absolute',
+            'white-space': 'pre',
+            'pointer-events': 'none',
+            'perspective': '500px',
+            'display': 'inline-block',
+            'will-change': 'transform',
+            'font-size': '25px',
+            'color': 'rgb(254, 241, 2)',
+            'font-family': 'SimHei, "Microsoft JhengHei", Arial, Helvetica, sans-serif',
+            'font-weight': 'normal',
+            'line-height': '1.125',
+            'opacity': '1',
+            'text-shadow': 'rgb(0, 0, 0) 1px 0px 1px, rgb(0, 0, 0) 0px 1px 1px, rgb(0, 0, 0) 0px -1px 1px, rgb(0, 0, 0) -1px 0px 1px',
+            'left': '638px',
+            'top': '0px',
+            'transform': 'translateX(-626.14px) translateY(0px) translateZ(0px)',
+            'transition': '-webkit-transform 0s linear 0s',
+        });
+        danmuList.push(append(layer.$ref, $danmu));
+    }
+
+    emit({
+        
+    });
+
+    return {
+        name: 'artplayerPluginDanmu',
+        config(option) {},
+        emit() {},
+    };
 }
 
 window.artplayerPluginDanmu = artplayerPluginDanmu;

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

@@ -1,3 +0,0 @@
-.artplayerPluginDanmu {
-    display: flex;
-}

packages/artplayer/src/controls/index.js

@@ -1,3 +1,4 @@
+import { errorHandle } from '../utils';
 import component from '../utils/component';
 import fullscreen from './fullscreen';
 import fullscreenWeb from './fullscreenWeb';
@@ -155,9 +156,8 @@ export default class Controls {
                 break;
         }
 
-        if (parent) {
-            component(this.art, this, parent, option, callback, 'control');
-        }
+        errorHandle(parent, 'Controls option.position can not be empty');
+        return component(this.art, this, parent, option, callback, 'control');
     }
 
     show() {

packages/artplayer/src/layers.js

@@ -13,7 +13,7 @@ export default class Layers {
 
     add(item, callback) {
         const { $layers } = this.art.template;
-        component(this.art, this, $layers, item, callback, 'layer');
+        return component(this.art, this, $layers, item, callback, 'layer');
     }
 
     show() {

packages/artplayer/src/plugins/miniProgressBar.js

@@ -8,6 +8,7 @@ export default function miniProgressBar(art) {
     let timer = null;
 
     layers.add({
+        name: 'miniProgressBar',
         style: {
             display: 'none',
             position: 'absolute',

packages/artplayer/src/setting/index.js

@@ -37,7 +37,7 @@ export default class Setting {
 
     add(item, callback) {
         const { $settingBody } = this.art.template;
-        component(this.art, this, $settingBody, item, callback, 'setting');
+        return component(this.art, this, $settingBody, item, callback, 'setting');
     }
 
     show() {

packages/artplayer/src/utils/component.js

@@ -1,7 +1,7 @@
 import { append, insertByIndex, setStyles, setStyle, remove } from './index';
 
-export default function component(art, parent, target, component, callback, title) {
-    const option = typeof component === 'function' ? component(art) : component;
+export default function component(art, parent, target, getOption, callback, title) {
+    const option = typeof getOption === 'function' ? getOption(art) : getOption;
     if (!option.disable) {
         parent.id += 1;
         const name = option.name || `${title}${parent.id}`;
@@ -62,4 +62,6 @@ export default function component(art, parent, target, component, callback, titl
         parent[name] = option;
         art.emit(`${title}:add`, option);
     }
+
+    return option;
 }