remotion 3.0.29 → 3.1.0

package/.turbo/turbo-build.log

@@ -1,5 +1,5 @@
-remotion:build: cache hit, replaying output 39dcfe0ce8ce0a46
+remotion:build: cache hit, replaying output 4b47939fcdea9f24
 remotion:build: 
-remotion:build: > remotion@3.0.28 build /Users/jonathanburger/remotion/packages/core
+remotion:build: > remotion@3.0.31 build /Users/jonathanburger/remotion/packages/core
 remotion:build: > tsc -d
 remotion:build: 

package/dist/CanUseRemotionHooks.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+export declare const CanUseRemotionHooks: React.Context<boolean>;
+export declare const CanUseRemotionHooksProvider: React.FC<{
+    children: React.ReactNode;
+}>;

package/dist/CanUseRemotionHooks.js

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CanUseRemotionHooksProvider = exports.CanUseRemotionHooks = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+exports.CanUseRemotionHooks = (0, react_1.createContext)(false);
+const CanUseRemotionHooksProvider = ({ children }) => {
+    return ((0, jsx_runtime_1.jsx)(exports.CanUseRemotionHooks.Provider, { value: true, children: children }));
+};
+exports.CanUseRemotionHooksProvider = CanUseRemotionHooksProvider;

package/dist/Composition.js

@@ -4,11 +4,13 @@ exports.Composition = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const react_dom_1 = require("react-dom");
+const CanUseRemotionHooks_1 = require("./CanUseRemotionHooks");
 const CompositionManager_1 = require("./CompositionManager");
 const input_props_1 = require("./config/input-props");
 const delay_render_1 = require("./delay-render");
 const Folder_1 = require("./Folder");
 const get_environment_1 = require("./get-environment");
+const internals_1 = require("./internals");
 const loading_indicator_1 = require("./loading-indicator");
 const nonce_1 = require("./nonce");
 const portal_node_1 = require("./portal-node");
