@hanifhan1f/vidstack-react 1.12.13 → 1.12.15

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

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

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

@@ -1,12 +0,0 @@
-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]);
-}

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

@@ -1,136 +0,0 @@
-import * as React from 'react';
-
-import { useSignal } from 'maverick.js/react';
-import type { SliderOrientation, TooltipPlacement } from 'vidstack';
-
-import { useActive, useResizeObserver } from '../../../../hooks/use-dom';
-import { useMediaState } from '../../../../hooks/use-media-state';
-import { isRemotionSrc } from '../../../../providers/remotion/type-check';
-import type { TimeSliderInstance } from '../../../primitives/instances';
-import * as TimeSlider from '../../../ui/sliders/time-slider';
-import * as VolumeSlider from '../../../ui/sliders/volume-slider';
-import { RemotionSliderThumbnail } from '../../remotion-ui';
-import { useDefaultLayoutContext, useDefaultLayoutWord } from '../context';
-import { slot, type DefaultLayoutSlots } from '../slots';
-import { DefaultMuteButton } from './buttons';
-
-/* -------------------------------------------------------------------------------------------------
- * DefaultVolumePopup
- * -----------------------------------------------------------------------------------------------*/
-
-export interface DefaultVolumePopupProps {
-  slots?: DefaultLayoutSlots;
-  tooltip: TooltipPlacement;
-  orientation: SliderOrientation;
-}
-
-function DefaultVolumePopup({ tooltip, orientation, slots }: DefaultVolumePopupProps) {
-  const $pointer = useMediaState('pointer'),
-    $muted = useMediaState('muted'),
-    $canSetVolume = useMediaState('canSetVolume'),
-    [rootEl, setRootEl] = React.useState<HTMLElement | null>(null),
-    isRootActive = useActive(rootEl),
-    muteButton = slot(slots, 'muteButton', <DefaultMuteButton tooltip={tooltip} />);
-
-  if (!$canSetVolume) {
-    return muteButton;
-  }
-
-  return $pointer === 'coarse' && !$muted ? null : (
-    <div className="vds-volume" data-active={isRootActive ? '' : null} ref={setRootEl}>
-      {muteButton}
-      <div className="vds-volume-popup">
-        {slot(slots, 'volumeSlider', <DefaultVolumeSlider orientation={orientation} />)}
-      </div>
-    </div>
-  );
-}
-
-DefaultVolumePopup.displayName = 'DefaultVolumePopup';
-export { DefaultVolumePopup };
-
-/* -------------------------------------------------------------------------------------------------
- * DefaultVolumeSlider
- * -----------------------------------------------------------------------------------------------*/
-
-function DefaultVolumeSlider(props: VolumeSlider.RootProps) {
-  const label = useDefaultLayoutWord('Volume');
-  return (
-    <VolumeSlider.Root className="vds-volume-slider vds-slider" aria-label={label} {...props}>
-      <VolumeSlider.Track className="vds-slider-track" />
-      <VolumeSlider.TrackFill className="vds-slider-track-fill vds-slider-track" />
-      <VolumeSlider.Thumb className="vds-slider-thumb" />
-      <VolumeSlider.Preview className="vds-slider-preview" noClamp>
-        <VolumeSlider.Value className="vds-slider-value" />
-      </VolumeSlider.Preview>
-    </VolumeSlider.Root>
-  );
-}
-
-DefaultVolumeSlider.displayName = 'DefaultVolumeSlider';
-export { DefaultVolumeSlider };
-
-/* -------------------------------------------------------------------------------------------------
- * DefaultTimeSlider
- * -----------------------------------------------------------------------------------------------*/
-
-function DefaultTimeSlider() {
-  const [instance, setInstance] = React.useState<TimeSliderInstance | null>(null),
-    [width, setWidth] = React.useState(0),
-    $src = useMediaState('currentSrc'),
-    { thumbnails, sliderChaptersMinWidth, disableTimeSlider, seekStep, noScrubGesture } =
-      useDefaultLayoutContext(),
-    label = useDefaultLayoutWord('Seek'),
-    $RemotionSliderThumbnail = useSignal(RemotionSliderThumbnail);
-
-  const onResize = React.useCallback(() => {
-    const el = instance?.el;
-    el && setWidth(el.clientWidth);
-  }, [instance]);
-
-  useResizeObserver(instance?.el, onResize);
-
-  return (
-    <TimeSlider.Root
-      className="vds-time-slider vds-slider"
-      aria-label={label}
-      disabled={disableTimeSlider}
-      noSwipeGesture={noScrubGesture}
-      keyStep={seekStep}
-      ref={setInstance}
-    >
-      <TimeSlider.Chapters
-        className="vds-slider-chapters"
-        disabled={width < sliderChaptersMinWidth!}
-      >
-        {(cues, forwardRef) =>
-          cues.map((cue) => (
-            <div className="vds-slider-chapter" key={cue.startTime} ref={forwardRef}>
-              <TimeSlider.Track className="vds-slider-track" />
-              <TimeSlider.TrackFill className="vds-slider-track-fill vds-slider-track" />
-              <TimeSlider.Progress className="vds-slider-progress vds-slider-track" />
-            </div>
-          ))
-        }
-      </TimeSlider.Chapters>
-      <TimeSlider.Thumb className="vds-slider-thumb" />
-      <TimeSlider.Preview className="vds-slider-preview">
-        {thumbnails ? (
-          <TimeSlider.Thumbnail.Root
-            src={thumbnails}
-            className="vds-slider-thumbnail vds-thumbnail"
-          >
-            <TimeSlider.Thumbnail.Img />
-          </TimeSlider.Thumbnail.Root>
-        ) : $RemotionSliderThumbnail && isRemotionSrc($src) ? (
-          <$RemotionSliderThumbnail className="vds-slider-thumbnail vds-thumbnail" />
-        ) : null}
-        <TimeSlider.ChapterTitle className="vds-slider-chapter-title" />
-        <TimeSlider.Value className="vds-slider-value" />
-      </TimeSlider.Preview>
-    </TimeSlider.Root>
-  );
-}
-
-DefaultTimeSlider.displayName = 'DefaultTimeSlider';
-export { DefaultTimeSlider };

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

