@hanifhan1f/vidstack-react 1.12.13

package/src/components/layouts/default/ui/menus/items/menu-checkbox.tsx

@@ -0,0 +1,72 @@
+import * as React from 'react';
+
+import { isBoolean, isKeyboardClick } from 'maverick.js/std';
+
+export interface DefaultMenuCheckboxProps {
+  label: string;
+  checked?: boolean;
+  storageKey?: string;
+  defaultChecked?: boolean;
+  onChange?(checked: boolean, trigger?: Event): void;
+}
+
+function DefaultMenuCheckbox({
+  label,
+  checked,
+  storageKey,
+  defaultChecked = false,
+  onChange,
+}: DefaultMenuCheckboxProps) {
+  const [isChecked, setIsChecked] = React.useState(defaultChecked),
+    [isActive, setIsActive] = React.useState(false);
+
+  React.useEffect(() => {
+    const savedValue = storageKey ? localStorage.getItem(storageKey) : null,
+      checked = !!(savedValue ?? defaultChecked);
+    setIsChecked(checked);
+    onChange?.(checked);
+  }, []);
+
+  React.useEffect(() => {
+    if (isBoolean(checked)) setIsChecked(checked);
+  }, [checked]);
+
+  function onPress(event?: React.PointerEvent | React.KeyboardEvent) {
+    if (event && 'button' in event && event?.button === 1) return;
+
+    const toggledCheck = !isChecked;
+
+    setIsChecked(toggledCheck);
+    if (storageKey) localStorage.setItem(storageKey, toggledCheck ? '1' : '');
+
+    onChange?.(toggledCheck, event?.nativeEvent);
+
+    setIsActive(false);
+  }
+
+  function onActive(event: React.PointerEvent) {
+    if (event.button !== 0) return;
+    setIsActive(true);
+  }
+
+  function onKeyDown(event: React.KeyboardEvent) {
+    if (isKeyboardClick(event.nativeEvent)) onPress();
+  }
+
+  return (
+    <div
+      className="vds-menu-checkbox"
+      role="menuitemcheckbox"
+      tabIndex={0}
+      aria-label={label}
+      aria-checked={isChecked ? 'true' : 'false'}
+      data-active={isActive ? '' : null}
+      onPointerUp={onPress}
+      onPointerDown={onActive}
+      onKeyDown={onKeyDown}
+    />
+  );
+}
+
+DefaultMenuCheckbox.displayName = 'DefaultMenuCheckbox';
+export { DefaultMenuCheckbox };

package/src/components/layouts/default/ui/menus/items/menu-items.tsx

