feat(vidstack): redesign default layout settings menu

packages/react/src/components/layouts/default/icons.tsx

@@ -20,6 +20,7 @@ import enterFullscreenIconPaths from 'media-icons/dist/icons/fullscreen.js';
 import musicIconPaths from 'media-icons/dist/icons/music.js';
 import muteIconPaths from 'media-icons/dist/icons/mute.js';
 import noEyeIconPaths from 'media-icons/dist/icons/no-eye.js';
+import odometerIconPaths from 'media-icons/dist/icons/odometer.js';
 import pauseIconPaths from 'media-icons/dist/icons/pause.js';
 import exitPIPIconPaths from 'media-icons/dist/icons/picture-in-picture-exit.js';
 import enterPIPIconPaths from 'media-icons/dist/icons/picture-in-picture.js';
@@ -28,6 +29,7 @@ import playbackIconPaths from 'media-icons/dist/icons/playback-speed-circle.js';
 import replayIconPaths from 'media-icons/dist/icons/replay.js';
 import seekBackwardIconPaths from 'media-icons/dist/icons/seek-backward-10.js';
 import seekForwardIconPaths from 'media-icons/dist/icons/seek-forward-10.js';
+import settingsMenuIconPaths from 'media-icons/dist/icons/settings-menu.js';
 import settingsIconPaths from 'media-icons/dist/icons/settings.js';
 import volumeHighIconPaths from 'media-icons/dist/icons/volume-high.js';
 import volumeLowIconPaths from 'media-icons/dist/icons/volume-low.js';
