feat(player): new accessibility settings menu

Renamed "Font Styles" to "Caption Styles" and put it inside.
vidstack · Feb 22, 2024 · 0b6470f · 0b6470f
1 parent c3e08c5
commit 0b6470f
Show file tree

Hide file tree

Showing 9 changed files with 59 additions and 8 deletions.
diff --git a/packages/react/src/components/layouts/default/font-menu.tsx b/packages/react/src/components/layouts/default/font-menu.tsx
@@ -41,7 +41,7 @@ FontResetContext.displayName = 'FontResetContext';
 
 function DefaultFontSubmenu() {
   const { icons: Icons } = React.useContext(DefaultLayoutContext),
-    label = useDefaultLayoutWord('Font Styles'),
+    label = useDefaultLayoutWord('Caption Styles'),
     $hasCaptions = useMediaState('hasCaptions'),
     resets = React.useMemo<FontReset>(() => ({ all: new Set() }), []);
 

diff --git a/packages/react/src/components/layouts/default/icons.tsx b/packages/react/src/components/layouts/default/icons.tsx
@@ -71,6 +71,9 @@ export const defaultLayoutIcons: DefaultLayoutIcons = {
     Forward: createIcon(seekForwardIconPaths),
   },
   Menu: {
+    Accessibility: createIcon(
+      `<path d="M16 8c-.733 0-1.36-.261-1.883-.783a2.573 2.573 0 0 1-.784-1.884c0-.733.262-1.36.784-1.883A2.575 2.575 0 0 1 16 2.667a2.57 2.57 0 0 1 1.884.784c.523.523.784 1.15.783 1.883 0 .733-.261 1.361-.783 1.884A2.561 2.561 0 0 1 16 8Zm-4 20V12H5.333c-.377 0-.694-.128-.949-.384a1.296 1.296 0 0 1-.384-.95c0-.377.128-.694.384-.949s.572-.383.95-.384h21.333c.377 0 .694.128.95.384s.384.573.383.95c0 .377-.128.694-.384.95a1.285 1.285 0 0 1-.95.383H20v16c0 .378-.128.695-.384.95a1.285 1.285 0 0 1-.95.383c-.377 0-.694-.128-.949-.384a1.297 1.297 0 0 1-.384-.95v-6.666h-2.666V28c0 .378-.128.695-.384.95a1.285 1.285 0 0 1-.95.383c-.377 0-.694-.128-.949-.384A1.297 1.297 0 0 1 12 28Z" fill="currentColor"/>`,
+    ),
     ArrowLeft: createIcon(arrowLeftIconPaths),
     ArrowRight: createIcon(arrowRightIconPaths),
     Audio: createIcon(musicIconPaths),
@@ -152,6 +155,7 @@ export interface DefaultSeekButtonIcons {
 }
 
 export interface DefaultMenuIcons {
+  Accessibility: DefaultLayoutIcon;
   ArrowLeft: DefaultLayoutIcon;
   ArrowRight: DefaultLayoutIcon;
   Audio: DefaultLayoutIcon;

diff --git a/packages/react/src/components/layouts/default/shared-layout.tsx b/packages/react/src/components/layouts/default/shared-layout.tsx
@@ -642,11 +642,11 @@ function DefaultSettingsMenu({ tooltip, placement, portalClass, slots }: Default
       offset={$offset}
     >
       {slot(slots, 'settingsMenuStartItems', null)}
+      <DefaultAccessibilitySubmenu />
       <DefaultAudioSubmenu />
       <DefaultSpeedSubmenu />
       <DefaultQualitySubmenu />
       <DefaultCaptionSubmenu />
-      <DefaultFontSubmenu />
       {slot(slots, 'settingsMenuEndItems', null)}
     </Menu.Content>
   );
@@ -676,6 +676,29 @@ function DefaultSettingsMenu({ tooltip, placement, portalClass, slots }: Default
 DefaultSettingsMenu.displayName = 'DefaultSettingsMenu';
 export { DefaultSettingsMenu };
 
+/* -------------------------------------------------------------------------------------------------
+ * DefaultAccessibilitySubmenu
+ * -----------------------------------------------------------------------------------------------*/
+
+function DefaultAccessibilitySubmenu() {
+  const $hasCaptions = useMediaState('hasCaptions'),
+    label = useDefaultLayoutWord('Accessibility'),
+    { icons: Icons } = useDefaultLayoutContext();
+
+  if (!$hasCaptions) return null;
+
+  return (
+    <Menu.Root className="vds-accessibility-menu vds-menu">
+      <DefaultSubmenuButton label={label} Icon={Icons.Menu.Accessibility} />
+      <Menu.Content className="vds-menu-items">
+        <DefaultFontSubmenu />
+      </Menu.Content>
+    </Menu.Root>
+  );
+}
+
+DefaultAccessibilitySubmenu.displayName = 'DefaultAccessibilitySubmenu';
+
 /* -------------------------------------------------------------------------------------------------
  * DefaultAudioSubmenu
  * -----------------------------------------------------------------------------------------------*/

diff --git a/packages/vidstack/mangle.json b/packages/vidstack/mangle.json
@@ -793,5 +793,6 @@
   "_getARIAValueMax": "Mn",
   "_getARIAValueMin": "Pn",
   "_onAudioGainChange": "Nn",
-  "_watchAudioGain": "On"
+  "_watchAudioGain": "On",
+  "_isSliderActive": "Qn"
 }
diff --git a/packages/vidstack/src/components/layouts/default/translations.ts b/packages/vidstack/src/components/layouts/default/translations.ts
@@ -1,6 +1,7 @@
 import type { ReadSignal } from 'maverick.js';
 
 export type DefaultLayoutWord =
+  | 'Accessibility'
   | 'AirPlay'
   | 'Audio'
   | 'Audio Track'
@@ -29,7 +30,7 @@ export type DefaultLayoutWord =
   | 'Exit PiP'
   | 'Font Family'
   | 'Font Size'
-  | 'Font Styles'
+  | 'Caption Styles'
   | 'Fullscreen'
   | 'Google Cast'
   | 'Green'

diff --git a/packages/vidstack/src/components/ui/sliders/slider-value.ts b/packages/vidstack/src/components/ui/sliders/slider-value.ts
@@ -65,7 +65,7 @@ export class SliderValue extends Component<SliderValueProps> {
         showMs: showMs(),
       });
     } else {
-      return this._format.value?.(value) + '' ?? value.toFixed(2);
+      return (this._format.value?.(value) ?? value.toFixed(2)) + '';
     }
   }
 }

