@hanifhan1f/vidstack-react 1.12.13 → 1.12.14

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

@@ -1,331 +0,0 @@
-import * as React from 'react';
-
-import { useSignal } from 'maverick.js/react';
-import { camelToKebabCase } from 'maverick.js/std';
-import {
-  FONT_COLOR_OPTION,
-  FONT_FAMILY_OPTION,
-  FONT_OPACITY_OPTION,
-  FONT_SIGNALS,
-  FONT_SIZE_OPTION,
-  FONT_TEXT_SHADOW_OPTION,
-  onFontReset,
-  type DefaultFontSettingProps,
-  type FontRadioOption,
-  type FontSliderOption,
-} from 'vidstack/exports/font.ts';
-
-import { useMediaPlayer } from '../../../../../hooks/use-media-player';
-import { useMediaState } from '../../../../../hooks/use-media-state';
-import * as Menu from '../../../../ui/menu';
-import * as Slider from '../../../../ui/sliders/slider';
-import { i18n, useDefaultLayoutContext, useDefaultLayoutWord } from '../../context';
-import type { DefaultLayoutIcon } from '../../icons';
-import {
-  createRadioOptions,
-  DefaultMenuButton,
-  DefaultMenuItem,
-  DefaultMenuRadioGroup,
-  DefaultMenuSection,
-} from './items/menu-items';
-import { DefaultMenuSliderItem, DefaultSliderParts, DefaultSliderSteps } from './items/menu-slider';
-
-/* -------------------------------------------------------------------------------------------------
- * DefaultFontMenu
- * -----------------------------------------------------------------------------------------------*/
-
-function DefaultFontMenu() {
-  const label = useDefaultLayoutWord('Caption Styles'),
-    $hasCaptions = useMediaState('hasCaptions'),
-    fontSectionLabel = useDefaultLayoutWord('Font'),
-    textSectionLabel = useDefaultLayoutWord('Text'),
-    textBgSectionLabel = useDefaultLayoutWord('Text Background'),
-    displayBgSectionLabel = useDefaultLayoutWord('Display Background');
-
-  if (!$hasCaptions) return null;
-
-  return (
-    <Menu.Root className="vds-font-menu vds-menu">
-      <DefaultMenuButton label={label} />
-      <Menu.Content className="vds-font-style-items vds-menu-items">
-        <DefaultMenuSection label={fontSectionLabel}>
-          <DefaultFontFamilyMenu />
-          <DefaultFontSizeSlider />
-        </DefaultMenuSection>
-
-        <DefaultMenuSection label={textSectionLabel}>
-          <DefaultTextColorInput />
-          <DefaultTextShadowMenu />
-          <DefaultTextOpacitySlider />
-        </DefaultMenuSection>
-
-        <DefaultMenuSection label={textBgSectionLabel}>
-          <DefaultTextBgInput />
-          <DefaultTextBgOpacitySlider />
-        </DefaultMenuSection>
-
-        <DefaultMenuSection label={displayBgSectionLabel}>
-          <DefaultDisplayBgInput />
-          <DefaultDisplayBgOpacitySlider />
-        </DefaultMenuSection>
-
-        <DefaultMenuSection>
-          <DefaultResetMenuItem />
-        </DefaultMenuSection>
-      </Menu.Content>
-    </Menu.Root>
-  );
-}
-
-DefaultFontMenu.displayName = 'DefaultFontMenu';
-export { DefaultFontMenu };
-
-/* -------------------------------------------------------------------------------------------------
- * DefaultFontFamilyMenu
- * -----------------------------------------------------------------------------------------------*/
-
-function DefaultFontFamilyMenu() {
-  return <DefaultFontSetting label="Family" type="fontFamily" option={FONT_FAMILY_OPTION} />;
-}
-
-DefaultFontFamilyMenu.displayName = 'DefaultFontFamilyMenu';
-
-/* -------------------------------------------------------------------------------------------------
- * DefaultFontSizeSlider
- * -----------------------------------------------------------------------------------------------*/
-
-function DefaultFontSizeSlider() {
-  const { icons: Icons } = useDefaultLayoutContext(),
-    option: FontSliderOption = {
-      ...FONT_SIZE_OPTION,
-      upIcon: Icons.Menu.FontSizeUp,
-      downIcon: Icons.Menu.FontSizeDown,
-    };
-
-  return <DefaultFontSetting label="Size" type="fontSize" option={option} />;
-}
-
-DefaultFontSizeSlider.displayName = 'DefaultFontSizeSlider';
-
-/* -------------------------------------------------------------------------------------------------
- * DefaultTextColoInput
- * -----------------------------------------------------------------------------------------------*/
-
-function DefaultTextColorInput() {
-  return <DefaultFontSetting label="Color" type="textColor" option={FONT_COLOR_OPTION} />;
-}
-
-DefaultTextColorInput.displayName = 'DefaultTextColorInput';
-
-/* -------------------------------------------------------------------------------------------------
- * DefaultTextOpacitySlider
- * -----------------------------------------------------------------------------------------------*/
-
-function DefaultTextOpacitySlider() {
-  const { icons: Icons } = useDefaultLayoutContext(),
-    option = {
-      ...FONT_OPACITY_OPTION,
-      upIcon: Icons.Menu.OpacityUp,
-      downIcon: Icons.Menu.OpacityDown,
-    };
-  return <DefaultFontSetting label="Opacity" type="textOpacity" option={option} />;
-}
-
-DefaultTextOpacitySlider.displayName = 'DefaultTextOpacitySlider';
-
-/* -------------------------------------------------------------------------------------------------
- * DefaultTextShadowMenu
- * -----------------------------------------------------------------------------------------------*/
-
-function DefaultTextShadowMenu() {
-  return <DefaultFontSetting label="Shadow" type="textShadow" option={FONT_TEXT_SHADOW_OPTION} />;
-}
-
-DefaultTextShadowMenu.displayName = 'DefaultTextShadowMenu';
-
-/* -------------------------------------------------------------------------------------------------
- * DefaultTextBgInput
- * -----------------------------------------------------------------------------------------------*/
-
-function DefaultTextBgInput() {
-  return <DefaultFontSetting label="Color" type="textBg" option={FONT_COLOR_OPTION} />;
-}
-
-DefaultTextBgInput.displayName = 'DefaultTextBgInput';
-
-/* -------------------------------------------------------------------------------------------------
- * DefaultTextBgOpacitySlider
- * -----------------------------------------------------------------------------------------------*/
-
-function DefaultTextBgOpacitySlider() {
-  const { icons: Icons } = useDefaultLayoutContext(),
-    option = {
-      ...FONT_OPACITY_OPTION,
-      upIcon: Icons.Menu.OpacityUp,
-      downIcon: Icons.Menu.OpacityDown,
-    };
-
-  return <DefaultFontSetting label="Opacity" type="textBgOpacity" option={option} />;
-}
-
-DefaultTextBgOpacitySlider.displayName = 'DefaultTextBgOpacitySlider';
-
-/* -------------------------------------------------------------------------------------------------
- * DefaultDisplayBgInput
- * -----------------------------------------------------------------------------------------------*/
-
-function DefaultDisplayBgInput() {
-  return <DefaultFontSetting label="Color" type="displayBg" option={FONT_COLOR_OPTION} />;
-}
-
-DefaultDisplayBgInput.displayName = 'DefaultDisplayBgInput';
-
-/* -------------------------------------------------------------------------------------------------
- * DefaultDisplayBgOpacitySlider
- * -----------------------------------------------------------------------------------------------*/
-
-function DefaultDisplayBgOpacitySlider() {
-  const { icons: Icons } = useDefaultLayoutContext(),
-    option = {
-      ...FONT_OPACITY_OPTION,
-      upIcon: Icons.Menu.OpacityUp,
-      downIcon: Icons.Menu.OpacityDown,
-    };
-
-  return <DefaultFontSetting label="Opacity" type="displayBgOpacity" option={option} />;
-}
-
-DefaultDisplayBgOpacitySlider.displayName = 'DefaultDisplayBgOpacitySlider';
-
-/* -------------------------------------------------------------------------------------------------
- * DefaultFontSetting
- * -----------------------------------------------------------------------------------------------*/
-
-function DefaultFontSetting({ label, option, type }: DefaultFontSettingProps) {
-  const player = useMediaPlayer(),
-    $currentValue = FONT_SIGNALS[type],
-    $value = useSignal($currentValue),
-    translatedLabel = useDefaultLayoutWord(label);
-
-  const notify = React.useCallback(() => {
-    player?.dispatchEvent(new Event('vds-font-change'));
-  }, [player]);
-
-  const onChange = React.useCallback(
-    (newValue: string) => {
-      $currentValue.set(newValue);
-      notify();
-    },
-    [$currentValue, notify],
-  );
-
-  if (option.type === 'color') {
-    function onColorChange(event) {
-      onChange(event.target.value);
-    }
-
-    return (
-      <DefaultMenuItem label={translatedLabel}>
-        <input className="vds-color-picker" type="color" value={$value} onChange={onColorChange} />
-      </DefaultMenuItem>
-    );
-  }
-
-  if (option.type === 'slider') {
-    const { min, max, step, upIcon, downIcon } = option;
-
-    function onSliderValueChange(value) {
-      onChange(value + '%');
-    }
-
-    return (
-      <DefaultMenuSliderItem
-        label={translatedLabel}
-        value={$value}
-        UpIcon={upIcon as DefaultLayoutIcon}
-        DownIcon={downIcon as DefaultLayoutIcon}
-        isMin={$value === min + '%'}
-        isMax={$value === max + '%'}
-      >
-        <Slider.Root
-          className="vds-slider"
-          min={min}
-          max={max}
-          step={step}
-          keyStep={step}
-          value={parseInt($value)}
-          aria-label={translatedLabel}
-          onValueChange={onSliderValueChange}
-          onDragValueChange={onSliderValueChange}
-        >
-          <DefaultSliderParts />
-          <DefaultSliderSteps />
-        </Slider.Root>
-      </DefaultMenuSliderItem>
-    );
-  }
-
-  if (option.type === 'radio') {
-    return (
-      <DefaultFontRadioGroup
-        id={camelToKebabCase(type)}
-        label={translatedLabel}
-        value={$value}
-        values={option.values}
-        onChange={onChange}
-      />
-    );
-  }
-
-  return null;
-}
-
-DefaultFontSetting.displayName = 'DefaultFontSetting';
-
-/* -------------------------------------------------------------------------------------------------
- * DefaultFontRadioGroup
- * -----------------------------------------------------------------------------------------------*/
-
-interface DefaultFontRadioGroupProps {
-  id: string;
-  label: string;
-  value: string;
-  values: FontRadioOption['values'];
-  onChange: (value: string) => void;
-}
-
-function DefaultFontRadioGroup({ id, label, value, values, onChange }: DefaultFontRadioGroupProps) {
-  const radioOptions = createRadioOptions(values),
-    { translations } = useDefaultLayoutContext(),
-    hint = React.useMemo(() => {
-      const label = radioOptions.find((radio) => radio.value === value)?.label || '';
-      return i18n(translations, label);
-    }, [value, radioOptions]);
-
-  return (
-    <Menu.Root className={`vds-${id}-menu vds-menu`}>
-      <DefaultMenuButton label={label} hint={hint} />
-      <Menu.Items className="vds-menu-items">
-        <DefaultMenuRadioGroup value={value} options={radioOptions} onChange={onChange} />
-      </Menu.Items>
-    </Menu.Root>
-  );
-}
-
-DefaultFontRadioGroup.displayName = 'DefaultFontRadioGroup';
-
-/* -------------------------------------------------------------------------------------------------
- * DefaultResetMenuItem
- * -----------------------------------------------------------------------------------------------*/
-
-function DefaultResetMenuItem() {
-  const resetText = useDefaultLayoutWord('Reset');
-
-  return (
-    <button className="vds-menu-item" role="menuitem" onClick={onFontReset}>
-      <span className="vds-menu-item-label">{resetText}</span>
-    </button>
-  );
-}
-
-DefaultResetMenuItem.displayName = 'DefaultResetMenuItem';

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

@@ -1,72 +0,0 @@
-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

@@ -1,135 +0,0 @@
-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

@@ -1,92 +0,0 @@
-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 };