remotion - npm Package Compare versions

Comparing version 4.0.273 to 4.0.274

dist/cjs/audio/Audio.d.ts

 import React from 'react';
 import type { RemotionMainAudioProps } from './props.js';
-export declare const Audio: React.ForwardRefExoticComponent<Omit<Omit<React.DetailedHTMLProps<React.AudioHTMLAttributes<HTMLAudioElement>, HTMLAudioElement>, "nonce" | "onEnded" | "onResize" | "onResizeCapture" | "controls" | "autoPlay"> & {
+export declare const Audio: React.ForwardRefExoticComponent<Omit<Omit<React.DetailedHTMLProps<React.AudioHTMLAttributes<HTMLAudioElement>, HTMLAudioElement>, "nonce" | "onEnded" | "onResize" | "onResizeCapture" | "autoPlay" | "controls"> & {
     name?: string;
@@ -5,0 +5,0 @@ volume?: import("../volume-prop.js").VolumeProp;

dist/cjs/Composition.d.ts

@@ -55,3 +55,3 @@ import type { ComponentType } from 'react';
 } & CompositionCalculateMetadataOrExplicit<Schema, Props> & CompProps<Props> & PropsIfHasProps<Schema, Props>;
-export declare const Composition: <Schema extends AnyZodObject, Props extends Record<string, unknown>>({ width, height, fps, durationInFrames, id, defaultProps, schema, ...compProps }: CompositionProps<Schema, Props>) => React.ReactPortal | null;
+export declare const Composition: <Schema extends AnyZodObject, Props extends Record<string, unknown>>(props: CompositionProps<Schema, Props>) => import("react/jsx-runtime.js").JSX.Element | null;
 export {};

dist/cjs/Composition.js

@@ -29,9 +29,6 @@ "use strict";
 };
