build all packages

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',
+    };
+}