feat: add quality selector

muxinc · Aug 8, 2023 · c820fab · c820fab
1 parent bb4886c
commit c820fab
Show file tree

Hide file tree

Showing 2 changed files with 71 additions and 65 deletions.
diff --git a/packages/mux-player/src/index.ts b/packages/mux-player/src/index.ts
@@ -1,6 +1,6 @@
 import { globalThis, document } from './polyfills';
 import { MediaController } from 'media-chrome';
-import 'media-chrome/dist/experimental/media-captions-selectmenu.js';
+import 'media-chrome/dist/experimental/index.js';
 import { MediaThemeElement } from 'media-chrome/dist/media-theme-element.js';
 import MuxVideoElement, { MediaError, Attributes as MuxVideoAttributes } from '@mux/mux-video';
 import {

diff --git a/packages/mux-player/src/themes/classic/classic.html b/packages/mux-player/src/themes/classic/classic.html
@@ -19,6 +19,9 @@
       --media-preview-time-border-radius: 0 0 2px 2px;
       --media-preview-time-margin: 0 0 8px;
       --media-preview-time-text-shadow: none;
+      --media-listbox-transform-in: translateY(-8px) scale(1);
+      --media-listbox-transform-out: translateY(-6px) scale(.99);
+      --media-option-hover-background: rgba(255, 255, 255, 0.28);
 
       color: var(--_primary-color);
       display: inline-block;
@@ -59,15 +62,14 @@
       cursor: not-allowed;
     }
 
