feat: CSS vars to customize <media-controller> hide transition (#1051)

Related to #874 - Added `--media-control-transition-out` CSS variable to optionally change the transition effect when hiding the `<media-controller>` component. - Added `--media-control-transition-in` CSS variable to optionally change the transition effect when showing the `<media-controller>` component. - Added example of use in `basic-video.html`
muxinc · Jan 28, 2025 · e334971 · e334971
1 parent d7bc6d3
commit e334971
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 2 deletions.
diff --git a/examples/vanilla/basic-video.html b/examples/vanilla/basic-video.html
@@ -19,6 +19,12 @@
       .examples {
         margin-top: 20px;
       }
+
+      /** (optional) add style to change default behavior when showing/hiding controls */
+      media-controller {
+        --media-control-transition-out: opacity 0.125s ease-in-out;
+        --media-control-transition-in: opacity 0.2s ease-in-out;
+      }
     </style>
   </head>
   <body>

diff --git a/src/js/media-container.ts b/src/js/media-container.ts
@@ -153,7 +153,7 @@ template.innerHTML = /*html*/ `
       Attributes.NO_AUTOHIDE
     }]):not([hidden]):not([role=dialog])) {
       opacity: 1;
-      transition: opacity 0.25s;
+      transition: var(--media-control-transition-in, opacity 0.25s);
     }
 
     ${
@@ -169,7 +169,7 @@ template.innerHTML = /*html*/ `
   Attributes.NO_AUTOHIDE
 }]):not([role=dialog])) {
       opacity: 0;
-      transition: opacity 1s;
+      transition: var(--media-control-transition-out, opacity 1s);
     }
 
     :host([${Attributes.USER_INACTIVE}]:not([${
@@ -296,6 +296,8 @@ function getBreakpoints(breakpoints: Record<string, string>, width: number) {
  *
  * @cssprop --media-background-color - `background-color` of container.
  * @cssprop --media-slot-display - `display` of the media slot (default none for [audio] usage).
+ * @cssprop --media-control-transition-out - `transition` used to define the animation effect when hiding the container.
+ * @cssprop --media-control-transition-in - `transition` used to define the animation effect when showing the container.
  */
 class MediaContainer extends globalThis.HTMLElement {
   static get observedAttributes(): string[] {