remotion 4.0.0-alpha.217 → 4.0.0-alpha4

package/dist/cjs/Composition.d.ts

@@ -1,22 +1,20 @@
 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<Props> = {
+export declare type CompProps<T> = {
     lazyComponent: () => Promise<{
-        default: LooseComponentType<Props>;
+        default: LooseComponentType<T>;
     }>;
 } | {
-    component: LooseComponentType<Props>;
+    component: LooseComponentType<T>;
 };
-export declare type StillProps<Schema extends z.ZodTypeAny, Props> = {
+export declare type StillProps<T> = {
     width: number;
     height: number;
     id: string;
-    schema?: Schema;
-} & CompProps<Props> & PropsIfHasProps<Schema, Props>;
-export declare type CompositionProps<Schema extends z.ZodTypeAny, Props> = StillProps<Schema, Props> & {
+    defaultProps?: T;
+} & CompProps<T>;
+declare type CompositionProps<T> = StillProps<T> & {
     fps: number;
     durationInFrames: number;
 };
@@ -24,6 +22,6 @@ export declare type CompositionProps<Schema extends z.ZodTypeAny, Props> = Still
  * @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: <Schema extends z.ZodTypeAny, Props>({ width, height, fps, durationInFrames, id, defaultProps, schema, ...compProps }: CompositionProps<Schema, Props>) => React.ReactPortal | null;
+export declare const Composition: <T>({ width, height, fps, durationInFrames, id, defaultProps, ...compProps }: CompositionProps<T>) => 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,15 +33,13 @@ 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, schema, ...compProps }) => {
-    var _a;
+const Composition = ({ width, height, fps, durationInFrames, id, defaultProps, ...compProps }) => {
     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)(CanUseRemotionHooks_js_1.CanUseRemotionHooks);
+    const canUseComposition = (0, react_1.useContext)(internals_js_1.Internals.CanUseRemotionHooks);
     if (canUseComposition) {
         if (environment === 'player-development' ||
             environment === 'player-production') {
@@ -72,10 +70,9 @@ const Composition = ({ width, height, fps, durationInFrames, id, defaultProps, s
             id,
             folderName,
             component: lazy,
-            defaultProps: defaultProps,
+            defaultProps,
             nonce,
             parentFolderName: parentName,
-            schema: schema !== null && schema !== void 0 ? schema : null,
         });
         return () => {
             unregisterComposition(id);
@@ -93,18 +90,16 @@ const Composition = ({ width, height, fps, durationInFrames, id, defaultProps, s
         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, ...editorPropsOrUndefined, ...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, ...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, ...editorPropsOrUndefined, ...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, ...inputProps }) }) }), (0, portal_node_js_1.portalNode)());
     }
     return null;
 };

package/dist/cjs/CompositionManager.d.ts

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

@@ -3,7 +3,6 @@ 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) {
@@ -54,7 +53,7 @@ const ImgRefForwarding = ({ onError, maxRetries = 2, src, ...props }, ref) => {
             retryIn(backoff);
             return;
         }
-        (0, cancel_render_js_1.cancelRender)('Error loading image with src: ' + ((_l = imageRef.current) === null || _l === void 0 ? void 0 : _l.src));
+        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.');
     }, [maxRetries, onError, retryIn]);
     (0, react_1.useLayoutEffect)(() => {
         if (process.env.NODE_ENV === 'test') {

package/dist/cjs/RemotionRoot.js

@@ -5,7 +5,6 @@ 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");
@@ -67,6 +66,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)(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 }) }) }) }) }) }) }) }));
+    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 }) }) }) }) }) }) }));
 };
 exports.RemotionRoot = RemotionRoot;

package/dist/cjs/Still.d.ts

@@ -1,8 +1,7 @@
-import React from 'react';
-import type { z } from 'zod';
+/// <reference types="react" />
 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: <Schema extends z.ZodTypeAny, Props>(props: StillProps<Schema, Props>) => React.DetailedReactHTMLElement<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>;
+export declare const Still: <T>(props: StillProps<T>) => JSX.Element;

package/dist/cjs/Still.js

@@ -1,22 +1,13 @@
 "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 react_1 = __importDefault(require("react"));
+const jsx_runtime_1 = require("react/jsx-runtime");
 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) => {
-    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);
+    return (0, jsx_runtime_1.jsx)(Composition_js_1.Composition, { fps: 1, durationInFrames: 1, ...props });
 };
 exports.Still = Still;

package/dist/cjs/index.d.ts

@@ -1,12 +1,12 @@
 import './asset-types.js';
-import type { AnyCompMetadata, TAsset } from './CompositionManager.js';
+import type { TAsset, TCompMetadata } 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: () => AnyCompMetadata[];
+        getStaticCompositions: () => TCompMetadata[];
         setBundleMode: (bundleMode: BundleState) => void;
         remotion_staticBase: string;
         remotion_staticFiles: StaticFile[];
@@ -50,7 +50,8 @@ export * from './AbsoluteFill.js';
 export * from './audio/index.js';
 export { cancelRender } from './cancel-render.js';
 export * from './Composition.js';
-export { AnyCompMetadata, AnyComposition, AnySmallCompMetadata, SmallTCompMetadata, TAsset, TCompMetadata, } from './CompositionManager.js';
+export { SmallTCompMetadata, TAsset, TCompMetadata, } from './CompositionManager.js';
+export { Config, ConfigType, WebpackConfiguration, WebpackOverrideFn, } from './config.js';
 export { getInputProps } from './config/input-props.js';
 export { continueRender, delayRender } from './delay-render.js';
 export * from './easing.js';
