@remotion/studio 4.0.473 → 4.0.474

package/dist/components/AssetSelectorItem.js

@@ -39,6 +39,7 @@ const studio_shared_1 = require("@remotion/studio-shared");
 const react_1 = require("react");
 const remotion_1 = require("remotion");
 const no_react_1 = require("remotion/no-react");
+const delete_static_file_1 = require("../api/delete-static-file");
 const client_id_1 = require("../helpers/client-id");
 const colors_1 = require("../helpers/colors");
 const copy_text_1 = require("../helpers/copy-text");
@@ -51,10 +52,12 @@ const file_1 = require("../icons/file");
 const folder_1 = require("../icons/folder");
 const modals_1 = require("../state/modals");
 const sidebar_1 = require("../state/sidebar");
+const ConfirmationDialog_1 = require("./ConfirmationDialog");
 const ContextMenu_1 = require("./ContextMenu");
 const import_assets_1 = require("./import-assets");
 const InlineAction_1 = require("./InlineAction");
 const layout_1 = require("./layout");
+const styles_1 = require("./Menu/styles");
 const NotificationCenter_1 = require("./Notifications/NotificationCenter");
 const actions_1 = require("./RenderQueue/actions");
 const ASSET_ITEM_HEIGHT = 32;
@@ -167,6 +170,7 @@ const AssetSelectorItem = ({ item, tabIndex, level, parentFolder, readOnlyStudio
     const [isDragging, setIsDragging] = (0, react_1.useState)(false);
     const { setSidebarCollapsedState } = (0, react_1.useContext)(sidebar_1.SidebarContext);
     const { setSelectedModal } = (0, react_1.useContext)(modals_1.ModalsContext);
+    const confirm = (0, ConfirmationDialog_1.useConfirmationDialog)();
     const connectionStatus = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx)
         .previewServerState.type;
     const onPointerEnter = (0, react_1.useCallback)(() => {
@@ -279,6 +283,30 @@ const AssetSelectorItem = ({ item, tabIndex, level, parentFolder, readOnlyStudio
         });
     }, [relativePath]);
     const serverActionDisabled = readOnlyStudio || connectionStatus !== 'connected';
+    const deleteAsset = (0, react_1.useCallback)(() => {
+        confirm({
+            title: 'Delete asset',
+            message: (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: ["Do you want to delete the asset", ' ', jsx_runtime_1.jsx("code", { style: styles_1.inlineCodeSnippet, children: relativePath }),
+                    " from your public folder?"] })),
+            confirmLabel: 'Delete',
+        })
+            .then((confirmed) => {
+            if (!confirmed) {
+                return;
+            }
+            const notification = (0, NotificationCenter_1.showNotification)(`Deleting ${relativePath}...`, null);
+            (0, delete_static_file_1.deleteStaticFile)(relativePath)
+                .then(() => {
+                notification.replaceContent(`Deleted ${relativePath}`, 2000);
+            })
+                .catch((err) => {
+                notification.replaceContent(`Could not delete ${relativePath}: ${err.message}`, 3000);
+            });
+        })
+            .catch((err) => {
+            (0, NotificationCenter_1.showNotification)(`Could not delete ${relativePath}: ${err.message}`, 3000);
+        });
+    }, [confirm, relativePath]);
     const contextMenu = (0, react_1.useMemo)(() => {
         return [
             {
@@ -341,12 +369,7 @@ const AssetSelectorItem = ({ item, tabIndex, level, parentFolder, readOnlyStudio
                 keyHint: null,
                 label: 'Delete...',
                 leftItem: null,
-                onClick: () => {
-                    setSelectedModal({
-                        type: 'delete-static-file',
-                        relativePath,
-                    });
-                },
+                onClick: deleteAsset,
                 quickSwitcherLabel: 'Delete asset...',
                 subMenu: null,
                 type: 'item',
@@ -358,6 +381,7 @@ const AssetSelectorItem = ({ item, tabIndex, level, parentFolder, readOnlyStudio
         copyFileName,
         copyStaticFilePath,
         openAssetInExplorer,
+        deleteAsset,
         relativePath,
         serverActionDisabled,
         setSelectedModal,

package/dist/components/Canvas.js

@@ -51,9 +51,21 @@ const isAssetDragEvent = (event) => {
     var _b;
     return Array.from((_b = (_a = event.dataTransfer) === null || _a === void 0 ? void 0 : _a.types) !== null && _b !== void 0 ? _b : []).includes(studio_shared_1.ASSET_DRAG_MIME_TYPE);
 };
+const isComponentDragEvent = (event) => {
+    var _a;
+    var _b;
+    return Array.from((_b = (_a = event.dataTransfer) === null || _a === void 0 ? void 0 : _a.types) !== null && _b !== void 0 ? _b : []).includes(studio_shared_1.COMPONENT_DRAG_MIME_TYPE);
+};
+const isSfxDragEvent = (event) => {
+    var _a;
+    var _b;
+    return Array.from((_b = (_a = event.dataTransfer) === null || _a === void 0 ? void 0 : _a.types) !== null && _b !== void 0 ? _b : []).includes(studio_shared_1.SFX_DRAG_MIME_TYPE);
+};
 const isRemoteAssetDragEvent = (event) => {
     return (!isFileDragEvent(event) &&
         !isAssetDragEvent(event) &&
+        !isComponentDragEvent(event) &&
+        !isSfxDragEvent(event) &&
         (0, remote_asset_drag_1.hasRemoteAssetDragData)(event.dataTransfer));
 };
 const getAssetDragPath = (event) => {
@@ -65,6 +77,41 @@ const getAssetDragPath = (event) => {
     }
     return (_c = (_b = (0, studio_shared_1.parseAssetDragData)(value)) === null || _b === void 0 ? void 0 : _b.assetPath) !== null && _c !== void 0 ? _c : null;
 };
+const getComponentDragData = (event) => {
+    var _a;
+    for (const type of [
+        studio_shared_1.COMPONENT_DRAG_MIME_TYPE,
+        'application/json',
+        'text/plain',
+    ]) {
+        const value = (_a = event.dataTransfer) === null || _a === void 0 ? void 0 : _a.getData(type);
+        if (!value) {
+            continue;
+        }
+        const parsed = (0, studio_shared_1.parseComponentDragData)(value);
+        if (parsed) {
+            return parsed;
+        }
+    }
+    return null;
+};
+const getSfxDragUrl = (event) => {
+    const { dataTransfer } = event;
+    if (!dataTransfer) {
+        return null;
+    }
+    for (const type of [studio_shared_1.SFX_DRAG_MIME_TYPE, 'application/json', 'text/plain']) {
+        const value = dataTransfer.getData(type);
+        if (!value) {
+            continue;
+        }
+        const parsed = (0, studio_shared_1.parseSfxDragData)(value);
+        if (parsed) {
+            return parsed.sfx.url;
+        }
+    }
+    return null;
+};
 const isDragEventInsideCanvas = (event) => {
     const { current } = canvas_ref_1.canvasRef;
     if (!current) {
@@ -490,6 +537,8 @@ const Canvas = ({ canvasContent, size }) => {
         if (!canDropAssets ||
             (!isFileDragEvent(event) &&
                 !isAssetDragEvent(event) &&
+                !isComponentDragEvent(event) &&
+                !isSfxDragEvent(event) &&
                 !isRemoteAssetDragEvent(event)) ||
             !isDragEventInsideCanvas(event)) {
             return;
@@ -507,6 +556,8 @@ const Canvas = ({ canvasContent, size }) => {
             currentCompositionId === null ||
             (!isFileDragEvent(event) &&
                 !isAssetDragEvent(event) &&
+                !isComponentDragEvent(event) &&
+                !isSfxDragEvent(event) &&
                 !isRemoteAssetDragEvent(event)) ||
             !isDragEventInsideCanvas(event)) {
             return;
@@ -537,7 +588,27 @@ const Canvas = ({ canvasContent, size }) => {
                     compositionId: currentCompositionId,
                 });
             }
+            else if (isSfxDragEvent(event)) {
+                const url = getSfxDragUrl(event);
+                if (url === null) {
+                    return;
+                }
+                await (0, import_assets_1.insertRemoteAudio)({
+                    url,
+                    compositionFile,
+                    compositionId: currentCompositionId,
+                });
+            }
             else {
+                const componentDragData = getComponentDragData(event);
+                if (componentDragData !== null) {
+                    await (0, import_assets_1.insertComponent)({
+                        component: componentDragData.component,
+                        compositionFile,
+                        compositionId: currentCompositionId,
+                    });
+                    return;
+                }
                 const url = (0, remote_asset_drag_1.getRemoteAssetUrlFromDataTransfer)(event.dataTransfer);
                 if (url === null) {
                     return;

package/dist/components/Modals.js

@@ -13,7 +13,6 @@ const ConfirmationDialog_1 = require("./ConfirmationDialog");
 const InstallPackage_1 = require("./InstallPackage");
 const DeleteComposition_1 = require("./NewComposition/DeleteComposition");
 const DeleteFolder_1 = require("./NewComposition/DeleteFolder");
-const DeleteStaticFile_1 = require("./NewComposition/DeleteStaticFile");
 const DuplicateComposition_1 = require("./NewComposition/DuplicateComposition");
 const RenameComposition_1 = require("./NewComposition/RenameComposition");
 const RenameFolder_1 = require("./NewComposition/RenameFolder");
@@ -30,7 +29,7 @@ const Modals = ({ readOnlyStudio }) => {
     const { selectedModal: modalContextType } = (0, react_1.useContext)(modals_1.ModalsContext);
     const canRender = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx).previewServerState.type ===
         'connected';
-    return (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [modalContextType && modalContextType.type === 'duplicate-comp' && (jsx_runtime_1.jsx(DuplicateComposition_1.DuplicateComposition, { compositionType: modalContextType.compositionType, compositionId: modalContextType.compositionId })), modalContextType && modalContextType.type === 'delete-comp' && (jsx_runtime_1.jsx(DeleteComposition_1.DeleteComposition, { compositionId: modalContextType.compositionId })), modalContextType && modalContextType.type === 'rename-comp' && (jsx_runtime_1.jsx(RenameComposition_1.RenameComposition, { compositionId: modalContextType.compositionId })), modalContextType && modalContextType.type === 'delete-folder' && (jsx_runtime_1.jsx(DeleteFolder_1.DeleteFolder, { folderName: modalContextType.folderName, parentName: modalContextType.parentName, stack: modalContextType.stack })), modalContextType && modalContextType.type === 'rename-folder' && (jsx_runtime_1.jsx(RenameFolder_1.RenameFolder, { folderName: modalContextType.folderName, parentName: modalContextType.parentName, stack: modalContextType.stack })), modalContextType && modalContextType.type === 'delete-static-file' && (jsx_runtime_1.jsx(DeleteStaticFile_1.DeleteStaticFileModal, { relativePath: modalContextType.relativePath })), modalContextType && modalContextType.type === 'rename-static-file' && (jsx_runtime_1.jsx(RenameStaticFile_1.RenameStaticFileModal, { relativePath: modalContextType.relativePath })), modalContextType && modalContextType.type === 'input-props-override' && (jsx_runtime_1.jsx(OverrideInputProps_1.OverrideInputPropsModal, {})), modalContextType && modalContextType.type === 'keyframe-settings' && (jsx_runtime_1.jsx(KeyframeSettingsModal_1.KeyframeSettingsModal, { state: modalContextType })), modalContextType && modalContextType.type === 'web-render' && (jsx_runtime_1.jsx(WebRenderModal_1.WebRenderModalWithLoader, { ...modalContextType })), modalContextType &&
+    return (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [modalContextType && modalContextType.type === 'duplicate-comp' && (jsx_runtime_1.jsx(DuplicateComposition_1.DuplicateComposition, { compositionType: modalContextType.compositionType, compositionId: modalContextType.compositionId })), modalContextType && modalContextType.type === 'delete-comp' && (jsx_runtime_1.jsx(DeleteComposition_1.DeleteComposition, { compositionId: modalContextType.compositionId })), modalContextType && modalContextType.type === 'rename-comp' && (jsx_runtime_1.jsx(RenameComposition_1.RenameComposition, { compositionId: modalContextType.compositionId })), modalContextType && modalContextType.type === 'delete-folder' && (jsx_runtime_1.jsx(DeleteFolder_1.DeleteFolder, { folderName: modalContextType.folderName, parentName: modalContextType.parentName, stack: modalContextType.stack })), modalContextType && modalContextType.type === 'rename-folder' && (jsx_runtime_1.jsx(RenameFolder_1.RenameFolder, { folderName: modalContextType.folderName, parentName: modalContextType.parentName, stack: modalContextType.stack })), modalContextType && modalContextType.type === 'rename-static-file' && (jsx_runtime_1.jsx(RenameStaticFile_1.RenameStaticFileModal, { relativePath: modalContextType.relativePath })), modalContextType && modalContextType.type === 'input-props-override' && (jsx_runtime_1.jsx(OverrideInputProps_1.OverrideInputPropsModal, {})), modalContextType && modalContextType.type === 'keyframe-settings' && (jsx_runtime_1.jsx(KeyframeSettingsModal_1.KeyframeSettingsModal, { state: modalContextType })), modalContextType && modalContextType.type === 'web-render' && (jsx_runtime_1.jsx(WebRenderModal_1.WebRenderModalWithLoader, { ...modalContextType })), modalContextType &&
                 modalContextType.type === 'server-render' &&
                 (canRender || modalContextType.readOnlyStudio) ? (jsx_runtime_1.jsx(ServerRenderModal_1.RenderModalWithLoader, { readOnlyStudio: (_a = modalContextType.readOnlyStudio) !== null && _a !== void 0 ? _a : false, initialFrame: modalContextType.initialFrame, initialDarkMode: modalContextType.initialDarkMode, compositionId: modalContextType.compositionId, initialVideoImageFormat: modalContextType.initialVideoImageFormat, initialJpegQuality: modalContextType.initialJpegQuality, initialScale: modalContextType.initialScale, initialLogLevel: modalContextType.initialLogLevel, initialOffthreadVideoCacheSizeInBytes: modalContextType.initialOffthreadVideoCacheSizeInBytes, initialOffthreadVideoThreads: modalContextType.initialOffthreadVideoThreads, initialMediaCacheSizeInBytes: modalContextType.initialMediaCacheSizeInBytes, initialConcurrency: modalContextType.initialConcurrency, maxConcurrency: modalContextType.maxConcurrency, minConcurrency: modalContextType.minConcurrency, initialStillImageFormat: modalContextType.initialStillImageFormat, initialMuted: modalContextType.initialMuted, initialEnforceAudioTrack: modalContextType.initialEnforceAudioTrack, initialProResProfile: modalContextType.initialProResProfile, initialx264Preset: modalContextType.initialx264Preset, initialGopSize: modalContextType.initialGopSize, initialPixelFormat: modalContextType.initialPixelFormat, initialAudioBitrate: modalContextType.initialAudioBitrate, initialVideoBitrate: modalContextType.initialVideoBitrate, initialEveryNthFrame: modalContextType.initialEveryNthFrame, initialNumberOfGifLoops: modalContextType.initialNumberOfGifLoops, initialDelayRenderTimeout: modalContextType.initialDelayRenderTimeout, initialEnvVariables: modalContextType.initialEnvVariables, initialDisableWebSecurity: modalContextType.initialDisableWebSecurity, initialGl: modalContextType.initialOpenGlRenderer, initialHeadless: modalContextType.initialHeadless, initialIgnoreCertificateErrors: modalContextType.initialIgnoreCertificateErrors, initialEncodingBufferSize: modalContextType.initialEncodingBufferSize, initialEncodingMaxRate: modalContextType.initialEncodingMaxRate, initialUserAgent: modalContextType.initialUserAgent, initialColorSpace: modalContextType.initialColorSpace, initialMultiProcessOnLinux: modalContextType.initialMultiProcessOnLinux, initialRepro: modalContextType.initialRepro, initialBeep: modalContextType.initialBeep, initialForSeamlessAacConcatenation: modalContextType.initialForSeamlessAacConcatenation, defaultProps: modalContextType.defaultProps, inFrameMark: modalContextType.inFrameMark, outFrameMark: modalContextType.outFrameMark, defaultConfigurationAudioCodec: modalContextType.defaultConfigurationAudioCodec, defaultConfigurationVideoCodec: modalContextType.defaultConfigurationVideoCodec, renderTypeOfLastRender: modalContextType.renderTypeOfLastRender, defaultMetadata: modalContextType.defaulMetadata, initialHardwareAcceleration: modalContextType.initialHardwareAcceleration, initialSampleRate: modalContextType.initialSampleRate, initialChromeMode: modalContextType.initialChromeMode, renderDefaults: modalContextType.renderDefaults })) : null, modalContextType && modalContextType.type === 'render-progress' && (jsx_runtime_1.jsx(RenderStatusModal_1.RenderStatusModal, { jobId: modalContextType.jobId })), modalContextType && modalContextType.type === 'update' && (jsx_runtime_1.jsx(UpdateModal_1.UpdateModal, { info: modalContextType.info, knownBugs: modalContextType.knownBugs })), modalContextType && modalContextType.type === 'install-packages' && (jsx_runtime_1.jsx(InstallPackage_1.InstallPackageModal, { packageManager: modalContextType.packageManager })), modalContextType && modalContextType.type === 'quick-switcher' && (jsx_runtime_1.jsx(QuickSwitcher_1.default, { readOnlyStudio: readOnlyStudio, invocationTimestamp: modalContextType.invocationTimestamp, initialMode: modalContextType.mode })), modalContextType && modalContextType.type === 'confirmation-dialog' && (jsx_runtime_1.jsx(ConfirmationDialog_1.ConfirmationDialog, { state: modalContextType })), process.env.ASK_AI_ENABLED && jsx_runtime_1.jsx(AskAiModal_1.AskAiModal, {})] }));
 };

package/dist/components/NewComposition/InputDragger.d.ts

@@ -9,4 +9,5 @@ export declare const InputDragger: React.ForwardRefExoticComponent<InputHTMLAttr
     readonly formatter?: ((str: string | number) => string) | undefined;
     readonly rightAlign: boolean;
     readonly small?: boolean | undefined;
+    readonly snapToStep?: boolean | undefined;
 } & React.RefAttributes<HTMLButtonElement>>;

package/dist/components/NewComposition/InputDragger.js

@@ -46,7 +46,7 @@ const RemInput_1 = require("./RemInput");
 const isInt = (num) => {
     return num % 1 === 0;
 };
-const InputDraggerForwardRefFn = ({ onValueChange, onValueChangeEnd, min: _min, max: _max, step: _step, value, onTextChange, formatter = (q) => String(q), status, rightAlign, small, ...props }, ref) => {
+const InputDraggerForwardRefFn = ({ onValueChange, onValueChangeEnd, min: _min, max: _max, step: _step, value, onTextChange, formatter = (q) => String(q), status, rightAlign, small, snapToStep = true, ...props }, ref) => {
     const [inputFallback, setInputFallback] = (0, react_1.useState)(false);
     const [dragging, setDragging] = (0, react_1.useState)(false);
     const fallbackRef = (0, react_1.useRef)(null);
@@ -142,9 +142,9 @@ const InputDraggerForwardRefFn = ({ onValueChange, onValueChangeEnd, min: _min,
             }
             const diff = (0, remotion_1.interpolate)(xDistance, [-5, -4, 0, 4, 5], [-step, 0, 0, 0, step]);
             const newValue = Math.min(max, Math.max(min, Number(value) + diff));
-            const roundedToStep = roundToStep(newValue, step);
-            lastDragValue = roundedToStep;
-            onValueChange(roundedToStep);
+            const nextValue = snapToStep ? roundToStep(newValue, step) : newValue;
+            lastDragValue = nextValue;
+            onValueChange(nextValue);
         };
         window.addEventListener('mousemove', moveListener);
         window.addEventListener('pointerup', () => {
@@ -161,7 +161,7 @@ const InputDraggerForwardRefFn = ({ onValueChange, onValueChangeEnd, min: _min,
         }, {
             once: true,
         });
-    }, [_step, _min, _max, value, onValueChange, onValueChangeEnd]);
+    }, [_step, _min, _max, value, onValueChange, onValueChangeEnd, snapToStep]);
     (0, react_1.useEffect)(() => {
         var _a;
         if (inputFallback) {
@@ -169,6 +169,9 @@ const InputDraggerForwardRefFn = ({ onValueChange, onValueChangeEnd, min: _min,
         }
     }, [inputFallback]);
     const deriveStep = (0, react_1.useMemo)(() => {
+        if (!snapToStep) {
+            return 'any';
+        }
         if (_step !== undefined) {
             return _step;
         }
@@ -176,7 +179,7 @@ const InputDraggerForwardRefFn = ({ onValueChange, onValueChangeEnd, min: _min,
             return 1;
         }
         return 0.0001;
-    }, [_min, _step]);
+    }, [_min, _step, snapToStep]);
     if (inputFallback) {
         return (jsx_runtime_1.jsx(z_index_1.HigherZIndex, { onEscape: onEscape, onOutsideClick: noop_1.noop, children: jsx_runtime_1.jsx(RemInput_1.RemotionInput, { ref: fallbackRef, autoFocus: true, onKeyPress: onKeyPress, onBlur: onBlur, onChange: onInputChange, min: _min, max: _max, step: deriveStep, defaultValue: value, status: status, pattern: '[0-9]*[.]?[0-9]*', rightAlign: rightAlign, ...props, ...(small ? { style: { padding: '4px 6px', fontSize: 12 } } : {}) }) }));
     }

package/dist/components/SelectedOutlineOverlay.d.ts

@@ -7,13 +7,13 @@ type OutlinePoint = {
     readonly x: number;
     readonly y: number;
 };
-type UvCoordinate = readonly [number, number];
-type UvCoordinateFieldSchema = Extract<SequenceFieldSchema, {
+export type UvCoordinate = readonly [number, number];
+export type UvCoordinateFieldSchema = Extract<SequenceFieldSchema, {
     type: 'uv-coordinate';
 }>;
 type SelectedOutlineUvHandle = {
     readonly clientId: string;
-    readonly codeValue: CanUpdateSequencePropStatusStatic;
+    readonly propStatus: CanUpdateSequencePropStatusStatic;
     readonly effectIndex: number;
     readonly fieldDefault: UvCoordinate | undefined;
     readonly fieldKey: string;
@@ -29,7 +29,7 @@ type UvHandleConnectionLine = {
     readonly to: OutlinePoint;
 };
 type SelectedOutlineDragTarget = {
-    readonly codeValue: CanUpdateSequencePropStatusStatic | CanUpdateSequencePropStatusKeyframed;
+    readonly propStatus: CanUpdateSequencePropStatusStatic | CanUpdateSequencePropStatusKeyframed;
     readonly clientId: string;
     readonly fieldDefault: string | undefined;
     readonly keyframeDisplayOffset: number;
@@ -40,7 +40,7 @@ type ScaleFieldSchema = Extract<SequenceFieldSchema, {
     type: 'scale';
 }>;
 type SelectedOutlineScaleDragTarget = {
-    readonly codeValue: CanUpdateSequencePropStatusStatic;
+    readonly propStatus: CanUpdateSequencePropStatusStatic;
     readonly clientId: string;
     readonly fieldDefault: number | string | undefined;
     readonly fieldSchema: ScaleFieldSchema;
@@ -77,6 +77,8 @@ export declare const getUvHandleConnectionLines: ({ handles, points, }: {
     readonly points: readonly [OutlinePoint, OutlinePoint, OutlinePoint, OutlinePoint];
 }) => UvHandleConnectionLine[];
 export declare const getUvCoordinateForPoint: (points: readonly [OutlinePoint, OutlinePoint, OutlinePoint, OutlinePoint], point: OutlinePoint) => UvCoordinate;
+export declare function constrainUv(value: UvCoordinate, schema: UvCoordinateFieldSchema): UvCoordinate;
+export declare const getSelectedSequenceKeys: (selectedItems: readonly TimelineSelection[]) => Set<string>;
 export declare const getOutlineSelectionInteraction: ({ shiftKey, metaKey, ctrlKey, }: {
     readonly shiftKey: boolean;
     readonly metaKey: boolean;