remotion 4.0.51 → 4.0.53

package/dist/cjs/Composition.d.ts

@@ -1,6 +1,7 @@
 import type { ComponentType, PropsWithChildren } from 'react';
 import React from 'react';
 import type { AnyZodObject } from 'zod';
+import type { Codec } from './codec.js';
 import type { InferProps, PropsIfHasProps } from './props-if-has-props.js';
 type LooseComponentType<T> = ComponentType<T> | ((props: T) => React.ReactNode);
 export type CompProps<Props> = {
@@ -16,6 +17,7 @@ export type CalcMetadataReturnType<T extends Record<string, unknown>> = {
     width?: number;
     height?: number;
     props?: T;
+    defaultCodec?: Codec;
 };
 export type CalculateMetadataFunction<T extends Record<string, unknown>> = (options: {
     defaultProps: T;

package/dist/cjs/CompositionManagerContext.d.ts

@@ -3,7 +3,7 @@ import type { AnyZodObject } from 'zod';
 import type { AnyComposition, TComposition } from './CompositionManager.js';
 import type { TFolder } from './Folder.js';
 import type { VideoConfig } from './video-config.js';
-export type BaseMetadata = Pick<VideoConfig, 'durationInFrames' | 'fps' | 'props' | 'height' | 'width'>;
+export type BaseMetadata = Pick<VideoConfig, 'durationInFrames' | 'fps' | 'props' | 'height' | 'width' | 'defaultCodec'>;
 export type CanvasContent = {
     type: 'composition';
     compositionId: string;

package/dist/cjs/ResolveCompositionConfig.js

@@ -177,6 +177,7 @@ const useResolvedVideoConfig = (preferredCompositionId) => {
                     id: composition.id,
                     props: currentCompositionMetadata.props,
                     defaultProps: (_a = composition.defaultProps) !== null && _a !== void 0 ? _a : {},
+                    defaultCodec: currentCompositionMetadata.defaultCodec,
                 },
             };
         }
@@ -198,6 +199,7 @@ const useResolvedVideoConfig = (preferredCompositionId) => {
                             ? {}
                             : (_d = (0, input_props_js_1.getInputProps)()) !== null && _d !== void 0 ? _d : {}),
                     },
+                    defaultCodec: null,
                 },
             };
         }

package/dist/cjs/Sequence.d.ts

@@ -1,16 +1,15 @@
 import React from 'react';
 import type { LoopDisplay } from './CompositionManager.js';
 export type LayoutAndStyle = {
-    layout: 'none';
-} | {
     layout?: 'absolute-fill';
     style?: React.CSSProperties;
     className?: string;
+} | {
+    layout: 'none';
 };
