@remotion/studio-server 4.0.472 → 4.0.473

package/dist/codemods/update-keyframes/update-keyframes.js

@@ -141,6 +141,92 @@ const createClampOptionsExpression = () => {
         b.objectProperty(b.identifier('extrapolateRight'), b.stringLiteral('clamp')),
     ]);
 };
+const createEmptyOptionsExpression = () => b.objectExpression([]);
+const findObjectOptionProperty = (options, propertyName) => {
+    const propIndex = options.properties.findIndex((prop) => prop.type === 'ObjectProperty' &&
+        !prop.computed &&
+        ((prop.key.type === 'Identifier' && prop.key.name === propertyName) ||
+            (prop.key.type === 'StringLiteral' && prop.key.value === propertyName)));
+    return {
+        propIndex,
+        prop: propIndex === -1
+            ? undefined
+            : options.properties[propIndex],
+    };
+};
+const setOptionsProperty = ({ options, propertyName, value, }) => {
+    const { propIndex, prop } = findObjectOptionProperty(options, propertyName);
+    if (value === null) {
+        if (propIndex !== -1) {
+            options.properties.splice(propIndex, 1);
+        }
+        return;
+    }
+    if (prop) {
+        prop.value = value;
+        return;
+    }
+    options.properties.push(b.objectProperty(b.identifier(propertyName), value));
+};
+const validatePosterize = (posterize) => {
+    if (posterize === undefined) {
+        return;
+    }
+    if (!Number.isFinite(posterize) || posterize <= 0) {
+        throw new Error('Cannot update keyframe settings: posterize must be > 0');
+    }
+};
+const updateKeyframeSettings = ({ expression, clamping, posterize, }) => {
+    validatePosterize(posterize);
+    const existing = getInterpolationExpression(expression);
+    if (!existing) {
+        throw new Error('Cannot update keyframe settings on non-keyframed value');
+    }
+    const calleeName = existing.callee.type === 'Identifier' ? existing.callee.name : null;
+    const isColorInterpolation = calleeName === 'interpolateColors';
+    const extraArgs = [...existing.extraArgs];
+    const existingOptions = extraArgs[0];
+    if (existingOptions && existingOptions.type !== 'ObjectExpression') {
+        throw new Error('Cannot update keyframe settings: options must be inline');
+    }
+    const options = (existingOptions === null || existingOptions === void 0 ? void 0 : existingOptions.type) === 'ObjectExpression'
+        ? existingOptions
+        : createEmptyOptionsExpression();
+    if (isColorInterpolation) {
+        setOptionsProperty({ options, propertyName: 'extrapolateLeft', value: null });
+        setOptionsProperty({
+            options,
+            propertyName: 'extrapolateRight',
+            value: null,
+        });
+    }
+    else if (clamping) {
+        setOptionsProperty({
+            options,
+            propertyName: 'extrapolateLeft',
+            value: b.stringLiteral(clamping.left),
+        });
+        setOptionsProperty({
+            options,
+            propertyName: 'extrapolateRight',
+            value: b.stringLiteral(clamping.right),
+        });
+    }
+    setOptionsProperty({
+        options,
+        propertyName: 'posterize',
+        value: posterize === undefined ? null : b.numericLiteral(posterize),
+    });
+    const nextExtraArgs = options.properties.length === 0
+        ? extraArgs.slice(1)
+        : [options, ...extraArgs.slice(1)];
+    return createInterpolateExpression({
+        callee: existing.callee,
+        input: existing.input,
+        extraArgs: nextExtraArgs,
+        keyframes: existing.keyframes,
+    });
+};
 const createInterpolateExpression = ({ callee, input, extraArgs, keyframes, }) => {
     const sortedKeyframes = [...keyframes].sort((first, second) => first.frame - second.frame);
     return b.callExpression(callee, [
@@ -239,6 +325,56 @@ const removeKeyframe = ({ expression, frame, }) => {
         keyframes: nextKeyframes,
     });
 };
+const moveKeyframes = ({ expression, moves, }) => {
+    var _a;
+    const existing = getInterpolationExpression(expression);
+    if (!existing) {
+        throw new Error('Cannot move keyframe in non-interpolated expression');
+    }
+    const moveMap = new Map();
+    for (const move of moves) {
+        if (move.fromFrame === move.toFrame) {
+            continue;
+        }
+        if (moveMap.has(move.fromFrame)) {
+            throw new Error(`Cannot move keyframe at frame ${move.fromFrame} twice`);
+        }
+        moveMap.set(move.fromFrame, move.toFrame);
+    }
+    if (moveMap.size === 0) {
+        return expression;
+    }
+    const frames = new Set(existing.keyframes.map((keyframe) => keyframe.frame));
+    for (const fromFrame of moveMap.keys()) {
+        if (!frames.has(fromFrame)) {
+            throw new Error(`Cannot move keyframe at frame ${fromFrame}: not found`);
+        }
+    }
+    const movedFromFrames = new Set(moveMap.keys());
+    const nextFrames = new Set();
+    for (const keyframe of existing.keyframes) {
+        const nextFrame = (_a = moveMap.get(keyframe.frame)) !== null && _a !== void 0 ? _a : keyframe.frame;
+        if (nextFrames.has(nextFrame)) {
+            throw new Error(`Cannot move keyframe to frame ${nextFrame}: frame already exists`);
+        }
+        if (!movedFromFrames.has(keyframe.frame) && moveMap.has(nextFrame)) {
+            throw new Error(`Cannot move keyframe to frame ${nextFrame}: frame already exists`);
+        }
+        nextFrames.add(nextFrame);
+    }
+    return createInterpolateExpression({
+        callee: existing.callee,
+        input: existing.input,
+        extraArgs: existing.extraArgs,
+        keyframes: existing.keyframes.map((keyframe) => {
+            var _a;
+            return ({
+                ...keyframe,
+                frame: (_a = moveMap.get(keyframe.frame)) !== null && _a !== void 0 ? _a : keyframe.frame,
+            });
+        }),
+    });
+};
 const applyKeyframeOperation = ({ expression, key, operation, schema, }) => {
     if (operation.type === 'add') {
         return addKeyframe({
@@ -249,6 +385,22 @@ const applyKeyframeOperation = ({ expression, key, operation, schema, }) => {
             schema,
         });
     }
+    if (operation.type === 'settings') {
+        return {
+            expression: updateKeyframeSettings({
+                expression,
+                clamping: operation.clamping,
+                posterize: operation.posterize,
+            }),
+            introduced: noIntroducedIdentifiers,
+        };
+    }
+    if (operation.type === 'move') {
+        return {
+            expression: moveKeyframes({ expression, moves: operation.moves }),
+            introduced: noIntroducedIdentifiers,
+        };
+    }
     return {
         expression: removeKeyframe({ expression, frame: operation.frame }),
         introduced: noIntroducedIdentifiers,

package/dist/helpers/resolve-composition-component.js

@@ -709,6 +709,14 @@ const ensureVideoImport = (ast) => {
         label: '<Video>',
     });
 };
+const ensureAudioImport = (ast) => {
+    return ensureOfficialNamedImport({
+        ast,
+        importedName: 'Audio',
+        sourcePath: '@remotion/media',
+        label: '<Audio>',
+    });
+};
 const ensureGifImport = (ast) => {
     return ensureOfficialNamedImport({
         ast,
@@ -941,11 +949,22 @@ const createInsertableJsxElement = ({ ast, element, }) => {
     }
     if (element.type === 'asset') {
         const staticFileLocalName = ensureStaticFileImport(ast);
-        const localName = element.assetType === 'image'
-            ? ensureImgImport(ast)
-            : element.assetType === 'video'
-                ? ensureVideoImport(ast)
-                : ensureGifImport(ast);
+        let localName;
+        if (element.assetType === 'image') {
+            localName = ensureImgImport(ast);
+        }
+        else if (element.assetType === 'video') {
+            localName = ensureVideoImport(ast);
+        }
+        else if (element.assetType === 'gif') {
+            localName = ensureGifImport(ast);
+        }
+        else if (element.assetType === 'audio') {
+            localName = ensureAudioImport(ast);
+        }
+        else {
+            throw new Error('Unsupported asset type');
+        }
         return createAssetElement({
             localName,
             staticFileLocalName,

package/dist/preview-server/api-routes.js

@@ -13,9 +13,12 @@ const delete_effect_1 = require("./routes/delete-effect");
 const delete_jsx_node_1 = require("./routes/delete-jsx-node");
 const delete_keyframes_1 = require("./routes/delete-keyframes");
 const delete_static_file_1 = require("./routes/delete-static-file");
+const download_remote_asset_1 = require("./routes/download-remote-asset");
 const duplicate_jsx_node_1 = require("./routes/duplicate-jsx-node");
 const insert_jsx_element_1 = require("./routes/insert-jsx-element");
 const install_dependency_1 = require("./routes/install-dependency");
+const log_studio_error_1 = require("./routes/log-studio-error");
+const move_keyframes_1 = require("./routes/move-keyframes");
 const open_in_editor_1 = require("./routes/open-in-editor");
 const open_in_file_explorer_1 = require("./routes/open-in-file-explorer");
 const paste_effects_1 = require("./routes/paste-effects");
@@ -23,7 +26,9 @@ const project_info_1 = require("./routes/project-info");
 const redo_1 = require("./routes/redo");
 const register_client_render_1 = require("./routes/register-client-render");
 const remove_render_1 = require("./routes/remove-render");
+const rename_static_file_1 = require("./routes/rename-static-file");
 const reorder_effect_1 = require("./routes/reorder-effect");
+const reorder_sequence_1 = require("./routes/reorder-sequence");
 const restart_studio_1 = require("./routes/restart-studio");
 const save_effect_props_1 = require("./routes/save-effect-props");
 const save_sequence_props_1 = require("./routes/save-sequence-props");
@@ -37,6 +42,8 @@ const unsubscribe_from_file_existence_1 = require("./routes/unsubscribe-from-fil
 const unsubscribe_from_sequence_props_1 = require("./routes/unsubscribe-from-sequence-props");
 const update_available_1 = require("./routes/update-available");
 const update_default_props_1 = require("./routes/update-default-props");
+const update_effect_keyframe_settings_1 = require("./routes/update-effect-keyframe-settings");
+const update_sequence_keyframe_settings_1 = require("./routes/update-sequence-keyframe-settings");
 exports.allApiRoutes = {
     '/api/composition-component-info': composition_component_info_1.compositionComponentInfoHandler,
     '/api/cancel': cancel_render_1.handleCancelRender,
@@ -59,9 +66,13 @@ exports.allApiRoutes = {
     '/api/save-effect-props': save_effect_props_1.saveEffectPropsHandler,
     '/api/add-effect': add_effect_1.addEffectHandler,
     '/api/reorder-effect': reorder_effect_1.reorderEffectHandler,
+    '/api/reorder-sequence': reorder_sequence_1.reorderSequenceHandler,
     '/api/delete-keyframes': delete_keyframes_1.deleteKeyframesHandler,
+    '/api/move-keyframes': move_keyframes_1.moveKeyframesHandler,
     '/api/add-sequence-keyframe': add_sequence_keyframe_1.addSequenceKeyframeHandler,
     '/api/add-effect-keyframe': add_effect_keyframe_1.addEffectKeyframeHandler,
+    '/api/update-sequence-keyframe-settings': update_sequence_keyframe_settings_1.updateSequenceKeyframeSettingsHandler,
+    '/api/update-effect-keyframe-settings': update_effect_keyframe_settings_1.updateEffectKeyframeSettingsHandler,
     '/api/delete-effect': delete_effect_1.deleteEffectHandler,
     '/api/paste-effects': paste_effects_1.pasteEffectsHandler,
     '/api/delete-jsx-node': delete_jsx_node_1.deleteJsxNodeHandler,
@@ -69,9 +80,12 @@ exports.allApiRoutes = {
     '/api/update-available': update_available_1.handleUpdate,
     '/api/project-info': project_info_1.projectInfoHandler,
     '/api/delete-static-file': delete_static_file_1.deleteStaticFileHandler,
+    '/api/rename-static-file': rename_static_file_1.renameStaticFileHandler,
     '/api/restart-studio': restart_studio_1.handleRestartStudio,
     '/api/install-package': install_dependency_1.handleInstallPackage,
     '/api/insert-jsx-element': insert_jsx_element_1.insertJsxElementHandler,
+    '/api/download-remote-asset': download_remote_asset_1.downloadRemoteAssetHandler,
     '/api/undo': undo_1.undoHandler,
     '/api/redo': redo_1.redoHandler,
+    '/api/log-studio-error': log_studio_error_1.logStudioErrorHandler,
 };

package/dist/preview-server/routes/can-update-effect-props.js

@@ -88,7 +88,7 @@ const resolveEffectImport = ({ ast, call, fallbackCallee, }) => {
     }
     return { callee: fallbackCallee, importPath: null };
 };
-const getPropsFromObjectExpression = ({ objExpr, keys, }) => {
+const getPropsFromObjectExpression = ({ ast, objExpr, keys, }) => {
     const out = {};
     for (const key of keys) {
         const prop = objExpr.properties.find((p) => p.type === 'ObjectProperty' &&
@@ -101,7 +101,7 @@ const getPropsFromObjectExpression = ({ objExpr, keys, }) => {
         }
         const valueExpr = prop.value;
         if (!(0, can_update_sequence_props_1.isStaticValue)(valueExpr)) {
-            out[key] = (0, can_update_sequence_props_1.getComputedStatus)(valueExpr);
+            out[key] = (0, can_update_sequence_props_1.getComputedStatus)(valueExpr, ast);
             continue;
         }
         out[key] = {
@@ -164,6 +164,7 @@ const computeEffectPropStatus = ({ ast, jsx, effectIndex, keys, }) => {
         };
     }
     const resolvedProps = getPropsFromObjectExpression({
+        ast,
         objExpr: firstArg,
         keys,
     });

package/dist/preview-server/routes/can-update-sequence-props.d.ts

@@ -3,7 +3,7 @@ import type { SubscribeToSequencePropsResponse } from '@remotion/studio-shared';
 import type { CanUpdateSequencePropsResponseTrue, CanUpdateSequencePropStatus, SequenceNodePath } from 'remotion';
 export declare const isStaticValue: (node: Expression) => boolean;
 export declare const extractStaticValue: (node: Expression) => unknown;
-export declare const getComputedStatus: (node: Expression) => CanUpdateSequencePropStatus;
+export declare const getComputedStatus: (node: Expression, ast: File) => CanUpdateSequencePropStatus;
 export declare const findJsxElementAtNodePath: (ast: File, nodePath: SequenceNodePath) => JSXOpeningElement | null;
 export declare const findNodePathForJsxElement: (ast: File, target: JSXOpeningElement) => SequenceNodePath | null;
 export declare const lineColumnToNodePath: (ast: File, targetLine: number) => SequenceNodePath | null;

package/dist/preview-server/routes/can-update-sequence-props.js

@@ -305,9 +305,9 @@ const getInterpolationMetadata = (interpolationFunction, callExpression, keyfram
         posterize,
     };
 };
-const getInterpolationKeyframes = (node) => {
+const getInterpolationKeyframes = (node, ast) => {
     if (node.type === 'TSAsExpression') {
-        return getInterpolationKeyframes(node.expression);
+        return getInterpolationKeyframes(node.expression, ast);
     }
     if (node.type !== 'CallExpression') {
         return undefined;
@@ -318,9 +318,13 @@ const getInterpolationKeyframes = (node) => {
         return undefined;
     }
     const interpolationFunction = callExpression.callee.name;
+    const frameArg = callExpression.arguments[0];
     const inputArg = callExpression.arguments[1];
     const outputArg = callExpression.arguments[2];
-    if (!inputArg ||
+    if (!frameArg ||
+        frameArg.type === 'SpreadElement' ||
+        !isCurrentFrameIdentifier(frameArg, ast) ||
+        !inputArg ||
         !outputArg ||
         inputArg.type !== 'ArrayExpression' ||
         outputArg.type !== 'ArrayExpression') {
@@ -363,8 +367,40 @@ const getInterpolationKeyframes = (node) => {
         posterize: metadata.posterize,
     };
 };
-const getComputedStatus = (node) => {
-    const interpolation = getInterpolationKeyframes(node);
+const isUseCurrentFrameCall = (node) => {
+    return (node.type === 'CallExpression' &&
+        node.callee.type === 'Identifier' &&
+        node.callee.name === 'useCurrentFrame' &&
+        node.arguments.length === 0);
+};
+const isCurrentFrameIdentifier = (node, ast) => {
+    if (node.type === 'TSAsExpression') {
+        return isCurrentFrameIdentifier(node.expression, ast);
+    }
+    if (node.type !== 'Identifier') {
+        return false;
+    }
+    let hasUseCurrentFrameDeclaration = false;
+    let hasOtherDeclaration = false;
+    recast.types.visit(ast, {
+        visitVariableDeclarator(p) {
+            const { id, init } = p.node;
+            if (id.type !== 'Identifier' || id.name !== node.name) {
+                return this.traverse(p);
+            }
+            if (init && isUseCurrentFrameCall(init)) {
+                hasUseCurrentFrameDeclaration = true;
+            }
+            else {
+                hasOtherDeclaration = true;
+            }
+            return false;
+        },
+    });
+    return hasUseCurrentFrameDeclaration && !hasOtherDeclaration;
+};
+const getComputedStatus = (node, ast) => {
+    const interpolation = getInterpolationKeyframes(node, ast);
     if (!interpolation) {
         return computedStatus();
     }
@@ -379,7 +415,7 @@ const getComputedStatus = (node) => {
     };
 };
 exports.getComputedStatus = getComputedStatus;
-const getPropsStatus = (jsxElement) => {
+const getPropsStatus = (jsxElement, ast) => {
     const props = {};
     for (const attr of jsxElement.attributes) {
         if (attr.type === 'JSXSpreadAttribute') {
@@ -408,7 +444,7 @@ const getPropsStatus = (jsxElement) => {
                 continue;
             }
             if (!(0, exports.isStaticValue)(expression)) {
-                props[name] = (0, exports.getComputedStatus)(expression);
+                props[name] = (0, exports.getComputedStatus)(expression, ast);
                 continue;
             }
             props[name] = staticStatus((0, exports.extractStaticValue)(expression));
@@ -488,7 +524,7 @@ const validateStyleValue = (childKey, value) => {
     }
     return true;
 };
-const getNestedPropStatus = (jsxElement, parentKey, childKey) => {
+const getNestedPropStatus = (jsxElement, ast, parentKey, childKey) => {
     const attr = jsxElement.attributes.find((a) => a.type !== 'JSXSpreadAttribute' &&
         a.name.type !== 'JSXNamespacedName' &&
         a.name.name === parentKey);
@@ -515,7 +551,7 @@ const getNestedPropStatus = (jsxElement, parentKey, childKey) => {
     }
     const propValue = prop.value;
     if (!(0, exports.isStaticValue)(propValue)) {
-        return (0, exports.getComputedStatus)(propValue);
+        return (0, exports.getComputedStatus)(propValue, ast);
     }
     const codeValue = (0, exports.extractStaticValue)(propValue);
     if (!validateStyleValue(childKey, codeValue)) {
@@ -531,13 +567,13 @@ const computeEffectsForJsx = ({ ast, jsxElement, effects, }) => {
         keys: effect,
     }));
 };
-const computeSequenceOnlyPropsRecord = ({ jsxElement, keys, }) => {
-    const allProps = getPropsStatus(jsxElement);
+const computeSequenceOnlyPropsRecord = ({ jsxElement, ast, keys, }) => {
+    const allProps = getPropsStatus(jsxElement, ast);
     const filteredProps = {};
     for (const key of keys) {
         const dotIndex = key.indexOf('.');
         if (dotIndex !== -1) {
-            filteredProps[key] = getNestedPropStatus(jsxElement, key.slice(0, dotIndex), key.slice(dotIndex + 1));
+            filteredProps[key] = getNestedPropStatus(jsxElement, ast, key.slice(0, dotIndex), key.slice(dotIndex + 1));
         }
         else if (key in allProps) {
             filteredProps[key] = allProps[key];
@@ -554,7 +590,7 @@ const computeSequencePropsStatusFromContent = ({ fileContents, nodePath, keys, e
     if (!jsxElement) {
         throw new jsx_element_not_found_at_location_error_1.JsxElementNotFoundAtLocationError();
     }
-    const filteredProps = computeSequenceOnlyPropsRecord({ jsxElement, keys });
+    const filteredProps = computeSequenceOnlyPropsRecord({ jsxElement, ast, keys });
     const effectsStatuses = computeEffectsForJsx({ ast, jsxElement, effects });
     return {
         canUpdate: true,

package/dist/preview-server/routes/download-remote-asset.d.ts

@@ -0,0 +1,7 @@
+import { type DownloadRemoteAssetRequest, type DownloadRemoteAssetResponse, type ImageFileType } from '@remotion/studio-shared';
+import type { ApiHandler } from '../api-types';
+export declare const getRemoteAssetFilename: ({ fileType, url, }: {
+    fileType: ImageFileType;
+    url: URL;
+}) => string;
+export declare const downloadRemoteAssetHandler: ApiHandler<DownloadRemoteAssetRequest, DownloadRemoteAssetResponse>;