@hanifhan1f/vidstack-react 1.12.13

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

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

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

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

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

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

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

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

package/src/utils.ts

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

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

package/tsconfig.json

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