@@ -0,0 +1,135 @@
+import * as React from 'react';
+
+import { isArray } from 'maverick.js/std';
+
+import * as Menu from '../../../../../ui/menu';
+import { DefaultLayoutContext, useDefaultLayoutContext } from '../../../context';
+import type { DefaultLayoutIcon } from '../../../icons';
+
+/* -------------------------------------------------------------------------------------------------
+ * DefaultMenuSection
+ * -----------------------------------------------------------------------------------------------*/
+
+export interface DefaultMenuSectionProps {
+  label?: string;
+  value?: string;
+  children: React.ReactNode;
+}
+
+function DefaultMenuSection({ label, value, children }: DefaultMenuSectionProps) {
+  const id = React.useId();
+
+  if (!label) {
+    return (
+      <div className="vds-menu-section">
+        <div className="vds-menu-section-body">{children}</div>
+      </div>
+    );
+  }
+
+  return (
+    <section className="vds-menu-section" role="group" aria-labelledby={id}>
+      <div className="vds-menu-section-title">
+        <header id={id}>{label}</header>
+        {value ? <div className="vds-menu-section-value">{value}</div> : null}
+      </div>
+      <div className="vds-menu-section-body">{children}</div>
+    </section>
+  );
+}
+
+DefaultMenuSection.displayName = 'DefaultMenuSection';
+export { DefaultMenuSection };
+
+/* -------------------------------------------------------------------------------------------------
+ * DefaultMenuButton
+ * -----------------------------------------------------------------------------------------------*/
+
+export interface DefaultMenuButtonProps {
+  label: string;
+  hint?: string;
+  disabled?: boolean;
+  Icon?: DefaultLayoutIcon;
+}
+
+function DefaultMenuButton({ label, hint = '', Icon, disabled = false }: DefaultMenuButtonProps) {
+  const { icons: Icons } = React.useContext(DefaultLayoutContext);
+  return (
+    <Menu.Button className="vds-menu-item" disabled={disabled}>
+      <Icons.Menu.ArrowLeft className="vds-menu-close-icon vds-icon" />
+      {Icon ? <Icon className="vds-menu-item-icon vds-icon" /> : null}
+      <span className="vds-menu-item-label">{label}</span>
+      <span className="vds-menu-item-hint">{hint}</span>
+      <Icons.Menu.ArrowRight className="vds-menu-open-icon vds-icon" />
+    </Menu.Button>
+  );
+}
+
+DefaultMenuButton.displayName = 'DefaultMenuButton';
+export { DefaultMenuButton };
+
+/* -------------------------------------------------------------------------------------------------
+ * DefaultMenuItem
+ * -----------------------------------------------------------------------------------------------*/
+
+export interface DefaultMenuItemProps {
+  label: string;
+  children: React.ReactNode;
+}
+
+function DefaultMenuItem({ label, children }: DefaultMenuItemProps) {
+  return (
+    <div className="vds-menu-item">
+      <div className="vds-menu-item-label">{label}</div>
+      {children}
+    </div>
+  );
+}
+
+DefaultMenuItem.displayName = 'DefaultMenuItem';
+export { DefaultMenuItem };
+
+/* -------------------------------------------------------------------------------------------------
+ * DefaultMenuRadioGroup
+ * -----------------------------------------------------------------------------------------------*/
+
+export interface DefaultMenuRadioGroupProps {
+  value: string;
+  options: { label: string; value: string }[];
+  onChange?(newValue: string): void;
+}
+
+function DefaultMenuRadioGroup({ value, options, onChange }: DefaultMenuRadioGroupProps) {
+  const { icons: Icons } = useDefaultLayoutContext();
+  return (
+    <Menu.RadioGroup className="vds-radio-group" value={value} onChange={onChange}>
+      {options.map((option) => (
+        <Menu.Radio className="vds-radio" value={option.value} key={option.value}>
+          <Icons.Menu.RadioCheck className="vds-icon" />
+          <span className="vds-radio-label" data-part="label">
+            {option.label}
+          </span>
+        </Menu.Radio>
+      ))}
+    </Menu.RadioGroup>
+  );
+}
+
+DefaultMenuRadioGroup.displayName = 'DefaultMenuRadioGroup';
+export { DefaultMenuRadioGroup };
+
+/* -------------------------------------------------------------------------------------------------
+ * Utils
+ * -----------------------------------------------------------------------------------------------*/
+
+export function createRadioOptions(
+  entries: string[] | Record<string, string>,
+): { label: string; value: string }[] {
+  return React.useMemo(
+    () =>
+      isArray(entries)
+        ? entries.map((entry) => ({ label: entry, value: entry.toLowerCase() }))
+        : Object.keys(entries).map((label) => ({ label, value: entries[label] })),
+    [entries],
+  );
+}

package/src/components/layouts/default/ui/menus/items/menu-slider.tsx