diff --git a/packages/vidstack/src/elements/define/layouts/default/font-menu.ts b/packages/vidstack/src/elements/define/layouts/default/font-menu.ts
@@ -39,7 +39,7 @@ export function DefaultFontMenu() {
     return html`
       <media-menu class="vds-font-menu vds-menu">
         ${renderMenuButton({
-          label: () => i18n(translations, 'Font Styles'),
+          label: () => i18n(translations, 'Caption Styles'),
           icon: 'menu-font',
         })}
         <media-menu-items class="vds-menu-items">

diff --git a/packages/vidstack/src/elements/define/layouts/default/icons.ts b/packages/vidstack/src/elements/define/layouts/default/icons.ts
@@ -25,7 +25,8 @@ import settings from 'media-icons/dist/icons/settings.js';
 import volumeHigh from 'media-icons/dist/icons/volume-high.js';
 import volumeLow from 'media-icons/dist/icons/volume-low.js';
 
-const menuFont = `<path d="M22.6667 10.6667H26.6667V26.6667H28V28H22.6667V26.6667H24V22.6667H18.6667L16.6667 26.6667H18.6667V28H13.3333V26.6667H14.6667L22.6667 10.6667ZM24 12L19.3333 21.3333H24V12ZM6.66667 4H13.3333C14.8133 4 16 5.18667 16 6.66667V21.3333H12V14.6667H8V21.3333H4V6.66667C4 5.18667 5.18667 4 6.66667 4ZM8 6.66667V12H12V6.66667H8Z" fill="currentColor" />`;
+const menuAccessibility = `<path d="M16 8c-.733 0-1.36-.261-1.883-.783a2.573 2.573 0 0 1-.784-1.884c0-.733.262-1.36.784-1.883A2.575 2.575 0 0 1 16 2.667a2.57 2.57 0 0 1 1.884.784c.523.523.784 1.15.783 1.883 0 .733-.261 1.361-.783 1.884A2.561 2.561 0 0 1 16 8Zm-4 20V12H5.333c-.377 0-.694-.128-.949-.384a1.296 1.296 0 0 1-.384-.95c0-.377.128-.694.384-.949s.572-.383.95-.384h21.333c.377 0 .694.128.95.384s.384.573.383.95c0 .377-.128.694-.384.95a1.285 1.285 0 0 1-.95.383H20v16c0 .378-.128.695-.384.95a1.285 1.285 0 0 1-.95.383c-.377 0-.694-.128-.949-.384a1.297 1.297 0 0 1-.384-.95v-6.666h-2.666V28c0 .378-.128.695-.384.95a1.285 1.285 0 0 1-.95.383c-.377 0-.694-.128-.949-.384A1.297 1.297 0 0 1 12 28Z" fill="currentColor"/>`,
+  menuFont = `<path d="M22.6667 10.6667H26.6667V26.6667H28V28H22.6667V26.6667H24V22.6667H18.6667L16.6667 26.6667H18.6667V28H13.3333V26.6667H14.6667L22.6667 10.6667ZM24 12L19.3333 21.3333H24V12ZM6.66667 4H13.3333C14.8133 4 16 5.18667 16 6.66667V21.3333H12V14.6667H8V21.3333H4V6.66667C4 5.18667 5.18667 4 6.66667 4ZM8 6.66667V12H12V6.66667H8Z" fill="currentColor" />`;
 
 export const icons = {
   airplay,
@@ -48,6 +49,7 @@ export const icons = {
   'menu-settings': settings,
   'menu-arrow-left': menuArrowLeft,
   'menu-arrow-right': menuArrowRight,
+  'menu-accessibility': menuAccessibility,
   'menu-audio': menuAudio,
   'menu-speed': menuSpeed,
   'menu-quality': menuQuality,

diff --git a/packages/vidstack/src/elements/define/layouts/default/shared-layout.ts b/packages/vidstack/src/elements/define/layouts/default/shared-layout.ts
@@ -492,11 +492,11 @@ export function DefaultSettingsMenu({
         offset=${$signal($offset)}
       >
         ${[
+          DefaultAccessibilityMenu(),
           DefaultAudioMenu(),
           DefaultSpeedMenu(),
           DefaultQualityMenu(),
           DefaultCaptionsMenu(),
-          DefaultFontMenu(),
         ]}
       </media-menu-items>
     `;
@@ -525,6 +525,26 @@ export function DefaultSettingsMenu({
   });
 }
 
+function DefaultAccessibilityMenu() {
+  return $signal(() => {
+    const { hasCaptions } = useMediaState(),
+      { translations } = useDefaultLayoutContext(),
+      $disabled = computed(() => !hasCaptions());
+
+    if ($disabled()) return null;
+
+    return html`
+      <media-menu class="vds-accessibility-menu vds-menu">
+        ${renderMenuButton({
+          label: () => i18n(translations, 'Accessibility'),
+          icon: 'menu-accessibility',
+        })}
+        <media-menu-items class="vds-menu-items"> ${[DefaultFontMenu()]} </media-menu-items>
+      </media-menu>
+    `;
+  });
+}
+
 function DefaultAudioMenu() {
   return $signal(() => {
     const { noAudioGainSlider, translations } = useDefaultLayoutContext(),