@@ -1,73 +0,0 @@
-import * as React from 'react';
-
-/* -------------------------------------------------------------------------------------------------
- * DefaultTimeGroup
- * -----------------------------------------------------------------------------------------------*/
-
-import { useMediaState } from '../../../../hooks/use-media-state';
-import { Time } from '../../../ui/time';
-import { slot } from '../slots';
-import { DefaultLiveButton } from './buttons';
-
-interface DefaultTimeGroupSlots {
-  currentTime?: React.ReactNode;
-  timeDivider?: React.ReactNode;
-  endTime?: React.ReactNode;
-}
-
-function DefaultTimeGroup({ slots }: { slots?: DefaultTimeGroupSlots }) {
-  const $duration = useMediaState('duration');
-
-  if (!$duration) return null;
-
-  return (
-    <div className="vds-time-group">
-      {slot(slots, 'currentTime', <Time className="vds-time" type="current" />)}
-      {slot(slots, 'timeDivider', <div className="vds-time-divider">/</div>)}
-      {slot(slots, 'endTime', <Time className="vds-time" type="duration" />)}
-    </div>
-  );
-}
-
-DefaultTimeGroup.displayName = 'DefaultTimeGroup';
-export { DefaultTimeGroup };
-
-/* -------------------------------------------------------------------------------------------------
- * DefaultTimeInfo
- * -----------------------------------------------------------------------------------------------*/
-
-interface DefaultTimeInfoSlots extends DefaultTimeGroupSlots {
-  liveButton?: React.ReactNode;
-}
-
-function DefaultTimeInfo({ slots }: { slots?: DefaultTimeInfoSlots }) {
-  const $live = useMediaState('live');
-  return $live ? (
-    slot(slots, 'liveButton', <DefaultLiveButton />)
-  ) : (
-    <DefaultTimeGroup slots={slots} />
-  );
-}
-
-DefaultTimeInfo.displayName = 'DefaultTimeInfo';
-export { DefaultTimeInfo };
-
-/* -------------------------------------------------------------------------------------------------
- * DefaultTimeInvert
- * -----------------------------------------------------------------------------------------------*/
-
-function DefaultTimeInvert({ slots }: { slots?: DefaultTimeInfoSlots }) {
-  const $live = useMediaState('live'),
-    $duration = useMediaState('duration');
-
-  return $live
-    ? slot(slots, 'liveButton', <DefaultLiveButton />)
-    : slot(
-        slots,
-        'endTime',
-        $duration ? <Time className="vds-time" type="current" toggle remainder /> : null,
-      );
-}
-
-DefaultTimeInvert.displayName = 'DefaultTimeInvert';
-export { DefaultTimeInvert };

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

@@ -1,24 +0,0 @@
-import * as React from 'react';
-
-import { useActiveTextTrack } from '../../../../hooks/use-active-text-track';
-import { useMediaState } from '../../../../hooks/use-media-state';
-import { ChapterTitle } from '../../../ui/chapter-title';
-import { Title } from '../../../ui/title';
-
-/* -------------------------------------------------------------------------------------------------
- * DefaultTitle
- * -----------------------------------------------------------------------------------------------*/
-
-function DefaultTitle() {
-  const $started = useMediaState('started'),
-    $title = useMediaState('title'),
-    $hasChapters = useActiveTextTrack('chapters');
-  return $hasChapters && ($started || !$title) ? (
-    <ChapterTitle className="vds-chapter-title" />
-  ) : (
-    <Title className="vds-chapter-title" />
-  );
-}
-
-DefaultTitle.displayName = 'DefaultTitle';
-export { DefaultTitle };

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

@@ -1,27 +0,0 @@
-import * as React from 'react';
-
-import type { TooltipPlacement } from 'vidstack';
-
-import * as Tooltip from '../../../ui/tooltip';
-import { useDefaultLayoutContext } from '../context';
-
-export interface DefaultTooltipProps {
-  content: string;
-  placement?: TooltipPlacement;
-  children: React.ReactNode;
-}
-
-function DefaultTooltip({ content, placement, children }: DefaultTooltipProps) {
-  const { showTooltipDelay } = useDefaultLayoutContext();
-  return (
-    <Tooltip.Root showDelay={showTooltipDelay}>
-      <Tooltip.Trigger asChild>{children}</Tooltip.Trigger>
-      <Tooltip.Content className="vds-tooltip-content" placement={placement}>
-        {content}
-      </Tooltip.Content>
-    </Tooltip.Root>
-  );
-}
-
-DefaultTooltip.displayName = 'DefaultTooltip';
-export { DefaultTooltip };

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

@@ -1,8 +0,0 @@
-export * from './audio-layout';
-export * from './video-layout';
-export * from './ui/menus/items/menu-checkbox';
-export * from './ui/menus/items/menu-items';
-export * from './ui/menus/items/menu-slider';
-export * from './ui/tooltip';
-export * from './icons';
-export { DefaultKeyboardDisplay, type DefaultKeyboardDisplayProps } from './ui/keyboard-display';