@@ -0,0 +1,92 @@
+import * as React from 'react';
+
+import * as Slider from '../../../../../ui/sliders/slider';
+import type { DefaultLayoutIcon } from '../../../icons';
+
+/* -------------------------------------------------------------------------------------------------
+ * DefaultMenuSliderItem
+ * -----------------------------------------------------------------------------------------------*/
+
+export interface DefaultMenuSliderItemProps {
+  label?: string;
+  value?: string;
+  UpIcon?: DefaultLayoutIcon;
+  DownIcon?: DefaultLayoutIcon;
+  children: React.ReactNode;
+  isMin: boolean;
+  isMax: boolean;
+}
+
+function DefaultMenuSliderItem({
+  label,
+  value,
+  UpIcon,
+  DownIcon,
+  children,
+  isMin,
+  isMax,
+}: DefaultMenuSliderItemProps) {
+  const hasTitle = label || value,
+    Content = (
+      <>
+        {DownIcon ? <DownIcon className="vds-icon down" /> : null}
+        {children}
+        {UpIcon ? <UpIcon className="vds-icon up" /> : null}
+      </>
+    );
+
+  return (
+    <div
+      className={`vds-menu-item vds-menu-slider-item${hasTitle ? ' group' : ''}`}
+      data-min={isMin ? '' : null}
+      data-max={isMax ? '' : null}
+    >
+      {hasTitle ? (
+        <>
+          <div className="vds-menu-slider-title">
+            {label ? <div>{label}</div> : null}
+            {value ? <div>{value}</div> : null}
+          </div>
+          <div className="vds-menu-slider-body">{Content}</div>
+        </>
+      ) : (
+        Content
+      )}
+    </div>
+  );
+}
+
+DefaultMenuSliderItem.displayName = 'DefaultMenuSliderItem';
+export { DefaultMenuSliderItem };
+
+/* -------------------------------------------------------------------------------------------------
+ * DefaultSliderParts
+ * -----------------------------------------------------------------------------------------------*/
+
+function DefaultSliderParts() {
+  return (
+    <>
+      <Slider.Track className="vds-slider-track" />
+      <Slider.TrackFill className="vds-slider-track-fill vds-slider-track" />
+      <Slider.Thumb className="vds-slider-thumb" />
+    </>
+  );
+}
+
+DefaultSliderParts.displayName = 'DefaultSliderParts';
+export { DefaultSliderParts };
+
+/* -------------------------------------------------------------------------------------------------
+ * DefaultSliderSteps
+ * -----------------------------------------------------------------------------------------------*/
+
+function DefaultSliderSteps() {
+  return (
+    <Slider.Steps className="vds-slider-steps">
+      {(step) => <div className="vds-slider-step" key={String(step)} />}
+    </Slider.Steps>
+  );
+}
+
+DefaultSliderSteps.displayName = 'DefaultSliderSteps';
+export { DefaultSliderSteps };

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

