Update transition property in bottom.less and

remove unnecessary styles in plugins.less and
miniProgressBar.js

packages/artplayer/src/plugins/miniProgressBar.js

@@ -1,32 +1,13 @@
+import { addClass, removeClass } from '../utils';
+
 export default function miniProgressBar(art) {
-    art.on('ready', () => {
-        art.layers.add({
-            name: 'mini-progress-bar',
-            mounted($progressBar) {
-                art.on('destroy', () => {
-                    $progressBar.style.display = 'none';
-                });
-
-                if (art.constructor.USE_RAF) {
-                    art.on('raf', () => {
-                        $progressBar.style.width = `${art.played * 100}%`;
-                    });
-                } else {
-                    art.on('video:timeupdate', () => {
-                        $progressBar.style.width = `${art.played * 100}%`;
-                    });
-                }
-
-                art.on('setBar', (type, percentage) => {
-                    if (type === 'played') {
-                        $progressBar.style.width = `${percentage * 100}%`;
-                    }
-                });
-            },
-        });
+    art.on('control', (state) => {
+        if (state) {
+            removeClass(art.template.$player, 'art-mini-progress-bar');
+        } else {
+            addClass(art.template.$player, 'art-mini-progress-bar');
+        }
     });
 
-    return {
-        name: 'mini-progress-bar',
-    };
+    return { name: 'mini-progress-bar' };
 }

packages/artplayer/src/style/bottom.less

@@ -8,7 +8,7 @@
         overflow: hidden;
         pointer-events: none;
         padding: 0 var(--art-padding);
-        transition: opacity var(--art-transition-duration) ease;
+        transition: all var(--art-transition-duration) ease;
         background-size: 100% var(--art-bottom-height);
         .art-bottom-gradient();
 

packages/artplayer/src/style/plugins.less

@@ -1,12 +1,4 @@
 .art-video-player {
-    .art-layer-mini-progress-bar {
-        display: flex;
-        .art-full();
-        top: auto;
-        height: var(--art-mini-progress-height) !important;
-        background-color: var(--art-theme);
-    }
-
     .art-layer-lock {
         .art-center(none);
         position: absolute;
@@ -49,24 +41,29 @@
     }
 
     &.art-lock {
-        .art-bottom {
-            display: none !important;
-        }
-
         .art-subtitle {
             bottom: var(--art-subtitle-bottom) !important;
         }
+    }
 
-        .art-layer-mini-progress-bar {
-            display: flex !important;
+    &.art-mini-progress-bar, &.art-lock {
+        .art-bottom {
+            opacity: 1;
+            padding: 0;
+            background-image: none;
+            
+            .art-controls,
+            .art-progress {
+                transform: translateY(calc(var(--art-control-height) + var(--art-bottom-gap) + var(--art-progress-height) / 4));
+            }
+
+            .art-progress-indicator {
+                display: none !important;
+            }
         }
     }
 
     &.art-control-show {
-        .art-layer-mini-progress-bar {
-            display: none;
-        }
-
         .art-layer-lock {
             display: flex;
         }