调整整体样式

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;
     }
 }