enhance media controls: improve animations and adjust layout properties

src/browser/base/content/zen-styles/zen-media-controls.css

@@ -59,12 +59,13 @@
 
   &:hover {
     & #zen-media-main-vbox {
+      transition-delay: 0s;
       gap: 6px;
     }
 
     .show-on-hover {
       max-height: 50px;
-      margin: 2px 6px;
+      padding: 2px 6px;
       margin-bottom: 0;
       opacity: 1;
       transform: translateY(0);
@@ -108,14 +109,13 @@
   .show-on-hover {
     max-height: 0;
     opacity: 0;
-    overflow: hidden;
     transform: translateY(5px);
-    margin: 0 6px;
+    padding: 0 6px;
     transition:
       max-height 0.1s ease-in-out,
       opacity 0.1s ease-in-out,
       transform 0.05s ease-in-out,
-      margin 0.15s ease-in-out;
+      padding 0.15s ease-in-out;
   }
 
   #zen-media-current-time,
@@ -127,24 +127,12 @@
   }
 }
 
-@keyframes zen-media-controls-show {
-  from {
-    opacity: 0;
-    transform: translateY(10px);
-  }
-  to {
-    opacity: 1;
-    transform: translateY(0);
-  }
-}
-
 #zen-media-controls-toolbar {
   display: none;
   animation: none;
   transition: none;
 
   &:not([hidden]) {
-    animation: zen-media-controls-show 0.2s ease-out;
     display: flex;
     height: 2.5rem;
     overflow: visible;
@@ -163,7 +151,7 @@
 
 #zen-media-service-title {
   align-self: center;
-  font-size: 13px;
+  font-size: math;
   margin-left: 6px;
 
   & label {
@@ -200,7 +188,7 @@
 }
 
 #zen-media-service-hbox {
-  margin-top: 6px;
+  padding-top: 6px;
 }
 
 #zen-media-info-vbox {

src/browser/base/content/zen-styles/zen-tabs/vertical-tabs.css

@@ -1174,7 +1174,7 @@
     }
 
     & .titlebar-buttonbox-container {
-      margin-left: calc(-1 * var(--zen-toolbox-max-width)) !important;
+      margin-left: calc(-1 * var(--zen-toolbox-max-width) + var(--zen-toolbox-padding) / 2) !important;
     }
 
     & #zen-appcontent-wrapper {

src/browser/base/zen-components/ZenMediaController.mjs

@@ -31,14 +31,41 @@ class ZenMediaController {
     window.addEventListener('TabSelect', (event) => {
       if (this._currentBrowser) {
         if (event.target.linkedBrowser.browserId === this._currentBrowser.browserId) {
-          this.mediaControlBar.setAttribute('hidden', 'true');
+          gZenUIManager.motion
+            .animate(this.mediaControlBar, {
+              opacity: [1, 0],
+              y: [0, 10],
+            })
+            .then(() => {
+              this.mediaControlBar.setAttribute('hidden', 'true');
+            });
         } else {
           this.mediaControlBar.removeAttribute('hidden');
+          window.requestAnimationFrame(() => {
+            this.mediaControlBar.style.height =
+              this.mediaControlBar.querySelector('toolbaritem').getBoundingClientRect().height + 'px';
+            gZenUIManager.motion.animate(
+              this.mediaControlBar,
+              {
+                opacity: [0, 1],
+                y: [10, 0],
+              },
+              {}
+            );
+          });
         }
 
         gZenUIManager.updateTabsToolbar();
       }
     });
+
+    window.addEventListener('TabClose', (event) => {
+      if (this._currentBrowser) {
+        if (event.target.linkedBrowser.browserId === this._currentBrowser.browserId) {
+          this.deinitMediaController(this._currentMediaController);
+        }
+      }
+    });
   }
 
   /**