enhance media controls: improve animations and adjust layout properties

This commit is contained in:
mr. m
2025-03-14 12:23:24 +01:00
parent c728bae55a
commit 4476c802d5
4 changed files with 352 additions and 1958 deletions

View File

@@ -31,14 +31,41 @@ class ZenMediaController {
window.addEventListener('TabSelect', (event) => {
if (this._currentBrowser) {
if (event.target.linkedBrowser.browserId === this._currentBrowser.browserId) {
this.mediaControlBar.setAttribute('hidden', 'true');
gZenUIManager.motion
.animate(this.mediaControlBar, {
opacity: [1, 0],
y: [0, 10],
})
.then(() => {
this.mediaControlBar.setAttribute('hidden', 'true');
});
} else {
this.mediaControlBar.removeAttribute('hidden');
window.requestAnimationFrame(() => {
this.mediaControlBar.style.height =
this.mediaControlBar.querySelector('toolbaritem').getBoundingClientRect().height + 'px';
gZenUIManager.motion.animate(
this.mediaControlBar,
{
opacity: [0, 1],
y: [10, 0],
},
{}
);
});
}
gZenUIManager.updateTabsToolbar();
}
});
window.addEventListener('TabClose', (event) => {
if (this._currentBrowser) {
if (event.target.linkedBrowser.browserId === this._currentBrowser.browserId) {
this.deinitMediaController(this._currentMediaController);
}
}
});
}
/**