@hanifhan1f/vidstack-react 1.12.13 → 1.12.15

package/src/components/provider.tsx

@@ -1,187 +0,0 @@
-import * as React from 'react';
-
-import {
-  createReactComponent,
-  useSignal,
-  useStateContext,
-  type ReactElementProps,
-} from 'maverick.js/react';
-import { isString } from 'maverick.js/std';
-import { mediaState, type MediaProviderLoader } from 'vidstack';
-
-import { useMediaContext } from '../hooks/use-media-context';
-import { Icon } from '../icon';
-import { isRemotionProvider } from '../providers/remotion/type-check';
-import { MediaProviderInstance } from './primitives/instances';
-
-/* -------------------------------------------------------------------------------------------------
- * MediaProvider
- * -----------------------------------------------------------------------------------------------*/
-
-const MediaProviderBridge = createReactComponent(MediaProviderInstance);
-
-export interface MediaProviderProps
-  extends Omit<ReactElementProps<MediaProviderInstance>, 'loaders'> {
-  loaders?: Array<{ new (): MediaProviderLoader }>;
-  iframeProps?: React.IframeHTMLAttributes<HTMLIFrameElement>;
-  mediaProps?: React.HTMLAttributes<HTMLMediaElement>;
-  children?: React.ReactNode;
-  ref?: React.Ref<MediaProviderInstance>;
-}
-
-/**
- * Renders the current provider at this component location.
- *
- * @docs {@link https://www.vidstack.io/docs/player/components/media/provider}
- * @example
- * ```tsx
- * <MediaPlayer src="...">
- *   <MediaProvider />
- * </MediaPlayer>
- * ```
- */
-const MediaProvider = React.forwardRef<MediaProviderInstance, MediaProviderProps>(
-  ({ loaders = [], children, iframeProps, mediaProps, ...props }, forwardRef) => {
-    const reactLoaders = React.useMemo(() => loaders.map((Loader) => new Loader()), loaders);
-
-    return (
-      <MediaProviderBridge {...props} loaders={reactLoaders} ref={forwardRef}>
-        {(props, instance) => (
-          <div {...props}>
-            <MediaOutlet provider={instance} mediaProps={mediaProps} iframeProps={iframeProps} />
-            {children}
-          </div>
-        )}
-      </MediaProviderBridge>
-    );
-  },
-);
-
-MediaProvider.displayName = 'MediaProvider';
-export { MediaProvider };
-
-/* -------------------------------------------------------------------------------------------------
- * MediaOutlet
- * -----------------------------------------------------------------------------------------------*/
-
-interface MediaOutletProps {
-  provider: MediaProviderInstance;
-  mediaProps?: React.HTMLAttributes<HTMLMediaElement>;
-  iframeProps?: React.IframeHTMLAttributes<HTMLIFrameElement>;
-}
-
-function MediaOutlet({ provider, mediaProps, iframeProps }: MediaOutletProps) {
-  const { sources, crossOrigin, poster, remotePlaybackInfo, nativeControls, viewType } =
-      useStateContext(mediaState),
-    { loader } = provider.$state,
-    { $provider: $$provider, $providerSetup: $$providerSetup } = useMediaContext(),
-    $sources = useSignal(sources),
-    $nativeControls = useSignal(nativeControls),
-    $crossOrigin = useSignal(crossOrigin),
-    $poster = useSignal(poster),
-    $loader = useSignal(loader),
-    $provider = useSignal($$provider),
-    $providerSetup = useSignal($$providerSetup),
-    $remoteInfo = useSignal(remotePlaybackInfo),
-    $mediaType = $loader?.mediaType(),
-    $viewType = useSignal(viewType),
-    isAudioView = $viewType === 'audio',
-    isYouTubeEmbed = $loader?.name === 'youtube',
-    isVimeoEmbed = $loader?.name === 'vimeo',
-    isEmbed = isYouTubeEmbed || isVimeoEmbed,
-    isRemotion = $loader?.name === 'remotion',
-    isGoogleCast = $loader?.name === 'google-cast',
-    [googleCastIconPaths, setGoogleCastIconPaths] = React.useState(''),
-    [hasMounted, setHasMounted] = React.useState(false);
-
-  React.useEffect(() => {
-    if (!isGoogleCast || googleCastIconPaths) return;
-    import('media-icons/dist/icons/chromecast.js').then((mod) => {
-      setGoogleCastIconPaths(mod.default);
-    });
-  }, [isGoogleCast]);
-
-  React.useLayoutEffect(() => {
-    setHasMounted(true);
-  }, []);
-
-  if (isGoogleCast) {
-    return (
-      <div
-        className="vds-google-cast"
-        ref={(el) => {
-          provider.load(el);
-        }}
-      >
-        <Icon paths={googleCastIconPaths} />
-        {$remoteInfo?.deviceName ? (
-          <span className="vds-google-cast-info">
-            Google Cast on{' '}
-            <span className="vds-google-cast-device-name">{$remoteInfo.deviceName}</span>
-          </span>
-        ) : null}
-      </div>
-    );
-  }
-
-  if (isRemotion) {
-    return (
-      <div data-remotion-canvas>
-        <div
-          data-remotion-container
-          ref={(el) => {
-            provider.load(el);
-          }}
-        >
-          {isRemotionProvider($provider) && $providerSetup
-            ? React.createElement($provider.render)
-            : null}
-        </div>
-      </div>
-    );
-  }
-
-  return isEmbed
-    ? React.createElement(
-        React.Fragment,
-        null,
-        React.createElement('iframe', {
-          ...iframeProps,
-          className:
-            (iframeProps?.className ? `${iframeProps.className} ` : '') + isYouTubeEmbed
-              ? 'vds-youtube'
-              : 'vds-vimeo',
-          suppressHydrationWarning: true,
-          tabIndex: !$nativeControls ? -1 : undefined,
-          'aria-hidden': 'true',
-          'data-no-controls': !$nativeControls ? '' : undefined,
-          ref(el: HTMLElement) {
-            provider.load(el);
-          },
-        }),
-        !$nativeControls && !isAudioView
-          ? React.createElement('div', { className: 'vds-blocker' })
-          : null,
-      )
-    : $mediaType
-      ? React.createElement($mediaType === 'audio' ? 'audio' : 'video', {
-          ...mediaProps,
-          controls: $nativeControls ? true : null,
-          crossOrigin: typeof $crossOrigin === 'boolean' ? '' : $crossOrigin,
-          poster: $mediaType === 'video' && $nativeControls && $poster ? $poster : null,
-          suppressHydrationWarning: true,
-          children: !hasMounted
-            ? $sources.map(({ src, type }) =>
-                isString(src) ? (
-                  <source src={src} type={type !== '?' ? type : undefined} key={src} />
-                ) : null,
-              )
-            : null,
-          ref(el: HTMLMediaElement) {
-            provider.load(el);
-          },
-        })
-      : null;
-}
-
-MediaOutlet.displayName = 'MediaOutlet';

