feat(player/react): add default layout slots for settings submenus (#1246)

Author: Curetix

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

@@ -47,8 +47,21 @@ export type DefaultLayoutSlotName =
 export type DefaultLayoutMenuSlotName =
   | 'chaptersMenu'
   | 'settingsMenu'
+  /** @deprecated - use `settingsMenuItemsStart` */
   | 'settingsMenuStartItems'
-  | 'settingsMenuEndItems';
+  /** @deprecated - use `settingsMenuItemsEnd` */
+  | 'settingsMenuEndItems'
+  | 'settingsMenuItemsStart'
+  | 'settingsMenuItemsEnd'
+  | 'playbackMenuItemsStart'
+  | 'playbackMenuItemsEnd'
+  | 'playbackMenuLoop'
+  | 'accessibilityMenuItemsStart'
+  | 'accessibilityMenuItemsEnd'
+  | 'audioMenuItemsStart'
+  | 'audioMenuItemsEnd'
+  | 'captionsMenuItemsStart'
+  | 'captionsMenuItemsEnd';
 
 export interface DefaultLayoutSlots extends Slots<DefaultLayoutSlotName> {}
 

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

@@ -3,6 +3,7 @@ import * as React from 'react';
 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 { DefaultFontMenu } from './font-menu';
 import { DefaultMenuCheckbox } from './items/menu-checkbox';
 import { DefaultMenuButton, DefaultMenuItem, DefaultMenuSection } from './items/menu-items';
@@ -11,14 +12,20 @@ import { DefaultMenuButton, DefaultMenuItem, DefaultMenuSection } from './items/
  * DefaultAccessibilityMenu
  * -----------------------------------------------------------------------------------------------*/
 
-function DefaultAccessibilityMenu() {
+interface DefaultAccessibilityMenuProps {
+  slots?: Slots<DefaultLayoutMenuSlotName>;
+}
+
+function DefaultAccessibilityMenu({ slots }: DefaultAccessibilityMenuProps) {
   const label = useDefaultLayoutWord('Accessibility'),
     { icons: Icons } = useDefaultLayoutContext();
 
   return (
     <Menu.Root className="vds-accessibility-menu vds-menu">
       <DefaultMenuButton label={label} Icon={Icons.Menu.Accessibility} />
       <Menu.Content className="vds-menu-items">
+        {slot(slots, 'accessibilityMenuItemsStart', null)}
+
         <DefaultMenuSection>
           <DefaultAnnouncementsMenuCheckbox />
           <DefaultKeyboardAnimationsMenuCheckbox />
@@ -27,6 +34,8 @@ function DefaultAccessibilityMenu() {
         <DefaultMenuSection>
           <DefaultFontMenu />
         </DefaultMenuSection>
+
+        {slot(slots, 'accessibilityMenuItemsEnd', null)}
       </Menu.Content>
     </Menu.Root>
   );

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

@@ -7,14 +7,19 @@ import { useMediaState } from '../../../../../hooks/use-media-state';
 import * as Menu from '../../../../ui/menu';
 import * as AudioGainSlider from '../../../../ui/sliders/audio-gain-slider';
 import { useDefaultLayoutContext, useDefaultLayoutWord } from '../../context';
+import { slot, type DefaultLayoutMenuSlotName, type Slots } from '../../slots';
 import { DefaultMenuButton, DefaultMenuSection } from './items/menu-items';
 import { DefaultMenuSliderItem, DefaultSliderParts, DefaultSliderSteps } from './items/menu-slider';
 
 /* -------------------------------------------------------------------------------------------------
  * DefaultAudioMenu
  * -----------------------------------------------------------------------------------------------*/
 
-function DefaultAudioMenu() {
+interface DefaultAudioMenuProps {
+  slots?: Slots<DefaultLayoutMenuSlotName>;
+}
+
+function DefaultAudioMenu({ slots }: DefaultAudioMenuProps) {
   const label = useDefaultLayoutWord('Audio'),
     $canSetAudioGain = useMediaState('canSetAudioGain'),
     $audioTracks = useMediaState('audioTracks'),
@@ -28,8 +33,10 @@ function DefaultAudioMenu() {
     <Menu.Root className="vds-audio-menu vds-menu">
       <DefaultMenuButton label={label} Icon={Icons.Menu.Audio} />
       <Menu.Content className="vds-menu-items">
+        {slot(slots, 'audioMenuItemsStart', null)}
         <DefaultAudioTracksMenu />
         {hasGainSlider ? <DefaultAudioBoostMenuSection /> : null}
+        {slot(slots, 'audioMenuItemsEnd', null)}
       </Menu.Content>
     </Menu.Root>
   );

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

@@ -3,13 +3,18 @@ import * as React from 'react';
 import { useCaptionOptions } from '../../../../../hooks/options/use-caption-options';
 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';
 
 /* -------------------------------------------------------------------------------------------------
  * DefaultCaptionMenu
  * -----------------------------------------------------------------------------------------------*/
 
-function DefaultCaptionMenu() {
+interface DefaultCaptionMenuProps {
+  slots?: Slots<DefaultLayoutMenuSlotName>;
+}
+
+function DefaultCaptionMenu({ slots }: DefaultCaptionMenuProps) {
   const { icons: Icons } = useDefaultLayoutContext(),
     label = useDefaultLayoutWord('Captions'),
     offText = useDefaultLayoutWord('Off'),
@@ -27,6 +32,8 @@ function DefaultCaptionMenu() {
         Icon={Icons.Menu.Captions}
       />
       <Menu.Content className="vds-menu-items">
+        {slot(slots, 'captionsMenuItemsStart', null)}
+
         <Menu.RadioGroup
           className="vds-captions-radio-group vds-radio-group"
           value={options.selectedValue}
@@ -43,6 +50,8 @@ function DefaultCaptionMenu() {
             </Menu.Radio>
           ))}
         </Menu.RadioGroup>
+
+        {slot(slots, 'captionsMenuItemsEnd', null)}
       </Menu.Content>
     </Menu.Root>
   );

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

@@ -9,6 +9,7 @@ import * as Menu from '../../../../ui/menu';
 import * as QualitySlider from '../../../../ui/sliders/quality-slider';
 import * as SpeedSlider from '../../../../ui/sliders/speed-slider';
 import { useDefaultLayoutContext, useDefaultLayoutWord } from '../../context';
+import { slot, type DefaultLayoutMenuSlotName, type Slots } from '../../slots';
 import { DefaultMenuCheckbox } from './items/menu-checkbox';
 import { DefaultMenuButton, DefaultMenuItem, DefaultMenuSection } from './items/menu-items';
 import { DefaultMenuSliderItem, DefaultSliderParts, DefaultSliderSteps } from './items/menu-slider';
@@ -17,21 +18,29 @@ import { DefaultMenuSliderItem, DefaultSliderParts, DefaultSliderSteps } from '.
  * DefaultPlaybackMenu
  * -----------------------------------------------------------------------------------------------*/
 
-function DefaultPlaybackMenu() {
+interface DefaultPlaybackMenuProps {
+  slots?: Slots<DefaultLayoutMenuSlotName>;
+}
+
+function DefaultPlaybackMenu({ slots }: DefaultPlaybackMenuProps) {
   const label = useDefaultLayoutWord('Playback'),
     { icons: Icons } = useDefaultLayoutContext();
 
   return (
     <Menu.Root className="vds-accessibility-menu vds-menu">
       <DefaultMenuButton label={label} Icon={Icons.Menu.Playback} />
       <Menu.Content className="vds-menu-items">
+        {slot(slots, 'playbackMenuItemsStart', null)}
+
         <DefaultMenuSection>
-          <DefaultLoopMenuCheckbox />
+          {slot(slots, 'playbackMenuLoop', <DefaultLoopMenuCheckbox />)}
         </DefaultMenuSection>
 
         <DefaultSpeedMenuSection />
 
         <DefaultQualityMenuSection />
+
+        {slot(slots, 'playbackMenuItemsEnd', null)}
       </Menu.Content>
     </Menu.Root>
   );

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

@@ -59,12 +59,14 @@ function DefaultSettingsMenu({
     >
       {isOpen ? (
         <>
+          {slot(slots, 'settingsMenuItemsStart', null)}
           {slot(slots, 'settingsMenuStartItems', null)}
-          <DefaultPlaybackMenu />
-          <DefaultAccessibilityMenu />
-          <DefaultAudioMenu />
-          <DefaultCaptionMenu />
+          <DefaultPlaybackMenu slots={slots} />
+          <DefaultAccessibilityMenu slots={slots} />
+          <DefaultAudioMenu slots={slots} />
+          <DefaultCaptionMenu slots={slots} />
           {slot(slots, 'settingsMenuEndItems', null)}
+          {slot(slots, 'settingsMenuItemsEnd', null)}
         </>
       ) : null}
     </Menu.Content>