refactor media controls layout and styling; enhance service title display

src/browser/base/content/zen-media-player.inc.xhtml

@@ -0,0 +1,51 @@
+<toolbar id="zen-media-controls-toolbar"
+  class="browser-toolbar customization-target zen-sidebar-toolbar"
+  context="toolbar-context-menu"
+  mode="icons"
+  hidden="true">
+  <toolbaritem>
+    <vbox id="zen-media-main-vbox">
+      <hbox id="zen-media-service-hbox" class="show-on-hover">
+        <hbox id="zen-media-service-button">
+          <image/>
+        </hbox>
+        <hbox id="zen-media-service-title" fadein="true">
+          <label class="service" />
+          <label class="tld" />
+        </hbox>
+      </hbox>
+      
+      <vbox id="zen-media-info-vbox" class="show-on-hover">
+        <label id="zen-media-title" fadein="true"/>
+        <label id="zen-media-artist" fadein="true"/>
+      </vbox>
+
+      <hbox id="zen-media-progress-hbox"  class="show-on-hover">
+        <label id="zen-media-current-time">0:00</label>
+        <html:input type="range" id="zen-media-progress-bar" 
+          value="0" min="0" max="100" step="0.1"
+          oninput="gZenMediaController.onMediaSeekDrag(event);"
+          onchange="gZenMediaController.onMediaSeekComplete(event);"/>
+        <label id="zen-media-duration">0:00</label>
+      </hbox>
+      
+      <hbox id="zen-media-controls-hbox">
+        <toolbarbutton id="zen-media-focus-button"
+          class="toolbarbutton-1"
+          oncommand="gZenMediaController.onMediaFocus();" />
+        <toolbarbutton id="zen-media-previoustrack-button"
+          class="toolbarbutton-1"
+          oncommand="gZenMediaController.onMediaPlayPrev();" />
+        <toolbarbutton id="zen-media-playpause-button"
+          class="toolbarbutton-1"
+          oncommand="gZenMediaController.onMediaToggle();" />
+        <toolbarbutton id="zen-media-nexttrack-button"
+          class="toolbarbutton-1"
+          oncommand="gZenMediaController.onMediaPlayNext();" />
+        <toolbarbutton id="zen-media-mute-button"
+          class="toolbarbutton-1"
+          oncommand="gZenMediaController.onMediaMute();" />
+      </hbox>
+    </vbox>
+  </toolbaritem>
+</toolbar>

src/browser/base/content/zen-sidebar-icons.inc.xhtml

@@ -1,52 +1,4 @@
-<toolbar id="zen-media-controls-toolbar"
+#include zen-media-player.inc.xhtml
-  class="browser-toolbar customization-target zen-sidebar-toolbar"
-  context="toolbar-context-menu"
-  mode="icons"
-  hidden="true">
-  <toolbaritem>
-    <vbox id="zen-media-main-vbox">
-      <hbox id="zen-media-service-hbox" class="show-on-hover">
-        <html:div id="zen-media-service-button">
-          <image/>
-        </html:div>
-        <label id="zen-media-service-title" fadein="true"/>
-      </hbox>
-      
-      <vbox id="zen-media-info-vbox" class="show-on-hover">
-        <label id="zen-media-title" fadein="true"/>
-        <label id="zen-media-artist" fadein="true"/>
-      </vbox>
-
-      <hbox id="zen-media-progress-hbox"  class="show-on-hover">
-        <label id="zen-media-current-time">0:00</label>
-        <html:input type="range" id="zen-media-progress-bar" 
-          value="0" min="0" max="100" step="0.1"
-          oninput="gZenMediaController.onMediaSeekDrag(event);"
-          onchange="gZenMediaController.onMediaSeekComplete(event);"/>
-        <label id="zen-media-duration">0:00</label>
-      </hbox>
-      
-      <hbox id="zen-media-controls-hbox">
-        <toolbarbutton id="zen-media-focus-button"
-          class="toolbarbutton-1"
-          oncommand="gZenMediaController.onMediaFocus();" />
-        <toolbarbutton id="zen-media-previoustrack-button"
-          class="toolbarbutton-1"
-          oncommand="gZenMediaController.onMediaPlayPrev();" />
-        <toolbarbutton id="zen-media-playpause-button"
-          class="toolbarbutton-1"
-          oncommand="gZenMediaController.onMediaToggle();" />
-        <toolbarbutton id="zen-media-nexttrack-button"
-          class="toolbarbutton-1"
-          oncommand="gZenMediaController.onMediaPlayNext();" />
-        <toolbarbutton id="zen-media-mute-button"
-          class="toolbarbutton-1"
-          oncommand="gZenMediaController.onMediaMute();" />
-      </hbox>
-    </vbox>
-  </toolbaritem>
-</toolbar>
-
 <toolbar brighttext="true"
   id="zen-sidebar-bottom-buttons"
   fullscreentoolbar="true"

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

@@ -5,9 +5,7 @@
   display: flex;
   justify-content: space-between;
   min-width: 0;
