调整整体样式

docs/uncompiled/artplayer-plugin-danmu.js

@@ -243,10 +243,10 @@
 
       this.art = art;
       this.queue = [];
-      this.layer = null;
       this.isStop = false;
       this.refs = [];
       this.animationFrameTimer = null;
+      this.$danmuku = art.template.$danmuku;
       art.i18n.update(Danmuku.i18n);
       art.on('video:play', this.start.bind(this));
       art.on('video:playing', this.start.bind(this));
@@ -256,21 +256,19 @@
       art.on('destroy', this.stop.bind(this));
       this.config(option);
 
-      if (typeof this.option.danmus === 'function') {
-        this.option.danmus().then(function (danmus) {
+      if (typeof this.option.danmuku === 'function') {
+        this.option.danmuku().then(function (danmus) {
           danmus.forEach(_this.addToQueue.bind(_this));
-
-          _this.init();
+          art.emit('artplayerPluginDanmu:loaded');
         });
-      } else if (typeof this.option.danmus === 'string') {
-        bilibiliDanmuParseFromUrl(this.option.danmus).then(function (danmus) {
+      } else if (typeof this.option.danmuku === 'string') {
+        bilibiliDanmuParseFromUrl(this.option.danmuku).then(function (danmus) {
           danmus.forEach(_this.addToQueue.bind(_this));
-
-          _this.init();
+          art.emit('artplayerPluginDanmu:loaded');
         });
       } else {
-        this.option.danmus.forEach(this.addToQueue.bind(this));
-        this.init();
+        this.option.danmuku.forEach(this.addToQueue.bind(this));
+        art.emit('artplayerPluginDanmu:loaded');
       }
     }
 
@@ -289,26 +287,6 @@
         this.option.margin[0] = clamp(this.option.margin[0], 0, 100);
         this.option.margin[1] = clamp(this.option.margin[1], 0, 100);
       }
-    }, {
-      key: "init",
-      value: function init() {
-        this.art.emit('artplayerPluginDanmu:loaded');
-        this.layer = this.art.layers.add({
-          name: 'danmu',
-          style: {
-            position: 'absolute',
-            left: 0,
-            top: 0,
-            right: 0,
-            bottom: 0,
-            width: '100%',
-            height: '100%',
-            overflow: 'hidden',
-            pointerEvents: 'none',
-            opacity: this.option.opacity
-          }
-        });
-      }
     }, {
       key: "emit",
       value: function emit(danmu) {
@@ -423,7 +401,7 @@
           waitDanmu.$ref.style.border = 'none';
           waitDanmu.$ref.style.transform = 'translateX(0px) translateY(0px) translateZ(0px)';
           waitDanmu.$ref.style.transition = 'transform 0s linear 0s';
-          this.layer.$ref.appendChild(waitDanmu.$ref);
+          this.$danmuku.appendChild(waitDanmu.$ref);
           return waitDanmu.$ref;
         }
 
@@ -441,7 +419,7 @@
           lineHeight: '1.125',
           textShadow: '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'
         });
-        append(this.layer.$ref, $ref);
+        append(this.$danmuku, $ref);
         this.refs.push($ref);
         return $ref;
       }
@@ -507,7 +485,7 @@
 
         var player = this.art.player;
         this.animationFrameTimer = window.requestAnimationFrame(function () {
-          if (_this2.layer && player.playing) {
+          if (player.playing) {
             _this2.queue.filter(function (danmu) {
               return player.currentTime + 0.1 >= danmu.time && danmu.time >= player.currentTime - 0.1 && danmu.$state === 'wait';
             }).forEach(function (danmu) {
@@ -549,13 +527,13 @@
     }, {
       key: "show",
       value: function show() {
-        this.layer.$ref.style = 'none';
+        this.$danmuku.style = 'none';
         this.art.emit('artplayerPluginDanmu:show');
       }
     }, {
       key: "hide",
       value: function hide() {
-        this.layer.$ref.style = 'block';
+        this.$danmuku.style = 'block';
         this.art.emit('artplayerPluginDanmu:hide');
       }
     }], [{
@@ -590,7 +568,7 @@
       key: "option",
       get: function get() {
         return {
-          danmus: [],
+          danmuku: [],
           speed: 5,
           opacity: 1,
           color: '#fff',
@@ -603,7 +581,7 @@
       key: "scheme",
       get: function get() {
         return {
-          danmus: 'array|function|string',
+          danmuku: 'array|function|string',
           speed: 'number',
           opacity: 'number',
           color: 'string',