调整整体样式

packages/artplayer-plugin-danmuku/README.md

@@ -1,35 +1,35 @@
-# artplayer-plugin-danmu
-Danmu plugin for ArtPlayer
+# artplayer-plugin-danmuku
+Danmuku plugin for ArtPlayer
 
 ## Demo
 
-[Checkout the demo](https://artplayer.org/?libs=.%2Funcompiled%2Fartplayer-plugin-danmu.js&example=danmu) from Github Pages
+[Checkout the demo](https://artplayer.org/?libs=.%2Funcompiled%2Fartplayer-plugin-danmuku.js&example=danmuku) from Github Pages
 
 ## Install
 
 Install with `npm`
 
 ```
-$ npm install artplayer-plugin-danmu
+$ npm install artplayer-plugin-danmuku
 ```
 
 Or install with `yarn`
 
 ```
-$ yarn add artplayer-plugin-danmu
+$ yarn add artplayer-plugin-danmuku
 ```
 
 ```js
-import artplayerPluginBacklight from 'artplayer-plugin-danmu';
+import artplayerPluginBacklight from 'artplayer-plugin-danmuku';
 ```
 
 Or umd builds are also available
 
 ```html
-<script src="artplayer-plugin-danmu.js"></script>
+<script src="artplayer-plugin-danmuku.js"></script>
 ```
 
-Will expose the global variable to `window.artplayerPluginDanmu`.
+Will expose the global variable to `window.artplayerPluginDanmuku`.
 
 ## Usage
 
@@ -37,8 +37,8 @@ Will expose the global variable to `window.artplayerPluginDanmu`.
 var art = new Artplayer({
     container: '.artplayer-app',
     url: 'path/to/video.mp4',
-    plugins: [artplayerPluginDanmu({
-        danmus: [], // Can be an array or return the promised function or danmuku xml url
+    plugins: [artplayerPluginDanmuku({
+        danmuku: [], // Can be an array or return the promised function or danmuku xml url
         speed: 5, // Animation time
         opacity: 1, // Opacity
         color: '#fff', // Font color
@@ -49,7 +49,7 @@ var art = new Artplayer({
 });
 
 // Send danmu
-art.plugins.artplayerPluginDanmu.emit({
+art.plugins.artplayerPluginDanmuku.emit({
     text: '666', // Danmu text
     time: 5, // Video time
     color: '#fff', // Danmu color
@@ -58,19 +58,19 @@ art.plugins.artplayerPluginDanmu.emit({
 });
 
 // Start danmu
-art.plugins.artplayerPluginDanmu.start();
+art.plugins.artplayerPluginDanmuku.start();
 
 // Stop danmu
-art.plugins.artplayerPluginDanmu.stop();
+art.plugins.artplayerPluginDanmuku.stop();
 
 // Hide danmu
-art.plugins.artplayerPluginDanmu.hide();
+art.plugins.artplayerPluginDanmuku.hide();
 
 // Show danmu
-art.plugins.artplayerPluginDanmu.show();
+art.plugins.artplayerPluginDanmuku.show();
 
 // Config danmu
-art.plugins.artplayerPluginDanmu.config({
+art.plugins.artplayerPluginDanmuku.config({
     // option
 });
 ```

packages/artplayer-plugin-danmuku/package.json

@@ -1,8 +1,8 @@
 {
-  "name": "artplayer-plugin-danmu",
+  "name": "artplayer-plugin-danmuku",
   "version": "3.1.7",
-  "description": "Danmu plugin for ArtPlayer",
-  "main": "dist/artplayer-plugin-danmu.js",
+  "description": "Danmuku plugin for ArtPlayer",
+  "main": "dist/artplayer-plugin-danmuku.js",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1"
   },

packages/artplayer-plugin-danmuku/src/danmuku.js

@@ -5,10 +5,10 @@ export default class Danmuku {
     constructor(art, option) {
         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));
@@ -17,19 +17,19 @@ export default class Danmuku {
         art.on('resize', this.resize.bind(this));
         art.on('destroy', this.stop.bind(this));
         this.config(option);
-        if (typeof this.option.danmus === 'function') {
-            this.option.danmus().then(danmus => {
+        if (typeof this.option.danmuku === 'function') {
+            this.option.danmuku().then(danmus => {
                 danmus.forEach(this.addToQueue.bind(this));
-                this.init();
+                art.emit('artplayerPluginDanmuku:loaded');
             });
-        } else if (typeof this.option.danmus === 'string') {
-            bilibiliDanmuParseFromUrl(this.option.danmus).then(danmus => {
+        } else if (typeof this.option.danmuku === 'string') {
+            bilibiliDanmuParseFromUrl(this.option.danmuku).then(danmus => {
                 danmus.forEach(this.addToQueue.bind(this));
-                this.init();
+                art.emit('artplayerPluginDanmuku:loaded');
             });
         } else {
-            this.option.danmus.forEach(this.addToQueue.bind(this));
-            this.init();
+            this.option.danmuku.forEach(this.addToQueue.bind(this));
+            art.emit('artplayerPluginDanmuku:loaded');
         }
     }
 
@@ -48,7 +48,7 @@ export default class Danmuku {
 
     static get option() {
         return {
-            danmus: [],
+            danmuku: [],
             speed: 5,
             opacity: 1,
             color: '#fff',
@@ -60,7 +60,7 @@ export default class Danmuku {
 
     static get scheme() {
         return {
-            danmus: 'array|function|string',
+            danmuku: 'array|function|string',
             speed: 'number',
             opacity: 'number',
             color: 'string',
@@ -90,25 +90,6 @@ export default class Danmuku {
         this.option.margin[1] = clamp(this.option.margin[1], 0, 100);
     }
 
-    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,
-            },
-        });
-    }
-
     emit(danmu) {
         const { $player } = this.art.template;
         danmu.$ref = this.getDanmuRef();
@@ -205,7 +186,7 @@ export default class Danmuku {
             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;
         }
 
@@ -226,7 +207,7 @@ export default class Danmuku {
                 '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;
     }
@@ -282,7 +263,7 @@ export default class Danmuku {
     update() {
         const { player } = this.art;
         this.animationFrameTimer = window.requestAnimationFrame(() => {
-            if (this.layer && player.playing) {
+            if (player.playing) {
                 this.queue
                     .filter(danmu => {
                         return (
@@ -325,12 +306,12 @@ export default class Danmuku {
     }
 
     show() {
-        this.layer.$ref.style = 'none';
+        this.$danmuku.style = 'none';
         this.art.emit('artplayerPluginDanmu:show');
     }
 
     hide() {
-        this.layer.$ref.style = 'block';
+        this.$danmuku.style = 'block';
         this.art.emit('artplayerPluginDanmu:hide');
     }
 }

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

@@ -1,11 +1,11 @@
 import { bilibiliDanmuParseFromXml, bilibiliDanmuParseFromAv, bilibiliDanmuParseFromUrl } from './bilibiliDanmuParse';
 import Danmuku from './danmuku';
 
-function artplayerPluginDanmu(option) {
+function artplayerPluginDanmuku(option) {
     return art => {
         const danmuku = new Danmuku(art, option);
         return {
-            name: 'artplayerPluginDanmu',
+            name: 'artplayerPluginDanmuku',
             emit: danmuku.addToQueue.bind(danmuku),
             config: danmuku.config.bind(danmuku),
             start: danmuku.start.bind(danmuku),
@@ -16,8 +16,8 @@ function artplayerPluginDanmu(option) {
     };
 }
 
-artplayerPluginDanmu.bilibiliDanmuParseFromXml = bilibiliDanmuParseFromXml;
-artplayerPluginDanmu.bilibiliDanmuParseFromAv = bilibiliDanmuParseFromAv;
-artplayerPluginDanmu.bilibiliDanmuParseFromUrl = bilibiliDanmuParseFromUrl;
-window.artplayerPluginDanmu = artplayerPluginDanmu;
-export default artplayerPluginDanmu;
+artplayerPluginDanmuku.bilibiliDanmuParseFromXml = bilibiliDanmuParseFromXml;
+artplayerPluginDanmuku.bilibiliDanmuParseFromAv = bilibiliDanmuParseFromAv;
+artplayerPluginDanmuku.bilibiliDanmuParseFromUrl = bilibiliDanmuParseFromUrl;
+window.artplayerPluginDanmuku = artplayerPluginDanmuku;
+export default artplayerPluginDanmuku;

packages/artplayer/src/contextmenu/index.js

@@ -100,15 +100,17 @@ export default class Contextmenu {
         setStyle($contextmenu, 'top', `${menuTop}px`);
     }
 
-    hide() {
-        const { $contextmenu } = this.art.template;
-        setStyle($contextmenu, 'display', 'none');
-        this.art.emit('contextmenu:hide', $contextmenu);
+    show() {
+        const { $player } = this.art.template;
+        this.state = true;
+        $player.classList.add('artplayer-contextmenu-show');
+        this.art.emit('contextmenu:show');
     }
 
-    show() {
-        const { $contextmenu } = this.art.template;
-        setStyle($contextmenu, 'display', 'block');
-        this.art.emit('contextmenu:show', $contextmenu);
+    hide() {
+        const { $player } = this.art.template;
+        this.state = false;
+        $player.classList.remove('artplayer-contextmenu-show');
+        this.art.emit('contextmenu:hide');
     }
 }

packages/artplayer/src/controls/index.js

@@ -163,12 +163,14 @@ export default class Controls {
 
     show() {
         const { $player } = this.art.template;
+        this.state = true;
         $player.classList.add('artplayer-controls-show');
         this.art.emit('controls:show');
     }
 
     hide() {
         const { $player } = this.art.template;
+        this.state = false;
         $player.classList.remove('artplayer-controls-show');
         this.art.emit('controls:hide');
     }

packages/artplayer/src/hotkey.js

@@ -4,7 +4,7 @@ export default class Hotkey {
         this.keys = {};
 
         this.add(27, () => {
-            if (art.isFocus && art.player.fullscreenWebState) {
+            if (art.player.fullscreenWebState) {
                 art.player.fullscreenWebExit();
             }
         });

packages/artplayer/src/icons/index.js

@@ -1,6 +1,6 @@
 import { errorHandle } from '../utils';
 import loading from './loading.svg';
-import playBig from './play-big.svg';
+import state from './state.svg';
 import play from './play.svg';
 import pause from './pause.svg';
 import volume from './volume.svg';
@@ -19,7 +19,7 @@ export default class Icons {
         const icons = Object.assign(
             {
                 loading,
-                playBig,
+                state,
                 play,
                 pause,
                 volume,

packages/artplayer/src/index.js

@@ -110,10 +110,7 @@ class Artplayer extends Emitter {
                 controls: false,
                 preload: 'auto',
             },
-            icons: {
-                loading: '',
-                playBig: '',
-            },
+            icons: {},
             customType: {},
             lang: navigator.language.toLowerCase(),
         };

packages/artplayer/src/info.js

@@ -1,4 +1,4 @@
-import { append, setStyle } from './utils';
+import { append } from './utils';
 
 export default class Info {
     constructor(art) {
@@ -21,17 +21,6 @@ export default class Info {
         });
     }
 
-    show() {
-        const { $info, $infoPanel } = this.art.template;
-        setStyle($info, 'display', 'block');
-        if (!$infoPanel.innerHTML) {
-            append($infoPanel, this.creatInfo());
-        }
-        clearTimeout(this.timer);
-        this.loop();
-        this.art.emit('info:show', $info);
-    }
-
     creatInfo() {
         const infoHtml = [];
 
@@ -103,10 +92,23 @@ export default class Info {
         }, 1000);
     }
 
-    hide() {
-        const { $info } = this.art.template;
-        setStyle($info, 'display', 'none');
+    show() {
+        const { $player, $infoPanel } = this.art.template;
+        this.state = true;
+        $player.classList.add('artplayer-info-show');
+        if (!$infoPanel.innerHTML) {
+            append($infoPanel, this.creatInfo());
+        }
         clearTimeout(this.timer);
-        this.art.emit('info:hide', $info);
+        this.loop();
+        this.art.emit('info:show');
+    }
+
+    hide() {
+        const { $player } = this.art.template;
+        this.state = false;
+        $player.classList.remove('artplayer-info-show');
+        clearTimeout(this.timer);
+        this.art.emit('info:hide');
     }
 }

packages/artplayer/src/layers.js

@@ -1,4 +1,3 @@
-import { setStyle } from './utils';
 import component from './utils/component';
 
 export default class Layers {
@@ -20,14 +19,16 @@ export default class Layers {
     }
 
     show() {
-        const { $layers } = this.art.template;
-        setStyle($layers, 'display', 'block');
-        this.art.emit('layers:show', $layers);
+        const { $player } = this.art.template;
+        this.state = true;
+        $player.classList.remove('artplayer-layers-hide');
+        this.art.emit('layers:show');
     }
 
     hide() {
-        const { $layers } = this.art.template;
-        setStyle($layers, 'display', 'none');
-        this.art.emit('layers:hide', $layers);
+        const { $player } = this.art.template;
+        this.state = false;
+        $player.classList.add('artplayer-layers-hide');
+        this.art.emit('layers:hide');
     }
 }

packages/artplayer/src/loading.js

@@ -1,4 +1,4 @@
-import { append, setStyle } from './utils';
+import { append } from './utils';
 
 export default class Loading {
     constructor(art) {
@@ -7,15 +7,17 @@ export default class Loading {
         append($loading, art.icons.loading);
     }
 
-    hide() {
-        const { $loading } = this.art.template;
-        setStyle($loading, 'display', 'none');
-        this.art.emit('loading:hide', $loading);
+    show() {
+        const { $player } = this.art.template;
+        this.state = true;
+        $player.classList.add('artplayer-loading-show');
+        this.art.emit('loading:show');
     }
 
-    show() {
-        const { $loading } = this.art.template;
-        setStyle($loading, 'display', 'flex');
-        this.art.emit('loading:show', $loading);
+    hide() {
+        const { $player } = this.art.template;
+        this.state = false;
+        $player.classList.remove('artplayer-loading-show');
+        this.art.emit('loading:hide');
     }
 }

packages/artplayer/src/mask.js

@@ -1,22 +1,24 @@
-import { append, setStyle } from './utils';
+import { append } from './utils';
 
 export default class Mask {
     constructor(art) {
         this.art = art;
         const { $mask } = art.template;
-        const $playBig = append($mask, '<div class="art-playBig"></div>');
-        append($playBig, art.icons.playBig);
+        const $playBig = append($mask, '<div class="art-state"></div>');
+        append($playBig, art.icons.state);
     }
 
     show() {
-        const { $mask } = this.art.template;
-        setStyle($mask, 'display', 'flex');
-        this.art.emit('mask:show', $mask);
+        const { $player } = this.art.template;
+        this.state = true;
+        $player.classList.add('artplayer-mask-show');
+        this.art.emit('mask:show');
     }
 
     hide() {
-        const { $mask } = this.art.template;
-        setStyle($mask, 'display', 'none');
-        this.art.emit('mask:show', $mask);
+        const { $player } = this.art.template;
+        this.state = false;
+        $player.classList.remove('artplayer-mask-show');
+        this.art.emit('mask:show');
     }
 }

packages/artplayer/src/notice.js

@@ -1,5 +1,3 @@
-import { setStyle } from './utils';
-
 export default class Notice {
     constructor(art) {
         this.art = art;
@@ -7,8 +5,9 @@ export default class Notice {
     }
 
     show(msg, autoHide = true, time = 1000) {
-        const { $notice, $noticeInner } = this.art.template;
-        setStyle($notice, 'display', 'block');
+        const { $player, $noticeInner } = this.art.template;
+        this.state = true;
+        $player.classList.add('artplayer-notice-show');
         $noticeInner.innerHTML = msg instanceof Error ? msg.message.trim() : msg;
         clearTimeout(this.timer);
         if (autoHide) {
@@ -16,12 +15,13 @@ export default class Notice {
                 this.hide();
             }, time);
         }
-        this.art.emit('notice:show', $notice);
+        this.art.emit('notice:show');
     }
 
     hide() {
-        const { $notice } = this.art.template;
-        setStyle($notice, 'display', 'none');
-        this.art.emit('notice:hide', $notice);
+        const { $player } = this.art.template;
+        this.state = false;
+        $player.classList.remove('artplayer-notice-show');
+        this.art.emit('notice:hide');
     }
 }

packages/artplayer/src/setting/index.js

@@ -1,4 +1,3 @@
-import { setStyle } from '../utils';
 import component from '../utils/component';
 import flip from './flip';
 
@@ -46,17 +45,17 @@ export default class Setting {
     }
 
     show() {
-        const { $setting } = this.art.template;
-        setStyle($setting, 'display', 'flex');
+        const { $player } = this.art.template;
         this.state = true;
-        this.art.emit('setting:show', $setting);
+        $player.classList.add('artplayer-setting-show');
+        this.art.emit('setting:show');
     }
 
     hide() {
-        const { $setting } = this.art.template;
-        setStyle($setting, 'display', 'none');
+        const { $player } = this.art.template;
         this.state = false;
-        this.art.emit('setting:hide', $setting);
+        $player.classList.remove('artplayer-setting-show');
+        this.art.emit('setting:hide');
     }
 
     toggle() {

packages/artplayer/src/style/artplayer.scss

@@ -1,17 +1,20 @@
 .artplayer-video-player {
+    display: flex;
     position: relative;
+    margin: 0 auto;
     z-index: 10;
     width: 100%;
     height: 100%;
     outline: 0;
-    font-family: Roboto,Arial,Helvetica,sans-serif;
+    zoom: 1;
+    font-family: Roboto, Arial, Helvetica, sans-serif;
     color: #eee;
     text-align: left;
     direction: ltr;
     font-size: 14px;
     line-height: 1.3;
     user-select: none;
-    -webkit-tap-highlight-color: rgba(0,0,0,0);
+    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
     touch-action: manipulation;
     -ms-high-contrast-adjust: none;
 
@@ -22,10 +25,12 @@
     }
 
     .art-icon {
-        display: inline-block;
+        display: inline-flex;
+        justify-content: center;
+        align-items: center;
         line-height: 1.5;
         svg {
             fill: #fff;
         }
     }
-}
+}

packages/artplayer/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;

packages/artplayer/src/style/contextmenu.scss

@@ -1,8 +1,9 @@
 .artplayer-video-player {
     .artplayer-contextmenu {
         display: none;
+        flex-direction: column;
         position: absolute;
-        z-index: 110;
+        z-index: 120;
         left: 0;
         top: 0;
         min-width: 200px;
@@ -44,4 +45,10 @@
             }
         }
     }
+
+    &.artplayer-contextmenu-show {
+        .artplayer-contextmenu {
+            display: flex;
+        }
+    }
 }

packages/artplayer/src/style/danmuku.scss

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

packages/artplayer/src/style/index.js

@@ -1,6 +1,7 @@
 import './artplayer.scss';
 import './video.scss';
 import './subtitle.scss';
+import './danmuku.scss';
 import './layers.scss';
 import './mask.scss';
 import './loading.scss';

packages/artplayer/src/style/info.scss

@@ -1,10 +1,11 @@
 .artplayer-video-player {
     .artplayer-info {
         display: none;
+        flex-direction: column;
         position: absolute;
         left: 10px;
         top: 10px;
-        z-index: 90;
+        z-index: 100;
         width: 350px;
         min-height: 150px;
         padding: 10px;
@@ -38,4 +39,10 @@
             cursor: pointer;
         }
     }
+
+    &.artplayer-info-show {
+        .artplayer-info {
+            display: flex;
+        }
+    }
 }

packages/artplayer/src/style/layers.scss

@@ -1,7 +1,7 @@
 .artplayer-video-player {
     .artplayer-layers {
         position: absolute;
-        z-index: 30;
+        z-index: 40;
         left: 0;
         top: 0;
         right: 0;
@@ -14,4 +14,10 @@
             pointer-events: all;
         }
     }
+
+    &.artplayer-layers-hide {
+        .artplayer-layers {
+            display: none;
+        }
+    }
 }

packages/artplayer/src/style/loading.scss

@@ -2,7 +2,7 @@
     .artplayer-loading {
         display: none;
         position: absolute;
-        z-index: 60;
+        z-index: 70;
         left: 0;
         top: 0;
         right: 0;
@@ -13,4 +13,10 @@
         justify-content: center;
         pointer-events: none;
     }
+
+    &.artplayer-loading-show {
+        .artplayer-loading {
+            display: flex;
+        }
+    }
 }

packages/artplayer/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;
@@ -12,11 +12,17 @@
         overflow: hidden;
         pointer-events: none;
     
-        .art-playBig {
+        .art-state {
             position: absolute;
             right: 30px;
             bottom: 65px;
             opacity: .6;
         }
     }
+
+    &.artplayer-mask-show {
+        .artplayer-mask {
+            display: flex;
+        }
+    }
 }

packages/artplayer/src/style/notice.scss

@@ -3,7 +3,7 @@
         display: none;
         font-size: 14px;
         position: absolute;
-        z-index: 70;
+        z-index: 80;
         left: 0;
         top: 0;
         padding: 10px;
@@ -17,4 +17,10 @@
             border-radius: 3px;
         }
     }
+
+    &.artplayer-notice-show {
+        .artplayer-notice {
+            display: flex;
+        }
+    }
 }

packages/artplayer/src/style/pip.scss

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

packages/artplayer/src/style/setting.scss

@@ -1,30 +1,35 @@
 .artplayer-video-player {
     .artplayer-setting {
-        display: none;
+        display: flex;
+        align-items: center;
+        justify-content: center;
         position: absolute;
-        z-index: 80;
+        z-index: 90;
         left: 0;
         top: 0;
         height: 100%;
         width: 100%;
-        align-items: center;
-        justify-content: center;
+        opacity: 0;
+        visibility: hidden;
+        pointer-events: none;
+        overflow: hidden;
         .artplayer-setting-inner {
             position: absolute;
             top: 0;
-            right: 0;
+            right: -50%;
             bottom: 0;
             width: 50%;
             height: 100%;
             font-size: 12px;
             background: rgba(0, 0, 0, 0.8);
+            transition: all .2s ease-in-out;
             overflow: hidden;
             .artplayer-setting-body {
                 overflow-y: auto;
                 width: 100%;
                 height: 100%;
                 .art-setting {
-                    border-bottom: 1px solid rgba(255,255,255,.1);
+                    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
                     padding: 12px 20px 12px 20px;
                     .art-setting-header {
                         color: #fff;
@@ -54,7 +59,8 @@
                     border-radius: 2px;
                     cursor: pointer;
                 }
-                &:hover, &.current {
+                &:hover,
+                &.current {
                     span {
                         color: #fff;
                         background: #00a1d6;
@@ -63,4 +69,15 @@
             }
         }
     }
+
+    &.artplayer-setting-show {
+        .artplayer-setting {
+            opacity: 1;
+            visibility: visible;
+            pointer-events: all;
+            .artplayer-setting-inner {
+                right: 0;
+            }
+        }
+    }
 }

packages/artplayer/src/style/subtitle.scss

@@ -7,12 +7,18 @@
         padding: 0 20px;
         text-align: center;
         color: #fff;
-        text-shadow: 0.5px 0.5px 0.5px rgba(0, 0, 0, 0.5);
         font-size: 20px;
         pointer-events: none;
+        text-shadow: 0.5px 0.5px 0.5px rgba(0, 0, 0, 0.5);
     
         p {
             margin: 5px 0;
         }
     }
+
+    &.artplayer-subtitle-hide {
+        .artplayer-subtitle {
+            display: none;
+        }
+    }
 }

packages/artplayer/src/style/video.scss

@@ -9,7 +9,6 @@
         width: 100%;
         height: 100%;
         background-color: #000;
-        outline: 0;
         cursor: pointer;
     }
 }

packages/artplayer/src/subtitle.js

@@ -1,4 +1,4 @@
-import { setStyles, setStyle, srtToVtt, vttToBlob } from './utils';
+import { setStyles, srtToVtt, vttToBlob } from './utils';
 
 export default class Subtitle {
     constructor(art) {
@@ -74,28 +74,16 @@ export default class Subtitle {
     }
 
     show() {
-        const {
-            template: { $subtitle },
-            i18n,
-            notice,
-        } = this.art;
-        setStyle($subtitle, 'display', 'block');
+        const { $player } = this.art.template;
         this.state = true;
-        notice.show(i18n.get('Show subtitle'));
-        this.art.emit('subtitle:show', $subtitle);
+        $player.classList.remove('artplayer-subtitle-hide');
+        this.art.emit('subtitle:show');
     }
 
     hide() {
-        const {
-            template: { $subtitle },
-            i18n,
-            notice,
-        } = this.art;
-        
-        setStyle($subtitle, 'display', 'none');
+        const { $player } = this.art.template;
         this.state = false;
-        notice.show(i18n.get('Hide subtitle'));
-        this.art.emit('subtitle:hide', $subtitle);
+        $player.classList.add('artplayer-subtitle-hide');
     }
 
     toggle() {

packages/artplayer/src/template.js

@@ -25,6 +25,7 @@ export default class Template {
           <div class="artplayer-video-player">
             <video class="artplayer-video"></video>
             <div class="artplayer-subtitle"></div>
+            <div class="artplayer-danmuku"></div>
             <div class="artplayer-layers"></div>
             <div class="artplayer-mask"></div>
             <div class="artplayer-bottom">
@@ -57,6 +58,7 @@ export default class Template {
         this.$player = this.$container.querySelector('.artplayer-video-player');
         this.$video = this.$container.querySelector('.artplayer-video');
         this.$subtitle = this.$container.querySelector('.artplayer-subtitle');
+        this.$danmuku = this.$container.querySelector('.artplayer-danmuku');
         this.$bottom = this.$container.querySelector('.artplayer-bottom');
         this.$progress = this.$container.querySelector('.artplayer-progress');
         this.$controls = this.$container.querySelector('.artplayer-controls');