@hanifhan1f/vidstack-react 1.12.13 → 1.12.15

package/src/providers/remotion/provider.tsx

@@ -1,514 +0,0 @@
-import * as React from 'react';
-
-import { createScope, effect, peek, signal, tick } from 'maverick.js';
-import { useSignal } from 'maverick.js/react';
-import { deferredPromise, isFunction, listenEvent, type DeferredPromise } from 'maverick.js/std';
-import {
-  Internals,
-  type MediaVolumeContextValue,
-  type PlayableMediaTag,
-  type SetMediaVolumeContextValue,
-  type SetTimelineContextValue,
-  type TimelineContextValue,
-} from 'remotion';
-import { TimeRange, type MediaContext, type MediaProviderAdapter, type Src } from 'vidstack';
-
-import { RemotionLayoutEngine } from './layout-engine';
-import { RemotionPlaybackEngine } from './playback-engine';
-import { isRemotionSrc } from './type-check';
-import type { RemotionSrc } from './types';
-import { REMOTION_PROVIDER_ID, RemotionContextProvider } from './ui/context';
-import { ErrorBoundary } from './ui/error-boundary';
-import { validatePlaybackRate, validateRemotionResource } from './validate';
-
-export class RemotionProvider implements MediaProviderAdapter {
-  protected readonly $$PROVIDER_TYPE = 'REMOTION';
-
-  readonly scope = createScope();
-
-  #src = signal<RemotionSrc | null>(null);
-  #setup = false;
-  #loadStart = false;
-  #audio: any = null;
-  #waiting = signal(false);
-  #waitingPromise: DeferredPromise<void, string> | null = null;
-  #mediaTags = signal<PlayableMediaTag[]>([]);
-  #mediaElements = signal<HTMLMediaElement[]>([]);
-  #bufferingElements = new Set<HTMLMediaElement>();
-  #timeline: TimelineContextValue | null = null;
-  #frame = signal<Record<string, number>>({ [REMOTION_PROVIDER_ID]: 0 });
-
-  #layoutEngine = new RemotionLayoutEngine();
-  #playbackEngine: RemotionPlaybackEngine | null = null;
-
-  readonly #container: HTMLElement;
-  readonly #ctx: MediaContext;
-
-  #setTimeline: SetTimelineContextValue;
-
-  #setMediaVolume: SetMediaVolumeContextValue = {
-    setMediaMuted: this.setMuted.bind(this),
-    setMediaVolume: this.setVolume.bind(this),
-  };
-
-  get type() {
-    return 'remotion';
-  }
-
-  get currentSrc() {
-    return peek(this.#src);
-  }
-
-  get frame() {
-    return this.#frame();
-  }
-
-  constructor(container: HTMLElement, ctx: MediaContext) {
-    this.#container = container;
-    this.#ctx = ctx;
-    this.#setTimeline = {
-      setFrame: this.#setFrame.bind(this),
-      setPlaying: this.#setPlaying.bind(this),
-    };
-    this.#layoutEngine.setContainer(container);
-  }
-
-  setup() {
-    effect(this.#watchWaiting.bind(this));
-    effect(this.#watchMediaTags.bind(this));
-    effect(this.#watchMediaElements.bind(this));
-  }
-
-  #watchMediaTags() {
-    this.#mediaTags();
-    this.#discoverMediaElements();
-  }
-
-  #discoverMediaElements() {
-    const elements = [...this.#container.querySelectorAll<HTMLMediaElement>('audio,video')];
-    this.#mediaElements.set(elements);
-  }
-
-  #watchMediaElements() {
-    const elements = this.#mediaElements();
-
-    for (const tag of elements) {
-      const onWait = this.#onWaitFor.bind(this, tag),
-        onStopWaiting = this.#onStopWaitingFor.bind(this, tag);
-
-      if (tag.currentSrc && tag.readyState < 4) {
-        this.#onWaitFor(tag);
-        listenEvent(tag, 'canplay', onStopWaiting);
-      }
-
-      listenEvent(tag, 'waiting', onWait);
-      listenEvent(tag, 'playing', onStopWaiting);
-    }
-
-    // User might have seeked to a new position, old media elements are removed.
-    for (const el of this.#bufferingElements) {
-      if (!elements.includes(el)) this.#onStopWaitingFor(el);
-    }
-  }
-
-  #onFrameChange(frame: number) {
-    const { inFrame, fps } = this.#src()!,
-      { seeking } = this.#ctx.$state,
-      time = Math.max(0, frame - inFrame!) / fps!;
-
-    this.#frame.set((record) => ({
-      ...record,
-      [REMOTION_PROVIDER_ID]: frame,
-    }));
-
-    this.#ctx.notify('time-change', time);
-
-    if (seeking()) {
-      tick();
-      this.#ctx.notify('seeked', time);
-    }
-  }
-
-  #onFrameEnd() {
-    this.pause();
-    this.#ctx.notify('end');
-  }
-
-  async play() {
-    const { ended } = this.#ctx.$state;
-
-    if (peek(ended)) {
-      this.#setFrame({ [REMOTION_PROVIDER_ID]: 0 });
-    }
-
-    try {
-      const mediaElements = peek(this.#mediaElements);
-      if (mediaElements.length) {
-        await Promise.all(mediaElements.map((media) => media.play()));
-      }
-
-      this.#ctx.notify('play');
-      tick();
-
-      if (this.#waitingPromise) {
-        this.#ctx.notify('waiting');
-        return this.#waitingPromise.promise;
-      } else {
-        this.#playbackEngine?.play();
-        this.#ctx.notify('playing');
-      }
-    } catch (error) {
-      throw error;
-    }
-  }
-
-  async pause() {
-    const { paused } = this.#ctx.$state;
-    this.#playbackEngine?.stop();
-    this.#ctx.notify('pause');
-  }
-
-  setMuted(value: React.SetStateAction<boolean>) {
-    if (!this.#ctx) return;
-
-    const { muted, volume } = this.#ctx.$state;
-
-    if (isFunction(value)) {
-      this.setMuted(value(muted()));
-      return;
-    }
-
-    this.#ctx.notify('volume-change', {
-      volume: peek(volume),
-      muted: value,
-    });
-  }
-
-  setCurrentTime(time: number) {
-    const { fps } = this.#src()!,
-      frame = time * fps!;
-
-    this.#ctx.notify('seeking', time);
-    this.#setFrame({ [REMOTION_PROVIDER_ID]: frame });
-  }
-
-  setVolume(value: React.SetStateAction<number>) {
-    if (!this.#ctx) return;
-
-    const { volume, muted } = this.#ctx.$state;
-
-    if (isFunction(value)) {
-      this.setVolume(value(volume()));
-      return;
-    }
-
-    this.#ctx.notify('volume-change', {
-      volume: value,
-      muted: peek(muted),
-    });
-  }
-
-  setPlaybackRate(rate: React.SetStateAction<number>) {
-    if (isFunction(rate)) {
-      const { playbackRate } = this.#ctx.$state;
-      this.setPlaybackRate(rate(peek(playbackRate)));
-      return;
-    }
-
-    if (__DEV__) validatePlaybackRate(rate);
-    this.#playbackEngine?.setPlaybackRate(rate);
-    this.#ctx.notify('rate-change', rate);
-  }
-
-  async loadSource(src: Src) {
-    if (!isRemotionSrc(src)) return;
-
-    const onUserError = src.onError,
-      resolvedSrc: RemotionSrc = {
-        compositionWidth: 1920,
-        compositionHeight: 1080,
-        fps: 30,
-        initialFrame: 0,
-        inFrame: 0,
-        outFrame: src.durationInFrames,
-        numberOfSharedAudioTags: 5,
-        inputProps: {},
-        ...src,
-        onError: (error) => {
-          if (__DEV__) {
-            this.#ctx.logger
-              ?.errorGroup(`[vidstack] ${error.message}`)
-              .labelledLog('Source', peek(this.#src))
-              .labelledLog('Error', error)
-              .dispatch();
-          }
-
-          this.pause();
-          this.#ctx.notify('error', {
-            message: error.message,
-            code: 1,
-          });
-
-          onUserError?.(error);
-        },
-      };
-
-    this.#src.set(resolvedSrc);
-
-    // Copy initialized props over to main src object.
-    for (const prop of Object.keys(resolvedSrc)) {
-      src[prop] = resolvedSrc[prop];
-    }
-
-    this.changeSrc(resolvedSrc);
-  }
-
-  destroy() {
-    this.changeSrc(null);
-  }
-
-  changeSrc(src: RemotionSrc | null) {
-    this.#playbackEngine?.destroy();
-
-    this.#waiting.set(false);
-    this.#waitingPromise?.reject('src changed');
-    this.#waitingPromise = null;
-    this.#audio = null;
-    this.#timeline = null;
-    this.#playbackEngine = null;
-    this.#mediaTags.set([]);
-    this.#bufferingElements.clear();
-    this.#frame.set({ [REMOTION_PROVIDER_ID]: 0 });
-
-    this.#layoutEngine.setSrc(src);
-
-    if (src) {
-      this.#timeline = this.#createTimelineContextValue();
-      this.#playbackEngine = new RemotionPlaybackEngine(
-        src,
-        this.#onFrameChange.bind(this),
-        this.#onFrameEnd.bind(this),
-      );
-    }
-  }
-
-  render = (): React.ReactNode => {
-    const $src = useSignal(this.#src);
-
-    if (!$src) {
-      throw Error(
-        __DEV__
-          ? '[vidstack] attempting to render remotion provider without src'
-          : '[vidstack] no src',
-      );
-    }
-
-    React.useEffect(() => {
-      if (!isRemotionSrc($src)) return;
-      validateRemotionResource($src);
-
-      const rafId = requestAnimationFrame(() => {
-        if (!this.#setup) {
-          this.#ctx.notify('provider-setup', this);
-          this.#setup = true;
-        }
-
-        if (!this.#loadStart) {
-          this.#ctx.notify('load-start');
-          this.#loadStart = true;
-        }
-
-        this.#discoverMediaElements();
-        tick();
-        if (!this.#waiting()) this.#ready($src);
-      });
-
-      return () => {
-        cancelAnimationFrame(rafId);
-        this.#loadStart = false;
-      };
-    }, [$src]);
-
-    const Component = Internals.useLazyComponent({
-      component: $src.src,
-    }) as React.LazyExoticComponent<React.ComponentType<unknown>>;
-
-    const { $state } = this.#ctx,
-      $volume = useSignal($state.volume),
-      $isMuted = useSignal($state.muted);
-
-    const mediaVolume = React.useMemo((): MediaVolumeContextValue => {
-      const { muted, volume } = this.#ctx.$state;
-      return { mediaMuted: muted(), mediaVolume: volume() };
-    }, [$isMuted, $volume]);
-
-    return (
-      <RemotionContextProvider
-        src={$src}
-        component={Component}
-        timeline={this.#timeline!}
-        mediaVolume={mediaVolume}
-        setMediaVolume={this.#setMediaVolume}
-      >
-        <Internals.Timeline.SetTimelineContext.Provider value={this.#setTimeline}>
-          {React.createElement(this.renderVideo, { src: $src })}
-        </Internals.Timeline.SetTimelineContext.Provider>
-      </RemotionContextProvider>
-    );
-  };
-
-  renderVideo = ({ src }: { src: RemotionSrc }): React.ReactNode => {
-    const video = Internals.useVideo(),
-      Video = video ? video.component : null,
-      audioContext = React.useContext(Internals.SharedAudioContext);
-
-    const { $state } = this.#ctx;
-
-    useSignal(this.#frame);
-    useSignal($state.playing);
-    useSignal($state.playbackRate);
-
-    React.useEffect(() => {
-      this.#audio = audioContext;
-      return () => {
-        this.#audio = null;
-      };
-    }, [audioContext]);
-
-    const LoadingContent = React.useMemo(() => src.renderLoading?.(), [src]);
-
-    const Content = Video ? (
-      <ErrorBoundary fallback={src.errorFallback} onError={src.onError!}>
-        <Internals.ClipComposition>
-          <Video {...video?.props} {...src.inputProps} />
-        </Internals.ClipComposition>
-      </ErrorBoundary>
-    ) : null;
-
-    return <React.Suspense fallback={LoadingContent}>{Content}</React.Suspense>;
-  };
-
-  #ready(src: RemotionSrc | null) {
-    if (!src) return;
-
-    const { outFrame, inFrame, fps } = src,
-      duration = (outFrame! - inFrame!) / fps!;
-
-    this.#ctx.notify('loaded-metadata');
-    this.#ctx.notify('loaded-data');
-
-    this.#ctx.delegate.ready({
-      duration,
-      seekable: new TimeRange(0, duration),
-      buffered: new TimeRange(0, duration),
-    });
-
-    if (src.initialFrame) {
-      this.#setFrame({
-        [REMOTION_PROVIDER_ID]: src.initialFrame,
-      });
-    }
-  }
-
-  #onWaitFor(el: HTMLMediaElement) {
-    this.#bufferingElements.add(el);
-    this.#waiting.set(true);
-    if (!this.#waitingPromise) {
-      this.#waitingPromise = deferredPromise();
-    }
-  }
-
-  #onStopWaitingFor(el: HTMLMediaElement) {
-    this.#bufferingElements.delete(el);
-
-    // There's still elements we're waiting on.
-    if (this.#bufferingElements.size) return;
-
-    this.#waiting.set(false);
-    this.#waitingPromise?.resolve();
-    this.#waitingPromise = null;
-
-    const { canPlay } = this.#ctx.$state;
-    if (!peek(canPlay)) {
-      this.#ready(peek(this.#src));
-    }
-  }
-
-  #watchWaiting() {
-    this.#waiting(); // subscribe
-
-    const { paused } = this.#ctx.$state;
-    if (peek(paused)) return;
-
-    if (this.#waiting()) {
-      this.#playbackEngine?.stop();
-      this.#ctx.notify('waiting');
-    } else {
-      this.#playbackEngine?.play();
-      this.#ctx.notify('playing');
-    }
-  }
-
-  #setFrame(value: React.SetStateAction<Record<string, number>>) {
-    if (isFunction(value)) {
-      this.#setFrame(value(this.#frame()));
-      return;
-    }
-
-    this.#frame.set((record) => ({ ...record, ...value }));
-
-    const nextFrame = value[REMOTION_PROVIDER_ID];
-    if (this.#playbackEngine && this.#playbackEngine.frame !== nextFrame) {
-      this.#playbackEngine.frame = nextFrame;
-    }
-  }
-
-  #setPlaying(value: React.SetStateAction<boolean>) {
-    const { playing } = this.#ctx.$state;
-
-    if (isFunction(value)) {
-      this.#setPlaying(value(playing()));
-      return;
-    }
-
-    if (value) {
-      this.play();
-    } else if (!value) {
-      this.pause();
-    }
-  }
-
-  #createTimelineContextValue(): TimelineContextValue {
-    const { playing, playbackRate } = this.#ctx.$state,
-      frame = this.#frame,
-      mediaTags = this.#mediaTags,
-      setPlaybackRate = this.setPlaybackRate.bind(this);
-
-    return {
-      rootId: REMOTION_PROVIDER_ID,
-      get frame() {
-        return frame();
-      },
-      get playing() {
-        return playing();
-      },
-      get playbackRate() {
-        return playbackRate();
-      },
-      imperativePlaying: {
-        get current() {
-          return playing();
-        },
-      },
-      setPlaybackRate,
-      audioAndVideoTags: {
-        get current() {
-          return mediaTags();
-        },
-        set current(tags) {
-          mediaTags.set(tags);
-        },
-      },
-    };
-  }
-}