package/src/components/text-track.tsx

@@ -1,106 +0,0 @@
-import type { CaptionsFileFormat, CaptionsParserFactory } from 'media-captions';
-import type { VTTContent } from 'vidstack';
-
-import { createTextTrack } from '../hooks/create-text-track';
-
-/**
- * Creates a new `TextTrack` object and adds it to the player.
- *
- * @see {@link https://www.vidstack.io/docs/player/api/text-tracks}
- * @example
- * ```tsx
- * <MediaPlayer>
- *   <MediaProvider>
- *     <Track
- *       src="english.vtt"
- *       kind="subtitles"
- *       label="English"
- *       lang="en-US"
- *       default
- *     />
- *   </MediaProvider>
- * </MediaPlayer>
- * ```
- */
-function Track({ lang, ...props }: TrackProps) {
-  createTextTrack({ language: lang, ...props });
-  return null;
-}
-
-export interface TrackProps {
-  /**
-   * A unique identifier.
-   *
-   * @see {@link https://developer.mozilla.org/en-US/docs/Web/API/TextTrack/id}
-   */
-  readonly id?: string;
-  /**
-   * URL of the text track resource. This attribute must be specified and its URL value must have
-   * the same origin as the document — unless the <audio> or <video> parent element of the track
-   * element has a `crossorigin` attribute.
-   */
-  readonly src?: string;
-  /**
-   * Used to directly pass in text track file contents.
-   */
-  readonly content?: string | VTTContent;
-  /**
-   * The captions file format to be parsed or a custom parser factory (functions that returns a
-   * captions parser). Supported types include: 'vtt', 'srt', 'ssa', 'ass', and 'json'.
-   *
-   * @defaultValue 'vtt'
-   */
-  readonly type?: 'json' | CaptionsFileFormat | CaptionsParserFactory;
-  /**
-   * The text encoding type to be used when decoding data bytes to text.
-   *
-   * @defaultValue 'utf-8'
-   * @see {@link https://developer.mozilla.org/en-US/docs/Web/API/Encoding_API/Encodings}
-   *
-   */
-  readonly encoding?: string;
-  /**
-   * Indicates that the track should be enabled unless the user's preferences indicate that
-   * another track is more appropriate. This may only be used on one track element per media
-   * element.
-   *
-   * @defaultValue false
-   */
-  readonly default?: boolean;
-  /**
-   * The kind of text track this object represents. This decides how the track will be handled
-   * by the player.
-   *
-   * @see {@link https://developer.mozilla.org/en-US/docs/Web/API/TextTrack/kind}
-   */
-  readonly kind: TextTrackKind;
-  /**
-   * A human-readable label for the text track. This will be displayed to the user.
-   *
-   * @see {@link https://developer.mozilla.org/en-US/docs/Web/API/TextTrack/label}
-   */
-  readonly label?: string;
-  /**
-   * A string containing a language identifier. For example, `"en-US"` for United States English
-   * or `"pt-BR"` for Brazilian Portuguese.
-   *
-   * @see {@link https://developer.mozilla.org/en-US/docs/Web/API/TextTrack/language}
-   * @see {@link https://datatracker.ietf.org/doc/html/rfc5646}
-   */
-  readonly language?: string;
-  /**
-   * A string containing a language identifier. For example, `"en-US"` for United States English
-   * or `"pt-BR"` for Brazilian Portuguese. This is a short alias for `language`.
-   *
-   * @see {@link https://developer.mozilla.org/en-US/docs/Web/API/TextTrack/language}
-   * @see {@link https://datatracker.ietf.org/doc/html/rfc5646}
-   */
-  readonly lang?: TrackProps['language'];
-  /**
-   * React list key.
-   */
-  readonly key?: string;
-}
-
-Track.displayName = 'Track';
-export { Track };

