@remotion/studio 4.0.500 → 4.0.501

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

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/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-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/UndoRedoButtons.js

@@ -4,6 +4,7 @@ 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");
@@ -37,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
         })
@@ -50,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
         })
@@ -121,11 +130,11 @@ const UndoRedoButtons = () => {
             ? `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/handle-drop.d.ts

@@ -1,9 +1,10 @@
 import type { Dimensions } from '../helpers/is-current-selected-still';
-import { type InsertElementDropPosition } from './import-assets';
+import { type ConfirmElementOverwrite, type InsertElementDropPosition } from './import-assets';
 import type { SvgImportMode } from './SvgImportDialog';
-export declare const handleDrop: ({ chooseSvgImportMode, compositionFile, compositionId, destinationDimensions, dropPosition, event, fps, from, }: {
+export declare const handleDrop: ({ chooseSvgImportMode, compositionFile, confirmElementOverwrite, compositionId, destinationDimensions, dropPosition, event, fps, from, }: {
     chooseSvgImportMode: () => Promise<SvgImportMode | null>;
     compositionFile: string;
+    confirmElementOverwrite: ConfirmElementOverwrite;
     compositionId: string;
     destinationDimensions: Dimensions | null;
     dropPosition: InsertElementDropPosition | null;

package/dist/components/handle-drop.js

@@ -5,7 +5,7 @@ const remote_asset_drag_1 = require("../helpers/remote-asset-drag");
 const drop_handler_data_1 = require("./drop-handler-data");
 const element_drag_and_drop_1 = require("./element-drag-and-drop");
 const import_assets_1 = require("./import-assets");
-const handleDrop = async ({ chooseSvgImportMode, compositionFile, compositionId, destinationDimensions, dropPosition, event, fps, from, }) => {
+const handleDrop = async ({ chooseSvgImportMode, compositionFile, confirmElementOverwrite, compositionId, destinationDimensions, dropPosition, event, fps, from, }) => {
     var _a;
     var _b;
     if ((0, drop_handler_data_1.isFileDragEvent)(event)) {
@@ -80,6 +80,7 @@ const handleDrop = async ({ chooseSvgImportMode, compositionFile, compositionId,
         await (0, import_assets_1.insertElement)({
             compositionFile,
             compositionId,
+            confirmOverwrite: confirmElementOverwrite,
             dropPosition,
             element: element.element,
             from,

package/dist/components/import-assets.d.ts

@@ -1,10 +1,11 @@
 import { type CompositionDragData, type ComponentProp } from '@remotion/drag-and-drop';
-import { type FileType, type InsertableCompositionElementPosition } from '@remotion/studio-shared';
+import { type FileType, type InsertElementFileConflict, type InsertableCompositionElementPosition } from '@remotion/studio-shared';
 import type { Dimensions } from '../helpers/is-current-selected-still';
 export type InsertElementDropPosition = {
     readonly centerX: number;
     readonly centerY: number;
 };
+export type ConfirmElementOverwrite = (conflict: InsertElementFileConflict) => Promise<boolean>;
 export declare const getAssetElement: ({ fileType, src, }: {
     fileType: FileType;
     src: string;
@@ -144,9 +145,10 @@ export declare const insertComposition: ({ composition, compositionFile, composi
     dropPosition: InsertElementDropPosition | null;
     from: number | null;
 }) => Promise<void>;
-export declare const insertElement: ({ compositionFile, compositionId, dropPosition, element, from, }: {
+export declare const insertElement: ({ compositionFile, compositionId, confirmOverwrite, dropPosition, element, from, }: {
     compositionFile: string;
     compositionId: string;
+    confirmOverwrite: ConfirmElementOverwrite;
     dropPosition: InsertElementDropPosition | null;
     element: {
         dependencies: string[];

package/dist/components/import-assets.js

@@ -872,21 +872,34 @@ const insertComposition = async ({ composition, compositionFile, compositionId,
     }
 };
 exports.insertComposition = insertComposition;
-const insertElement = async ({ compositionFile, compositionId, dropPosition, element, from, }) => {
+const insertElement = async ({ compositionFile, compositionId, confirmOverwrite, dropPosition, element, from, }) => {
     try {
         await (0, install_required_package_1.installRequiredPackages)(element.dependencies);
-        const response = await (0, call_api_1.callApi)('/api/insert-element', {
+        const position = (0, exports.getElementPositionForDrop)({
+            dimensions: element.dimensions,
+            dropPosition,
+        });
+        const callInsertElementApi = (overwriteExisting) => (0, call_api_1.callApi)('/api/insert-element', {
             compositionFile,
             compositionId,
             element,
             from,
-            position: (0, exports.getElementPositionForDrop)({
-                dimensions: element.dimensions,
-                dropPosition,
-            }),
+            overwriteExisting,
+            position,
         });
+        let response = await callInsertElementApi(false);
+        if (!response.success && response.type === 'file-conflict') {
+            const shouldOverwrite = await confirmOverwrite(response.conflict);
+            if (!shouldOverwrite) {
+                return;
+            }
+            response = await callInsertElementApi(true);
+        }
         if (!response.success) {
-            (0, NotificationCenter_1.showNotification)(`Could not add Element: ${response.reason}`, 4000);
+            const reason = response.type === 'error'
+                ? response.reason
+                : `Element file still conflicts: ${response.conflict.filePath}`;
+            (0, NotificationCenter_1.showNotification)(`Could not add Element: ${reason}`, 4000);
             return;
         }
         (0, NotificationCenter_1.showNotification)(`Added ${element.displayName} to source file`, 2000);

package/dist/components/use-element-overwrite-confirmation.d.ts

@@ -0,0 +1,2 @@
+import type { InsertElementFileConflict } from '@remotion/studio-shared';
+export declare const useElementOverwriteConfirmation: () => (conflict: InsertElementFileConflict) => Promise<boolean>;

package/dist/components/use-element-overwrite-confirmation.js

@@ -0,0 +1,73 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useElementOverwriteConfirmation = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const ConfirmationDialog_1 = require("./ConfirmationDialog");
+const filePathStyle = {
+    color: 'inherit',
+    fontFamily: 'monospace',
+    fontSize: 13,
+    lineHeight: 1.4,
+};
+const warningStyle = {
+    color: 'inherit',
+    fontFamily: 'sans-serif',
+    fontSize: 14,
+    lineHeight: 1.4,
+    marginTop: 12,
+};
+const sourceDetailsStyle = {
+    color: 'inherit',
+    fontFamily: 'sans-serif',
+    fontSize: 13,
+    lineHeight: 1.4,
+    marginTop: 12,
+};
+const sourceSummaryStyle = {
+    color: 'inherit',
+    cursor: 'pointer',
+    fontFamily: 'sans-serif',
+    fontSize: 13,
+    fontWeight: 500,
+    lineHeight: 1.4,
+};
+const sourceCodeBlockStyle = {
+    backgroundColor: 'rgba(255, 255, 255, 0.06)',
+    borderRadius: 6,
+    color: 'inherit',
+    fontFamily: 'monospace',
+    fontSize: 12,
+    lineHeight: 1.5,
+    marginBottom: 0,
+    marginTop: 8,
+    maxHeight: 200,
+    overflow: 'auto',
+    padding: 12,
+    whiteSpace: 'pre',
+};
+const sourceCodeStyle = {
+    color: 'inherit',
+    fontFamily: 'monospace',
+    fontSize: 12,
+    lineHeight: 1.5,
+};
+const useElementOverwriteConfirmation = () => {
+    const confirm = (0, ConfirmationDialog_1.useConfirmationDialog)();
+    return (0, react_1.useCallback)((conflict) => {
+        return confirm({
+            title: 'Overwrite Element file?',
+            message: (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: ["The Element file", ' ', jsx_runtime_1.jsx("code", { style: filePathStyle, children: conflict.filePath }),
+                    " already exists with different contents.",
+                    jsx_runtime_1.jsx("div", { style: warningStyle, children: "Overwriting will replace local changes in this file. The composition will only be updated if you choose Overwrite." }), jsx_runtime_1.jsxs("details", { style: sourceDetailsStyle, open: true, children: [
+                            jsx_runtime_1.jsx("summary", { style: sourceSummaryStyle, children: "Existing source" }), jsx_runtime_1.jsx("pre", { style: sourceCodeBlockStyle, children: jsx_runtime_1.jsx("code", { style: sourceCodeStyle, children: conflict.existingSource }) })
+                        ] }), jsx_runtime_1.jsxs("details", { style: sourceDetailsStyle, children: [
+                            jsx_runtime_1.jsx("summary", { style: sourceSummaryStyle, children: "Incoming source" }), jsx_runtime_1.jsx("pre", { style: sourceCodeBlockStyle, children: jsx_runtime_1.jsx("code", { style: sourceCodeStyle, children: conflict.incomingSource }) })
+                        ] })
+                ] })),
+            confirmLabel: 'Overwrite',
+            cancelLabel: 'Cancel',
+        });
+    }, [confirm]);
+};
+exports.useElementOverwriteConfirmation = useElementOverwriteConfirmation;

package/dist/components/use-static-files.js

@@ -38,22 +38,27 @@ const react_1 = __importStar(require("react"));
 const remotion_1 = require("remotion");
 const get_static_files_1 = require("../api/get-static-files");
 const watch_public_folder_1 = require("../api/watch-public-folder");
+const browser_studio_operations_1 = require("../helpers/browser-studio-operations");
+const client_id_1 = require("../helpers/client-id");
 const StaticFilesContext = (0, react_1.createContext)([]);
 const StaticFilesProvider = ({ children }) => {
     const [files, setFiles] = (0, react_1.useState)(() => (0, get_static_files_1.getStaticFiles)());
     const env = (0, remotion_1.useRemotionEnvironment)();
+    const { previewServerState } = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx);
+    const browserStudioCanWatch = previewServerState.type === 'connected' &&
+        (0, browser_studio_operations_1.getBrowserStudioOperations)() !== null;
     (0, react_1.useEffect)(() => {
         if (!env.isStudio) {
             return;
         }
-        if (env.isReadOnlyStudio) {
+        if (env.isReadOnlyStudio && !browserStudioCanWatch) {
             return;
         }
         const { cancel } = (0, watch_public_folder_1.watchPublicFolder)((newFiles) => {
             setFiles(newFiles);
         });
         return cancel;
-    }, [env.isStudio, env.isReadOnlyStudio]);
+    }, [browserStudioCanWatch, env.isStudio, env.isReadOnlyStudio]);
     return react_1.default.createElement(StaticFilesContext.Provider, { value: files }, children);
 };
 exports.StaticFilesProvider = StaticFilesProvider;

package/dist/error-overlay/react-overlay/effects/resolve-file-source.js

@@ -1,9 +1,20 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.resolveFileSource = void 0;
+const browser_studio_operations_1 = require("../../../helpers/browser-studio-operations");
 const resolveFileSource = async (location, contextLines) => {
-    const res = await fetch(`/api/file-source?f=${encodeURIComponent(location.fileName)}`);
-    const text = await res.text();
+    const browserStudioOperations = (0, browser_studio_operations_1.getBrowserStudioOperations)();
+    let text;
+    if (browserStudioOperations) {
+        const browserSource = await browserStudioOperations.getFileSource(location.fileName);
+        if (browserSource === null) {
+            throw new Error(`Could not find ${location.fileName}`);
+        }
+        text = browserSource;
+    }
+    else {
+        text = await (await fetch(`/api/file-source?f=${encodeURIComponent(location.fileName)}`)).text();
+    }
     const lines = text
         .split('\n')
         .map((l, i) => {