remotion 4.0.499 → 4.0.501

package/dist/cjs/internals.d.ts

@@ -215,6 +215,47 @@ export declare const Internals: {
                         readonly default: undefined;
                         readonly description: "Border color";
                     };
+                    readonly 'style.borderRadius': {
+                        readonly type: "number";
+                        readonly default: 0;
+                        readonly min: 0;
+                        readonly step: 1;
+                        readonly description: "Border radius";
+                        readonly hiddenFromList: false;
+                        readonly keyframable: true;
+                    };
+                    readonly 'style.borderTopLeftRadius': {
+                        readonly type: "number";
+                        readonly default: 0;
+                        readonly min: 0;
+                        readonly step: 1;
+                        readonly description: "Top left radius";
+                        readonly hiddenFromList: false;
+                    };
+                    readonly 'style.borderTopRightRadius': {
+                        readonly type: "number";
+                        readonly default: 0;
+                        readonly min: 0;
+                        readonly step: 1;
+                        readonly description: "Top right radius";
+                        readonly hiddenFromList: false;
+                    };
+                    readonly 'style.borderBottomRightRadius': {
+                        readonly type: "number";
+                        readonly default: 0;
+                        readonly min: 0;
+                        readonly step: 1;
+                        readonly description: "Bottom right radius";
+                        readonly hiddenFromList: false;
+                    };
+                    readonly 'style.borderBottomLeftRadius': {
+                        readonly type: "number";
+                        readonly default: 0;
+                        readonly min: 0;
+                        readonly step: 1;
+                        readonly description: "Bottom left radius";
+                        readonly hiddenFromList: false;
+                    };
                     readonly 'style.backgroundColor': {
                         readonly type: "color";
                         readonly default: "transparent";
@@ -237,6 +278,46 @@ export declare const Internals: {
                         readonly hiddenFromList: true;
                         readonly keyframable: false;
                     };
+                    readonly cropLeft: {
+                        readonly type: "number";
+                        readonly default: 0;
+                        readonly description: "Crop left";
+                        readonly min: 0;
+                        readonly max: 1;
+                        readonly step: 0.01;
+                        readonly hiddenFromList: false;
+                        readonly keyframable: true;
+                    };
+                    readonly cropRight: {
+                        readonly type: "number";
+                        readonly default: 0;
+                        readonly description: "Crop right";
+                        readonly min: 0;
+                        readonly max: 1;
+                        readonly step: 0.01;
+                        readonly hiddenFromList: false;
+                        readonly keyframable: true;
+                    };
+                    readonly cropTop: {
+                        readonly type: "number";
+                        readonly default: 0;
+                        readonly description: "Crop top";
+                        readonly min: 0;
+                        readonly max: 1;
+                        readonly step: 0.01;
+                        readonly hiddenFromList: false;
+                        readonly keyframable: true;
+                    };
+                    readonly cropBottom: {
+                        readonly type: "number";
+                        readonly default: 0;
+                        readonly description: "Crop bottom";
+                        readonly min: 0;
+                        readonly max: 1;
+                        readonly step: 0.01;
+                        readonly hiddenFromList: false;
+                        readonly keyframable: true;
+                    };
                 };
                 readonly none: {};
             };
@@ -309,6 +390,47 @@ export declare const Internals: {
             readonly default: undefined;
             readonly description: "Border color";
         };