-/*
- * @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://remotion.dev/docs/composition)
- */
-const Composition = ({ width, height, fps, durationInFrames, id, defaultProps, schema, ...compProps }) => {
+const InnerComposition = ({ width, height, fps, durationInFrames, id, defaultProps, schema, ...compProps }) => {
     var _a, _b;
-    const { registerComposition, unregisterComposition } = (0, react_1.useContext)(CompositionManagerContext_js_1.CompositionManager);
+    const compManager = (0, react_1.useContext)(CompositionManagerContext_js_1.CompositionSetters);
+    const { registerComposition, unregisterComposition } = compManager;
     const video = (0, use_video_js_1.useVideo)();
@@ -87,4 +84,2 @@ const lazy = (0, use_lazy_component_js_1.useLazyComponent)({
         defaultProps,
-        registerComposition,
-        unregisterComposition,
         width,
@@ -95,2 +90,4 @@ nonce,
         compProps.calculateMetadata,
+        registerComposition,
+        unregisterComposition,
     ]);
@@ -114,2 +111,14 @@ const resolved = (0, ResolveCompositionConfig_js_1.useResolvedVideoConfig)(id);
 };
+/*
+ * @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://remotion.dev/docs/composition)
+ */
+const Composition = (props) => {
+    const { onlyRenderComposition } = (0, react_1.useContext)(CompositionManagerContext_js_1.CompositionSetters);
+    if (onlyRenderComposition && onlyRenderComposition !== props.id) {
+        return null;
+    }
+    // @ts-expect-error
+    return (0, jsx_runtime_1.jsx)(InnerComposition, { ...props });
+};
 exports.Composition = Composition;

dist/cjs/CompositionManager.d.ts

@@ -5,2 +5,3 @@ import type { ComponentType, LazyExoticComponent } from 'react';
 import type { CalculateMetadataFunction } from './Composition.js';
+import type { BaseMetadata } from './CompositionManagerContext.js';
 import type { InferProps, PropsIfHasProps } from './props-if-has-props.js';
@@ -24,3 +25,2 @@ export type TComposition<Schema extends AnyZodObject, Props extends Record<string, unknown>> = {
 export type AnyCompMetadata = TCompMetadata<AnyZodObject, Record<string, unknown>>;
-export type SmallTCompMetadata<T extends AnyZodObject, Props extends Record<string, unknown>> = Pick<TComposition<T, Props>, 'id' | 'height' | 'width' | 'fps' | 'durationInFrames'> & Partial<Pick<TComposition<T, Props>, 'defaultProps'>>;
 type EnhancedTSequenceData = {
@@ -88,3 +88,5 @@ type: 'sequence';
     readonly numberOfAudioTags: number;
+    readonly onlyRenderComposition: string | null;
+    readonly currentCompositionMetadata: BaseMetadata | null;
 }>;
 export {};

dist/cjs/CompositionManager.js

@@ -35,3 +35,3 @@ "use strict";
 exports.compositionsRef = react_1.default.createRef();
-const CompositionManagerProvider = ({ children, numberOfAudioTags }) => {
+const CompositionManagerProvider = ({ children, numberOfAudioTags, onlyRenderComposition, currentCompositionMetadata, }) => {
     var _a;
@@ -43,3 +43,2 @@ // Wontfix, expected to have
     const [canvasContent, setCanvasContent] = (0, react_1.useState)(null);
-    const [currentCompositionMetadata, setCurrentCompositionMetadata] = (0, react_1.useState)(null);
     const updateCompositions = (0, react_1.useCallback)((updateComps) => {
@@ -109,26 +108,27 @@ setCompositions((comps) => {
             compositions,
+            folders,
+            currentCompositionMetadata,
+            canvasContent,
+        };
+    }, [compositions, folders, currentCompositionMetadata, canvasContent]);
+    const setters = (0, react_1.useMemo)(() => {
+        return {
             registerComposition,
             unregisterComposition,
-            folders,
             registerFolder,
             unregisterFolder,
-            currentCompositionMetadata,
-            setCurrentCompositionMetadata,
-            canvasContent,
             setCanvasContent,
             updateCompositionDefaultProps,
+            onlyRenderComposition,
         };
     }, [
-        compositions,
         registerComposition,
+        registerFolder,
         unregisterComposition,
-        folders,
-        registerFolder,
         unregisterFolder,
-        currentCompositionMetadata,
-        canvasContent,
         updateCompositionDefaultProps,
+        onlyRenderComposition,
     ]);
-    return ((0, jsx_runtime_1.jsx)(CompositionManagerContext_js_1.CompositionManager.Provider, { value: contextValue, children: (0, jsx_runtime_1.jsx)(SequenceManager_js_1.SequenceManagerProvider, { children: (0, jsx_runtime_1.jsx)(RenderAssetManager_js_1.RenderAssetManagerProvider, { children: (0, jsx_runtime_1.jsx)(ResolveCompositionConfig_js_1.ResolveCompositionConfig, { children: (0, jsx_runtime_1.jsx)(shared_audio_tags_js_1.SharedAudioContextProvider, { numberOfAudioTags: numberOfAudioTags, component: (_a = composition === null || composition === void 0 ? void 0 : composition.component) !== null && _a !== void 0 ? _a : null, children: children }) }) }) }) }));
+    return ((0, jsx_runtime_1.jsx)(CompositionManagerContext_js_1.CompositionManager.Provider, { value: contextValue, children: (0, jsx_runtime_1.jsx)(CompositionManagerContext_js_1.CompositionSetters.Provider, { value: setters, children: (0, jsx_runtime_1.jsx)(SequenceManager_js_1.SequenceManagerProvider, { children: (0, jsx_runtime_1.jsx)(RenderAssetManager_js_1.RenderAssetManagerProvider, { children: (0, jsx_runtime_1.jsx)(ResolveCompositionConfig_js_1.ResolveCompositionConfig, { children: (0, jsx_runtime_1.jsx)(shared_audio_tags_js_1.SharedAudioContextProvider, { numberOfAudioTags: numberOfAudioTags, component: (_a = composition === null || composition === void 0 ? void 0 : composition.component) !== null && _a !== void 0 ? _a : null, children: children }) }) }) }) }) }));
 };
 exports.CompositionManagerProvider = CompositionManagerProvider;

dist/cjs/CompositionManagerContext.d.ts

@@ -17,15 +17,18 @@ import type React from 'react';
 };
-export type CompositionManagerContext = {
-    compositions: AnyComposition[];
+export type CompositionManagerSetters = {
     registerComposition: <Schema extends AnyZodObject, Props extends Record<string, unknown>>(comp: TComposition<Schema, Props>) => void;
-    updateCompositionDefaultProps: (id: string, newDefaultProps: Record<string, unknown>) => void;
     unregisterComposition: (name: string) => void;
     registerFolder: (name: string, parent: string | null) => void;
     unregisterFolder: (name: string, parent: string | null) => void;
-    setCurrentCompositionMetadata: (metadata: BaseMetadata) => void;
+    setCanvasContent: React.Dispatch<React.SetStateAction<CanvasContent | null>>;
+    updateCompositionDefaultProps: (id: string, newDefaultProps: Record<string, unknown>) => void;
+    onlyRenderComposition: string | null;
+};
+export type CompositionManagerContext = {
+    compositions: AnyComposition[];
     currentCompositionMetadata: BaseMetadata | null;
     folders: TFolder[];
     canvasContent: CanvasContent | null;
-    setCanvasContent: React.Dispatch<React.SetStateAction<CanvasContent | null>>;
 };
 export declare const CompositionManager: React.Context<CompositionManagerContext>;
+export declare const CompositionSetters: React.Context<CompositionManagerSetters>;

dist/cjs/CompositionManagerContext.js

 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.CompositionManager = void 0;
+exports.CompositionSetters = exports.CompositionManager = void 0;
 const react_1 = require("react");
 exports.CompositionManager = (0, react_1.createContext)({
     compositions: [],
+    folders: [],
+    currentCompositionMetadata: null,
+    canvasContent: null,
+});
+exports.CompositionSetters = (0, react_1.createContext)({
     registerComposition: () => undefined,
@@ -11,8 +16,5 @@ unregisterComposition: () => undefined,
     unregisterFolder: () => undefined,
-    setCurrentCompositionMetadata: () => undefined,
+    setCanvasContent: () => undefined,
     updateCompositionDefaultProps: () => undefined,
-    folders: [],
-    currentCompositionMetadata: null,
-    canvasContent: null,
-    setCanvasContent: () => undefined,
+    onlyRenderComposition: null,
 });

dist/cjs/delay-render.d.ts

 export declare const DELAY_RENDER_CALLSTACK_TOKEN = "The delayRender was called:";
 export declare const DELAY_RENDER_RETRIES_LEFT = "Retries left: ";
 export declare const DELAY_RENDER_RETRY_TOKEN = "- Rendering the frame will be retried.";
+export declare const DELAY_RENDER_CLEAR_TOKEN = "handle was cleared after";
 export type DelayRenderOptions = {
@@ -5,0 +6,0 @@ timeoutInMilliseconds?: number;

dist/cjs/delay-render.js

 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.continueRender = exports.delayRender = exports.DELAY_RENDER_RETRY_TOKEN = exports.DELAY_RENDER_RETRIES_LEFT = exports.DELAY_RENDER_CALLSTACK_TOKEN = void 0;
+exports.continueRender = exports.delayRender = exports.DELAY_RENDER_CLEAR_TOKEN = exports.DELAY_RENDER_RETRY_TOKEN = exports.DELAY_RENDER_RETRIES_LEFT = exports.DELAY_RENDER_CALLSTACK_TOKEN = void 0;
 const cancel_render_js_1 = require("./cancel-render.js");
 const get_remotion_environment_js_1 = require("./get-remotion-environment.js");
+const log_js_1 = require("./log.js");
 const truthy_js_1 = require("./truthy.js");
@@ -17,2 +18,3 @@ if (typeof window !== 'undefined') {
 exports.DELAY_RENDER_RETRY_TOKEN = '- Rendering the frame will be retried.';
+exports.DELAY_RENDER_CLEAR_TOKEN = 'handle was cleared after';
 const defaultTimeout = 30000;
@@ -40,2 +42,3 @@ /*
                 label: label !== null && label !== void 0 ? label : null,
+                startTime: Date.now(),
                 timeout: setTimeout(() => {
@@ -80,2 +83,11 @@ const message = [
                 clearTimeout(window.remotion_delayRenderTimeouts[handle].timeout);
+                const { label, startTime } = window.remotion_delayRenderTimeouts[handle];
+                const message = [
+                    label ? `delayRender() "${label}"` : 'A delayRender()',
+                    exports.DELAY_RENDER_CLEAR_TOKEN,
+                    `${Date.now() - startTime}ms`,
+                ]
+                    .filter(truthy_js_1.truthy)
+                    .join(' ');
+                log_js_1.Log.verbose(window.remotion_logLevel, message);
                 delete window.remotion_delayRenderTimeouts[handle];
@@ -82,0 +94,0 @@ }

dist/cjs/Folder.js

@@ -19,3 +19,3 @@ "use strict";
     const parent = (0, react_1.useContext)(exports.FolderContext);
-    const { registerFolder, unregisterFolder } = (0, react_1.useContext)(CompositionManagerContext_js_1.CompositionManager);
+    const { registerFolder, unregisterFolder } = (0, react_1.useContext)(CompositionManagerContext_js_1.CompositionSetters);
     (0, validate_folder_name_js_1.validateFolderName)(name);
@@ -22,0 +22,0 @@ const parentNameArr = [parent.parentName, parent.folderName].filter(truthy_js_1.truthy);

dist/cjs/index.d.ts

 import './_check-rsc.js';
 import './asset-types.js';
 import type { Codec } from './codec.js';
-import type { TRenderAsset } from './CompositionManager.js';
+import type { AnyCompMetadata, AnyComposition, AudioOrVideoAsset, TRenderAsset } from './CompositionManager.js';
 import type { StaticFile } from './get-static-files.js';
@@ -19,2 +19,3 @@ import type { LogLevel } from './log.js';
                 timeout: number | Timer;
+                startTime: number;
             };
@@ -59,7 +60,3 @@ };
 }
-export type BundleState = {
-    type: 'index';
-} | {
-    type: 'evaluation';
-} | {
+export type BundleCompositionState = {
     type: 'composition';
@@ -75,2 +72,9 @@ compositionName: string;
 };
+export type BundleIndexState = {
+    type: 'index';
+};
+export type BundleEvaluationState = {
+    type: 'evaluation';
+};
+export type BundleState = BundleIndexState | BundleEvaluationState | BundleCompositionState;
 export * from './AbsoluteFill.js';
@@ -82,3 +86,2 @@ export * from './animated-image/index.js';
 export { CalculateMetadataFunction, Composition, CompositionProps, CompProps, StillProps, } from './Composition.js';
-export { AnyCompMetadata, AnyComposition, AudioOrVideoAsset, SmallTCompMetadata, TCompMetadata, TRenderAsset, } from './CompositionManager.js';
 export type { CanvasContent } from './CompositionManagerContext.js';
@@ -129,1 +132,10 @@ export { getInputProps } from './config/input-props.js';
 export declare const Config: {};
+export type _InternalTypes = {
+    AnyComposition: AnyComposition;
+    BundleCompositionState: BundleCompositionState;
+    BundleState: BundleState;
+    VideoConfigWithSerializedProps: VideoConfigWithSerializedProps;
+    AnyCompMetadata: AnyCompMetadata;
+    AudioOrVideoAsset: AudioOrVideoAsset;
+    TRenderAsset: TRenderAsset;
+};

dist/cjs/internals.d.ts

@@ -18,2 +18,3 @@ import { type CompProps } from './Composition.js';
     readonly CompositionManager: import("react").Context<CompositionManagerContext>;
+    readonly CompositionSetters: import("react").Context<import("./CompositionManagerContext.js").CompositionManagerSetters>;
     readonly SequenceManager: import("react").Context<import("./SequenceManager.js").SequenceManagerContext>;
@@ -25,2 +26,4 @@ readonly SequenceVisibilityToggleContext: import("react").Context<import("./SequenceManager.js").SequenceVisibilityToggleState>;
         readonly logLevel: import("./log.js").LogLevel;
+        readonly onlyRenderComposition: string | null;
+        readonly currentCompositionMetadata: import("./CompositionManagerContext.js").BaseMetadata | null;
     }>;
@@ -27,0 +30,0 @@ readonly useVideo: () => (import("./video-config.js").VideoConfig & {

dist/cjs/internals.js

@@ -74,2 +74,3 @@ "use strict";
     CompositionManager: CompositionManagerContext_js_1.CompositionManager,
+    CompositionSetters: CompositionManagerContext_js_1.CompositionSetters,
     SequenceManager: SequenceManager_js_1.SequenceManager,
@@ -76,0 +77,0 @@ SequenceVisibilityToggleContext: SequenceManager_js_1.SequenceVisibilityToggleContext,

dist/cjs/no-react.d.ts

@@ -32,2 +32,3 @@ export type { ArtifactAsset, AudioOrVideoAsset, TRenderAsset, } from './CompositionManager';
     DELAY_RENDER_RETRY_TOKEN: string;
+    DELAY_RENDER_CLEAR_TOKEN: string;
     DELAY_RENDER_ATTEMPT_TOKEN: string;
@@ -34,0 +35,0 @@ getOffthreadVideoSource: ({ src, transparent, currentTime, toneMapped, }: {

dist/cjs/no-react.js

@@ -35,2 +35,3 @@ "use strict";
     DELAY_RENDER_RETRY_TOKEN: delay_render_1.DELAY_RENDER_RETRY_TOKEN,
+    DELAY_RENDER_CLEAR_TOKEN: delay_render_1.DELAY_RENDER_CLEAR_TOKEN,
     DELAY_RENDER_ATTEMPT_TOKEN: delay_render_1.DELAY_RENDER_RETRIES_LEFT,
@@ -37,0 +38,0 @@ getOffthreadVideoSource: offthread_video_source_1.getOffthreadVideoSource,

dist/cjs/RemotionRoot.d.ts

 import React from 'react';
+import type { BaseMetadata } from './CompositionManagerContext.js';
 import type { LogLevel } from './log.js';
@@ -7,2 +8,4 @@ export declare const RemotionRoot: React.FC<{
     readonly logLevel: LogLevel;
+    readonly onlyRenderComposition: string | null;
+    readonly currentCompositionMetadata: BaseMetadata | null;
 }>;

dist/cjs/RemotionRoot.js

@@ -16,3 +16,3 @@ "use strict";
 const duration_state_js_1 = require("./video/duration-state.js");
-const RemotionRoot = ({ children, numberOfAudioTags, logLevel }) => {
+const RemotionRoot = ({ children, numberOfAudioTags, logLevel, onlyRenderComposition, currentCompositionMetadata, }) => {
     const [remotionRootId] = (0, react_1.useState)(() => String((0, random_js_1.random)(null)));
@@ -94,4 +94,4 @@ const [frame, setFrame] = (0, react_1.useState)(() => (0, timeline_position_state_js_1.getInitialFrameState)());
     }, [logLevel]);
-    return ((0, jsx_runtime_1.jsx)(log_level_context_js_1.LogLevelContext.Provider, { value: logging, children: (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)(CompositionManager_js_1.CompositionManagerProvider, { numberOfAudioTags: numberOfAudioTags, children: (0, jsx_runtime_1.jsx)(duration_state_js_1.DurationsContextProvider, { children: (0, jsx_runtime_1.jsx)(buffering_js_1.BufferingProvider, { children: children }) }) }) }) }) }) }) }) }));
+    return ((0, jsx_runtime_1.jsx)(log_level_context_js_1.LogLevelContext.Provider, { value: logging, children: (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)(CompositionManager_js_1.CompositionManagerProvider, { numberOfAudioTags: numberOfAudioTags, onlyRenderComposition: onlyRenderComposition, currentCompositionMetadata: currentCompositionMetadata, children: (0, jsx_runtime_1.jsx)(duration_state_js_1.DurationsContextProvider, { children: (0, jsx_runtime_1.jsx)(buffering_js_1.BufferingProvider, { children: children }) }) }) }) }) }) }) }) }));
 };
 exports.RemotionRoot = RemotionRoot;

dist/cjs/ResolveCompositionConfig.js

@@ -320,6 +320,3 @@ "use strict";
                     id: composition.id,
-                    props: currentCompositionMetadata.props,
                     defaultProps: (_a = composition.defaultProps) !== null && _a !== void 0 ? _a : {},
-                    defaultCodec: currentCompositionMetadata.defaultCodec,
-                    defaultOutName: currentCompositionMetadata.defaultOutName,
                 },
@@ -326,0 +323,0 @@ };

dist/cjs/version.d.ts

@@ -6,2 +6,2 @@ /**
  */
-export declare const VERSION = "4.0.273";
+export declare const VERSION = "4.0.274";

dist/cjs/version.js

@@ -10,2 +10,2 @@ "use strict";
  */
-exports.VERSION = '4.0.273';
+exports.VERSION = '4.0.274';

dist/cjs/video/Video.d.ts

 import React from 'react';
 import type { RemotionMainVideoProps } from './props';
-export declare const Video: React.ForwardRefExoticComponent<Omit<Omit<React.DetailedHTMLProps<React.VideoHTMLAttributes<HTMLVideoElement>, HTMLVideoElement>, "nonce" | "onError" | "onEnded" | "controls" | "disableRemotePlayback" | "autoPlay"> & {
+export declare const Video: React.ForwardRefExoticComponent<Omit<Omit<React.DetailedHTMLProps<React.VideoHTMLAttributes<HTMLVideoElement>, HTMLVideoElement>, "nonce" | "onError" | "onEnded" | "autoPlay" | "controls" | "disableRemotePlayback"> & {
     name?: string;
@@ -5,0 +5,0 @@ volume?: import("../volume-prop.js").VolumeProp;

package.json

@@ -6,3 +6,3 @@ {
   "name": "remotion",
-  "version": "4.0.273",
+  "version": "4.0.274",
   "description": "Make videos programmatically",
@@ -32,3 +32,3 @@ "main": "dist/cjs/index.js",
     "eslint": "9.19.0",
-    "@remotion/eslint-config-internal": "4.0.273"
+    "@remotion/eslint-config-internal": "4.0.274"
   },
@@ -35,0 +35,0 @@ "keywords": [

No alert changes

Improved metrics

Total package byte prevSize

706796

0.51%

Number of package files

276

0.73%

Lines of code

18184

0.5%

No dependency changes