@@ -90,10 +92,10 @@ export const defaultLayoutIcons: DefaultLayoutIcons = {
     Settings: createIcon(settingsIconPaths),
     AudioBoostUp: createIcon(volumeHighIconPaths),
     AudioBoostDown: createIcon(volumeLowIconPaths),
-    SpeedUp: createIcon(fastForwardIconPaths),
-    SpeedDown: createIcon(fastBackwardIconPaths),
-    QualityUp: createIcon(arrowUpIconPaths),
-    QualityDown: createIcon(arrowDownIconPaths),
+    SpeedUp: createIcon(odometerIconPaths),
+    SpeedDown: createIcon(odometerIconPaths),
+    QualityUp: createIcon(settingsMenuIconPaths),
+    QualityDown: createIcon(settingsMenuIconPaths),
     FontSizeUp: createIcon(arrowUpIconPaths),
     FontSizeDown: createIcon(arrowDownIconPaths),
     OpacityUp: createIcon(eyeIconPaths),

packages/react/src/components/layouts/default/slots.tsx

@@ -54,9 +54,10 @@ export type DefaultLayoutMenuSlotName =
   | 'settingsMenuEndItems'
   | 'settingsMenuItemsStart'
   | 'settingsMenuItemsEnd'
-  | 'playbackMenuItemsStart'
-  | 'playbackMenuItemsEnd'
-  | 'playbackMenuLoop'
+  | 'speedMenuItemsStart'
+  | 'speedMenuItemsEnd'
+  | 'qualityMenuItemsStart'
+  | 'qualityMenuItemsEnd'
   | 'accessibilityMenuItemsStart'
   | 'accessibilityMenuItemsEnd'
   | 'audioMenuItemsStart'

packages/react/src/components/layouts/default/ui/menus/audio-menu.tsx

@@ -22,6 +22,7 @@ interface DefaultAudioMenuProps {
 function DefaultAudioMenu({ slots }: DefaultAudioMenuProps) {
   const label = useDefaultLayoutWord('Audio'),
     $canSetAudioGain = useMediaState('canSetAudioGain'),
+    $audioTrack = useMediaState('audioTrack'),
     $audioTracks = useMediaState('audioTracks'),
     { noAudioGain, icons: Icons } = useDefaultLayoutContext(),
     hasGainSlider = $canSetAudioGain && !noAudioGain,
@@ -31,7 +32,7 @@ function DefaultAudioMenu({ slots }: DefaultAudioMenuProps) {
 
   return (
     <Menu.Root className="vds-audio-menu vds-menu">
-      <DefaultMenuButton label={label} Icon={Icons.Menu.Audio} />
+      <DefaultMenuButton label={label} hint={$audioTrack?.label} Icon={Icons.Menu.Audio} />
       <Menu.Content className="vds-menu-items">
         {slot(slots, 'audioMenuItemsStart', null)}
         <DefaultAudioTracksMenu />

packages/react/src/components/layouts/default/ui/menus/quality-menu.tsx

@@ -0,0 +1,61 @@
+import * as React from 'react';
+
+import { useVideoQualityOptions } from '../../../../../hooks/options/use-video-quality-options';
+import { useMediaState } from '../../../../../hooks/use-media-state';
+import * as Menu from '../../../../ui/menu';
+import { useDefaultLayoutContext, useDefaultLayoutWord } from '../../context';
+import { slot, type DefaultLayoutMenuSlotName, type Slots } from '../../slots';
+import { DefaultMenuButton } from './items/menu-items';
+
+/* -------------------------------------------------------------------------------------------------
+ * DefaultQualityMenu
+ * -----------------------------------------------------------------------------------------------*/
+
+interface DefaultQualityMenuProps {
+  slots?: Slots<DefaultLayoutMenuSlotName>;
+}
+
+function DefaultQualityMenu({ slots }: DefaultQualityMenuProps) {
+  const { hideQualityBitrate, icons: Icons } = useDefaultLayoutContext(),
+    label = useDefaultLayoutWord('Quality'),
+    autoText = useDefaultLayoutWord('Auto'),
+    $canSetQuality = useMediaState('canSetQuality'),
+    $qualities = useMediaState('qualities'),
+    options = useVideoQualityOptions({ auto: autoText });
+
+  if (!$canSetQuality || $qualities.length <= 1 || options.disabled) return null;
+
+  return (
+    <Menu.Root className="vds-quality-menu vds-menu">
+      <DefaultMenuButton label={label} Icon={Icons.Menu.QualityUp} />
+      <Menu.Content className="vds-menu-items">
+        {slot(slots, 'qualityMenuItemsStart', null)}
+
+        <Menu.RadioGroup
+          className="vds-quality-radio-group vds-radio-group"
+          value={options.selectedValue}
+        >
+          {options.map(({ label, value, bitrateText, select }) => (
+            <Menu.Radio
+              className="vds-quality-radio vds-radio"
+              value={value}
+              onSelect={select}
+              key={value}
+            >
+              <Icons.Menu.RadioCheck className="vds-icon" />
+              <span className="vds-radio-label">{label}</span>
+              {!hideQualityBitrate && bitrateText ? (
+                <span className="vds-radio-hint">{bitrateText}</span>
+              ) : null}
+            </Menu.Radio>
+          ))}
+        </Menu.RadioGroup>
+
+        {slot(slots, 'qualityMenuItemsEnd', null)}
+      </Menu.Content>
+    </Menu.Root>
+  );
+}
+
+DefaultQualityMenu.displayName = 'DefaultQualityMenu';
+export { DefaultQualityMenu };

packages/react/src/components/layouts/default/ui/menus/settings-menu.tsx

@@ -14,7 +14,8 @@ import { DefaultTooltip } from '../tooltip';
 import { DefaultAccessibilityMenu } from './accessibility-menu';
 import { DefaultAudioMenu } from './audio-menu';
 import { DefaultCaptionMenu } from './captions-menu';
-import { DefaultPlaybackMenu } from './playback-menu';
+import { DefaultQualityMenu } from './quality-menu';
+import { DefaultSpeedMenu } from './speed-menu';
 import { useParentDialogEl } from './utils';
 
 export interface DefaultMediaMenuProps {
@@ -68,7 +69,8 @@ function DefaultSettingsMenu({
         <>
           {slot(slots, 'settingsMenuItemsStart', null)}
           {slot(slots, 'settingsMenuStartItems', null)}
-          <DefaultPlaybackMenu slots={slots} />
+          <DefaultSpeedMenu slots={slots} />
+          <DefaultQualityMenu slots={slots} />
           <DefaultAccessibilityMenu slots={slots} />
           <DefaultAudioMenu slots={slots} />
           <DefaultCaptionMenu slots={slots} />