-    :host(:not([audio])) media-captions-selectmenu::part(listbox) {
-      z-index: 10;
+    :host(:not([audio])) [part~="listbox"] {
+      border-radius: 2px;
     }
 
     media-controller:not([mediasubtitleslist]) media-captions-selectmenu {
       --captions-selectmenu: none;
     }
 
-
     /* 0.433s is the transition duration for VTT Regions.
      * Borrowed here, so the captions don't move too fast. */
     media-controller ::slotted([slot='media']) {
@@ -80,14 +82,6 @@
       --media-webkit-text-track-transition: transform 0.15s ease;
     }
 
-    media-captions-selectmenu {
-      --media-listbox-background: var(--_secondary-color);
-      --media-listbox-selected-background: rgba(255, 255, 255, 0.28);
-      --media-listbox-hover-background: none;
-      --media-listbox-hover-outline: white solid 1px;
-      --media-text-color: white;
-    }
-
     media-volume-range[mediavolumeunavailable] {
       --volume-range: none;
     }
@@ -355,37 +349,28 @@
     </media-mute-button>
   </template>
 
-  <template partial="PipButton">
-    <media-pip-button part="bottom pip button" disabled="{{disabled}}" aria-disabled="{{disabled}}">
-      <svg aria-hidden="true" viewBox="0 0 26 24" slot="enter">
-        <path
-          d="M22 3H4a1 1 0 0 0-1 1v16a1 1 0 0 0 1 1h6.75v-1.25h-6.5V4.25h17.5v6.5H23V4a1 1 0 0 0-1-1Zm0 10h-8a1 1 0 0 0-1 1v6a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1v-6a1 1 0 0 0-1-1Zm-.5 6.5h-7v-5h7v5Z"
-        />
-      </svg>
-      <svg aria-hidden="true" viewBox="0 0 26 24" slot="exit">
-        <path
-          d="M22 3H4a1 1 0 0 0-1 1v16a1 1 0 0 0 1 1h6.75v-1.25h-6.5V4.25h17.5v6.5H23V4a1 1 0 0 0-1-1Zm0 10h-8a1 1 0 0 0-1 1v6a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1v-6a1 1 0 0 0-1-1Zm-.5 6.5h-7v-5h7v5Z"
-        />
-      </svg>
-    </media-pip-button>
+  <template partial="RenditionSelect">
+    <media-rendition-selectmenu part="bottom rendition selectmenu" disabled="{{disabled}}" aria-disabled="{{disabled}}">
+      <media-rendition-button slot="button" part="bottom rendition button">
+        <svg slot="icon" viewBox="0 0 18 24">
+          <path d="M2.25 14.5a2 2 0 1 0 0-4 2 2 0 0 0 0 4Zm6.75 0a2 2 0 1 0 0-4 2 2 0 0 0 0 4Zm6.75 0a2 2 0 1 0 0-4 2 2 0 0 0 0 4Z"/>
+        </svg>
+      </media-rendition-button>
+      <media-rendition-listbox slot="listbox" part="bottom rendition listbox"></media-rendition-listbox>
+    </media-rendition-selectmenu>
   </template>
 
-  <template partial="CaptionsMenuButton">
-    <media-captions-selectmenu
-      part="bottom captions selectmenu"
-      disabled="{{disabled}}"
-      aria-disabled="{{disabled}}"
-    >
-      <svg aria-hidden="true" viewBox="0 0 26 24" slot="on">
-        <path
-          d="M22.832 5.68a2.58 2.58 0 0 0-2.3-2.5c-3.62-.24-11.44-.24-15.06 0a2.58 2.58 0 0 0-2.3 2.5c-.23 4.21-.23 8.43 0 12.64a2.58 2.58 0 0 0 2.3 2.5c3.62.24 11.44.24 15.06 0a2.58 2.58 0 0 0 2.3-2.5c.23-4.21.23-8.43 0-12.64Zm-11.41 10.1a3.63 3.63 0 0 1-1.51.32 4.76 4.76 0 0 1-1.63-.27 4 4 0 0 1-1.28-.83 3.67 3.67 0 0 1-.84-1.26 4.23 4.23 0 0 1-.3-1.63 4.28 4.28 0 0 1 .3-1.64 3.53 3.53 0 0 1 .84-1.21 3.89 3.89 0 0 1 1.29-.8 4.76 4.76 0 0 1 1.63-.27 4.06 4.06 0 0 1 1.35.24c.225.091.44.205.64.34a2.7 2.7 0 0 1 .55.52l-1.27 1a1.79 1.79 0 0 0-.6-.46 2 2 0 0 0-.83-.16 2 2 0 0 0-1.56.69 2.35 2.35 0 0 0-.46.77 2.78 2.78 0 0 0-.16 1c-.009.34.046.68.16 1 .104.283.26.545.46.77.188.21.415.38.67.5a2 2 0 0 0 .84.18 1.87 1.87 0 0 0 .9-.21 1.78 1.78 0 0 0 .65-.6l1.38 1a2.88 2.88 0 0 1-1.22 1.01Zm7.52 0a3.63 3.63 0 0 1-1.51.32 4.76 4.76 0 0 1-1.63-.27 3.89 3.89 0 0 1-1.28-.83 3.55 3.55 0 0 1-.85-1.26 4.23 4.23 0 0 1-.3-1.63 4.28 4.28 0 0 1 .3-1.64 3.43 3.43 0 0 1 .85-1.25 3.75 3.75 0 0 1 1.28-.8 4.76 4.76 0 0 1 1.63-.27 4 4 0 0 1 1.35.24c.225.091.44.205.64.34.21.144.395.32.55.52l-1.27 1a1.79 1.79 0 0 0-.6-.46 2 2 0 0 0-.83-.16 2 2 0 0 0-1.56.69 2.352 2.352 0 0 0-.46.77 3.01 3.01 0 0 0-.16 1c-.003.34.05.678.16 1 .108.282.263.542.46.77.188.21.416.38.67.5a2 2 0 0 0 .84.18 1.87 1.87 0 0 0 .9-.21 1.78 1.78 0 0 0 .65-.6l1.38 1a2.82 2.82 0 0 1-1.21 1.05Z"
-        />
-      </svg>
-      <svg aria-hidden="true" viewBox="0 0 26 24" slot="off">
-        <path
-          d="M22.832 5.68a2.58 2.58 0 0 0-2.3-2.5c-1.81-.12-4.67-.18-7.53-.18-2.86 0-5.72.06-7.53.18a2.58 2.58 0 0 0-2.3 2.5c-.23 4.21-.23 8.43 0 12.64a2.58 2.58 0 0 0 2.3 2.5c1.81.12 4.67.18 7.53.18 2.86 0 5.72-.06 7.53-.18a2.58 2.58 0 0 0 2.3-2.5c.23-4.21.23-8.43 0-12.64Zm-1.49 12.53a1.11 1.11 0 0 1-.91 1.11c-1.67.11-4.45.18-7.43.18-2.98 0-5.76-.07-7.43-.18a1.11 1.11 0 0 1-.91-1.11c-.21-4.137-.21-8.283 0-12.42a1.11 1.11 0 0 1 .91-1.11c1.67-.11 4.43-.18 7.43-.18s5.76.07 7.43.18a1.11 1.11 0 0 1 .91 1.11c.21 4.137.21 8.283 0 12.42ZM10.843 14a1.55 1.55 0 0 1-.76.18 1.57 1.57 0 0 1-.71-.18 1.69 1.69 0 0 1-.57-.42 2.099 2.099 0 0 1-.38-.58 2.47 2.47 0 0 1 0-1.64 2 2 0 0 1 .39-.66 1.73 1.73 0 0 1 .58-.42c.23-.103.479-.158.73-.16.241-.004.48.044.7.14.199.088.373.222.51.39l1.08-.89a2.179 2.179 0 0 0-.47-.44 2.81 2.81 0 0 0-.54-.32 2.91 2.91 0 0 0-.58-.15 2.71 2.71 0 0 0-.56 0 4.08 4.08 0 0 0-1.38.15 3.27 3.27 0 0 0-1.09.67 3.14 3.14 0 0 0-.71 1.06 3.62 3.62 0 0 0-.26 1.39 3.57 3.57 0 0 0 .26 1.38 3 3 0 0 0 .71 1.06c.316.293.687.52 1.09.67.443.16.91.238 1.38.23a3.2 3.2 0 0 0 1.28-.27c.401-.183.747-.47 1-.83l-1.17-.88a1.42 1.42 0 0 1-.53.52Zm6.62 0a1.58 1.58 0 0 1-.76.18 1.54 1.54 0 0 1-.7-.18 1.69 1.69 0 0 1-.57-.42 2.12 2.12 0 0 1-.43-.58 2.29 2.29 0 0 1 .39-2.3 1.84 1.84 0 0 1 1.32-.58c.241-.003.48.045.7.14.199.088.373.222.51.39l1.08-.92a2.43 2.43 0 0 0-.47-.44 3.22 3.22 0 0 0-.53-.29 2.999 2.999 0 0 0-.57-.15 2.87 2.87 0 0 0-.57 0 4.06 4.06 0 0 0-1.36.15 3.17 3.17 0 0 0-1.09.67 3 3 0 0 0-.72 1.06 3.62 3.62 0 0 0-.25 1.39 3.57 3.57 0 0 0 .25 1.38c.16.402.405.764.72 1.06a3.17 3.17 0 0 0 1.09.67c.44.16.904.237 1.37.23.441 0 .877-.092 1.28-.27a2.45 2.45 0 0 0 1-.83l-1.15-.85a1.49 1.49 0 0 1-.54.49Z"
-        />
-      </svg>
+  <template partial="CaptionsSelect">
+    <media-captions-selectmenu part="bottom captions selectmenu" disabled="{{disabled}}" aria-disabled="{{disabled}}">
+      <media-captions-button slot="button" part="bottom captions button">
+        <svg aria-hidden="true" viewBox="0 0 26 24" slot="on">
+          <path d="M22.832 5.68a2.58 2.58 0 0 0-2.3-2.5c-3.62-.24-11.44-.24-15.06 0a2.58 2.58 0 0 0-2.3 2.5c-.23 4.21-.23 8.43 0 12.64a2.58 2.58 0 0 0 2.3 2.5c3.62.24 11.44.24 15.06 0a2.58 2.58 0 0 0 2.3-2.5c.23-4.21.23-8.43 0-12.64Zm-11.41 10.1a3.63 3.63 0 0 1-1.51.32 4.76 4.76 0 0 1-1.63-.27 4 4 0 0 1-1.28-.83 3.67 3.67 0 0 1-.84-1.26 4.23 4.23 0 0 1-.3-1.63 4.28 4.28 0 0 1 .3-1.64 3.53 3.53 0 0 1 .84-1.21 3.89 3.89 0 0 1 1.29-.8 4.76 4.76 0 0 1 1.63-.27 4.06 4.06 0 0 1 1.35.24c.225.091.44.205.64.34a2.7 2.7 0 0 1 .55.52l-1.27 1a1.79 1.79 0 0 0-.6-.46 2 2 0 0 0-.83-.16 2 2 0 0 0-1.56.69 2.35 2.35 0 0 0-.46.77 2.78 2.78 0 0 0-.16 1c-.009.34.046.68.16 1 .104.283.26.545.46.77.188.21.415.38.67.5a2 2 0 0 0 .84.18 1.87 1.87 0 0 0 .9-.21 1.78 1.78 0 0 0 .65-.6l1.38 1a2.88 2.88 0 0 1-1.22 1.01Zm7.52 0a3.63 3.63 0 0 1-1.51.32 4.76 4.76 0 0 1-1.63-.27 3.89 3.89 0 0 1-1.28-.83 3.55 3.55 0 0 1-.85-1.26 4.23 4.23 0 0 1-.3-1.63 4.28 4.28 0 0 1 .3-1.64 3.43 3.43 0 0 1 .85-1.25 3.75 3.75 0 0 1 1.28-.8 4.76 4.76 0 0 1 1.63-.27 4 4 0 0 1 1.35.24c.225.091.44.205.64.34.21.144.395.32.55.52l-1.27 1a1.79 1.79 0 0 0-.6-.46 2 2 0 0 0-.83-.16 2 2 0 0 0-1.56.69 2.352 2.352 0 0 0-.46.77 3.01 3.01 0 0 0-.16 1c-.003.34.05.678.16 1 .108.282.263.542.46.77.188.21.416.38.67.5a2 2 0 0 0 .84.18 1.87 1.87 0 0 0 .9-.21 1.78 1.78 0 0 0 .65-.6l1.38 1a2.82 2.82 0 0 1-1.21 1.05Z"/>
+        </svg>
+        <svg aria-hidden="true" viewBox="0 0 26 24" slot="off">
+          <path d="M22.832 5.68a2.58 2.58 0 0 0-2.3-2.5c-1.81-.12-4.67-.18-7.53-.18-2.86 0-5.72.06-7.53.18a2.58 2.58 0 0 0-2.3 2.5c-.23 4.21-.23 8.43 0 12.64a2.58 2.58 0 0 0 2.3 2.5c1.81.12 4.67.18 7.53.18 2.86 0 5.72-.06 7.53-.18a2.58 2.58 0 0 0 2.3-2.5c.23-4.21.23-8.43 0-12.64Zm-1.49 12.53a1.11 1.11 0 0 1-.91 1.11c-1.67.11-4.45.18-7.43.18-2.98 0-5.76-.07-7.43-.18a1.11 1.11 0 0 1-.91-1.11c-.21-4.137-.21-8.283 0-12.42a1.11 1.11 0 0 1 .91-1.11c1.67-.11 4.43-.18 7.43-.18s5.76.07 7.43.18a1.11 1.11 0 0 1 .91 1.11c.21 4.137.21 8.283 0 12.42ZM10.843 14a1.55 1.55 0 0 1-.76.18 1.57 1.57 0 0 1-.71-.18 1.69 1.69 0 0 1-.57-.42 2.099 2.099 0 0 1-.38-.58 2.47 2.47 0 0 1 0-1.64 2 2 0 0 1 .39-.66 1.73 1.73 0 0 1 .58-.42c.23-.103.479-.158.73-.16.241-.004.48.044.7.14.199.088.373.222.51.39l1.08-.89a2.179 2.179 0 0 0-.47-.44 2.81 2.81 0 0 0-.54-.32 2.91 2.91 0 0 0-.58-.15 2.71 2.71 0 0 0-.56 0 4.08 4.08 0 0 0-1.38.15 3.27 3.27 0 0 0-1.09.67 3.14 3.14 0 0 0-.71 1.06 3.62 3.62 0 0 0-.26 1.39 3.57 3.57 0 0 0 .26 1.38 3 3 0 0 0 .71 1.06c.316.293.687.52 1.09.67.443.16.91.238 1.38.23a3.2 3.2 0 0 0 1.28-.27c.401-.183.747-.47 1-.83l-1.17-.88a1.42 1.42 0 0 1-.53.52Zm6.62 0a1.58 1.58 0 0 1-.76.18 1.54 1.54 0 0 1-.7-.18 1.69 1.69 0 0 1-.57-.42 2.12 2.12 0 0 1-.43-.58 2.29 2.29 0 0 1 .39-2.3 1.84 1.84 0 0 1 1.32-.58c.241-.003.48.045.7.14.199.088.373.222.51.39l1.08-.92a2.43 2.43 0 0 0-.47-.44 3.22 3.22 0 0 0-.53-.29 2.999 2.999 0 0 0-.57-.15 2.87 2.87 0 0 0-.57 0 4.06 4.06 0 0 0-1.36.15 3.17 3.17 0 0 0-1.09.67 3 3 0 0 0-.72 1.06 3.62 3.62 0 0 0-.25 1.39 3.57 3.57 0 0 0 .25 1.38c.16.402.405.764.72 1.06a3.17 3.17 0 0 0 1.09.67c.44.16.904.237 1.37.23.441 0 .877-.092 1.28-.27a2.45 2.45 0 0 0 1-.83l-1.15-.85a1.49 1.49 0 0 1-.54.49Z"/>
+        </svg>
+      </media-captions-button>
+      <media-captions-listbox slot="listbox" part="bottom captions listbox"></media-captions-listbox>
     </media-captions-selectmenu>
   </template>
 
@@ -402,21 +387,6 @@
     </media-airplay-button>
   </template>
 
-  <template partial="FullscreenButton">
-    <media-fullscreen-button part="bottom fullscreen button" disabled="{{disabled}}" aria-disabled="{{disabled}}">
-      <svg aria-hidden="true" viewBox="0 0 24 24" slot="enter">
-        <path
-          d="M20.25 14.5a.76.76 0 0 0-.75.75v4.25h-4.25a.75.75 0 1 0 0 1.5h5a.76.76 0 0 0 .75-.75v-5a.76.76 0 0 0-.75-.75Zm0-11.5h-5a.76.76 0 0 0-.75.75.76.76 0 0 0 .75.75h4.25v4.25a.75.75 0 1 0 1.5 0v-5a.76.76 0 0 0-.75-.75ZM8.75 19.5H4.5v-4.25a.76.76 0 0 0-.75-.75.76.76 0 0 0-.75.75v5a.76.76 0 0 0 .75.75h5a.75.75 0 1 0 0-1.5Zm0-16.5h-5a.76.76 0 0 0-.75.75v5a.76.76 0 0 0 .75.75.76.76 0 0 0 .75-.75V4.5h4.25a.76.76 0 0 0 .75-.75.76.76 0 0 0-.75-.75Z"
-        />
-      </svg>
-      <svg aria-hidden="true" viewBox="0 0 24 24" slot="exit">
-        <path
-          d="M20.25 14.5h-5a.76.76 0 0 0-.75.75v5a.75.75 0 1 0 1.5 0V16h4.25a.75.75 0 1 0 0-1.5Zm-5-5h5a.75.75 0 1 0 0-1.5H16V3.75a.75.75 0 1 0-1.5 0v5a.76.76 0 0 0 .75.75Zm-6.5 5h-5a.75.75 0 1 0 0 1.5H8v4.25a.75.75 0 1 0 1.5 0v-5a.76.76 0 0 0-.75-.75Zm0-11.5a.76.76 0 0 0-.75.75V8H3.75a.75.75 0 0 0 0 1.5h5a.76.76 0 0 0 .75-.75v-5A.76.76 0 0 0 8.75 3Z"
-        />
-      </svg>
-    </media-fullscreen-button>
-  </template>
-
   <template partial="CastButton">
     <media-cast-button part="bottom cast button" disabled="{{disabled}}" aria-disabled="{{disabled}}">
       <svg aria-hidden="true" viewBox="0 0 26 24" slot="enter">
@@ -437,6 +407,36 @@
     </media-cast-button>
   </template>
 
+  <template partial="PipButton">
+    <media-pip-button part="bottom pip button" disabled="{{disabled}}" aria-disabled="{{disabled}}">
+      <svg aria-hidden="true" viewBox="0 0 26 24" slot="enter">
+        <path
+          d="M22 3H4a1 1 0 0 0-1 1v16a1 1 0 0 0 1 1h6.75v-1.25h-6.5V4.25h17.5v6.5H23V4a1 1 0 0 0-1-1Zm0 10h-8a1 1 0 0 0-1 1v6a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1v-6a1 1 0 0 0-1-1Zm-.5 6.5h-7v-5h7v5Z"
+        />
+      </svg>
+      <svg aria-hidden="true" viewBox="0 0 26 24" slot="exit">
+        <path
+          d="M22 3H4a1 1 0 0 0-1 1v16a1 1 0 0 0 1 1h6.75v-1.25h-6.5V4.25h17.5v6.5H23V4a1 1 0 0 0-1-1Zm0 10h-8a1 1 0 0 0-1 1v6a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1v-6a1 1 0 0 0-1-1Zm-.5 6.5h-7v-5h7v5Z"
+        />
+      </svg>
+    </media-pip-button>
+  </template>
+
+  <template partial="FullscreenButton">
+    <media-fullscreen-button part="bottom fullscreen button" disabled="{{disabled}}" aria-disabled="{{disabled}}">
+      <svg aria-hidden="true" viewBox="0 0 24 24" slot="enter">
+        <path
+          d="M20.25 14.5a.76.76 0 0 0-.75.75v4.25h-4.25a.75.75 0 1 0 0 1.5h5a.76.76 0 0 0 .75-.75v-5a.76.76 0 0 0-.75-.75Zm0-11.5h-5a.76.76 0 0 0-.75.75.76.76 0 0 0 .75.75h4.25v4.25a.75.75 0 1 0 1.5 0v-5a.76.76 0 0 0-.75-.75ZM8.75 19.5H4.5v-4.25a.76.76 0 0 0-.75-.75.76.76 0 0 0-.75.75v5a.76.76 0 0 0 .75.75h5a.75.75 0 1 0 0-1.5Zm0-16.5h-5a.76.76 0 0 0-.75.75v5a.76.76 0 0 0 .75.75.76.76 0 0 0 .75-.75V4.5h4.25a.76.76 0 0 0 .75-.75.76.76 0 0 0-.75-.75Z"
+        />
+      </svg>
+      <svg aria-hidden="true" viewBox="0 0 24 24" slot="exit">
+        <path
+          d="M20.25 14.5h-5a.76.76 0 0 0-.75.75v5a.75.75 0 1 0 1.5 0V16h4.25a.75.75 0 1 0 0-1.5Zm-5-5h5a.75.75 0 1 0 0-1.5H16V3.75a.75.75 0 1 0-1.5 0v5a.76.76 0 0 0 .75.75Zm-6.5 5h-5a.75.75 0 1 0 0 1.5H8v4.25a.75.75 0 1 0 1.5 0v-5a.76.76 0 0 0-.75-.75Zm0-11.5a.76.76 0 0 0-.75.75V8H3.75a.75.75 0 0 0 0 1.5h5a.76.76 0 0 0 .75-.75v-5A.76.76 0 0 0 8.75 3Z"
+        />
+      </svg>
+    </media-fullscreen-button>
+  </template>
+
   <template partial="LiveButton">
     <media-live-button
       part="{{section ?? 'top'}} live button"
@@ -566,7 +566,7 @@
             {{>PlayButton}}
             {{>MuteButton}}
             <div class="spacer"></div>
-            {{>CaptionsMenuButton}}
+            {{>CaptionsSelect}}
             {{>FullscreenButton}}
           </media-control-bar>
         </template>
@@ -588,8 +588,9 @@
               {{>MuteButton}}
               {{>VolumeRange}}
               <div class="spacer"></div>
+              {{>RenditionSelect}}
               {{>PlaybackRateButton}}
-              {{>CaptionsMenuButton}}
+              {{>CaptionsSelect}}
               {{>AirplayButton}}
               {{>CastButton}}
               {{>PipButton}}
@@ -614,8 +615,9 @@
             {{>MuteButton}}
             {{>VolumeRange}}
             <div class="spacer"></div>
+            {{>RenditionSelect}}
             {{>PlaybackRateButton}}
-            {{>CaptionsMenuButton}}
+            {{>CaptionsSelect}}
             {{>AirplayButton}}
             {{>CastButton}}
             {{>PipButton}}
@@ -637,7 +639,7 @@
               {{>PlayButton}}
               {{>MuteButton}}
               <div class="spacer"></div>
-              {{>CaptionsMenuButton}}
+              {{>CaptionsSelect}}
               {{>FullscreenButton}}
             </media-control-bar>
           </template>
@@ -656,7 +658,8 @@
                 {{>MuteButton}}
                 {{>VolumeRange}}
                 <div class="spacer"></div>
-                {{>CaptionsMenuButton}}
+                {{>RenditionSelect}}
+                {{>CaptionsSelect}}
                 {{>AirplayButton}}
                 {{>CastButton}}
                 {{>PipButton}}
@@ -678,7 +681,8 @@
               {{>MuteButton}}
               {{>VolumeRange}}
               <div class="spacer"></div>
-              {{>CaptionsMenuButton}}
+              {{>RenditionSelect}}
+              {{>CaptionsSelect}}
               {{>AirplayButton}}
               {{>CastButton}}
               {{>PipButton}}
@@ -698,7 +702,7 @@
               {{>PlayButton}}
               {{>MuteButton}}
               <div class="spacer"></div>
-              {{>CaptionsMenuButton}}
+              {{>CaptionsSelect}}
               {{>FullscreenButton}}
             </media-control-bar>
           </template>
@@ -720,7 +724,8 @@
                 {{>MuteButton}}
                 {{>VolumeRange}}
                 <div class="spacer"></div>
-                {{>CaptionsMenuButton}}
+                {{>RenditionSelect}}
+                {{>CaptionsSelect}}
                 {{>AirplayButton}}
                 {{>CastButton}}
                 {{>PipButton}}
@@ -745,7 +750,8 @@
               {{>MuteButton}}
               {{>VolumeRange}}
               <div class="spacer"></div>
-              {{>CaptionsMenuButton}}
+              {{>RenditionSelect}}
+              {{>CaptionsSelect}}
               {{>AirplayButton}}
               {{>CastButton}}
               {{>PipButton}}