package/src/components/ui/buttons/airplay-button.tsx

@@ -1,53 +0,0 @@
-import * as React from 'react';
-
-import { composeRefs, createReactComponent, type ReactElementProps } from 'maverick.js/react';
-
-import { AirPlayButtonInstance } from '../../primitives/instances';
-import { Primitive } from '../../primitives/nodes';
-
-/* -------------------------------------------------------------------------------------------------
- * AirPlayButton
- * -----------------------------------------------------------------------------------------------*/
-
-const AirPlayButtonBridge = createReactComponent(AirPlayButtonInstance, {
-  domEventsRegex: /^onMedia/,
-});
-
-export interface AirPlayButtonProps
-  extends ReactElementProps<AirPlayButtonInstance, HTMLButtonElement> {
-  asChild?: boolean;
-  children?: React.ReactNode;
-  ref?: React.Ref<HTMLButtonElement>;
-}
-
-/**
- * A button for requesting to connect to Apple AirPlay.
- *
- * @see {@link https://www.apple.com/au/airplay}
- * @docs {@link https://www.vidstack.io/docs/player/components/buttons/airplay-button}
- * @example
- * ```tsx
- * <AirPlayButton>
- *   <AirPlayIcon />
- * </AirPlayButton>
- * ```
- */
-const AirPlayButton = React.forwardRef<HTMLButtonElement, AirPlayButtonProps>(
-  ({ children, ...props }, forwardRef) => {
-    return (
-      <AirPlayButtonBridge {...(props as Omit<AirPlayButtonProps, 'ref'>)}>
-        {(props) => (
-          <Primitive.button
-            {...props}
-            ref={composeRefs(props.ref as React.Ref<any>, forwardRef as React.Ref<any>)}
-          >
-            {children}
-          </Primitive.button>
-        )}
-      </AirPlayButtonBridge>
-    );
-  },
-);
-
-AirPlayButton.displayName = 'AirPlayButton';
-export { AirPlayButton };

