fix: exclude role dialog from container show/hide

luwes · Nov 25, 2024 · 0d2016e · 0d2016e
1 parent e74b77c
commit 0d2016e
Show file tree

Hide file tree

Showing 3 changed files with 24 additions and 26 deletions.
diff --git a/src/js/media-chrome-dialog.ts b/src/js/media-chrome-dialog.ts
@@ -23,19 +23,17 @@ function getTemplateHTML(_attrs: Record<string, string>) {
         height: 100%;
         justify-content: center;
         align-items: center;
-        transition: visibility .15s ease-in, opacity .15s ease-in, transform .15s ease-in !important;
+        transition: visibility .15s ease-in, opacity .15s ease-in, transform .15s ease-in;
         visibility: hidden;
-        ${/* Prevent opacity override by media-container */ ''}
-        opacity: 0 !important;
+        opacity: 0;
         transform: translateY(2px) scale(.99);
         pointer-events: none;
       }
 
       :host([open]) {
         visibility: visible;
-        opacity: 1 !important;
-        ${/* Prevent transition override by media-container */ ''}
-        transition: visibility 0s, opacity .2s ease-out, transform .15s ease-out !important;
+        opacity: 1;
+        transition: visibility 0s, opacity .2s ease-out, transform .15s ease-out;
         transform: translateY(0) scale(1);
       }
 

diff --git a/src/js/media-container.ts b/src/js/media-container.ts
@@ -89,11 +89,11 @@ template.innerHTML = /*html*/ `
        */ ''
     }
     :host(:not([${Attributes.AUDIO}])[${
-  Attributes.GESTURES_DISABLED
-}]) ::slotted([slot=gestures-chrome]),
+      Attributes.GESTURES_DISABLED
+    }]) ::slotted([slot=gestures-chrome]),
     :host(:not([${Attributes.AUDIO}])[${
-  Attributes.GESTURES_DISABLED
-}]) media-gesture-receiver[slot=gestures-chrome] {
+      Attributes.GESTURES_DISABLED
+    }]) media-gesture-receiver[slot=gestures-chrome] {
       display: none;
     }
 
@@ -151,7 +151,7 @@ template.innerHTML = /*html*/ `
     ${/* Only add these if auto hide is not disabled */ ''}
     ::slotted(:not([slot=media]):not([slot=poster]):not([${
       Attributes.NO_AUTOHIDE
-    }]):not([hidden])) {
+    }]):not([hidden]):not([role=dialog])) {
       opacity: 1;
       transition: opacity 0.25s;
     }
@@ -160,23 +160,23 @@ template.innerHTML = /*html*/ `
       /* Hide controls when inactive, not paused, not audio and auto hide not disabled */ ''
     }
     :host([${Attributes.USER_INACTIVE}]:not([${
-  MediaUIAttributes.MEDIA_PAUSED
-}]):not([${MediaUIAttributes.MEDIA_IS_AIRPLAYING}]):not([${
-  MediaUIAttributes.MEDIA_IS_CASTING
-}]):not([${
-  Attributes.AUDIO
-}])) ::slotted(:not([slot=media]):not([slot=poster]):not([${
-  Attributes.NO_AUTOHIDE
-}])) {
+      MediaUIAttributes.MEDIA_PAUSED
+    }]):not([${MediaUIAttributes.MEDIA_IS_AIRPLAYING}]):not([${
+      MediaUIAttributes.MEDIA_IS_CASTING
+    }]):not([${
+      Attributes.AUDIO
+    }])) ::slotted(:not([slot=media]):not([slot=poster]):not([${
+      Attributes.NO_AUTOHIDE
+    }]):not([role=dialog])) {
       opacity: 0;
       transition: opacity 1s;
     }
 
     :host([${Attributes.USER_INACTIVE}]:not([${
-  MediaUIAttributes.MEDIA_PAUSED
-}]):not([${MediaUIAttributes.MEDIA_IS_CASTING}]):not([${
-  Attributes.AUDIO
-}])) ::slotted([slot=media]) {
+      MediaUIAttributes.MEDIA_PAUSED
+    }]):not([${MediaUIAttributes.MEDIA_IS_CASTING}]):not([${
+      Attributes.AUDIO
+    }])) ::slotted([slot=media]) {
       cursor: none;
     }
 
@@ -188,8 +188,8 @@ template.innerHTML = /*html*/ `
       /* ::slotted([slot=poster]) doesn't work for slot fallback content so hide parent slot instead */ ''
     }
     :host(:not([${Attributes.AUDIO}])[${
-  MediaUIAttributes.MEDIA_HAS_PLAYED
-}]) slot[name=poster] {
+      MediaUIAttributes.MEDIA_HAS_PLAYED
+    }]) slot[name=poster] {
       display: none;
     }
 

diff --git a/src/js/media-error-dialog.ts b/src/js/media-error-dialog.ts
@@ -81,7 +81,7 @@ class MediaErrorDialog extends MediaChromeDialog {
   attributeChangedCallback(attrName: string, oldValue: string | null, newValue: string | null) {
     super.attributeChangedCallback(attrName, oldValue, newValue);
 
-    // Add this conditional to prevent endless loop by setting the hidden attribute.
+    // Add this conditional to prevent endless loop by setting the open attribute.
     if (!observedAttributes.includes(attrName)) return;
 
     this.open = shouldOpenErrorDialog(this.mediaErrorCode);