-  padding: 5px;
+  background: transparent;
-  border-radius: 10px;
-  background: var(--zen-toolbar-element-bg) !important;
   container-type: inline-size;
 
   .toolbarbutton-1 {
@@ -60,6 +58,10 @@
   }
 
   &:hover {
+    & #zen-media-main-vbox {
+      gap: 8px;
+    }
+
     .show-on-hover {
       max-height: 50px;
       opacity: 1;
@@ -93,6 +95,13 @@
     flex-grow: 1;
     padding: 0;
     transition: padding 0.3s ease-out;
+    position: absolute;
+    left: 0;
+    bottom: 0;
+    padding: 5px;
+    border-radius: var(--border-radius-medium);
+    background: var(--zen-toolbar-element-bg) !important;
+    width: 100%;
   }
 
   .show-on-hover {
@@ -102,9 +111,9 @@
     overflow: hidden;
     transform: translateY(5px);
     transition:
-      max-height 0.35s ease-in-out,
+      max-height 0.15s ease-in-out,
-      opacity 0.25s ease-in-out,
+      opacity 0.15s ease-in-out,
-      transform 0.3s ease-in-out;
+      transform 0.05s ease-in-out;
   }
 
   #zen-media-current-time,
@@ -125,15 +134,16 @@
 }
 
 #zen-media-controls-toolbar {
+  display: none;
+  animation: none;
+  transition: none;
+
   &:not([hidden]) {
     animation: zen-media-controls-show 0.2s ease-out;
     display: flex;
-  }
+    height: 3.5rem;
-
+    overflow: visible;
-  &[hidden] {
+    position: relative;
-    display: none;
-    animation: none;
-    transition: none;
   }
 }
 
@@ -148,14 +158,24 @@
 #zen-media-service-title {
   align-self: center;
   font-size: 13px;
-  margin-bottom: 5px;
   margin-left: 6px;
+
+  & label {
+    margin: 0;
+  }
+
+  & .tld {
+    opacity: 0.5;
+  }
 }
 
 #zen-media-title,
 #zen-media-artist {
   align-self: start;
-  margin-top: 5px;
+}
+
+#zen-media-artist {
+  opacity: 0.7;
 }
 
 #zen-media-title {
@@ -164,11 +184,6 @@
   font-weight: bold;
 }
 
-#zen-media-artist {
-  height: 5px;
-  padding-bottom: 20px;
-}
-
 #zen-media-main-vbox,
 #zen-media-service-hbox,
 #zen-media-info-vbox,
@@ -176,10 +191,21 @@
   width: 100%;
 }
 
+#zen-media-info-vbox {
+  & label {
+    width: 100%;
+    text-overflow: ellipsis;
+    overflow: hidden;
+    white-space: nowrap;
+  }
+}
+
 #zen-media-main-vbox {
   height: 100%;
   justify-content: space-between;
   overflow: hidden;
+  transition: gap 0.1s ease-out;
+  transition-delay: 0.1s;
 }
 
 #zen-media-progress-hbox {
@@ -189,12 +215,17 @@
 
 #zen-media-controls-hbox {
   align-items: flex-end;
-  justify-content: space-evenly;
+  justify-content: space-between;
   max-width: 100%;
   overflow: hidden;
 }
 
-#zen-media-service-button image {
+#zen-media-service-button {
-  width: 20px;
+  align-items: center;
-  height: 20px;
+
+  & image {
+    width: 16px;
+    height: 16px;
+    border-radius: 4px;
+  }
 }

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

@@ -53,6 +53,8 @@ class ZenMediaController {
     this.mediaControlBar.setAttribute('hidden', 'true');
     this.mediaControlBar.removeAttribute('muted');
     this.mediaControlBar.classList.remove('playing');
+
+    gZenUIManager.updateTabsToolbar();
   }
 
   /**
@@ -65,7 +67,14 @@ class ZenMediaController {
       this.mediaControlBar.classList.add('playing');
     }
 
-    this.mediaServiceTitle.textContent = this._currentBrowser._originalURI.displayHost;
+    // Have it displayed as e.g. <white>youtube</white><grey>.com</grey>
+    let host = this._currentBrowser._originalURI.displayHost;
+    if (host.startsWith('www.')) host = host.slice(4);
+    // note: we might have subdomains, so we need to split the host
+    const [service, ...tld] = host.split('.');
+    this.mediaServiceTitle.querySelector('.service').textContent = service;
+    this.mediaServiceTitle.querySelector('.tld').textContent = '.' + tld.join('.');
+
     this.mediaServiceIcon.src = this._currentBrowser.mIconURL;
     this.mediaFocusButton.style.listStyleImage = `url(${this._currentBrowser.mIconURL})`;
 
@@ -73,6 +82,8 @@ class ZenMediaController {
     this.mediaTitle.textContent = metadata.title || '';
     this.mediaArtist.textContent = metadata.artist || '';
 
+    gZenUIManager.updateTabsToolbar();
+
     this._currentPosition = positionState.position;
     this._currentDuration = positionState.duration;
     this.updateMediaPosition();