@hanifhan1f/vidstack-react 1.12.13 → 1.12.14

package/src/components/announcer.tsx

@@ -1,47 +0,0 @@
-import * as React from 'react';
-
-import { composeRefs, createReactComponent, type ReactElementProps } from 'maverick.js/react';
-
-import { MediaAnnouncerInstance } from './primitives/instances';
-import { Primitive } from './primitives/nodes';
-
-/* -------------------------------------------------------------------------------------------------
- * MediaAnnouncer
- * -----------------------------------------------------------------------------------------------*/
-
-const MediaAnnouncerBridge = createReactComponent(MediaAnnouncerInstance, {
-  events: ['onChange'],
-});
-
-export interface MediaAnnouncerProps extends ReactElementProps<MediaAnnouncerInstance> {
-  ref?: React.Ref<HTMLElement>;
-}
-
-/**
- *
- * @docs {@link https://www.vidstack.io/docs/player/components/display/announcer}
- * @example
- * ```tsx
- * <MediaAnnouncer />
- * ```
- */
-const MediaAnnouncer = React.forwardRef<HTMLElement, MediaAnnouncerProps>(
-  ({ style, children, ...props }, forwardRef) => {
-    return (
-      <MediaAnnouncerBridge {...(props as Omit<MediaAnnouncerProps, 'ref'>)}>
-        {(props) => (
-          <Primitive.div
-            {...props}
-            style={{ display: 'contents', ...style }}
-            ref={composeRefs(props.ref as React.Ref<any>, forwardRef as React.Ref<any>)}
-          >
-            {children}
-          </Primitive.div>
-        )}
-      </MediaAnnouncerBridge>
-    );
-  },
-);
-
-MediaAnnouncer.displayName = 'MediaAnnouncer';
-export { MediaAnnouncer };

package/src/components/layouts/default/audio-layout.tsx

