@hanifhan1f/vidstack-react 1.12.13 → 1.12.14

package/src/components/layouts/default/ui/controls.tsx

@@ -1,12 +0,0 @@
-import * as React from 'react';
-
-/* -------------------------------------------------------------------------------------------------
- * DefaultControlsSpacer
- * -----------------------------------------------------------------------------------------------*/
-
-function DefaultControlsSpacer() {
-  return <div className="vds-controls-spacer" />;
-}
-
-DefaultControlsSpacer.displayName = 'DefaultControlsSpacer';
-export { DefaultControlsSpacer };

package/src/components/layouts/default/ui/keyboard-display.tsx

@@ -1,132 +0,0 @@
-import * as React from 'react';
-
-import { useContext } from 'maverick.js';
-import { useSignal } from 'maverick.js/react';
-import { camelToKebabCase } from 'maverick.js/std';
-import { mediaContext } from 'vidstack';
-
-import { useMediaState } from '../../../../hooks/use-media-state';
-import { createComputed, createEffect } from '../../../../hooks/use-signals';
-import { Primitive, type PrimitivePropsWithRef } from '../../../primitives/nodes';
-import type { DefaultKeyboardDisplayIcons } from '../icons';
-
-export interface DefaultKeyboardDisplayProps
-  extends Omit<PrimitivePropsWithRef<'div'>, 'disabled'> {
-  icons: Partial<DefaultKeyboardDisplayIcons>;
-}
-
-const DefaultKeyboardDisplay = React.forwardRef<HTMLElement, DefaultKeyboardDisplayProps>(
-  ({ icons: Icons, ...props }, forwardRef) => {
-    const [visible, setVisible] = React.useState(false),
-      [Icon, setIcon] = React.useState<any>(null),
-      [count, setCount] = React.useState(0),
-      $lastKeyboardAction = useMediaState('lastKeyboardAction');
-
-    React.useEffect(() => {
-      setCount((n) => n + 1);
-    }, [$lastKeyboardAction]);
-
-    const actionDataAttr = React.useMemo(() => {
-      const action = $lastKeyboardAction?.action;
-      return action && visible ? camelToKebabCase(action) : null;
-    }, [visible, $lastKeyboardAction]);
-
-    const className = React.useMemo(
-      () =>
-        `vds-kb-action${!visible ? ' hidden' : ''}${props.className ? ` ${props.className}` : ''}`,
-      [visible],
-    );
-
-    const $$text = createComputed(getText),
-      $text = useSignal($$text);
-
-    createEffect(() => {
-      const Icon = getIcon(Icons);
-      setIcon(() => Icon);
-    }, [Icons]);
-
-    React.useEffect(() => {
-      setVisible(!!$lastKeyboardAction);
-      const id = setTimeout(() => setVisible(false), 500);
-      return () => {
-        setVisible(false);
-        window.clearTimeout(id);
-      };
-    }, [$lastKeyboardAction]);
-
-    return Icon ? (
-      <Primitive.div
-        {...props}
-        className={className}
-        data-action={actionDataAttr}
-        ref={forwardRef as React.Ref<any>}
-      >
-        <div className="vds-kb-text-wrapper">
-          <div className="vds-kb-text">{$text}</div>
-        </div>
-        <div className="vds-kb-bezel" key={count}>
-          <div className="vds-kb-icon">
-            <Icon />
-          </div>
-        </div>
-      </Primitive.div>
-    ) : null;
-  },
-);
-
-DefaultKeyboardDisplay.displayName = 'DefaultKeyboardDisplay';
-export { DefaultKeyboardDisplay };
-
-function getText() {
-  const { $state } = useContext(mediaContext),
-    action = $state.lastKeyboardAction()?.action,
-    audioGain = $state.audioGain() ?? 1;
-  switch (action) {
-    case 'toggleMuted':
-      return $state.muted() ? '0%' : getVolumeText($state.volume(), audioGain);
-    case 'volumeUp':
-    case 'volumeDown':
-      return getVolumeText($state.volume(), audioGain);
-    default:
-      return '';
-  }
-}
-
-function getVolumeText(volume: number, gain: number) {
-  return `${Math.round(volume * gain * 100)}%`;
-}
-
-function getIcon(Icons: Partial<DefaultKeyboardDisplayIcons>) {
-  const { $state } = useContext(mediaContext),
-    action = $state.lastKeyboardAction()?.action;
-  switch (action) {
-    case 'togglePaused':
-      return !$state.paused() ? Icons.Play : Icons.Pause;
-    case 'toggleMuted':
-      return $state.muted() || $state.volume() === 0
-        ? Icons.Mute
-        : $state.volume() >= 0.5
-          ? Icons.VolumeUp
-          : Icons.VolumeDown;
-    case 'toggleFullscreen':
-      return $state.fullscreen() ? Icons.EnterFullscreen : Icons.ExitFullscreen;
-    case 'togglePictureInPicture':
-      return $state.pictureInPicture() ? Icons.EnterPiP : Icons.ExitPiP;
-    case 'toggleCaptions':
-      return $state.hasCaptions()
-        ? $state.textTrack()
-          ? Icons.CaptionsOn
-          : Icons.CaptionsOff
-        : null;
-    case 'volumeUp':
-      return Icons.VolumeUp;
-    case 'volumeDown':
-      return Icons.VolumeDown;
-    case 'seekForward':
-      return Icons.SeekForward;
-    case 'seekBackward':
-      return Icons.SeekBackward;
-    default:
-      return null;
-  }
-}

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

