@hanifhan1f/vidstack-react 1.12.13 → 1.12.15

package/src/providers/remotion/ui/context.tsx

@@ -1,120 +0,0 @@
-import * as React from 'react';
-
-import { noop } from 'maverick.js/std';
-import {
-  Internals,
-  type CompositionManagerContext,
-  type MediaVolumeContextValue,
-  type SetMediaVolumeContextValue,
-  type TimelineContextValue,
-} from 'remotion';
-
-import type { RemotionSrc } from '../types';
-
-export const REMOTION_PROVIDER_ID = 'vds-remotion-provider';
-
-export interface RemotionContextProviderProps {
-  src: RemotionSrc;
-  component: React.LazyExoticComponent<React.ComponentType<unknown>>;
-  timeline: TimelineContextValue;
-  mediaVolume: MediaVolumeContextValue;
-  setMediaVolume: SetMediaVolumeContextValue;
-  children: React.ReactNode;
-  numberOfSharedAudioTags?: number;
-}
-
-export function RemotionContextProvider({
-  src: {
-    compositionWidth: width,
-    compositionHeight: height,
-    fps,
-    durationInFrames,
-    numberOfSharedAudioTags,
-  },
-  component,
-  timeline,
-  mediaVolume,
-  setMediaVolume,
-  children,
-  numberOfSharedAudioTags: providedNumberOfAudioTags,
-}: RemotionContextProviderProps) {
-  const compositionManager = React.useMemo<CompositionManagerContext>(() => {
-    return {
-      compositions: [
-        {
-          id: REMOTION_PROVIDER_ID,
-          component: component as React.LazyExoticComponent<React.ComponentType<unknown>>,
-          durationInFrames,
-          width,
-          height,
-          fps,
-          nonce: 777,
-          folderName: null,
-          parentFolderName: null,
-          schema: null,
-          calculateMetadata: null,
-        },
-      ],
-      folders: [],
-      registerFolder: () => undefined,
-      unregisterFolder: () => undefined,
-      registerComposition: () => undefined,
-      unregisterComposition: () => undefined,
-      updateCompositionDefaultProps: noop,
-      currentCompositionMetadata: null,
-      setCurrentCompositionMetadata: () => undefined,
-      canvasContent: { type: 'composition', compositionId: REMOTION_PROVIDER_ID },
-      setCanvasContent: () => undefined,
-    };
-  }, [component, width, height, fps, durationInFrames]);
-
-  const sequenceManager = React.useMemo(() => {
-    let sequences: any[] = [];
-    return {
-      get sequences() {
-        return sequences;
-      },
-      registerSequence(sequence) {
-        sequences = [...sequences, sequence];
-      },
-      unregisterSequence(sequence) {
-        sequences = sequences.filter((s) => s.id !== sequence);
-      },
-    };
-  }, []);
-
-  return (
-    <Internals.IsPlayerContextProvider>
-      <Internals.CanUseRemotionHooksProvider>
-        <Internals.Timeline.TimelineContext.Provider value={timeline}>
-          <Internals.CompositionManager.Provider value={compositionManager}>
-            <Internals.SequenceManager.Provider value={sequenceManager}>
-              <Internals.ResolveCompositionConfig>
-                <Internals.PrefetchProvider>
-                  <Internals.DurationsContextProvider>
-                    <Internals.MediaVolumeContext.Provider value={mediaVolume}>
-                      <Internals.NativeLayersProvider>
-                        <Internals.SetMediaVolumeContext.Provider value={setMediaVolume}>
-                          <Internals.SharedAudioContextProvider
-                            numberOfAudioTags={
-                              providedNumberOfAudioTags ?? numberOfSharedAudioTags!
-                            }
-                            component={component}
-                          >
-                            {children}
-                          </Internals.SharedAudioContextProvider>
-                        </Internals.SetMediaVolumeContext.Provider>
-                      </Internals.NativeLayersProvider>
-                    </Internals.MediaVolumeContext.Provider>
-                  </Internals.DurationsContextProvider>
-                </Internals.PrefetchProvider>
-              </Internals.ResolveCompositionConfig>
-            </Internals.SequenceManager.Provider>
-          </Internals.CompositionManager.Provider>
-        </Internals.Timeline.TimelineContext.Provider>
-      </Internals.CanUseRemotionHooksProvider>
-    </Internals.IsPlayerContextProvider>
-  );
-}
-
-RemotionContextProvider.displayName = 'RemotionContextProvider';

