feat(mux-player): allow forcibly showing buttons that we usually hide…

… at small sizes (#827)

### Description

This feature adds "opt in" controls to the "gerwig" (default 2023) Mux
Player theme via CSS. This applies to the "extra small" UI (<470px
width). To "opt in", you must set the relevant display CSS variable from
its default (`none`) to `inline-flex`. The most relevant variables are:
- `--time-display`
- `--playback-rate-selectmenu`
- `--pip-button`

While there are "center controls" for play/seek back/seek forward, you
may also "opt in" to showing those in the control bar via:
- `--play-button`
- `--seek-backward-button`
- `--seek-forward-button`

**NOTE:** "Under the hood," the gerwig theme actually relies on the more
specific "bottom" CSS vars (e.g. `--bottom-time-display`). Due to CSS
precedence rules, setting these values will be harder, as the
theme-based CSS selector may have a higher precedence than the
externally defined/"app level" CSS selector. For example, simply setting
the CSS variable via an inline style for `<mux-player>` will have a
lower precedence. Hence, it's recommended to use the more generic CSS
vars.

**NOTE:** I also added some missing CSS vars that I caught while working
on the impl.

### To Test
Use the nextjs MuxPlayer demo page to load a video and configure it to
render "extra small" via the config UI.
1. Confirm that the UI does not show any controls that shouldn't show up
for the extra small UI.
2. Use dev tools to apply the aforementioned CSS variables and
`inline-flex` value as e.g. an inline style for the `<mux-player>`
instance. Confirm the controls now show up.

---------

Co-authored-by: Christian Pillsbury <[email protected]>

packages/mux-player/src/styles.css

@@ -16,6 +16,7 @@
   --media-fullscreen-button-display: var(--fullscreen-button);
   --media-cast-button-display: var(--cast-button);
   --media-playback-rate-button-display: var(--playback-rate-button);
+  --media-playback-rate-selectmenu-display: var(--playback-rate-selectmenu);
   --media-volume-range-display: var(--volume-range);
   --media-time-range-display: var(--time-range);
   --media-time-display-display: var(--time-display);
@@ -73,6 +74,10 @@ media-poster-image:not([src]):not([placeholdersrc]) {
   --media-fullscreen-button-display: var(--fullscreen-button, var(--top-fullscreen-button));
   --media-cast-button-display: var(--cast-button, var(--top-cast-button));
   --media-playback-rate-button-display: var(--playback-rate-button, var(--top-playback-rate-button));
+  --media-playback-rate-selectmenu-display: var(
+    --captions-selectmenu,
+    var(--media-playback-rate-button-display, var(--top-playback-rate-selectmenu))
+  );
   --media-volume-range-display: var(--volume-range, var(--top-volume-range));
   --media-time-range-display: var(--time-range, var(--top-time-range));
   --media-time-display-display: var(--time-display, var(--top-time-display));
@@ -100,6 +105,10 @@ media-poster-image:not([src]):not([placeholdersrc]) {
   --media-fullscreen-button-display: var(--fullscreen-button, var(--center-fullscreen-button));
   --media-cast-button-display: var(--cast-button, var(--center-cast-button));
   --media-playback-rate-button-display: var(--playback-rate-button, var(--center-playback-rate-button));
+  --media-playback-rate-selectmenu-display: var(
+    --playback-rate-selectmenu,
+    var(--media-playback-rate-button-display, var(--center-playback-rate-selectmenu))
+  );
   --media-volume-range-display: var(--volume-range, var(--center-volume-range));
   --media-time-range-display: var(--time-range, var(--center-time-range));
   --media-time-display-display: var(--time-display, var(--center-time-display));
@@ -126,6 +135,10 @@ media-poster-image:not([src]):not([placeholdersrc]) {
   --media-fullscreen-button-display: var(--fullscreen-button, var(--bottom-fullscreen-button));
   --media-cast-button-display: var(--cast-button, var(--bottom-cast-button));
   --media-playback-rate-button-display: var(--playback-rate-button, var(--bottom-playback-rate-button));
+  --media-playback-rate-selectmenu-display: var(
+    --playback-rate-selectmenu,
+    var(--media-playback-rate-button-display, var(--bottom-playback-rate-selectmenu))
+  );
   --media-volume-range-display: var(--volume-range, var(--bottom-volume-range));
   --media-time-range-display: var(--time-range, var(--bottom-time-range));
   --media-time-display-display: var(--time-display, var(--bottom-time-display));

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

@@ -481,6 +481,19 @@
     media-mute-button[mediavolumelevel='off'] .muted {
       opacity: 1;
     }
+
+    /**
+     * Our defaults for these buttons are to hide them at small sizes
+     * users can override this with CSS
+     */
+    :not([breakpointsm]) {
+      --bottom-play-button: none;
+      --bottom-seek-backward-button: none;
+      --bottom-seek-forward-button: none;
+      --bottom-time-display: none;
+      --bottom-playback-rate-selectmenu: none;
+      --bottom-pip-button: none;
+    }
   </style>
 
   <template partial="TitleDisplay">
@@ -915,16 +928,11 @@
         </template>
         {{>TimeRange}}
         <media-control-bar part="control-bar bottom">
-          <template if="breakpointsm">
-            {{>PlayButton}} {{>SeekBackwardButton}} {{>SeekForwardButton}} {{>TimeDisplay}}
-          </template>
-          {{>MuteButton}} {{>VolumeRange}}
+          {{>PlayButton}} {{>SeekBackwardButton}} {{>SeekForwardButton}} {{>TimeDisplay}} {{>MuteButton}}
+          {{>VolumeRange}}
           <div class="spacer"></div>
-          {{>RenditionSelect}}
-          <template if="breakpointsm"> {{>PlaybackRateSelect}} </template>
-          {{>AudioTrackSelect}} {{>CaptionsMenuButton}} {{>AirplayButton}} {{>CastButton}}
-          <template if="breakpointsm"> {{>PipButton}} </template>
-          {{>FullscreenButton}}
+          {{>RenditionSelect}} {{>PlaybackRateSelect}} {{>AudioTrackSelect}} {{>CaptionsMenuButton}} {{>AirplayButton}}
+          {{>CastButton}} {{>PipButton}} {{>FullscreenButton}}
         </media-control-bar>
       </template>
 
@@ -935,15 +943,12 @@
         </media-control-bar>
         <template if="targetlivewindow > 0">{{>TimeRange}}</template>
         <media-control-bar part="control-bar bottom">
-          <template if="breakpointsm">
-            {{>PlayButton}}
-            <template if="targetlivewindow > 0"> {{>SeekBackwardButton}} {{>SeekForwardButton}} </template>
-          </template>
+          {{>PlayButton}}
+          <template if="targetlivewindow > 0">{{>SeekBackwardButton}} {{>SeekForwardButton}}</template>
           {{>MuteButton}} {{>VolumeRange}}
           <div class="spacer"></div>
           {{>RenditionSelect}} {{>AudioTrackSelect}} {{>CaptionsMenuButton}} {{>AirplayButton}} {{>CastButton}}
-          <template if="breakpointsm">{{>PipButton}}</template>
-          {{>FullscreenButton}}
+          {{>PipButton}} {{>FullscreenButton}}
         </media-control-bar>
       </template>
     </template>