@@ -1,100 +0,0 @@
-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';
-
-/* -------------------------------------------------------------------------------------------------
- * 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 />
-        </DefaultMenuSection>
-
-        <DefaultMenuSection>
-          <DefaultFontMenu />
-        </DefaultMenuSection>
-
-        {slot(slots, 'accessibilityMenuItemsEnd', null)}
-      </Menu.Content>
-    </Menu.Root>
-  );
-}
-
-DefaultAccessibilityMenu.displayName = 'DefaultAccessibilityMenu';
-export { DefaultAccessibilityMenu };
-
-/* -------------------------------------------------------------------------------------------------
- * DefaultAnnouncementsMenuCheckbox
- * -----------------------------------------------------------------------------------------------*/
-
-function DefaultAnnouncementsMenuCheckbox() {
-  const { userPrefersAnnouncements } = useDefaultLayoutContext(),
-    label = useDefaultLayoutWord('Announcements');
-
-  function onChange(checked: boolean) {
-    userPrefersAnnouncements.set(checked);
-  }
-
-  return (
-    <DefaultMenuItem label={label}>
-      <DefaultMenuCheckbox
-        label={label}
-        defaultChecked
-        storageKey="vds-player::announcements"
-        onChange={onChange}
-      />
-    </DefaultMenuItem>
-  );
-}
-
-DefaultAnnouncementsMenuCheckbox.displayName = 'DefaultAnnouncementsMenuCheckbox';
-
-/* -------------------------------------------------------------------------------------------------
- * DefaultKeyboardAnimationsMenuCheckbox
- * -----------------------------------------------------------------------------------------------*/
-
-function DefaultKeyboardAnimationsMenuCheckbox() {
-  const $viewType = useMediaState('viewType'),
-    { userPrefersKeyboardAnimations, noKeyboardAnimations } = useDefaultLayoutContext(),
-    label = useDefaultLayoutWord('Keyboard Animations');
-
-  if ($viewType !== 'video' || noKeyboardAnimations) return null;
-
-  function onChange(checked: boolean) {
-    userPrefersKeyboardAnimations.set(checked);
-  }
-
-  return (
-    <DefaultMenuItem label={label}>
-      <DefaultMenuCheckbox
-        label={label}
-        defaultChecked
-        storageKey="vds-player::keyboard-animations"
-        onChange={onChange}
-      />
-    </DefaultMenuItem>
-  );
-}
-
-DefaultKeyboardAnimationsMenuCheckbox.displayName = 'DefaultKeyboardAnimationsMenuCheckbox';

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