package/src/providers/remotion/ui/error-boundary.tsx

@@ -1,57 +0,0 @@
-import * as React from 'react';
-
-const errorStyle: React.CSSProperties = __DEV__
-  ? {
-      display: 'flex',
-      alignItems: 'center',
-      justifyContent: 'center',
-      color: '	#ff3333',
-      padding: '24px',
-      position: 'absolute',
-      inset: '0',
-      width: '100%',
-      height: '100%',
-    }
-  : {};
-
-export interface ErrorBoundaryProps {
-  children: React.ReactNode;
-  fallback?: (error: Error) => React.ReactNode;
-  onError?: (error: Error) => void;
-}
-
-interface ErrorBoundaryState {
-  hasError: Error | null;
-}
-
-export class ErrorBoundary extends React.Component<ErrorBoundaryProps, ErrorBoundaryState> {
-  static displayName = 'ErrorBoundary';
-
-  override state: { hasError: Error | null } = { hasError: null };
-
-  static getDerivedStateFromError(hasError: Error) {
-    return { hasError };
-  }
-
-  override componentDidCatch(error: Error) {
-    this.props.onError?.(error);
-  }
-
-  override render() {
-    const error = this.state.hasError;
-
-    if (error) {
-      return (
-        <div style={errorStyle}>
-          {this.props.fallback?.(error) ?? (
-            <div style={{ fontWeight: 'bold' }}>
-              An error has occurred, see console for more information.
-            </div>
-          )}
-        </div>
-      );
-    }
-
-    return this.props.children;
-  }
-}

package/src/providers/remotion/ui/poster.tsx

@@ -1,33 +0,0 @@
-import * as React from 'react';
-
-import { useMediaState } from '../../../hooks/use-media-state';
-import RemotionThumbnail, { type RemotionThumbnailProps } from './thumbnail';
-
-export interface RemotionPosterProps extends RemotionThumbnailProps {}
-
-/**
- * @attr data-visible - Whether poster should be shown.
- * @docs {@link https://www.vidstack.io/docs/player/components/remotion/remotion-poster}
- * @example
- * ```tsx
- * <MediaPlayer>
- *   <MediaProvider>
- *     <RemotionPoster frame={100} />
- *   </MediaProvider>
- * </MediaPlayer>
- * ```
- */
-const RemotionPoster = React.forwardRef<HTMLElement, RemotionPosterProps>((props, ref) => {
-  const $isVisible = !useMediaState('started');
-  return (
-    <RemotionThumbnail
-      {...props}
-      ref={ref}
-      data-remotion-poster
-      data-visible={$isVisible || null}
-    />
-  );
-});
-
-RemotionPoster.displayName = 'RemotionPoster';
-export default RemotionPoster;

package/src/providers/remotion/ui/slider-thumbnail.tsx

@@ -1,41 +0,0 @@
-import * as React from 'react';
-
-import { useMediaState } from '../../../hooks/use-media-state';
-import { useSliderState } from '../../../hooks/use-slider-state';
-import { isRemotionSrc } from '../type-check';
-import RemotionThumbnail, { type RemotionThumbnailProps } from './thumbnail';
-
-export interface RemotionSliderThumbnailProps extends Omit<RemotionThumbnailProps, 'frame'> {}
-
-/**
- * @docs {@link https://www.vidstack.io/docs/player/components/remotion/remotion-slider-thumbnail}
- * @example
- * ```tsx
- * <TimeSlider.Root>
- *   <TimeSlider.Preview>
- *     <RemotionSliderThumbnail />
- *   </TimeSlider.Preview>
- * </TimeSlider.Root>
- * ```
- */
-const RemotionSliderThumbnail = React.forwardRef<HTMLElement, RemotionSliderThumbnailProps>(
-  (props, ref) => {
-    const $src = useMediaState('currentSrc'),
-      $percent = useSliderState('pointerPercent');
-
-    if (!isRemotionSrc($src)) return null;
-
-    return (
-      <RemotionThumbnail
-        {...props}
-        frame={$src.durationInFrames * ($percent / 100)}
-        ref={ref}
-        data-remotion-slider-thumbnail
-      />
-    );
-  },
-);
-
-RemotionSliderThumbnail.displayName = 'RemotionSliderThumbnail';
-
-export default RemotionSliderThumbnail;