@@ -0,0 +1,232 @@
+import * as React from 'react';
+
+import { isArray } from 'maverick.js/std';
+import { sortVideoQualities } from 'vidstack';
+
+import { useMediaContext } from '../../../../../hooks/use-media-context';
+import { useMediaState } from '../../../../../hooks/use-media-state';
+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';
+
+/* -------------------------------------------------------------------------------------------------
+ * DefaultPlaybackMenu
+ * -----------------------------------------------------------------------------------------------*/
+
+interface DefaultPlaybackMenuProps {
+  slots?: Slots<DefaultLayoutMenuSlotName>;
+}
+
+function DefaultPlaybackMenu({ slots }: DefaultPlaybackMenuProps) {
+  const label = useDefaultLayoutWord('Playback'),
+    { icons: Icons } = useDefaultLayoutContext();
+
+  return (
+    <Menu.Root className="vds-playback-menu vds-menu">
+      <DefaultMenuButton label={label} Icon={Icons.Menu.Playback} />
+      <Menu.Content className="vds-menu-items">
+        {slot(slots, 'playbackMenuItemsStart', null)}
+
+        <DefaultMenuSection>
+          {slot(slots, 'playbackMenuLoop', <DefaultLoopMenuCheckbox />)}
+        </DefaultMenuSection>
+
+        <DefaultSpeedMenuSection />
+
+        <DefaultQualityMenuSection />
+
+        {slot(slots, 'playbackMenuItemsEnd', null)}
+      </Menu.Content>
+    </Menu.Root>
+  );
+}
+
+DefaultPlaybackMenu.displayName = 'DefaultPlaybackMenu';
+export { DefaultPlaybackMenu };
+
+/* -------------------------------------------------------------------------------------------------
+ * DefaultLoopMenuCheckbox
+ * -----------------------------------------------------------------------------------------------*/
+
+function DefaultLoopMenuCheckbox() {
+  const { remote } = useMediaContext(),
+    label = useDefaultLayoutWord('Loop');
+
+  function onChange(checked: boolean, trigger?: Event) {
+    remote.userPrefersLoopChange(checked, trigger);
+  }
+
+  return (
+    <DefaultMenuItem label={label}>
+      <DefaultMenuCheckbox label={label} storageKey="vds-player::user-loop" onChange={onChange} />
+    </DefaultMenuItem>
+  );
+}
+
+DefaultLoopMenuCheckbox.displayName = 'DefaultLoopMenuCheckbox';
+
+/* -------------------------------------------------------------------------------------------------
+ * DefaultAutoQualityMenuCheckbox
+ * -----------------------------------------------------------------------------------------------*/
+
+function DefaultAutoQualityMenuCheckbox() {
+  const { remote, qualities } = useMediaContext(),
+    $autoQuality = useMediaState('autoQuality'),
+    label = useDefaultLayoutWord('Auto');
+
+  function onChange(checked: boolean, trigger?: Event) {
+    if (checked) {
+      remote.requestAutoQuality(trigger);
+    } else {
+      remote.changeQuality(qualities.selectedIndex, trigger);
+    }
+  }
+
+  return (
+    <DefaultMenuItem label={label}>
+      <DefaultMenuCheckbox
+        label={label}
+        checked={$autoQuality}
+        onChange={onChange}
+        defaultChecked={$autoQuality}
+      />
+    </DefaultMenuItem>
+  );
+}
+
+DefaultAutoQualityMenuCheckbox.displayName = 'DefaultAutoQualityMenuCheckbox';
+
+/* -------------------------------------------------------------------------------------------------
+ * DefaultQualityMenuSection
+ * -----------------------------------------------------------------------------------------------*/
+
+function DefaultQualityMenuSection() {
+  const { hideQualityBitrate, icons: Icons } = useDefaultLayoutContext(),
+    $canSetQuality = useMediaState('canSetQuality'),
+    $qualities = useMediaState('qualities'),
+    $quality = useMediaState('quality'),
+    label = useDefaultLayoutWord('Quality'),
+    autoText = useDefaultLayoutWord('Auto'),
+    sortedQualities = React.useMemo(() => sortVideoQualities($qualities), [$qualities]);
+
+  if (!$canSetQuality || $qualities.length <= 1) return null;
+
+  const height = $quality?.height,
+    bitrate = !hideQualityBitrate ? $quality?.bitrate : null,
+    bitrateText = bitrate && bitrate > 0 ? `${(bitrate / 1000000).toFixed(2)} Mbps` : null,
+    value = height ? `${height}p${bitrateText ? ` (${bitrateText})` : ''}` : autoText,
+    isMin = sortedQualities[0] === $quality,
+    isMax = sortedQualities.at(-1) === $quality;
+
+  return (
+    <DefaultMenuSection label={label} value={value}>
+      <DefaultMenuSliderItem
+        UpIcon={Icons.Menu.QualityUp}
+        DownIcon={Icons.Menu.QualityDown}
+        isMin={isMin}
+        isMax={isMax}
+      >
+        <DefaultQualitySlider />
+      </DefaultMenuSliderItem>
+      <DefaultAutoQualityMenuCheckbox />
+    </DefaultMenuSection>
+  );
+}
+
+DefaultQualityMenuSection.displayName = 'DefaultQualityMenuSection';
+
+/* -------------------------------------------------------------------------------------------------
+ * DefaultQualitySlider
+ * -----------------------------------------------------------------------------------------------*/
+
+function DefaultQualitySlider() {
+  const label = useDefaultLayoutWord('Quality');
+  return (
+    <QualitySlider.Root className="vds-quality-slider vds-slider" aria-label={label}>
+      <DefaultSliderParts />
+      <DefaultSliderSteps />
+    </QualitySlider.Root>
+  );
+}
+
+DefaultQualitySlider.displayName = 'DefaultQualitySlider';
+
+/* -------------------------------------------------------------------------------------------------
+ * DefaultSpeedMenuSection
+ * -----------------------------------------------------------------------------------------------*/
+
+function DefaultSpeedMenuSection() {
+  const { icons: Icons } = useDefaultLayoutContext(),
+    $playbackRate = useMediaState('playbackRate'),
+    $canSetPlaybackRate = useMediaState('canSetPlaybackRate'),
+    label = useDefaultLayoutWord('Speed'),
+    normalText = useDefaultLayoutWord('Normal'),
+    min = useSpeedMin(),
+    max = useSpeedMax(),
+    value = $playbackRate === 1 ? normalText : $playbackRate + 'x';
+
+  if (!$canSetPlaybackRate) return null;
+
+  return (
+    <DefaultMenuSection label={label} value={value}>
+      <DefaultMenuSliderItem
+        UpIcon={Icons.Menu.SpeedUp}
+        DownIcon={Icons.Menu.SpeedDown}
+        isMin={$playbackRate === min}
+        isMax={$playbackRate === max}
+      >
+        <DefaultSpeedSlider />
+      </DefaultMenuSliderItem>
+    </DefaultMenuSection>
+  );
+}
+
+function useSpeedMin() {
+  const { playbackRates } = useDefaultLayoutContext(),
+    rates = playbackRates;
+  return (isArray(rates) ? rates[0] : rates?.min) ?? 0;
+}
+
+function useSpeedMax() {
+  const { playbackRates } = useDefaultLayoutContext(),
+    rates = playbackRates;
+  return (isArray(rates) ? rates[rates.length - 1] : rates?.max) ?? 2;
+}
+
+function useSpeedStep() {
+  const { playbackRates } = useDefaultLayoutContext(),
+    rates = playbackRates;
+  return (isArray(rates) ? rates[1] - rates[0] : rates?.step) || 0.25;
+}
+
+/* -------------------------------------------------------------------------------------------------
+ * DefaultSpeedSlider
+ * -----------------------------------------------------------------------------------------------*/
+
+function DefaultSpeedSlider() {
+  const label = useDefaultLayoutWord('Speed'),
+    min = useSpeedMin(),
+    max = useSpeedMax(),
+    step = useSpeedStep();
+
+  return (
+    <SpeedSlider.Root
+      className="vds-speed-slider vds-slider"
+      aria-label={label}
+      min={min}
+      max={max}
+      step={step}
+      keyStep={step}
+    >
+      <DefaultSliderParts />
+      <DefaultSliderSteps />
+    </SpeedSlider.Root>
+  );
+}
+
+DefaultSpeedSlider.displayName = 'DefaultSpeedSlider';

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