@@ -1,167 +0,0 @@
-import * as React from 'react';
-
-import { isArray } from 'maverick.js/std';
-
-import { useAudioOptions } from '../../../../../hooks/options/use-audio-options';
-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
- * -----------------------------------------------------------------------------------------------*/
-
-interface DefaultAudioMenuProps {
-  slots?: Slots<DefaultLayoutMenuSlotName>;
-}
-
-function DefaultAudioMenu({ slots }: DefaultAudioMenuProps) {
-  const label = useDefaultLayoutWord('Audio'),
-    $canSetAudioGain = useMediaState('canSetAudioGain'),
-    $audioTracks = useMediaState('audioTracks'),
-    { noAudioGain, icons: Icons } = useDefaultLayoutContext(),
-    hasGainSlider = $canSetAudioGain && !noAudioGain,
-    $disabled = !hasGainSlider && $audioTracks.length <= 1;
-
-  if ($disabled) return null;
-
-  return (
-    <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>
-  );
-}
-
-DefaultAudioMenu.displayName = 'DefaultAudioMenu';
-export { DefaultAudioMenu };
-
-/* -------------------------------------------------------------------------------------------------
- * DefaultAudioBoostSection
- * -----------------------------------------------------------------------------------------------*/
-
-function DefaultAudioBoostMenuSection() {
-  const $audioGain = useMediaState('audioGain'),
-    label = useDefaultLayoutWord('Boost'),
-    value = Math.round((($audioGain ?? 1) - 1) * 100) + '%',
-    $canSetAudioGain = useMediaState('canSetAudioGain'),
-    { noAudioGain, icons: Icons } = useDefaultLayoutContext(),
-    $disabled = !$canSetAudioGain || noAudioGain,
-    min = useGainMin(),
-    max = useGainMax();
-
-  if ($disabled) return null;
-
-  return (
-    <DefaultMenuSection label={label} value={value}>
-      <DefaultMenuSliderItem
-        UpIcon={Icons.Menu.AudioBoostUp}
-        DownIcon={Icons.Menu.AudioBoostDown}
-        isMin={(($audioGain ?? 1) - 1) * 100 <= min}
-        isMax={(($audioGain ?? 1) - 1) * 100 === max}
-      >
-        <DefaultAudioGainSlider />
-      </DefaultMenuSliderItem>
-    </DefaultMenuSection>
-  );
-}
-
-DefaultAudioBoostMenuSection.displayName = 'DefaultAudioBoostMenuSection';
-
-function useGainMin() {
-  const { audioGains } = useDefaultLayoutContext(),
-    min = isArray(audioGains) ? audioGains[0] : audioGains?.min;
-  return min ?? 0;
-}
-
-function useGainMax() {
-  const { audioGains } = useDefaultLayoutContext(),
-    max = isArray(audioGains) ? audioGains[audioGains.length - 1] : audioGains?.max;
-  return max ?? 300;
-}
-
-function useGainStep() {
-  const { audioGains } = useDefaultLayoutContext(),
-    step = isArray(audioGains) ? audioGains[1] - audioGains[0] : audioGains?.step;
-  return step || 25;
-}
-
-/* -------------------------------------------------------------------------------------------------
- * DefaultAudioGainSlider
- * -----------------------------------------------------------------------------------------------*/
-
-function DefaultAudioGainSlider() {
-  const label = useDefaultLayoutWord('Audio Boost'),
-    min = useGainMin(),
-    max = useGainMax(),
-    step = useGainStep();
-  return (
-    <AudioGainSlider.Root
-      className="vds-audio-gain-slider vds-slider"
-      aria-label={label}
-      min={min}
-      max={max}
-      step={step}
-      keyStep={step}
-    >
-      <DefaultSliderParts />
-      <DefaultSliderSteps />
-    </AudioGainSlider.Root>
-  );
-}
-
-DefaultAudioGainSlider.displayName = 'DefaultAudioGainSlider';
-
-/* -------------------------------------------------------------------------------------------------
- * DefaultAudioTracksMenu
- * -----------------------------------------------------------------------------------------------*/
-
-function DefaultAudioTracksMenu() {
-  const { icons: Icons } = useDefaultLayoutContext(),
-    label = useDefaultLayoutWord('Track'),
-    defaultText = useDefaultLayoutWord('Default'),
-    $track = useMediaState('audioTrack'),
-    options = useAudioOptions();
-
-  if (options.disabled) return null;
-
-  return (
-    <Menu.Root className="vds-audio-track-menu vds-menu">
-      <DefaultMenuButton
-        label={label}
-        hint={$track?.label ?? defaultText}
-        disabled={options.disabled}
-        Icon={Icons.Menu.Audio}
-      />
-      <Menu.Content className="vds-menu-items">
-        <Menu.RadioGroup
-          className="vds-audio-radio-group vds-radio-group"
-          value={options.selectedValue}
-        >
-          {options.map(({ label, value, select }) => (
-            <Menu.Radio
-              className="vds-audio-radio vds-radio"
-              value={value}
-              onSelect={select}
-              key={value}
-            >
-              <Icons.Menu.RadioCheck className="vds-icon" />
-              <span className="vds-radio-label">{label}</span>
-            </Menu.Radio>
-          ))}
-        </Menu.RadioGroup>
-      </Menu.Content>
-    </Menu.Root>
-  );
-}
-
-DefaultAudioTracksMenu.displayName = 'DefaultAudioTracksMenu';

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

