@hanifhan1f/vidstack-react 1.12.13

package/src/components/provider.tsx

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

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

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

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

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

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

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

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

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