feat: Migrate all attributes to lowercase ('smushedcase'). (#537)

* feat: Migrate all attributes to lowercase ('smushedcase'). * fix: media-time-display wrong setter value. * fix: typo in microvideo attribute name. * fix: Clean up microvideo + example (discuss: camelcase + kebab vs. lowercase). * test: Update tests to reflect new attribute names. * revert nextjs changes. * remove hardcoded declaration file (with react types) (at least for now). * chore: minimal changes to media-playback-rate-button rates for TS fixes. * fix: remove script to copy (no longer present) type declaration file on build. * remove props from media-time-display and clean up media-container css formatting.
muxinc · Apr 18, 2023 · fe9eadc · fe9eadc · vercel · Apr 18, 2023
1 parent 8671210
commit fe9eadc
Show file tree

Hide file tree

Showing 43 changed files with 446 additions and 350 deletions.
diff --git a/examples/vanilla/advanced.html b/examples/vanilla/advanced.html
@@ -16,10 +16,10 @@
         width: 100%;      /* prevents video to expand beyond its container */
       }
 
-      media-airplay-button[media-airplay-unavailable],
-      media-fullscreen-button[media-fullscreen-unavailable],
-      media-volume-range[media-volume-unavailable],
-      media-pip-button[media-pip-unavailable] {
+      media-airplay-button[mediaairplayunavailable],
+      media-fullscreen-button[mediafullscreenunavailable],
+      media-volume-range[mediavolumeunavailable],
+      media-pip-button[mediapipunavailable] {
         display: none;
       }
 
@@ -57,16 +57,16 @@ <h1>Media Chrome Advanced Video Usage Example</h1>
           src="https://image.mux.com/A3VXy02VoUinw01pwyomEO3bHnG4P32xzV7u1j1FSzjNg/thumbnail.jpg"
           placeholder-src="data:image/jpeg;base64,/9j/2wBDABQODxIPDRQSEBIXFRQYHjIhHhwcHj0sLiQySUBMS0dARkVQWnNiUFVtVkVGZIhlbXd7gYKBTmCNl4x9lnN+gXz/2wBDARUXFx4aHjshITt8U0ZTfHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHz/wAARCAAUADADASIAAhEBAxEB/8QAGAAAAwEBAAAAAAAAAAAAAAAAAAECBAP/xAAdEAEBAAEEAwAAAAAAAAAAAAAAARECAxITFCFR/8QAGQEAAwADAAAAAAAAAAAAAAAAAAEDAgQF/8QAGBEBAQEBAQAAAAAAAAAAAAAAAAETERL/2gAMAwEAAhEDEQA/ANeC4ldyI1b2EtIzzrrIqYZLvl5FGkGdbfQzGPvo76WsPxXLlfqbaA5va2iVJADgPELACsD/2Q=="
         ></media-poster-image>
-        <media-loading-indicator slot="centered-chrome" no-auto-hide></media-loading-indicator>
+        <media-loading-indicator slot="centered-chrome" noautohide></media-loading-indicator>
         <media-control-bar>
           <media-play-button></media-play-button>
-          <media-seek-backward-button seek-offset="15"></media-seek-backward-button>
-          <media-seek-forward-button seek-offset="15"></media-seek-forward-button>
+          <media-seek-backward-button seekoffset="30"></media-seek-backward-button>
+          <media-seek-forward-button seekoffset="30"></media-seek-forward-button>
           <media-mute-button></media-mute-button>
           <media-volume-range></media-volume-range>
           <media-time-range></media-time-range>
-          <media-time-display show-duration remaining></media-time-display>
-          <media-captions-button default-showing></media-captions-button>
+          <media-time-display showduration remaining></media-time-display>
+          <media-captions-button defaultshowing></media-captions-button>
           <media-playback-rate-button></media-playback-rate-button>
           <media-pip-button></media-pip-button>
           <media-fullscreen-button></media-fullscreen-button>

diff --git a/examples/vanilla/basic.html b/examples/vanilla/basic.html
@@ -31,7 +31,7 @@ <h1>Media Chrome Basic Audio and Video Usage Example</h1>
         ></audio>
         <media-control-bar>
           <media-play-button></media-play-button>
-          <media-time-display show-duration></media-time-display>
+          <media-time-display showduration></media-time-display>
           <media-time-range></media-time-range>
           <media-playback-rate-button></media-playback-rate-button>
           <media-mute-button></media-mute-button>
@@ -52,7 +52,7 @@ <h1>Media Chrome Basic Audio and Video Usage Example</h1>
           src="https://image.mux.com/A3VXy02VoUinw01pwyomEO3bHnG4P32xzV7u1j1FSzjNg/thumbnail.jpg"
           placeholder-src="data:image/jpeg;base64,/9j/2wBDABQODxIPDRQSEBIXFRQYHjIhHhwcHj0sLiQySUBMS0dARkVQWnNiUFVtVkVGZIhlbXd7gYKBTmCNl4x9lnN+gXz/2wBDARUXFx4aHjshITt8U0ZTfHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHz/wAARCAAUADADASIAAhEBAxEB/8QAGAAAAwEBAAAAAAAAAAAAAAAAAAECBAP/xAAdEAEBAAEEAwAAAAAAAAAAAAAAARECAxITFCFR/8QAGQEAAwADAAAAAAAAAAAAAAAAAAEDAgQF/8QAGBEBAQEBAQAAAAAAAAAAAAAAAAETERL/2gAMAwEAAhEDEQA/ANeC4ldyI1b2EtIzzrrIqYZLvl5FGkGdbfQzGPvo76WsPxXLlfqbaA5va2iVJADgPELACsD/2Q=="
         ></media-poster-image>
-        <media-loading-indicator slot="centered-chrome" no-auto-hide></media-loading-indicator>
+        <media-loading-indicator slot="centered-chrome" noautohide></media-loading-indicator>
         <media-control-bar>
           <media-play-button></media-play-button>
           <media-mute-button></media-mute-button>

diff --git a/examples/vanilla/casting.html b/examples/vanilla/casting.html
@@ -18,15 +18,15 @@
         width: 100%;      /* prevents video to expand beyond its container */
       }
 