@@ -1,61 +0,0 @@
-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
- * -----------------------------------------------------------------------------------------------*/
-
-interface DefaultCaptionMenuProps {
-  slots?: Slots<DefaultLayoutMenuSlotName>;
-}
-
-function DefaultCaptionMenu({ slots }: DefaultCaptionMenuProps) {
-  const { icons: Icons } = useDefaultLayoutContext(),
-    label = useDefaultLayoutWord('Captions'),
-    offText = useDefaultLayoutWord('Off'),
-    options = useCaptionOptions({ off: offText }),
-    hint = options.selectedTrack?.label ?? offText;
-
-  if (options.disabled) return null;
-
-  return (
-    <Menu.Root className="vds-captions-menu vds-menu">
-      <DefaultMenuButton
-        label={label}
-        hint={hint}
-        disabled={options.disabled}
-        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}
-        >
-          {options.map(({ label, value, select }) => (
-            <Menu.Radio
-              className="vds-caption-radio vds-radio"
-              value={value}
-              onSelect={select}
-              key={value}
-            >
-              <Icons.Menu.RadioCheck className="vds-icon" />
-              <span className="vds-radio-label">{label}</span>
-            </Menu.Radio>
-          ))}
-        </Menu.RadioGroup>
-
-        {slot(slots, 'captionsMenuItemsEnd', null)}
-      </Menu.Content>
-    </Menu.Root>
-  );
-}
-
-DefaultCaptionMenu.displayName = 'DefaultCaptionMenu';
-export { DefaultCaptionMenu };

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

