remotion 4.0.0-alpha4 → 4.0.0-alpha5

package/dist/cjs/Composition.d.ts

@@ -1,20 +1,22 @@
 import type { ComponentType, PropsWithChildren } from 'react';
 import React from 'react';
+import type { z } from 'zod';
+import type { PropsIfHasProps } from './props-if-has-props.js';
 declare type LooseComponentType<T> = ComponentType<T> | ((props: T) => React.ReactNode);
-export declare type CompProps<T> = {
+export declare type CompProps<Props> = {
     lazyComponent: () => Promise<{
-        default: LooseComponentType<T>;
+        default: LooseComponentType<Props>;
     }>;
 } | {
-    component: LooseComponentType<T>;
+    component: LooseComponentType<Props>;
 };
-export declare type StillProps<T> = {
+export declare type StillProps<Schema extends z.ZodTypeAny, Props> = {
     width: number;
     height: number;
     id: string;
-    defaultProps?: T;
-} & CompProps<T>;
-declare type CompositionProps<T> = StillProps<T> & {
+    schema?: Schema;
+} & CompProps<Props> & PropsIfHasProps<Schema, Props>;
+export declare type CompositionProps<Schema extends z.ZodTypeAny, Props> = StillProps<Schema, Props> & {
     fps: number;
     durationInFrames: number;
 };
@@ -22,6 +24,6 @@ declare type CompositionProps<T> = StillProps<T> & {
  * @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 declare const Composition: <T>({ width, height, fps, durationInFrames, id, defaultProps, ...compProps }: CompositionProps<T>) => React.ReactPortal | null;
+export declare const Composition: <Schema extends z.ZodTypeAny, Props>({ width, height, fps, durationInFrames, id, defaultProps, schema, ...compProps }: CompositionProps<Schema, Props>) => React.ReactPortal | null;
 export declare const ClipComposition: React.FC<PropsWithChildren>;
 export {};

package/dist/cjs/Composition.js

@@ -9,9 +9,9 @@ const CanUseRemotionHooks_js_1 = require("./CanUseRemotionHooks.js");
 const CompositionManager_js_1 = require("./CompositionManager.js");
 const input_props_js_1 = require("./config/input-props.js");
 const delay_render_js_1 = require("./delay-render.js");
+const EditorProps_js_1 = require("./EditorProps.js");
 const Folder_js_1 = require("./Folder.js");
 const get_environment_js_1 = require("./get-environment.js");
-const internals_js_1 = require("./internals.js");
 const loading_indicator_js_1 = require("./loading-indicator.js");
 const NativeLayers_js_1 = require("./NativeLayers.js");
 const nonce_js_1 = require("./nonce.js");
@@ -33,13 +33,15 @@ const Fallback = () => {
  * @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)
  */
-const Composition = ({ width, height, fps, durationInFrames, id, defaultProps, ...compProps }) => {
+const Composition = ({ width, height, fps, durationInFrames, id, defaultProps, schema, ...compProps }) => {
+    var _a;
     const { registerComposition, unregisterComposition } = (0, react_1.useContext)(CompositionManager_js_1.CompositionManager);
     const video = (0, use_video_js_1.useVideo)();
     const lazy = (0, use_lazy_component_js_1.useLazyComponent)(compProps);
+    const { props: allEditorProps } = (0, react_1.useContext)(EditorProps_js_1.EditorPropsContext);
     const nonce = (0, nonce_js_1.useNonce)();
     const environment = (0, get_environment_js_1.useRemotionEnvironment)();
-    const canUseComposition = (0, react_1.useContext)(internals_js_1.Internals.CanUseRemotionHooks);
+    const canUseComposition = (0, react_1.useContext)(CanUseRemotionHooks_js_1.CanUseRemotionHooks);
     if (canUseComposition) {
         if (environment === 'player-development' ||
             environment === 'player-production') {
@@ -70,9 +72,10 @@ const Composition = ({ width, height, fps, durationInFrames, id, defaultProps, .
             id,
             folderName,
             component: lazy,
-            defaultProps,
+            defaultProps: defaultProps,
             nonce,
             parentFolderName: parentName,
+            schema: schema !== null && schema !== void 0 ? schema : null,
         });
         return () => {
             unregisterComposition(id);
@@ -90,16 +93,18 @@ const Composition = ({ width, height, fps, durationInFrames, id, defaultProps, .
         width,
         nonce,
         parentName,
+        schema,
     ]);
+    const editorPropsOrUndefined = (_a = allEditorProps[id]) !== null && _a !== void 0 ? _a : {};
     if (environment === 'preview' && video && video.component === lazy) {
         const Comp = lazy;
         const inputProps = (0, input_props_js_1.getInputProps)();
-        return (0, react_dom_1.createPortal)((0, jsx_runtime_1.jsx)(exports.ClipComposition, { children: (0, jsx_runtime_1.jsx)(CanUseRemotionHooks_js_1.CanUseRemotionHooksProvider, { children: (0, jsx_runtime_1.jsx)(react_1.Suspense, { fallback: (0, jsx_runtime_1.jsx)(loading_indicator_js_1.Loading, {}), children: (0, jsx_runtime_1.jsx)(Comp, { ...defaultProps, ...inputProps }) }) }) }), (0, portal_node_js_1.portalNode)());
+        return (0, react_dom_1.createPortal)((0, jsx_runtime_1.jsx)(exports.ClipComposition, { children: (0, jsx_runtime_1.jsx)(CanUseRemotionHooks_js_1.CanUseRemotionHooksProvider, { children: (0, jsx_runtime_1.jsx)(react_1.Suspense, { fallback: (0, jsx_runtime_1.jsx)(loading_indicator_js_1.Loading, {}), children: (0, jsx_runtime_1.jsx)(Comp, { ...defaultProps, ...editorPropsOrUndefined, ...inputProps }) }) }) }), (0, portal_node_js_1.portalNode)());
     }
     if (environment === 'rendering' && video && video.component === lazy) {
         const Comp = lazy;
         const inputProps = (0, input_props_js_1.getInputProps)();
-        return (0, react_dom_1.createPortal)((0, jsx_runtime_1.jsx)(CanUseRemotionHooks_js_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_js_1.portalNode)());
+        return (0, react_dom_1.createPortal)((0, jsx_runtime_1.jsx)(CanUseRemotionHooks_js_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, ...editorPropsOrUndefined, ...inputProps }) }) }), (0, portal_node_js_1.portalNode)());
     }
     return null;
 };

package/dist/cjs/CompositionManager.d.ts

@@ -1,7 +1,9 @@
 import type { ComponentType, LazyExoticComponent } from 'react';
 import React from 'react';
+import type { z } from 'zod';
 import type { TFolder } from './Folder.js';
-export declare type TComposition<T = unknown> = {
+import type { PropsIfHasProps } from './props-if-has-props.js';
+export declare type TComposition<Schema extends z.ZodTypeAny, Props> = {
     width: number;
     height: number;
     fps: number;
@@ -9,12 +11,15 @@ export declare type TComposition<T = unknown> = {
     id: string;
     folderName: string | null;
     parentFolderName: string | null;
-    component: LazyExoticComponent<ComponentType<T>>;
-    defaultProps: T | undefined;
+    component: LazyExoticComponent<ComponentType<Props>>;
     nonce: number;
-};
-export declare type TCompMetadata = Pick<TComposition, 'id' | 'height' | 'width' | 'fps' | 'durationInFrames' | 'defaultProps'>;
-export declare type SmallTCompMetadata = Pick<TComposition, 'id' | 'height' | 'width' | 'fps' | 'durationInFrames'> & Partial<Pick<TComposition, 'defaultProps'>>;
+    schema: Schema | null;
+} & PropsIfHasProps<Schema, Props>;
+export declare type AnyComposition = TComposition<z.ZodTypeAny, unknown>;
+export declare type TCompMetadata<Schema extends z.ZodTypeAny, Props> = Pick<TComposition<Schema, Props>, 'id' | 'height' | 'width' | 'fps' | 'durationInFrames' | 'defaultProps'>;
+export declare type AnyCompMetadata = TCompMetadata<z.ZodTypeAny, unknown>;
+export declare type SmallTCompMetadata<T extends z.ZodTypeAny, Props> = Pick<TComposition<T, Props>, 'id' | 'height' | 'width' | 'fps' | 'durationInFrames'> & Partial<Pick<TComposition<T, Props>, 'defaultProps'>>;
+export declare type AnySmallCompMetadata = SmallTCompMetadata<z.ZodTypeAny, unknown>;
 declare type EnhancedTSequenceData = {
     type: 'sequence';
 } | {
@@ -53,10 +58,10 @@ export declare type TAsset = {
     playbackRate: number;
     allowAmplificationDuringRender: boolean;
 };
-declare type BaseMetadata = Pick<TCompMetadata, 'durationInFrames' | 'fps' | 'defaultProps' | 'height' | 'width'>;
+declare type BaseMetadata = Pick<AnyCompMetadata, 'durationInFrames' | 'fps' | 'defaultProps' | 'height' | 'width'>;
 export declare type CompositionManagerContext = {
-    compositions: TComposition[];
-    registerComposition: <T>(comp: TComposition<T>) => void;
+    compositions: AnyComposition[];
+    registerComposition: <Schema extends z.ZodTypeAny, Props>(comp: TComposition<Schema, Props>) => void;
     unregisterComposition: (name: string) => void;
     registerFolder: (name: string, parent: string | null) => void;
     unregisterFolder: (name: string, parent: string | null) => void;
@@ -74,7 +79,7 @@ export declare type CompositionManagerContext = {
 };
 export declare const CompositionManager: React.Context<CompositionManagerContext>;
 export declare const compositionsRef: React.RefObject<{
-    getCompositions: () => TCompMetadata[];
+    getCompositions: () => TCompMetadata<z.ZodTypeAny, unknown>[];
 }>;
 export declare const CompositionManagerProvider: React.FC<{
     children: React.ReactNode;

package/dist/cjs/CompositionManager.js

@@ -57,9 +57,9 @@ const CompositionManagerProvider = ({ children, numberOfAudioTags }) => {
     const [folders, setFolders] = (0, react_1.useState)([]);
     const [sequences, setSequences] = (0, react_1.useState)([]);
     const [currentCompositionMetadata, setCurrentCompositionMetadata] = (0, react_1.useState)(null);
-    const updateCompositions = (0, react_1.useCallback)(
+    const updateCompositions = (0, react_1.useCallback)((
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    (updateComps) => {
+    updateComps) => {
         setCompositions((comps) => {
             const updated = updateComps(comps);
             currentcompositionsRef.current = updated;

package/dist/cjs/EditorProps.d.ts

@@ -0,0 +1,15 @@
+import React from 'react';
+declare type Props = Record<string, object>;
+export declare type EditorPropsContextType = {
+    props: Props;
+    updateProps: (options: {
+        id: string;
+        defaultProps: object;
+        newProps: object;
+    }) => void;
+};
+export declare const EditorPropsContext: React.Context<EditorPropsContextType>;
+export declare const EditorPropsProvider: React.FC<{
+    children: React.ReactNode;
+}>;
+export {};

package/dist/cjs/EditorProps.js

@@ -0,0 +1,53 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.EditorPropsProvider = exports.EditorPropsContext = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = __importStar(require("react"));
+exports.EditorPropsContext = (0, react_1.createContext)({
+    props: {},
+    updateProps: () => {
+        throw new Error('Not implemented');
+    },
+});
+const EditorPropsProvider = ({ children }) => {
+    const [props, setProps] = react_1.default.useState({});
+    const updateProps = (0, react_1.useCallback)(({ defaultProps, id, newProps, }) => {
+        setProps((prev) => {
+            var _a;
+            return {
+                ...prev,
+                [id]: typeof newProps === 'function'
+                    ? newProps((_a = prev[id]) !== null && _a !== void 0 ? _a : defaultProps)
+                    : newProps,
+            };
+        });
+    }, []);
+    const ctx = (0, react_1.useMemo)(() => {
+        return { props, updateProps };
+    }, [props, updateProps]);
+    return ((0, jsx_runtime_1.jsx)(exports.EditorPropsContext.Provider, { value: ctx, children: children }));
+};
+exports.EditorPropsProvider = EditorPropsProvider;

package/dist/cjs/Img.js

@@ -3,6 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.Img = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
+const cancel_render_js_1 = require("./cancel-render.js");
 const delay_render_js_1 = require("./delay-render.js");
 const prefetch_js_1 = require("./prefetch.js");
 function exponentialBackoff(errorCount) {
@@ -53,7 +54,7 @@ const ImgRefForwarding = ({ onError, maxRetries = 2, src, ...props }, ref) => {
             retryIn(backoff);
             return;
         }
-        console.error('Error loading image with src:', (_l = imageRef.current) === null || _l === void 0 ? void 0 : _l.src, e, 'Handle the event using the onError() prop to make this message disappear.');
+        (0, cancel_render_js_1.cancelRender)('Error loading image with src: ' + ((_l = imageRef.current) === null || _l === void 0 ? void 0 : _l.src));
     }, [maxRetries, onError, retryIn]);
     (0, react_1.useLayoutEffect)(() => {
         if (process.env.NODE_ENV === 'test') {

package/dist/cjs/RemotionRoot.js

@@ -5,6 +5,7 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const CompositionManager_js_1 = require("./CompositionManager.js");
 const delay_render_js_1 = require("./delay-render.js");
+const EditorProps_js_1 = require("./EditorProps.js");
 const NativeLayers_js_1 = require("./NativeLayers.js");
 const nonce_js_1 = require("./nonce.js");
 const prefetch_state_js_1 = require("./prefetch-state.js");
@@ -66,6 +67,6 @@ const RemotionRoot = ({ children, numberOfAudioTags }) => {
             }
         }
     }, []);
-    return ((0, jsx_runtime_1.jsx)(nonce_js_1.NonceContext.Provider, { value: nonceContext, children: (0, jsx_runtime_1.jsx)(timeline_position_state_js_1.TimelineContext.Provider, { value: timelineContextValue, children: (0, jsx_runtime_1.jsx)(timeline_position_state_js_1.SetTimelineContext.Provider, { value: setTimelineContextValue, children: (0, jsx_runtime_1.jsx)(prefetch_state_js_1.PrefetchProvider, { children: (0, jsx_runtime_1.jsx)(NativeLayers_js_1.NativeLayersProvider, { children: (0, jsx_runtime_1.jsx)(CompositionManager_js_1.CompositionManagerProvider, { numberOfAudioTags: numberOfAudioTags, children: (0, jsx_runtime_1.jsx)(duration_state_js_1.DurationsContextProvider, { children: children }) }) }) }) }) }) }));
+    return ((0, jsx_runtime_1.jsx)(nonce_js_1.NonceContext.Provider, { value: nonceContext, children: (0, jsx_runtime_1.jsx)(timeline_position_state_js_1.TimelineContext.Provider, { value: timelineContextValue, children: (0, jsx_runtime_1.jsx)(timeline_position_state_js_1.SetTimelineContext.Provider, { value: setTimelineContextValue, children: (0, jsx_runtime_1.jsx)(EditorProps_js_1.EditorPropsProvider, { children: (0, jsx_runtime_1.jsx)(prefetch_state_js_1.PrefetchProvider, { children: (0, jsx_runtime_1.jsx)(NativeLayers_js_1.NativeLayersProvider, { children: (0, jsx_runtime_1.jsx)(CompositionManager_js_1.CompositionManagerProvider, { numberOfAudioTags: numberOfAudioTags, children: (0, jsx_runtime_1.jsx)(duration_state_js_1.DurationsContextProvider, { children: children }) }) }) }) }) }) }) }));
 };
 exports.RemotionRoot = RemotionRoot;

package/dist/cjs/Still.d.ts

@@ -1,7 +1,8 @@
-/// <reference types="react" />
+import React from 'react';
+import type { z } from 'zod';
 import type { StillProps } from './Composition.js';
 /**
  * @description A <Still /> is a <Composition /> that is only 1 frame long.
  * @see [Documentation](https://www.remotion.dev/docs/still)
  */
-export declare const Still: <T>(props: StillProps<T>) => JSX.Element;
+export declare const Still: <Schema extends z.ZodTypeAny, Props>(props: StillProps<Schema, Props>) => React.DetailedReactHTMLElement<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>;

package/dist/cjs/Still.js

@@ -1,13 +1,22 @@
 "use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Still = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = __importDefault(require("react"));
 const Composition_js_1 = require("./Composition.js");
 /**
  * @description A <Still /> is a <Composition /> that is only 1 frame long.
  * @see [Documentation](https://www.remotion.dev/docs/still)
  */
 const Still = (props) => {
-    return (0, jsx_runtime_1.jsx)(Composition_js_1.Composition, { fps: 1, durationInFrames: 1, ...props });
+    const newProps = {
+        ...props,
+        durationInFrames: 1,
+        fps: 1,
+    };
+    // @ts-expect-error TypeScript does not understand it, but should still fail on type mismatch
+    return react_1.default.createElement((Composition_js_1.Composition), newProps);
 };
 exports.Still = Still;

package/dist/cjs/index.d.ts

@@ -1,12 +1,12 @@
 import './asset-types.js';
-import type { TAsset, TCompMetadata } from './CompositionManager.js';
+import type { AnyCompMetadata, TAsset } from './CompositionManager.js';
 import type { StaticFile } from './get-static-files.js';
 import type { ClipRegion } from './NativeLayers.js';
 declare global {
     interface Window {
         ready: boolean;
         remotion_cancelledError: string | undefined;
-        getStaticCompositions: () => TCompMetadata[];
+        getStaticCompositions: () => AnyCompMetadata[];
         setBundleMode: (bundleMode: BundleState) => void;
         remotion_staticBase: string;
         remotion_staticFiles: StaticFile[];
@@ -50,8 +50,7 @@ export * from './AbsoluteFill.js';
 export * from './audio/index.js';
 export { cancelRender } from './cancel-render.js';
 export * from './Composition.js';
-export { SmallTCompMetadata, TAsset, TCompMetadata, } from './CompositionManager.js';
-export { Config, ConfigType, WebpackConfiguration, WebpackOverrideFn, } from './config.js';
+export { AnyCompMetadata, AnyComposition, AnySmallCompMetadata, SmallTCompMetadata, TAsset, TCompMetadata, } from './CompositionManager.js';
 export { getInputProps } from './config/input-props.js';
 export { continueRender, delayRender } from './delay-render.js';
 export * from './easing.js';
@@ -97,3 +96,4 @@ export declare const Experimental: {
     Null: import("react").FC<{}>;
     useIsPlayer: () => boolean;
 };
+export declare const Config: {};

package/dist/cjs/index.js

@@ -14,7 +14,7 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
     for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Experimental = exports.useCurrentFrame = exports.staticFile = exports.Series = exports.Sequence = exports.registerRoot = exports.random = exports.prefetch = exports.Loop = exports.interpolate = exports.interpolateColors = exports.getStaticFiles = exports.delayRender = exports.continueRender = exports.getInputProps = exports.Config = exports.cancelRender = void 0;
+exports.Config = exports.Experimental = exports.useCurrentFrame = exports.staticFile = exports.Series = exports.Sequence = exports.registerRoot = exports.random = exports.prefetch = exports.Loop = exports.interpolate = exports.interpolateColors = exports.getStaticFiles = exports.delayRender = exports.continueRender = exports.getInputProps = exports.cancelRender = void 0;
 require("./asset-types.js");
 const Clipper_js_1 = require("./Clipper.js");
 const is_player_js_1 = require("./is-player.js");
@@ -26,8 +26,6 @@ __exportStar(require("./audio/index.js"), exports);
 var cancel_render_js_1 = require("./cancel-render.js");
 Object.defineProperty(exports, "cancelRender", { enumerable: true, get: function () { return cancel_render_js_1.cancelRender; } });
 __exportStar(require("./Composition.js"), exports);
-var config_js_1 = require("./config.js");
-Object.defineProperty(exports, "Config", { enumerable: true, get: function () { return config_js_1.Config; } });
 var input_props_js_1 = require("./config/input-props.js");
 Object.defineProperty(exports, "getInputProps", { enumerable: true, get: function () { return input_props_js_1.getInputProps; } });
 var delay_render_js_1 = require("./delay-render.js");
@@ -80,3 +78,27 @@ exports.Experimental = {
     Null: Null_js_1.Null,
     useIsPlayer: is_player_js_1.useIsPlayer,
 };
+const proxyObj = {};
+exports.Config = new Proxy(proxyObj, {
+    get(_, prop) {
+        if (prop === 'Bundling' ||
+            prop === 'Rendering' ||
+            prop === 'Log' ||
+            prop === 'Puppeteer' ||
+            prop === 'Output') {
+            return exports.Config;
+        }
+        return () => {
+            console.warn('⚠️  The CLI configuration has been extracted from Remotion Core.');
+            console.warn('Update the import from the config file:');
+            console.warn();
+            console.warn('- Delete:');
+            console.warn('import {Config} from "remotion";');
+            console.warn('+ Replace:');
+            console.warn('import {Config} from "@remotion/cli/config";');
+            console.warn();
+            console.warn('For more information, see https://v4.remotion.dev/docs/4-0-migration.');
+            process.exit(1);
+        };
+    },
+});

package/dist/cjs/internals.d.ts

@@ -3,6 +3,7 @@ import type { CompProps } from './Composition.js';
 import type { CompositionManagerContext, TAsset, TCompMetadata, TComposition, TSequence } from './CompositionManager.js';
 import * as CSSUtils from './default-css.js';
 import type { RemotionEnvironment } from './get-environment.js';
+import { processColor } from './interpolate-colors.js';
 import type { SetTimelineContextValue, TimelineContextValue } from './timeline-position-state.js';
 import * as TimelinePosition from './timeline-position-state.js';
 import { truthy } from './truthy.js';
@@ -22,18 +23,19 @@ export declare const Internals: {
         width: number;
         fps: number;
         durationInFrames: number;
-        defaultProps: unknown;
+        defaultProps?: unknown;
         id: string;
         folderName: string | null;
         parentFolderName: string | null;
         component: import("react").LazyExoticComponent<import("react").ComponentType<unknown>>;
         nonce: number;
+        schema: import("zod").ZodTypeAny | null;
     } | null;
     getRoot: () => import("react").FC<{}> | null;
     useMediaVolumeState: () => readonly [number, (u: number) => void];
     useMediaMutedState: () => readonly [boolean, (u: import("react").SetStateAction<boolean>) => void];
-    useLazyComponent: <T>(compProps: CompProps<T>) => import("react").ExoticComponent<(import("react").PropsWithoutRef<T> & import("react").RefAttributes<import("react").Component<T, any, any>>) | import("react").PropsWithRef<T>> & {
-        readonly _result: import("react").ComponentType<T>;
+    useLazyComponent: <Props>(compProps: CompProps<Props>) => import("react").ExoticComponent<(import("react").PropsWithoutRef<Props> & import("react").RefAttributes<import("react").Component<Props, any, any>>) | import("react").PropsWithRef<Props>> & {
+        readonly _result: import("react").ComponentType<Props>;
     };
     truthy: typeof truthy;
     SequenceContext: import("react").Context<import("./SequenceContext.js").SequenceContextType | null>;
@@ -77,17 +79,15 @@ export declare const Internals: {
     isCompositionIdValid: (id: string) => RegExpMatchArray | null;
     getPreviewDomElement: () => HTMLElement | null;
     compositionsRef: import("react").RefObject<{
-        getCompositions: () => TCompMetadata[];
+        getCompositions: () => TCompMetadata<import("zod").ZodTypeAny, unknown>[];
     }>;
     DELAY_RENDER_CALLSTACK_TOKEN: string;
     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>;
-    enableLegacyRemotionConfig: () => void;
     PrefetchProvider: import("react").FC<{
         children: import("react").ReactNode;
     }>;
@@ -104,6 +104,12 @@ export declare const Internals: {
         durationInFrames: number;
         allowFloats: boolean;
     }) => void;
+    EditorPropsProvider: import("react").FC<{
+        children: import("react").ReactNode;
+    }>;
+    EditorPropsContext: import("react").Context<import("./EditorProps.js").EditorPropsContextType>;
     usePreload: (src: string) => string;
+    processColor: typeof processColor;
+    NonceContext: import("react").Context<import("./nonce.js").TNonceContext>;
 };
 export type { TComposition, Timeline, TCompMetadata, TSequence, TAsset, TimelineContextValue, SetTimelineContextValue, CompProps, CompositionManagerContext, MediaVolumeContextValue, SetMediaVolumeContextValue, RemotionEnvironment, };

package/dist/cjs/internals.js

@@ -24,15 +24,17 @@ var __importStar = (this && this.__importStar) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Internals = void 0;
-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");
 const CSSUtils = __importStar(require("./default-css.js"));
 const delay_render_js_1 = require("./delay-render.js");
+const EditorProps_js_1 = require("./EditorProps.js");
 const get_environment_js_1 = require("./get-environment.js");
 const get_preview_dom_element_js_1 = require("./get-preview-dom-element.js");
+const interpolate_colors_js_1 = require("./interpolate-colors.js");
 const is_player_js_1 = require("./is-player.js");
+const nonce_js_1 = require("./nonce.js");
 const portal_node_js_1 = require("./portal-node.js");
 const prefetch_state_js_1 = require("./prefetch-state.js");
 const prefetch_js_1 = require("./prefetch.js");
@@ -50,7 +52,6 @@ const validate_composition_id_js_1 = require("./validation/validate-composition-
 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");
-const validate_offthreadvideo_image_format_js_1 = require("./validation/validate-offthreadvideo-image-format.js");
 const duration_state_js_1 = require("./video/duration-state.js");
 const volume_position_state_js_1 = require("./volume-position-state.js");
 const wrap_remotion_context_js_1 = require("./wrap-remotion-context.js");
@@ -89,15 +90,17 @@ exports.Internals = {
     DELAY_RENDER_CALLSTACK_TOKEN: delay_render_js_1.DELAY_RENDER_CALLSTACK_TOKEN,
     portalNode: portal_node_js_1.portalNode,
     waitForRoot: register_root_js_1.waitForRoot,
-    validateOffthreadVideoImageFormat: validate_offthreadvideo_image_format_js_1.validateOffthreadVideoImageFormat,
     CanUseRemotionHooksProvider: CanUseRemotionHooks_js_1.CanUseRemotionHooksProvider,
     CanUseRemotionHooks: CanUseRemotionHooks_js_1.CanUseRemotionHooks,
-    enableLegacyRemotionConfig: config_js_1.enableLegacyRemotionConfig,
     PrefetchProvider: prefetch_state_js_1.PrefetchProvider,
     DurationsContextProvider: duration_state_js_1.DurationsContextProvider,
     IsPlayerContextProvider: is_player_js_1.IsPlayerContextProvider,
     useIsPlayer: is_player_js_1.useIsPlayer,
     useRemotionEnvironment: get_environment_js_1.useRemotionEnvironment,
     validateFrame: validate_frame_js_1.validateFrame,
+    EditorPropsProvider: EditorProps_js_1.EditorPropsProvider,
+    EditorPropsContext: EditorProps_js_1.EditorPropsContext,
     usePreload: prefetch_js_1.usePreload,
+    processColor: interpolate_colors_js_1.processColor,
+    NonceContext: nonce_js_1.NonceContext,
 };

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

@@ -2,6 +2,7 @@
  * Copied from:
  * https://github.com/software-mansion/react-native-reanimated/blob/master/src/reanimated2/Colors.ts
  */
+export declare function processColor(color: string): number;
 /**
  * @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)

package/dist/cjs/interpolate-colors.js

@@ -4,7 +4,7 @@
  * https://github.com/software-mansion/react-native-reanimated/blob/master/src/reanimated2/Colors.ts
  */
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.interpolateColors = void 0;
+exports.interpolateColors = exports.processColor = void 0;
 /* eslint no-bitwise: 0 */
 const interpolate_js_1 = require("./interpolate.js");
 // var INTEGER = '[-+]?\\d+';
@@ -356,15 +356,11 @@ const blue = (c) => {
 const rgbaColor = (r, g, b, alpha) => {
     return `rgba(${r}, ${g}, ${b}, ${alpha})`;
 };
-function processColorInitially(color) {
-    let normalizedColor = normalizeColor(color);
-    normalizedColor = ((normalizedColor << 24) | (normalizedColor >>> 8)) >>> 0; // argb
-    return normalizedColor;
-}
 function processColor(color) {
-    const normalizedColor = processColorInitially(color);
-    return normalizedColor;
+    const normalizedColor = normalizeColor(color);
+    return ((normalizedColor << 24) | (normalizedColor >>> 8)) >>> 0; // argb
 }
+exports.processColor = processColor;
 const interpolateColorsRGB = (value, inputRange, colors) => {
     const [r, g, b, a] = [red, green, blue, opacity].map((f) => {
         const unrounded = (0, interpolate_js_1.interpolate)(value, inputRange, colors.map((c) => f(c)), {

package/dist/cjs/props-if-has-props.d.ts

@@ -0,0 +1,10 @@
+import type { z } from 'zod';
+export declare type PropsIfHasProps<Schema extends z.ZodTypeAny, Props> = z.ZodTypeAny extends Schema ? {} extends Props ? {
+    defaultProps?: Props;
+} : {
+    defaultProps: Props;
+} : {} extends Props ? {
+    defaultProps: z.infer<Schema>;
+} : {
+    defaultProps: z.infer<Schema> & Props;
+};

package/dist/cjs/props-if-has-props.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/cjs/use-lazy-component.d.ts

@@ -1,7 +1,7 @@
 import type { ComponentPropsWithRef, ComponentType, ExoticComponent } from 'react';
-import type { CompProps } from './internals.js';
+import type { CompProps } from './Composition.js';
 declare type LazyExoticComponent<T extends ComponentType<any>> = ExoticComponent<ComponentPropsWithRef<T>> & {
     readonly _result: T;
 };
-export declare const useLazyComponent: <T>(compProps: CompProps<T>) => LazyExoticComponent<ComponentType<T>>;
+export declare const useLazyComponent: <Props>(compProps: CompProps<Props>) => LazyExoticComponent<ComponentType<Props>>;
 export {};

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

@@ -4,10 +4,11 @@ export declare const useVideo: () => {
     width: number;
     fps: number;
     durationInFrames: number;
-    defaultProps: unknown;
+    defaultProps?: unknown;
     id: string;
     folderName: string | null;
     parentFolderName: string | null;
     component: import("react").LazyExoticComponent<import("react").ComponentType<unknown>>;
     nonce: number;
+    schema: import("zod").ZodTypeAny | null;
 } | null;

package/dist/cjs/version.d.ts

@@ -1 +1 @@
-export declare const VERSION = "4.0.0-alpha4";
+export declare const VERSION = "4.0.0-alpha5";

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.0-alpha4';
+exports.VERSION = '4.0.0-alpha5';

package/dist/cjs/video/OffthreadVideo.js

@@ -7,7 +7,6 @@ const get_environment_js_1 = require("../get-environment.js");
 const Sequence_js_1 = require("../Sequence.js");
 const validate_media_props_js_1 = require("../validate-media-props.js");
 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");
 /**
@@ -21,6 +20,9 @@ const OffthreadVideo = (props) => {
     if (typeof props.src !== 'string') {
         throw new TypeError(`The \`<OffthreadVideo>\` tag requires a string for \`src\`, but got ${JSON.stringify(props.src)} instead.`);
     }
+    if (props.imageFormat) {
+        throw new TypeError(`The \`<OffthreadVideo>\` tag does no longer accept \`imageFormat\`. Use the \`transparent\` prop if you want to render a transparent video.`);
+    }
     if (typeof startFrom !== 'undefined' || typeof endAt !== 'undefined') {
         (0, validate_start_from_props_js_1.validateStartFromProps)(startFrom, endAt);
         const startFromFrameNo = startFrom !== null && startFrom !== void 0 ? startFrom : 0;
@@ -28,7 +30,6 @@ const OffthreadVideo = (props) => {
         return ((0, jsx_runtime_1.jsx)(Sequence_js_1.Sequence, { layout: "none", from: 0 - startFromFrameNo, showInTimeline: false, durationInFrames: endAtFrameNo, children: (0, jsx_runtime_1.jsx)(exports.OffthreadVideo, { ...otherProps }) }));
     }
     (0, validate_media_props_js_1.validateMediaProps)(props, 'Video');
-    (0, validate_offthreadvideo_image_format_js_1.validateOffthreadVideoImageFormat)(props.imageFormat);
     if (environment === 'rendering') {
         return (0, jsx_runtime_1.jsx)(OffthreadVideoForRendering_js_1.OffthreadVideoForRendering, { ...otherProps });
     }