fix: upgrade MC + style tweaks (#805)

The listbox options of Gerwig were not the same height when selected vs
not selected.
The new range requires padding values that can be calculated.

packages/mux-player/package.json

@@ -96,7 +96,7 @@
   "dependencies": {
     "@mux/mux-video": "0.17.0",
     "@mux/playback-core": "0.21.0",
-    "media-chrome": "^1.4.5"
+    "media-chrome": "^1.5.0"
   },
   "devDependencies": {
     "@mux/esbuilder": "0.1.0",

packages/mux-player/src/themes/classic/classic.html

@@ -80,7 +80,8 @@
     }
 
     :host(:not([audio])) media-time-range {
-      --media-range-padding: 0;
+      /* Adding px is required here for calc() */
+      --media-range-padding: 0px;
       background: transparent;
       z-index: 10;
       height: 10px;
@@ -215,6 +216,9 @@
     }
 
     media-volume-range {
+      /* Adding px is required here for calc() */
+      --media-range-padding-left: 10px;
+      --media-range-padding-right: 10px;
       width: min(100%, 100px);
     }
 

packages/mux-player/src/themes/gerwig/gerwig.html

@@ -90,9 +90,10 @@
         var(--_accent-color) 25%,
         var(--_accent-color)
       );
-      --media-range-thumb-width: 0;
-      --media-range-thumb-height: 0;
-      --media-range-thumb-transition: all 0.3s;
+      --media-range-thumb-width: 12px;
+      --media-range-thumb-height: 12px;
+      --media-range-thumb-transform: scale(0);
+      --media-range-thumb-transition: transform 0.3s;
       --media-range-thumb-opacity: 1;
       --media-preview-thumbnail-background: var(--_primary-color);
       --media-preview-thumbnail-border: 5px solid var(--_primary-color);
@@ -115,8 +116,7 @@
     }
 
     media-time-range:hover {
-      --media-range-thumb-width: 12px;
-      --media-range-thumb-height: 12px;
+      --media-range-thumb-transform: scale(1);
     }
 
     media-time-range::part(preview-box)::after {
@@ -132,40 +132,33 @@
       transform: translate(-50%, -10px);
     }
 
-    :is(media-captions-listbox, media-rendition-listbox, media-audio-track-listbox, media-playback-rate-listbox)::part(
-        indicator
-      ) {
+    [part~='listbox'] {
+      border-radius: 2px;
+      border: 1px solid rgba(0, 0, 0, 0.1);
+      bottom: calc(100% + 16px);
+      padding: 2.5px 10px;
+    }
+
+    [part~='listbox']::part(indicator) {
       fill: var(--_accent-color);
     }
 
-    :is(media-captions-listbox, media-rendition-listbox, media-audio-track-listbox, media-playback-rate-listbox)::part(
-        option
-      ) {
+    [part~='listbox']::part(option) {
+      box-sizing: border-box;
       display: flex;
       align-items: center;
-      padding: 8px 10px;
+      padding: 6px 10px;
+      min-height: 34px;
     }
 
-    :is(media-captions-listbox, media-rendition-listbox, media-audio-track-listbox, media-playback-rate-listbox)::part(
-        option-selected
-      ) {
+    [part~='listbox']::part(option-selected) {
       font-weight: 700;
     }
 
-    media-captions-listbox,
-    media-rendition-listbox,
-    media-audio-track-listbox,
-    media-playback-rate-listbox {
-      border-radius: 2px;
-      border: 1px solid rgba(0, 0, 0, 0.1);
-      bottom: calc(100% + 16px);
-      padding: 10px;
-    }
-
     media-captions-selectmenu,
     media-rendition-selectmenu,
     media-audio-track-selectmenu,
-    media-playback-rate-listbox {
+    media-playback-rate-listbox[part~='listbox'] {
       --media-listbox-background: var(--_primary-color);
       --media-option-selected-background: transparent;
       --media-option-hover-background: transparent;
@@ -184,23 +177,24 @@
       min-width: 4.4ch;
     }
 
-    media-playback-rate-listbox {
+    media-playback-rate-listbox[part~='listbox'] {
       --media-listbox-layout: row;
       --media-option-selected-background: var(--_accent-color);
       margin-right: 6px;
       padding: 0;
     }
 
-    media-playback-rate-listbox::part(option) {
-      padding: 8px 4px;
+    media-playback-rate-listbox[part~='listbox']::part(option) {
+      padding: 6px 4px;
     }
 
-    media-playback-rate-listbox::part(option-selected) {
+    media-playback-rate-listbox[part~='listbox']::part(option-selected) {
       color: #fff;
     }
 
     :host(:not([audio])) media-time-range {
-      --media-range-padding: 0;
+      /* Adding px is required here for calc() */
+      --media-range-padding: 0px;
       background: transparent;
       z-index: 10;
       height: 10px;
@@ -406,6 +400,8 @@
 
     media-volume-range {
       width: min(100%, 100px);
+      --media-range-padding-left: 10px;
+      --media-range-padding-right: 10px;
       --media-range-thumb-width: 12px;
       --media-range-thumb-height: 12px;
       --media-range-thumb-background: radial-gradient(

yarn.lock

@@ -10672,10 +10672,10 @@ mdn-data@2.0.4:
   resolved "https://registry.yarnpkg.com/mdn-data/-/mdn-data-2.0.4.tgz#699b3c38ac6f1d728091a64650b65d388502fd5b"
   integrity sha512-iV3XNKw06j5Q7mi6h+9vbx23Tv7JkjEVgKHW4pimwyDGWm0OIQntJJ+u1C6mg6mK1EaTv42XQ7w76yuzH7M2cA==
 
-media-chrome@^1.4.5:
-  version "1.4.5"
-  resolved "https://registry.yarnpkg.com/media-chrome/-/media-chrome-1.4.5.tgz#8c21d5bab395697437c61f1acfd2f083cb07c28b"
-  integrity sha512-WRi+4XV4oCx8nwUEhhKxqF78mdQDVTPHgq2g/Mkt8C8lmIaca9WwnahZ0MHx8fy8XAEaiIv1B25555lpvZncJQ==
+media-chrome@^1.5.0:
+  version "1.5.0"
+  resolved "https://registry.yarnpkg.com/media-chrome/-/media-chrome-1.5.0.tgz#fc67f741ca768cd8651944494ac15a4debe153da"
+  integrity sha512-SHNADjnslaSOOETAfphH0kQyMLnkdxjPGxQ/QUlk9AeiHHBZCNSU+7y0sKWHoYBdC0fM3SIgqaS+qb99ObSVdQ==
 
 media-tracks@0.2.3, media-tracks@>=0.2.3:
   version "0.2.3"