package/src/components/ui/buttons/caption-button.tsx

@@ -1,55 +0,0 @@
-import * as React from 'react';
-
-import { composeRefs, createReactComponent, type ReactElementProps } from 'maverick.js/react';
-
-import { CaptionButtonInstance } from '../../primitives/instances';
-import { Primitive } from '../../primitives/nodes';
-
-/* -------------------------------------------------------------------------------------------------
- * CaptionButton
- * -----------------------------------------------------------------------------------------------*/
-
-const CaptionButtonBridge = createReactComponent(CaptionButtonInstance, {
-  domEventsRegex: /^onMedia/,
-});
-
-export interface CaptionButtonProps
-  extends ReactElementProps<CaptionButtonInstance, HTMLButtonElement> {
-  asChild?: boolean;
-  children?: React.ReactNode;
-  ref?: React.Ref<HTMLButtonElement>;
-}
-
-/**
- * A button for toggling the showing state of the captions.
- *
- * @docs {@link https://www.vidstack.io/docs/player/components/buttons/caption-button}
- * @example
- * ```tsx
- * const track = useMediaState('textTrack'),
- *   isOn = track && isTrackCaptionKind(track);
- *
- * <CaptionButton>
- *   {isOn ? <OnIcon /> : <OffIcon />}
- * </CaptionButton>
- * ```
- */
-const CaptionButton = React.forwardRef<HTMLButtonElement, CaptionButtonProps>(
-  ({ children, ...props }, forwardRef) => {
-    return (
-      <CaptionButtonBridge {...(props as Omit<CaptionButtonProps, 'ref'>)}>
-        {(props) => (
-          <Primitive.button
-            {...props}
-            ref={composeRefs(props.ref as React.Ref<any>, forwardRef as React.Ref<any>)}
-          >
-            {children}
-          </Primitive.button>
-        )}
-      </CaptionButtonBridge>
-    );
-  },
-);
-
-CaptionButton.displayName = 'CaptionButton';
-export { CaptionButton };

package/src/components/ui/buttons/fullscreen-button.tsx

@@ -1,55 +0,0 @@
-import * as React from 'react';
-
-import { composeRefs, createReactComponent, type ReactElementProps } from 'maverick.js/react';
-
-import { FullscreenButtonInstance } from '../../primitives/instances';
-import { Primitive } from '../../primitives/nodes';
-
-/* -------------------------------------------------------------------------------------------------
- * FullscreenButton
- * -----------------------------------------------------------------------------------------------*/
-
-const FullscreenButtonBridge = createReactComponent(FullscreenButtonInstance, {
-  domEventsRegex: /^onMedia/,
-});
-
-export interface FullscreenButtonProps
-  extends ReactElementProps<FullscreenButtonInstance, HTMLButtonElement> {
-  asChild?: boolean;
-  children?: React.ReactNode;
-  ref?: React.Ref<HTMLButtonElement>;
-}
-
-/**
- * A button for toggling the fullscreen mode of the player.
- *
- * @docs {@link https://www.vidstack.io/docs/player/components/buttons/fullscreen-button}
- * @see {@link https://www.vidstack.io/docs/player/api/fullscreen}
- * @example
- * ```tsx
- * const isActive = useMediaState('fullscreen');
- *
- * <FullscreenButton>
- *   {!isActive ? <EnterIcon /> : <ExitIcon />}
- * </FullscreenButton>
- * ```
- */
-const FullscreenButton = React.forwardRef<HTMLButtonElement, FullscreenButtonProps>(
-  ({ children, ...props }, forwardRef) => {
-    return (
-      <FullscreenButtonBridge {...(props as Omit<FullscreenButtonProps, 'ref'>)}>
-        {(props) => (
-          <Primitive.button
-            {...props}
-            ref={composeRefs(props.ref as React.Ref<any>, forwardRef as React.Ref<any>)}
-          >
-            {children}
-          </Primitive.button>
-        )}
-      </FullscreenButtonBridge>
-    );
-  },
-);
-
-FullscreenButton.displayName = 'FullscreenButton';
-export { FullscreenButton };

