Merge branch 'master' of https://github.com/zhw2590582/ArtPlayer

packages/artplayer/src/index.js

@@ -112,6 +112,7 @@ class Artplayer extends Emitter {
             hotkey: true,
             pip: false,
             mutex: true,
+            backdrop: true,
             fullscreen: false,
             fullscreenWeb: false,
             subtitleOffset: false,

packages/artplayer/src/scheme/index.js

@@ -28,6 +28,7 @@ export default {
     hotkey: 'boolean',
     pip: 'boolean',
     mutex: 'boolean',
+    backdrop: 'boolean',
     fullscreen: 'boolean',
     fullscreenWeb: 'boolean',
     subtitleOffset: 'boolean',

packages/artplayer/src/style/contextmenu.scss

@@ -8,7 +8,7 @@
         top: 0;
         min-width: 200px;
         padding: 5px 0;
-        background:rgba(0, 0, 0, 0.8);
+        background: rgba(0, 0, 0, 0.9);
         border-radius: 3px;
 
         .art-contextmenu {
@@ -21,23 +21,24 @@
             text-overflow: ellipsis;
             white-space: nowrap;
             text-shadow: 0 0 2px rgba(0, 0, 0, 0.5);
-            border-bottom: 1px solid rgba(255,255,255,.1);
+            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
 
             a {
                 color: #fff;
                 text-decoration: none;
             }
-    
+
             span {
                 display: inline-block;
                 padding: 0 7px;
-                &:hover, &.art-current {
+                &:hover,
+                &.art-current {
                     color: #00c9ff;
                 }
             }
 
             &:hover {
-                background-color: rgba(255,255,255,.1);
+                background-color: rgba(255, 255, 255, 0.1);
             }
 
             &:last-child {

packages/artplayer/src/style/info.scss

@@ -11,10 +11,10 @@
         padding: 10px;
         color: #fff;
         font-size: 12px;
-        font-family: Noto Sans CJK SC DemiLight,Roboto,Segoe UI,Tahoma,Arial,Helvetica,sans-serif;
+        font-family: Noto Sans CJK SC DemiLight, Roboto, Segoe UI, Tahoma, Arial, Helvetica, sans-serif;
         -webkit-font-smoothing: antialiased;
-        background: rgba(0,0,0,.7);
-    
+        background: rgba(0, 0, 0, 0.9);
+
         .art-info-item {
             display: flex;
             margin-bottom: 5px;
@@ -22,7 +22,7 @@
                 width: 100px;
                 text-align: right;
             }
-    
+
             .art-info-content {
                 flex: 1;
                 overflow: hidden;
@@ -31,7 +31,7 @@
                 padding-left: 5px;
             }
         }
-    
+
         .art-info-close {
             position: absolute;
             top: 5px;

packages/artplayer/src/style/setting.scss

@@ -22,7 +22,7 @@
             width: 300px;
             height: 100%;
             font-size: 12px;
-            background: rgba(0, 0, 0, 0.8);
+            background: rgba(0, 0, 0, 0.9);
             transition: all 0.2s ease-in-out;
             overflow: auto;
 

packages/artplayer/src/template.js

@@ -33,8 +33,9 @@ export default class Template {
     }
 
     desktop() {
+        const { theme, backdrop } = this.art.option;
         this.$container.innerHTML = `
-          <div class="art-video-player art-subtitle-show art-layer-show" style="--theme: ${this.art.option.theme}">
+          <div class="art-video-player art-subtitle-show art-layer-show" style="--theme: ${theme}">
             <video class="art-video">
               <track default kind="metadata"></track>
             </video>
@@ -56,11 +57,11 @@ export default class Template {
               <div class="art-notice-inner"></div>
             </div>
             <div class="art-settings">
-              <div class="art-setting-inner art-backdrop-filter">
+              <div class="art-setting-inner">
                 <div class="art-setting-body"></div>
               </div>
             </div>
-            <div class="art-info art-backdrop-filter">
+            <div class="art-info">
               <div class="art-info-panel">
                 <div class="art-info-item">
                   <div class="art-info-title">Player version:</div>
@@ -95,7 +96,7 @@ export default class Template {
               <div class="art-pip-title"></div>
               <div class="art-pip-close">×</div>
             </div>
-            <div class="art-contextmenus art-backdrop-filter"></div>
+            <div class="art-contextmenus"></div>
           </div>
         `;
         this.$player = this.query('.art-video-player');
@@ -124,6 +125,12 @@ export default class Template {
         this.$pipTitle = this.query('.art-pip-title');
         this.$pipClose = this.query('.art-pip-close');
         this.$contextmenu = this.query('.art-contextmenus');
+
+        if (backdrop) {
+            addClass(this.$settingInner, 'art-backdrop-filter');
+            addClass(this.$info, 'art-backdrop-filter');
+            addClass(this.$contextmenu, 'art-backdrop-filter');
+        }
     }
 
     mobile() {