@hanifhan1f/vidstack-react 1.12.33 → 1.12.35

package/server/chunks/vidstack-DOIUveQF.js

@@ -1,504 +0,0 @@
-"use client"
-
-import * as React from 'react';
-import { createDisposalBin, listenEvent, createScope, signal, peek, effect, tick, isFunction, useSignal, deferredPromise } from './vidstack-D4t_SZbb.js';
-import { Internals } from 'remotion';
-import { TimeRange } from 'vidstack';
-import { RemotionLayoutEngine, REMOTION_PROVIDER_ID, RemotionContextProvider, ErrorBoundary } from '../player/vidstack-remotion.js';
-import { isRemotionSrc } from './vidstack-SkX-mSrw.js';
-import { NoReactInternals } from 'remotion/no-react';
-import './vidstack-DeS67_gx.js';
-
-class RemotionPlaybackEngine {
-  #src;
-  #onFrameChange;
-  #onEnd;
-  #disposal = createDisposalBin();
-  #frame = 0;
-  #framesAdvanced = 0;
-  #playbackRate = 1;
-  #playing = false;
-  #rafId = -1;
-  #timerId = -1;
-  #startedAt = 0;
-  #isRunningInBackground = false;
-  get frame() {
-    return this.#frame;
-  }
-  set frame(frame) {
-    this.#frame = frame;
-    this.#onFrameChange(frame);
-  }
-  constructor(src, onFrameChange, onEnd) {
-    this.#src = src;
-    this.#onFrameChange = onFrameChange;
-    this.#onEnd = onEnd;
-    this.#frame = src.initialFrame ?? 0;
-    this.#disposal.add(
-      listenEvent(document, "visibilitychange", this.#onVisibilityChange.bind(this))
-    );
-  }
-  play() {
-    this.#framesAdvanced = 0;
-    this.#playing = true;
-    this.#startedAt = performance.now();
-    this.#tick();
-  }
-  stop() {
-    this.#playing = false;
-    if (this.#rafId >= 0) {
-      cancelAnimationFrame(this.#rafId);
-      this.#rafId = -1;
-    }
-    if (this.#timerId >= 0) {
-      clearTimeout(this.#timerId);
-      this.#timerId = -1;
-    }
-  }
-  setPlaybackRate(rate) {
-    this.#playbackRate = rate;
-  }
-  destroy() {
-    this.#disposal.empty();
-    this.stop();
-  }
-  #update() {
-    const { nextFrame, framesToAdvance, ended } = this.#calculateNextFrame();
-    this.#framesAdvanced += framesToAdvance;
-    if (nextFrame !== this.#frame) {
-      this.#onFrameChange(nextFrame);
-      this.#frame = nextFrame;
-    }
-    if (ended) {
-      this.#frame = this.#src.outFrame;
-      this.stop();
-      this.#onEnd();
-    }
-  }
-  #tick = () => {
-    this.#update();
-    if (this.#playing) {
-      this.#queueNextFrame(this.#tick);
-    }
-  };
-  #queueNextFrame(callback) {
-    if (this.#isRunningInBackground) {
-      this.#timerId = window.setTimeout(callback, 1e3 / this.#src.fps);
-    } else {
-      this.#rafId = requestAnimationFrame(callback);
-    }
-  }
-  #calculateNextFrame() {
-    const round = this.#playbackRate < 0 ? Math.ceil : Math.floor, time = performance.now() - this.#startedAt, framesToAdvance = round(time * this.#playbackRate / (1e3 / this.#src.fps)) - this.#framesAdvanced, nextFrame = framesToAdvance + this.#frame, isCurrentFrameOutOfBounds = this.#frame > this.#src.outFrame || this.#frame < this.#src.inFrame, isNextFrameOutOfBounds = nextFrame > this.#src.outFrame || nextFrame < this.#src.inFrame, ended = isNextFrameOutOfBounds && !isCurrentFrameOutOfBounds;
-    if (this.#playbackRate > 0 && !ended) {
-      if (isNextFrameOutOfBounds) {
-        return {
-          nextFrame: this.#src.inFrame,
-          framesToAdvance,
-          ended
-        };
-      }
-      return { nextFrame, framesToAdvance, ended };
-    }
-    if (isNextFrameOutOfBounds) {
-      return {
-        nextFrame: this.#src.outFrame,
-        framesToAdvance,
-        ended
-      };
-    }
-    return { nextFrame, framesToAdvance, ended };
-  }
-  #onVisibilityChange() {
-    this.#isRunningInBackground = document.visibilityState === "hidden";
-    if (this.#playing) {
-      this.stop();
-      this.play();
-    }
-  }
-}
-
-function validateRemotionResource({
-  src,
-  compositionWidth: width,
-  compositionHeight: height,
-  fps,
-  durationInFrames,
-  initialFrame,
-  inFrame,
-  outFrame,
-  numberOfSharedAudioTags
-}) {
-  return;
-}
-NoReactInternals.validateFps;
-NoReactInternals.validateDimension;
-NoReactInternals.validateDurationInFrames;
-
-class RemotionProvider {
-  $$PROVIDER_TYPE = "REMOTION";
-  scope = createScope();
-  #src = signal(null);
-  #setup = false;
-  #loadStart = false;
-  #audio = null;
-  #waiting = signal(false);
-  #waitingPromise = null;
-  #mediaTags = signal([]);
-  #mediaElements = signal([]);
-  #bufferingElements = /* @__PURE__ */ new Set();
-  #timeline = null;
-  #frame = signal({ [REMOTION_PROVIDER_ID]: 0 });
-  #layoutEngine = new RemotionLayoutEngine();
-  #playbackEngine = null;
-  #container;
-  #ctx;
-  #setTimeline;
-  #setMediaVolume = {
-    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, ctx) {
-    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("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);
-    }
-    for (const el of this.#bufferingElements) {
-      if (!elements.includes(el)) this.#onStopWaitingFor(el);
-    }
-  }
-  #onFrameChange(frame) {
-    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) {
-    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) {
-    const { fps } = this.#src(), frame = time * fps;
-    this.#ctx.notify("seeking", time);
-    this.#setFrame({ [REMOTION_PROVIDER_ID]: frame });
-  }
-  setVolume(value) {
-    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) {
-    if (isFunction(rate)) {
-      const { playbackRate } = this.#ctx.$state;
-      this.setPlaybackRate(rate(peek(playbackRate)));
-      return;
-    }
-    this.#playbackEngine?.setPlaybackRate(rate);
-    this.#ctx.notify("rate-change", rate);
-  }
-  async loadSource(src) {
-    if (!isRemotionSrc(src)) return;
-    const onUserError = src.onError, resolvedSrc = {
-      compositionWidth: 1920,
-      compositionHeight: 1080,
-      fps: 30,
-      initialFrame: 0,
-      inFrame: 0,
-      outFrame: src.durationInFrames,
-      numberOfSharedAudioTags: 5,
-      inputProps: {},
-      ...src,
-      onError: (error) => {
-        this.pause();
-        this.#ctx.notify("error", {
-          message: error.message,
-          code: 1
-        });
-        onUserError?.(error);
-      }
-    };
-    this.#src.set(resolvedSrc);
-    for (const prop of Object.keys(resolvedSrc)) {
-      src[prop] = resolvedSrc[prop];
-    }
-    this.changeSrc(resolvedSrc);
-  }
-  destroy() {
-    this.changeSrc(null);
-  }
-  changeSrc(src) {
-    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 = () => {
-    const $src = useSignal(this.#src);
-    if (!$src) {
-      throw Error(
-        "[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
-    });
-    const { $state } = this.#ctx, $volume = useSignal($state.volume), $isMuted = useSignal($state.muted);
-    const mediaVolume = React.useMemo(() => {
-      const { muted, volume } = this.#ctx.$state;
-      return { mediaMuted: muted(), mediaVolume: volume() };
-    }, [$isMuted, $volume]);
-    return /* @__PURE__ */ React.createElement(
-      RemotionContextProvider,
-      {
-        src: $src,
-        component: Component,
-        timeline: this.#timeline,
-        mediaVolume,
-        setMediaVolume: this.#setMediaVolume
-      },
-      /* @__PURE__ */ React.createElement(Internals.Timeline.SetTimelineContext.Provider, { value: this.#setTimeline }, React.createElement(this.renderVideo, { src: $src }))
-    );
-  };
-  renderVideo = ({ src }) => {
-    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 ? /* @__PURE__ */ React.createElement(ErrorBoundary, { fallback: src.errorFallback, onError: src.onError }, /* @__PURE__ */ React.createElement(Internals.ClipComposition, null, /* @__PURE__ */ React.createElement(Video, { ...video?.props, ...src.inputProps }))) : null;
-    return /* @__PURE__ */ React.createElement(React.Suspense, { fallback: LoadingContent }, Content);
-  };
-  #ready(src) {
-    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) {
-    this.#bufferingElements.add(el);
-    this.#waiting.set(true);
-    if (!this.#waitingPromise) {
-      this.#waitingPromise = deferredPromise();
-    }
-  }
-  #onStopWaitingFor(el) {
-    this.#bufferingElements.delete(el);
-    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();
-    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) {
-    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) {
-    const { playing } = this.#ctx.$state;
-    if (isFunction(value)) {
-      this.#setPlaying(value(playing()));
-      return;
-    }
-    if (value) {
-      this.play();
-    } else if (!value) {
-      this.pause();
-    }
-  }
-  #createTimelineContextValue() {
-    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);
-        }
-      }
-    };
-  }
-}
-
-export { RemotionProvider };