@@ -0,0 +1,114 @@
+import * as React from 'react';
+
+import { flushSync } from 'react-dom';
+import { updateFontCssVars } from 'vidstack/exports/font.ts';
+
+import { useMediaState } from '../../../../../hooks/use-media-state';
+import { useScoped } from '../../../../../hooks/use-signals';
+import * as Menu from '../../../../ui/menu';
+import type * as Tooltip from '../../../../ui/tooltip';
+import { useDefaultLayoutContext, useDefaultLayoutWord } from '../../context';
+import { useColorSchemeClass } from '../../hooks';
+import { slot, type DefaultLayoutMenuSlotName, type Slots } from '../../slots';
+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 { useParentDialogEl } from './utils';
+
+export interface DefaultMediaMenuProps {
+  tooltip: Tooltip.ContentProps['placement'];
+  placement: Menu.ContentProps['placement'];
+  portalClass?: string;
+  slots?: Slots<DefaultLayoutMenuSlotName>;
+}
+
+function DefaultSettingsMenu({
+  tooltip,
+  placement,
+  portalClass = '',
+  slots,
+}: DefaultMediaMenuProps) {
+  const {
+      showMenuDelay,
+      icons: Icons,
+      isSmallLayout,
+      menuContainer,
+      menuGroup,
+      noModal,
+      colorScheme,
+    } = useDefaultLayoutContext(),
+    settingsText = useDefaultLayoutWord('Settings'),
+    $viewType = useMediaState('viewType'),
+    $offset = !isSmallLayout && menuGroup === 'bottom' && $viewType === 'video' ? 26 : 0,
+    colorSchemeClass = useColorSchemeClass(colorScheme),
+    [isOpen, setIsOpen] = React.useState(false),
+    dialogEl = useParentDialogEl();
+
+  useScoped(updateFontCssVars);
+
+  function onOpen() {
+    flushSync(() => {
+      setIsOpen(true);
+    });
+  }
+
+  function onClose() {
+    setIsOpen(false);
+  }
+
+  const Content = (
+    <Menu.Content
+      className="vds-settings-menu-items vds-menu-items"
+      placement={placement}
+      offset={$offset}
+    >
+      {isOpen ? (
+        <>
+          {slot(slots, 'settingsMenuItemsStart', null)}
+          {slot(slots, 'settingsMenuStartItems', null)}
+          <DefaultPlaybackMenu slots={slots} />
+          <DefaultAccessibilityMenu slots={slots} />
+          <DefaultAudioMenu slots={slots} />
+          <DefaultCaptionMenu slots={slots} />
+          {slot(slots, 'settingsMenuEndItems', null)}
+          {slot(slots, 'settingsMenuItemsEnd', null)}
+        </>
+      ) : null}
+    </Menu.Content>
+  );
+
+  return (
+    <Menu.Root
+      className="vds-settings-menu vds-menu"
+      showDelay={showMenuDelay}
+      onOpen={onOpen}
+      onClose={onClose}
+    >
+      <DefaultTooltip content={settingsText} placement={tooltip}>
+        <Menu.Button className="vds-menu-button vds-button" aria-label={settingsText}>
+          <Icons.Menu.Settings className="vds-icon vds-rotate-icon" />
+        </Menu.Button>
+      </DefaultTooltip>
+      {noModal || !isSmallLayout ? (
+        Content
+      ) : (
+        <Menu.Portal
+          className={portalClass + (colorSchemeClass ? ` ${colorSchemeClass}` : '')}
+          container={menuContainer ?? dialogEl}
+          disabled="fullscreen"
+          data-sm={isSmallLayout ? '' : null}
+          data-lg={!isSmallLayout ? '' : null}
+          data-size={isSmallLayout ? 'sm' : 'lg'}
+          data-view-type={$viewType}
+        >
+          {Content}
+        </Menu.Portal>
+      )}
+    </Menu.Root>
+  );
+}
+
+DefaultSettingsMenu.displayName = 'DefaultSettingsMenu';
+export { DefaultSettingsMenu };

package/src/components/layouts/default/ui/menus/utils.ts

@@ -0,0 +1,12 @@
+import * as React from 'react';
+
+import { useSignal } from 'maverick.js/react';
+
+import { useDefaultLayoutContext } from '../../context';
+
+export function useParentDialogEl() {
+  const { layoutEl } = useDefaultLayoutContext(),
+    $layoutEl = useSignal(layoutEl);
+
+  return React.useMemo(() => $layoutEl?.closest('dialog'), [$layoutEl]);
+}