remotion 4.0.516 → 4.0.517

package/dist/cjs/CompositionManager.d.ts

@@ -109,6 +109,7 @@ export type InlineAudioAsset = {
     id: string;
     audio: Int16Array | number[];
     frame: number;
+    startInVideo: number | null;
     timestamp: number;
     duration: number;
     toneFrequency: number;

package/dist/cjs/CompositionManagerContext.d.ts

@@ -5,6 +5,10 @@ import type { TFolder } from './Folder.js';
 import type { NonceHistory } from './nonce.js';
 import type { VideoConfig } from './video-config.js';
 export type BaseMetadata = Pick<VideoConfig, 'durationInFrames' | 'fps' | 'props' | 'height' | 'width' | 'defaultCodec' | 'defaultOutName' | 'defaultVideoImageFormat' | 'defaultPixelFormat' | 'defaultProResProfile' | 'defaultSampleRate'>;
+export type AssetPreviewMetadata = BaseMetadata & {
+    asset: string;
+};
+export declare const getAssetPreviewCompositionId: (asset: string) => string;
 export type CanvasContent = {
     type: 'composition';
     compositionId: string;
@@ -28,11 +32,13 @@ export type CompositionManagerSetters = {
     registerFolder: (name: string, parent: string | null, nonce: NonceHistory, stack: string | null) => void;
     unregisterFolder: (name: string, parent: string | null) => void;
     setCanvasContent: React.Dispatch<React.SetStateAction<CanvasContent | null>>;
+    setCurrentAssetMetadata: React.Dispatch<React.SetStateAction<AssetPreviewMetadata | null>>;
     onlyRenderComposition: string | null;
 };
 export type CompositionManagerContext = {
     compositions: AnyComposition[];
     currentCompositionMetadata: BaseMetadata | null;
+    currentAssetMetadata: AssetPreviewMetadata | null;
     folders: TFolder[];
     canvasContent: CanvasContent | null;
 };

package/dist/cjs/CompositionManagerContext.js

@@ -1,11 +1,14 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.CompositionSetters = exports.CompositionManager = void 0;
+exports.CompositionSetters = exports.CompositionManager = exports.getAssetPreviewCompositionId = void 0;
 const react_1 = require("react");
+const getAssetPreviewCompositionId = (asset) => `asset:${asset}`;
+exports.getAssetPreviewCompositionId = getAssetPreviewCompositionId;
 exports.CompositionManager = (0, react_1.createContext)({
     compositions: [],
     folders: [],
     currentCompositionMetadata: null,
+    currentAssetMetadata: null,
     canvasContent: null,
 });
 exports.CompositionSetters = (0, react_1.createContext)({
@@ -14,5 +17,6 @@ exports.CompositionSetters = (0, react_1.createContext)({
     registerFolder: () => undefined,
     unregisterFolder: () => undefined,
     setCanvasContent: () => undefined,
+    setCurrentAssetMetadata: () => undefined,
     onlyRenderComposition: null,
 });

package/dist/cjs/CompositionManagerProvider.js

@@ -8,6 +8,7 @@ const CompositionManagerContext_1 = require("./CompositionManagerContext");
 const CompositionManagerProvider = ({ children, onlyRenderComposition, currentCompositionMetadata, initialCompositions, initialCanvasContent, }) => {
     const [folders, setFolders] = (0, react_1.useState)([]);
     const [canvasContent, setCanvasContent] = (0, react_1.useState)(initialCanvasContent);
+    const [currentAssetMetadata, setCurrentAssetMetadata] = (0, react_1.useState)(null);
     const [compositions, setCompositions] = (0, react_1.useState)(initialCompositions);
     // CompositionManagerProvider state
     const currentcompositionsRef = (0, react_1.useRef)(compositions);
@@ -61,6 +62,7 @@ const CompositionManagerProvider = ({ children, onlyRenderComposition, currentCo
             registerFolder,
             unregisterFolder,
             setCanvasContent,
+            setCurrentAssetMetadata,
             onlyRenderComposition,
         };
     }, [
@@ -75,9 +77,16 @@ const CompositionManagerProvider = ({ children, onlyRenderComposition, currentCo
             compositions,
             folders,
             currentCompositionMetadata,
+            currentAssetMetadata,
             canvasContent,
         };
-    }, [compositions, folders, currentCompositionMetadata, canvasContent]);
+    }, [
+        compositions,
+        folders,
+        currentCompositionMetadata,
+        currentAssetMetadata,
+        canvasContent,
+    ]);
     return (jsx_runtime_1.jsx(CompositionManagerContext_1.CompositionManager.Provider, { value: compositionManagerContextValue, children: jsx_runtime_1.jsx(CompositionManagerContext_1.CompositionSetters.Provider, { value: compositionManagerSetters, children: children }) }));
 };
 exports.CompositionManagerProvider = CompositionManagerProvider;

package/dist/cjs/ResolveCompositionConfig.js

@@ -18,7 +18,7 @@ exports.needsResolution = needsResolution;
 const useResolvedVideoConfig = (preferredCompositionId) => {
     const context = (0, react_1.useContext)(exports.ResolveCompositionContext);
     const { props: allEditorProps } = (0, react_1.useContext)(EditorProps_js_1.EditorPropsContext);
-    const { compositions, canvasContent, currentCompositionMetadata } = (0, react_1.useContext)(CompositionManagerContext_js_1.CompositionManager);
+    const { compositions, canvasContent, currentCompositionMetadata, currentAssetMetadata, } = (0, react_1.useContext)(CompositionManagerContext_js_1.CompositionManager);
     const currentComposition = (canvasContent === null || canvasContent === void 0 ? void 0 : canvasContent.type) === 'composition' ? canvasContent.compositionId : null;
     const compositionId = preferredCompositionId !== null && preferredCompositionId !== void 0 ? preferredCompositionId : currentComposition;
     const composition = compositions.find((c) => c.id === compositionId);
@@ -29,6 +29,19 @@ const useResolvedVideoConfig = (preferredCompositionId) => {
     const env = (0, use_remotion_environment_js_1.useRemotionEnvironment)();
     return (0, react_1.useMemo)(() => {
         var _a, _b, _c, _d;
+        if (preferredCompositionId === null &&
+            (canvasContent === null || canvasContent === void 0 ? void 0 : canvasContent.type) === 'asset' &&
+            (currentAssetMetadata === null || currentAssetMetadata === void 0 ? void 0 : currentAssetMetadata.asset) === canvasContent.asset) {
+            return {
+                type: 'success',
+                metadataSource: null,
+                result: {
+                    ...currentAssetMetadata,
+                    id: (0, CompositionManagerContext_js_1.getAssetPreviewCompositionId)(canvasContent.asset),
+                    defaultProps: {},
+                },
+            };
+        }
         if (!composition) {
             return null;
         }
@@ -91,8 +104,11 @@ const useResolvedVideoConfig = (preferredCompositionId) => {
         return context[composition.id];
     }, [
         composition,
+        canvasContent,
         context,
+        currentAssetMetadata,
         currentCompositionMetadata,
+        preferredCompositionId,
         selectedEditorProps,
         env.isPlayer,
     ]);

package/dist/cjs/Sequence.js

@@ -89,6 +89,7 @@ const RegularSequenceRefForwardingFunction = ({ from = 0, trimBefore = 0, freeze
         : durationInFrames;
     const actualDurationInFrames = Math.max(0, Math.min(videoConfig.durationInFrames - from, parentSequenceDuration));
     const { registerSequence, unregisterSequence } = (0, react_1.useContext)(SequenceManager_js_1.SequenceManager);
+    const sequenceRegistrationEnabled = (0, react_1.useContext)(SequenceManager_js_1.SequenceRegistrationContext);
     const wrapperRefForOutline = (0, react_1.useRef)(null);
     const refForOutline = other.layout === 'none'
         ? (passedRefForOutline !== null && passedRefForOutline !== void 0 ? passedRefForOutline : null)
@@ -226,7 +227,7 @@ const RegularSequenceRefForwardingFunction = ({ from = 0, trimBefore = 0, freeze
     ]);
     (0, react_1.useEffect)(() => {
         var _a, _b, _c;
-        if (!env.isStudio) {
+        if (!env.isStudio && !sequenceRegistrationEnabled) {
             return;
         }
         if (isMedia) {
@@ -337,6 +338,7 @@ const RegularSequenceRefForwardingFunction = ({ from = 0, trimBefore = 0, freeze
         premountDisplay,
         postmountDisplay,
         env.isStudio,
+        sequenceRegistrationEnabled,
         registrationControls,
         _remotionInternalEffects,
         effectRuntimeValues,

package/dist/cjs/SequenceManager.d.ts

@@ -12,6 +12,7 @@ export type SequenceManagerRef = {
 export type SequenceNodePath = Array<string | number>;
 export declare const SequenceManager: React.Context<SequenceManagerContext>;
 export declare const SequenceManagerRefContext: React.Context<SequenceManagerRef>;
+export declare const SequenceRegistrationContext: React.Context<boolean>;
 export type VisualModePropStatuses = {
     propStatuses: PropStatuses;
 };

package/dist/cjs/SequenceManager.js

@@ -33,7 +33,7 @@ var __importStar = (this && this.__importStar) || (function () {
     };
 })();
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.SequenceManagerProvider = exports.VisualModeSettersContext = exports.VisualModeDragOverridesContext = exports.VisualModePropStatusesRefContext = exports.VisualModePropStatusesContext = exports.makeSequencePropsSubscriptionKey = exports.SequenceManagerRefContext = exports.SequenceManager = void 0;
+exports.SequenceManagerProvider = exports.VisualModeSettersContext = exports.VisualModeDragOverridesContext = exports.VisualModePropStatusesRefContext = exports.VisualModePropStatusesContext = exports.makeSequencePropsSubscriptionKey = exports.SequenceRegistrationContext = exports.SequenceManagerRefContext = exports.SequenceManager = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = __importStar(require("react"));
 exports.SequenceManager = react_1.default.createContext({
@@ -48,6 +48,7 @@ exports.SequenceManager = react_1.default.createContext({
 exports.SequenceManagerRefContext = react_1.default.createContext({
     current: [],
 });
+exports.SequenceRegistrationContext = react_1.default.createContext(false);
 const makeSequencePropsSubscriptionKey = (key) => {
     return `${key.absolutePath}\0${key.nodePath.join('.')}\0${key.sequenceKeys.join('.')}\0${key.effectKeys.map((keys) => keys.join('.')).join('.')}`;
 };

package/dist/cjs/internals.d.ts

@@ -93,7 +93,11 @@ export declare const Internals: {
     readonly VisualModeDragOverridesContext: import("react").Context<import("./SequenceManager.js").VisualModeDragOverrides>;
     readonly VisualModeSettersContext: import("react").Context<import("./SequenceManager.js").VisualModeSetters>;
     readonly SequenceManager: import("react").Context<import("./SequenceManager.js").SequenceManagerContext>;
+    readonly SequenceManagerProvider: import("react").FC<{
+        readonly children: import("react").ReactNode;
+    }>;
     readonly SequenceManagerRefContext: import("react").Context<import("./SequenceManager.js").SequenceManagerRef>;
+    readonly SequenceRegistrationContext: import("react").Context<boolean>;
     readonly SequenceStackTracesUpdateContext: import("react").Context<import("./sequence-stack-traces.js").UpdateResolvedStackTraceFn>;
     readonly baseSchema: {
         readonly durationInFrames: {
@@ -896,6 +900,9 @@ export declare const Internals: {
         readonly children: import("react").ReactNode;
     }>;
     readonly CanUseRemotionHooks: import("react").Context<boolean>;
+    readonly DisableInteractivityProvider: import("react").FC<{
+        readonly children: import("react").ReactNode;
+    }>;
     readonly PrefetchProvider: import("react").FC<{
         readonly children: import("react").ReactNode;
     }>;

package/dist/cjs/internals.js

@@ -119,6 +119,7 @@ const volume_position_state_js_1 = require("./volume-position-state.js");
 const volume_prop_js_1 = require("./volume-prop.js");
 const volume_safeguard_js_1 = require("./volume-safeguard.js");
 const watch_static_file_js_1 = require("./watch-static-file.js");
+const with_interactivity_schema_js_1 = require("./with-interactivity-schema.js");
 const wrap_remotion_context_js_1 = require("./wrap-remotion-context.js");
 // needs to be in core package so gets deduplicated in studio
 const compositionSelectorRef = (0, react_1.createRef)();
@@ -153,7 +154,9 @@ exports.Internals = {
     VisualModeDragOverridesContext: SequenceManager_js_1.VisualModeDragOverridesContext,
     VisualModeSettersContext: SequenceManager_js_1.VisualModeSettersContext,
     SequenceManager: SequenceManager_js_1.SequenceManager,
+    SequenceManagerProvider: SequenceManager_js_1.SequenceManagerProvider,
     SequenceManagerRefContext: SequenceManager_js_1.SequenceManagerRefContext,
+    SequenceRegistrationContext: SequenceManager_js_1.SequenceRegistrationContext,
     SequenceStackTracesUpdateContext: sequence_stack_traces_js_1.SequenceStackTracesUpdateContext,
     baseSchema: interactivity_schema_js_1.baseSchema,
     sequenceSchema: interactivity_schema_js_1.sequenceSchema,
@@ -203,6 +206,7 @@ exports.Internals = {
     SetTimelineContext: TimelineContext_js_1.SetTimelineContext,
     CanUseRemotionHooksProvider: CanUseRemotionHooks_js_1.CanUseRemotionHooksProvider,
     CanUseRemotionHooks: CanUseRemotionHooks_js_1.CanUseRemotionHooks,
+    DisableInteractivityProvider: with_interactivity_schema_js_1.DisableInteractivityProvider,
     PrefetchProvider: prefetch_state_js_1.PrefetchProvider,
     DurationsContextProvider: duration_state_js_1.DurationsContextProvider,
     IsPlayerContextProvider: is_player_js_1.IsPlayerContextProvider,

package/dist/cjs/loading-indicator.js

@@ -3,13 +3,14 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.Loading = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const AbsoluteFillElement_js_1 = require("./AbsoluteFillElement.js");
+const use_current_scale_js_1 = require("./use-current-scale.js");
 const rotate = {
     transform: `rotate(90deg)`,
 };
 const ICON_SIZE = 40;
+const LABEL_SIZE = 14;
 const label = {
-    color: 'white',
-    fontSize: 14,
+    color: 'rgba(255, 255, 255, 0.8)',
     fontFamily: 'sans-serif',
 };
 const container = {
@@ -25,6 +26,7 @@ const content = {
     animationFillMode: 'forwards',
 };
 const Loading = () => {
+    const scale = (0, use_current_scale_js_1.useCurrentScale)({ dontThrowIfOutsideOfRemotion: true });
     return (jsx_runtime_1.jsxs(AbsoluteFillElement_js_1.AbsoluteFillElement, { style: container, id: "remotion-comp-loading", children: [
             jsx_runtime_1.jsx("style", { type: "text/css", children: `
 				@keyframes anim {
@@ -36,7 +38,7 @@ const Loading = () => {
 					}
 				}
 			` }), jsx_runtime_1.jsxs("div", { id: "remotion-comp-loading-content", style: content, children: [
-                    jsx_runtime_1.jsx("svg", { width: ICON_SIZE, height: ICON_SIZE, viewBox: "-100 -100 400 400", style: rotate, children: jsx_runtime_1.jsx("path", { fill: "#555", stroke: "#555", strokeWidth: "100", strokeLinejoin: "round", d: "M 2 172 a 196 100 0 0 0 195 5 A 196 240 0 0 0 100 2.259 A 196 240 0 0 0 2 172 z" }) }), jsx_runtime_1.jsxs("p", { style: label, children: ["Resolving ", '<Suspense>', "..."] })
+                    jsx_runtime_1.jsx("svg", { width: ICON_SIZE / scale, height: ICON_SIZE / scale, viewBox: "-100 -100 400 400", style: rotate, children: jsx_runtime_1.jsx("path", { fill: "#555", stroke: "#555", strokeWidth: "100", strokeLinejoin: "round", d: "M 2 172 a 196 100 0 0 0 195 5 A 196 240 0 0 0 100 2.259 A 196 240 0 0 0 2 172 z" }) }), jsx_runtime_1.jsxs("p", { style: { ...label, fontSize: LABEL_SIZE / scale }, children: ["Resolving ", '<Suspense>', "..."] })
                 ] })
         ] }));
 };

package/dist/cjs/use-media-in-timeline.js

@@ -95,6 +95,7 @@ const useMediaInTimeline = ({ volume, mediaVolume, src, mediaType, playbackRate,
     const parentSequence = (0, react_1.useContext)(SequenceContext_js_1.SequenceContext);
     const startsAt = (0, use_audio_frame_js_1.useMediaStartsAt)();
     const { registerSequence, unregisterSequence } = (0, react_1.useContext)(SequenceManager_js_1.SequenceManager);
+    const sequenceRegistrationEnabled = (0, react_1.useContext)(SequenceManager_js_1.SequenceRegistrationContext);
     const { durationInFrames } = (0, use_video_config_js_1.useVideoConfig)();
     const mediaStartsAt = (0, use_audio_frame_js_1.useMediaStartsAt)();
     const { volumes, duration, doesVolumeChange, nonce, finalDisplayName } = (0, exports.useBasicMediaInTimeline)({
@@ -118,7 +119,9 @@ const useMediaInTimeline = ({ volume, mediaVolume, src, mediaType, playbackRate,
         if (!src) {
             throw new Error('No src passed');
         }
-        if (!isStudio && ((_b = (_a = window.process) === null || _a === void 0 ? void 0 : _a.env) === null || _b === void 0 ? void 0 : _b.NODE_ENV) !== 'test') {
+        if (!isStudio &&
+            !sequenceRegistrationEnabled &&
+            ((_b = (_a = window.process) === null || _a === void 0 ? void 0 : _a.env) === null || _b === void 0 ? void 0 : _b.NODE_ENV) !== 'test') {
             return;
         }
         if (!showInTimeline) {
@@ -178,6 +181,7 @@ const useMediaInTimeline = ({ volume, mediaVolume, src, mediaType, playbackRate,
         documentationLink,
         finalDisplayName,
         isStudio,
+        sequenceRegistrationEnabled,
         refForOutline,
         muted,
     ]);

package/dist/cjs/use-video.js

@@ -4,9 +4,10 @@ exports.useVideo = void 0;
 const react_1 = require("react");
 const CompositionManagerContext_js_1 = require("./CompositionManagerContext.js");
 const ResolveCompositionConfig_js_1 = require("./ResolveCompositionConfig.js");
+const AssetPreviewComposition = () => null;
 const useVideo = () => {
     var _a;
-    const { canvasContent, compositions, currentCompositionMetadata } = (0, react_1.useContext)(CompositionManagerContext_js_1.CompositionManager);
+    const { canvasContent, compositions, currentCompositionMetadata, currentAssetMetadata, } = (0, react_1.useContext)(CompositionManagerContext_js_1.CompositionManager);
     const selected = compositions.find((c) => {
         return ((canvasContent === null || canvasContent === void 0 ? void 0 : canvasContent.type) === 'composition' &&
             c.id === canvasContent.compositionId);
@@ -14,6 +15,15 @@ const useVideo = () => {
     const resolved = (0, ResolveCompositionConfig_js_1.useResolvedVideoConfig)((_a = selected === null || selected === void 0 ? void 0 : selected.id) !== null && _a !== void 0 ? _a : null);
     return (0, react_1.useMemo)(() => {
         var _a;
+        if ((canvasContent === null || canvasContent === void 0 ? void 0 : canvasContent.type) === 'asset' &&
+            (currentAssetMetadata === null || currentAssetMetadata === void 0 ? void 0 : currentAssetMetadata.asset) === canvasContent.asset) {
+            return {
+                ...currentAssetMetadata,
+                id: (0, CompositionManagerContext_js_1.getAssetPreviewCompositionId)(canvasContent.asset),
+                defaultProps: {},
+                component: AssetPreviewComposition,
+            };
+        }
         if (!resolved) {
             return null;
         }
@@ -35,6 +45,12 @@ const useVideo = () => {
             ...(currentCompositionMetadata !== null && currentCompositionMetadata !== void 0 ? currentCompositionMetadata : {}),
             component: selected.component,
         };
-    }, [currentCompositionMetadata, resolved, selected]);
+    }, [
+        canvasContent,
+        currentAssetMetadata,
+        currentCompositionMetadata,
+        resolved,
+        selected,
+    ]);
 };
 exports.useVideo = useVideo;

package/dist/cjs/version.d.ts

@@ -3,4 +3,4 @@
  * @see [Documentation](https://remotion.dev/docs/version)
  * @returns {string} The current version of the remotion package
  */
-export declare const VERSION = "4.0.516";
+export declare const VERSION = "4.0.517";

package/dist/cjs/version.js

@@ -7,4 +7,4 @@ exports.VERSION = void 0;
  * @see [Documentation](https://remotion.dev/docs/version)
  * @returns {string} The current version of the remotion package
  */
-exports.VERSION = '4.0.516';
+exports.VERSION = '4.0.517';

package/dist/cjs/with-interactivity-schema.d.ts

@@ -25,4 +25,7 @@ export type WithInteractivitySchemaOptions<S extends InteractivitySchema, Props
     schema: S;
     supportsEffects: boolean;
 };
+export declare const DisableInteractivityProvider: React.FC<{
+    readonly children: React.ReactNode;
+}>;
 export declare const withInteractivitySchema: <S extends InteractivitySchema, Props extends object>({ Component, componentName, componentIdentity, schema, supportsEffects, }: WithInteractivitySchemaOptions<S, Props>) => React.ComponentType<Props>;

package/dist/cjs/with-interactivity-schema.js

@@ -33,7 +33,7 @@ var __importStar = (this && this.__importStar) || (function () {
     };
 })();
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.withInteractivitySchema = exports.mergeValues = exports.selectActiveKeys = exports.readValuesFromProps = exports.getRuntimeValueForSchemaKey = exports.getNestedValue = void 0;
+exports.withInteractivitySchema = exports.DisableInteractivityProvider = exports.mergeValues = exports.selectActiveKeys = exports.readValuesFromProps = exports.getRuntimeValueForSchemaKey = exports.getNestedValue = void 0;
 const react_1 = __importStar(require("react"));
 const CanUseRemotionHooks_js_1 = require("./CanUseRemotionHooks.js");
 const delete_nested_key_js_1 = require("./delete-nested-key.js");
@@ -121,6 +121,11 @@ const mergeValues = ({ flatSchema, props, valuesDotNotation, schemaKeys, propsTo
 };
 exports.mergeValues = mergeValues;
 const stackToOverrideMap = {};
+const DisableInteractivityContext = (0, react_1.createContext)(false);
+const DisableInteractivityProvider = ({ children }) => {
+    return react_1.default.createElement(DisableInteractivityContext.Provider, { value: true }, children);
+};
+exports.DisableInteractivityProvider = DisableInteractivityProvider;
 const withInteractivitySchema = ({ Component, componentName, componentIdentity, schema, supportsEffects, }) => {
     // Schema is static for a component, so we move this outside
     const schemaWithSequenceName = (0, interactivity_schema_js_1.extendSchemaWithSequenceName)(schema);
@@ -132,7 +137,11 @@ const withInteractivitySchema = ({ Component, componentName, componentIdentity,
         const cleanProps = propsWithoutInternalStack;
         const env = (0, use_remotion_environment_js_1.useRemotionEnvironment)();
         const canUseRemotionHooks = (0, react_1.useContext)(CanUseRemotionHooks_js_1.CanUseRemotionHooks);
-        if (!env.isStudio || env.isRendering || !canUseRemotionHooks) {
+        const disableInteractivity = (0, react_1.useContext)(DisableInteractivityContext);
+        if (!env.isStudio ||
+            env.isRendering ||
+            !canUseRemotionHooks ||
+            disableInteractivity) {
             return react_1.default.createElement(Component, {
                 ...cleanProps,
                 controls: null,