package/src/providers/remotion/type-check.ts

@@ -1,13 +0,0 @@
-import type { Src } from 'vidstack';
-
-import type { RemotionProvider } from './provider';
-import type { RemotionSrc } from './types';
-
-/** @see {@link https://www.vidstack.io/docs/player/providers/remotion} */
-export function isRemotionProvider(provider: any): provider is RemotionProvider {
-  return provider?.$$PROVIDER_TYPE === 'REMOTION';
-}
-
-export function isRemotionSrc(src?: Src | null): src is RemotionSrc {
-  return src?.type === 'video/remotion';
-}

package/src/providers/remotion/types.ts

@@ -1,94 +0,0 @@
-import type * as React from 'react';
-
-export interface RemotionSrc<InputProps extends RemotionInputProps = RemotionInputProps> {
-  /** React component which is generally a Remotion video. */
-  src: React.ComponentType<unknown>;
-  /** Remotion source type. */
-  type: 'video/remotion';
-  /**
-   * Pass props to the component that you have specified using the component prop.
-   */
-  inputProps?: InputProps;
-  /**
-   * The width of the composition.
-   *
-   * @defaultValue 1920
-   */
-  compositionWidth?: number;
-  /**
-   * The height of the composition.
-   *
-   * @defaultValue 1080
-   */
-  compositionHeight?: number;
-  /**
-   * The frame rate of the video per second.
-   *
-   * @defaultValue 30
-   */
-  fps?: number;
-  /**
-   * The duration of the video in frames. Must be an integer and greater than 0.
-   */
-  durationInFrames: number;
-  /**
-   * Start the playback from a specific frame.
-   *
-   * @defaultValue 0
-   */
-  initialFrame?: number;
-  /**
-   * Limit playback to only play after a certain frame. The video will start from this frame and
-   * move to this position once it has ended. Must be an integer, not smaller than 0, not bigger
-   * than `outFrame` and not bigger than `durationInFrames - 1`.
-   *
-   * @defaultValue 0
-   */
-  inFrame?: number | null;
-  /**
-   * Limit playback to only play before a certain frame. The video will end at this frame
-   * and move to the beginning once it has ended. Must be an integer, not smaller than 1, not
-   * smaller than `inFrame` and not bigger than `durationInFrames`.
-   *
-   * @defaultValue `durationInFrames`
-   */
-  outFrame?: number;
-  /**
-   * If you use an `<Audio />` tag, it might not play in some browsers (specifically iOS Safari)
-   * due to browser autoplay policies. This is why the player pre-mounts a set of audio tags with
-   * silent audio that get played upon user interaction. These audio tags can then be used to play
-   * real audio later and will not be subject to the autoplay policy of the browser.
-   *
-   * This option controls how many audio tags are being rendered, the default is 5. If you mount
-   * more audio tags than shared audio tags are available, then an error will be thrown.
-   *
-   * If you'd like to opt out of this behavior, you can pass 0 to mount native audio tags
-   * simultaneously as you mount Remotion's <Audio /> tags.
-   *
-   * @defaultValue 5
-   */
-  numberOfSharedAudioTags?: number;
-  /**
-   * A callback function that allows you to return a custom UI that gets displayed while the
-   * provider is loading.
-   */
-  renderLoading?: RemotionLoadingRenderer;
-  /**
-   * A callback for rendering a custom error message.
-   */
-  errorFallback?: RemotionErrorRenderer;
-  /**
-   * Called when an error or uncaught exception has happened in the video.
-   */
-  onError?(error: Error): void;
-}
-
-export interface RemotionInputProps extends Record<string, unknown> {}
-
-export interface RemotionLoadingRenderer {
-  (): React.ReactNode;
-}
-
-export interface RemotionErrorRenderer {
-  (error: Error): React.ReactNode;
-}