remotion 3.3.53 → 3.3.55

package/dist/cjs/internals.js

@@ -24,7 +24,7 @@ var __importStar = (this && this.__importStar) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Internals = void 0;
-const config_1 = require("./config");
+const config_js_1 = require("./config.js");
 const shared_audio_tags_js_1 = require("./audio/shared-audio-tags.js");
 const CanUseRemotionHooks_js_1 = require("./CanUseRemotionHooks.js");
 const CompositionManager_js_1 = require("./CompositionManager.js");
@@ -37,7 +37,7 @@ const portal_node_js_1 = require("./portal-node.js");
 const prefetch_state_js_1 = require("./prefetch-state.js");
 const register_root_js_1 = require("./register-root.js");
 const RemotionRoot_js_1 = require("./RemotionRoot.js");
-const Sequence_js_1 = require("./Sequence.js");
+const SequenceContext_js_1 = require("./SequenceContext.js");
 const setup_env_variables_js_1 = require("./setup-env-variables.js");
 const TimelinePosition = __importStar(require("./timeline-position-state.js"));
 const truthy_js_1 = require("./truthy.js");
@@ -67,7 +67,7 @@ exports.Internals = {
     useMediaMutedState: volume_position_state_js_1.useMediaMutedState,
     useLazyComponent: use_lazy_component_js_1.useLazyComponent,
     truthy: truthy_js_1.truthy,
-    SequenceContext: Sequence_js_1.SequenceContext,
+    SequenceContext: SequenceContext_js_1.SequenceContext,
     useRemotionContexts: wrap_remotion_context_js_1.useRemotionContexts,
     RemotionContextProvider: wrap_remotion_context_js_1.RemotionContextProvider,
     CSSUtils,
@@ -91,7 +91,7 @@ exports.Internals = {
     validateOffthreadVideoImageFormat: validate_offthreadvideo_image_format_js_1.validateOffthreadVideoImageFormat,
     CanUseRemotionHooksProvider: CanUseRemotionHooks_js_1.CanUseRemotionHooksProvider,
     CanUseRemotionHooks: CanUseRemotionHooks_js_1.CanUseRemotionHooks,
-    enableLegacyRemotionConfig: config_1.enableLegacyRemotionConfig,
+    enableLegacyRemotionConfig: config_js_1.enableLegacyRemotionConfig,
     PrefetchProvider: prefetch_state_js_1.PrefetchProvider,
     DurationsContextProvider: duration_state_js_1.DurationsContextProvider,
     IsPlayerContextProvider: is_player_js_1.IsPlayerContextProvider,

package/dist/cjs/interpolate-colors.d.ts

@@ -2,4 +2,8 @@
  * Copied from:
  * https://github.com/software-mansion/react-native-reanimated/blob/master/src/reanimated2/Colors.ts
  */
+/**
+ * @description This function allows you to map a range of values to colors using a concise syntax.
+ * @see [Documentation](https://www.remotion.dev/docs/interpolate-colors)
+ */
 export declare const interpolateColors: (input: number, inputRange: readonly number[], outputRange: readonly string[]) => string;

package/dist/cjs/interpolate-colors.js

@@ -378,6 +378,10 @@ const interpolateColorsRGB = (value, inputRange, colors) => {
     });
     return rgbaColor(r, g, b, a);
 };