@@ -1,132 +0,0 @@
-import * as React from 'react';
-
-import { useSignal } from 'maverick.js/react';
-import { flushSync } from 'react-dom';
-
-import { useChapterOptions } from '../../../../../hooks/options/use-chapter-options';
-import { useMediaState } from '../../../../../hooks/use-media-state';
-import { isRemotionSrc } from '../../../../../providers/remotion/type-check';
-import * as Menu from '../../../../ui/menu';
-import * as Thumbnail from '../../../../ui/thumbnail';
-import { RemotionThumbnail } from '../../../remotion-ui';
-import { useDefaultLayoutContext, useDefaultLayoutWord } from '../../context';
-import { useColorSchemeClass } from '../../hooks';
-import { DefaultTooltip } from '../tooltip';
-import type { DefaultMediaMenuProps } from './settings-menu';
-import { useParentDialogEl } from './utils';
-
-/* -------------------------------------------------------------------------------------------------
- * DefaultChaptersMenu
- * -----------------------------------------------------------------------------------------------*/
-
-function DefaultChaptersMenu({ tooltip, placement, portalClass = '' }: DefaultMediaMenuProps) {
-  const {
-      showMenuDelay,
-      noModal,
-      isSmallLayout,
-      icons: Icons,
-      menuGroup,
-      menuContainer,
-      colorScheme,
-    } = useDefaultLayoutContext(),
-    chaptersText = useDefaultLayoutWord('Chapters'),
-    options = useChapterOptions(),
-    disabled = !options.length,
-    { thumbnails } = useDefaultLayoutContext(),
-    $src = useMediaState('currentSrc'),
-    $viewType = useMediaState('viewType'),
-    $offset = !isSmallLayout && menuGroup === 'bottom' && $viewType === 'video' ? 26 : 0,
-    $RemotionThumbnail = useSignal(RemotionThumbnail),
-    colorSchemeClass = useColorSchemeClass(colorScheme),
-    [isOpen, setIsOpen] = React.useState(false),
-    dialogEl = useParentDialogEl();
-
-  if (disabled) return null;
-
-  function onOpen() {
-    flushSync(() => {
-      setIsOpen(true);
-    });
-  }
-
-  function onClose() {
-    setIsOpen(false);
-  }
-
-  const Content = (
-    <Menu.Content
-      className="vds-chapters-menu-items vds-menu-items"
-      placement={placement}
-      offset={$offset}
-    >
-      {isOpen ? (
-        <Menu.RadioGroup
-          className="vds-chapters-radio-group vds-radio-group"
-          value={options.selectedValue}
-          data-thumbnails={thumbnails ? '' : null}
-        >
-          {options.map(
-            ({ cue, label, value, startTimeText, durationText, select, setProgressVar }) => (
-              <Menu.Radio
-                className="vds-chapter-radio vds-radio"
-                value={value}
-                key={value}
-                onSelect={select}
-                ref={setProgressVar}
-              >
-                {thumbnails ? (
-                  <Thumbnail.Root src={thumbnails} className="vds-thumbnail" time={cue.startTime}>
-                    <Thumbnail.Img />
-                  </Thumbnail.Root>
-                ) : $RemotionThumbnail && isRemotionSrc($src) ? (
-                  <$RemotionThumbnail className="vds-thumbnail" frame={cue.startTime * $src.fps!} />
-                ) : null}
-                <div className="vds-chapter-radio-content">
-                  <span className="vds-chapter-radio-label">{label}</span>
-                  <span className="vds-chapter-radio-start-time">{startTimeText}</span>
-                  <span className="vds-chapter-radio-duration">{durationText}</span>
-                </div>
-              </Menu.Radio>
-            ),
-          )}
-        </Menu.RadioGroup>
-      ) : null}
-    </Menu.Content>
-  );
-
-  return (
-    <Menu.Root
-      className="vds-chapters-menu vds-menu"
-      showDelay={showMenuDelay}
-      onOpen={onOpen}
-      onClose={onClose}
-    >
-      <DefaultTooltip content={chaptersText} placement={tooltip}>
-        <Menu.Button
-          className="vds-menu-button vds-button"
-          disabled={disabled}
-          aria-label={chaptersText}
-        >
-          <Icons.Menu.Chapters className="vds-icon" />
-        </Menu.Button>
-      </DefaultTooltip>
-      {noModal || !isSmallLayout ? (
-        Content
-      ) : (
-        <Menu.Portal
-          container={menuContainer ?? dialogEl}
-          className={portalClass + (colorSchemeClass ? ` ${colorSchemeClass}` : '')}
-          disabled="fullscreen"
-          data-sm={isSmallLayout ? '' : null}
-          data-lg={!isSmallLayout ? '' : null}
-          data-size={isSmallLayout ? 'sm' : 'lg'}
-        >
-          {Content}
-        </Menu.Portal>
-      )}
-    </Menu.Root>
-  );
-}
-
-DefaultChaptersMenu.displayName = 'DefaultChaptersMenu';
-export { DefaultChaptersMenu };