@@ -30,6 +32,13 @@ const Composition = ({ width, height, fps, durationInFrames, id, defaultProps, .
     const video = (0, use_video_1.useVideo)();
     const lazy = (0, use_lazy_component_1.useLazyComponent)(compProps);
     const nonce = (0, nonce_1.useNonce)();
+    const canUseComposition = (0, react_1.useContext)(internals_1.Internals.CanUseRemotionHooks);
+    if (canUseComposition) {
+        if (typeof window !== 'undefined' && window.remotion_isPlayer) {
+            throw new Error('<Composition> was mounted inside the `component` that was passed to the <Player>. See https://remotion.dev/docs/wrong-composition-mount for help.');
+        }
+        throw new Error('<Composition> mounted inside another composition. See https://remotion.dev/docs/wrong-composition-mount for help.');
+    }
     const { folderName, parentName } = (0, react_1.useContext)(Folder_1.FolderContext);
     (0, react_1.useEffect)(() => {
         // Ensure it's a URL safe id
@@ -40,7 +49,7 @@ const Composition = ({ width, height, fps, durationInFrames, id, defaultProps, .
         (0, validate_dimensions_1.validateDimension)(width, 'width', 'of the <Composition/> component');
         (0, validate_dimensions_1.validateDimension)(height, 'height', 'of the <Composition/> component');
         (0, validate_duration_in_frames_1.validateDurationInFrames)(durationInFrames, 'of the <Composition/> component');
-        (0, validate_fps_1.validateFps)(fps, 'as a prop of the <Composition/> component');
+        (0, validate_fps_1.validateFps)(fps, 'as a prop of the <Composition/> component', null);
         registerComposition({
             durationInFrames,
             fps,
@@ -75,14 +84,14 @@ const Composition = ({ width, height, fps, durationInFrames, id, defaultProps, .
         video.component === lazy) {
         const Comp = lazy;
         const inputProps = (0, input_props_1.getInputProps)();
-        return (0, react_dom_1.createPortal)((0, jsx_runtime_1.jsx)(react_1.Suspense, { fallback: (0, jsx_runtime_1.jsx)(loading_indicator_1.Loading, {}), children: (0, jsx_runtime_1.jsx)(Comp, { ...defaultProps, ...inputProps }) }), (0, portal_node_1.portalNode)());
+        return (0, react_dom_1.createPortal)((0, jsx_runtime_1.jsx)(CanUseRemotionHooks_1.CanUseRemotionHooksProvider, { children: (0, jsx_runtime_1.jsx)(react_1.Suspense, { fallback: (0, jsx_runtime_1.jsx)(loading_indicator_1.Loading, {}), children: (0, jsx_runtime_1.jsx)(Comp, { ...defaultProps, ...inputProps }) }) }), (0, portal_node_1.portalNode)());
     }
     if ((0, get_environment_1.getRemotionEnvironment)() === 'rendering' &&
         video &&
         video.component === lazy) {
         const Comp = lazy;
         const inputProps = (0, input_props_1.getInputProps)();
-        return (0, react_dom_1.createPortal)((0, jsx_runtime_1.jsx)(react_1.Suspense, { fallback: (0, jsx_runtime_1.jsx)(Fallback, {}), children: (0, jsx_runtime_1.jsx)(Comp, { ...defaultProps, ...inputProps }) }), (0, portal_node_1.portalNode)());
+        return (0, react_dom_1.createPortal)((0, jsx_runtime_1.jsx)(CanUseRemotionHooks_1.CanUseRemotionHooksProvider, { children: (0, jsx_runtime_1.jsx)(react_1.Suspense, { fallback: (0, jsx_runtime_1.jsx)(Fallback, {}), children: (0, jsx_runtime_1.jsx)(Comp, { ...defaultProps, ...inputProps }) }) }), (0, portal_node_1.portalNode)());
     }
     return null;
 };

package/dist/CompositionManager.d.ts

@@ -53,8 +53,8 @@ export declare type TAsset = {
 export declare type RenderAssetInfo = {
     assets: TAsset[][];
     imageSequenceName: string;
-    firstFrameIndex: number;
     downloadDir: string;
+    firstFrameIndex: number;
 };
 export declare type CompositionManagerContext = {
     compositions: TComposition[];

package/dist/Img.js

@@ -20,6 +20,9 @@ const ImgRefForwarding = ({ onError, ...props }, ref) => {
     }, [onError]);
     // If image source switches, make new handle
     (0, react_1.useLayoutEffect)(() => {
+        if (process.env.NODE_ENV === 'test') {
+            return;
+        }
         const newHandle = (0, delay_render_1.delayRender)('Loading <Img> with src=' + props.src);
         const { current } = imageRef;
         const didLoad = () => {

package/dist/Still.d.ts

@@ -1,2 +1,3 @@
+/// <reference types="react" />
 import type { StillProps } from './Composition';
 export declare const Still: <T>(props: StillProps<T>) => JSX.Element;

package/dist/audio/Audio.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 import type { RemotionMainAudioProps } from './props';
-export declare const Audio: React.ForwardRefExoticComponent<Pick<Omit<React.DetailedHTMLProps<React.AudioHTMLAttributes<HTMLAudioElement>, HTMLAudioElement>, "onEnded" | "autoPlay" | "controls" | "loop"> & {
+export declare const Audio: React.ForwardRefExoticComponent<Pick<Omit<React.DetailedHTMLProps<React.AudioHTMLAttributes<HTMLAudioElement>, HTMLAudioElement>, "autoPlay" | "controls" | "loop" | "onEnded"> & {
     volume?: import("../volume-prop").VolumeProp | undefined;
     playbackRate?: number | undefined;
-} & RemotionMainAudioProps, "style" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "placeholder" | "slot" | "spellCheck" | "tabIndex" | "title" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "key" | "controlsList" | "crossOrigin" | "mediaGroup" | "muted" | "playsInline" | "preload" | "src" | "volume" | "playbackRate" | keyof RemotionMainAudioProps> & React.RefAttributes<HTMLAudioElement>>;
+} & RemotionMainAudioProps, "id" | "children" | "src" | "volume" | "playbackRate" | "slot" | "style" | "title" | "property" | "key" | "is" | "controlsList" | "crossOrigin" | "mediaGroup" | "muted" | "playsInline" | "preload" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "lang" | "placeholder" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | keyof RemotionMainAudioProps> & React.RefAttributes<HTMLAudioElement>>;

package/dist/audio/AudioForDevelopment.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
-export declare const AudioForDevelopment: React.ForwardRefExoticComponent<Pick<Omit<React.DetailedHTMLProps<React.AudioHTMLAttributes<HTMLAudioElement>, HTMLAudioElement>, "onEnded" | "autoPlay" | "controls" | "loop"> & {
+export declare const AudioForDevelopment: React.ForwardRefExoticComponent<Pick<Omit<React.DetailedHTMLProps<React.AudioHTMLAttributes<HTMLAudioElement>, HTMLAudioElement>, "autoPlay" | "controls" | "loop" | "onEnded"> & {
     volume?: import("../volume-prop").VolumeProp | undefined;
     playbackRate?: number | undefined;
 } & {
     shouldPreMountAudioTags: boolean;
-}, "style" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "placeholder" | "slot" | "spellCheck" | "tabIndex" | "title" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "key" | "controlsList" | "crossOrigin" | "mediaGroup" | "muted" | "playsInline" | "preload" | "src" | "volume" | "playbackRate" | "shouldPreMountAudioTags"> & React.RefAttributes<HTMLAudioElement>>;
+}, "id" | "children" | "src" | "volume" | "playbackRate" | "slot" | "style" | "title" | "property" | "key" | "is" | "controlsList" | "crossOrigin" | "mediaGroup" | "muted" | "playsInline" | "preload" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "lang" | "placeholder" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "shouldPreMountAudioTags"> & React.RefAttributes<HTMLAudioElement>>;

package/dist/audio/AudioForRendering.d.ts

@@ -1,3 +1,3 @@
 import React from 'react';
 import type { RemotionAudioProps } from './props';
-export declare const AudioForRendering: React.ForwardRefExoticComponent<Pick<RemotionAudioProps, "style" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "placeholder" | "slot" | "spellCheck" | "tabIndex" | "title" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "key" | "controlsList" | "crossOrigin" | "mediaGroup" | "muted" | "playsInline" | "preload" | "src" | "volume" | "playbackRate"> & React.RefAttributes<HTMLAudioElement>>;
+export declare const AudioForRendering: React.ForwardRefExoticComponent<Pick<RemotionAudioProps, "id" | "children" | "src" | "volume" | "playbackRate" | "slot" | "style" | "title" | "property" | "key" | "is" | "controlsList" | "crossOrigin" | "mediaGroup" | "muted" | "playsInline" | "preload" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "lang" | "placeholder" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture"> & React.RefAttributes<HTMLAudioElement>>;

package/dist/config/codec.d.ts

@@ -1,4 +1,4 @@
-declare const validCodecs: readonly ["h264", "h265", "vp8", "vp9", "mp3", "aac", "wav", "prores", "h264-mkv"];
+declare const validCodecs: readonly ["h264", "h265", "vp8", "vp9", "mp3", "aac", "wav", "prores", "h264-mkv", "gif"];
 export declare type Codec = typeof validCodecs[number];
 export declare type CodecOrUndefined = Codec | undefined;
 declare const validLegacyFormats: readonly ["mp4", "png-sequence"];

package/dist/config/codec.js

@@ -11,6 +11,7 @@ const validCodecs = [
     'wav',
     'prores',
     'h264-mkv',
+    'gif',
 ];
 const validLegacyFormats = ['mp4', 'png-sequence'];
 let codec;
@@ -68,6 +69,12 @@ const getFinalOutputCodec = ({ codec: inputCodec, fileExtension, emitWarning, })
         }
         return 'h264-mkv';
     }
+    if (inputCodec === undefined && fileExtension === 'gif') {
+        if (emitWarning) {
+            console.info('You have specified a .gif extension, rendering a GIF');
+        }
+        return 'gif';
+    }
     return inputCodec !== null && inputCodec !== void 0 ? inputCodec : exports.DEFAULT_CODEC;
 };
 exports.getFinalOutputCodec = getFinalOutputCodec;

package/dist/config/concurrency.js

@@ -3,9 +3,6 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.getConcurrency = exports.setConcurrency = void 0;
 let currentConcurrency = null;
 const setConcurrency = (newConcurrency) => {
-    if (typeof newConcurrency !== 'number') {
-        throw new Error('--concurrency flag must be a number.');
-    }
     currentConcurrency = newConcurrency;
 };
 exports.setConcurrency = setConcurrency;

package/dist/config/crf.js

@@ -21,7 +21,7 @@ const getDefaultCrfForCodec = (codec) => {
     if (codec === 'h264' || codec === 'h264-mkv') {
         return 18; // FFMPEG default 23
     }
-    if (codec === 'h265') {
+    if (codec === 'h265' || codec === 'gif') {
         return 23; // FFMPEG default 28
     }
     if (codec === 'vp8') {
@@ -46,7 +46,7 @@ const getValidCrfRanges = (codec) => {
     if (codec === 'h264' || codec === 'h264-mkv') {
         return [1, 51];
     }
-    if (codec === 'h265') {
+    if (codec === 'h265' || codec === 'gif') {
         return [0, 51];
     }
     if (codec === 'vp8') {

package/dist/config/every-nth-frame.d.ts

@@ -0,0 +1,3 @@
+import type { Codec } from './codec';
+export declare const setEveryNthFrame: (frame: number) => void;
+export declare const getAndValidateEveryNthFrame: (codec: Codec) => number;

package/dist/config/every-nth-frame.js

@@ -0,0 +1,20 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getAndValidateEveryNthFrame = exports.setEveryNthFrame = void 0;
+const validate_every_nth_frame_1 = require("../validation/validate-every-nth-frame");
+let everyNthFrame = 1;
+const setEveryNthFrame = (frame) => {
+    (0, validate_every_nth_frame_1.validateEveryNthFrame)(frame);
+    everyNthFrame = frame;
+};
+exports.setEveryNthFrame = setEveryNthFrame;
+const getAndValidateEveryNthFrame = (codec) => {
+    if (everyNthFrame === 1) {
+        return everyNthFrame;
+    }
+    if (codec !== 'gif') {
+        throw new Error(`"everyNthFrame" can only be set if "codec" is set to "gif". The codec is "${codec}"`);
+    }
+    return everyNthFrame;
+};
+exports.getAndValidateEveryNthFrame = getAndValidateEveryNthFrame;

package/dist/config/index.d.ts

@@ -122,6 +122,17 @@ export declare const Config: {
          * Default: 1.
          */
         readonly setScale: (newScale: number) => void;
+        /**
+         * Specify which frames should be picked for rendering a GIF
+         * Default: 1, which means every frame
+         * https://remotion.dev/docs/render-as-gif
+         */
+        readonly setEveryNthFrame: (frame: number) => void;
+        /**
+         * Specify the number of Loop a GIF should have.
+         * Default: null (means GIF will loop infinite)
+         */
+        readonly setNumberOfGifLoops: (newLoop: import("./number-of-gif-loops").Loop) => void;
     };
     readonly Output: {
         /**
@@ -161,7 +172,7 @@ export declare const Config: {
          * Possible values: 4444-xq, 4444, hq, standard, light, proxy. Default: 'hq'
          * See https://avpres.net/FFmpeg/im_ProRes.html for meaning of possible values.
          */
-        readonly setProResProfile: (profile: "light" | "4444-xq" | "4444" | "hq" | "standard" | "proxy" | undefined) => void;
+        readonly setProResProfile: (profile: "4444-xq" | "4444" | "hq" | "standard" | "light" | "proxy" | undefined) => void;
     };
 };
 export type { PixelFormat, Concurrency, WebpackConfiguration, WebpackOverrideFn, BrowserExecutable, FfmpegExecutable, ImageFormat, Codec, Browser, FrameRange, LogLevel, StillImageFormat, };

package/dist/config/index.js

@@ -7,12 +7,14 @@ const codec_1 = require("./codec");
 const concurrency_1 = require("./concurrency");
 const crf_1 = require("./crf");
 const env_file_1 = require("./env-file");
+const every_nth_frame_1 = require("./every-nth-frame");
 const ffmpeg_executable_1 = require("./ffmpeg-executable");
 const frame_range_1 = require("./frame-range");
 const image_format_1 = require("./image-format");
 const image_sequence_1 = require("./image-sequence");
 const log_1 = require("./log");
 const max_timeline_tracks_1 = require("./max-timeline-tracks");
+const number_of_gif_loops_1 = require("./number-of-gif-loops");
 const override_webpack_1 = require("./override-webpack");
 const overwrite_1 = require("./overwrite");
 const pixel_format_1 = require("./pixel-format");
@@ -136,6 +138,17 @@ exports.Config = {
          * Default: 1.
          */
         setScale: scale_1.setScale,
+        /**
+         * Specify which frames should be picked for rendering a GIF
+         * Default: 1, which means every frame
+         * https://remotion.dev/docs/render-as-gif
+         */
+        setEveryNthFrame: every_nth_frame_1.setEveryNthFrame,
+        /**
+         * Specify the number of Loop a GIF should have.
+         * Default: null (means GIF will loop infinite)
+         */
+        setNumberOfGifLoops: number_of_gif_loops_1.setNumberOfGifLoops,
     },
     Output: {
         /**

package/dist/config/loop.d.ts

@@ -1,3 +1,4 @@
+import type { Codec } from './codec';
 export declare type Loop = number | null;
-export declare const setLoop: (newLoop: Loop) => void;
-export declare const getLoop: () => Loop;
+export declare const setNumberOfGifLoops: (newLoop: Loop | null) => void;
+export declare const getAndValidateNumberOfGifLoops: (codec: Codec) => Loop;

package/dist/config/loop.js

@@ -1,15 +1,18 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.getLoop = exports.setLoop = void 0;
+exports.getAndValidateNumberOfGifLoops = exports.setNumberOfGifLoops = void 0;
 let currentLoop = null;
-const setLoop = (newLoop) => {
-    if (typeof newLoop !== 'number') {
-        throw new Error('--loop flag must be a number.');
+const setNumberOfGifLoops = (newLoop) => {
+    if (newLoop !== null && typeof newLoop !== 'number') {
+        throw new Error('--number-of-gif-loops flag must be a number.');
     }
     currentLoop = newLoop;
 };
-exports.setLoop = setLoop;
-const getLoop = () => {
+exports.setNumberOfGifLoops = setNumberOfGifLoops;
+const getAndValidateNumberOfGifLoops = (codec) => {
+    if (codec !== 'gif') {
+        throw new Error(`The "numberOfGifLoops" setting can only be used for GIFs. The codec is set to ${codec}`);
+    }
     return currentLoop;
 };
-exports.getLoop = getLoop;
+exports.getAndValidateNumberOfGifLoops = getAndValidateNumberOfGifLoops;

package/dist/config/number-of-gif-loops.d.ts

@@ -0,0 +1,4 @@
+import type { Codec } from './codec';
+export declare type Loop = number | null;
+export declare const setNumberOfGifLoops: (newLoop: Loop | null) => void;
+export declare const getAndValidateNumberOfGifLoops: (codec: Codec) => number | null;

package/dist/config/number-of-gif-loops.js

@@ -0,0 +1,21 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getAndValidateNumberOfGifLoops = exports.setNumberOfGifLoops = void 0;
+let currentLoop = null;
+const setNumberOfGifLoops = (newLoop) => {
+    if (newLoop !== null && typeof newLoop !== 'number') {
+        throw new Error('--number-of-gif-loops flag must be a number.');
+    }
+    currentLoop = newLoop;
+};
+exports.setNumberOfGifLoops = setNumberOfGifLoops;
+const getAndValidateNumberOfGifLoops = (codec) => {
+    if (currentLoop === null) {
+        return currentLoop;
+    }
+    if (codec !== 'gif') {
+        throw new Error(`The "numberOfGifLoops" setting can only be used for GIFs. The codec is set to ${codec}`);
+    }
+    return currentLoop;
+};
+exports.getAndValidateNumberOfGifLoops = getAndValidateNumberOfGifLoops;

package/dist/config/skip-n-frames.d.ts

@@ -0,0 +1,2 @@
+export declare const setSkipNFrames: (frame: number) => void;
+export declare const getSkipNFrames: () => number;

package/dist/config/skip-n-frames.js

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getSkipNFrames = exports.setSkipNFrames = void 0;
+const validate_frame_1 = require("../validation/validate-frame");
+let skipNFrames = 0;
+const setSkipNFrames = (frame) => {
+    (0, validate_frame_1.validateFrame)(frame, Infinity);
+    skipNFrames = frame;
+};
+exports.setSkipNFrames = setSkipNFrames;
+const getSkipNFrames = () => skipNFrames;
+exports.getSkipNFrames = getSkipNFrames;

package/dist/internals.d.ts

@@ -7,21 +7,19 @@ import type { ProResProfile } from './config/prores-profile';
 import * as CSSUtils from './default-css';
 import type { RemotionEnvironment } from './get-environment';
 import * as perf from './perf';
-import * as TimelineInOutPosition from './timeline-inout-position-state';
 import type { SetTimelineInOutContextValue, TimelineInOutContextValue } from './timeline-inout-position-state';
-import * as TimelinePosition from './timeline-position-state';
 import type { SetTimelineContextValue, TimelineContextValue } from './timeline-position-state';
 import { truthy } from './truthy';
 import type { OpenGlRenderer } from './validation/validate-opengl-renderer';
 import type { MediaVolumeContextValue, SetMediaVolumeContextValue } from './volume-position-state';
 import { useRemotionContexts } from './wrap-remotion-context';
 declare const Timeline: {
-    TimelineInOutContext: import("react").Context<TimelineInOutPosition.TimelineInOutContextValue>;
-    SetTimelineInOutContext: import("react").Context<TimelineInOutPosition.SetTimelineInOutContextValue>;
-    useTimelineInOutFramePosition: () => TimelineInOutPosition.TimelineInOutContextValue;
-    useTimelineSetInOutFramePosition: () => TimelineInOutPosition.SetTimelineInOutContextValue;
-    TimelineContext: import("react").Context<TimelinePosition.TimelineContextValue>;
-    SetTimelineContext: import("react").Context<TimelinePosition.SetTimelineContextValue>;
+    TimelineInOutContext: import("react").Context<TimelineInOutContextValue>;
+    SetTimelineInOutContext: import("react").Context<SetTimelineInOutContextValue>;
+    useTimelineInOutFramePosition: () => TimelineInOutContextValue;
+    useTimelineSetInOutFramePosition: () => SetTimelineInOutContextValue;
+    TimelineContext: import("react").Context<TimelineContextValue>;
+    SetTimelineContext: import("react").Context<SetTimelineContextValue>;
     useTimelinePosition: () => number;
     useTimelineSetFrame: () => (u: import("react").SetStateAction<number>) => void;
     usePlayingState: () => readonly [boolean, (u: import("react").SetStateAction<boolean>) => void, import("react").MutableRefObject<boolean>];
@@ -30,12 +28,12 @@ export declare const Internals: {
     perf: typeof perf;
     useUnsafeVideoConfig: () => import("./video-config").VideoConfig | null;
     Timeline: {
-        TimelineInOutContext: import("react").Context<TimelineInOutPosition.TimelineInOutContextValue>;
-        SetTimelineInOutContext: import("react").Context<TimelineInOutPosition.SetTimelineInOutContextValue>;
-        useTimelineInOutFramePosition: () => TimelineInOutPosition.TimelineInOutContextValue;
-        useTimelineSetInOutFramePosition: () => TimelineInOutPosition.SetTimelineInOutContextValue;
-        TimelineContext: import("react").Context<TimelinePosition.TimelineContextValue>;
-        SetTimelineContext: import("react").Context<TimelinePosition.SetTimelineContextValue>;
+        TimelineInOutContext: import("react").Context<TimelineInOutContextValue>;
+        SetTimelineInOutContext: import("react").Context<SetTimelineInOutContextValue>;
+        useTimelineInOutFramePosition: () => TimelineInOutContextValue;
+        useTimelineSetInOutFramePosition: () => SetTimelineInOutContextValue;
+        TimelineContext: import("react").Context<TimelineContextValue>;
+        SetTimelineContext: import("react").Context<SetTimelineContextValue>;
         useTimelinePosition: () => number;
         useTimelineSetFrame: () => (u: import("react").SetStateAction<number>) => void;
         usePlayingState: () => readonly [boolean, (u: import("react").SetStateAction<boolean>) => void, import("react").MutableRefObject<boolean>];
@@ -56,28 +54,30 @@ export declare const Internals: {
     getOutputCodecOrUndefined: () => import("./config/codec").CodecOrUndefined;
     getWebpackOverrideFn: () => WebpackOverrideFn;
     getQuality: () => number | undefined;
+    getAndValidateEveryNthFrame: (codec: "h264" | "h265" | "vp8" | "vp9" | "mp3" | "aac" | "wav" | "prores" | "h264-mkv" | "gif") => number;
+    getAndValidateNumberOfGifLoops: (codec: "h264" | "h265" | "vp8" | "vp9" | "mp3" | "aac" | "wav" | "prores" | "h264-mkv" | "gif") => number | null;
     getScale: () => number;
     getShouldOutputImageSequence: (frameRange: import("./config/frame-range").FrameRange | null) => boolean;
-    validateSelectedCrfAndCodecCombination: (crf: unknown, codec: "h264" | "h265" | "vp8" | "vp9" | "mp3" | "aac" | "wav" | "prores" | "h264-mkv") => void;
+    validateSelectedCrfAndCodecCombination: (crf: unknown, codec: "h264" | "h265" | "vp8" | "vp9" | "mp3" | "aac" | "wav" | "prores" | "h264-mkv" | "gif") => void;
     getFinalOutputCodec: ({ codec: inputCodec, fileExtension, emitWarning, }: {
         codec: import("./config/codec").CodecOrUndefined;
         fileExtension: string | null;
         emitWarning: boolean;
-    }) => "h264" | "h265" | "vp8" | "vp9" | "mp3" | "aac" | "wav" | "prores" | "h264-mkv";
+    }) => "h264" | "h265" | "vp8" | "vp9" | "mp3" | "aac" | "wav" | "prores" | "h264-mkv" | "gif";
     useMediaVolumeState: () => readonly [number, (u: number) => void];
     useMediaMutedState: () => readonly [boolean, (u: import("react").SetStateAction<boolean>) => void];
-    DEFAULT_CODEC: "h264" | "h265" | "vp8" | "vp9" | "mp3" | "aac" | "wav" | "prores" | "h264-mkv";
+    DEFAULT_CODEC: "h264" | "h265" | "vp8" | "vp9" | "mp3" | "aac" | "wav" | "prores" | "h264-mkv" | "gif";
     DEFAULT_PIXEL_FORMAT: "yuv420p" | "yuva420p" | "yuv422p" | "yuv444p" | "yuv420p10le" | "yuv422p10le" | "yuv444p10le" | "yuva444p10le";
     FEATURE_FLAG_FIREFOX_SUPPORT: boolean;
     DEFAULT_WEBPACK_CACHE_ENABLED: boolean;
     getBrowser: () => import("./config/browser").Browser | null;
     DEFAULT_BROWSER: import("./config/browser").Browser;
-    getDefaultCrfForCodec: (codec: "h264" | "h265" | "vp8" | "vp9" | "mp3" | "aac" | "wav" | "prores" | "h264-mkv") => number;
-    getActualCrf: (codec: "h264" | "h265" | "vp8" | "vp9" | "mp3" | "aac" | "wav" | "prores" | "h264-mkv") => number;
+    getDefaultCrfForCodec: (codec: "h264" | "h265" | "vp8" | "vp9" | "mp3" | "aac" | "wav" | "prores" | "h264-mkv" | "gif") => number;
+    getActualCrf: (codec: "h264" | "h265" | "vp8" | "vp9" | "mp3" | "aac" | "wav" | "prores" | "h264-mkv" | "gif") => number;
     setFrameRangeFromCli: (newFrameRange: string | number) => void;
     getUserPreferredImageFormat: () => "none" | "png" | "jpeg" | undefined;
     validateSelectedPixelFormatAndImageFormatCombination: (pixelFormat: "yuv420p" | "yuva420p" | "yuv422p" | "yuv444p" | "yuv420p10le" | "yuv422p10le" | "yuv444p10le" | "yuva444p10le", imageFormat: "none" | "png" | "jpeg") => "none" | "valid";
-    validateSelectedPixelFormatAndCodecCombination: (pixelFormat: "yuv420p" | "yuva420p" | "yuv422p" | "yuv444p" | "yuv420p10le" | "yuv422p10le" | "yuv444p10le" | "yuva444p10le", codec: "h264" | "h265" | "vp8" | "vp9" | "mp3" | "aac" | "wav" | "prores" | "h264-mkv") => void;
+    validateSelectedPixelFormatAndCodecCombination: (pixelFormat: "yuv420p" | "yuva420p" | "yuv422p" | "yuv444p" | "yuv420p10le" | "yuv422p10le" | "yuv444p10le" | "yuva444p10le", codec: "h264" | "h265" | "vp8" | "vp9" | "mp3" | "aac" | "wav" | "prores" | "h264-mkv" | "gif") => void;
     validateFrameRange: (frameRange: import("./config/frame-range").FrameRange | null) => void;
     validateNonNullImageFormat: (imageFormat: "none" | "png" | "jpeg") => void;
     getWebpackCaching: () => boolean;
@@ -85,7 +85,7 @@ export declare const Internals: {
         readonly _result: import("react").ComponentType<T>;
     };
     truthy: typeof truthy;
-    isAudioCodec: (codec: "h264" | "h265" | "vp8" | "vp9" | "mp3" | "aac" | "wav" | "prores" | "h264-mkv" | undefined) => boolean;
+    isAudioCodec: (codec: "h264" | "h265" | "vp8" | "vp9" | "mp3" | "aac" | "wav" | "prores" | "h264-mkv" | "gif" | undefined) => boolean;
     Logging: typeof Logging;
     SequenceContext: import("react").Context<import("./Sequence").SequenceContextType | null>;
     useRemotionContexts: typeof useRemotionContexts;
@@ -98,12 +98,12 @@ export declare const Internals: {
     MediaVolumeContext: import("react").Context<MediaVolumeContextValue>;
     SetMediaVolumeContext: import("react").Context<SetMediaVolumeContextValue>;
     validateDurationInFrames: (durationInFrames: number, component: string) => void;
-    validateFps: (fps: number, location: string) => void;
+    validateFps: (fps: number, location: string, codec: "h264" | "h265" | "vp8" | "vp9" | "mp3" | "aac" | "wav" | "prores" | "h264-mkv" | "gif" | null) => void;
     validateDimension: (amount: number, nameOfProp: string, location: string) => void;
     getRemotionEnvironment: () => RemotionEnvironment;
-    getProResProfile: () => "light" | "4444-xq" | "4444" | "hq" | "standard" | "proxy" | undefined;
-    setProResProfile: (profile: "light" | "4444-xq" | "4444" | "hq" | "standard" | "proxy" | undefined) => void;
-    validateSelectedCodecAndProResCombination: (actualCodec: "h264" | "h265" | "vp8" | "vp9" | "mp3" | "aac" | "wav" | "prores" | "h264-mkv", actualProResProfile: "light" | "4444-xq" | "4444" | "hq" | "standard" | "proxy" | undefined) => void;
+    getProResProfile: () => "4444-xq" | "4444" | "hq" | "standard" | "light" | "proxy" | undefined;
+    setProResProfile: (profile: "4444-xq" | "4444" | "hq" | "standard" | "light" | "proxy" | undefined) => void;
+    validateSelectedCodecAndProResCombination: (actualCodec: "h264" | "h265" | "vp8" | "vp9" | "mp3" | "aac" | "wav" | "prores" | "h264-mkv" | "gif", actualProResProfile: "4444-xq" | "4444" | "hq" | "standard" | "light" | "proxy" | undefined) => void;
     getMaxTimelineTracks: () => number;
     SharedAudioContext: import("react").Context<{
         registerAudio: (aud: import("./audio").RemotionAudioProps) => {
@@ -148,5 +148,9 @@ export declare const Internals: {
     portalNode: () => HTMLElement;
     waitForRoot: (fn: (comp: import("react").FC<{}>) => void) => () => void;
     validateOffthreadVideoImageFormat: (input: unknown) => void;
+    CanUseRemotionHooksProvider: import("react").FC<{
+        children: import("react").ReactNode;
+    }>;
+    CanUseRemotionHooks: import("react").Context<boolean>;
 };
 export type { TComposition, Timeline, TCompMetadata, TSequence, WebpackOverrideFn, TAsset, RenderAssetInfo, TimelineContextValue, SetTimelineContextValue, TimelineInOutContextValue, SetTimelineInOutContextValue, CompProps, CompositionManagerContext, MediaVolumeContextValue, SetMediaVolumeContextValue, RemotionEnvironment, ProResProfile, OpenGlRenderer, };