+/**
+ * @description This function allows you to map a range of values to colors using a concise syntax.
+ * @see [Documentation](https://www.remotion.dev/docs/interpolate-colors)
+ */
 const interpolateColors = (input, inputRange, outputRange) => {
     if (typeof input === 'undefined') {
         throw new TypeError('input can not be undefined');

package/dist/cjs/interpolate.js

@@ -2,6 +2,10 @@
 // Taken from https://github.com/facebook/react-native/blob/0b9ea60b4fee8cacc36e7160e31b91fc114dbc0d/Libraries/Animated/src/nodes/AnimatedInterpolation.js
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.interpolate = void 0;
+/**
+ * @description This function allows you to map a range of values to another with a conside syntax
+ * @see [Documentation](https://www.remotion.dev/docs/interpolate)
+ */
 function interpolateFunction(input, inputRange, outputRange, options) {
     const { extrapolateLeft, extrapolateRight, easing } = options;
     let result = input;

package/dist/cjs/loop/index.d.ts

@@ -6,4 +6,8 @@ export declare type LoopProps = {
     name?: string;
     children: React.ReactNode;
 } & LayoutAndStyle;
+/**
+ * @description This component allows you to quickly lay out an animation so it repeats itself.
+ * @see [Documentation](https://www.remotion.dev/docs/loop)
+ */
 export declare const Loop: React.FC<LoopProps>;

package/dist/cjs/loop/index.js

@@ -5,6 +5,10 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const Sequence_js_1 = require("../Sequence.js");
 const use_video_config_js_1 = require("../use-video-config.js");
 const validate_duration_in_frames_js_1 = require("../validation/validate-duration-in-frames.js");
+/**
+ * @description This component allows you to quickly lay out an animation so it repeats itself.
+ * @see [Documentation](https://www.remotion.dev/docs/loop)
+ */
 const Loop = ({ durationInFrames, times = Infinity, children, name, ...props }) => {
     const { durationInFrames: compDuration } = (0, use_video_config_js_1.useVideoConfig)();
     (0, validate_duration_in_frames_js_1.validateDurationInFrames)(durationInFrames, 'of the <Loop /> component');

package/dist/cjs/prefetch.d.ts

@@ -3,6 +3,10 @@ declare type FetchAndPreload = {
     free: () => void;
     waitUntilDone: () => Promise<string>;
 };
+/**
+ * @description When you call the preFetch() function, an asset will be fetched and kept in memory so it is ready when you want to play it in a <Player>.
+ * @see [Documentation](https://www.remotion.dev/docs/prefetch)
+ */
 export declare const prefetch: (src: string, options?: {
     method?: 'blob-url' | 'base64';
 }) => FetchAndPreload;

package/dist/cjs/prefetch.js

@@ -23,6 +23,10 @@ const blobToBase64 = function (blob) {
         reader.readAsDataURL(blob);
     });
 };
+/**
+ * @description When you call the preFetch() function, an asset will be fetched and kept in memory so it is ready when you want to play it in a <Player>.
+ * @see [Documentation](https://www.remotion.dev/docs/prefetch)
+ */
 const prefetch = (src, options) => {
     var _a;
     const method = (_a = options === null || options === void 0 ? void 0 : options.method) !== null && _a !== void 0 ? _a : 'blob-url';

package/dist/cjs/random.d.ts

@@ -1,7 +1,6 @@
 export declare type RandomSeed = number | string | null;
 /**
- * A deterministic pseudo-random number generator.
- * Pass in the same seed and get the same pseudorandom number.
- * See: https://remotion.dev/docs/random
+ * @description A deterministic pseudo-random number generator. Pass in the same seed and get the same pseudorandom number.
+ * @see [Documentation](https://remotion.dev/docs/random)
  */
 export declare const random: (seed: RandomSeed, dummy?: unknown) => number;

package/dist/cjs/random.js

@@ -20,9 +20,8 @@ function hashCode(str) {
     return hash;
 }
 /**
- * A deterministic pseudo-random number generator.
- * Pass in the same seed and get the same pseudorandom number.
- * See: https://remotion.dev/docs/random
+ * @description A deterministic pseudo-random number generator. Pass in the same seed and get the same pseudorandom number.
+ * @see [Documentation](https://remotion.dev/docs/random)
  */
 const random = (seed, dummy) => {
     if (dummy !== undefined) {

package/dist/cjs/register-root.d.ts

@@ -1,4 +1,8 @@
 import type React from 'react';
+/**
+ * @description This function registers the root component of the Remotion project
+ * @see [Documentation](https://www.remotion.dev/docs/register-root)
+ */
 export declare const registerRoot: (comp: React.FC) => void;
 export declare const getRoot: () => React.FC<{}> | null;
 export declare const waitForRoot: (fn: (comp: React.FC) => void) => (() => void);

package/dist/cjs/register-root.js

@@ -3,6 +3,10 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.waitForRoot = exports.getRoot = exports.registerRoot = void 0;
 let Root = null;
 let listeners = [];
+/**
+ * @description This function registers the root component of the Remotion project
+ * @see [Documentation](https://www.remotion.dev/docs/register-root)
+ */
 const registerRoot = (comp) => {
     if (!comp) {
         throw new Error(`You must pass a React component to registerRoot(), but ${JSON.stringify(comp)} was passed.`);

package/dist/cjs/series/index.d.ts

@@ -5,6 +5,10 @@ declare type SeriesSequenceProps = PropsWithChildren<{
     offset?: number;
 } & Pick<SequenceProps, 'layout' | 'name'> & LayoutAndStyle>;
 declare const SeriesSequence: import("react").ForwardRefExoticComponent<SeriesSequenceProps & import("react").RefAttributes<HTMLDivElement>>;
+/**
+ * @description with this component, you can easily stitch together scenes that should play sequentially after another.
+ * @see [Documentation](https://www.remotion.dev/docs/series)
+ */
 declare const Series: FC<{
     children: React.ReactNode;
 }> & {

package/dist/cjs/series/index.js

@@ -12,6 +12,10 @@ const SeriesSequenceRefForwardingFunction = ({ children }, _ref) => {
     return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: children });
 };
 const SeriesSequence = (0, react_1.forwardRef)(SeriesSequenceRefForwardingFunction);
+/**
+ * @description with this component, you can easily stitch together scenes that should play sequentially after another.
+ * @see [Documentation](https://www.remotion.dev/docs/series)
+ */
 const Series = ({ children }) => {
     const childrenValue = (0, react_1.useMemo)(() => {
         let startFrame = 0;

package/dist/cjs/spring/index.d.ts

@@ -1,7 +1,7 @@
 import type { SpringConfig } from './spring-utils.js';
 /**
- * Calculates a position based on physical parameters, start and end value, and time.
- * @link https://www.remotion.dev/docs/spring
+ * @description Calculates a position based on physical parameters, start and end value, and time.
+ * @see [Documentation](https://www.remotion.dev/docs/spring)
  * @param {number} frame The current time value. Most of the time you want to pass in the return value of useCurrentFrame.
  * @param {number} fps The framerate at which the animation runs. Pass in the value obtained by `useVideoConfig()`.
  * @param {?Object} config optional object that allows you to customize the physical properties of the animation.

package/dist/cjs/spring/index.js

@@ -7,8 +7,8 @@ const validation_spring_duration_js_1 = require("../validation/validation-spring
 const measure_spring_js_1 = require("./measure-spring.js");
 const spring_utils_js_1 = require("./spring-utils.js");
 /**
- * Calculates a position based on physical parameters, start and end value, and time.
- * @link https://www.remotion.dev/docs/spring
+ * @description Calculates a position based on physical parameters, start and end value, and time.
+ * @see [Documentation](https://www.remotion.dev/docs/spring)
  * @param {number} frame The current time value. Most of the time you want to pass in the return value of useCurrentFrame.
  * @param {number} fps The framerate at which the animation runs. Pass in the value obtained by `useVideoConfig()`.
  * @param {?Object} config optional object that allows you to customize the physical properties of the animation.

package/dist/cjs/spring/measure-spring.d.ts

@@ -1,4 +1,8 @@
 import type { SpringConfig } from './spring-utils.js';
+/**
+ * @description The function returns how long it takes for a spring animation to settle
+ * @see [Documentation](https://www.remotion.dev/docs/measure-spring)
+ */
 export declare function measureSpring({ fps, config, threshold, from, to, }: {
     fps: number;
     config?: Partial<SpringConfig>;

package/dist/cjs/spring/measure-spring.js

@@ -3,6 +3,10 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.measureSpring = void 0;
 const validate_fps_js_1 = require("../validation/validate-fps.js");
 const spring_utils_js_1 = require("./spring-utils.js");
+/**
+ * @description The function returns how long it takes for a spring animation to settle
+ * @see [Documentation](https://www.remotion.dev/docs/measure-spring)
+ */
 function measureSpring({ fps, config = {}, threshold = 0.005, from = 0, to = 1, }) {
     if (typeof threshold !== 'number') {
         throw new TypeError(`threshold must be a number, got ${threshold} of type ${typeof threshold}`);

package/dist/cjs/static-file.d.ts

@@ -1,5 +1,5 @@
 /**
- * Reference a file from the public/ folder.
- * If the file does not appear in the autocomplete, type the path manually.
+ * @description Reference a file from the public/ folder. If the file does not appear in the autocomplete, type the path manually.
+ * @see [Documentation](https://www.remotion.dev/docs/staticfile)
  */
 export declare const staticFile: (path: string) => string;

package/dist/cjs/static-file.js

@@ -14,8 +14,8 @@ const inner = (path) => {
     return `/${trimLeadingSlash(path)}`;
 };
 /**
- * Reference a file from the public/ folder.
- * If the file does not appear in the autocomplete, type the path manually.
+ * @description Reference a file from the public/ folder. If the file does not appear in the autocomplete, type the path manually.
+ * @see [Documentation](https://www.remotion.dev/docs/staticfile)
  */
 const staticFile = (path) => {
     if (path.startsWith('http://') || path.startsWith('https://')) {

package/dist/cjs/use-current-frame.d.ts

@@ -1,6 +1,5 @@
 /**
- * Get the current frame of the video.
- * Frames are 0-indexed, meaning the first frame is 0, the last frame is the duration of the composition in frames minus one.
- * @link https://www.remotion.dev/docs/use-current-frame
+ * @description Get the current frame of the video. Frames are 0-indexed, meaning the first frame is 0, the last frame is the duration of the composition in frames minus one.
+ * @see [Documentation](https://remotion.dev/docs/use-current-frame)
  */
 export declare const useCurrentFrame: () => number;

package/dist/cjs/use-current-frame.js

@@ -3,12 +3,11 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.useCurrentFrame = void 0;
 const react_1 = require("react");
 const CanUseRemotionHooks_js_1 = require("./CanUseRemotionHooks.js");
-const Sequence_js_1 = require("./Sequence.js");
+const SequenceContext_js_1 = require("./SequenceContext.js");
 const timeline_position_state_js_1 = require("./timeline-position-state.js");
 /**
- * Get the current frame of the video.
- * Frames are 0-indexed, meaning the first frame is 0, the last frame is the duration of the composition in frames minus one.
- * @link https://www.remotion.dev/docs/use-current-frame
+ * @description Get the current frame of the video. Frames are 0-indexed, meaning the first frame is 0, the last frame is the duration of the composition in frames minus one.
+ * @see [Documentation](https://remotion.dev/docs/use-current-frame)
  */
 const useCurrentFrame = () => {
     const canUseRemotionHooks = (0, react_1.useContext)(CanUseRemotionHooks_js_1.CanUseRemotionHooks);
@@ -19,7 +18,7 @@ const useCurrentFrame = () => {
         throw new Error(`useCurrentFrame() can only be called inside a component that was registered as a composition. See https://www.remotion.dev/docs/the-fundamentals#defining-compositions`);
     }
     const frame = (0, timeline_position_state_js_1.useTimelinePosition)();
-    const context = (0, react_1.useContext)(Sequence_js_1.SequenceContext);
+    const context = (0, react_1.useContext)(SequenceContext_js_1.SequenceContext);
     const contextOffset = context
         ? context.cumulatedFrom + context.relativeFrom
         : 0;

package/dist/cjs/use-media-in-timeline.js

@@ -8,7 +8,7 @@ const get_asset_file_name_js_1 = require("./get-asset-file-name.js");
 const get_environment_js_1 = require("./get-environment.js");
 const nonce_js_1 = require("./nonce.js");
 const play_and_handle_not_allowed_error_js_1 = require("./play-and-handle-not-allowed-error.js");
-const Sequence_js_1 = require("./Sequence.js");
+const SequenceContext_js_1 = require("./SequenceContext.js");
 const timeline_position_state_js_1 = require("./timeline-position-state.js");
 const use_video_config_js_1 = require("./use-video-config.js");
 const volume_prop_js_1 = require("./volume-prop.js");
@@ -23,7 +23,7 @@ const warnOnce = (message) => {
 const useMediaInTimeline = ({ volume, mediaVolume, mediaRef, src, mediaType, playbackRate, }) => {
     const videoConfig = (0, use_video_config_js_1.useVideoConfig)();
     const { rootId, audioAndVideoTags } = (0, react_1.useContext)(timeline_position_state_js_1.TimelineContext);
-    const parentSequence = (0, react_1.useContext)(Sequence_js_1.SequenceContext);
+    const parentSequence = (0, react_1.useContext)(SequenceContext_js_1.SequenceContext);
     const actualFrom = parentSequence
         ? parentSequence.relativeFrom + parentSequence.cumulatedFrom
         : 0;

package/dist/cjs/use-unsafe-video-config.js

@@ -2,11 +2,11 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useUnsafeVideoConfig = void 0;
 const react_1 = require("react");
-const Sequence_js_1 = require("./Sequence.js");
+const SequenceContext_js_1 = require("./SequenceContext.js");
 const use_video_js_1 = require("./use-video.js");
 const useUnsafeVideoConfig = () => {
     var _a;
-    const context = (0, react_1.useContext)(Sequence_js_1.SequenceContext);
+    const context = (0, react_1.useContext)(SequenceContext_js_1.SequenceContext);
     const ctxDuration = (_a = context === null || context === void 0 ? void 0 : context.durationInFrames) !== null && _a !== void 0 ? _a : null;
     const video = (0, use_video_js_1.useVideo)();
     return (0, react_1.useMemo)(() => {

package/dist/cjs/use-video-config.d.ts

@@ -1,7 +1,8 @@
 import type { VideoConfig } from './video-config.js';
 /**
- * Get some info about the context of the video that you are making.
- * Returns an object containing `fps`, `width`, `height` and `durationInFrames`, all of type `number`.
- * @link https://www.remotion.dev/docs/use-video-config
+ * /**
+ * @description Get some info about the context of the video that you are making.
+ * @see [Documentation](https://www.remotion.dev/docs/use-video-config)
+ * @returns Returns an object containing `fps`, `width`, `height` and `durationInFrames`, all of type `number`.
  */
 export declare const useVideoConfig: () => VideoConfig;

package/dist/cjs/use-video-config.js

@@ -6,9 +6,10 @@ const CanUseRemotionHooks_js_1 = require("./CanUseRemotionHooks.js");
 const is_player_js_1 = require("./is-player.js");
 const use_unsafe_video_config_js_1 = require("./use-unsafe-video-config.js");
 /**
- * Get some info about the context of the video that you are making.
- * Returns an object containing `fps`, `width`, `height` and `durationInFrames`, all of type `number`.
- * @link https://www.remotion.dev/docs/use-video-config
+ * /**
+ * @description Get some info about the context of the video that you are making.
+ * @see [Documentation](https://www.remotion.dev/docs/use-video-config)
+ * @returns Returns an object containing `fps`, `width`, `height` and `durationInFrames`, all of type `number`.
  */
 const useVideoConfig = () => {
     const videoConfig = (0, use_unsafe_video_config_js_1.useUnsafeVideoConfig)();

package/dist/cjs/validate-media-props.d.ts

@@ -1,4 +1,4 @@
-import type { RemotionAudioProps } from './audio';
-import type { RemotionVideoProps } from './video';
+import type { RemotionAudioProps } from './audio/index.js';
+import type { RemotionVideoProps } from './video/index.js';
 import type { OffthreadVideoProps } from './video/props.js';
 export declare const validateMediaProps: (props: RemotionVideoProps | RemotionAudioProps | OffthreadVideoProps, component: 'Video' | 'Audio') => void;

package/dist/cjs/version.d.ts

@@ -1 +1 @@
-export declare const VERSION = "3.3.53";
+export declare const VERSION = "3.3.55";

package/dist/cjs/version.js

@@ -2,4 +2,4 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.VERSION = void 0;
 // Automatically generated on publish
-exports.VERSION = '3.3.53';
+exports.VERSION = '3.3.55';

package/dist/cjs/video/OffthreadVideo.d.ts

@@ -1,3 +1,7 @@
 import React from 'react';
 import type { OffthreadVideoProps, RemotionMainVideoProps } from './props.js';
+/**
+ * @description This method imports and displays a video, similar to <Video />. During rendering, it extracts the exact frame from the video and displays it in an <img> tag
+ * @see [Documentation](https://www.remotion.dev/docs/offthreadvideo)
+ */
 export declare const OffthreadVideo: React.FC<Omit<OffthreadVideoProps & RemotionMainVideoProps, 'loop'>>;

package/dist/cjs/video/OffthreadVideo.js

@@ -10,6 +10,10 @@ const validate_start_from_props_js_1 = require("../validate-start-from-props.js"
 const validate_offthreadvideo_image_format_js_1 = require("../validation/validate-offthreadvideo-image-format.js");
 const OffthreadVideoForRendering_js_1 = require("./OffthreadVideoForRendering.js");
 const VideoForDevelopment_js_1 = require("./VideoForDevelopment.js");
+/**
+ * @description This method imports and displays a video, similar to <Video />. During rendering, it extracts the exact frame from the video and displays it in an <img> tag
+ * @see [Documentation](https://www.remotion.dev/docs/offthreadvideo)
+ */
 const OffthreadVideo = (props) => {
     const { startFrom, endAt, ...otherProps } = props;
     const environment = (0, get_environment_js_1.useRemotionEnvironment)();

package/dist/cjs/video/OffthreadVideoForRendering.js

@@ -10,7 +10,7 @@ const default_css_js_1 = require("../default-css.js");
 const Img_js_1 = require("../Img.js");
 const internals_js_1 = require("../internals.js");
 const random_js_1 = require("../random.js");
-const Sequence_js_1 = require("../Sequence.js");
+const SequenceContext_js_1 = require("../SequenceContext.js");
 const timeline_position_state_js_1 = require("../timeline-position-state.js");
 const use_current_frame_js_1 = require("../use-current-frame.js");
 const use_unsafe_video_config_js_1 = require("../use-unsafe-video-config.js");
@@ -22,7 +22,7 @@ const OffthreadVideoForRendering = ({ onError, volume: volumeProp, playbackRate,
     const frame = (0, use_current_frame_js_1.useCurrentFrame)();
     const volumePropsFrame = (0, use_audio_frame_js_1.useFrameForVolumeProp)();
     const videoConfig = (0, use_unsafe_video_config_js_1.useUnsafeVideoConfig)();
-    const sequenceContext = (0, react_1.useContext)(Sequence_js_1.SequenceContext);
+    const sequenceContext = (0, react_1.useContext)(SequenceContext_js_1.SequenceContext);
     const mediaStartsAt = (0, use_audio_frame_js_1.useMediaStartsAt)();
     const { registerAsset, unregisterAsset } = (0, react_1.useContext)(CompositionManager_js_1.CompositionManager);
     if (!src) {

package/dist/cjs/video/Video.d.ts

@@ -1,5 +1,9 @@
 import React from 'react';
 import type { RemotionMainVideoProps } from './props.js';
+/**
+ * @description allows you to include a video file in your Remotion project. It wraps the native HTMLVideoElement.
+ * @see [Documentation](https://www.remotion.dev/docs/video)
+ */
 export declare const Video: (props: Omit<React.DetailedHTMLProps<React.VideoHTMLAttributes<HTMLVideoElement>, HTMLVideoElement>, "nonce" | "onEnded" | "autoPlay" | "controls"> & {
     volume?: import("../volume-prop.js").VolumeProp | undefined;
     playbackRate?: number | undefined;

package/dist/cjs/video/Video.js

@@ -4,7 +4,7 @@ exports.Video = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const get_environment_js_1 = require("../get-environment.js");
-const loop_1 = require("../loop");
+const index_js_1 = require("../loop/index.js");
 const Sequence_js_1 = require("../Sequence.js");
 const use_video_config_js_1 = require("../use-video-config.js");
 const validate_media_props_js_1 = require("../validate-media-props.js");
@@ -32,7 +32,7 @@ const VideoForwardingFunction = (props, ref) => {
         const naturalDuration = durations[props.src] * fps;
         const playbackRate = (_a = props.playbackRate) !== null && _a !== void 0 ? _a : 1;
         const durationInFrames = Math.floor(naturalDuration / playbackRate);
-        return ((0, jsx_runtime_1.jsx)(loop_1.Loop, { durationInFrames: durationInFrames, children: (0, jsx_runtime_1.jsx)(exports.Video, { ...propsOtherThanLoop, ref: ref }) }));
+        return ((0, jsx_runtime_1.jsx)(index_js_1.Loop, { durationInFrames: durationInFrames, children: (0, jsx_runtime_1.jsx)(exports.Video, { ...propsOtherThanLoop, ref: ref }) }));
     }
     if (typeof startFrom !== 'undefined' || typeof endAt !== 'undefined') {
         (0, validate_start_from_props_js_1.validateStartFromProps)(startFrom, endAt);
@@ -47,4 +47,8 @@ const VideoForwardingFunction = (props, ref) => {
     return ((0, jsx_runtime_1.jsx)(VideoForDevelopment_js_1.VideoForDevelopment, { onlyWarnForMediaSeekingError: false, ...otherProps, ref: ref, onDuration: onDuration }));
 };
 const forward = react_1.forwardRef;
+/**
+ * @description allows you to include a video file in your Remotion project. It wraps the native HTMLVideoElement.
+ * @see [Documentation](https://www.remotion.dev/docs/video)
+ */
 exports.Video = forward(VideoForwardingFunction);

package/dist/cjs/video/VideoForDevelopment.js

@@ -5,7 +5,7 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const use_audio_frame_js_1 = require("../audio/use-audio-frame.js");
 const prefetch_js_1 = require("../prefetch.js");
-const Sequence_js_1 = require("../Sequence.js");
+const SequenceContext_js_1 = require("../SequenceContext.js");
 const use_media_in_timeline_js_1 = require("../use-media-in-timeline.js");
 const use_media_playback_js_1 = require("../use-media-playback.js");
 const use_media_tag_volume_js_1 = require("../use-media-tag-volume.js");
@@ -18,7 +18,7 @@ const VideoForDevelopmentRefForwardingFunction = (props, ref) => {
     const videoRef = (0, react_1.useRef)(null);
     const volumePropFrame = (0, use_audio_frame_js_1.useFrameForVolumeProp)();
     const { fps, durationInFrames } = (0, use_video_config_js_1.useVideoConfig)();
-    const parentSequence = (0, react_1.useContext)(Sequence_js_1.SequenceContext);
+    const parentSequence = (0, react_1.useContext)(SequenceContext_js_1.SequenceContext);
     const { volume, muted, playbackRate, onlyWarnForMediaSeekingError, src, onDuration, 
     // @ts-expect-error
     acceptableTimeShift, acceptableTimeShiftInSeconds, ...nativeProps } = props;

package/dist/cjs/video/VideoForRendering.js

@@ -10,7 +10,7 @@ const delay_render_js_1 = require("../delay-render.js");
 const get_environment_js_1 = require("../get-environment.js");
 const is_approximately_the_same_js_1 = require("../is-approximately-the-same.js");
 const random_js_1 = require("../random.js");
-const Sequence_js_1 = require("../Sequence.js");
+const SequenceContext_js_1 = require("../SequenceContext.js");
 const timeline_position_state_js_1 = require("../timeline-position-state.js");
 const use_current_frame_js_1 = require("../use-current-frame.js");
 const use_unsafe_video_config_js_1 = require("../use-unsafe-video-config.js");
@@ -23,7 +23,7 @@ const VideoForRenderingForwardFunction = ({ onError, volume: volumeProp, allowAm
     const volumePropsFrame = (0, use_audio_frame_js_1.useFrameForVolumeProp)();
     const videoConfig = (0, use_unsafe_video_config_js_1.useUnsafeVideoConfig)();
     const videoRef = (0, react_1.useRef)(null);
-    const sequenceContext = (0, react_1.useContext)(Sequence_js_1.SequenceContext);
+    const sequenceContext = (0, react_1.useContext)(SequenceContext_js_1.SequenceContext);
     const mediaStartsAt = (0, use_audio_frame_js_1.useMediaStartsAt)();
     const environment = (0, get_environment_js_1.useRemotionEnvironment)();
     const { registerAsset, unregisterAsset } = (0, react_1.useContext)(CompositionManager_js_1.CompositionManager);

package/dist/cjs/wrap-remotion-context.d.ts

@@ -3,7 +3,7 @@ export declare function useRemotionContexts(): {
     compositionManagerCtx: import("./CompositionManager.js").CompositionManagerContext;
     timelineContext: import("./timeline-position-state.js").TimelineContextValue;
     setTimelineContext: import("./timeline-position-state.js").SetTimelineContextValue;
-    sequenceContext: import("./Sequence.js").SequenceContextType | null;
+    sequenceContext: import("./SequenceContext.js").SequenceContextType | null;
     nonceContext: import("./nonce.js").TNonceContext;
     canUseRemotionHooksContext: boolean;
     nativeLayersContext: import("./NativeLayers.js").TNativeLayersContext;

package/dist/cjs/wrap-remotion-context.js

@@ -34,13 +34,13 @@ const CompositionManager_js_1 = require("./CompositionManager.js");
 const NativeLayers_js_1 = require("./NativeLayers.js");
 const nonce_js_1 = require("./nonce.js");
 const prefetch_state_js_1 = require("./prefetch-state.js");
-const Sequence_js_1 = require("./Sequence.js");
+const SequenceContext_js_1 = require("./SequenceContext.js");
 const timeline_position_state_js_1 = require("./timeline-position-state.js");
 function useRemotionContexts() {
     const compositionManagerCtx = react_1.default.useContext(CompositionManager_js_1.CompositionManager);
     const timelineContext = react_1.default.useContext(timeline_position_state_js_1.TimelineContext);
     const setTimelineContext = react_1.default.useContext(timeline_position_state_js_1.SetTimelineContext);
-    const sequenceContext = react_1.default.useContext(Sequence_js_1.SequenceContext);
+    const sequenceContext = react_1.default.useContext(SequenceContext_js_1.SequenceContext);
     const nonceContext = react_1.default.useContext(nonce_js_1.NonceContext);
     const canUseRemotionHooksContext = react_1.default.useContext(CanUseRemotionHooks_js_1.CanUseRemotionHooks);
     const nativeLayersContext = react_1.default.useContext(NativeLayers_js_1.NativeLayersContext);
@@ -68,6 +68,6 @@ function useRemotionContexts() {
 exports.useRemotionContexts = useRemotionContexts;
 const RemotionContextProvider = (props) => {
     const { children, contexts } = props;
-    return ((0, jsx_runtime_1.jsx)(CanUseRemotionHooks_js_1.CanUseRemotionHooks.Provider, { value: contexts.canUseRemotionHooksContext, children: (0, jsx_runtime_1.jsx)(nonce_js_1.NonceContext.Provider, { value: contexts.nonceContext, children: (0, jsx_runtime_1.jsx)(NativeLayers_js_1.NativeLayersContext.Provider, { value: contexts.nativeLayersContext, children: (0, jsx_runtime_1.jsx)(prefetch_state_js_1.PreloadContext.Provider, { value: contexts.preloadContext, children: (0, jsx_runtime_1.jsx)(CompositionManager_js_1.CompositionManager.Provider, { value: contexts.compositionManagerCtx, children: (0, jsx_runtime_1.jsx)(timeline_position_state_js_1.TimelineContext.Provider, { value: contexts.timelineContext, children: (0, jsx_runtime_1.jsx)(timeline_position_state_js_1.SetTimelineContext.Provider, { value: contexts.setTimelineContext, children: (0, jsx_runtime_1.jsx)(Sequence_js_1.SequenceContext.Provider, { value: contexts.sequenceContext, children: children }) }) }) }) }) }) }) }));
+    return ((0, jsx_runtime_1.jsx)(CanUseRemotionHooks_js_1.CanUseRemotionHooks.Provider, { value: contexts.canUseRemotionHooksContext, children: (0, jsx_runtime_1.jsx)(nonce_js_1.NonceContext.Provider, { value: contexts.nonceContext, children: (0, jsx_runtime_1.jsx)(NativeLayers_js_1.NativeLayersContext.Provider, { value: contexts.nativeLayersContext, children: (0, jsx_runtime_1.jsx)(prefetch_state_js_1.PreloadContext.Provider, { value: contexts.preloadContext, children: (0, jsx_runtime_1.jsx)(CompositionManager_js_1.CompositionManager.Provider, { value: contexts.compositionManagerCtx, children: (0, jsx_runtime_1.jsx)(timeline_position_state_js_1.TimelineContext.Provider, { value: contexts.timelineContext, children: (0, jsx_runtime_1.jsx)(timeline_position_state_js_1.SetTimelineContext.Provider, { value: contexts.setTimelineContext, children: (0, jsx_runtime_1.jsx)(SequenceContext_js_1.SequenceContext.Provider, { value: contexts.sequenceContext, children: children }) }) }) }) }) }) }) }));
 };
 exports.RemotionContextProvider = RemotionContextProvider;

package/dist/esm/AbsoluteFill.js

@@ -19,7 +19,7 @@ const AbsoluteFillRefForwarding = (props, ref) => {
     return _jsx("div", { ref: ref, style: actualStyle, ...other });
 };
 /**
- * An absolutely positioned <div> element with 100% width, height, and a column flex style
- * @link https://www.remotion.dev/docs/absolute-fill
+ * @description An absolutely positioned <div> element with 100% width, height, and a column flex style
+ * @see [Documentation](https://www.remotion.dev/docs/absolute-fill)
  */
 export const AbsoluteFill = forwardRef(AbsoluteFillRefForwarding);

package/dist/esm/Composition.js

@@ -26,6 +26,10 @@ const Fallback = () => {
     }, []);
     return null;
 };
+/**
+ * @description This component is used to register a video to make it renderable and make it show in the sidebar, in dev mode.
+ * @see [Documentation](https://www.remotion.dev/docs/composition)
+ */
 export const Composition = ({ width, height, fps, durationInFrames, id, defaultProps, ...compProps }) => {
     const { registerComposition, unregisterComposition } = useContext(CompositionManager);
     const video = useVideo();

package/dist/esm/Folder.js

@@ -7,6 +7,10 @@ export const FolderContext = createContext({
     folderName: null,
     parentName: null,
 });
+/**
+ * @description By wrapping a <Composition /> inside a <Folder />, you can visually categorize it in your sidebar, should you have many compositions.
+ * @see [Documentation](https://www.remotion.dev/docs/folder)
+ */
 export const Folder = ({ name, children, }) => {
     const parent = useContext(FolderContext);
     const { registerFolder, unregisterFolder } = useContext(CompositionManager);

package/dist/esm/IFrame.js

@@ -18,4 +18,8 @@ const IFrameRefForwarding = ({ onLoad, onError, ...props }, ref) => {
     }, [handle, onError]);
     return _jsx("iframe", { ...props, ref: ref, onError: didGetError, onLoad: didLoad });
 };
+/**
+ * @description The <IFrame /> can be used like a regular <iframe> HTML tag.
+ * @see [Documentation](https://www.remotion.dev/docs/iframe)
+ */
 export const IFrame = forwardRef(IFrameRefForwarding);

package/dist/esm/Img.js

@@ -46,4 +46,8 @@ const ImgRefForwarding = ({ onError, src, ...props }, ref) => {
     }
     return (_jsx("img", { ...props, ref: imageRef, src: actualSrc, onError: didGetError }));
 };
+/**
+ * @description Works just like a regular HTML img tag. When you use the <Img> tag, Remotion will ensure that the image is loaded before rendering the frame.
+ * @see [Documentation](https://www.remotion.dev/docs/img)
+ */
 export const Img = forwardRef(ImgRefForwarding);

package/dist/esm/Sequence.js

@@ -1,13 +1,13 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { createContext, forwardRef, useContext, useEffect, useMemo, useState, } from 'react';
+import { forwardRef, useContext, useEffect, useMemo, useState, } from 'react';
 import { AbsoluteFill } from './AbsoluteFill.js';
 import { CompositionManager } from './CompositionManager.js';
 import { useRemotionEnvironment } from './get-environment.js';
 import { getTimelineClipName } from './get-timeline-clip-name.js';
 import { useNonce } from './nonce.js';
-import { TimelineContext, useTimelinePosition } from './timeline-position-state.js';
+import { SequenceContext } from './SequenceContext.js';
+import { TimelineContext, useTimelinePosition, } from './timeline-position-state.js';
 import { useVideoConfig } from './use-video-config.js';
-export const SequenceContext = createContext(null);
 const SequenceRefForwardingFunction = ({ from = 0, durationInFrames = Infinity, children, name, showInTimeline = true, showLoopTimesInTimeline, ...other }, ref) => {
     const { layout = 'absolute-fill' } = other;
     const [id] = useState(() => String(Math.random()));
@@ -122,7 +122,7 @@ const SequenceRefForwardingFunction = ({ from = 0, durationInFrames = Infinity,
     return (_jsx(SequenceContext.Provider, { value: contextValue, children: content === null ? null : other.layout === 'none' ? (content) : (_jsx(AbsoluteFill, { ref: ref, style: defaultStyle, className: other.className, children: content })) }));
 };
 /**
- * A component that time-shifts its children and wraps them in an absolutely positioned <div>.
- * @link https://www.remotion.dev/docs/sequence
+ * @description A component that time-shifts its children and wraps them in an absolutely positioned <div>.
+ * @see [Documentation](https://www.remotion.dev/docs/sequence]
  */
 export const Sequence = forwardRef(SequenceRefForwardingFunction);