-export type SequenceProps = {
+export type SequencePropsWithoutDuration = {
     children: React.ReactNode;
     from?: number;
-    durationInFrames?: number;
     name?: string;
     /**
      * @deprecated For internal use only.
@@ -21,6 +20,9 @@ export type SequenceProps = {
      */
     loopDisplay?: LoopDisplay;
 } & LayoutAndStyle;
+export type SequenceProps = {
+    durationInFrames?: number;
+} & SequencePropsWithoutDuration;
 /**
  * @description A component that time-shifts its children and wraps them in an absolutely positioned <div>.
  * @see [Documentation](https://www.remotion.dev/docs/sequence)

package/dist/cjs/codec.d.ts

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

package/dist/cjs/codec.js

@@ -0,0 +1,16 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DEFAULT_CODEC = exports.validCodecs = void 0;
+exports.validCodecs = [
+    'h264',
+    'h265',
+    'vp8',
+    'vp9',
+    'mp3',
+    'aac',
+    'wav',
+    'prores',
+    'h264-mkv',
+    'gif',
+];
+exports.DEFAULT_CODEC = 'h264';

package/dist/cjs/index.d.ts

@@ -1,5 +1,6 @@
 /// <reference types="node" />
 import './asset-types.js';
+import type { Codec } from './codec.js';
 import type { TRenderAsset } from './CompositionManager.js';
 import type { StaticFile } from './get-static-files.js';
 import type { ClipRegion } from './NativeLayers.js';
@@ -61,6 +62,7 @@ export type BundleState = {
     compositionDurationInFrames: number;
     compositionWidth: number;
     compositionFps: number;
+    compositionDefaultCodec: Codec;
 };
 export * from './AbsoluteFill.js';
 export * from './audio/index.js';
@@ -85,7 +87,7 @@ export { ClipRegion } from './NativeLayers.js';
 export { prefetch } from './prefetch.js';
 export { random, RandomSeed } from './random.js';
 export { registerRoot } from './register-root.js';
-export { Sequence } from './Sequence.js';
+export { LayoutAndStyle, Sequence, SequenceProps, SequencePropsWithoutDuration, } from './Sequence.js';
 export { Series } from './series/index.js';
 export * from './spring/index.js';
 export { staticFile } from './static-file.js';

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

@@ -1,6 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.resolveVideoConfig = void 0;
+const validate_default_codec_js_1 = require("./validation/validate-default-codec.js");
 const validate_dimensions_js_1 = require("./validation/validate-dimensions.js");
 const validate_duration_in_frames_js_1 = require("./validation/validate-duration-in-frames.js");
 const validate_fps_js_1 = require("./validation/validate-fps.js");
@@ -19,10 +20,12 @@ const validateCalculated = ({ composition, calculated, }) => {
         allowFloats: false,
         component: `of the "<Composition />" component with the id "${composition.id}"`,
     });
-    return { width, height, fps, durationInFrames };
+    const defaultCodec = calculated === null || calculated === void 0 ? void 0 : calculated.defaultCodec;
+    (0, validate_default_codec_js_1.validateDefaultCodec)(defaultCodec, calculateMetadataErrorLocation);
+    return { width, height, fps, durationInFrames, defaultCodec };
 };
 const resolveVideoConfig = ({ composition, editorProps: editorPropsOrUndefined, signal, inputProps, }) => {
-    var _a, _b, _c, _d, _e, _f;
+    var _a, _b, _c, _d, _e, _f, _g;
     const calculatedProm = composition.calculateMetadata
         ? composition.calculateMetadata({
             defaultProps: (_a = composition.defaultProps) !== null && _a !== void 0 ? _a : {},
@@ -43,7 +46,7 @@ const resolveVideoConfig = ({ composition, editorProps: editorPropsOrUndefined,
         'then' in calculatedProm) {
         return calculatedProm.then((c) => {
             var _a, _b;
-            const { height, width, durationInFrames, fps } = validateCalculated({
+            const { height, width, durationInFrames, fps, defaultCodec } = validateCalculated({
                 calculated: c,
                 composition,
             });
@@ -55,6 +58,7 @@ const resolveVideoConfig = ({ composition, editorProps: editorPropsOrUndefined,
                 id: composition.id,
                 defaultProps: (_a = composition.defaultProps) !== null && _a !== void 0 ? _a : {},
                 props: (_b = c.props) !== null && _b !== void 0 ? _b : fallbackProps,
+                defaultCodec: defaultCodec !== null && defaultCodec !== void 0 ? defaultCodec : null,
             };
         });
     }
@@ -68,6 +72,7 @@ const resolveVideoConfig = ({ composition, editorProps: editorPropsOrUndefined,
             id: composition.id,
             defaultProps: (_d = composition.defaultProps) !== null && _d !== void 0 ? _d : {},
             props: fallbackProps,
+            defaultCodec: null,
         };
     }
     return {
@@ -75,6 +80,7 @@ const resolveVideoConfig = ({ composition, editorProps: editorPropsOrUndefined,
         id: composition.id,
         defaultProps: (_e = composition.defaultProps) !== null && _e !== void 0 ? _e : {},
         props: (_f = calculatedProm.props) !== null && _f !== void 0 ? _f : fallbackProps,
+        defaultCodec: (_g = calculatedProm.defaultCodec) !== null && _g !== void 0 ? _g : null,
     };
 };
 exports.resolveVideoConfig = resolveVideoConfig;

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

@@ -3,6 +3,7 @@ import type { LayoutAndStyle, SequenceProps } from '../Sequence.js';
 type SeriesSequenceProps = PropsWithChildren<{
     durationInFrames: number;
     offset?: number;
+    className?: string;
 } & Pick<SequenceProps, 'layout' | 'name'> & LayoutAndStyle>;
 declare const SeriesSequence: import("react").ForwardRefExoticComponent<SeriesSequenceProps & import("react").RefAttributes<HTMLDivElement>>;
 /**

package/dist/cjs/series/index.js

@@ -28,10 +28,10 @@ const Series = ({ children }) => {
                 if (castedChild.trim() === '') {
                     return null;
                 }
-                throw new TypeError(`The <Series /> component only accepts a list of <Series.Sequence /> components as it's children, but you passed a string "${castedChild}"`);
+                throw new TypeError(`The <Series /> component only accepts a list of <Series.Sequence /> components as its children, but you passed a string "${castedChild}"`);
             }
             if (castedChild.type !== SeriesSequence) {
-                throw new TypeError(`The <Series /> component only accepts a list of <Series.Sequence /> components as it's children, but got ${castedChild} instead`);
+                throw new TypeError(`The <Series /> component only accepts a list of <Series.Sequence /> components as its children, but got ${castedChild} instead`);
             }
             const debugInfo = `index = ${i}, duration = ${castedChild.props.durationInFrames}`;
             if (!(castedChild === null || castedChild === void 0 ? void 0 : castedChild.props.children)) {

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

@@ -13,7 +13,7 @@ const useUnsafeVideoConfig = () => {
         if (!video) {
             return null;
         }
-        const { id, durationInFrames, fps, height, width, defaultProps, props } = video;
+        const { id, durationInFrames, fps, height, width, defaultProps, props, defaultCodec, } = video;
         return {
             id,
             width,
@@ -22,6 +22,7 @@ const useUnsafeVideoConfig = () => {
             durationInFrames: ctxDuration !== null && ctxDuration !== void 0 ? ctxDuration : durationInFrames,
             defaultProps,
             props,
+            defaultCodec,
         };
     }, [ctxDuration, video]);
 };

package/dist/cjs/validation/validate-default-codec.d.ts

@@ -0,0 +1,2 @@
+import type { CodecOrUndefined } from '../codec';
+export declare function validateDefaultCodec(defaultCodec: unknown, location: string): asserts defaultCodec is CodecOrUndefined;

package/dist/cjs/validation/validate-default-codec.js

@@ -0,0 +1,16 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.validateDefaultCodec = void 0;
+const codec_1 = require("../codec");
+function validateDefaultCodec(defaultCodec, location) {
+    if (typeof defaultCodec === 'undefined') {
+        return;
+    }
+    if (typeof defaultCodec !== 'string') {
+        throw new TypeError(`The "defaultCodec" prop ${location} must be a string, but you passed a value of type ${typeof defaultCodec}.`);
+    }
+    if (!codec_1.validCodecs.includes(defaultCodec)) {
+        throw new Error(`The "defaultCodec" prop ${location} must be one of ${codec_1.validCodecs.join(', ')}, but you passed ${defaultCodec}.`);
+    }
+}
+exports.validateDefaultCodec = validateDefaultCodec;

package/dist/cjs/version.d.ts

@@ -1 +1 @@
-export declare const VERSION = "4.0.51";
+export declare const VERSION = "4.0.53";

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 = '4.0.51';
+exports.VERSION = '4.0.53';

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

@@ -1,3 +1,4 @@
+import type { Codec } from './codec';
 export type VideoConfig = {
     width: number;
     height: number;
@@ -6,4 +7,5 @@ export type VideoConfig = {
     id: string;
     defaultProps: Record<string, unknown>;
     props: Record<string, unknown>;
+    defaultCodec: Codec | null;
 };

package/dist/esm/index.mjs

@@ -59,7 +59,7 @@ function truthy(value) {
 }
 
 // Automatically generated on publish
-const VERSION = '4.0.51';
+const VERSION = '4.0.53';
 
 const checkMultipleRemotionVersions = () => {
     if (typeof globalThis === 'undefined') {
@@ -515,6 +515,31 @@ const EditorPropsProvider = ({ children }) => {
     return (jsx(EditorPropsContext.Provider, { value: ctx, children: children }));
 };
 
+const validCodecs = [
+    'h264',
+    'h265',
+    'vp8',
+    'vp9',
+    'mp3',
+    'aac',
+    'wav',
+    'prores',
+    'h264-mkv',
+    'gif',
+];
+
+function validateDefaultCodec(defaultCodec, location) {
+    if (typeof defaultCodec === 'undefined') {
+        return;
+    }
+    if (typeof defaultCodec !== 'string') {
+        throw new TypeError(`The "defaultCodec" prop ${location} must be a string, but you passed a value of type ${typeof defaultCodec}.`);
+    }
+    if (!validCodecs.includes(defaultCodec)) {
+        throw new Error(`The "defaultCodec" prop ${location} must be one of ${validCodecs.join(', ')}, but you passed ${defaultCodec}.`);
+    }
+}
+
 function validateDimension(amount, nameOfProp, location) {
     if (typeof amount !== 'number') {
         throw new Error(`The "${nameOfProp}" prop ${location} must be a number, but you passed a value of type ${typeof amount}`);
@@ -585,10 +610,12 @@ const validateCalculated = ({ composition, calculated, }) => {
         allowFloats: false,
         component: `of the "<Composition />" component with the id "${composition.id}"`,
     });
-    return { width, height, fps, durationInFrames };
+    const defaultCodec = calculated === null || calculated === void 0 ? void 0 : calculated.defaultCodec;
+    validateDefaultCodec(defaultCodec, calculateMetadataErrorLocation);
+    return { width, height, fps, durationInFrames, defaultCodec };
 };
 const resolveVideoConfig = ({ composition, editorProps: editorPropsOrUndefined, signal, inputProps, }) => {
-    var _a, _b, _c, _d, _e, _f;
+    var _a, _b, _c, _d, _e, _f, _g;
     const calculatedProm = composition.calculateMetadata
         ? composition.calculateMetadata({
             defaultProps: (_a = composition.defaultProps) !== null && _a !== void 0 ? _a : {},
@@ -609,7 +636,7 @@ const resolveVideoConfig = ({ composition, editorProps: editorPropsOrUndefined,
         'then' in calculatedProm) {
         return calculatedProm.then((c) => {
             var _a, _b;
-            const { height, width, durationInFrames, fps } = validateCalculated({
+            const { height, width, durationInFrames, fps, defaultCodec } = validateCalculated({
                 calculated: c,
                 composition,
             });
@@ -621,6 +648,7 @@ const resolveVideoConfig = ({ composition, editorProps: editorPropsOrUndefined,
                 id: composition.id,
                 defaultProps: (_a = composition.defaultProps) !== null && _a !== void 0 ? _a : {},
                 props: (_b = c.props) !== null && _b !== void 0 ? _b : fallbackProps,
+                defaultCodec: defaultCodec !== null && defaultCodec !== void 0 ? defaultCodec : null,
             };
         });
     }
@@ -634,6 +662,7 @@ const resolveVideoConfig = ({ composition, editorProps: editorPropsOrUndefined,
             id: composition.id,
             defaultProps: (_d = composition.defaultProps) !== null && _d !== void 0 ? _d : {},
             props: fallbackProps,
+            defaultCodec: null,
         };
     }
     return {
@@ -641,6 +670,7 @@ const resolveVideoConfig = ({ composition, editorProps: editorPropsOrUndefined,
         id: composition.id,
         defaultProps: (_e = composition.defaultProps) !== null && _e !== void 0 ? _e : {},
         props: (_f = calculatedProm.props) !== null && _f !== void 0 ? _f : fallbackProps,
+        defaultCodec: (_g = calculatedProm.defaultCodec) !== null && _g !== void 0 ? _g : null,
     };
 };
 
@@ -811,6 +841,7 @@ const useResolvedVideoConfig = (preferredCompositionId) => {
                     id: composition.id,
                     props: currentCompositionMetadata.props,
                     defaultProps: (_a = composition.defaultProps) !== null && _a !== void 0 ? _a : {},
+                    defaultCodec: currentCompositionMetadata.defaultCodec,
                 },
             };
         }
@@ -832,6 +863,7 @@ const useResolvedVideoConfig = (preferredCompositionId) => {
                             ? {}
                             : (_d = getInputProps()) !== null && _d !== void 0 ? _d : {}),
                     },
+                    defaultCodec: null,
                 },
             };
         }
@@ -959,7 +991,7 @@ const useUnsafeVideoConfig = () => {
         if (!video) {
             return null;
         }
-        const { id, durationInFrames, fps, height, width, defaultProps, props } = video;
+        const { id, durationInFrames, fps, height, width, defaultProps, props, defaultCodec, } = video;
         return {
             id,
             width,
@@ -968,6 +1000,7 @@ const useUnsafeVideoConfig = () => {
             durationInFrames: ctxDuration !== null && ctxDuration !== void 0 ? ctxDuration : durationInFrames,
             defaultProps,
             props,
+            defaultCodec,
         };
     }, [ctxDuration, video]);
 };
@@ -4026,10 +4059,10 @@ const Series = ({ children }) => {
                 if (castedChild.trim() === '') {
                     return null;
                 }
-                throw new TypeError(`The <Series /> component only accepts a list of <Series.Sequence /> components as it's children, but you passed a string "${castedChild}"`);
+                throw new TypeError(`The <Series /> component only accepts a list of <Series.Sequence /> components as its children, but you passed a string "${castedChild}"`);
             }
             if (castedChild.type !== SeriesSequence) {
-                throw new TypeError(`The <Series /> component only accepts a list of <Series.Sequence /> components as it's children, but got ${castedChild} instead`);
+                throw new TypeError(`The <Series /> component only accepts a list of <Series.Sequence /> components as its children, but got ${castedChild} instead`);
             }
             const debugInfo = `index = ${i}, duration = ${castedChild.props.durationInFrames}`;
             if (!(castedChild === null || castedChild === void 0 ? void 0 : castedChild.props.children)) {

package/dist/esm/version.mjs

@@ -1,4 +1,4 @@
 // Automatically generated on publish
-const VERSION = '4.0.51';
+const VERSION = '4.0.53';
 
 export { VERSION };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "remotion",
-  "version": "4.0.51",
+  "version": "4.0.53",
   "description": "Render videos in React",
   "main": "dist/cjs/index.js",
   "types": "dist/cjs/index.d.ts",
@@ -23,7 +23,7 @@
     "@testing-library/react": "14.0.0",
     "@types/node": "18.14.6",
     "@types/react": "18.0.26",
-    "@types/react-dom": "18.0.10",
+    "@types/react-dom": "18.0.11",
     "@vitejs/plugin-react": "^2.0.0",
     "eslint": "8.42.0",
     "eslint-plugin-require-extensions": "^0.1.2",