package/src/providers/remotion/ui/thumbnail.tsx

@@ -1,166 +0,0 @@
-import * as React from 'react';
-
-import { noop } from 'maverick.js/std';
-import { Internals, random, type TimelineContextValue } from 'remotion';
-
-import { Primitive, type PrimitivePropsWithRef } from '../../../components/primitives/nodes';
-import { useMediaState } from '../../../hooks/use-media-state';
-import { RemotionLayoutEngine } from '../layout-engine';
-import { isRemotionSrc } from '../type-check';
-import type { RemotionErrorRenderer, RemotionLoadingRenderer, RemotionSrc } from '../types';
-import { REMOTION_PROVIDER_ID, RemotionContextProvider } from './context';
-import { ErrorBoundary } from './error-boundary';
-
-export interface RemotionThumbnailProps
-  extends Omit<PrimitivePropsWithRef<'div'>, 'children' | 'onError'> {
-  /** The video frame to display. */
-  frame: number;
-  /**
-   * A callback function that allows you to return a custom UI that gets displayed while the
-   * thumbnail is loading. If this prop is not provided it will default to the loading renderer
-   * given to the player source.
-   */
-  renderLoading?: RemotionLoadingRenderer;
-  /**
-   * A callback for rendering a custom error message. If this prop is not provided it will default
-   * to the error renderer given to the player source.
-   */
-  errorFallback?: RemotionErrorRenderer;
-  /**
-   * Called when an error or uncaught exception has happened in the video. If this prop is not
-   * provided it will default to the error callback given to the player source.
-   */
-  onError?(error: Error): void;
-}
-
-/**
- * @docs {@link https://www.vidstack.io/docs/player/components/remotion/remotion-thumbnail}
- * @example
- * ```tsx
- * <RemotionThumbnail frame={100} />
- * ```
- */
-const RemotionThumbnail = React.forwardRef<HTMLElement, RemotionThumbnailProps>(
-  ({ frame, renderLoading, errorFallback, onError, ...props }, ref) => {
-    let $src = useMediaState('currentSrc'),
-      layoutEngine = React.useMemo(() => new RemotionLayoutEngine(), []);
-
-    // Initialize defaults.
-    if (isRemotionSrc($src) && !$src.compositionWidth) {
-      $src = {
-        compositionWidth: 1920,
-        compositionHeight: 1080,
-        fps: 30,
-        ...$src,
-      };
-    }
-
-    React.useEffect(() => {
-      layoutEngine.setSrc(isRemotionSrc($src) ? $src : null);
-      return () => void layoutEngine.setSrc(null);
-    }, [$src]);
-
-    const Component = Internals.useLazyComponent({
-      component: $src.src as RemotionSrc['src'],
-    }) as React.LazyExoticComponent<React.ComponentType<unknown>>;
-
-    const thumbnailId = React.useMemo(() => String(random(null)), []),
-      baseTimeline = React.useMemo<TimelineContextValue>(
-        () => ({
-          rootId: thumbnailId,
-          frame: { [REMOTION_PROVIDER_ID]: frame },
-          playing: false,
-          playbackRate: 1,
-          setPlaybackRate: noop,
-          audioAndVideoTags: { current: [] },
-          imperativePlaying: { current: false },
-        }),
-        [thumbnailId],
-      ),
-      timeline = React.useMemo(
-        () => ({
-          ...baseTimeline,
-          frame: { [REMOTION_PROVIDER_ID]: frame },
-        }),
-        [baseTimeline, frame],
-      ),
-      volume = React.useMemo(
-        () => ({
-          mediaMuted: true,
-          mediaVolume: 0,
-          setMediaMuted: noop,
-          setMediaVolume: noop,
-        }),
-        [],
-      );
-
-    const [, update] = React.useState(0);
-    React.useEffect(() => {
-      update(1);
-    }, []);
-
-    if (!isRemotionSrc($src)) return null;
-
-    return (
-      <RemotionContextProvider
-        src={$src}
-        component={Component}
-        timeline={timeline}
-        mediaVolume={volume}
-        setMediaVolume={volume}
-        numberOfSharedAudioTags={0}
-      >
-        <Primitive.div {...props} ref={ref as any} data-remotion-thumbnail>
-          <div data-remotion-canvas>
-            <div
-              data-remotion-container
-              ref={(el) => {
-                layoutEngine.setContainer(el);
-              }}
-            >
-              <RemotionThumbnailUI
-                inputProps={$src.inputProps}
-                renderLoading={renderLoading ?? $src.renderLoading}
-                errorFallback={errorFallback ?? $src.errorFallback}
-                onError={onError ?? $src.onError}
-              />
-            </div>
-          </div>
-        </Primitive.div>
-      </RemotionContextProvider>
-    );
-  },
-);
-
-RemotionThumbnail.displayName = 'RemotionThumbnail';
-export default RemotionThumbnail;
-
-interface RemotionThumbnailUIProps
-  extends Pick<RemotionThumbnailProps, 'renderLoading' | 'errorFallback' | 'onError'> {
-  inputProps?: RemotionSrc['inputProps'];
-}
-
-function RemotionThumbnailUI({
-  inputProps,
-  renderLoading,
-  errorFallback,
-  onError,
-}: RemotionThumbnailUIProps) {
-  const video = Internals.useVideo(),
-    Video = video ? video.component : null,
-    LoadingContent = React.useMemo(() => renderLoading?.(), [renderLoading]);
-
-  return (
-    <React.Suspense fallback={LoadingContent}>
-      {Video ? (
-        <ErrorBoundary fallback={errorFallback} onError={onError!}>
-          <Internals.ClipComposition>
-            <Video {...video?.props} {...inputProps} />
-          </Internals.ClipComposition>
-        </ErrorBoundary>
-      ) : null}
-    </React.Suspense>
-  );
-}
-
-RemotionThumbnailUI.displayName = 'RemotionThumbnailUI';

