调整整体样式

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');