package/src/components/ui/buttons/google-cast-button.tsx

@@ -1,53 +0,0 @@
-import * as React from 'react';
-
-import { composeRefs, createReactComponent, type ReactElementProps } from 'maverick.js/react';
-
-import { GoogleCastButtonInstance } from '../../primitives/instances';
-import { Primitive } from '../../primitives/nodes';
-
-/* -------------------------------------------------------------------------------------------------
- * GoogleCastButton
- * -----------------------------------------------------------------------------------------------*/
-
-const GoogleCastButtonBridge = createReactComponent(GoogleCastButtonInstance, {
-  domEventsRegex: /^onMedia/,
-});
-
-export interface GoogleCastButtonProps
-  extends ReactElementProps<GoogleCastButtonInstance, HTMLButtonElement> {
-  asChild?: boolean;
-  children?: React.ReactNode;
-  ref?: React.Ref<HTMLButtonElement>;
-}
-
-/**
- * A button for requesting Google Cast.
- *
- * @see {@link https://developers.google.com/cast/docs/overview}
- * @docs {@link https://www.vidstack.io/docs/player/components/buttons/google-cast-button}
- * @example
- * ```tsx
- * <GoogleCastButton>
- *   <ChromecastIcon />
- * </GoogleCastButton>
- * ```
- */
-const GoogleCastButton = React.forwardRef<HTMLButtonElement, GoogleCastButtonProps>(
-  ({ children, ...props }, forwardRef) => {
-    return (
-      <GoogleCastButtonBridge {...(props as Omit<GoogleCastButtonProps, 'ref'>)}>
-        {(props) => (
-          <Primitive.button
-            {...props}
-            ref={composeRefs(props.ref as React.Ref<any>, forwardRef as React.Ref<any>)}
-          >
-            {children}
-          </Primitive.button>
-        )}
-      </GoogleCastButtonBridge>
-    );
-  },
-);
-
-GoogleCastButton.displayName = 'GoogleCastButton';
-export { GoogleCastButton };

package/src/components/ui/buttons/live-button.tsx

@@ -1,56 +0,0 @@
-import * as React from 'react';
-
-import { composeRefs, createReactComponent, type ReactElementProps } from 'maverick.js/react';
-
-import { LiveButtonInstance } from '../../primitives/instances';
-import { Primitive } from '../../primitives/nodes';
-
-/* -------------------------------------------------------------------------------------------------
- * LiveButton
- * -----------------------------------------------------------------------------------------------*/
-
-const LiveButtonBridge = createReactComponent(LiveButtonInstance, {
-  domEventsRegex: /^onMedia/,
-});
-
-export interface LiveButtonProps extends ReactElementProps<LiveButtonInstance, HTMLButtonElement> {
-  asChild?: boolean;
-  children?: React.ReactNode;
-  ref?: React.Ref<HTMLButtonElement>;
-}
-
-/**
- * This component displays the current live status of the stream. This includes whether it's
- * live, at the live edge, or not live. In addition, this component is a button during live streams
- * and will skip ahead to the live edge when pressed.
- *
- * 🚨 This component will have `aria-hidden="true"` applied when the current stream is _not_
- * live.
- *
- * @docs {@link https://www.vidstack.io/docs/player/components/buttons/live-button}
- * @example
- * ```tsx
- * <LiveButton>
- *   <LiveIcon />
- * </LiveButton>
- * ```
- */
-const LiveButton = React.forwardRef<HTMLButtonElement, LiveButtonProps>(
-  ({ children, ...props }, forwardRef) => {
-    return (
-      <LiveButtonBridge {...(props as Omit<LiveButtonProps, 'ref'>)}>
-        {(props) => (
-          <Primitive.button
-            {...props}
-            ref={composeRefs(props.ref as React.Ref<any>, forwardRef as React.Ref<any>)}
-          >
-            {children}
-          </Primitive.button>
-        )}
-      </LiveButtonBridge>
-    );
-  },
-);
-
-LiveButton.displayName = 'LiveButton';
-export { LiveButton };

