移除弹幕组件

src/controls/index.js

@@ -1,5 +1,4 @@
 import { setStyle, append } from '../utils';
-import Danmu from './danmu';
 import Fullscreen from './fullscreen';
 import FullscreenWeb from './fullscreenWeb';
 import Pip from './pip';
@@ -67,53 +66,46 @@ export default class Controls {
       index: 10
     }));
 
-    this.add(new Danmu({
-      name: 'danmu',
-      disable: false,
-      position: 'right',
-      index: 20
-    }));
-
     this.add(new Screenshot({
       name: 'screenshot',
       disable: !this.art.option.screenshot,
       position: 'right',
-      index: 30
+      index: 20
     }));
 
     this.add(new Subtitle({
       name: 'subtitle',
       disable: !this.art.option.subtitle.url,
       position: 'right',
-      index: 40
+      index: 30
     }));
 
     this.add(new Setting({
       name: 'setting',
       disable: !this.art.option.setting,
       position: 'right',
-      index: 50
+      index: 40
     }));
 
     this.add(new Pip({
       name: 'pip',
       disable: !this.art.option.pip,
       position: 'right',
-      index: 60
+      index: 50
     }));
 
     this.add(new FullscreenWeb({
       name: 'fullscreenWeb',
       disable: !this.art.option.fullscreenWeb,
       position: 'right',
-      index: 70
+      index: 60
     }));
 
     this.add(new Fullscreen({
       name: 'fullscreen',
       disable: !this.art.option.fullscreen,
       position: 'right',
-      index: 80
+      index: 70
     }));
 
     this.art.option.controls.forEach(item => {

src/danmu.js

@@ -1,29 +0,0 @@
-import { setStyle } from './utils';
-
-export default class Danmu {
-  constructor(art) {
-    this.art = art;
-    this.isOpen = true;
-    this.init();
-  }
-
-  init() {
-    //
-  }
-
-  show() {
-    const { refs: { $danmu }, i18n, notice } = this.art;
-    setStyle($danmu, 'display', 'block');
-    this.isOpen = true;
-    notice.show(i18n.get('Show danmu'));
-    this.art.emit('danmu:show', $danmu);
-  }
-
-  hide() {
-    const { refs: { $danmu }, i18n, notice } = this.art;
-    setStyle($danmu, 'display', 'none');
-    this.isOpen = false;
-    notice.show(i18n.get('Hide danmu'));
-    this.art.emit('danmu:hide', $danmu);
-  }
-}

src/index.js

@@ -1,6 +1,6 @@
 import './style';
 import 'balloon-css/balloon.min.css';
-import { deepMerge } from './utils';
+import * as utils from './utils';
 import optionValidator from 'option-validator';
 import scheme from './scheme';
 import config from './config';
@@ -10,7 +10,6 @@ import I18n from './i18n';
 import Player from './player';
 import Controls from './controls';
 import Contextmenu from './contextmenu';
-import Danmu from './danmu';
 import Info from './info';
 import Subtitle from './subtitle';
 import Events from './events';
@@ -26,7 +25,7 @@ class Artplayer extends Emitter {
   constructor(option) {
     super();
     this.emit('init:start');
-    this.option = deepMerge({}, Artplayer.DEFAULTS, option);
+    this.option = utils.deepMerge({}, Artplayer.DEFAULTS, option);
     optionValidator(this.option, scheme);
     this.init();
     this.emit('init:end');
@@ -40,6 +39,10 @@ class Artplayer extends Emitter {
     return config;
   }
 
+  static get utils() {
+    return utils;
+  }
+
   static get DEFAULTS() {
     return {
       container: '.artplayer',
@@ -121,7 +124,6 @@ class Artplayer extends Emitter {
     this.layers = new Layers(this);
     this.controls = new Controls(this);
     this.contextmenu = new Contextmenu(this);
-    this.danmu = new Danmu(this);
     this.subtitle = new Subtitle(this);
     this.info = new Info(this);
     this.loading = new Loading(this);

src/style/bottom.scss

@@ -1,7 +1,7 @@
 .artplayer-video-player {
     .artplayer-bottom {
         position: absolute;
-        z-index: 60;
+        z-index: 50;
         left: 0;
         right: 0;
         bottom: 0;

src/style/danmu.scss

@@ -1,13 +0,0 @@
-.artplayer-video-player {
-    .artplayer-danmu {
-        position: absolute;
-        z-index: 30;
-        left: 0;
-        top: 0;
-        right: 0;
-        bottom: 0;
-        width: 100%;
-        height: 100%;
-        pointer-events: none;
-    }
-}

src/style/index.js

@@ -2,7 +2,6 @@ import './artplayer.scss';
 import './video.scss';
 import './subtitle.scss';
 import './layers.scss';
-import './danmu.scss';
 import './mask.scss';
 import './loading.scss';
 import './bottom.scss';

src/style/info.scss

@@ -4,7 +4,7 @@
         position: absolute;
         left: 10px;
         top: 10px;
-        z-index: 100;
+        z-index: 90;
         width: 350px;
         min-height: 150px;
         padding: 10px;

src/style/layers.scss

@@ -1,7 +1,7 @@
 .artplayer-video-player {
     .artplayer-layers {
         position: absolute;
-        z-index: 40;
+        z-index: 30;
         left: 0;
         top: 0;
         right: 0;

src/style/loading.scss

@@ -2,7 +2,7 @@
     .artplayer-loading {
         display: none;
         position: absolute;
-        z-index: 70;
+        z-index: 60;
         left: 0;
         top: 0;
         right: 0;

src/style/mask.scss

@@ -2,7 +2,7 @@
     .artplayer-mask {
         display: none;
         position: absolute;
-        z-index: 50;
+        z-index: 40;
         left: 0;
         top: 0;
         right: 0;

src/style/notice.scss

@@ -3,7 +3,7 @@
         display: none;
         font-size: 14px;
         position: absolute;
-        z-index: 80;
+        z-index: 70;
         left: 0;
         top: 0;
         padding: 10px;

src/style/pip.scss

@@ -2,7 +2,7 @@
     .artplayer-pip-header {
         display: none;
         position: absolute;
-        z-index: 120;
+        z-index: 100;
         left: 0;
         top: 0;
         right: 0;

src/style/setting.scss

@@ -2,7 +2,7 @@
     .artplayer-setting {
         display: none;
         position: absolute;
-        z-index: 90;
+        z-index: 80;
         left: 0;
         top: 0;
         height: 100%;

src/template.js

@@ -5,7 +5,6 @@ export default class Template {
       <div class="artplayer-video-player">
         <video class="artplayer-video"></video>
         <div class="artplayer-subtitle"></div>
-        <div class="artplayer-danmu"></div>
         <div class="artplayer-layers"></div>
         <div class="artplayer-mask"></div>
         <div class="artplayer-bottom">
@@ -44,7 +43,6 @@ export default class Template {
     refs.$controlsLeft = refs.$container.querySelector('.artplayer-controls-left');
     refs.$controlsRight = refs.$container.querySelector('.artplayer-controls-right');
     refs.$layers = refs.$container.querySelector('.artplayer-layers');
-    refs.$danmu = refs.$container.querySelector('.artplayer-danmu');
     refs.$loading = refs.$container.querySelector('.artplayer-loading');
     refs.$notice = refs.$container.querySelector('.artplayer-notice');
     refs.$noticeInner = refs.$container.querySelector('.artplayer-notice-inner');