Fix/audio selectmenu 2023 theme (#757)

* Adds `media-audio-track-selectmenu` to 2023 theme. * Adds 2023 theme and includes some cleanup for MuxPlayer Next.JS demo page.
muxinc · Aug 25, 2023 · 13acc8f · 13acc8f · vercel · Aug 25, 2023
1 parent 71c363c
commit 13acc8f
Show file tree

Hide file tree

Showing 2 changed files with 62 additions and 14 deletions.
diff --git a/examples/nextjs-with-typescript/pages/MuxPlayer.tsx b/examples/nextjs-with-typescript/pages/MuxPlayer.tsx
@@ -4,6 +4,7 @@ import Script from 'next/script';
 import MuxPlayer, { MuxPlayerProps } from "@mux/mux-player-react";
 import "@mux/mux-player/themes/minimal";
 import "@mux/mux-player/themes/microvideo";
+import "@mux/mux-player/themes/2023";
 import { useEffect, useReducer, useRef, useState } from "react";
 import mediaAssetsJSON from "@mux/assets/media-assets.json";
 import { useRouter } from "next/router";
@@ -239,8 +240,11 @@ const ControlCustomizationCSSVars = [
   "--bottom-mute-button",
   "--volume-range",
   "--bottom-volume-range",
+  "--audio-track-selectmenu",
   "--rendition-selectmenu",
+  "--top-audio-track-selectmenu",
   "--top-rendition-selectmenu",
+  "--bottom-audio-track-selectmenu",
   "--bottom-rendition-selectmenu",
   "--playback-rate-button",
   "--bottom-playback-rate-button",
@@ -429,8 +433,8 @@ function MuxPlayerPage({ location }: Props) {
           name="streamType"
           onChange={genericOnChange}
           values={['on-demand', 'live', 'll-live', 'live:dvr', 'll-live:dvr', 'unknown']}
-          formatter={(enumValue) => ['on-demand', 'live', 'unknown'].includes(enumValue) 
-            ? <code>{JSON.stringify(enumValue)}</code> 
+          formatter={(enumValue) => ['on-demand', 'live', 'unknown'].includes(enumValue)
+            ? <code>{JSON.stringify(enumValue)}</code>
             : <><code>{JSON.stringify(enumValue)}</code> (deprecated)</>
           }
         />
@@ -467,11 +471,11 @@ function MuxPlayerPage({ location }: Props) {
           name="audio"
           onChange={genericOnChange}
         />
-        <EnumMultiSelectRenderer
+        <EnumRenderer
           value={state.theme}
           name="theme"
           onChange={genericOnChange}
-          values={['default', 'microvideo', 'minimal']}
+          values={['default', 'microvideo', 'minimal', '2023']}
         />
         <TextRenderer
           value={state.envKey}
@@ -650,7 +654,7 @@ function MuxPlayerPage({ location }: Props) {
           value={getControlCustomizationCSSVars(stylesState)}
           name='--controls'
           label="Display Controls CSS vars (Hiding usage)"
-          onChange={({ ['--controls']: cssVars }) => {
+          onChange={({ ['--controls']: cssVars = [] }) => {
             const nextCSSVars = ControlCustomizationCSSVars.reduce((curCSSVars, cssVarName) => {
               curCSSVars[cssVarName] = cssVars.includes(cssVarName) ? 'none' : undefined;
               return curCSSVars;
@@ -670,7 +674,7 @@ function MuxPlayerPage({ location }: Props) {
           name='hotkeys'
           label="Hot Keys"
           onChange={({ hotkeys }) => {
-            genericOnChange({ hotkeys: hotkeys.join(' ') });
+            genericOnChange({ hotkeys: hotkeys?.join(' ') ?? undefined });
           }}
           values={['noc', 'nof', 'nok', 'nom', 'nospace', 'noarrowleft', 'noarrowright']}
         />

diff --git a/packages/mux-player/src/themes/2023/2023.html b/packages/mux-player/src/themes/2023/2023.html
@@ -129,30 +129,32 @@
       transform: translate(-50%, -10px);
     }
 
-    :is(media-captions-listbox, media-rendition-listbox)::part(indicator) {
+    :is(media-captions-listbox, media-rendition-listbox, media-audio-track-listbox)::part(indicator) {
       fill: var(--_accent-color);
     }
 
-    :is(media-captions-listbox, media-rendition-listbox)::part(option) {
+    :is(media-captions-listbox, media-rendition-listbox, media-audio-track-listbox)::part(option) {
       display: flex;
       align-items: center;
       padding: 8px 10px;
     }
 
-    :is(media-captions-listbox, media-rendition-listbox)::part(option-selected) {
+    :is(media-captions-listbox, media-rendition-listbox, media-audio-track-listbox)::part(option-selected) {
       font-weight: 700;
     }
 
     media-captions-listbox,
-    media-rendition-listbox {
+    media-rendition-listbox,
+    media-audio-track-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-rendition-selectmenu,
+    media-audio-track-selectmenu {
       --media-listbox-background: var(--_primary-color);
       --media-option-selected-background: transparent;
       --media-option-hover-background: transparent;
@@ -732,6 +734,48 @@
     <media-time-range part="bottom time range" disabled="{{disabled}}" aria-disabled="{{disabled}}"></media-time-range>
   </template>
 
+  <template partial="AudioTrackSelect">
+    <media-audio-track-selectmenu
+      part="bottom audio-track selectmenu"
+      disabled="{{disabled}}"
+      aria-disabled="{{disabled}}"
+    >
+      <media-audio-track-button slot="button" part="bottom audio-track button">
+        <svg aria-hidden="true" slot="icon" viewBox="0 0 24 24">
+          <path
+            d="M12 20.5a8.5 8.5 0 1 0 0-17 8.5 8.5 0 0 0 0 17Zm0 1.5C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10-4.477 10-10 10Z"
+          />
+          <path
+            d="M7.25 9.75a.75.75 0 0 1 .75.75v3a.75.75 0 0 1-1.5 0v-3a.75.75 0 0 1 .75-.75Zm3-3a.75.75 0 0 1 .75.75v9a.75.75 0 0 1-1.5 0v-9a.75.75 0 0 1 .75-.75Zm3 2a.75.75 0 0 1 .75.75v5a.75.75 0 0 1-1.5 0v-5a.75.75 0 0 1 .75-.75Zm3-1a.75.75 0 0 1 .75.75v7a.75.75 0 0 1-1.5 0v-7a.75.75 0 0 1 .75-.75Z"
+          />
+        </svg>
+      </media-audio-track-button>
+      <media-audio-track-listbox slot="listbox" part="bottom audio-track 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-audio-track-listbox>
+    </media-audio-track-selectmenu>
+  </template>
+
   <template partial="RenditionSelect">
     <media-rendition-selectmenu part="bottom rendition selectmenu" disabled="{{disabled}}" aria-disabled="{{disabled}}">
       <media-rendition-button slot="button" part="bottom rendition button">
@@ -825,7 +869,7 @@
         - not to show again after user has interacted with this button
           - OR user has interacted with the mute button in the control bar
       -->
-      <!-- 
+      <!--
         There should be a >MuteButton to the left of the "Unmute" text, but a templating bug
         makes it appear even if commented out in the markup, add it back when code is un-commented
       -->
@@ -844,7 +888,7 @@
           </template>
           {{>MuteButton}} {{>VolumeRange}}
           <div class="spacer"></div>
-          {{>RenditionSelect}}
+          {{>AudioTrackSelect}} {{>RenditionSelect}}
           <template if="breakpointsm"> {{>PlaybackRateButton}} </template>
           {{>CaptionsMenuButton}} {{>AirplayButton}} {{>CastButton}}
           <template if="breakpointsm"> {{>PipButton}} </template>
@@ -865,7 +909,7 @@
           </template>
           {{>MuteButton}}
           <div class="spacer"></div>
-          {{>RenditionSelect}} {{>CaptionsMenuButton}} {{>AirplayButton}} {{>CastButton}}
+          {{>AudioTrackSelect}} {{>RenditionSelect}} {{>CaptionsMenuButton}} {{>AirplayButton}} {{>CastButton}}
           <template if="breakpointsm">{{>PipButton}}</template>
           {{>FullscreenButton}}
         </media-control-bar>