mirrors/desktop
1
0
Fork 0
mirror of https://github.com/zen-browser/desktop.git synced 2025-10-06 09:56:36 +00:00
Code Issues Packages Projects Releases Wiki Activity

refactor media controls animations and styles; add marquee effect for media title

Browse Source
This commit is contained in:
mr. M
2025-03-15 10:24:44 +01:00
parent d1098af7f0
commit e780eee207
4 changed files with 63 additions and 39 deletions
Download Patch File Download Diff File Expand all files Collapse all files

29
src/browser/base/zen-components/ZenMediaController.mjs
View File

@@ -34,10 +34,16 @@ class ZenMediaController {
if (this._currentBrowser) {
if (event.target.linkedBrowser.browserId === this._currentBrowser.browserId) {
gZenUIManager.motion
.animate(this.mediaControlBar, {
opacity: [1, 0],
y: [0, 10],
})
.animate(
this.mediaControlBar,
{
opacity: [1, 0],
y: [0, 10],
},
{
duration: 0.1,
}
)
.then(() => {
this.mediaControlBar.setAttribute('hidden', 'true');
});
@@ -46,6 +52,7 @@ class ZenMediaController {
window.requestAnimationFrame(() => {
this.mediaControlBar.style.height =
this.mediaControlBar.querySelector('toolbaritem').getBoundingClientRect().height + 'px';
this.mediaControlBar.style.opacity = 0;
gZenUIManager.motion.animate(
this.mediaControlBar,
{
@@ -92,10 +99,16 @@ class ZenMediaController {
}
gZenUIManager.motion
.animate(this.mediaControlBar, {
opacity: [1, 0],
y: [0, 10],
})
.animate(
this.mediaControlBar,
{
opacity: [1, 0],
y: [0, 10],
},
{
duration: 0.1,
}
)
.then(() => {
this.mediaControlBar.setAttribute('hidden', 'true');
gZenUIManager.updateTabsToolbar();