8000 fix: firefox pip activates when clicked through on settings menu (#1074) · muxinc/media-chrome@778b503 · GitHub
[go: up one dir, main page]
More Web Proxy on the site http://driver.im/
Skip to content

Commit 778b503

Browse files
ronalduQualabsronalduQualabs
authored
fix: firefox pip activates when clicked through on settings menu (#1074)
In order to fix to this [issue ](#1069) where in firefox they have a floating toggle for Pip that interrupt the use of media chrome menus. I made a research and we discover that[ Firefox uses their own PiP system](https://support.mozilla.org/en-US/kb/about-picture-picture-firefox) adding a toggle overlaying videos and other elements if they dont have background color to 100% and opacity to 1 this make our menus unclickeable if they are under this toggle. For now this can be partially solved adding a css class for background solid color that only applies into firefox and we created this [ticket](https://bugzilla.mozilla.org/show_bug.cgi?id=1947825) for get a better solution from mozilla them since I also discover Youtube had the same problem but they created an exception that prevent this UX bug for elements with transparencies from 0.7 or higher for them identifying its youtube by the domain. ![Screenshot 2025-02-12 at 4 26 29 PM](https://github.com/user-attachments/assets/8d13fb64-dbd2-4f90-a61d-6e6ef1796a6d)
1 parent d20dd95 commit 778b503

File tree

2 files changed

+33
-12
lines changed

2 files changed

+33
-12
lines changed

‎src/js/menu/media-chrome-menu.ts

Lines changed: 20 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -80,7 +80,8 @@ template.innerHTML = /*html*/ `
8080
var(--media-text-content-height, var(--media-control-height, 24px))
8181
var(--media-font-family, helvetica neue, segoe ui, roboto, arial, sans-serif));
8282
color: var(--media-text-color, var(--media-primary-color, rgb(238 238 238)));
83-
background: var(--media-menu-background, var(--media-control-background, var(--media-secondary-color, rgb(20 20 30 / .8))));
83+
--_menu-bg: rgb(20 20 30 / .8);
84+
background: var(--media-menu-background, var(--media-control-background, var(--media-secondary-color, var(--_menu-bg))));
8485
border-radius: var(--media-menu-border-radius);
8586
border: var(--media-menu-border, none);
8687
display: var(--media-menu-display, inline-flex);
@@ -103,6 +104,12 @@ template.innerHTML = /*html*/ `
103104
position: relative;
104105
bottom: var(--_menu-bottom);
105106
box-sizing: border-box;
107+
}
108+
109+
@-moz-document url-prefix() {
110+
:host{
111+
--_menu-bg: rgb(20 20 30);
112+
}
106113
}
107114
108115
:host([hidden]) {
@@ -463,7 +470,10 @@ class MediaChromeMenu extends globalThis.HTMLElement {
463470
}
464471

465472
formatMenuItemText(text: string, data?: any) {
466-
return (this.constructor as typeof MediaChromeMenu).formatMenuItemText(text, data);
473+
return (this.constructor as typeof MediaChromeMenu).formatMenuItemText(
474+
text,
475+
data
476+
);
467477
}
468478

469479
get anchor() {
@@ -479,7 +489,9 @@ class MediaChromeMenu extends globalThis.HTMLElement {
479489
*/
480490
get anchorElement() {
481491
if (this.anchor) {
482-
return getDocumentOrShadowRoot(this)?.querySelector<HTMLElement>(`#${this.anchor}`);
492+
return getDocumentOrShadowRoot(this)?.querySelector<HTMLElement>(
493+
`#${this.anchor}`
494+
);
483495
}
484496
return null;
485497
}
@@ -640,9 +652,11 @@ class MediaChromeMenu extends globalThis.HTMLElement {
640652
// Determine the real bottom value that is used for the max-height calculation.
641653
// `bottom` could have been overridden externally.
642654
const computedStyle = getComputedStyle(this);
643-
const isBottomCalc = style.getPropertyValue('--_menu-bottom') === computedStyle.bottom;
655+
const isBottomCalc =
656+
style.getPropertyValue('--_menu-bottom') === computedStyle.bottom;
644657
const realBottom = isBottomCalc ? bottom : parseFloat(computedStyle.bottom);
645-
const maxHeight = boundsRect.height - realBottom - parseFloat(computedStyle.marginBottom);
658+
const maxHeight =
659+
boundsRect.height - realBottom - parseFloat(computedStyle.marginBottom);
646660

647661
// Safari required directly setting the element style property instead of
648662
// updating the style node for the styles to be refreshed.
@@ -731,9 +745,7 @@ class MediaChromeMenu extends globalThis.HTMLElement {
731745
) as HTMLSlotElement;
732746
return headerSlot
733747
.assignedElements({ flatten: true })
734-
?.find(
735-
(el) => el.matches('button[part~="back"]')
736-
) as HTMLElement;
748+
?.find((el) => el.matches('button[part~="back"]')) as HTMLElement;
737749
}
738750

739751
handleSelect(event: MouseEvent | KeyboardEvent): void {

‎src/js/menu/media-settings-menu.ts

Lines changed: 13 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -7,15 +7,22 @@ const template: HTMLTemplateElement = document.createElement('template');
77
template.innerHTML = MediaChromeMenu.template.innerHTML + /*html*/`
88
<style>
99
:host {
10+
--_menu-bg: rgb(20 20 30 / .8);
1011
background: var(--media-settings-menu-background,
11-
var(--media-menu-background,
12-
var(--media-control-background,
13-
var(--media-secondary-color, rgb(20 20 30 / .8)))));
12+
var(--media-menu-background,
13+
var(--media-control-background,
14+
var(--media-secondary-color, var(--_menu-bg)))));
1415
min-width: var(--media-settings-menu-min-width, 170px);
1516
border-radius: 2px 2px 0 0;
1617
overflow: hidden;
1718
}
1819
20+
@-moz-document url-prefix() {
21+
:host{
22+
--_menu-bg: rgb(20 20 30);
23+
}
24+
}
25+
1926
:host([role="menu"]) {
2027
${/* Bottom fix setting menu items for animation when the height expands. */ ''}
2128
justify-content: end;
@@ -46,7 +53,9 @@ class MediaSettingsMenu extends MediaChromeMenu {
4653
*/
4754
get anchorElement() {
4855
if (this.anchor !== 'auto') return super.anchorElement;
49-
return getMediaController(this).querySelector<HTMLElement>('media-settings-menu-button');
56+
return getMediaController(this).querySelector<HTMLElement>(
57+
'media-settings-menu-button'
58+
);
5059
}
5160
}
5261

0 commit comments

Comments
 (0)
0