forked from ZenBrowserMirrors/zen-desktop
refactor media controls layout and styling; enhance service title display
This commit is contained in:
parent
b5f32f1001
commit
39d090297e
4 changed files with 118 additions and 73 deletions
51
src/browser/base/content/zen-media-player.inc.xhtml
Normal file
51
src/browser/base/content/zen-media-player.inc.xhtml
Normal 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>
|
|
@ -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"
|
<toolbar brighttext="true"
|
||||||
id="zen-sidebar-bottom-buttons"
|
id="zen-sidebar-bottom-buttons"
|
||||||
fullscreentoolbar="true"
|
fullscreentoolbar="true"
|
||||||
|
|
|
@ -5,9 +5,7 @@
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
min-width: 0;
|
min-width: 0;
|
||||||
padding: 5px;
|
background: transparent;
|
||||||
border-radius: 10px;
|
|
||||||
background: var(--zen-toolbar-element-bg) !important;
|
|
||||||
container-type: inline-size;
|
container-type: inline-size;
|
||||||
|
|
||||||
.toolbarbutton-1 {
|
.toolbarbutton-1 {
|
||||||
|
@ -60,6 +58,10 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
|
& #zen-media-main-vbox {
|
||||||
|
gap: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
.show-on-hover {
|
.show-on-hover {
|
||||||
max-height: 50px;
|
max-height: 50px;
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
|
@ -93,6 +95,13 @@
|
||||||
flex-grow: 1;
|
flex-grow: 1;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
transition: padding 0.3s ease-out;
|
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 {
|
.show-on-hover {
|
||||||
|
@ -102,9 +111,9 @@
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
transform: translateY(5px);
|
transform: translateY(5px);
|
||||||
transition:
|
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,
|
#zen-media-current-time,
|
||||||
|
@ -125,15 +134,16 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
#zen-media-controls-toolbar {
|
#zen-media-controls-toolbar {
|
||||||
|
display: none;
|
||||||
|
animation: none;
|
||||||
|
transition: none;
|
||||||
|
|
||||||
&:not([hidden]) {
|
&:not([hidden]) {
|
||||||
animation: zen-media-controls-show 0.2s ease-out;
|
animation: zen-media-controls-show 0.2s ease-out;
|
||||||
display: flex;
|
display: flex;
|
||||||
}
|
height: 3.5rem;
|
||||||
|
overflow: visible;
|
||||||
&[hidden] {
|
position: relative;
|
||||||
display: none;
|
|
||||||
animation: none;
|
|
||||||
transition: none;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -148,14 +158,24 @@
|
||||||
#zen-media-service-title {
|
#zen-media-service-title {
|
||||||
align-self: center;
|
align-self: center;
|
||||||
font-size: 13px;
|
font-size: 13px;
|
||||||
margin-bottom: 5px;
|
|
||||||
margin-left: 6px;
|
margin-left: 6px;
|
||||||
|
|
||||||
|
& label {
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
& .tld {
|
||||||
|
opacity: 0.5;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
#zen-media-title,
|
#zen-media-title,
|
||||||
#zen-media-artist {
|
#zen-media-artist {
|
||||||
align-self: start;
|
align-self: start;
|
||||||
margin-top: 5px;
|
}
|
||||||
|
|
||||||
|
#zen-media-artist {
|
||||||
|
opacity: 0.7;
|
||||||
}
|
}
|
||||||
|
|
||||||
#zen-media-title {
|
#zen-media-title {
|
||||||
|
@ -164,11 +184,6 @@
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
}
|
}
|
||||||
|
|
||||||
#zen-media-artist {
|
|
||||||
height: 5px;
|
|
||||||
padding-bottom: 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
#zen-media-main-vbox,
|
#zen-media-main-vbox,
|
||||||
#zen-media-service-hbox,
|
#zen-media-service-hbox,
|
||||||
#zen-media-info-vbox,
|
#zen-media-info-vbox,
|
||||||
|
@ -176,10 +191,21 @@
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
#zen-media-info-vbox {
|
||||||
|
& label {
|
||||||
|
width: 100%;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
overflow: hidden;
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
#zen-media-main-vbox {
|
#zen-media-main-vbox {
|
||||||
height: 100%;
|
height: 100%;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
|
transition: gap 0.1s ease-out;
|
||||||
|
transition-delay: 0.1s;
|
||||||
}
|
}
|
||||||
|
|
||||||
#zen-media-progress-hbox {
|
#zen-media-progress-hbox {
|
||||||
|
@ -189,12 +215,17 @@
|
||||||
|
|
||||||
#zen-media-controls-hbox {
|
#zen-media-controls-hbox {
|
||||||
align-items: flex-end;
|
align-items: flex-end;
|
||||||
justify-content: space-evenly;
|
justify-content: space-between;
|
||||||
max-width: 100%;
|
max-width: 100%;
|
||||||
overflow: hidden;
|
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;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -53,6 +53,8 @@ class ZenMediaController {
|
||||||
this.mediaControlBar.setAttribute('hidden', 'true');
|
this.mediaControlBar.setAttribute('hidden', 'true');
|
||||||
this.mediaControlBar.removeAttribute('muted');
|
this.mediaControlBar.removeAttribute('muted');
|
||||||
this.mediaControlBar.classList.remove('playing');
|
this.mediaControlBar.classList.remove('playing');
|
||||||
|
|
||||||
|
gZenUIManager.updateTabsToolbar();
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
@ -65,7 +67,14 @@ class ZenMediaController {
|
||||||
this.mediaControlBar.classList.add('playing');
|
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.mediaServiceIcon.src = this._currentBrowser.mIconURL;
|
||||||
this.mediaFocusButton.style.listStyleImage = `url(${this._currentBrowser.mIconURL})`;
|
this.mediaFocusButton.style.listStyleImage = `url(${this._currentBrowser.mIconURL})`;
|
||||||
|
|
||||||
|
@ -73,6 +82,8 @@ class ZenMediaController {
|
||||||
this.mediaTitle.textContent = metadata.title || '';
|
this.mediaTitle.textContent = metadata.title || '';
|
||||||
this.mediaArtist.textContent = metadata.artist || '';
|
this.mediaArtist.textContent = metadata.artist || '';
|
||||||
|
|
||||||
|
gZenUIManager.updateTabsToolbar();
|
||||||
|
|
||||||
this._currentPosition = positionState.position;
|
this._currentPosition = positionState.position;
|
||||||
this._currentDuration = positionState.duration;
|
this._currentDuration = positionState.duration;
|
||||||
this.updateMediaPosition();
|
this.updateMediaPosition();
|
||||||
|
|
Loading…
Add table
Add a link
Reference in a new issue