@@ -1,231 +0,0 @@
-import * as React from 'react';
-
-import { useSignal } from 'maverick.js/react';
-import { listenEvent, toggleClass } from 'maverick.js/std';
-
-import { useChapterTitle } from '../../../hooks/use-chapter-title';
-import { useResizeObserver, useTransitionActive } from '../../../hooks/use-dom';
-import { useMediaContext } from '../../../hooks/use-media-context';
-import { useMediaState } from '../../../hooks/use-media-state';
-import { createComputed } from '../../../hooks/use-signals';
-import * as Controls from '../../ui/controls';
-import { useLayoutName } from '../utils';
-import { i18n, useDefaultLayoutContext } from './context';
-import { createDefaultMediaLayout, type DefaultLayoutProps } from './media-layout';
-import {
-  slot,
-  useDefaultAudioLayoutSlots,
-  type DefaultAudioLayoutSlots,
-  type DefaultLayoutMenuSlotName,
-  type Slots,
-} from './slots';
-import { DefaultAnnouncer } from './ui/announcer';
-import {
-  DefaultCaptionButton,
-  DefaultDownloadButton,
-  DefaultPlayButton,
-  DefaultSeekButton,
-} from './ui/buttons';
-import { DefaultCaptions } from './ui/captions';
-import { DefaultControlsSpacer } from './ui/controls';
-import { DefaultChaptersMenu } from './ui/menus/chapters-menu';
-import { DefaultSettingsMenu } from './ui/menus/settings-menu';
-import { DefaultTimeSlider, DefaultVolumePopup } from './ui/sliders';
-import { DefaultTimeInvert } from './ui/time';
-
-/* -------------------------------------------------------------------------------------------------
- * DefaultAudioLayout
- * -----------------------------------------------------------------------------------------------*/
-
-const MediaLayout = createDefaultMediaLayout({
-  type: 'audio',
-  smLayoutWhen({ width }) {
-    return width < 576;
-  },
-  renderLayout: () => <AudioLayout />,
-});
-
-export interface DefaultAudioLayoutProps extends DefaultLayoutProps<DefaultAudioLayoutSlots> {}
-
-/**
- * The audio layout is our production-ready UI that's displayed when the media view type is set to
- * 'audio'. It includes support for audio tracks, slider chapters, captions, live streams
- * and more out of the box.
- *
- * @attr data-match - Whether this layout is being used.
- * @attr data-sm - The small layout is active
- * @attr data-lg - The large layout is active.
- * @attr data-size - The active layout size (sm or lg).
- * @example
- * ```tsx
- * <MediaPlayer src="audio.mp3">
- *   <MediaProvider />
- *   <DefaultAudioLayout icons={defaultLayoutIcons} />
- * </MediaPlayer>
- * ```
- */
-function DefaultAudioLayout(props: DefaultAudioLayoutProps) {
-  const [scrubbing, setScrubbing] = React.useState(false),
-    $pointer = useMediaState('pointer');
-
-  const onStartScrubbing = React.useCallback((event: React.SyntheticEvent) => {
-    const { target } = event,
-      hasTimeSlider = !!(target instanceof HTMLElement && target.closest('.vds-time-slider'));
-    if (!hasTimeSlider) return;
-    event.nativeEvent.stopImmediatePropagation();
-    setScrubbing(true);
-  }, []);
-
-  const onStopScrubbing = React.useCallback(() => {
-    setScrubbing(false);
-  }, []);
-
-  React.useEffect(() => {
-    if (scrubbing) return listenEvent(window, 'pointerdown', onStopScrubbing);
-  }, [scrubbing, onStopScrubbing]);
-
-  return (
-    <MediaLayout
-      {...props}
-      data-scrubbing={scrubbing ? '' : null}
-      onPointerDown={scrubbing ? (e) => e.stopPropagation() : undefined}
-      onPointerDownCapture={$pointer === 'coarse' && !scrubbing ? onStartScrubbing : undefined}
-    />
-  );
-}
-
-DefaultAudioLayout.displayName = 'DefaultAudioLayout';
-export { DefaultAudioLayout };
-
-/* -------------------------------------------------------------------------------------------------
- * AudioLayout
- * -----------------------------------------------------------------------------------------------*/
-
-function AudioLayout() {
-  const slots = useDefaultAudioLayoutSlots();
-
-  useLayoutName('audio');
-
-  return (
-    <>
-      <DefaultAnnouncer />
-      <DefaultCaptions />
-      <Controls.Root className="vds-controls">
-        <Controls.Group className="vds-controls-group">
-          {slot(slots, 'seekBackwardButton', <DefaultSeekButton backward tooltip="top start" />)}
-          {slot(slots, 'playButton', <DefaultPlayButton tooltip="top center" />)}
-          {slot(slots, 'seekForwardButton', <DefaultSeekButton tooltip="top center" />)}
-          <DefaultAudioTitle />
-          {slot(slots, 'timeSlider', <DefaultTimeSlider />)}
-          <DefaultTimeInvert slots={slots} />
-          <DefaultVolumePopup orientation="vertical" tooltip="top" slots={slots} />
-          {slot(slots, 'captionButton', <DefaultCaptionButton tooltip="top center" />)}
-          {slot(slots, 'downloadButton', <DefaultDownloadButton />)}
-          <DefaultAudioMenus slots={slots} />
-        </Controls.Group>
-      </Controls.Root>
-    </>
-  );
-}
-
-AudioLayout.displayName = 'AudioLayout';
-
-/* -------------------------------------------------------------------------------------------------
- * DefaultAudioMenus
- * -----------------------------------------------------------------------------------------------*/
-
-function DefaultAudioMenus({ slots }: { slots?: Slots<DefaultLayoutMenuSlotName> }) {
-  const { isSmallLayout, noModal } = useDefaultLayoutContext(),
-    placement = noModal ? 'top end' : !isSmallLayout ? 'top end' : null;
-  return (
-    <>
-      {slot(
-        slots,
-        'chaptersMenu',
-        <DefaultChaptersMenu tooltip="top" placement={placement} portalClass="vds-audio-layout" />,
-      )}
-      {slot(
-        slots,
-        'settingsMenu',
-        <DefaultSettingsMenu
-          tooltip="top end"
-          placement={placement}
-          portalClass="vds-audio-layout"
-          slots={slots}
-        />,
-      )}
-    </>
-  );
-}
-
-DefaultAudioMenus.displayName = 'DefaultAudioMenus';
-
-/* -------------------------------------------------------------------------------------------------
- * DefaultAudioTitle
- * -----------------------------------------------------------------------------------------------*/
-
-function DefaultAudioTitle() {
-  const [rootEl, setRootEl] = React.useState<HTMLElement | null>(null),
-    media = useMediaContext(),
-    { translations } = useDefaultLayoutContext(),
-    [isTextOverflowing, setIsTextOverflowing] = React.useState(false);
-
-  const isContinued = createComputed(() => {
-    const { started, currentTime } = media.$state;
-    return started() || currentTime() > 0;
-  });
-
-  const $title = useSignal(
-    createComputed(() => {
-      const { title, ended } = media.$state;
-      if (!title()) return '';
-      const word = ended() ? 'Replay' : isContinued() ? 'Continue' : 'Play';
-      return `${i18n(translations, word)}: ${title()}`;
-    }),
-  );
-
-  const chapterTitle = useChapterTitle(),
-    $isContinued = useSignal(isContinued),
-    $chapterTitle = $isContinued ? chapterTitle : '',
-    isTransitionActive = useTransitionActive(rootEl);
-
-  React.useEffect(() => {
-    if (isTransitionActive && document.activeElement === document.body) {
-      media.player.el?.focus({ preventScroll: true });
-    }
-  }, []);
-
-  const onResize = React.useCallback(() => {
-    const el = rootEl,
-      isOverflowing = !!el && !isTransitionActive && el.clientWidth < el.children[0]!.clientWidth;
-    if (el) toggleClass(el, 'vds-marquee', isOverflowing);
-    setIsTextOverflowing(isOverflowing);
-  }, [rootEl, isTransitionActive]);
-
-  useResizeObserver(rootEl, onResize);
-
-  return $title ? (
-    <span className="vds-title" title={$title} ref={setRootEl}>
-      <AudioTitle title={$title} chapterTitle={$chapterTitle} />
-      {isTextOverflowing && !isTransitionActive ? (
-        <AudioTitle title={$title} chapterTitle={$chapterTitle} />
-      ) : null}
-    </span>
-  ) : (
-    <DefaultControlsSpacer />
-  );
-}
-
-DefaultAudioTitle.displayName = 'DefaultAudioTitle';
-
-function AudioTitle({ title, chapterTitle }: { title: string; chapterTitle: string }) {
-  const slots = useDefaultAudioLayoutSlots();
-  return (
-    <span className="vds-title-text">
-      {slot(slots, 'title', title)}
-      {slot(slots, 'chapterTitle', <span className="vds-chapter-title">{chapterTitle}</span>)}
-    </span>
-  );
-}
-
-AudioTitle.displayName = 'AudioTitle';

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