@@ -96,4 +97,3 @@ 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.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;
+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;
 require("./asset-types.js");
 const Clipper_js_1 = require("./Clipper.js");
 const is_player_js_1 = require("./is-player.js");
@@ -26,6 +26,8 @@ __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");
@@ -78,27 +80,3 @@ 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,7 +3,6 @@ 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';
@@ -23,19 +22,18 @@ 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: <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>;
+    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>;
     };
     truthy: typeof truthy;
     SequenceContext: import("react").Context<import("./SequenceContext.js").SequenceContextType | null>;
@@ -79,7 +77,7 @@ export declare const Internals: {
     isCompositionIdValid: (id: string) => RegExpMatchArray | null;
     getPreviewDomElement: () => HTMLElement | null;
     compositionsRef: import("react").RefObject<{
-        getCompositions: () => TCompMetadata<import("zod").ZodTypeAny, unknown>[];
+        getCompositions: () => TCompMetadata[];
     }>;
     DELAY_RENDER_CALLSTACK_TOKEN: string;
     portalNode: () => HTMLElement;
@@ -89,6 +87,7 @@ export declare const Internals: {
         children: import("react").ReactNode;
     }>;
     CanUseRemotionHooks: import("react").Context<boolean>;
+    enableLegacyRemotionConfig: () => void;
     PrefetchProvider: import("react").FC<{
         children: import("react").ReactNode;
     }>;
@@ -105,11 +104,6 @@ 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;
 };
 export type { TComposition, Timeline, TCompMetadata, TSequence, TAsset, TimelineContextValue, SetTimelineContextValue, CompProps, CompositionManagerContext, MediaVolumeContextValue, SetMediaVolumeContextValue, RemotionEnvironment, };

package/dist/cjs/internals.js

@@ -24,15 +24,14 @@ 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 portal_node_js_1 = require("./portal-node.js");
 const prefetch_state_js_1 = require("./prefetch-state.js");
@@ -93,14 +92,12 @@ exports.Internals = {
     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,
 };

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

@@ -2,7 +2,6 @@
  * 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 = exports.processColor = void 0;
+exports.interpolateColors = void 0;
 /* eslint no-bitwise: 0 */
 const interpolate_js_1 = require("./interpolate.js");
 // var INTEGER = '[-+]?\\d+';
@@ -356,11 +356,15 @@ 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 = normalizeColor(color);
-    return ((normalizedColor << 24) | (normalizedColor >>> 8)) >>> 0; // argb
+    const normalizedColor = processColorInitially(color);
+    return normalizedColor;
 }
-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/use-lazy-component.d.ts

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

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

@@ -18,7 +18,11 @@ const useVideoConfig = () => {
     if (!videoConfig) {
         if ((typeof window !== 'undefined' && window.remotion_isPlayer) ||
             isPlayer) {
-            throw new Error('No video config found. You are probably calling useVideoConfig() from outside the component passed to <Player />. See https://www.remotion.dev/docs/player/examples for how to set up the Player correctly.');
+            throw new Error([
+                'No video config found. Likely reasons:',
+                '- You are probably calling useVideoConfig() from outside the component passed to <Player />. See https://www.remotion.dev/docs/player/examples for how to set up the Player correctly.',
+                '- You have multiple versions of Remotion installed which causes the React context to get lost.',
+            ].join('-'));
         }
         throw new Error('No video config found. You are probably calling useVideoConfig() from a component which has not been registered as a <Composition />. See https://www.remotion.dev/docs/the-fundamentals#defining-compositions for more information.');
     }

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

@@ -4,11 +4,10 @@ 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-alpha.217+27eff7599";
+export declare const VERSION = "4.0.0-alpha4";

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-alpha.217+27eff7599';
+exports.VERSION = '4.0.0-alpha4';

package/dist/cjs/video/OffthreadVideoForRendering.js

@@ -8,10 +8,10 @@ const use_audio_frame_js_1 = require("../audio/use-audio-frame.js");
 const CompositionManager_js_1 = require("../CompositionManager.js");
 const default_css_js_1 = require("../default-css.js");
 const Img_js_1 = require("../Img.js");
+const internals_js_1 = require("../internals.js");
 const random_js_1 = require("../random.js");
 const SequenceContext_js_1 = require("../SequenceContext.js");
 const timeline_position_state_js_1 = require("../timeline-position-state.js");
-const truthy_js_1 = require("../truthy.js");
 const use_current_frame_js_1 = require("../use-current-frame.js");
 const use_unsafe_video_config_js_1 = require("../use-unsafe-video-config.js");
 const volume_prop_js_1 = require("../volume-prop.js");
@@ -96,7 +96,7 @@ const OffthreadVideoForRendering = ({ onError, volume: volumeProp, playbackRate,
     }, [onError]);
     const className = (0, react_1.useMemo)(() => {
         return [default_css_js_1.OFFTHREAD_VIDEO_CLASS_NAME, props.className]
-            .filter(truthy_js_1.truthy)
+            .filter(internals_js_1.Internals.truthy)
             .join(' ');
     }, [props.className]);
     return ((0, jsx_runtime_1.jsx)(Img_js_1.Img, { src: actualSrc, className: className, ...props, onError: onErr }));