@remotion/studio 4.0.499 → 4.0.501

package/dist/components/Timeline/border-radius-representation.js

@@ -0,0 +1,60 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getBorderRadiusConversion = exports.getBorderRadiusConversionChanges = exports.BORDER_RADIUS_SHORTHAND_KEY = exports.BORDER_RADIUS_LONGHAND_KEYS = void 0;
+const studio_shared_1 = require("@remotion/studio-shared");
+Object.defineProperty(exports, "BORDER_RADIUS_LONGHAND_KEYS", { enumerable: true, get: function () { return studio_shared_1.BORDER_RADIUS_LONGHAND_KEYS; } });
+Object.defineProperty(exports, "BORDER_RADIUS_SHORTHAND_KEY", { enumerable: true, get: function () { return studio_shared_1.BORDER_RADIUS_SHORTHAND_KEY; } });
+const getBorderRadiusConversionChanges = (conversion) => {
+    if (conversion.type === 'individual') {
+        return [
+            { fieldKey: studio_shared_1.BORDER_RADIUS_SHORTHAND_KEY, value: undefined },
+            ...studio_shared_1.BORDER_RADIUS_LONGHAND_KEYS.map((fieldKey) => ({
+                fieldKey,
+                value: conversion.value,
+            })),
+        ];
+    }
+    return [
+        ...studio_shared_1.BORDER_RADIUS_LONGHAND_KEYS.map((fieldKey) => ({
+            fieldKey,
+            value: undefined,
+        })),
+        { fieldKey: studio_shared_1.BORDER_RADIUS_SHORTHAND_KEY, value: conversion.value },
+    ];
+};
+exports.getBorderRadiusConversionChanges = getBorderRadiusConversionChanges;
+const getBorderRadiusConversion = (props, dragOverrides = {}) => {
+    const getStaticValue = (key) => {
+        const status = props === null || props === void 0 ? void 0 : props[key];
+        if (status !== undefined && status.status !== 'static') {
+            return { isStatic: false, value: undefined };
+        }
+        const dragOverride = dragOverrides[key];
+        if ((dragOverride === null || dragOverride === void 0 ? void 0 : dragOverride.type) === 'keyframed') {
+            return { isStatic: false, value: undefined };
+        }
+        return {
+            isStatic: true,
+            value: (dragOverride === null || dragOverride === void 0 ? void 0 : dragOverride.type) === 'static'
+                ? dragOverride.value
+                : status === null || status === void 0 ? void 0 : status.codeValue,
+        };
+    };
+    const shorthand = getStaticValue(studio_shared_1.BORDER_RADIUS_SHORTHAND_KEY);
+    if (shorthand.isStatic && typeof shorthand.value === 'number') {
+        return { type: 'individual', value: shorthand.value };
+    }
+    const longhands = studio_shared_1.BORDER_RADIUS_LONGHAND_KEYS.map(getStaticValue);
+    const hasNoAuthoredRadius = [shorthand, ...longhands].every((status) => status.isStatic && status.value === undefined);
+    if (hasNoAuthoredRadius) {
+        return { type: 'individual', value: 0 };
+    }
+    if (longhands.every((status) => status.isStatic && typeof status.value === 'number')) {
+        const values = longhands.map((status) => status.value);
+        if (values.every((value) => value === values[0])) {
+            return { type: 'shorthand', value: values[0] };
+        }
+    }
+    return null;
+};
+exports.getBorderRadiusConversion = getBorderRadiusConversion;

package/dist/components/Timeline/delete-selected-timeline-item.js

