build all packages

packages/artplayer/src/controls/index.js

@@ -163,10 +163,12 @@ export default class Controls {
     show() {
         const { $player } = this.art.template;
         $player.classList.add('artplayer-controls-show');
+        this.art.emit('controls:show');
     }
 
     hide() {
         const { $player } = this.art.template;
         $player.classList.remove('artplayer-controls-show');
+        this.art.emit('controls:hide');
     }
 }

packages/artplayer/src/plugins/index.js

@@ -1,5 +1,6 @@
 import subtitle from './subtitle';
 import localPreview from './localPreview';
+import miniProgressBar from './miniProgressBar';
 
 export default class Plugins {
     constructor(art) {
@@ -8,6 +9,7 @@ export default class Plugins {
 
         this.add(subtitle);
         this.add(localPreview);
+        this.add(miniProgressBar);
         art.option.plugins.forEach(plugin => {
             this.add(plugin);
         });

packages/artplayer/src/plugins/miniProgressBar.js

@@ -0,0 +1,36 @@
+export default function miniProgressBar(art) {
+    const {
+        layers,
+        player,
+        option: { theme },
+    } = art;
+
+    layers.add({
+        style: {
+            display: 'none',
+            position: 'absolute',
+            left: 0,
+            right: 0,
+            bottom: 0,
+            height: '3px',
+            background: theme,
+        },
+        mounted($progressBar) {
+            art.on('hoverenter', () => {
+                $progressBar.style.display = 'none';
+            });
+            art.on('hoverleave', () => {
+                if (player.playing) {
+                    $progressBar.style.display = 'block';
+                }
+            });
+            art.on('video:timeupdate', () => {
+                $progressBar.style.width = `${player.played * 100}%`;
+            });
+        },
+    });
+
+    return {
+        name: 'miniProgressBar',
+    };
+}

packages/artplayer/src/style/bottom.scss

@@ -9,7 +9,6 @@
         padding: 60px 10px 0;
         opacity: 0;
         visibility: hidden;
-        overflow: hidden;
         transition: all .2s ease-in-out;
         pointer-events: none;
         background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAADGCAYAAAAT+OqFAAAAdklEQVQoz42QQQ7AIAgEF/T/D+kbq/RWAlnQyyazA4aoAB4FsBSA/bFjuF1EOL7VbrIrBuusmrt4ZZORfb6ehbWdnRHEIiITaEUKa5EJqUakRSaEYBJSCY2dEstQY7AuxahwXFrvZmWl2rh4JZ07z9dLtesfNj5q0FU3A5ObbwAAAABJRU5ErkJggg==) repeat-x bottom;
@@ -128,6 +127,7 @@
             align-items: center;
             justify-content: space-between;
             height: 36px;
+            overflow: hidden;
     
             .artplayer-controls-left, .artplayer-controls-right {
                 display: flex;