package/src/components/ui/buttons/mute-button.tsx

@@ -1,60 +0,0 @@
-import * as React from 'react';
-
-import { composeRefs, createReactComponent, type ReactElementProps } from 'maverick.js/react';
-
-import { MuteButtonInstance } from '../../primitives/instances';
-import { Primitive } from '../../primitives/nodes';
-
-/* -------------------------------------------------------------------------------------------------
- * MuteButton
- * -----------------------------------------------------------------------------------------------*/
-
-const MuteButtonBridge = createReactComponent(MuteButtonInstance, {
-  domEventsRegex: /^onMedia/,
-});
-
-export interface MuteButtonProps extends ReactElementProps<MuteButtonInstance, HTMLButtonElement> {
-  asChild?: boolean;
-  children?: React.ReactNode;
-  ref?: React.Ref<HTMLButtonElement>;
-}
-
-/**
- * A button for toggling the muted state of the player.
- *
- * @docs {@link https://www.vidstack.io/docs/player/components/buttons/mute-button}
- * @example
- * ```tsx
- * const volume = useMediaState('volume'),
- *   isMuted = useMediaState('muted');
- *
- * <MuteButton>
- *   {isMuted || volume == 0 ? (
- *     <MuteIcon />
- *   ) : volume < 0.5 ? (
- *     <VolumeLowIcon />
- *   ) : (
- *     <VolumeHighIcon />
- *   )}
- * </MuteButton>
- * ```
- */
-const MuteButton = React.forwardRef<HTMLButtonElement, MuteButtonProps>(
-  ({ children, ...props }, forwardRef) => {
-    return (
-      <MuteButtonBridge {...(props as Omit<MuteButtonProps, 'ref'>)}>
-        {(props) => (
-          <Primitive.button
-            {...props}
-            ref={composeRefs(props.ref as React.Ref<any>, forwardRef as React.Ref<any>)}
-          >
-            {children}
-          </Primitive.button>
-        )}
-      </MuteButtonBridge>
-    );
-  },
-);
-
-MuteButton.displayName = 'MuteButton';
-export { MuteButton };

package/src/components/ui/buttons/pip-button.tsx

@@ -1,54 +0,0 @@
-import * as React from 'react';
-
-import { composeRefs, createReactComponent, type ReactElementProps } from 'maverick.js/react';
-
-import { PIPButtonInstance } from '../../primitives/instances';
-import { Primitive } from '../../primitives/nodes';
-
-/* -------------------------------------------------------------------------------------------------
- * PIPButton
- * -----------------------------------------------------------------------------------------------*/
-
-const PIPButtonBridge = createReactComponent(PIPButtonInstance, {
-  domEventsRegex: /^onMedia/,
-});
-
-export interface PIPButtonProps extends ReactElementProps<PIPButtonInstance, HTMLButtonElement> {
-  asChild?: boolean;
-  children?: React.ReactNode;
-  ref?: React.Ref<HTMLButtonElement>;
-}
-
-/**
- * A button for toggling the picture-in-picture (PIP) mode of the player.
- *
- * @docs {@link https://www.vidstack.io/docs/player/components/buttons/pip-button}
- * @see {@link https://www.vidstack.io/docs/player/api/picture-in-picture}
- * @example
- * ```tsx
- * const isActive = useMediaState('pictureInPicture');
- *
- * <PIPButton>
- *   {!isActive ? <EnterIcon /> : <ExitIcon />}
- * </PIPButton>
- * ```
- */
-const PIPButton = React.forwardRef<HTMLButtonElement, PIPButtonProps>(
-  ({ children, ...props }, forwardRef) => {
-    return (
-      <PIPButtonBridge {...(props as Omit<PIPButtonProps, 'ref'>)}>
-        {(props) => (
-          <Primitive.button
-            {...props}
-            ref={composeRefs(props.ref as React.Ref<any>, forwardRef as React.Ref<any>)}
-          >
-            {children}
-          </Primitive.button>
-        )}
-      </PIPButtonBridge>
-    );
-  },
-);
-
-PIPButton.displayName = 'PIPButton';
-export { PIPButton };