fix: upgrade media-chrome 1.4.5 + rate row style (#803)

![SCR-20231027-nq0](https://github.com/muxinc/elements/assets/360826/c6145588-2ae8-4606-8e2c-f5cb86a76f00)

Author: luwes

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.3"
+    "media-chrome": "^1.4.5"
   },
   "devDependencies": {
     "@mux/esbuilder": "0.1.0",

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

@@ -179,6 +179,27 @@
       --media-control-height: 16px;
     }
 
+    media-playback-rate-button {
+      --media-control-padding: 6px 3px;
+      min-width: 4.4ch;
+    }
+
+    media-playback-rate-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(option-selected) {
+      color: #fff;
+      opacity: 0.6;
+    }
+
     :host(:not([audio])) media-time-range {
       --media-range-padding: 0;
       background: transparent;
@@ -728,29 +749,7 @@
       aria-disabled="{{disabled}}"
     >
       <media-playback-rate-button slot="button" part="bottom playback-rate button"></media-playback-rate-button>
-      <media-playback-rate-listbox slot="listbox" part="bottom playback-rate listbox">
-        <div slot="select-indicator">
-          <style>
-            .listbox-indicator {
-              position: relative;
-              top: 1px;
-              width: 0.9em;
-              height: auto;
-              fill: var(--_accent-color);
-            }
-
-            [aria-selected='false'] .listbox-indicator {
-              display: none;
-            }
-          </style>
-          <svg viewBox="0 0 14 18" class="listbox-indicator">
-            <path
-              d="M12.252 3.48c-.115.033-.301.161-.425.291-.059.063-1.407 1.815-2.995 3.894s-2.897 3.79-2.908 3.802c-.013.014-.661-.616-1.672-1.624-.908-.905-1.702-1.681-1.765-1.723-.401-.27-.783-.211-1.176.183a1.285 1.285 0 0 0-.261.342.582.582 0 0 0-.082.35c0 .165.01.205.08.35.075.153.213.296 2.182 2.271 1.156 1.159 2.17 2.159 2.253 2.222.189.143.338.196.539.194.203-.003.412-.104.618-.299.205-.193 6.7-8.693 6.804-8.903a.716.716 0 0 0 .085-.345c.01-.179.005-.203-.062-.339-.124-.252-.45-.531-.746-.639a.784.784 0 0 0-.469-.027"
-              fill-rule="evenodd"
-            />
-          </svg>
-        </div>
-      </media-playback-rate-listbox>
+      <media-playback-rate-listbox slot="listbox" part="bottom playback-rate listbox"></media-playback-rate-listbox>
     </media-playback-rate-selectmenu>
   </template>
 

yarn.lock

@@ -10672,10 +10672,10 @@ [email protected]:
   resolved "https://registry.yarnpkg.com/mdn-data/-/mdn-data-2.0.4.tgz#699b3c38ac6f1d728091a64650b65d388502fd5b"
   integrity sha512-iV3XNKw06j5Q7mi6h+9vbx23Tv7JkjEVgKHW4pimwyDGWm0OIQntJJ+u1C6mg6mK1EaTv42XQ7w76yuzH7M2cA==
 
-media-chrome@^1.4.3:
-  version "1.4.3"
-  resolved "https://registry.yarnpkg.com/media-chrome/-/media-chrome-1.4.3.tgz#133564991d33eb3a5d9eeaa2d3208250392e5590"
-  integrity sha512-VpFqCOu2FLULW6TX4sluo44AolJXryHxr85UBdO+IuOltgYPuf7Lgp1F3OqJeRIeO8874d5mri/6xmI22CO9yA==
+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==
 
 [email protected], media-tracks@>=0.2.3:
   version "0.2.3"