-      media-airplay-button[media-airplay-unavailable] {
+      media-airplay-button[mediaairplayunavailable] {
         display: none;
       }
 
-      media-volume-range[media-volume-unavailable] {
+      media-volume-range[mediavolumeunavailable] {
         display: none;
       }
 
-      media-pip-button[media-pip-unavailable] {
+      media-pip-button[mediapipunavailable] {
         display: none;
       }
 
@@ -61,16 +61,16 @@ <h1>Media Chrome with Casting Example</h1>
             src="./vtt/bbb-en-cc.vtt"
           />
         </video>
-        <media-loading-indicator slot="centered-chrome" no-auto-hide></media-loading-indicator>
+        <media-loading-indicator slot="centered-chrome" noautohide></media-loading-indicator>
         <media-control-bar>
           <media-play-button></media-play-button>
-          <media-seek-backward-button seek-offset="15"></media-seek-backward-button>
-          <media-seek-forward-button seek-offset="15"></media-seek-forward-button>
+          <media-seek-backward-button seekoffset="15"></media-seek-backward-button>
+          <media-seek-forward-button seekoffset="15"></media-seek-forward-button>
           <media-mute-button></media-mute-button>
           <media-volume-range></media-volume-range>
           <media-time-range></media-time-range>
-          <media-time-display show-duration remaining></media-time-display>
-          <media-captions-button default-showing></media-captions-button>
+          <media-time-display showduration remaining></media-time-display>
+          <media-captions-button defaultshowing></media-captions-button>
           <media-playback-rate-button></media-playback-rate-button>
           <media-pip-button></media-pip-button>
           <media-airplay-button></media-airplay-button>

diff --git a/examples/vanilla/disabled.html b/examples/vanilla/disabled.html
@@ -16,10 +16,10 @@
         width: 100%;      /* prevents video to expand beyond its container */
       }
 
-      media-airplay-button[media-airplay-unavailable],
-      media-fullscreen-button[media-fullscreen-unavailable],
-      media-volume-range[media-volume-unavailable],
-      media-pip-button[media-pip-unavailable] {
+      media-airplay-button[mediaairplayunavailable],
+      media-fullscreen-button[mediafullscreenunavailable],
+      media-volume-range[mediavolumeunavailable],
+      media-pip-button[mediapipunavailable] {
         display: none;
       }
 
@@ -62,15 +62,15 @@ <h1>Media Chrome Disabled-Controls Video Usage Example</h1>
           src="https://image.mux.com/DS00Spx1CV902MCtPj5WknGlR102V5HFkDe/thumbnail.jpg"
           placeholder-src="data:image/jpeg;base64,/9j/2wBDAAUDBAQEAwUEBAQFBQUGBwwIBwcHBw8LCwkMEQ8SEhEPERETFhwXExQaFRERGCEYGh0dHx8fExciJCIeJBweHx7/2wBDAQUFBQcGBw4ICA4eFBEUHh4eHh4eHh4eHh4eHh4eHh4eHh4eHh4eHh4eHh4eHh4eHh4eHh4eHh4eHh4eHh4eHh7/wAARCAASACADASIAAhEBAxEB/8QAGgABAAIDAQAAAAAAAAAAAAAAAAMEAgUGCP/EACkQAAEDAgMIAgMAAAAAAAAAAAEAAgMEBgUREgcUITFSkZTRQaEiscH/xAAYAQACAwAAAAAAAAAAAAAAAAAABQIDBv/EAB0RAAICAQUAAAAAAAAAAAAAAAABAgMFERUxwfD/2gAMAwEAAhEDEQA/AOZh2P2k/LOhq/Lf7VuPYvZxLQ6iqgXchvrxn9rpY7ojYCBU0IJ5HU3h9rU3NcGJVcVNJh2K4fDPTztlbm5reGRDhnxIzBPwkUc9RJ6dDHaLYojj2HWYeeH1nmSe1OzYXZJ54fW+ZJ7VeWrbO4SPuedpI/IOnB/TgsxJh4yIuGYu+TvAH9UXnafItWJmuTy1oZ0t7JoZ0t7Ii0InGhnS3smhnS3siIA//9k="
         ></media-poster-image>
-        <media-loading-indicator slot="centered-chrome" no-auto-hide></media-loading-indicator>
+        <media-loading-indicator slot="centered-chrome" noautohide></media-loading-indicator>
         <media-control-bar>
           <media-play-button disabled aria-disabled="true"></media-play-button>
-          <media-seek-backward-button seek-offset="15" disabled aria-disabled="true"></media-seek-backward-button>
-          <media-seek-forward-button seek-offset="15" disabled aria-disabled="true"></media-seek-forward-button>
+          <media-seek-backward-button seekoffset="15" disabled aria-disabled="true"></media-seek-backward-button>
+          <media-seek-forward-button seekoffset="15" disabled aria-disabled="true"></media-seek-forward-button>
           <media-mute-button disabled aria-disabled="true"></media-mute-button>
           <media-volume-range disabled aria-disabled="true"></media-volume-range>
           <media-time-range disabled aria-disabled="true"></media-time-range>
-          <media-time-display show-duration remaining disabled aria-disabled="true"></media-time-display>
+          <media-time-display showduration remaining disabled aria-disabled="true"></media-time-display>
           <media-captions-button default-showing disabled aria-disabled="true"></media-captions-button>
           <media-playback-rate-button disabled aria-disabled="true"></media-playback-rate-button>
           <media-pip-button disabled aria-disabled="true"></media-pip-button>

diff --git a/examples/vanilla/media-elements/jwplayer.html b/examples/vanilla/media-elements/jwplayer.html
@@ -16,15 +16,15 @@
         background-color: #000;
       }
 
-      media-airplay-button[media-airplay-unavailable] {
+      media-airplay-button[mediaairplayunavailable] {
         display: none;
       }
 
-      media-volume-range[media-volume-unavailable] {
+      media-volume-range[mediavolumeunavailable] {
         display: none;
       }
 
-      media-pip-button[media-pip-unavailable] {
+      media-pip-button[mediapipunavailable] {
         display: none;
       }
 

diff --git a/examples/vanilla/media-elements/videojs.html b/examples/vanilla/media-elements/videojs.html
@@ -16,15 +16,15 @@
         background-color: #000;
       }
 
-      media-airplay-button[media-airplay-unavailable] {
+      media-airplay-button[mediaairplayunavailable] {
         display: none;
       }
 
-      media-volume-range[media-volume-unavailable] {
+      media-volume-range[mediavolumeunavailable] {
         display: none;
       }
 
-      media-pip-button[media-pip-unavailable] {
+      media-pip-button[mediapipunavailable] {
         display: none;
       }
 

diff --git a/examples/vanilla/media-elements/vimeo.html b/examples/vanilla/media-elements/vimeo.html
@@ -16,15 +16,15 @@
         background-color: #000;
       }
 
-      media-airplay-button[media-airplay-unavailable] {
+      media-airplay-button[mediaairplayunavailable] {
         display: none;
       }
 
-      media-volume-range[media-volume-unavailable] {
+      media-volume-range[mediavolumeunavailable] {
         display: none;
       }
 
-      media-pip-button[media-pip-unavailable] {
+      media-pip-button[mediapipunavailable] {
         display: none;
       }
 

diff --git a/examples/vanilla/media-elements/wistia.html b/examples/vanilla/media-elements/wistia.html
@@ -16,15 +16,15 @@
         background-color: #000;
       }
 
-      media-airplay-button[media-airplay-unavailable] {
+      media-airplay-button[mediaairplayunavailable] {
         display: none;
       }
 
-      media-volume-range[media-volume-unavailable] {
+      media-volume-range[mediavolumeunavailable] {
         display: none;
       }
 
-      media-pip-button[media-pip-unavailable] {
+      media-pip-button[mediapipunavailable] {
         display: none;
       }
 

diff --git a/examples/vanilla/mobile.html b/examples/vanilla/mobile.html
@@ -26,11 +26,11 @@
         margin-top: 20px;
       }
 
-      media-airplay-button[media-airplay-unavailable] {
+      media-airplay-button[mediaairplayunavailable] {
         display: none;
       }
 
-      media-volume-range[media-volume-unavailable] {
+      media-volume-range[mediavolumeunavailable] {
         display: none;
       }
 

diff --git a/examples/vanilla/responsive-attribute.html b/examples/vanilla/responsive-attribute.html
@@ -177,10 +177,10 @@ <h1>Responsive Media Chrome Example</h1>
 /*
  * Hide unavailable buttons.
  */
-media-airplay-button[media-airplay-unavailable],
-media-fullscreen-button[media-fullscreen-unavailable],
-media-volume-range[media-volume-unavailable],
-media-pip-button[media-pip-unavailable] {
+media-airplay-button[mediaairplayunavailable],
+media-fullscreen-button[mediafullscreenunavailable],
+media-volume-range[mediavolumeunavailable],
+media-pip-button[mediapipunavailable] {
   display: none;
 }
 

diff --git a/examples/vanilla/responsive-polyfill.html b/examples/vanilla/responsive-polyfill.html
@@ -89,10 +89,10 @@
         inset: 0;
       }
 
-      media-airplay-button[media-airplay-unavailable],
-      media-fullscreen-button[media-fullscreen-unavailable],
-      media-volume-range[media-volume-unavailable],
-      media-pip-button[media-pip-unavailable] {
+      media-airplay-button[mediaairplayunavailable],
+      media-fullscreen-button[mediafullscreenunavailable],
+      media-volume-range[mediavolumeunavailable],
+      media-pip-button[mediapipunavailable] {
         display: none;
       }
 

diff --git a/examples/vanilla/responsive.html b/examples/vanilla/responsive.html
@@ -201,10 +201,10 @@ <h1>Responsive Media Chrome Example</h1>
 /*
  * Hide unavailable buttons.
  */
-media-airplay-button[media-airplay-unavailable],
-media-fullscreen-button[media-fullscreen-unavailable],
-media-volume-range[media-volume-unavailable],
-media-pip-button[media-pip-unavailable] {
+media-airplay-button[mediaairplayunavailable],
+media-fullscreen-button[mediafullscreenunavailable],
+media-volume-range[mediavolumeunavailable],
+media-pip-button[mediapipunavailable] {
   display: none;
 }
 

diff --git a/examples/vanilla/standalone-controls.html b/examples/vanilla/standalone-controls.html
@@ -46,49 +46,49 @@ <h1>Standalone Controls Example</h1>
       </media-controller>
 
       <h2>Outside the control-bar element</h2>
-      <media-play-button media-controller="controller"></media-play-button>
-      <media-mute-button media-controller="controller"></media-mute-button>
+      <media-play-button mediacontroller="controller"></media-play-button>
+      <media-mute-button mediacontroller="controller"></media-mute-button>
       <media-seek-backward-button
-        media-controller="controller"
+        mediacontroller="controller"
       ></media-seek-backward-button>
       <media-seek-forward-button
-        media-controller="controller"
+        mediacontroller="controller"
       ></media-seek-forward-button>
-      <media-volume-range media-controller="controller"></media-volume-range>
-      <media-time-range media-controller="controller"></media-time-range>
+      <media-volume-range mediacontroller="controller"></media-volume-range>
+      <media-time-range mediacontroller="controller"></media-time-range>
       <!-- It works for "display-only" components, too! -->
       <media-time-display
-        media-controller="controller"
+        mediacontroller="controller"
         remaining
         show-duration
       ></media-time-display>
       <media-captions-button
-        media-controller="controller"
+        mediacontroller="controller"
       ></media-captions-button>
       <media-playback-rate-button
-        media-controller="controller"
+        mediacontroller="controller"
       ></media-playback-rate-button>
-      <media-pip-button media-controller="controller"></media-pip-button>
+      <media-pip-button mediacontroller="controller"></media-pip-button>
       <media-fullscreen-button
-        media-controller="controller"
+        mediacontroller="controller"
       ></media-fullscreen-button>
 
       <h2>Inside the control-bar element</h2>
       <p>
-        Note: You only need to set the <code>media-controller=</code> attribute
+        Note: You only need to set the <code>mediacontroller=</code> attribute
         on the <code>media-control-bar</code>. The media-controller will pass
         the media state details to their child media-chrome elements
         automatically.
       </p>
 
-      <media-control-bar media-controller="controller">
+      <media-control-bar mediacontroller="controller">
         <media-play-button></media-play-button>
         <media-mute-button></media-mute-button>
         <media-seek-backward-button></media-seek-backward-button>
         <media-seek-forward-button></media-seek-forward-button>
         <media-volume-range></media-volume-range>
         <media-time-range></media-time-range>
-        <media-time-display remaining show-duration></media-time-display>
+        <media-time-display remaining showduration></media-time-display>
         <media-captions-button></media-captions-button>
         <media-playback-rate-button></media-playback-rate-button>
         <media-pip-button></media-pip-button>

diff --git a/examples/vanilla/state-change-events-demo.html b/examples/vanilla/state-change-events-demo.html
@@ -20,15 +20,15 @@
         width: 100%;      /* prevents video to expand beyond its container */
       }
 
-      media-airplay-button[media-airplay-unavailable] {
+      media-airplay-button[mediaairplayunavailable] {
         display: none;
       }
 
-      media-volume-range[media-volume-unavailable] {
+      media-volume-range[mediavolumeunavailable] {
         display: none;
       }
 
-      media-pip-button[media-pip-unavailable] {
+      media-pip-button[mediapipunavailable] {
         display: none;
       }
 
@@ -88,22 +88,22 @@ <h1>Media Chrome Advanced Video Usage Example</h1>
             src="https://image.mux.com/DS00Spx1CV902MCtPj5WknGlR102V5HFkDe/thumbnail.jpg"
             placeholder-src="data:image/jpeg;base64,/9j/2wBDAAUDBAQEAwUEBAQFBQUGBwwIBwcHBw8LCwkMEQ8SEhEPERETFhwXExQaFRERGCEYGh0dHx8fExciJCIeJBweHx7/2wBDAQUFBQcGBw4ICA4eFBEUHh4eHh4eHh4eHh4eHh4eHh4eHh4eHh4eHh4eHh4eHh4eHh4eHh4eHh4eHh4eHh4eHh7/wAARCAASACADASIAAhEBAxEB/8QAGgABAAIDAQAAAAAAAAAAAAAAAAMEAgUGCP/EACkQAAEDAgMIAgMAAAAAAAAAAAEAAgMEBgUREgcUITFSkZTRQaEiscH/xAAYAQACAwAAAAAAAAAAAAAAAAAABQIDBv/EAB0RAAICAQUAAAAAAAAAAAAAAAABAgMFERUxwfD/2gAMAwEAAhEDEQA/AOZh2P2k/LOhq/Lf7VuPYvZxLQ6iqgXchvrxn9rpY7ojYCBU0IJ5HU3h9rU3NcGJVcVNJh2K4fDPTztlbm5reGRDhnxIzBPwkUc9RJ6dDHaLYojj2HWYeeH1nmSe1OzYXZJ54fW+ZJ7VeWrbO4SPuedpI/IOnB/TgsxJh4yIuGYu+TvAH9UXnafItWJmuTy1oZ0t7JoZ0t7Ii0InGhnS3smhnS3siIA//9k="
           ></media-poster-image>
-          <div slot="centered-chrome" no-auto-hide>
+          <div slot="centered-chrome" noautohide>
             <media-loading-indicator></media-loading-indicator>
           </div>
           <media-control-bar>
             <media-play-button></media-play-button>
             <media-seek-backward-button
-              seek-offset="15"
+              seekoffset="15"
             ></media-seek-backward-button>
             <media-seek-forward-button
-              seek-offset="15"
+              seekoffset="15"
             ></media-seek-forward-button>
             <media-mute-button></media-mute-button>
             <media-volume-range></media-volume-range>
             <media-time-range></media-time-range>
-            <media-time-display show-duration remaining></media-time-display>
-            <media-captions-button default-showing></media-captions-button>
+            <media-time-display showduration remaining></media-time-display>
+            <media-captions-button defaultshowing></media-captions-button>
             <media-playback-rate-button></media-playback-rate-button>
             <media-pip-button></media-pip-button>
             <media-fullscreen-button></media-fullscreen-button>

diff --git a/examples/vanilla/themes/demuxed-2021-theme.html b/examples/vanilla/themes/demuxed-2021-theme.html
@@ -90,7 +90,7 @@
           display: inline-flex;
         }
 
-        *[slot='centered-chrome'] media-play-button:not([media-paused]) {
+        *[slot='centered-chrome'] media-play-button:not([mediapaused]) {
           display: none;
         }
       }