package/src/providers/remotion/validate.ts

@@ -1,220 +0,0 @@
-import { isNil, isNull, isNumber, isUndefined } from 'maverick.js/std';
-import { Composition } from 'remotion';
-import { NoReactInternals } from 'remotion/no-react';
-
-import type { RemotionSrc } from './types';
-
-export function validateRemotionResource({
-  src,
-  compositionWidth: width,
-  compositionHeight: height,
-  fps,
-  durationInFrames,
-  initialFrame,
-  inFrame,
-  outFrame,
-  numberOfSharedAudioTags,
-}: RemotionSrc) {
-  if (!__DEV__) return;
-
-  validateComponent(src);
-  validateInitialFrame(initialFrame, durationInFrames);
-
-  validateDimension(width, 'compositionWidth', 'of the remotion source');
-  validateDimension(height, 'compositionHeight', 'of the remotion source');
-
-  validateDurationInFrames(durationInFrames, {
-    component: 'of the remotion source',
-    allowFloats: false,
-  });
-
-  validateFps(fps, 'of the remotion source', false);
-
-  validateInOutFrames(inFrame, outFrame, durationInFrames);
-  validateSharedNumberOfAudioTags(numberOfSharedAudioTags);
-}
-
-export const validateFps: typeof NoReactInternals.validateFps = NoReactInternals.validateFps;
-
-export const validateDimension: typeof NoReactInternals.validateDimension =
-  NoReactInternals.validateDimension;
-
-export const validateDurationInFrames: typeof NoReactInternals.validateDurationInFrames =
-  NoReactInternals.validateDurationInFrames;
-
-export function validateInitialFrame(initialFrame: number | undefined, frames: number) {
-  if (!__DEV__) return;
-
-  if (!isNumber(frames)) {
-    throw new Error(
-      `[vidstack] \`durationInFrames\` must be a number, but is ${JSON.stringify(frames)}`,
-    );
-  }
-
-  if (isUndefined(initialFrame)) {
-    return;
-  }
-
-  if (!isNumber(initialFrame)) {
-    throw new Error(
-      `[vidstack] \`initialFrame\` must be a number, but is ${JSON.stringify(initialFrame)}`,
-    );
-  }
-
-  if (Number.isNaN(initialFrame)) {
-    throw new Error(`[vidstack] \`initialFrame\` must be a number, but is NaN`);
-  }
-
-  if (!Number.isFinite(initialFrame)) {
-    throw new Error(`[vidstack] \`initialFrame\` must be a number, but is Infinity`);
-  }
-
-  if (initialFrame % 1 !== 0) {
-    throw new Error(
-      `[vidstack] \`initialFrame\` must be an integer, but is ${JSON.stringify(initialFrame)}`,
-    );
-  }
-
-  if (initialFrame > frames - 1) {
-    throw new Error(
-      `[vidstack] \`initialFrame\` must be less or equal than \`durationInFrames - 1\`, but is ${JSON.stringify(
-        initialFrame,
-      )}`,
-    );
-  }
-}
-
-export function validateSingleFrame(frame: unknown, variableName: string): number | null {
-  if (!__DEV__) return frame as number;
-
-  if (isNil(frame)) {
-    return frame ?? null;
-  }
-
-  if (!isNumber(frame)) {
-    throw new TypeError(
-      `[vidstack] \`${variableName}\` must be a number, but is ${JSON.stringify(frame)}`,
-    );
-  }
-
-  if (Number.isNaN(frame)) {
-    throw new TypeError(
-      `[vidstack] \`${variableName}\` must not be NaN, but is ${JSON.stringify(frame)}`,
-    );
-  }
-
-  if (!Number.isFinite(frame)) {
-    throw new TypeError(
-      `[vidstack] \`${variableName}\` must be finite, but is ${JSON.stringify(frame)}`,
-    );
-  }
-
-  if (frame % 1 !== 0) {
-    throw new TypeError(
-      `[vidstack] \`${variableName}\` must be an integer, but is ${JSON.stringify(frame)}`,
-    );
-  }
-
-  return frame;
-}
-
-export function validateInOutFrames(
-  inFrame: number | undefined | null,
-  outFrame: number | undefined | null,
-  frames: number,
-) {
-  if (!__DEV__) return;
-
-  const validatedInFrame = validateSingleFrame(inFrame, 'inFrame'),
-    validatedOutFrame = validateSingleFrame(outFrame, 'outFrame');
-
-  if (isNull(validatedInFrame) && isNull(validatedOutFrame)) {
-    return;
-  }
-
-  // Must not be over the duration
-  if (!isNull(validatedInFrame) && validatedInFrame > frames - 1) {
-    throw new Error(
-      `[vidstack] \`inFrame\` must be less than (durationInFrames - 1), but is \`${validatedInFrame}\``,
-    );
-  }
-
-  if (!isNull(validatedOutFrame) && validatedOutFrame > frames) {
-    throw new Error(
-      `[vidstack] \`outFrame\` must be less than (durationInFrames), but is \`${validatedOutFrame}\``,
-    );
-  }
-
-  // Must not be under 0
-  if (!isNull(validatedInFrame) && validatedInFrame < 0) {
-    throw new Error(
-      `[vidstack] \`inFrame\` must be greater than 0, but is \`${validatedInFrame}\``,
-    );
-  }
-
-  if (!isNull(validatedOutFrame) && validatedOutFrame <= 0) {
-    throw new Error(
-      `[vidstack] \`outFrame\` must be greater than 0, but is \`${validatedOutFrame}\`. If you want to render a single frame, use \`<RemotionThumbnail />\` instead.`,
-    );
-  }
-
-  if (
-    !isNull(validatedOutFrame) &&
-    !isNull(validatedInFrame) &&
-    validatedOutFrame <= validatedInFrame
-  ) {
-    throw new Error(
-      '[vidstack] `outFrame` must be greater than `inFrame`, but is ' +
-        validatedOutFrame +
-        ' <= ' +
-        validatedInFrame,
-    );
-  }
-}
-
-export function validateSharedNumberOfAudioTags(tags: number | undefined) {
-  if (!__DEV__ || isUndefined(tags)) return;
-
-  if (tags % 1 !== 0 || !Number.isFinite(tags) || Number.isNaN(tags) || tags < 0) {
-    throw new TypeError(
-      `[vidstack] \`numberOfSharedAudioTags\` must be an integer but got \`${tags}\` instead`,
-    );
-  }
-}
-
-export function validatePlaybackRate(playbackRate: number) {
-  if (!__DEV__) return;
-
-  if (playbackRate > 4) {
-    throw new Error(
-      `[vidstack] The highest possible playback rate with Remotion is 4. You passed: ${playbackRate}`,
-    );
-  }
-
-  if (playbackRate < -4) {
-    throw new Error(
-      `[vidstack] The lowest possible playback rate with Remotion is -4. You passed: ${playbackRate}`,
-    );
-  }
-
-  if (playbackRate === 0) {
-    throw new Error(`[vidstack] A playback rate of 0 is not supported.`);
-  }
-}
-
-export function validateComponent(src: RemotionSrc['src']) {
-  if (!__DEV__) return;
-
-  // @ts-expect-error
-  if (src.type === Composition) {
-    throw new TypeError(
-      `[vidstack] \`src\` should not be an instance of \`<Composition/>\`. Pass the React component directly, and set the duration, fps and dimensions as source props.`,
-    );
-  }
-
-  if (src === Composition) {
-    throw new TypeError(
-      `[vidstack] \`src\` must not be the \`Composition\` component. Pass your own React component directly, and set the duration, fps and dimensions as source props.`,
-    );
-  }
-}

