添加灯光模式

packages/artplayer/src/contextmenu/close.js

@@ -1,9 +0,0 @@
-export default function close(option) {
-    return art => ({
-        ...option,
-        html: art.i18n.get('Close'),
-        click: contextmenu => {
-            contextmenu.show = false;
-        },
-    });
-}

packages/artplayer/src/contextmenu/index.js

@@ -4,7 +4,7 @@ import playbackRate from './playbackRate';
 import aspectRatio from './aspectRatio';
 import info from './info';
 import version from './version';
-import close from './close';
+import light from './light';
 
 export default class Contextmenu extends Component {
     constructor(art) {
@@ -54,9 +54,9 @@ export default class Contextmenu extends Component {
             );
 
             this.add(
-                close({
-                    disable: false,
-                    name: 'close',
+                light({
+                    disable: !option.light,
+                    name: 'light',
                     index: 50,
                 }),
             );

packages/artplayer/src/contextmenu/light.js

@@ -0,0 +1,18 @@
+export default function light(option) {
+    return art => {
+        const { i18n, player } = art;
+        return {
+            ...option,
+            html: i18n.get('Light Off'),
+            click: contextmenu => {
+                player.light = !player.light;
+                contextmenu.show = false;
+            },
+            mounted: $menu => {
+                art.on('light', value => {
+                    $menu.innerText = i18n.get(value ? 'Light On' : 'Light Off');
+                });
+            },
+        };
+    };
+}

packages/artplayer/src/i18n/zh-cn.json

@@ -1,6 +1,8 @@
 {
     "Video info": "视频统计信息",
     "Close": "关闭",
+    "Light Off": "关灯",
+    "Light On": "开灯",
     "Video load failed": "视频加载失败",
     "Volume": "音量",
     "Play": "播放",

packages/artplayer/src/i18n/zh-tw.json

@@ -1,6 +1,8 @@
 {
     "Video info": "影片統計訊息",
     "Close": "關閉",
+    "Light Off": "關燈",
+    "Light On": "開燈",
     "Video load failed": "影片載入失敗",
     "Volume": "音量",
     "Play": "播放",

packages/artplayer/src/index.js

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

packages/artplayer/src/player/index.js

@@ -21,6 +21,7 @@ import playingMix from './playingMix';
 import autoSizeMix from './autoSizeMix';
 import rectMix from './rectMix';
 import flipMix from './flipMix';
+import lightMix from './lightMix';
 import { proxyPropertys } from '../utils';
 
 export default class Player {
@@ -48,6 +49,7 @@ export default class Player {
         autoSizeMix(art, this);
         rectMix(art, this);
         flipMix(art, this);
+        lightMix(art, this);
         proxyPropertys(art, this);
     }
 }

packages/artplayer/src/player/lightMix.js

@@ -0,0 +1,15 @@
+import { def, getStyle, setStyle } from '../utils';
+
+export default function lightMix(art, player) {
+    const { $undercover } = art.template;
+
+    def(player, 'light', {
+        get() {
+            return getStyle($undercover, 'display', false) !== 'none';
+        },
+        set(value) {
+            setStyle($undercover, 'display', value ? 'block' : 'none');
+            art.emit('light', value);
+        },
+    });
+}

packages/artplayer/src/scheme/index.js

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

packages/artplayer/src/style/artplayer.scss

@@ -1,8 +1,20 @@
+.art-undercover {
+    background: #000;
+    position: fixed;
+    top: 0;
+    left: 0;
+    display: none;
+    height: 100%;
+    width: 100%;
+    opacity: 0.9;
+    z-index: 10;
+}
+
 .art-video-player {
     display: flex;
     position: relative;
     margin: 0 auto;
-    z-index: 10;
+    z-index: 20;
     width: 100%;
     height: 100%;
     outline: 0;

packages/artplayer/src/style/contextmenu.scss

@@ -13,10 +13,10 @@
 
         .art-contextmenu {
             cursor: pointer;
-            font-size: 13px;
+            font-size: 12px;
             display: block;
             color: #fff;
-            padding: 7px 10px;
+            padding: 10px 15px;
             overflow: hidden;
             text-overflow: ellipsis;
             white-space: nowrap;

packages/artplayer/src/template.js

@@ -35,6 +35,7 @@ export default class Template {
     desktop() {
         const { theme, backdrop } = this.art.option;
         this.$container.innerHTML = `
+          <div class="art-undercover"></div>
           <div class="art-video-player art-subtitle-show art-layer-show" style="--theme: ${theme}">
             <video class="art-video">
               <track default kind="metadata"></track>
@@ -99,6 +100,8 @@ export default class Template {
             <div class="art-contextmenus"></div>
           </div>
         `;
+
+        this.$undercover = this.query('.art-undercover');
         this.$player = this.query('.art-video-player');
         this.$video = this.query('.art-video');
         this.$track = this.query('.art-video track');