@@ -1,28 +0,0 @@
-import * as React from 'react';
-
-import type { ReadSignal, WriteSignal } from 'maverick.js';
-
-import type { DefaultLayoutProps } from './media-layout';
-
-export const DefaultLayoutContext = React.createContext<DefaultLayoutContext>({} as any);
-DefaultLayoutContext.displayName = 'DefaultLayoutContext';
-
-interface DefaultLayoutContext extends DefaultLayoutProps {
-  layoutEl: ReadSignal<HTMLElement | null>;
-  isSmallLayout: boolean;
-  userPrefersAnnouncements: WriteSignal<boolean>;
-  userPrefersKeyboardAnimations: WriteSignal<boolean>;
-}
-
-export function useDefaultLayoutContext() {
-  return React.useContext(DefaultLayoutContext);
-}
-
-export function useDefaultLayoutWord(word: string) {
-  const { translations } = useDefaultLayoutContext();
-  return i18n(translations, word);
-}
-
-export function i18n(translations: any, word: string) {
-  return translations?.[word] ?? word;
-}

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

@@ -1,13 +0,0 @@
-import { useColorSchemePreference } from '../../../hooks/use-dom';
-import type { DefaultLayoutProps } from './media-layout';
-
-export function useColorSchemeClass(colorScheme: DefaultLayoutProps['colorScheme']) {
-  const systemColorPreference = useColorSchemePreference();
-  if (colorScheme === 'default') {
-    return null;
-  } else if (colorScheme === 'system') {
-    return systemColorPreference;
-  } else {
-    return colorScheme;
-  }
-}

