mirror of
https://github.com/zen-browser/desktop.git
synced 2025-07-08 00:10:00 +02:00
update @zen-browser/surfer dependency to version 1.10.5 and refine media controls styling
This commit is contained in:
mr. M
parent
2e1354cdb9
commit
8afb8ee204
8 changed files with 29 additions and 86 deletions
8
package-lock.json
generated
8
package-lock.json
generated
|
|
@ -9,7 +9,7 @@
|
|||
"version": "1.0.0",
|
||||
"license": "ISC",
|
||||
"dependencies": {
|
||||
"@zen-browser/surfer": "^1.10.4"
|
||||
"@zen-browser/surfer": "^1.10.5"
|
||||
},
|
||||
"devDependencies": {
|
||||
"husky": "^9.1.7",
|
||||
|
|
@ -288,9 +288,9 @@
|
|||
"license": "MIT"
|
||||
},
|
||||
"node_modules/@zen-browser/surfer": {
|
||||
"version": "1.10.4",
|
||||
"resolved": "https://registry.npmjs.org/@zen-browser/surfer/-/surfer-1.10.4.tgz",
|
||||
"integrity": "sha512-xDXJYgbJTfNpM+LsJDJ81VCotwIBY3CItrD7Y1hPqf84Ino/sTqy/QuHQCVqZU3StewAvVuV68MWnaiY9ytlMA==",
|
||||
"version": "1.10.5",
|
||||
"resolved": "https://registry.npmjs.org/@zen-browser/surfer/-/surfer-1.10.5.tgz",
|
||||
"integrity": "sha512-jpGArye02C6M65qy0b5kZWzDBO5sh/BY6k2otC1keAjICm9lxELsh5ELRz0tVQ6kwrBUC3yE4uP8jzUgQdCuCg==",
|
||||
"dependencies": {
|
||||
"@resvg/resvg-js": "^1.4.0",
|
||||
"async-icns": "^1.0.2",
|
||||
|
|
|
|||
|
|
@ -41,7 +41,7 @@
|
|||
},
|
||||
"homepage": "https://github.com/zen-browser/core#readme",
|
||||
"dependencies": {
|
||||
"@zen-browser/surfer": "^1.10.4"
|
||||
"@zen-browser/surfer": "^1.10.5"
|
||||
},
|
||||
"devDependencies": {
|
||||
"husky": "^9.1.7",
|
||||
|
|
|
|||
|
|
@ -5,30 +5,18 @@
|
|||
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"
|
||||
<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"
|
||||
|
|
|
|||
|
|
@ -60,32 +60,32 @@
|
|||
&:hover {
|
||||
& #zen-media-main-vbox {
|
||||
transition-delay: 0s;
|
||||
gap: 6px;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.show-on-hover {
|
||||
max-height: 50px;
|
||||
padding: 2px 6px;
|
||||
padding-top: 4px;
|
||||
margin-bottom: 0;
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
&:not(:hover) {
|
||||
&.playing:not([muted]) #zen-media-focus-button::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-repeat: no-repeat;
|
||||
opacity: 1;
|
||||
background: url('chrome://browser/content/zen-images/note-indicator.svg') no-repeat;
|
||||
top: -50%;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
z-index: -1;
|
||||
}
|
||||
&.playing:not([muted]) #zen-media-focus-button:not(:hover)::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-repeat: no-repeat;
|
||||
opacity: 1;
|
||||
background: url('chrome://browser/content/zen-images/note-indicator.svg') no-repeat;
|
||||
top: -50%;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
z-index: -1;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
#zen-media-focus-button {
|
||||
|
|
@ -130,10 +130,10 @@
|
|||
transform: translateY(5px);
|
||||
padding: 0 6px;
|
||||
transition:
|
||||
max-height 0.1s ease-in-out,
|
||||
opacity 0.1s ease-in-out,
|
||||
transform 0.05s ease-in-out,
|
||||
padding 0.15s ease-in-out;
|
||||
max-height 0.15s ease-in-out,
|
||||
opacity 0.15s ease-in-out,
|
||||
transform 0.1s ease-in-out,
|
||||
padding 0.1s ease-in-out;
|
||||
}
|
||||
|
||||
#zen-media-current-time,
|
||||
|
|
@ -159,7 +159,6 @@
|
|||
}
|
||||
}
|
||||
|
||||
#zen-media-service-title,
|
||||
#zen-media-title,
|
||||
#zen-media-artist {
|
||||
white-space: nowrap;
|
||||
|
|
@ -167,20 +166,6 @@
|
|||
margin-left: 0;
|
||||
}
|
||||
|
||||
#zen-media-service-title {
|
||||
align-self: center;
|
||||
font-size: math;
|
||||
margin-left: 6px;
|
||||
|
||||
& label {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
& .tld {
|
||||
opacity: 0.5;
|
||||
}
|
||||
}
|
||||
|
||||
#zen-media-title,
|
||||
#zen-media-artist {
|
||||
align-self: start;
|
||||
|
|
@ -199,16 +184,11 @@
|
|||
}
|
||||
|
||||
#zen-media-main-vbox,
|
||||
#zen-media-service-hbox,
|
||||
#zen-media-info-vbox,
|
||||
#zen-media-progress-hbox {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
#zen-media-service-hbox {
|
||||
padding-top: 6px;
|
||||
}
|
||||
|
||||
#zen-media-info-vbox {
|
||||
& label {
|
||||
width: 100%;
|
||||
|
|
@ -239,16 +219,6 @@
|
|||
--toolbarbutton-outer-padding: 0;
|
||||
}
|
||||
|
||||
#zen-media-service-button {
|
||||
align-items: center;
|
||||
|
||||
& image {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
}
|
||||
|
||||
:root:not([zen-sidebar-expanded='true']) {
|
||||
#zen-media-controls-toolbar {
|
||||
display: none;
|
||||
|
|
|
|||
|
|
@ -6,8 +6,6 @@ class ZenMediaController {
|
|||
mediaTitle = null;
|
||||
mediaArtist = null;
|
||||
mediaControlBar = null;
|
||||
mediaServiceIcon = null;
|
||||
mediaServiceTitle = null;
|
||||
mediaProgressBar = null;
|
||||
mediaCurrentTime = null;
|
||||
mediaDuration = null;
|
||||
|
|
@ -20,8 +18,6 @@ class ZenMediaController {
|
|||
this.mediaTitle = document.querySelector('#zen-media-title');
|
||||
this.mediaArtist = document.querySelector('#zen-media-artist');
|
||||
this.mediaControlBar = document.querySelector('#zen-media-controls-toolbar');
|
||||
this.mediaServiceIcon = document.querySelector('#zen-media-service-button > image');
|
||||
this.mediaServiceTitle = document.querySelector('#zen-media-service-title');
|
||||
this.mediaProgressBar = document.querySelector('#zen-media-progress-bar');
|
||||
this.mediaCurrentTime = document.querySelector('#zen-media-current-time');
|
||||
this.mediaDuration = document.querySelector('#zen-media-duration');
|
||||
|
|
@ -106,15 +102,6 @@ class ZenMediaController {
|
|||
this.mediaControlBar.classList.add('playing');
|
||||
}
|
||||
|
||||
// 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})`;
|
||||
|
||||
this.mediaTitle.textContent = metadata.title || '';
|
||||
|
|
|
|||
|
|
@ -1179,8 +1179,6 @@ menupopup > menuitem:is([type='checkbox']) .menu-iconic-left {
|
|||
list-style-image: url('close.svg') !important;
|
||||
}
|
||||
|
||||
#zen-media-controls-toolbar:hover {
|
||||
#zen-media-focus-button {
|
||||
list-style-image: url('screen.svg') !important;
|
||||
}
|
||||
#zen-media-focus-button:hover {
|
||||
list-style-image: url('screen.svg') !important;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="18px" height="18px" viewBox="0 0 18 18"><path d="M4.05,3.677l8.254,4.57c.595,.33,.595,1.177,0,1.506L4.05,14.323c-.582,.322-1.3-.094-1.3-.753V4.43c0-.66,.718-1.075,1.3-.753Z" fill="none" stroke="context-fill" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"></path><line x1="15.25" y1="15.25" x2="15.25" y2="2.75" fill="none" stroke="context-fill" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" data-color="color-2"></line></svg>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="18px" height="18px" viewBox="0 0 18 18"><path d="M12.667,7.59L4.413,3.021c-.511-.283-1.116-.275-1.618,.022-.498,.293-.795,.812-.795,1.387V13.57c0,.575,.297,1.094,.795,1.387,.258,.152,.542,.229,.828,.229,.271,0,.542-.069,.791-.207l8.254-4.57c.514-.285,.833-.825,.833-1.41s-.319-1.125-.833-1.41Z" fill="context-fill"></path><path d="M15.25,2c-.414,0-.75,.336-.75,.75V15.25c0,.414,.336,.75,.75,.75s.75-.336,.75-.75V2.75c0-.414-.336-.75-.75-.75Z" fill="context-fill" data-color="color-2"></path></svg>
|
||||
|
|
|
|||
|
Before Width: | Height: | Size: 571 B After Width: | Height: | Size: 604 B |
|
|
@ -1 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="18px" height="18px" viewBox="0 0 18 18"><path d="M13.95,14.323L5.697,9.753c-.595-.33-.595-1.177,0-1.506L13.95,3.677c.582-.322,1.3,.094,1.3,.753V13.57c0,.66-.718,1.075-1.3,.753Z" fill="none" stroke="context-fill" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"></path><line x1="2.75" y1="2.75" x2="2.75" y2="15.25" fill="none" stroke="context-fill" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" data-color="color-2"></line></svg>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="18px" height="18px" viewBox="0 0 18 18"><path d="M15.205,3.042c-.502-.297-1.107-.305-1.618-.022L5.333,7.59c-.514,.285-.833,.825-.833,1.41s.319,1.125,.833,1.41l8.254,4.57c.249,.138,.52,.207,.791,.206,.285,0,.57-.076,.828-.228,.498-.293,.795-.812,.795-1.387V4.43c0-.575-.297-1.094-.795-1.387Z" fill="context-fill"></path><path d="M2.75,2c-.414,0-.75,.336-.75,.75V15.25c0,.414,.336,.75,.75,.75s.75-.336,.75-.75V2.75c0-.414-.336-.75-.75-.75Z" fill="context-fill" data-color="color-2"></path></svg>
|
||||
|
|
|
|||
|
Before Width: | Height: | Size: 573 B After Width: | Height: | Size: 600 B |
Loading…
Add table
Add a link
Reference in a new issue