@@ -46,12 +46,7 @@ const deleteSequencesFromSource = async (nodePathInfos, confirm) => {
         }),
     })
         .then((result) => {
-        if (result.success) {
-            (0, NotificationCenter_1.showNotification)(nodePathInfos.length === 1
-                ? 'Removed sequence from source file'
-                : 'Removed sequences from source files', 2000);
-        }
-        else {
+        if (!result.success) {
             (0, NotificationCenter_1.showNotification)(result.reason, 4000);
         }
         return true;

package/dist/components/Timeline/find-track-for-node-path-info.d.ts

@@ -4,4 +4,4 @@ export declare const findTrackForNodePathInfo: ({ sequences, overrideIdsToNodePa
     sequences: TSequence[];
     overrideIdsToNodePaths: OverrideIdToNodePaths;
     nodePathInfo: SequenceNodePathInfo;
-}) => import("../../helpers/get-timeline-sequence-sort-key").TrackWithHash | undefined;
+}) => import("../../helpers/get-timeline-sequence-sort-key").TimelineTrackData | undefined;

package/dist/components/Timeline/get-sequence-context-menu-items.js

@@ -145,18 +145,20 @@ const getSequenceContextMenuItems = ({ assetLinkInfo, canOpenInEditor, deleteDis
             }
             : null,
         ...sourceActions,
-        {
-            type: 'item',
-            id: 'disable-interactivity',
-            keyHint: null,
-            label: 'Disable interactivity',
-            leftItem: null,
-            disabled: disableInteractivityDisabled,
-            onClick: onDisableSequenceInteractivity,
-            quickSwitcherLabel: null,
-            subMenu: null,
-            value: 'disable-interactivity',
-        },
+        includeSourceEditItems
+            ? {
+                type: 'item',
+                id: 'disable-interactivity',
+                keyHint: null,
+                label: 'Disable interactivity',
+                leftItem: null,
+                disabled: disableInteractivityDisabled,
+                onClick: onDisableSequenceInteractivity,
+                quickSwitcherLabel: null,
+                subMenu: null,
+                value: 'disable-interactivity',
+            }
+            : null,
         includeSourceEditItems
             ? {
                 type: 'item',

package/dist/components/Timeline/get-sequence-prop-reset-changes.d.ts

@@ -0,0 +1,10 @@
+import type { InteractivitySchema, SequencePropsSubscriptionKey } from 'remotion';
+import type { SaveSequencePropChange } from './save-sequence-prop';
+export declare const getSequencePropResetChanges: ({ fileName, nodePath, fieldKey, value, defaultValue, schema, }: {
+    readonly fileName: string;
+    readonly nodePath: SequencePropsSubscriptionKey;
+    readonly fieldKey: string;
+    readonly value: unknown;
+    readonly defaultValue: string | null;
+    readonly schema: InteractivitySchema;
+}) => SaveSequencePropChange[];

package/dist/components/Timeline/get-sequence-prop-reset-changes.js

@@ -0,0 +1,33 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getSequencePropResetChanges = void 0;
+const studio_shared_1 = require("@remotion/studio-shared");
+const remotion_1 = require("remotion");
+const isVisibleFieldSchema = (fieldSchema) => fieldSchema !== undefined && fieldSchema.type !== 'hidden';
+const getDefaultValue = (fieldSchema) => fieldSchema.default !== undefined
+    ? JSON.stringify(fieldSchema.default)
+    : null;
+const getSequencePropResetChanges = ({ fileName, nodePath, fieldKey, value, defaultValue, schema, }) => {
+    const flatSchema = remotion_1.Internals.getFlatSchemaWithAllKeys(schema);
+    const longhandChanges = (0, studio_shared_1.getStylePropertyLonghandKeys)(fieldKey).flatMap((longhandKey) => {
+        const fieldSchema = flatSchema[longhandKey];
+        if (!isVisibleFieldSchema(fieldSchema)) {
+            return [];
+        }
+        return [
+            {
+                fileName,
+                nodePath,
+                fieldKey: longhandKey,
+                value: fieldSchema.default,
+                defaultValue: getDefaultValue(fieldSchema),
+                schema,
+            },
+        ];
+    });
+    return [
+        { fileName, nodePath, fieldKey, value, defaultValue, schema },
+        ...longhandChanges,
+    ];
+};
+exports.getSequencePropResetChanges = getSequencePropResetChanges;

package/dist/components/Timeline/reset-selected-timeline-props.js

@@ -4,6 +4,7 @@ exports.resetSelectedTimelineProps = exports.getTimelinePropResetTargets = void
 const studio_shared_1 = require("@remotion/studio-shared");
 const remotion_1 = require("remotion");
 const find_track_for_node_path_info_1 = require("./find-track-for-node-path-info");
+const get_sequence_prop_reset_changes_1 = require("./get-sequence-prop-reset-changes");
 const save_effect_prop_1 = require("./save-effect-prop");
 const save_sequence_prop_1 = require("./save-sequence-prop");
 const isPropResetSelection = (selection) => selection.type === 'sequence-prop' ||
@@ -157,14 +158,7 @@ const resetSelectedTimelineProps = ({ selections, sequences, overrideIdsToNodePa
         resetPromises.push((0, save_sequence_prop_1.saveSequenceProps)({
             addedKeyframes: null,
             movedKeyframes: null,
-            changes: sequencePropTargets.map((target) => ({
-                fileName: target.fileName,
-                nodePath: target.nodePath,
-                fieldKey: target.fieldKey,
-                value: target.value,
-                defaultValue: target.defaultValue,
-                schema: target.schema,
-            })),
+            changes: sequencePropTargets.flatMap((target) => (0, get_sequence_prop_reset_changes_1.getSequencePropResetChanges)(target)),
             setPropStatuses,
             clientId,
             undoLabel: sequencePropTargets.length > 1
@@ -175,18 +169,26 @@ const resetSelectedTimelineProps = ({ selections, sequences, overrideIdsToNodePa
                 : 'Reapply sequence prop',
         }));
     }
-    for (const target of effectPropTargets) {
-        resetPromises.push((0, save_effect_prop_1.saveEffectProp)({
-            type: 'value',
-            fileName: target.fileName,
-            nodePath: target.nodePath,
-            effectIndex: target.effectIndex,
-            fieldKey: target.fieldKey,
-            value: target.value,
-            defaultValue: target.defaultValue,
-            schema: target.schema,
+    if (effectPropTargets.length > 0) {
+        resetPromises.push((0, save_effect_prop_1.saveMultipleEffectProps)({
+            changes: effectPropTargets.map((target) => ({
+                type: 'value',
+                fileName: target.fileName,
+                nodePath: target.nodePath,
+                effectIndex: target.effectIndex,
+                fieldKey: target.fieldKey,
+                value: target.value,
+                defaultValue: target.defaultValue,
+                schema: target.schema,
+            })),
             setPropStatuses,
             clientId,
+            undoLabel: effectPropTargets.length > 1
+                ? 'Reset selected effect props'
+                : 'Reset effect prop',
+            redoLabel: effectPropTargets.length > 1
+                ? 'Reapply selected effect props'
+                : 'Reapply effect prop',
         }));
     }
     return Promise.all(resetPromises).then(() => undefined);

package/dist/components/Timeline/save-effect-prop.d.ts

@@ -20,5 +20,15 @@ type SaveEffectPropEffectParam = SaveEffectPropBase & {
     effectParam: EffectClipboardParam;
 };
 type SaveEffectPropInput = SaveEffectPropValue | SaveEffectPropEffectParam;
+type WithoutSaveContext<T> = T extends unknown ? Omit<T, 'setPropStatuses' | 'clientId'> : never;
+type SaveMultipleEffectPropChange = WithoutSaveContext<SaveEffectPropInput>;
+type SaveMultipleEffectPropsOptions = {
+    changes: SaveMultipleEffectPropChange[];
+    setPropStatuses: SetPropStatuses;
+    clientId: string;
+    undoLabel: string;
+    redoLabel: string;
+};
+export declare const saveMultipleEffectProps: ({ changes, setPropStatuses, clientId, undoLabel, redoLabel, }: SaveMultipleEffectPropsOptions) => Promise<void>;
 export declare const saveEffectProp: (input: SaveEffectPropInput) => Promise<void>;
 export {};

package/dist/components/Timeline/save-effect-prop.js

@@ -1,10 +1,61 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.saveEffectProp = void 0;
+exports.saveEffectProp = exports.saveMultipleEffectProps = void 0;
 const studio_shared_1 = require("@remotion/studio-shared");
 const call_api_1 = require("../call-api");
 const apply_effect_response_to_prop_statuses_1 = require("./apply-effect-response-to-prop-statuses");
 const save_prop_queue_1 = require("./save-prop-queue");
+const saveMultipleEffectProps = ({ changes, setPropStatuses, clientId, undoLabel, redoLabel, }) => {
+    if (changes.length === 0) {
+        return Promise.resolve();
+    }
+    for (const change of changes) {
+        if (change.type === 'effect-param') {
+            continue;
+        }
+        setPropStatuses(change.nodePath, (prev) => (0, studio_shared_1.optimisticUpdateForEffectPropStatuses)({
+            previous: prev,
+            effectIndex: change.effectIndex,
+            fieldKey: change.fieldKey,
+            value: change.value,
+            schema: change.schema,
+        }));
+    }
+    return (0, call_api_1.callApi)('/api/save-multiple-effect-props', {
+        edits: changes.map((change) => change.type === 'effect-param'
+            ? {
+                type: 'effect-param',
+                fileName: change.fileName,
+                sequenceNodePath: change.nodePath,
+                effectIndex: change.effectIndex,
+                key: change.fieldKey,
+                effectParam: change.effectParam,
+                defaultValue: change.defaultValue,
+                schema: change.schema,
+            }
+            : {
+                type: 'value',
+                fileName: change.fileName,
+                sequenceNodePath: change.nodePath,
+                effectIndex: change.effectIndex,
+                key: change.fieldKey,
+                value: JSON.stringify(change.value),
+                defaultValue: change.defaultValue,
+                schema: change.schema,
+            }),
+        clientId,
+        undoLabel,
+        redoLabel,
+    }).then((response) => {
+        for (const result of response.results) {
+            setPropStatuses(result.sequenceNodePath, (prev) => (0, apply_effect_response_to_prop_statuses_1.applyEffectResponseToPropStatuses)({
+                previous: prev,
+                response: result.status,
+            }));
+        }
+    });
+};
+exports.saveMultipleEffectProps = saveMultipleEffectProps;
 const saveEffectProp = (input) => {
     const { fileName, nodePath, effectIndex, fieldKey, defaultValue, schema, setPropStatuses, clientId, } = input;
     return (0, save_prop_queue_1.enqueueSavePropChange)({

package/dist/components/Timeline/save-sequence-prop.d.ts

@@ -1,4 +1,4 @@
-import { type SaveSequencePropSourceEdit } from '@remotion/studio-shared';
+import { type CaptionPatch, type SaveSequencePropSourceEdit } from '@remotion/studio-shared';
 import type { CanUpdateSequencePropsResponse, SequencePropsSubscriptionKey, InteractivitySchema } from 'remotion';
 import type { AddSequenceKeyframeChange } from './call-add-keyframe';
 import { type MoveEffectKeyframeChange, type MoveSequenceKeyframeChange } from './call-move-keyframe';
@@ -24,5 +24,16 @@ type SaveSequencePropsOptions = {
     undoLabel: string;
     redoLabel: string;
 };
+export declare const saveInlineCaptionPatches: ({ fileName, nodePath, schema, patches, nextCaptions, setPropStatuses, clientId, undoLabel, redoLabel, }: {
+    fileName: string;
+    nodePath: SequencePropsSubscriptionKey;
+    schema: InteractivitySchema;
+    patches: CaptionPatch[];
+    nextCaptions: unknown;
+    setPropStatuses: SetPropStatuses;
+    clientId: string;
+    undoLabel: string;
+    redoLabel: string;
+}) => Promise<void>;
 export declare const saveSequenceProps: ({ changes, addedKeyframes, movedKeyframes, setPropStatuses, clientId, undoLabel, redoLabel, }: SaveSequencePropsOptions) => Promise<void>;
 export {};

package/dist/components/Timeline/save-sequence-prop.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.saveSequenceProps = void 0;
+exports.saveSequenceProps = exports.saveInlineCaptionPatches = void 0;
 const studio_shared_1 = require("@remotion/studio-shared");
 const call_api_1 = require("../call-api");
 const call_move_keyframe_1 = require("./call-move-keyframe");
@@ -11,6 +11,30 @@ const serializeSequencePropValue = (value) => {
     }
     return { type: 'json', serialized: JSON.stringify(value) };
 };
+const saveInlineCaptionPatches = ({ fileName, nodePath, schema, patches, nextCaptions, setPropStatuses, clientId, undoLabel, redoLabel, }) => {
+    return (0, save_prop_queue_1.enqueueSavePropChange)({
+        nodePath,
+        setPropStatuses,
+        applyOptimistic: (previous) => (0, studio_shared_1.optimisticUpdateForPropStatuses)({
+            previous,
+            fieldKey: 'captions',
+            value: nextCaptions,
+            defaultValue: null,
+            schema,
+        }),
+        apiCall: () => (0, call_api_1.callApi)('/api/save-sequence-props', {
+            edits: [],
+            captionPatches: [{ fileName, nodePath, schema, patches }],
+            addedKeyframes: null,
+            movedKeyframes: null,
+            clientId,
+            undoLabel,
+            redoLabel,
+        }),
+        errorLabel: 'Could not save captions',
+    });
+};
+exports.saveInlineCaptionPatches = saveInlineCaptionPatches;
 const saveSequenceProps = ({ changes, addedKeyframes, movedKeyframes, setPropStatuses, clientId, undoLabel, redoLabel, }) => {
     const keyframesToAdd = addedKeyframes === null ? [] : addedKeyframes;
     const sequenceKeyframes = movedKeyframes === null ? [] : movedKeyframes.sequenceKeyframes;

package/dist/components/Timeline/should-show-track-in-timeline.d.ts

@@ -1,2 +1,2 @@
-import type { TrackWithHash } from '../../helpers/get-timeline-sequence-sort-key';
-export declare const shouldShowTrackInTimeline: (track: TrackWithHash, durationInFrames: number) => boolean;
+import type { TimelineTrackData } from '../../helpers/get-timeline-sequence-sort-key';
+export declare const shouldShowTrackInTimeline: (track: TimelineTrackData, durationInFrames: number) => boolean;

package/dist/components/Timeline/timeline-asset-link.js

@@ -2,6 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.openTimelineAssetLink = exports.getTimelineAssetLinkInfo = exports.getTimelineAssetSrcFromSchema = exports.splitRemoteSourceForMiddleEllipsis = void 0;
 const studio_shared_1 = require("@remotion/studio-shared");
+const no_react_1 = require("remotion/no-react");
 const url_state_1 = require("../../helpers/url-state");
 const splitRemoteSourceForMiddleEllipsis = (src) => {
     const protocolEnd = src.indexOf('://');
@@ -29,6 +30,21 @@ const getTimelineAssetSrcFromSchema = (controls) => {
 };
 exports.getTimelineAssetSrcFromSchema = getTimelineAssetSrcFromSchema;
 const getTimelineAssetLinkInfo = (src) => {
+    if (src.startsWith(no_react_1.NoReactInternals.FILE_TOKEN)) {
+        const encodedAssetPath = src.slice(no_react_1.NoReactInternals.FILE_TOKEN.length);
+        let assetPath = encodedAssetPath;
+        try {
+            assetPath = encodedAssetPath.split('/').map(decodeURIComponent).join('/');
+        }
+        catch (_a) {
+            // Keep the encoded path if it contains an invalid escape sequence.
+        }
+        return {
+            kind: 'local',
+            assetPath,
+            title: assetPath,
+        };
+    }
     const staticBase = typeof window === 'undefined' ? null : window.remotion_staticBase;
     if (staticBase && src.startsWith(staticBase + '/')) {
         const assetPath = src.slice(staticBase.length + 1);
@@ -45,7 +61,7 @@ const getTimelineAssetLinkInfo = (src) => {
             const url = new URL(src.startsWith('//') ? 'https:' + src : src);
             return { kind: 'remote', href: src, title: url.hostname };
         }
-        catch (_a) {
+        catch (_b) {
             return { kind: 'remote', href: src, title: src };
         }
     }

package/dist/components/Timeline/timeline-field-display-utils.js

@@ -239,6 +239,7 @@ const formatTimelineFieldValueForDisplay = ({ fieldSchema, value, }) => {
         case 'asset':
         case 'array':
         case 'boolean':
+        case 'remotion-captions':
         case 'color':
         case 'enum':
         case 'font-family':

package/dist/components/Timeline/use-sequence-freeze-frame-menu-item.d.ts

@@ -2,6 +2,10 @@ import type { CanUpdateSequencePropStatus, SequencePropsSubscriptionKey, TSequen
 import type { ComboboxValue } from '../NewComposition/ComboBox';
 import { type SetPropStatuses } from './save-sequence-prop';
 export declare const shouldShowFreezeFrameMenuItem: (sequence: TSequence) => boolean;
+export declare const isSequenceVisibleAtTimelinePosition: ({ sequence, timelinePosition, }: {
+    readonly sequence: TSequence;
+    readonly timelinePosition: number;
+}) => boolean;
 export declare const calculateSequenceFreezeFrame: ({ sequence, sequenceFrameOffset, timelinePosition, }: {
     readonly sequence: TSequence;
     readonly sequenceFrameOffset: number;

package/dist/components/Timeline/use-sequence-freeze-frame-menu-item.js

@@ -1,12 +1,17 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.useSequenceFreezeFrameMenuItem = exports.calculateSequenceFreezeFrame = exports.shouldShowFreezeFrameMenuItem = void 0;
+exports.useSequenceFreezeFrameMenuItem = exports.calculateSequenceFreezeFrame = exports.isSequenceVisibleAtTimelinePosition = exports.shouldShowFreezeFrameMenuItem = void 0;
 const react_1 = require("react");
 const save_sequence_prop_1 = require("./save-sequence-prop");
 const shouldShowFreezeFrameMenuItem = (sequence) => {
     return sequence.type !== 'audio';
 };
 exports.shouldShowFreezeFrameMenuItem = shouldShowFreezeFrameMenuItem;
+const isSequenceVisibleAtTimelinePosition = ({ sequence, timelinePosition, }) => {
+    return (timelinePosition >= sequence.from &&
+        timelinePosition < sequence.from + sequence.duration);
+};
+exports.isSequenceVisibleAtTimelinePosition = isSequenceVisibleAtTimelinePosition;
 const calculateSequenceFreezeFrame = ({ sequence, sequenceFrameOffset, timelinePosition, }) => {
     const rawFreezeFrame = Math.round(timelinePosition - sequence.from + sequenceFrameOffset);
     const minFrame = sequenceFrameOffset;
@@ -20,7 +25,8 @@ const useSequenceFreezeFrameMenuItem = ({ clientId, nodePath, propStatusesForOve
     const freezeStatus = propStatusesForOverride === null || propStatusesForOverride === void 0 ? void 0 : propStatusesForOverride.freeze;
     const isFrozen = (freezeStatus === null || freezeStatus === void 0 ? void 0 : freezeStatus.status) === 'static' &&
         typeof freezeStatus.codeValue === 'number';
-    const canToggleFreeze = clientId !== null &&
+    const canToggleFreeze = (0, exports.isSequenceVisibleAtTimelinePosition)({ sequence, timelinePosition }) &&
+        clientId !== null &&
         Boolean(sequence.controls) &&
         nodePath !== null &&
         validatedSource !== null &&
@@ -49,7 +55,7 @@ const useSequenceFreezeFrameMenuItem = ({ clientId, nodePath, propStatusesForOve
                     fileName: validatedSource,
                     nodePath,
                     fieldKey: 'freeze',
-                    value: remove ? null : freezeFrame,
+                    value: remove ? undefined : freezeFrame,
                     defaultValue: null,
                     schema: sequence.controls.schema,
                 },

package/dist/components/Timeline/use-timeline-asset-drop.js

@@ -11,6 +11,7 @@ const effect_drag_and_drop_1 = require("../effect-drag-and-drop");
 const handle_drop_1 = require("../handle-drop");
 const NotificationCenter_1 = require("../Notifications/NotificationCenter");
 const SvgImportDialog_1 = require("../SvgImportDialog");
+const use_element_overwrite_confirmation_1 = require("../use-element-overwrite-confirmation");
 const timeline_refs_1 = require("./timeline-refs");
 const timeline_scroll_logic_1 = require("./timeline-scroll-logic");
 const use_resolved_stack_1 = require("./use-resolved-stack");
@@ -30,6 +31,7 @@ const useTimelineAssetDrop = () => {
     const videoConfig = remotion_1.Internals.useUnsafeVideoConfig();
     const timelinePosition = remotion_1.Internals.Timeline.useTimelinePosition();
     const chooseSvgImportMode = (0, SvgImportDialog_1.useSvgImportDialog)();
+    const confirmElementOverwrite = (0, use_element_overwrite_confirmation_1.useElementOverwriteConfirmation)();
     const { previewServerState } = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx);
     const [isAddingAsset, setIsAddingAsset] = (0, react_1.useState)(false);
     const [assetDropFrame, setAssetDropFrame] = (0, react_1.useState)(null);
@@ -120,6 +122,7 @@ const useTimelineAssetDrop = () => {
             await (0, handle_drop_1.handleDrop)({
                 chooseSvgImportMode,
                 compositionFile,
+                confirmElementOverwrite,
                 compositionId: currentCompositionId,
                 destinationDimensions: {
                     height: videoConfig.height,
@@ -142,6 +145,7 @@ const useTimelineAssetDrop = () => {
         chooseSvgImportMode,
         compositionComponentInfo === null || compositionComponentInfo === void 0 ? void 0 : compositionComponentInfo.canAddSequence,
         compositionFile,
+        confirmElementOverwrite,
         currentCompositionId,
         getDropFrame,
         videoConfig,

package/dist/components/Timeline/use-timeline-height.d.ts

@@ -1,5 +1,5 @@
-import type { TrackWithHash } from '../../helpers/get-timeline-sequence-sort-key';
+import type { TimelineTrackData } from '../../helpers/get-timeline-sequence-sort-key';
 export declare const useTimelineHeight: ({ shown, hasBeenCut, }: {
-    shown: TrackWithHash[];
+    shown: TimelineTrackData[];
     hasBeenCut: boolean;
 }) => number;

package/dist/components/TopPanel.js

@@ -114,8 +114,8 @@ const TopPanelInner = ({ readOnlyStudio, onMounted, drawRef, bufferStateDelayInM
     return (jsx_runtime_1.jsx(ObserveDefaultPropsContext_1.ObserveDefaultProps, { compositionId: (canvasContent === null || canvasContent === void 0 ? void 0 : canvasContent.type) === 'composition'
             ? canvasContent.compositionId
             : null, readOnlyStudio: readOnlyStudio, children: jsx_runtime_1.jsxs("div", { style: container, children: [
-                jsx_runtime_1.jsx("div", { style: row, children: jsx_runtime_1.jsxs(SplitterContainer_1.SplitterContainer, { minFlex: 0.15, maxFlex: 0.4, defaultFlex: 0.2, maxFlexerSize: MAX_SIDEBAR_WIDTH, maxAntiFlexerSize: null, id: "sidebar-to-preview", orientation: "vertical", children: [actualStateLeft === 'expanded' ? (isMobileLayout ? (jsx_runtime_1.jsx(MobilePanel_1.default, { onClose: onCollapseLeft, children: jsx_runtime_1.jsx(ExplorerPanel_1.ExplorerPanel, { readOnlyStudio: readOnlyStudio }) })) : (jsx_runtime_1.jsx(SplitterElement_1.SplitterElement, { sticky: null, type: "flexer", children: jsx_runtime_1.jsx(ExplorerPanel_1.ExplorerPanel, { readOnlyStudio: readOnlyStudio }) }))) : null, actualStateLeft === 'expanded' ? (jsx_runtime_1.jsx(SplitterHandle_1.SplitterHandle, { allowToCollapse: "left", onCollapse: onCollapseLeft })) : null, jsx_runtime_1.jsx(SplitterElement_1.SplitterElement, { sticky: null, type: "anti-flexer", children: jsx_runtime_1.jsxs(SplitterContainer_1.SplitterContainer, { minFlex: 0.5, maxFlex: 0.8, defaultFlex: 0.7, maxFlexerSize: null, maxAntiFlexerSize: MAX_SIDEBAR_WIDTH, id: "canvas-to-right-sidebar", orientation: "vertical", children: [
-                                        jsx_runtime_1.jsx(SplitterElement_1.SplitterElement, { sticky: null, type: "flexer", children: jsx_runtime_1.jsx("div", { ref: drawRef, style: canvasContainerStyle, children: jsx_runtime_1.jsx(CanvasIfSizeIsAvailable_1.CanvasIfSizeIsAvailable, {}) }) }), actualStateRight === 'expanded' ? (jsx_runtime_1.jsx(SplitterHandle_1.SplitterHandle, { allowToCollapse: "right", onCollapse: onCollapseRight })) : null, actualStateRight === 'expanded' ? (isMobileLayout ? (jsx_runtime_1.jsx(MobilePanel_1.default, { onClose: onCollapseRight, children: jsx_runtime_1.jsx(OptionsPanel_1.OptionsPanel, { readOnlyStudio: readOnlyStudio }) })) : (jsx_runtime_1.jsx(SplitterElement_1.SplitterElement, { sticky: null, type: "anti-flexer", children: jsx_runtime_1.jsx(OptionsPanel_1.OptionsPanel, { readOnlyStudio: readOnlyStudio }) }))) : null] }) })
+                jsx_runtime_1.jsx("div", { style: row, children: jsx_runtime_1.jsxs(SplitterContainer_1.SplitterContainer, { minFlex: 0.15, maxFlex: 0.4, defaultFlex: 0.2, maxFlexerSize: MAX_SIDEBAR_WIDTH, maxAntiFlexerSize: null, id: "sidebar-to-preview", orientation: "vertical", children: [actualStateLeft === 'expanded' ? (isMobileLayout ? (jsx_runtime_1.jsx(MobilePanel_1.default, { onClose: onCollapseLeft, side: "left", children: jsx_runtime_1.jsx(ExplorerPanel_1.ExplorerPanel, { readOnlyStudio: readOnlyStudio }) })) : (jsx_runtime_1.jsx(SplitterElement_1.SplitterElement, { sticky: null, type: "flexer", children: jsx_runtime_1.jsx(ExplorerPanel_1.ExplorerPanel, { readOnlyStudio: readOnlyStudio }) }))) : null, actualStateLeft === 'expanded' && !isMobileLayout ? (jsx_runtime_1.jsx(SplitterHandle_1.SplitterHandle, { allowToCollapse: "left", onCollapse: onCollapseLeft })) : null, jsx_runtime_1.jsx(SplitterElement_1.SplitterElement, { sticky: null, type: "anti-flexer", children: jsx_runtime_1.jsxs(SplitterContainer_1.SplitterContainer, { minFlex: 0.5, maxFlex: 0.8, defaultFlex: 0.7, maxFlexerSize: null, maxAntiFlexerSize: MAX_SIDEBAR_WIDTH, id: "canvas-to-right-sidebar", orientation: "vertical", children: [
+                                        jsx_runtime_1.jsx(SplitterElement_1.SplitterElement, { sticky: null, type: "flexer", children: jsx_runtime_1.jsx("div", { ref: drawRef, style: canvasContainerStyle, children: jsx_runtime_1.jsx(CanvasIfSizeIsAvailable_1.CanvasIfSizeIsAvailable, {}) }) }), actualStateRight === 'expanded' && !isMobileLayout ? (jsx_runtime_1.jsx(SplitterHandle_1.SplitterHandle, { allowToCollapse: "right", onCollapse: onCollapseRight })) : null, actualStateRight === 'expanded' ? (isMobileLayout ? (jsx_runtime_1.jsx(MobilePanel_1.default, { onClose: onCollapseRight, side: "right", children: jsx_runtime_1.jsx(OptionsPanel_1.OptionsPanel, { readOnlyStudio: readOnlyStudio }) })) : (jsx_runtime_1.jsx(SplitterElement_1.SplitterElement, { sticky: null, type: "anti-flexer", children: jsx_runtime_1.jsx(OptionsPanel_1.OptionsPanel, { readOnlyStudio: readOnlyStudio }) }))) : null] }) })
                         ] }) }), jsx_runtime_1.jsx(PreviewToolbar_1.PreviewToolbar, { bufferStateDelayInMilliseconds: bufferStateDelayInMilliseconds, readOnlyStudio: readOnlyStudio }), jsx_runtime_1.jsx(CurrentCompositionSideEffects_1.TitleUpdater, {})
             ] }) }));
 };

package/dist/components/UndoRedoButtons.js

@@ -4,7 +4,9 @@ exports.UndoRedoButtons = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const ShortcutHint_1 = require("../error-overlay/remotion-overlay/ShortcutHint");
+const browser_studio_operations_1 = require("../helpers/browser-studio-operations");
 const client_id_1 = require("../helpers/client-id");
+const is_mac_1 = require("../helpers/is-mac");
 const use_keybinding_1 = require("../helpers/use-keybinding");
 const redo_1 = require("../icons/redo");
 const undo_1 = require("../icons/undo");
@@ -36,7 +38,11 @@ const UndoRedoButtons = () => {
             return;
         }
         undoInFlight.current = true;
-        (0, call_api_1.callApi)('/api/undo', {})
+        const browserStudioOperations = (0, browser_studio_operations_1.getBrowserStudioOperations)();
+        const promise = browserStudioOperations
+            ? browserStudioOperations.undo()
+            : (0, call_api_1.callApi)('/api/undo', {});
+        promise
             .catch(() => {
             // Ignore errors
         })
@@ -49,7 +55,11 @@ const UndoRedoButtons = () => {
             return;
         }
         redoInFlight.current = true;
-        (0, call_api_1.callApi)('/api/redo', {})
+        const browserStudioOperations = (0, browser_studio_operations_1.getBrowserStudioOperations)();
+        const promise = browserStudioOperations
+            ? browserStudioOperations.redo()
+            : (0, call_api_1.callApi)('/api/redo', {});
+        promise
             .catch(() => {
             // Ignore errors
         })
@@ -74,11 +84,14 @@ const UndoRedoButtons = () => {
             triggerIfInputFieldFocused: false,
             keepRegisteredWhenNotHighestContext: false,
         });
-        const redo = keybindings.registerKeybinding({
+        const redoWithShiftZ = keybindings.registerKeybinding({
             event: 'keydown',
-            key: 'y',
+            key: 'z',
             commandCtrlKey: true,
-            callback: () => {
+            callback: (e) => {
+                if (!e.shiftKey) {
+                    return;
+                }
                 if (redoFile) {
                     onRedo();
                 }
@@ -87,9 +100,25 @@ const UndoRedoButtons = () => {
             triggerIfInputFieldFocused: false,
             keepRegisteredWhenNotHighestContext: false,
         });
+        const redoWithY = is_mac_1.isMac
+            ? null
+            : keybindings.registerKeybinding({
+                event: 'keydown',
+                key: 'y',
+                commandCtrlKey: true,
+                callback: () => {
+                    if (redoFile) {
+                        onRedo();
+                    }
+                },
+                preventDefault: true,
+                triggerIfInputFieldFocused: false,
+                keepRegisteredWhenNotHighestContext: false,
+            });
         return () => {
             undo.unregister();
-            redo.unregister();
+            redoWithShiftZ.unregister();
+            redoWithY === null || redoWithY === void 0 ? void 0 : redoWithY.unregister();
         };
     }, [keybindings, onRedo, onUndo, redoFile, undoFile]);
     const undoTooltip = (0, use_keybinding_1.areKeyboardShortcutsDisabled)()
@@ -97,13 +126,15 @@ const UndoRedoButtons = () => {
         : `Undo (${ShortcutHint_1.cmdOrCtrlCharacter}+Z)`;
     const redoTooltip = (0, use_keybinding_1.areKeyboardShortcutsDisabled)()
         ? 'Redo'
-        : `Redo (${ShortcutHint_1.cmdOrCtrlCharacter}+Y)`;
+        : is_mac_1.isMac
+            ? `Redo (${ShortcutHint_1.cmdOrCtrlCharacter}+Shift+Z)`
+            : `Redo (${ShortcutHint_1.cmdOrCtrlCharacter}+Y)`;
     const renderUndo = (0, react_1.useCallback)((color) => {
-        return (jsx_runtime_1.jsx(undo_1.UndoIcon, { style: { ...iconStyle, color, opacity: undoFile ? 1 : 0.5 } }));
-    }, [undoFile]);
+        return jsx_runtime_1.jsx(undo_1.UndoIcon, { style: { ...iconStyle, color } });
+    }, []);
     const renderRedo = (0, react_1.useCallback)((color) => {
-        return (jsx_runtime_1.jsx(redo_1.RedoIcon, { style: { ...iconStyle, color, opacity: redoFile ? 1 : 0.5 } }));
-    }, [redoFile]);
+        return jsx_runtime_1.jsx(redo_1.RedoIcon, { style: { ...iconStyle, color } });
+    }, []);
     const canUndo = undoFile !== null;
     const canRedo = redoFile !== null;
     if (!canUndo && !canRedo) {

package/dist/components/composition-drop-preview.js

@@ -13,6 +13,7 @@ const snapCompositionDropPosition = ({ compositionDimensions, destinationDimensi
     const outline = {
         key: 'composition-drop-preview',
         dimensions: compositionDimensions,
+        uncroppedPoints: null,
         points: [
             { x: left * scale, y: top * scale },
             { x: right * scale, y: top * scale },