添加弹幕配置

src/controls/danmu.js

@@ -1,9 +1,29 @@
+import { append, tooltip, setStyle } from '../utils';
+import icons from '../icons';
+
 export default class Danmu {
   constructor(option) {
     this.option = option;
   }
 
   apply(art) {
-    this.art = art;
+    const { events: { proxy }, danmu, i18n } = art;
+    this.$danmu = append(this.option.$control, icons.danmu);
+    this.$danmuClose = append(this.option.$control, icons.danmuClose);
+    tooltip(this.$danmu, i18n.get('Hide danmu'));
+    tooltip(this.$danmuClose, i18n.get('Show danmu'));
+    setStyle(this.$danmuClose, 'display', 'none');
+
+    proxy(this.$danmu, 'click', () => {
+      danmu.hide();
+      setStyle(this.$danmu, 'display', 'none');
+      setStyle(this.$danmuClose, 'display', 'block');
+    });
+
+    proxy(this.$danmuClose, 'click', () => {
+      danmu.show();
+      setStyle(this.$danmu, 'display', 'block');
+      setStyle(this.$danmuClose, 'display', 'none');
+    });
   }
 }

src/danmu.js

@@ -1,5 +1,24 @@
+import { setStyle } from './utils';
+
 export default class Danmu {
   constructor(art) {
     this.art = art;
+    this.init();
+  }
+
+  init() {
+    //
+  }
+
+  show() {
+    const { $danmu } = this.art.refs;
+    setStyle($danmu, 'display', 'block');
+    this.art.emit('danmu:show', $danmu);
+  }
+
+  hide() {
+    const { $danmu } = this.art.refs;
+    setStyle($danmu, 'display', 'none');
+    this.art.emit('danmu:hide', $danmu);
   }
 }

src/i18n.js

@@ -12,6 +12,8 @@ let i18nMap = {
     'Reconnect': '重新连接',
     'Hide subtitle': '隐藏字幕',
     'Show subtitle': '显示字幕',
+    'Hide danmu': '隐藏彈幕',
+    'Show danmu': '显示彈幕',
     'Screenshot': '截图',
     'Play speed': '播放速度',
     'Aspect ratio': '画面比例',
@@ -32,6 +34,8 @@ let i18nMap = {
     'Reconnect': '重新連接',
     'Hide subtitle': '隱藏字幕',
     'Show subtitle': '顯示字幕',
+    'Hide danmu': '隱藏彈幕',
+    'Show danmu': '顯示彈幕',
     'Screenshot': '截圖',
     'Play speed': '播放速度',
     'Aspect ratio': '畫面比例',

src/icons/danmu-close.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" style="width: 100%; height: 100%; opacity: .5">
+    <path d="M 3 6 L 3 26 L 12.585938 26 L 16 29.414063 L 19.414063 26 L 29 26 L 29 6 Z M 5 8 L 27 8 L 27 24 L 18.585938 24 L 16 26.585938 L 13.414063 24 L 5 24 Z M 9 11 L 9 13 L 23 13 L 23 11 Z M 9 15 L 9 17 L 23 17 L 23 15 Z M 9 19 L 9 21 L 19 21 L 19 19 Z "/>
+</svg>

src/icons/danmu.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" style="width: 100%; height: 100%">
+    <path d="M 3 6 L 3 26 L 12.585938 26 L 16 29.414063 L 19.414063 26 L 29 26 L 29 6 Z M 5 8 L 27 8 L 27 24 L 18.585938 24 L 16 26.585938 L 13.414063 24 L 5 24 Z M 9 11 L 9 13 L 23 13 L 23 11 Z M 9 15 L 9 17 L 23 17 L 23 15 Z M 9 19 L 9 21 L 19 21 L 19 19 Z "/>
+</svg>

src/icons/index.js

@@ -7,6 +7,8 @@ import volumeClose from './volume-close.svg';
 import subtitle from './subtitle.svg';
 import subtitleClose from './subtitle-close.svg';
 import screenshot from './screenshot.svg';
+import danmu from './danmu.svg';
+import danmuClose from './danmu-close.svg';
 
 const icons = {
   loading,
@@ -17,7 +19,9 @@ const icons = {
   volumeClose,
   subtitle,
   subtitleClose,
-  screenshot
+  screenshot,
+  danmu,
+  danmuClose
 };
 
 function creatDomFromSvg(map) {

src/player.js

@@ -185,7 +185,7 @@ export default class Player {
     if (isPlaying) {
       this.play();
     }
-    this.reset();
+    this.resetStyle();
     notice.show(`${i18n.get('Switch')}: ${name}`);
     this.art.emit('switch', url);
   }
@@ -233,7 +233,7 @@ export default class Player {
     this.art.emit('aspectRatio', ratio);
   }
 
-  reset() {
+  resetStyle() {
     const { refs: { $video }, contextmenu } = this.art;
 
     if (contextmenu.$playbackRate) {

src/style/bottom.scss

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

src/style/contextmenu.scss

@@ -1,7 +1,7 @@
 .artplayer-video-player {
     .artplayer-contextmenu {
         position: absolute;
-        z-index: 70;
+        z-index: 100;
         left: 0;
         top: 0;
         min-width: 200px;

src/style/danmu.scss

@@ -0,0 +1,12 @@
+.artplayer-video-player {
+    .artplayer-danmu {
+        position: absolute;
+        z-index: 40;
+        left: 0;
+        top: 0;
+        right: 0;
+        bottom: 0;
+        width: 100%;
+        height: 100%;
+    }
+}

src/style/index.js

@@ -2,6 +2,7 @@ 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: 80;
+        z-index: 90;
         width: 350px;
         min-height: 150px;
         padding: 10px;

src/style/loading.scss

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

src/style/mask.scss

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

src/style/notice.scss

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

src/template.js

@@ -11,6 +11,7 @@ export default class Template {
           <video class="artplayer-video"></video>
           <div class="artplayer-subtitle"></div>
           <div class="artplayer-layers"></div>
+          <div class="artplayer-danmu"></div>
           <div class="artplayer-mask"></div>
           <div class="artplayer-bottom">
             <div class="artplayer-progress"></div>
@@ -38,6 +39,7 @@ 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');