@remotion/studio 4.0.470 → 4.0.472

package/dist/components/Timeline/sequence-props-subscription-store.d.ts

@@ -1,13 +1,14 @@
-import type { SequenceSchema } from 'remotion';
+import type { SequenceNodePath, SequenceSchema } from 'remotion';
 import { callApi } from '../call-api';
 type SubscribeResult = Awaited<ReturnType<typeof callApi<'/api/subscribe-to-sequence-props'>>>;
 type ApplyResult = (result: SubscribeResult) => void;
-export declare const acquireSequencePropsSubscription: ({ fileName, line, column, schema, effects, clientId, applyOnce, applyEach, }: {
+export declare const acquireSequencePropsSubscription: ({ fileName, line, column, schema, effects, nodePath, clientId, applyOnce, applyEach, }: {
     fileName: string;
     line: number;
     column: number;
     schema: SequenceSchema;
     effects: SequenceSchema[];
+    nodePath: SequenceNodePath | null;
     clientId: string;
     applyOnce: ApplyResult;
     applyEach: ApplyResult;

package/dist/components/Timeline/sequence-props-subscription-store.js

@@ -6,7 +6,7 @@ const remotion_1 = require("remotion");
 const call_api_1 = require("../call-api");
 const makeKey = (fileName, line, column, sequenceKeys, effectKeys) => `${fileName}\0${line}\0${column}\0${sequenceKeys.join('\0')}\0${effectKeys.map((keys) => keys.join('\0')).join('\0\0')}`;
 const entries = new Map();
-const acquireSequencePropsSubscription = ({ fileName, line, column, schema, effects, clientId, applyOnce, applyEach, }) => {
+const acquireSequencePropsSubscription = ({ fileName, line, column, schema, effects, nodePath, clientId, applyOnce, applyEach, }) => {
     const sequenceKeys = (0, studio_shared_1.getAllSchemaKeys)(schema);
     const effectKeys = effects.map((effect) => (0, studio_shared_1.getAllSchemaKeys)(effect));
     const key = makeKey(fileName, line, column, sequenceKeys, effectKeys);
@@ -16,6 +16,7 @@ const acquireSequencePropsSubscription = ({ fileName, line, column, schema, effe
             fileName,
             line,
             column,
+            nodePath,
             keys: (0, studio_shared_1.getAllSchemaKeys)(schema),
             effects: effectKeys,
             clientId,

package/dist/components/Timeline/timeline-field-utils.d.ts

@@ -1,2 +1,3 @@
 export declare const getDecimalPlaces: (num: number) => number;
+export declare const normalizeTimelineNumber: (value: number) => number;
 export declare const draggerStyle: React.CSSProperties;

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

@@ -1,12 +1,16 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.draggerStyle = exports.getDecimalPlaces = void 0;
+exports.draggerStyle = exports.normalizeTimelineNumber = exports.getDecimalPlaces = void 0;
 const getDecimalPlaces = (num) => {
     const str = String(num);
     const decimalIndex = str.indexOf('.');
     return decimalIndex === -1 ? 0 : str.length - decimalIndex - 1;
 };
 exports.getDecimalPlaces = getDecimalPlaces;
+const normalizeTimelineNumber = (value) => {
+    return Math.round(value * 1000000) / 1000000;
+};
+exports.normalizeTimelineNumber = normalizeTimelineNumber;
 exports.draggerStyle = {
     width: 80,
 };

package/dist/components/Timeline/timeline-scroll-logic.js

@@ -172,7 +172,7 @@ const getFrameIncrement = (durationInFrames) => {
     return (0, exports.getFrameIncrementFromWidth)(durationInFrames, width);
 };
 const getFrameIncrementFromWidth = (durationInFrames, width) => {
-    return (width - timeline_layout_1.TIMELINE_PADDING * 2) / (durationInFrames - 1);
+    return (width - timeline_layout_1.TIMELINE_PADDING * 2) / durationInFrames;
 };
 exports.getFrameIncrementFromWidth = getFrameIncrementFromWidth;
 const getFrameWhileScrollingRight = ({ durationInFrames, width, }) => {
@@ -193,10 +193,10 @@ const getFrameWhileScrollingRight = ({ durationInFrames, width, }) => {
 exports.getFrameWhileScrollingRight = getFrameWhileScrollingRight;
 const getFrameFromX = ({ clientX, durationInFrames, width, extrapolate, }) => {
     const pos = clientX - timeline_layout_1.TIMELINE_PADDING;
-    const frame = Math.round((0, remotion_1.interpolate)(pos, [0, width - timeline_layout_1.TIMELINE_PADDING * 2], [0, durationInFrames - 1], {
+    const frame = Math.min(durationInFrames - 1, Math.round((0, remotion_1.interpolate)(pos, [0, width - timeline_layout_1.TIMELINE_PADDING * 2], [0, durationInFrames], {
         extrapolateLeft: extrapolate,
         extrapolateRight: extrapolate,
-    }));
+    })));
     return frame;
 };
 exports.getFrameFromX = getFrameFromX;

package/dist/components/Timeline/timeline-translate-utils.js

@@ -1,17 +1,21 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.serializeTranslate = exports.parseTranslate = void 0;
+const timeline_field_utils_1 = require("./timeline-field-utils");
 const PIXEL_PATTERN = /^(-?\d+(?:\.\d+)?)px(?:\s+(-?\d+(?:\.\d+)?)px)?$/;
 const parseTranslate = (value) => {
     const m = value.match(PIXEL_PATTERN);
     if (!m) {
         return [0, 0];
     }
-    return [Number(m[1]), m[2] !== undefined ? Number(m[2]) : 0];
+    return [
+        (0, timeline_field_utils_1.normalizeTimelineNumber)(Number(m[1])),
+        m[2] !== undefined ? (0, timeline_field_utils_1.normalizeTimelineNumber)(Number(m[2])) : 0,
+    ];
 };
 exports.parseTranslate = parseTranslate;
 const formatTranslateCoordinate = (value) => {
-    const rounded = Math.round(value * 1000) / 1000;
+    const rounded = (0, timeline_field_utils_1.normalizeTimelineNumber)(value);
     return String(Object.is(rounded, -0) ? 0 : rounded);
 };
 const serializeTranslate = (x, y) => {

package/dist/components/Timeline/use-expanded-track-keyframe-rows.js

@@ -11,6 +11,7 @@ const useExpandedTrackKeyframeRows = ({ sequence, nodePathInfo, keyframeDisplayO
     const { getIsExpanded } = (0, react_1.useContext)(ExpandedTracksProvider_1.ExpandedTracksGetterContext);
     const { codeValues } = (0, react_1.useContext)(remotion_1.Internals.VisualModeCodeValuesContext);
     const { getDragOverrides, getEffectDragOverrides } = (0, react_1.useContext)(remotion_1.Internals.VisualModeDragOverridesContext);
+    const timelinePosition = remotion_1.Internals.Timeline.useTimelinePosition();
     const tree = (0, react_1.useMemo)(() => (0, timeline_layout_1.buildTimelineTree)({
         sequence,
         nodePathInfo,
@@ -38,14 +39,20 @@ const useExpandedTrackKeyframeRows = ({ sequence, nodePathInfo, keyframeDisplayO
             nodePath: nodePathInfo.sequenceSubscriptionKey,
             codeValues,
             keyframeDisplayOffset,
+            getDragOverrides,
+            getEffectDragOverrides,
+            timelinePosition,
         }),
         rowKey: (0, timeline_node_path_key_1.timelineNodePathInfoToKey)(node.nodePathInfo),
         nodePathInfo: node.nodePathInfo,
     })), [
         codeValues,
         flat,
+        getDragOverrides,
+        getEffectDragOverrides,
         keyframeDisplayOffset,
         nodePathInfo.sequenceSubscriptionKey,
+        timelinePosition,
     ]);
     return { rows, expandedHeight };
 };

package/dist/components/Timeline/use-sequence-props-subscription.js

@@ -36,7 +36,7 @@ const useSequencePropsSubscription = ({ originalLocation, overrideId, schema, ef
     const locationLine = (_b = validatedLocation === null || validatedLocation === void 0 ? void 0 : validatedLocation.line) !== null && _b !== void 0 ? _b : null;
     const locationColumn = (_c = validatedLocation === null || validatedLocation === void 0 ? void 0 : validatedLocation.column) !== null && _c !== void 0 ? _c : null;
     (0, react_1.useEffect)(() => {
-        var _a;
+        var _a, _b;
         if (!clientId ||
             !locationSource ||
             !locationLine ||
@@ -51,6 +51,7 @@ const useSequencePropsSubscription = ({ originalLocation, overrideId, schema, ef
             column: locationColumn,
             schema,
             effects,
+            nodePath: (_b = nodePathAtResubscribe === null || nodePathAtResubscribe === void 0 ? void 0 : nodePathAtResubscribe.nodePath) !== null && _b !== void 0 ? _b : null,
             clientId,
             applyOnce: (result) => {
                 if (!result.success) {

package/dist/components/TopPanel.d.ts

@@ -3,6 +3,6 @@ export declare const useResponsiveSidebarStatus: () => "collapsed" | "expanded";
 export declare const TopPanel: React.NamedExoticComponent<{
     readonly readOnlyStudio: boolean;
     readonly onMounted: () => void;
-    readonly drawRef: React.RefObject<HTMLDivElement | null>;
+    readonly drawRef: React.Ref<HTMLDivElement>;
     readonly bufferStateDelayInMilliseconds: number;
 }>;

package/dist/components/folder-menu-items.d.ts

@@ -0,0 +1,12 @@
+import type { SetStateAction } from 'react';
+import type { ResolvedStackLocation } from 'remotion';
+import type { ModalState } from '../state/modals';
+import type { ComboboxValue } from './NewComposition/ComboBox';
+export declare const getFolderMenuItems: ({ closeMenu, connectionStatus, folder, readOnlyStudio, resolvedLocation, setSelectedModal, }: {
+    closeMenu: () => void;
+    connectionStatus: "connected" | "disconnected" | "init";
+    folder: import("remotion").TFolder;
+    readOnlyStudio: boolean;
+    resolvedLocation: ResolvedStackLocation | null;
+    setSelectedModal: (value: SetStateAction<ModalState | null>) => void;
+}) => ComboboxValue[];

package/dist/components/folder-menu-items.js

@@ -0,0 +1,147 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getFolderMenuItems = void 0;
+const no_react_1 = require("remotion/no-react");
+const format_file_location_1 = require("../helpers/format-file-location");
+const get_folder_id_1 = require("../helpers/get-folder-id");
+const open_in_editor_1 = require("../helpers/open-in-editor");
+const NotificationCenter_1 = require("./Notifications/NotificationCenter");
+const getFolderMenuItems = ({ closeMenu, connectionStatus, folder, readOnlyStudio, resolvedLocation, setSelectedModal, }) => {
+    const editorName = window.remotion_editorName;
+    const folderId = (0, get_folder_id_1.getFolderId)({
+        folderName: folder.name,
+        parentName: folder.parent,
+    });
+    const fileLocation = (0, format_file_location_1.formatFileLocation)({
+        location: resolvedLocation,
+        root: window.remotion_cwd,
+    });
+    const showInEditorDisabled = connectionStatus !== 'connected' || !resolvedLocation;
+    const copyFileLocationDisabled = !fileLocation;
+    const codemodDisabled = readOnlyStudio || !folder.stack;
+    return [
+        editorName
+            ? {
+                id: 'show-folder-in-editor',
+                keyHint: null,
+                label: `Show folder in ${editorName}`,
+                leftItem: null,
+                onClick: async () => {
+                    closeMenu();
+                    if (!resolvedLocation) {
+                        return;
+                    }
+                    try {
+                        await (0, open_in_editor_1.openOriginalPositionInEditor)(resolvedLocation);
+                    }
+                    catch (err) {
+                        (0, NotificationCenter_1.showNotification)(err.message, 2000);
+                    }
+                },
+                quickSwitcherLabel: `Show folder in ${editorName}`,
+                subMenu: null,
+                type: 'item',
+                value: 'show-folder-in-editor',
+                disabled: showInEditorDisabled,
+            }
+            : null,
+        {
+            id: 'copy-folder-file-location',
+            keyHint: null,
+            label: `Copy file location`,
+            leftItem: null,
+            onClick: () => {
+                closeMenu();
+                if (!fileLocation) {
+                    return;
+                }
+                navigator.clipboard
+                    .writeText(fileLocation)
+                    .then(() => {
+                    (0, NotificationCenter_1.showNotification)('Copied file location to clipboard', 1000);
+                })
+                    .catch((err) => {
+                    (0, NotificationCenter_1.showNotification)(`Could not copy to clipboard: ${err.message}`, 1000);
+                });
+            },
+            quickSwitcherLabel: 'Copy folder file location',
+            subMenu: null,
+            type: 'item',
+            value: 'copy-folder-file-location',
+            disabled: copyFileLocationDisabled,
+        },
+        editorName || fileLocation
+            ? {
+                type: 'divider',
+                id: 'show-folder-in-editor-divider',
+            }
+            : null,
+        {
+            id: 'rename-folder',
+            keyHint: null,
+            label: `Rename...`,
+            leftItem: null,
+            onClick: () => {
+                closeMenu();
+                setSelectedModal({
+                    type: 'rename-folder',
+                    folderName: folder.name,
+                    parentName: folder.parent,
+                    stack: folder.stack,
+                });
+            },
+            quickSwitcherLabel: 'Rename folder...',
+            subMenu: null,
+            type: 'item',
+            value: 'rename-folder',
+            disabled: codemodDisabled,
+        },
+        {
+            id: 'delete-folder',
+            keyHint: null,
+            label: `Delete...`,
+            leftItem: null,
+            onClick: () => {
+                closeMenu();
+                setSelectedModal({
+                    type: 'delete-folder',
+                    folderName: folder.name,
+                    parentName: folder.parent,
+                    stack: folder.stack,
+                });
+            },
+            quickSwitcherLabel: 'Delete folder...',
+            subMenu: null,
+            type: 'item',
+            value: 'delete-folder',
+            disabled: codemodDisabled,
+        },
+        {
+            type: 'divider',
+            id: 'copy-folder-id-divider',
+        },
+        {
+            id: 'copy-folder-id',
+            keyHint: null,
+            label: `Copy ID`,
+            leftItem: null,
+            onClick: () => {
+                closeMenu();
+                navigator.clipboard
+                    .writeText(folderId)
+                    .then(() => {
+                    (0, NotificationCenter_1.showNotification)('Copied to clipboard', 1000);
+                })
+                    .catch((err) => {
+                    (0, NotificationCenter_1.showNotification)(`Could not copy to clipboard: ${err.message}`, 1000);
+                });
+            },
+            quickSwitcherLabel: 'Copy folder ID',
+            subMenu: null,
+            type: 'item',
+            value: 'copy-folder-id',
+            disabled: false,
+        },
+    ].filter(no_react_1.NoReactInternals.truthy);
+};
+exports.getFolderMenuItems = getFolderMenuItems;

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

@@ -0,0 +1,6 @@
+export declare const pickFilesToImport: () => Promise<File[]>;
+export declare const importAssets: ({ compositionFile, compositionId, files, }: {
+    compositionFile: string;
+    compositionId: string;
+    files: File[];
+}) => Promise<void>;

package/dist/components/import-assets.js

@@ -0,0 +1,157 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.importAssets = exports.pickFilesToImport = void 0;
+const get_static_files_1 = require("../api/get-static-files");
+const write_static_file_1 = require("../api/write-static-file");
+const detect_file_type_1 = require("../helpers/detect-file-type");
+const call_api_1 = require("./call-api");
+const NotificationCenter_1 = require("./Notifications/NotificationCenter");
+const getAssetElement = ({ fileType, src, }) => {
+    if (fileType.type === 'png' ||
+        fileType.type === 'jpeg' ||
+        fileType.type === 'webp' ||
+        fileType.type === 'bmp') {
+        return {
+            type: 'asset',
+            assetType: 'image',
+            src,
+            dimensions: fileType.dimensions,
+        };
+    }
+    if (fileType.type === 'gif') {
+        return {
+            type: 'asset',
+            assetType: 'gif',
+            src,
+            dimensions: fileType.dimensions,
+        };
+    }
+    if (fileType.type === 'riff' ||
+        fileType.type === 'webm' ||
+        fileType.type === 'iso-base-media' ||
+        fileType.type === 'transport-stream') {
+        return {
+            type: 'asset',
+            assetType: 'video',
+            src,
+            dimensions: null,
+        };
+    }
+    return null;
+};
+const getAssetLabel = (element) => {
+    if (element.type !== 'asset') {
+        throw new Error('Expected asset element');
+    }
+    if (element.assetType === 'image') {
+        return '<Img>';
+    }
+    if (element.assetType === 'video') {
+        return '<Video>';
+    }
+    return '<Gif>';
+};
+const pickFilesToImport = () => {
+    return new Promise((resolve) => {
+        const input = document.createElement('input');
+        input.type = 'file';
+        input.multiple = true;
+        input.style.display = 'none';
+        let didResolve = false;
+        const resolveOnce = (files) => {
+            if (didResolve) {
+                return;
+            }
+            didResolve = true;
+            input.removeEventListener('change', onChange);
+            input.removeEventListener('cancel', onCancel);
+            input.remove();
+            resolve(files);
+        };
+        const onChange = () => {
+            var _a;
+            return resolveOnce(Array.from((_a = input.files) !== null && _a !== void 0 ? _a : []));
+        };
+        const onCancel = () => resolveOnce([]);
+        input.addEventListener('change', onChange);
+        input.addEventListener('cancel', onCancel);
+        document.body.appendChild(input);
+        input.click();
+    });
+};
+exports.pickFilesToImport = pickFilesToImport;
+const importAssets = async ({ compositionFile, compositionId, files, }) => {
+    if (files.length === 0) {
+        return;
+    }
+    const staticFiles = (0, get_static_files_1.getStaticFiles)();
+    const differentExistingFile = files.find((file) => {
+        return staticFiles.some((staticFile) => staticFile.name === file.name && staticFile.sizeInBytes !== file.size);
+    });
+    if (differentExistingFile) {
+        (0, NotificationCenter_1.showNotification)(`File with name ${differentExistingFile.name} already exists and is different`, 4000);
+        return;
+    }
+    const insertedLabels = [];
+    const addedStaticFiles = [];
+    const unsupportedFiles = [];
+    const notifyAddedStaticFiles = () => {
+        if (addedStaticFiles.length === 1) {
+            (0, NotificationCenter_1.showNotification)(`Created ${addedStaticFiles[0]} in public folder`, 3000);
+        }
+        else if (addedStaticFiles.length > 1) {
+            (0, NotificationCenter_1.showNotification)(`Added ${addedStaticFiles.length} files to public folder`, 3000);
+        }
+        addedStaticFiles.length = 0;
+    };
+    try {
+        for (const file of files) {
+            const contents = await file.arrayBuffer();
+            const fileType = (0, detect_file_type_1.detectFileType)(new Uint8Array(contents));
+            const element = getAssetElement({
+                fileType,
+                src: file.name,
+            });
+            if (element === null) {
+                unsupportedFiles.push(file.name);
+                continue;
+            }
+            const alreadyExists = staticFiles.some((staticFile) => staticFile.name === file.name && staticFile.sizeInBytes === file.size);
+            if (!alreadyExists) {
+                await (0, write_static_file_1.writeStaticFile)({
+                    contents,
+                    filePath: file.name,
+                });
+                addedStaticFiles.push(file.name);
+            }
+            const result = await (0, call_api_1.callApi)('/api/insert-jsx-element', {
+                compositionFile,
+                compositionId,
+                element,
+            });
+            if (!result.success) {
+                notifyAddedStaticFiles();
+                (0, NotificationCenter_1.showNotification)(result.reason, 4000);
+                return;
+            }
+            insertedLabels.push(getAssetLabel(element));
+        }
+        notifyAddedStaticFiles();
+        if (insertedLabels.length === 1) {
+            (0, NotificationCenter_1.showNotification)(`Added ${insertedLabels[0]} to source file`, 2000);
+        }
+        else if (insertedLabels.length > 1) {
+            (0, NotificationCenter_1.showNotification)(`Added ${insertedLabels.length} assets to source file`, 2000);
+        }
+        if (unsupportedFiles.length === 1) {
+            (0, NotificationCenter_1.showNotification)(`Cannot add ${unsupportedFiles[0]}: Unsupported file type`, 3000);
+        }
+        else if (unsupportedFiles.length > 1) {
+            (0, NotificationCenter_1.showNotification)(`Skipped ${unsupportedFiles.length} unsupported files`, 3000);
+        }
+    }
+    catch (error) {
+        (0, NotificationCenter_1.showNotification)(`Could not add asset: ${error instanceof Error ? error.message : String(error)}`, 4000);
+    }
+};
+exports.importAssets = importAssets;