package/src/source.ts

@@ -1,5 +0,0 @@
-import type { PlayerSrc as BasePlayerSrc } from 'vidstack';
-
-import type { RemotionSrc } from './providers/remotion/types';
-
-export type PlayerSrc = BasePlayerSrc | RemotionSrc;

package/src/utils.ts

@@ -1,27 +0,0 @@
-import { noop } from 'maverick.js/std';
-import type { VTTCue } from 'media-captions';
-
-export function createVTTCue(startTime = 0, endTime = 0, text = ''): VTTCue {
-  if (__SERVER__) {
-    return {
-      startTime,
-      endTime,
-      text,
-      addEventListener: noop,
-      removeEventListener: noop,
-      dispatchEvent: noop,
-    } as VTTCue;
-  }
-
-  return new window.VTTCue(startTime, endTime, text);
-}
-
-export function appendParamsToURL(baseUrl: string, params: Record<string, any>) {
-  const url = new URL(baseUrl);
-
-  for (const key of Object.keys(params)) {
-    url.searchParams.set(key, params[key] + '');
-  }
-
-  return url.toString();
-}

package/tsconfig.build.json

@@ -1,10 +0,0 @@
-{
-  "extends": "./tsconfig.json",
-  "compilerOptions": {
-    "declaration": true,
-    "declarationDir": "types",
-    "paths": {}
-  },
-  "include": ["src/**/*.ts", "src/**/*.tsx"],
-  "exclude": ["src/**/*.test.ts"]
-}

package/tsconfig.json

@@ -1,11 +0,0 @@
-{
-  "extends": "../../tsconfig.json",
-  "compilerOptions": {
-    "jsx": "preserve",
-    "paths": {
-      "@vidstack/react": ["./src/index.ts"]
-    },
-    "types": ["@types/node"]
-  },
-  "include": ["src/**/*.ts", "src/**/*.tsx", "sandbox"]
-}