build all packages

packages/artplayer/src/contextmenu/index.js

@@ -91,10 +91,10 @@ export default class Contextmenu extends Component {
                     this.show = false;
                 }
             });
-        });
 
-        art.on('blur', () => {
-            this.show = false;
+            art.on('blur', () => {
+                this.show = false;
+            });
         });
     }
 }

packages/artplayer/src/control/fullscreen.js

@@ -18,12 +18,12 @@ export default function fullscreen(option) {
                 player.fullscreenToggle = true;
             });
 
-            art.on('fullscreen:enabled', () => {
+            art.on('fullscreenEnabled', () => {
                 setStyle($fullscreen, 'opacity', '0.8');
                 tooltip($fullscreen, i18n.get('Exit fullscreen'));
             });
 
-            art.on('fullscreen:exit', () => {
+            art.on('fullscreenExit', () => {
                 setStyle($fullscreen, 'opacity', '1');
                 tooltip($fullscreen, i18n.get('Fullscreen'));
             });

packages/artplayer/src/control/fullscreenWeb.js

@@ -18,12 +18,12 @@ export default function fullscreenWeb(option) {
                 player.fullscreenWebToggle = true;
             });
 
-            art.on('fullscreenWeb:enabled', () => {
+            art.on('fullscreenWebEnabled', () => {
                 setStyle($fullscreenWeb, 'opacity', '0.8');
                 tooltip($fullscreenWeb, i18n.get('Exit web fullscreen'));
             });
 
-            art.on('fullscreenWeb:exit', () => {
+            art.on('fullscreenWebExit', () => {
                 setStyle($fullscreenWeb, 'opacity', '1');
                 tooltip($fullscreenWeb, i18n.get('Web fullscreen'));
             });

packages/artplayer/src/control/index.js

@@ -16,7 +16,7 @@ import quality from './quality';
 export default class Control extends Component {
     constructor(art) {
         super(art);
-        
+
         art.on('ready', () => {
             const { option } = art;
 

packages/artplayer/src/control/setting.js

@@ -18,14 +18,14 @@ export default function setting(option) {
                 setting.toggle();
             });
 
-            art.on('setting:show', () => {
-                setStyle($setting, 'opacity', '0.8');
-                tooltip($setting, i18n.get('Hide setting'));
-            });
-
-            art.on('setting:hide', () => {
-                setStyle($setting, 'opacity', '1');
-                tooltip($setting, i18n.get('Show setting'));
+            art.on('setting:toggle', value => {
+                if (value) {
+                    setStyle($setting, 'opacity', '0.8');
+                    tooltip($setting, i18n.get('Hide setting'));
+                } else {
+                    setStyle($setting, 'opacity', '1');
+                    tooltip($setting, i18n.get('Show setting'));
+                }
             });
         },
     });

packages/artplayer/src/layer.js

@@ -3,7 +3,7 @@ import Component from './utils/component';
 export default class Layer extends Component {
     constructor(art) {
         super(art);
-        this.$parent = art.template.$layers;
+        this.$parent = art.template.$layer;
         art.on('ready', () => {
             art.option.layers.forEach(item => {
                 this.add(item);

packages/artplayer/src/notice.js

@@ -8,7 +8,6 @@ export default class Notice {
 
     show(msg, autoHide = true, time = 1000) {
         const { $player, $noticeInner } = this.art.template;
-        addClass($player, 'art-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', msg);
+        addClass($player, 'art-notice-show');
+        this.art.emit('notice:toggle', true);
     }
 
     hide() {
         const { $player } = this.art.template;
         removeClass($player, 'art-notice-show');
-        this.art.emit('notice:hide');
+        this.art.emit('notice:toggle', true);
     }
 }

packages/artplayer/src/plugins/miniProgressBar.js

@@ -17,18 +17,14 @@ export default function miniProgressBar(art) {
             background: theme,
         },
         mounted($progressBar) {
-            art.on('controls:show', () => {
-                $progressBar.style.display = 'none';
+            art.on('control:toggle', value => {
+                $progressBar.style.display = value ? 'none' : 'block';
             });
 
             art.on('destroy', () => {
                 $progressBar.style.display = 'none';
             });
 
-            art.on('controls:hide', () => {
-                $progressBar.style.display = 'block';
-            });
-
             art.on('video:timeupdate', () => {
                 $progressBar.style.width = `${player.played * 100}%`;
             });

packages/artplayer/src/style/bottom.scss

@@ -248,7 +248,7 @@
         }
     }
 
-    &.art-controls-show,
+    &.art-control-show,
     &.art-hover {
         .art-bottom {
             opacity: 1;

packages/artplayer/src/style/layers.scss

@@ -1,5 +1,6 @@
 .art-video-player {
     .art-layers {
+        display: none;
         position: absolute;
         z-index: 40;
         left: 0;
@@ -15,9 +16,9 @@
         }
     }
 
-    &.art-layers-hide {
+    &.art-layer-show {
         .art-layers {
-            display: none;
+            display: block;
         }
     }
 }

packages/artplayer/src/template.js

@@ -34,7 +34,7 @@ export default class Template {
 
     initDesktop() {
         this.$container.innerHTML = `
-<div class="art-video-player art-subtitle-show" style="--theme: ${this.art.option.theme}">
+<div class="art-video-player art-subtitle-show art-layer-show" style="--theme: ${this.art.option.theme}">
   <video class="art-video">
     <track default kind="metadata"></track>
   </video>
@@ -108,7 +108,7 @@ export default class Template {
         this.$controls = this.query('.art-controls');
         this.$controlsLeft = this.query('.art-controls-left');
         this.$controlsRight = this.query('.art-controls-right');
-        this.$layers = this.query('.art-layers');
+        this.$layer = this.query('.art-layers');
         this.$loading = this.query('.art-loading');
         this.$notice = this.query('.art-notice');
         this.$noticeInner = this.query('.art-notice-inner');