package/src/components/layouts/default/icons.tsx

@@ -1,225 +0,0 @@
-import * as React from 'react';
-
-import accessibilityIconPaths from 'media-icons/dist/icons/accessibility.js';
-import airPlayIconPaths from 'media-icons/dist/icons/airplay.js';
-import arrowDownIconPaths from 'media-icons/dist/icons/arrow-down.js';
-import arrowLeftIconPaths from 'media-icons/dist/icons/arrow-left.js';
-import arrowUpIconPaths from 'media-icons/dist/icons/arrow-up.js';
-import chaptersIconPaths from 'media-icons/dist/icons/chapters.js';
-import checkIconPaths from 'media-icons/dist/icons/check.js';
-import arrowRightIconPaths from 'media-icons/dist/icons/chevron-right.js';
-import googleCastIconPaths from 'media-icons/dist/icons/chromecast.js';
-import ccOnIconPaths from 'media-icons/dist/icons/closed-captions-on.js';
-import ccIconPaths from 'media-icons/dist/icons/closed-captions.js';
-import downloadIconPaths from 'media-icons/dist/icons/download.js';
-import eyeIconPaths from 'media-icons/dist/icons/eye.js';
-import fastBackwardIconPaths from 'media-icons/dist/icons/fast-backward.js';
-import fastForwardIconPaths from 'media-icons/dist/icons/fast-forward.js';
-import exitFullscreenIconPaths from 'media-icons/dist/icons/fullscreen-exit.js';
-import enterFullscreenIconPaths from 'media-icons/dist/icons/fullscreen.js';
-import musicIconPaths from 'media-icons/dist/icons/music.js';
-import muteIconPaths from 'media-icons/dist/icons/mute.js';
-import noEyeIconPaths from 'media-icons/dist/icons/no-eye.js';
-import pauseIconPaths from 'media-icons/dist/icons/pause.js';
-import exitPIPIconPaths from 'media-icons/dist/icons/picture-in-picture-exit.js';
-import enterPIPIconPaths from 'media-icons/dist/icons/picture-in-picture.js';
-import playIconPaths from 'media-icons/dist/icons/play.js';
-import playbackIconPaths from 'media-icons/dist/icons/playback-speed-circle.js';
-import replayIconPaths from 'media-icons/dist/icons/replay.js';
-import seekBackwardIconPaths from 'media-icons/dist/icons/seek-backward-10.js';
-import seekForwardIconPaths from 'media-icons/dist/icons/seek-forward-10.js';
-import settingsIconPaths from 'media-icons/dist/icons/settings.js';
-import volumeHighIconPaths from 'media-icons/dist/icons/volume-high.js';
-import volumeLowIconPaths from 'media-icons/dist/icons/volume-low.js';
-
-import { Icon } from '../../../icon';
-
-function createIcon(paths: string) {
-  function DefaultLayoutIcon(props: DefaultLayoutIconProps) {
-    return <Icon paths={paths} {...props} />;
-  }
-
-  DefaultLayoutIcon.displayName = 'DefaultLayoutIcon';
-  return DefaultLayoutIcon;
-}
-
-export const defaultLayoutIcons: DefaultLayoutIcons = {
-  AirPlayButton: {
-    Default: createIcon(airPlayIconPaths),
-  },
-  GoogleCastButton: {
-    Default: createIcon(googleCastIconPaths),
-  },
-  PlayButton: {
-    Play: createIcon(playIconPaths),
-    Pause: createIcon(pauseIconPaths),
-    Replay: createIcon(replayIconPaths),
-  },
-  MuteButton: {
-    Mute: createIcon(muteIconPaths),
-    VolumeLow: createIcon(volumeLowIconPaths),
-    VolumeHigh: createIcon(volumeHighIconPaths),
-  },
-  CaptionButton: {
-    On: createIcon(ccOnIconPaths),
-    Off: createIcon(ccIconPaths),
-  },
-  PIPButton: {
-    Enter: createIcon(enterPIPIconPaths),
-    Exit: createIcon(exitPIPIconPaths),
-  },
-  FullscreenButton: {
-    Enter: createIcon(enterFullscreenIconPaths),
-    Exit: createIcon(exitFullscreenIconPaths),
-  },
-  SeekButton: {
-    Backward: createIcon(seekBackwardIconPaths),
-    Forward: createIcon(seekForwardIconPaths),
-  },
-  DownloadButton: {
-    Default: createIcon(downloadIconPaths),
-  },
-  Menu: {
-    Accessibility: createIcon(accessibilityIconPaths),
-    ArrowLeft: createIcon(arrowLeftIconPaths),
-    ArrowRight: createIcon(arrowRightIconPaths),
-    Audio: createIcon(musicIconPaths),
-    Chapters: createIcon(chaptersIconPaths),
-    Captions: createIcon(ccIconPaths),
-    Playback: createIcon(playbackIconPaths),
-    Settings: createIcon(settingsIconPaths),
-    AudioBoostUp: createIcon(volumeHighIconPaths),
-    AudioBoostDown: createIcon(volumeLowIconPaths),
-    SpeedUp: createIcon(fastForwardIconPaths),
-    SpeedDown: createIcon(fastBackwardIconPaths),
-    QualityUp: createIcon(arrowUpIconPaths),
-    QualityDown: createIcon(arrowDownIconPaths),
-    FontSizeUp: createIcon(arrowUpIconPaths),
-    FontSizeDown: createIcon(arrowDownIconPaths),
-    OpacityUp: createIcon(eyeIconPaths),
-    OpacityDown: createIcon(noEyeIconPaths),
-    RadioCheck: createIcon(checkIconPaths),
-  },
-  KeyboardDisplay: {
-    Play: createIcon(playIconPaths),
-    Pause: createIcon(pauseIconPaths),
-    Mute: createIcon(muteIconPaths),
-    VolumeUp: createIcon(volumeHighIconPaths),
-    VolumeDown: createIcon(volumeLowIconPaths),
-    EnterFullscreen: createIcon(enterFullscreenIconPaths),
-    ExitFullscreen: createIcon(exitFullscreenIconPaths),
-    EnterPiP: createIcon(enterPIPIconPaths),
-    ExitPiP: createIcon(exitPIPIconPaths),
-    CaptionsOn: createIcon(ccOnIconPaths),
-    CaptionsOff: createIcon(ccIconPaths),
-    SeekForward: createIcon(fastForwardIconPaths),
-    SeekBackward: createIcon(fastBackwardIconPaths),
-  },
-};
-
-export interface DefaultLayoutIconProps
-  extends React.PropsWithoutRef<React.SVGProps<SVGSVGElement>> {}
-
-export interface DefaultLayoutIcon {
-  (props: DefaultLayoutIconProps): React.ReactNode;
-}
-
-export interface DefaultAirPlayButtonIcons {
-  Default: DefaultLayoutIcon;
-  Connecting?: DefaultLayoutIcon;
-  Connected?: DefaultLayoutIcon;
-}
-
-export interface DefaultGoogleCastButtonIcons {
-  Default: DefaultLayoutIcon;
-  Connecting?: DefaultLayoutIcon;
-  Connected?: DefaultLayoutIcon;
-}
-
-export interface DefaultPlayButtonIcons {
-  Play: DefaultLayoutIcon;
-  Pause: DefaultLayoutIcon;
-  Replay: DefaultLayoutIcon;
-}
-
-export interface DefaultMuteButtonIcons {
-  Mute: DefaultLayoutIcon;
-  VolumeLow: DefaultLayoutIcon;
-  VolumeHigh: DefaultLayoutIcon;
-}
-
-export interface DefaultCaptionButtonIcons {
-  On: DefaultLayoutIcon;
-  Off: DefaultLayoutIcon;
-}
-
-export interface DefaultPIPButtonIcons {
-  Enter: DefaultLayoutIcon;
-  Exit: DefaultLayoutIcon;
-}
-
-export interface DefaultFullscreenButtonIcons {
-  Enter: DefaultLayoutIcon;
-  Exit: DefaultLayoutIcon;
-}
-
-export interface DefaultSeekButtonIcons {
-  Backward: DefaultLayoutIcon;
-  Forward: DefaultLayoutIcon;
-}
-
-export interface DefaultDownloadButtonIcons {
-  Default: DefaultLayoutIcon;
-}
-
-export interface DefaultMenuIcons {
-  Accessibility: DefaultLayoutIcon;
-  ArrowLeft: DefaultLayoutIcon;
-  ArrowRight: DefaultLayoutIcon;
-  Audio: DefaultLayoutIcon;
-  AudioBoostUp: DefaultLayoutIcon;
-  AudioBoostDown: DefaultLayoutIcon;
-  Chapters: DefaultLayoutIcon;
-  Captions: DefaultLayoutIcon;
-  Playback: DefaultLayoutIcon;
-  Settings: DefaultLayoutIcon;
-  SpeedUp: DefaultLayoutIcon;
-  SpeedDown: DefaultLayoutIcon;
-  QualityUp: DefaultLayoutIcon;
-  QualityDown: DefaultLayoutIcon;
-  FontSizeUp: DefaultLayoutIcon;
-  FontSizeDown: DefaultLayoutIcon;
-  OpacityUp: DefaultLayoutIcon;
-  OpacityDown: DefaultLayoutIcon;
-  RadioCheck: DefaultLayoutIcon;
-}
-
-export interface DefaultKeyboardDisplayIcons {
-  Play: DefaultLayoutIcon;
-  Pause: DefaultLayoutIcon;
-  Mute: DefaultLayoutIcon;
-  VolumeUp: DefaultLayoutIcon;
-  VolumeDown: DefaultLayoutIcon;
-  EnterFullscreen: DefaultLayoutIcon;
-  ExitFullscreen: DefaultLayoutIcon;
-  EnterPiP: DefaultLayoutIcon;
-  ExitPiP: DefaultLayoutIcon;
-  CaptionsOn: DefaultLayoutIcon;
-  CaptionsOff: DefaultLayoutIcon;
-  SeekForward: DefaultLayoutIcon;
-  SeekBackward: DefaultLayoutIcon;
-}
-
-export interface DefaultLayoutIcons {
-  AirPlayButton: DefaultAirPlayButtonIcons;
-  GoogleCastButton: DefaultGoogleCastButtonIcons;
-  PlayButton: DefaultPlayButtonIcons;
-  MuteButton: DefaultMuteButtonIcons;
-  CaptionButton: DefaultCaptionButtonIcons;
-  PIPButton: DefaultPIPButtonIcons;
-  FullscreenButton: DefaultFullscreenButtonIcons;
-  SeekButton: DefaultSeekButtonIcons;
-  DownloadButton?: DefaultDownloadButtonIcons;
-  Menu: DefaultMenuIcons;
-  KeyboardDisplay?: Partial<DefaultKeyboardDisplayIcons>;
-}

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

@@ -1,11 +0,0 @@
-export type {
-  DefaultLayoutSlots,
-  DefaultAudioLayoutSlots,
-  DefaultVideoLayoutSlots,
-  DefaultLayoutSlotName,
-  DefaultLayoutMenuSlotName,
-} from './slots';
-export type { DefaultLayoutTranslations, DefaultLayoutWord } from 'vidstack';
-export type { DefaultLayoutProps } from './media-layout';
-export * from './context';
-export * from './ui';