+        readonly 'style.borderRadius': {
+            readonly type: "number";
+            readonly default: 0;
+            readonly min: 0;
+            readonly step: 1;
+            readonly description: "Border radius";
+            readonly hiddenFromList: false;
+            readonly keyframable: true;
+        };
+        readonly 'style.borderTopLeftRadius': {
+            readonly type: "number";
+            readonly default: 0;
+            readonly min: 0;
+            readonly step: 1;
+            readonly description: "Top left radius";
+            readonly hiddenFromList: false;
+        };
+        readonly 'style.borderTopRightRadius': {
+            readonly type: "number";
+            readonly default: 0;
+            readonly min: 0;
+            readonly step: 1;
+            readonly description: "Top right radius";
+            readonly hiddenFromList: false;
+        };
+        readonly 'style.borderBottomRightRadius': {
+            readonly type: "number";
+            readonly default: 0;
+            readonly min: 0;
+            readonly step: 1;
+            readonly description: "Bottom right radius";
+            readonly hiddenFromList: false;
+        };
+        readonly 'style.borderBottomLeftRadius': {
+            readonly type: "number";
+            readonly default: 0;
+            readonly min: 0;
+            readonly step: 1;
+            readonly description: "Bottom left radius";
+            readonly hiddenFromList: false;
+        };
         readonly 'style.backgroundColor': {
             readonly type: "color";
             readonly default: "transparent";
@@ -331,6 +453,46 @@ export declare const Internals: {
             readonly hiddenFromList: true;
             readonly keyframable: false;
         };
+        readonly cropLeft: {
+            readonly type: "number";
+            readonly default: 0;
+            readonly description: "Crop left";
+            readonly min: 0;
+            readonly max: 1;
+            readonly step: 0.01;
+            readonly hiddenFromList: false;
+            readonly keyframable: true;
+        };
+        readonly cropRight: {
+            readonly type: "number";
+            readonly default: 0;
+            readonly description: "Crop right";
+            readonly min: 0;
+            readonly max: 1;
+            readonly step: 0.01;
+            readonly hiddenFromList: false;
+            readonly keyframable: true;
+        };
+        readonly cropTop: {
+            readonly type: "number";
+            readonly default: 0;
+            readonly description: "Crop top";
+            readonly min: 0;
+            readonly max: 1;
+            readonly step: 0.01;
+            readonly hiddenFromList: false;
+            readonly keyframable: true;
+        };
+        readonly cropBottom: {
+            readonly type: "number";
+            readonly default: 0;
+            readonly description: "Crop bottom";
+            readonly min: 0;
+            readonly max: 1;
+            readonly step: 0.01;
+            readonly hiddenFromList: false;
+            readonly keyframable: true;
+        };
     };
     readonly sequenceVisualStyleSchema: {
         readonly 'style.transformOrigin': {
@@ -388,6 +550,48 @@ export declare const Internals: {
             readonly keyframable: false;
         };
     };
+    readonly sequenceCropSchema: {
+        readonly cropLeft: {
+            readonly type: "number";
+            readonly default: 0;
+            readonly description: "Crop left";
+            readonly min: 0;
+            readonly max: 1;
+            readonly step: 0.01;
+            readonly hiddenFromList: false;
+            readonly keyframable: true;
+        };
+        readonly cropRight: {
+            readonly type: "number";
+            readonly default: 0;
+            readonly description: "Crop right";
+            readonly min: 0;
+            readonly max: 1;
+            readonly step: 0.01;
+            readonly hiddenFromList: false;
+            readonly keyframable: true;
+        };
+        readonly cropTop: {
+            readonly type: "number";
+            readonly default: 0;
+            readonly description: "Crop top";
+            readonly min: 0;
+            readonly max: 1;
+            readonly step: 0.01;
+            readonly hiddenFromList: false;
+            readonly keyframable: true;
+        };
+        readonly cropBottom: {
+            readonly type: "number";
+            readonly default: 0;
+            readonly description: "Crop bottom";
+            readonly min: 0;
+            readonly max: 1;
+            readonly step: 0.01;
+            readonly hiddenFromList: false;
+            readonly keyframable: true;
+        };
+    };
     readonly textSchema: {
         readonly 'style.color': {
             readonly type: "color";
@@ -803,6 +1007,8 @@ export declare const Internals: {
     readonly getComponentsToAddStacksTo: () => unknown[];
     readonly getSequenceComponent: () => unknown;
     readonly getSingleChildComponent: (children: import("react").ReactNode) => unknown;
+    readonly getStackForControls: (controls: import("./CompositionManager.js").SequenceControls) => string | null;
+    readonly REMOTION_INTERNAL_STACK_PROP: "_remotionInternalStack";
     readonly CurrentScaleContext: import("react").Context<({
         type: "scale";
         scale: number;
@@ -913,7 +1119,6 @@ export declare const Internals: {
         readonly _remotionInternalNativeLoopPassed: boolean;
         readonly _remotionInternalStack: string | null;
         readonly showInTimeline: boolean;
-        readonly stack?: string | undefined;
         readonly onNativeError: import("react").ReactEventHandler<HTMLAudioElement>;
     }, "ref"> & import("react").RefAttributes<HTMLAudioElement>>;
     readonly OBJECTFIT_CONTAIN_CLASS_NAME: "__remotion_objectfitcontain";
@@ -935,7 +1140,6 @@ export declare const Internals: {
         duration: number;
         doesVolumeChange: boolean;
         nonce: import("./nonce.js").NonceHistoryContext;
-        rootId: string;
         finalDisplayName: string;
         startMediaFrom: number;
         src: string;
@@ -1059,5 +1263,10 @@ export declare const Internals: {
         readonly step: 1;
         readonly hiddenFromList: true;
     };
+    readonly resolveSequenceCrop: ({ cropLeft, cropRight, cropTop, cropBottom, }: import("./sequence-crop.js").SequenceCropInput) => import("./sequence-crop.js").ResolvedSequenceCrop;
+    readonly useCropStyle: ({ cropLeft, cropRight, cropTop, cropBottom, style, componentName, }: import("./sequence-crop.js").SequenceCropInput & {
+        readonly style: import("react").CSSProperties | null;
+        readonly componentName: string;
+    }) => import("react").CSSProperties | null;
 };
 export type { ArrayFieldSchema, AssetFieldSchema, ArrayItemFieldSchema, CannotUpdateSequenceReason, CanUpdateEffectPropsResponse, CanUpdateEffectPropsResponseFalse, CanUpdateEffectPropsResponseTrue, CanUpdateSequencePropsResponse, CanUpdateSequencePropsResponseFalse, CanUpdateSequencePropsResponseTrue, CanUpdateSequencePropStatus, CanUpdateSequencePropStatusEasing, CanUpdateSequencePropStatusFalse, CanUpdateSequencePropStatusKeyframed, CanUpdateSequencePropStatusStatic, VideoConfigNumericExpression, CompositionManagerContext, CompProps, DragOverrides, DragOverrideValue, EffectDragOverrides, GetDragOverrides, GetEffectDragOverrides, GetEffectPropStatuses, GetPropStatuses, JsxComponentIdentity, LoggingContextValue, MediaVolumeContextValue, NonceHistory, OverrideIdsToNodePathsGettersContext, OverrideIdsToNodePathsSettersContext, OverrideIdToNodePaths, OverrideToNodePathGetters, OverrideToNodeSetters, PlaybackRateContextValue, PropStatuses, RemotionAudioContextState, RemotionEnvironment, ResolvedStackLocation, ScheduleAudioNodeOptions, ScheduleAudioNodeResult, InteractivitySchemaField, SequenceNodePath, SequencePropsSubscriptionKey, VideoConfigValues, InteractivitySchema, SerializedJSONWithCustomFields, SetMediaVolumeContextValue, SetTimelineContextValue, TCompMetadata, TComposition, TimelineContextValue, TRenderAsset, TSequence, VisibleFieldSchema, WatchRemotionStaticFilesPayload, };

package/dist/cjs/internals.js

@@ -81,6 +81,7 @@ const RemotionRoot_js_1 = require("./RemotionRoot.js");
 const RenderAssetManager_js_1 = require("./RenderAssetManager.js");
 const resolve_video_config_js_1 = require("./resolve-video-config.js");
 const ResolveCompositionConfig_js_1 = require("./ResolveCompositionConfig.js");
+const sequence_crop_js_1 = require("./sequence-crop.js");
 const sequence_node_path_js_1 = require("./sequence-node-path.js");
 const sequence_stack_traces_js_1 = require("./sequence-stack-traces.js");
 const Sequence_js_1 = require("./Sequence.js");
@@ -91,6 +92,7 @@ const TimelinePosition = __importStar(require("./timeline-position-state.js"));
 const timeline_position_state_js_1 = require("./timeline-position-state.js");
 const TimelineContext_js_1 = require("./TimelineContext.js");
 const truthy_js_1 = require("./truthy.js");
+const use_crop_style_js_1 = require("./use-crop-style.js");
 const use_current_scale_js_1 = require("./use-current-scale.js");
 const use_delay_render_js_1 = require("./use-delay-render.js");
 const use_lazy_component_js_1 = require("./use-lazy-component.js");
@@ -149,6 +151,7 @@ exports.Internals = {
     sequenceStyleSchema: interactivity_schema_js_1.sequenceStyleSchema,
     sequenceVisualStyleSchema: interactivity_schema_js_1.sequenceVisualStyleSchema,
     sequencePremountSchema: interactivity_schema_js_1.sequencePremountSchema,
+    sequenceCropSchema: interactivity_schema_js_1.sequenceCropSchema,
     textSchema: interactivity_schema_js_1.textSchema,
     transformSchema: interactivity_schema_js_1.transformSchema,
     premountSchema: interactivity_schema_js_1.premountSchema,
@@ -218,6 +221,8 @@ exports.Internals = {
     getComponentsToAddStacksTo: enable_sequence_stack_traces_js_1.getComponentsToAddStacksTo,
     getSequenceComponent: enable_sequence_stack_traces_js_1.getSequenceComponent,
     getSingleChildComponent: enable_sequence_stack_traces_js_1.getSingleChildComponent,
+    getStackForControls: enable_sequence_stack_traces_js_1.getStackForControls,
+    REMOTION_INTERNAL_STACK_PROP: enable_sequence_stack_traces_js_1.REMOTION_INTERNAL_STACK_PROP,
     CurrentScaleContext: use_current_scale_js_1.CurrentScaleContext,
     PixelDensityContext: use_pixel_density_js_1.PixelDensityContext,
     PreviewSizeContext: use_current_scale_js_1.PreviewSizeContext,
@@ -273,4 +278,6 @@ exports.Internals = {
     durationInFramesField: interactivity_schema_js_1.durationInFramesField,
     freezeField: interactivity_schema_js_1.freezeField,
     fromField: interactivity_schema_js_1.fromField,
+    resolveSequenceCrop: sequence_crop_js_1.resolveSequenceCrop,
+    useCropStyle: use_crop_style_js_1.useCropStyle,
 };

package/dist/cjs/no-react.d.ts

@@ -163,6 +163,47 @@ export declare const NoReactInternals: {
                         readonly default: undefined;
                         readonly description: "Border color";
                     };
+                    readonly 'style.borderRadius': {
+                        readonly type: "number";
+                        readonly default: 0;
+                        readonly min: 0;
+                        readonly step: 1;
+                        readonly description: "Border radius";
+                        readonly hiddenFromList: false;
+                        readonly keyframable: true;
+                    };
+                    readonly 'style.borderTopLeftRadius': {
+                        readonly type: "number";
+                        readonly default: 0;
+                        readonly min: 0;
+                        readonly step: 1;
+                        readonly description: "Top left radius";
+                        readonly hiddenFromList: false;
+                    };
+                    readonly 'style.borderTopRightRadius': {
+                        readonly type: "number";
+                        readonly default: 0;
+                        readonly min: 0;
+                        readonly step: 1;
+                        readonly description: "Top right radius";
+                        readonly hiddenFromList: false;
+                    };
+                    readonly 'style.borderBottomRightRadius': {
+                        readonly type: "number";
+                        readonly default: 0;
+                        readonly min: 0;
+                        readonly step: 1;
+                        readonly description: "Bottom right radius";
+                        readonly hiddenFromList: false;
+                    };
+                    readonly 'style.borderBottomLeftRadius': {
+                        readonly type: "number";
+                        readonly default: 0;
+                        readonly min: 0;
+                        readonly step: 1;
+                        readonly description: "Bottom left radius";
+                        readonly hiddenFromList: false;
+                    };
                     readonly 'style.backgroundColor': {
                         readonly type: "color";
                         readonly default: "transparent";
@@ -185,6 +226,46 @@ export declare const NoReactInternals: {
                         readonly hiddenFromList: true;
                         readonly keyframable: false;
                     };
+                    readonly cropLeft: {
+                        readonly type: "number";
+                        readonly default: 0;
+                        readonly description: "Crop left";
+                        readonly min: 0;
+                        readonly max: 1;
+                        readonly step: 0.01;
+                        readonly hiddenFromList: false;
+                        readonly keyframable: true;
+                    };
+                    readonly cropRight: {
+                        readonly type: "number";
+                        readonly default: 0;
+                        readonly description: "Crop right";
+                        readonly min: 0;
+                        readonly max: 1;
+                        readonly step: 0.01;
+                        readonly hiddenFromList: false;
+                        readonly keyframable: true;
+                    };
+                    readonly cropTop: {
+                        readonly type: "number";
+                        readonly default: 0;
+                        readonly description: "Crop top";
+                        readonly min: 0;
+                        readonly max: 1;
+                        readonly step: 0.01;
+                        readonly hiddenFromList: false;
+                        readonly keyframable: true;
+                    };
+                    readonly cropBottom: {
+                        readonly type: "number";
+                        readonly default: 0;
+                        readonly description: "Crop bottom";
+                        readonly min: 0;
+                        readonly max: 1;
+                        readonly step: 0.01;
+                        readonly hiddenFromList: false;
+                        readonly keyframable: true;
+                    };
                 };
                 readonly none: {};
             };

package/dist/cjs/sequence-crop.d.ts

@@ -0,0 +1,20 @@
+import type { CSSProperties } from 'react';
+export type ResolvedSequenceCrop = {
+    readonly left: number;
+    readonly right: number;
+    readonly top: number;
+    readonly bottom: number;
+};
+type ResolvedSequenceCropWithStyle = ResolvedSequenceCrop & {
+    readonly style: CSSProperties | null | undefined;
+};
+export type SequenceCropInput = {
+    readonly cropLeft?: number;
+    readonly cropRight?: number;
+    readonly cropTop?: number;
+    readonly cropBottom?: number;
+};
+export declare const resolveSequenceCrop: ({ cropLeft, cropRight, cropTop, cropBottom, }: SequenceCropInput) => ResolvedSequenceCrop;
+export declare const getSequenceCropClipPath: ({ left, right, top, bottom, style, }: ResolvedSequenceCropWithStyle) => string | null;
+export declare const validateSequenceCrop: (crop: SequenceCropInput, componentName?: string) => void;
+export {};

package/dist/cjs/sequence-crop.js

@@ -0,0 +1,59 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.validateSequenceCrop = exports.getSequenceCropClipPath = exports.resolveSequenceCrop = void 0;
+const clampCrop = (value) => {
+    return Math.min(1, Math.max(0, value !== null && value !== void 0 ? value : 0));
+};
+const resolveAxis = (start, end) => {
+    const resolvedStart = clampCrop(start);
+    const resolvedEnd = clampCrop(end);
+    if (resolvedStart + resolvedEnd > 1) {
+        return [0.5, 0.5];
+    }
+    return [resolvedStart, resolvedEnd];
+};
+const resolveSequenceCrop = ({ cropLeft, cropRight, cropTop, cropBottom, }) => {
+    const [left, right] = resolveAxis(cropLeft, cropRight);
+    const [top, bottom] = resolveAxis(cropTop, cropBottom);
+    return { left, right, top, bottom };
+};
+exports.resolveSequenceCrop = resolveSequenceCrop;
+const getSequenceCropClipPath = ({ left, right, top, bottom, style, }) => {
+    if (left === 0 && right === 0 && top === 0 && bottom === 0) {
+        return null;
+    }
+    const serializeRadius = (radius) => typeof radius === 'number' ? `${radius}px` : radius;
+    const shorthand = serializeRadius(style === null || style === void 0 ? void 0 : style.borderRadius);
+    const longhands = [
+        style === null || style === void 0 ? void 0 : style.borderTopLeftRadius,
+        style === null || style === void 0 ? void 0 : style.borderTopRightRadius,
+        style === null || style === void 0 ? void 0 : style.borderBottomRightRadius,
+        style === null || style === void 0 ? void 0 : style.borderBottomLeftRadius,
+    ];
+    const serializedBorderRadius = shorthand ||
+        (longhands.some((radius) => radius !== undefined)
+            ? longhands.map((radius) => {
+                var _a;
+                return (_a = serializeRadius(radius)) !== null && _a !== void 0 ? _a : '0px';
+            }).join(' ')
+            : undefined);
+    const rounded = serializedBorderRadius
+        ? ` round ${serializedBorderRadius}`
+        : '';
+    return `inset(${top * 100}% ${right * 100}% ${bottom * 100}% ${left * 100}%${rounded})`;
+};
+exports.getSequenceCropClipPath = getSequenceCropClipPath;
+const validateSequenceCrop = (crop, componentName = '<Sequence />') => {
+    for (const [name, value] of Object.entries(crop)) {
+        if (value === undefined) {
+            continue;
+        }
+        if (typeof value !== 'number' || !Number.isFinite(value)) {
+            throw new TypeError(`The "${name}" prop of ${componentName} must be a finite number, but got ${String(value)}.`);
+        }
+        if (value < 0 || value > 1) {
+            throw new RangeError(`The "${name}" prop of ${componentName} must be between 0 and 1, but got ${value}.`);
+        }
+    }
+};
+exports.validateSequenceCrop = validateSequenceCrop;

package/dist/cjs/series/index.js

@@ -53,10 +53,10 @@ const seriesSequenceSchema = {
     trimBefore: Interactive_js_1.Interactive.sequenceSchema.trimBefore,
     layout: Interactive_js_1.Interactive.sequenceSchema.layout,
 };
-const SeriesSequenceInner = (0, react_1.forwardRef)(({ offset = 0, className = '', stack = null, _remotionInternalRender = null, ...props }, ref) => {
+const SeriesSequenceInner = (0, react_1.forwardRef)(({ offset = 0, className = '', _remotionInternalRender = null, ...props }, ref) => {
     (0, is_inside_series_js_1.useRequireToBeInsideSeries)();
     if (_remotionInternalRender) {
-        return _remotionInternalRender({ ...props, offset, className: className || undefined, stack }, ref);
+        return _remotionInternalRender({ ...props, offset, className: className || undefined }, ref);
     }
     return (jsx_runtime_1.jsx(is_inside_series_js_1.IsNotInsideSeriesProvider, { children: props.children }));
 });
@@ -117,7 +117,7 @@ const SeriesInner = (props) => {
             return react_1.default.cloneElement(castedElement, {
                 _remotionInternalRender: (resolvedProps, ref) => {
                     const durationInFramesProp = resolvedProps.durationInFrames;
-                    const { durationInFrames: _durationInFrames, children: sequenceChildren, offset: offsetProp, controls, stack, from: _from, name, ...passedProps } = resolvedProps; // `from` is not accepted and must be filtered out if used in JS
+                    const { durationInFrames: _durationInFrames, children: sequenceChildren, offset: offsetProp, controls, from: _from, name, ...passedProps } = resolvedProps; // `from` is not accepted and must be filtered out if used in JS
                     const offset = validateSeriesSequenceProps({
                         durationInFrames: durationInFramesProp,
                         offset: offsetProp,
@@ -127,7 +127,7 @@ const SeriesInner = (props) => {
                     const currentStartFrame = startFrame + offset;
                     const nextStartFrame = startFrame + durationInFramesProp + offset;
                     return (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
-                            jsx_runtime_1.jsx(SequenceWithoutSchemaWithRef, { ref: ref, name: name || '<Series.Sequence>', _remotionInternalDocumentationLink: name ? undefined : 'https://www.remotion.dev/docs/series', _remotionInternalStack: stack !== null && stack !== void 0 ? stack : undefined, controls: controls !== null && controls !== void 0 ? controls : undefined, from: currentStartFrame, durationInFrames: durationInFramesProp, ...passedProps, children: jsx_runtime_1.jsx(is_inside_series_js_1.IsNotInsideSeriesProvider, { children: sequenceChildren }) }), renderChildren(i + 1, nextStartFrame)] }));
+                            jsx_runtime_1.jsx(SequenceWithoutSchemaWithRef, { ref: ref, name: name || '<Series.Sequence>', _remotionInternalDocumentationLink: name ? undefined : 'https://www.remotion.dev/docs/series', controls: controls !== null && controls !== void 0 ? controls : undefined, from: currentStartFrame, durationInFrames: durationInFramesProp, ...passedProps, children: jsx_runtime_1.jsx(is_inside_series_js_1.IsNotInsideSeriesProvider, { children: sequenceChildren }) }), renderChildren(i + 1, nextStartFrame)] }));
                 },
             });
         };

package/dist/cjs/static-file.js

@@ -66,6 +66,7 @@ const encodeBySplitting = (path) => {
  * @see [Documentation](https://www.remotion.dev/docs/staticfile)
  */
 const staticFile = (path) => {
+    var _a;
     if (path === null) {
         throw new TypeError('null was passed to staticFile()');
     }
@@ -96,6 +97,15 @@ const staticFile = (path) => {
     if (includesHex.containsHex) {
         warnOnce(`WARNING: You seem to pass an already encoded path (path contains ${includesHex.hexCode}). Since Remotion 4.0, the encoding is done by staticFile() itself. You may want to remove a encodeURIComponent() wrapping.`);
     }
+    if (typeof window !== 'undefined') {
+        // This lookup is primarily used by Browser Studio, where virtual assets
+        // have blob: URLs. Regular Studio sources are already encoded using the
+        // same per-path-segment encoding as the fallback below.
+        const matchingStaticFile = (_a = window.remotion_staticFiles) === null || _a === void 0 ? void 0 : _a.find((file) => file.name === trimLeadingSlash(path));
+        if (matchingStaticFile) {
+            return matchingStaticFile.src;
+        }
+    }
     const preprocessed = encodeBySplitting(path);
     const preparsed = inner(preprocessed);
     if (!preparsed.startsWith('/')) {

package/dist/cjs/truncate-src-for-label.js

@@ -4,7 +4,11 @@ exports.truncateSrcForLabel = truncateSrcForLabel;
 // Data URLs like the ones from canvas.toDataURL() can be many megabytes, which makes the delayRender() label
 // unreadable and bloats log output
 function truncateSrcForLabel(src) {
-    if (src.startsWith('data:') && src.length > 100) {
+    if (typeof src !== 'string') {
+        return String(src);
+    }
+    if (src.length > 100 &&
+        (src.startsWith('data:') || src.startsWith('blob:'))) {
         return src.slice(0, 60) + '...[' + src.length + ' chars total]';
     }
     return src;

package/dist/cjs/use-crop-style.d.ts

@@ -0,0 +1,6 @@
+import type React from 'react';
+import { type SequenceCropInput } from './sequence-crop.js';
+export declare const useCropStyle: ({ cropLeft, cropRight, cropTop, cropBottom, style, componentName, }: SequenceCropInput & {
+    readonly style: React.CSSProperties | null;
+    readonly componentName: string;
+}) => React.CSSProperties | null;

package/dist/cjs/use-crop-style.js

@@ -0,0 +1,19 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useCropStyle = void 0;
+const react_1 = require("react");
+const sequence_crop_js_1 = require("./sequence-crop.js");
+const useCropStyle = ({ cropLeft, cropRight, cropTop, cropBottom, style, componentName, }) => {
+    (0, sequence_crop_js_1.validateSequenceCrop)({ cropLeft, cropRight, cropTop, cropBottom }, componentName);
+    return (0, react_1.useMemo)(() => {
+        const cropClipPath = (0, sequence_crop_js_1.getSequenceCropClipPath)({
+            ...(0, sequence_crop_js_1.resolveSequenceCrop)({ cropLeft, cropRight, cropTop, cropBottom }),
+            style,
+        });
+        if (cropClipPath === null) {
+            return style;
+        }
+        return { ...style, clipPath: cropClipPath };
+    }, [cropBottom, cropLeft, cropRight, cropTop, style]);
+};
+exports.useCropStyle = useCropStyle;

package/dist/cjs/use-media-in-timeline.d.ts

@@ -17,7 +17,6 @@ export declare const useBasicMediaInTimeline: ({ volume, mediaVolume, mediaType,
     duration: number;
     doesVolumeChange: boolean;
     nonce: import("./nonce.js").NonceHistoryContext;
-    rootId: string;
     finalDisplayName: string;
     startMediaFrom: number;
     src: string;

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

@@ -8,7 +8,6 @@ const get_timeline_duration_js_1 = require("./get-timeline-duration.js");
 const nonce_js_1 = require("./nonce.js");
 const SequenceContext_js_1 = require("./SequenceContext.js");
 const SequenceManager_js_1 = require("./SequenceManager.js");
-const timeline_position_state_js_1 = require("./timeline-position-state.js");
 const use_remotion_environment_js_1 = require("./use-remotion-environment.js");
 const use_video_config_js_1 = require("./use-video-config.js");
 const volume_prop_js_1 = require("./volume-prop.js");
@@ -58,7 +57,6 @@ const useBasicMediaInTimeline = ({ volume, mediaVolume, mediaType, src, displayN
     }, [initialVolume, mediaType, src, volume]);
     const doesVolumeChange = typeof volume === 'function';
     const nonce = (0, nonce_js_1.useNonce)();
-    const { rootId } = (0, timeline_position_state_js_1.useTimelineContext)();
     const startMediaFrom = 0 - mediaStartsAt + (trimBefore !== null && trimBefore !== void 0 ? trimBefore : 0);
     const memoizedResult = (0, react_1.useMemo)(() => {
         return {
@@ -66,7 +64,6 @@ const useBasicMediaInTimeline = ({ volume, mediaVolume, mediaType, src, displayN
             duration,
             doesVolumeChange,
             nonce,
-            rootId,
             finalDisplayName: displayName !== null && displayName !== void 0 ? displayName : (0, get_asset_file_name_js_1.getAssetDisplayName)(src),
             startMediaFrom,
             src,
@@ -77,7 +74,6 @@ const useBasicMediaInTimeline = ({ volume, mediaVolume, mediaType, src, displayN
         duration,
         doesVolumeChange,
         nonce,
-        rootId,
         displayName,
         src,
         startMediaFrom,
@@ -92,7 +88,7 @@ const useMediaInTimeline = ({ volume, mediaVolume, src, mediaType, playbackRate,
     const { registerSequence, unregisterSequence } = (0, react_1.useContext)(SequenceManager_js_1.SequenceManager);
     const { durationInFrames } = (0, use_video_config_js_1.useVideoConfig)();
     const mediaStartsAt = (0, use_audio_frame_js_1.useMediaStartsAt)();
-    const { volumes, duration, doesVolumeChange, nonce, rootId, finalDisplayName } = (0, exports.useBasicMediaInTimeline)({
+    const { volumes, duration, doesVolumeChange, nonce, finalDisplayName } = (0, exports.useBasicMediaInTimeline)({
         volume,
         mediaVolume,
         mediaType,
@@ -128,7 +124,6 @@ const useMediaInTimeline = ({ volume, mediaVolume, src, mediaType, playbackRate,
             parent: (_c = parentSequence === null || parentSequence === void 0 ? void 0 : parentSequence.id) !== null && _c !== void 0 ? _c : null,
             displayName: finalDisplayName,
             documentationLink,
-            rootId,
             volume: volumes,
             showInTimeline: true,
             nonce: nonce.get(),
@@ -169,7 +164,6 @@ const useMediaInTimeline = ({ volume, mediaVolume, src, mediaType, playbackRate,
         postmountDisplay,
         loopDisplay,
         documentationLink,
-        rootId,
         finalDisplayName,
         isStudio,
         refForOutline,

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.499";
+export declare const VERSION = "4.0.501";

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.499';
+exports.VERSION = '4.0.501';