mirror of
https://github.com/zen-browser/desktop.git
synced 2025-09-05 19:08:18 +00:00
refactor: streamline media button event handling and remove inline commands
This commit is contained in:
@@ -13,38 +13,29 @@
|
||||
</vbox>
|
||||
<hbox id="zen-media-buttons-hbox">
|
||||
<toolbarbutton id="zen-media-pip-button"
|
||||
class="toolbarbutton-1"
|
||||
oncommand="gZenMediaController.onMediaPip();" />
|
||||
class="toolbarbutton-1" />
|
||||
<toolbarbutton id="zen-media-close-button"
|
||||
class="toolbarbutton-1"
|
||||
oncommand="gZenMediaController.onControllerClose();" />
|
||||
class="toolbarbutton-1" />
|
||||
</hbox>
|
||||
</hbox>
|
||||
<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);"/>
|
||||
value="0" min="0" max="100" step="0.1"/>
|
||||
<label id="zen-media-duration">0:00</label>
|
||||
</hbox>
|
||||
</vbox>
|
||||
<hbox id="zen-media-controls-hbox">
|
||||
<toolbarbutton id="zen-media-focus-button"
|
||||
class="toolbarbutton-1"
|
||||
oncommand="gZenMediaController.onMediaFocus();" />
|
||||
class="toolbarbutton-1" />
|
||||
<toolbarbutton id="zen-media-previoustrack-button"
|
||||
class="toolbarbutton-1"
|
||||
oncommand="gZenMediaController.onMediaPlayPrev();" />
|
||||
class="toolbarbutton-1" />
|
||||
<toolbarbutton id="zen-media-playpause-button"
|
||||
class="toolbarbutton-1"
|
||||
oncommand="gZenMediaController.onMediaToggle();" />
|
||||
class="toolbarbutton-1" />
|
||||
<toolbarbutton id="zen-media-nexttrack-button"
|
||||
class="toolbarbutton-1"
|
||||
oncommand="gZenMediaController.onMediaPlayNext();" />
|
||||
class="toolbarbutton-1" />
|
||||
<toolbarbutton id="zen-media-mute-button"
|
||||
class="toolbarbutton-1"
|
||||
oncommand="gZenMediaController.onMediaMute();" />
|
||||
class="toolbarbutton-1" />
|
||||
</hbox>
|
||||
</vbox>
|
||||
</toolbaritem>
|
||||
|
@@ -39,6 +39,41 @@ class ZenMediaController {
|
||||
this.onDeactivated = this._onDeactivated.bind(this);
|
||||
this.onPipModeChange = this._onPictureInPictureModeChange.bind(this);
|
||||
|
||||
this.#initEventListeners();
|
||||
}
|
||||
|
||||
#initEventListeners() {
|
||||
this.mediaControlBar.addEventListener('command', (event) => {
|
||||
const button = event.target.closest('toolbarbutton');
|
||||
if (!button) return;
|
||||
switch (button.id) {
|
||||
case 'zen-media-pip-button':
|
||||
this.onMediaPip();
|
||||
break;
|
||||
case 'zen-media-close-button':
|
||||
this.onControllerClose();
|
||||
break;
|
||||
case 'zen-media-focus-button':
|
||||
this.onMediaFocus();
|
||||
break;
|
||||
case 'zen-media-mute-button':
|
||||
this.onMediaMute();
|
||||
break;
|
||||
case 'zen-media-previoustrack-button':
|
||||
this.onMediaPlayPrev();
|
||||
break;
|
||||
case 'zen-media-nexttrack-button':
|
||||
this.onMediaPlayNext();
|
||||
break;
|
||||
case 'zen-media-playpause-button':
|
||||
this.onMediaToggle();
|
||||
break;
|
||||
}
|
||||
});
|
||||
|
||||
this.mediaProgressBar.addEventListener('input', this.onMediaSeekDrag.bind(this));
|
||||
this.mediaProgressBar.addEventListener('change', this.onMediaSeekComplete.bind(this));
|
||||
|
||||
window.addEventListener('TabSelect', (event) => {
|
||||
const linkedBrowser = event.target.linkedBrowser;
|
||||
this.switchController();
|
||||
|
@@ -1,5 +1,5 @@
|
||||
diff --git a/browser/components/tabbrowser/content/tabs.js b/browser/components/tabbrowser/content/tabs.js
|
||||
index 0fbdbf3aefc467880e6b0bae2615cb145735cb0f..99a84a1cae6c18f3a80b7490dfc61712b38f6909 100644
|
||||
index 0fbdbf3aefc467880e6b0bae2615cb145735cb0f..0d3919b288afefb05e3ec54ddfa90f001dd4c3b1 100644
|
||||
--- a/browser/components/tabbrowser/content/tabs.js
|
||||
+++ b/browser/components/tabbrowser/content/tabs.js
|
||||
@@ -93,7 +93,7 @@
|
||||
@@ -413,6 +413,15 @@ index 0fbdbf3aefc467880e6b0bae2615cb145735cb0f..99a84a1cae6c18f3a80b7490dfc61712
|
||||
|
||||
if (this.#rtlMode) {
|
||||
tabs.reverse();
|
||||
@@ -2314,7 +2350,7 @@
|
||||
let size = this.verticalMode ? "height" : "width";
|
||||
let translateAxis = this.verticalMode ? "translateY" : "translateX";
|
||||
let scrollDirection = this.verticalMode ? "scrollTop" : "scrollLeft";
|
||||
- let { width: tabWidth, height: tabHeight } = bounds(draggedTab);
|
||||
+ let { width: tabWidth, height: tabHeight } = bounds(draggedTab.group?.hasAttribute("split-view-group") ? draggedTab.group : draggedTab);
|
||||
let translateX = event.screenX - dragData.screenX;
|
||||
let translateY = event.screenY - dragData.screenY;
|
||||
|
||||
@@ -2328,6 +2364,12 @@
|
||||
let lastTab = tabs.at(-1);
|
||||
let lastMovingTab = movingTabs.at(-1);
|
||||
|
Reference in New Issue
Block a user