LeMoonStar/zen-realigned
1
0
Fork 0
forked from ZenBrowserMirrors/zen-desktop
Code Pull requests Activity

refactor media controls layout and styling; enhance service title display

Browse source
This commit is contained in:
mr. m 2025-03-12 15:41:23 +01:00
parent b5f32f1001
commit 39d090297e
No known key found for this signature in database
GPG key ID: 419302196C23B258
4 changed files with 118 additions and 73 deletions
Download patch file Download diff file Expand all files Collapse all files

51
src/browser/base/content/zen-media-player.inc.xhtml Normal file
View file

@ -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>

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

@ -1,52 +1,4 @@
<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">
<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>
#include zen-media-player.inc.xhtml
<toolbar brighttext="true"
id="zen-sidebar-bottom-buttons"
fullscreentoolbar="true"

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

@ -5,9 +5,7 @@
display: flex;
justify-content: space-between;
min-width: 0;
padding: 5px;
border-radius: 10px;
background: var(--zen-toolbar-element-bg) !important;
background: transparent;
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,
opacity 0.25s ease-in-out,
transform 0.3s ease-in-out;
max-height 0.15s ease-in-out,
opacity 0.15s ease-in-out,
transform 0.05s ease-in-out;
}
#zen-media-current-time,
@ -125,15 +134,16 @@
}
#zen-media-controls-toolbar {
&:not([hidden]) {
animation: zen-media-controls-show 0.2s ease-out;
display: flex;
}
&[hidden] {
display: none;
animation: none;
transition: none;
&:not([hidden]) {
animation: zen-media-controls-show 0.2s ease-out;
display: flex;
height: 3.5rem;
overflow: visible;
position: relative;
}
}
@ -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 {
width: 20px;
height: 20px;
#zen-media-service-button {
align-items: center;
& image {
width: 16px;
height: 16px;
border-radius: 4px;
}
}

13
src/browser/base/zen-components/ZenMediaController.mjs
View file

@ -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();