@remotion/studio 4.0.471 → 4.0.472

package/dist/components/Splitter/SplitterContainer.js

@@ -2,6 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.SplitterContainer = exports.containerColumn = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
+const player_1 = require("@remotion/player");
 const react_1 = require("react");
 const timeline_1 = require("../../state/timeline");
 const SplitterContext_1 = require("./SplitterContext");
@@ -46,6 +47,14 @@ const SplitterContainer = ({ orientation, children, defaultFlex, maxFlex, minFle
         persistFlex,
         ref,
     ]);
+    (0, react_1.useEffect)(() => {
+        const frame = requestAnimationFrame(() => {
+            player_1.PlayerInternals.updateAllElementsSizes();
+        });
+        return () => {
+            cancelAnimationFrame(frame);
+        };
+    });
     return (jsx_runtime_1.jsx(SplitterContext_1.SplitterContext.Provider, { value: value, children: jsx_runtime_1.jsx("div", { ref: ref, style: orientation === 'horizontal' ? exports.containerColumn : containerRow, children: children }) }));
 };
 exports.SplitterContainer = SplitterContainer;

package/dist/components/Splitter/SplitterHandle.js

@@ -18,97 +18,90 @@ const SplitterHandle = ({ allowToCollapse, onCollapse }) => {
     if (!context) {
         throw new Error('Cannot find splitter context');
     }
-    const [lastPointerUp, setLastPointerUp] = (0, react_1.useState)(() => Date.now());
     const ref = (0, react_1.useRef)(null);
+    // Keep the latest props/context readable inside the long-lived pointerdown
+    // listener without re-subscribing it on every render.
+    const latest = (0, react_1.useRef)({ context, allowToCollapse, onCollapse });
+    latest.current = { context, allowToCollapse, onCollapse };
     (0, react_1.useEffect)(() => {
-        if (context.isDragging.current) {
-            return;
-        }
         const { current } = ref;
         if (!current) {
             return;
         }
-        const getNewValue = (e, clamp) => {
-            if (!context.isDragging.current) {
-                throw new Error('cannot get value if not dragging');
-            }
-            if (!context.ref.current) {
-                throw new Error('domRect is not mounted');
-            }
-            const { width, height } = context.ref.current.getBoundingClientRect();
-            const change = (() => {
-                if (context.orientation === 'vertical') {
-                    return ((e.clientX - context.isDragging.current.x) /
-                        (width - exports.SPLITTER_HANDLE_SIZE));
-                }
-                return ((e.clientY - context.isDragging.current.y) /
-                    (height - exports.SPLITTER_HANDLE_SIZE));
-            })();
-            const newFlex = context.flexValue + change;
-            if (clamp) {
-                return Math.min(context.maxFlex, Math.max(context.minFlex, newFlex));
-            }
-            return newFlex;
-        };
+        // Cleanup for the listeners that only exist for the duration of a drag.
+        let endDrag = null;
         const onPointerDown = (e) => {
-            var _a;
             if (e.button !== 0) {
                 return;
             }
-            context.isDragging.current = {
-                x: e.clientX,
-                y: e.clientY,
+            // Capture the context and starting flex once, at drag start. The flex
+            // value updates on every pointermove, so it must not be re-read live.
+            const dragContext = latest.current.context;
+            const start = { x: e.clientX, y: e.clientY };
+            const startFlex = dragContext.flexValue;
+            dragContext.isDragging.current = start;
+            (0, ForceSpecificCursor_1.forceSpecificCursor)(dragContext.orientation === 'horizontal' ? 'row-resize' : 'col-resize');
+            current.classList.add('remotion-splitter-active');
+            const getNewValue = (ev, clamp) => {
+                if (!dragContext.ref.current) {
+                    throw new Error('domRect is not mounted');
+                }
+                const { width, height } = dragContext.ref.current.getBoundingClientRect();
+                const change = dragContext.orientation === 'vertical'
+                    ? (ev.clientX - start.x) / (width - exports.SPLITTER_HANDLE_SIZE)
+                    : (ev.clientY - start.y) / (height - exports.SPLITTER_HANDLE_SIZE);
+                const newFlex = startFlex + change;
+                if (clamp) {
+                    return Math.min(dragContext.maxFlex, Math.max(dragContext.minFlex, newFlex));
+                }
+                return newFlex;
             };
-            (0, ForceSpecificCursor_1.forceSpecificCursor)(context.orientation === 'horizontal' ? 'row-resize' : 'col-resize');
-            (_a = ref.current) === null || _a === void 0 ? void 0 : _a.classList.add('remotion-splitter-active');
-            window.addEventListener('pointerup', (ev) => {
-                if (!context.isDragging.current) {
+            endDrag = () => {
+                dragContext.isDragging.current = false;
+                (0, ForceSpecificCursor_1.stopForcingSpecificCursor)();
+                current.classList.remove('remotion-splitter-active');
+                window.removeEventListener('pointermove', onPointerMove);
+                window.removeEventListener('pointerup', onPointerUp);
+                endDrag = null;
+                player_1.PlayerInternals.updateAllElementsSizes();
+            };
+            const onPointerMove = (ev) => {
+                if (!dragContext.isDragging.current) {
                     return;
                 }
-                context.persistFlex(getNewValue(ev, true));
-                cleanup();
-                setLastPointerUp(Date.now());
-            }, { once: true });
-            window.addEventListener('pointermove', onPointerMove);
-        };
-        const onPointerMove = (e) => {
-            if (context.isDragging.current) {
-                const val = getNewValue(e, true);
-                context.setFlexValue(val);
-                if (allowToCollapse === 'left') {
-                    const unclamped = getNewValue(e, false);
-                    if (unclamped < context.minFlex / 2) {
-                        cleanup();
-                        onCollapse();
-                        setLastPointerUp(Date.now());
+                dragContext.setFlexValue(getNewValue(ev, true));
+                const collapse = latest.current.allowToCollapse;
+                if (collapse === 'left') {
+                    const unclamped = getNewValue(ev, false);
+                    if (unclamped < dragContext.minFlex / 2) {
+                        endDrag === null || endDrag === void 0 ? void 0 : endDrag();
+                        latest.current.onCollapse();
                     }
                 }
-                if (allowToCollapse === 'right') {
-                    const unclamped = 1 - getNewValue(e, false);
-                    if (unclamped < (1 - context.maxFlex) / 2) {
-                        cleanup();
-                        onCollapse();
-                        setLastPointerUp(Date.now());
+                else if (collapse === 'right') {
+                    const unclamped = 1 - getNewValue(ev, false);
+                    if (unclamped < (1 - dragContext.maxFlex) / 2) {
+                        endDrag === null || endDrag === void 0 ? void 0 : endDrag();
+                        latest.current.onCollapse();
                     }
                 }
-            }
-        };
-        const cleanup = () => {
-            var _a;
-            context.isDragging.current = false;
-            (0, ForceSpecificCursor_1.stopForcingSpecificCursor)();
-            (_a = ref.current) === null || _a === void 0 ? void 0 : _a.classList.remove('remotion-splitter-active');
-            current.removeEventListener('pointerdown', onPointerDown);
-            window.removeEventListener('pointermove', onPointerMove);
-            player_1.PlayerInternals.updateAllElementsSizes();
+            };
+            const onPointerUp = (ev) => {
+                if (!dragContext.isDragging.current) {
+                    return;
+                }
+                dragContext.persistFlex(getNewValue(ev, true));
+                endDrag === null || endDrag === void 0 ? void 0 : endDrag();
+            };
+            window.addEventListener('pointermove', onPointerMove);
+            window.addEventListener('pointerup', onPointerUp);
         };
         current.addEventListener('pointerdown', onPointerDown);
         return () => {
-            if (!context.isDragging.current) {
-                cleanup();
-            }
+            current.removeEventListener('pointerdown', onPointerDown);
+            endDrag === null || endDrag === void 0 ? void 0 : endDrag();
         };
-    }, [allowToCollapse, context, context.flexValue, lastPointerUp, onCollapse]);
+    }, []);
     (0, react_1.useEffect)(() => {
         const { current } = ref;
         if (!current) {

package/dist/components/Timeline/Timeline.js

@@ -44,6 +44,7 @@ const is_current_selected_still_1 = require("../../helpers/is-current-selected-s
 const open_in_editor_1 = require("../../helpers/open-in-editor");
 const call_api_1 = require("../call-api");
 const ContextMenu_1 = require("../ContextMenu");
+const import_assets_1 = require("../import-assets");
 const is_menu_item_1 = require("../Menu/is-menu-item");
 const NotificationCenter_1 = require("../Notifications/NotificationCenter");
 const SplitterContainer_1 = require("../Splitter/SplitterContainer");
@@ -83,6 +84,9 @@ const TimelineClearSelectionArea = ({ children }) => {
     const { compositions, canvasContent } = (0, react_1.useContext)(remotion_1.Internals.CompositionManager);
     const videoConfig = remotion_1.Internals.useUnsafeVideoConfig();
     const [isAddingSolid, setIsAddingSolid] = (0, react_1.useState)(false);
+    const [isAddingAsset, setIsAddingAsset] = (0, react_1.useState)(false);
+    const { previewServerState } = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx);
+    const previewConnected = previewServerState.type === 'connected';
     const currentCompositionId = (canvasContent === null || canvasContent === void 0 ? void 0 : canvasContent.type) === 'composition' ? canvasContent.compositionId : null;
     const currentComposition = (0, react_1.useMemo)(() => {
         var _a;
@@ -106,11 +110,18 @@ const TimelineClearSelectionArea = ({ children }) => {
         }
         clearSelection();
     }, [clearSelection]);
-    const canInsertSolid = (compositionComponentInfo === null || compositionComponentInfo === void 0 ? void 0 : compositionComponentInfo.canAddSequence) === true &&
+    const canInsertSolid = previewConnected &&
+        (compositionComponentInfo === null || compositionComponentInfo === void 0 ? void 0 : compositionComponentInfo.canAddSequence) === true &&
         currentCompositionId !== null &&
         compositionFile !== null &&
         videoConfig !== null &&
         !isAddingSolid;
+    const canInsertAsset = previewConnected &&
+        !window.remotion_isReadOnlyStudio &&
+        (compositionComponentInfo === null || compositionComponentInfo === void 0 ? void 0 : compositionComponentInfo.canAddSequence) === true &&
+        currentCompositionId !== null &&
+        compositionFile !== null &&
+        !isAddingAsset;
     const insertSolid = (0, react_1.useCallback)(async () => {
         if (!canInsertSolid ||
             currentCompositionId === null ||
@@ -142,6 +153,28 @@ const TimelineClearSelectionArea = ({ children }) => {
             setIsAddingSolid(false);
         }
     }, [canInsertSolid, compositionFile, currentCompositionId, videoConfig]);
+    const insertAsset = (0, react_1.useCallback)(async () => {
+        if (!canInsertAsset ||
+            currentCompositionId === null ||
+            compositionFile === null) {
+            return;
+        }
+        const files = await (0, import_assets_1.pickFilesToImport)();
+        if (files.length === 0) {
+            return;
+        }
+        setIsAddingAsset(true);
+        try {
+            await (0, import_assets_1.importAssets)({
+                files,
+                compositionFile,
+                compositionId: currentCompositionId,
+            });
+        }
+        finally {
+            setIsAddingAsset(false);
+        }
+    }, [canInsertAsset, compositionFile, currentCompositionId]);
     const contextMenuItems = (0, react_1.useMemo)(() => {
         return [
             {
@@ -156,8 +189,20 @@ const TimelineClearSelectionArea = ({ children }) => {
                 quickSwitcherLabel: null,
                 disabled: !canInsertSolid,
             },
+            {
+                type: 'item',
+                id: 'insert-asset',
+                label: 'Add asset',
+                value: 'insert-asset',
+                onClick: insertAsset,
+                keyHint: null,
+                leftItem: null,
+                subMenu: null,
+                quickSwitcherLabel: null,
+                disabled: !canInsertAsset,
+            },
         ];
-    }, [insertSolid, canInsertSolid]);
+    }, [insertSolid, canInsertSolid, insertAsset, canInsertAsset]);
     return (jsx_runtime_1.jsx(ContextMenu_1.ContextMenu, { ref: timeline_refs_1.timelineVerticalScroll, values: contextMenuItems, onOpen: null, style: container, className: 'css-reset ' + is_menu_item_1.VERTICAL_SCROLLBAR_CLASSNAME, onPointerDown: onPointerDown, children: children }));
 };
 const TimelineInner = () => {

package/dist/components/Timeline/TimelineArrayField.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import type { SchemaFieldInfo, TimelineFieldOnDragValueChange, TimelineFieldOnSave } from '../../helpers/timeline-layout';
+export declare const TimelineArrayField: React.FC<{
+    readonly field: SchemaFieldInfo;
+    readonly effectiveValue: unknown;
+    readonly onSave: TimelineFieldOnSave;
+    readonly onDragValueChange: TimelineFieldOnDragValueChange;
+    readonly onDragEnd: () => void;
+}>;

package/dist/components/Timeline/TimelineArrayField.js

@@ -0,0 +1,210 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TimelineArrayField = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const TimelinePrimitiveFieldValue_1 = require("./TimelinePrimitiveFieldValue");
+const container = {
+    display: 'flex',
+    flexDirection: 'column',
+    alignItems: 'flex-start',
+    minWidth: 0,
+};
+const itemContainer = {
+    display: 'flex',
+    alignItems: 'center',
+    gap: 6,
+    flexShrink: 0,
+    height: 22,
+    minWidth: 0,
+};
+const itemLabel = {
+    color: 'rgba(255, 255, 255, 0.45)',
+    fontSize: 11,
+    fontVariantNumeric: 'tabular-nums',
+    width: 18,
+    textAlign: 'right',
+};
+const button = {
+    background: 'rgba(255, 255, 255, 0.08)',
+    border: '1px solid rgba(255, 255, 255, 0.12)',
+    borderRadius: 3,
+    color: 'white',
+    cursor: 'pointer',
+    fontSize: 10,
+    height: 18,
+    lineHeight: '16px',
+    padding: '0 5px',
+};
+const disabledButton = {
+    ...button,
+    cursor: 'default',
+    opacity: 0.4,
+};
+const addButtonRow = {
+    ...itemContainer,
+    paddingLeft: 24,
+};
+const getFallbackItemValue = (field) => {
+    var _a;
+    if (field.newItemDefault !== undefined) {
+        return field.newItemDefault;
+    }
+    if (field.item.type === 'number' || field.item.type === 'rotation-degrees') {
+        return (_a = field.item.min) !== null && _a !== void 0 ? _a : 0;
+    }
+    if (field.item.type === 'boolean') {
+        return false;
+    }
+    if (field.item.type === 'rotation-css') {
+        return '0deg';
+    }
+    if (field.item.type === 'translate') {
+        return '0px 0px';
+    }
+    if (field.item.type === 'uv-coordinate') {
+        return [0.5, 0.5];
+    }
+    if (field.item.type === 'color') {
+        return '#000000';
+    }
+    if (field.item.type === 'enum') {
+        const [firstVariant] = field.item.variants;
+        return firstVariant;
+    }
+    throw new Error(`Unsupported array item field: ${JSON.stringify(field.item)}`);
+};
+const isUvCoordinateDefault = (value) => {
+    return (Array.isArray(value) &&
+        value.length === 2 &&
+        value.every((item) => typeof item === 'number'));
+};
+const makeItemFieldSchema = ({ field, defaultValue, }) => {
+    var _a;
+    if (field.item.type === 'number') {
+        return {
+            ...field.item,
+            default: typeof defaultValue === 'number' ? defaultValue : undefined,
+            hiddenFromList: false,
+        };
+    }
+    if (field.item.type === 'boolean') {
+        return {
+            ...field.item,
+            default: Boolean(defaultValue),
+        };
+    }
+    if (field.item.type === 'rotation-css') {
+        return {
+            ...field.item,
+            default: typeof defaultValue === 'string' ? defaultValue : undefined,
+        };
+    }
+    if (field.item.type === 'rotation-degrees') {
+        return {
+            ...field.item,
+            default: typeof defaultValue === 'number' ? defaultValue : undefined,
+        };
+    }
+    if (field.item.type === 'translate') {
+        return {
+            ...field.item,
+            default: typeof defaultValue === 'string' ? defaultValue : undefined,
+        };
+    }
+    if (field.item.type === 'uv-coordinate') {
+        return {
+            ...field.item,
+            default: isUvCoordinateDefault(defaultValue) ? defaultValue : undefined,
+        };
+    }
+    if (field.item.type === 'color') {
+        return {
+            ...field.item,
+            default: typeof defaultValue === 'string' ? defaultValue : undefined,
+        };
+    }
+    if (field.item.type === 'enum') {
+        return {
+            type: 'enum',
+            default: typeof defaultValue === 'string'
+                ? defaultValue
+                : ((_a = field.item.variants[0]) !== null && _a !== void 0 ? _a : ''),
+            variants: Object.fromEntries(field.item.variants.map((variant) => [variant, {}])),
+        };
+    }
+    throw new Error(`Unsupported array item field: ${JSON.stringify(field.item)}`);
+};
+const replaceAtIndex = (items, index, value) => items.map((item, i) => (i === index ? value : item));
+const ItemEditor = ({ field, arrayField, items, index, onSave, onDragValueChange, onDragEnd, }) => {
+    var _a;
+    const fallback = (0, react_1.useMemo)(() => getFallbackItemValue(arrayField), [arrayField]);
+    const value = (_a = items[index]) !== null && _a !== void 0 ? _a : fallback;
+    const itemField = (0, react_1.useMemo)(() => {
+        const fieldSchema = makeItemFieldSchema({
+            field: arrayField,
+            defaultValue: fallback,
+        });
+        return {
+            ...field,
+            key: `${field.key}[${index}]`,
+            typeName: fieldSchema.type,
+            fieldSchema,
+        };
+    }, [arrayField, fallback, field, index]);
+    const propStatus = (0, react_1.useMemo)(() => ({
+        status: 'static',
+        codeValue: value,
+    }), [value]);
+    const onSaveItem = (0, react_1.useCallback)((next) => onSave(replaceAtIndex(items, index, next)), [index, items, onSave]);
+    const onDragItem = (0, react_1.useCallback)((next) => onDragValueChange(replaceAtIndex(items, index, next)), [index, items, onDragValueChange]);
+    return (jsx_runtime_1.jsx(TimelinePrimitiveFieldValue_1.TimelinePrimitiveFieldValue, { effectiveValue: value, field: itemField, onDragEnd: onDragEnd, onDragValueChange: onDragItem, onSave: onSaveItem, propStatus: propStatus, scaleLockNodePath: null }));
+};
+const TimelineArrayField = ({ field, effectiveValue, onSave, onDragValueChange, onDragEnd }) => {
+    var _a, _b;
+    const arrayField = field.fieldSchema;
+    if (arrayField.type !== 'array') {
+        throw new Error('TimelineArrayField rendered for non-array field');
+    }
+    const items = (0, react_1.useMemo)(() => {
+        if (Array.isArray(effectiveValue)) {
+            return effectiveValue;
+        }
+        return Array.isArray(arrayField.default) ? arrayField.default : [];
+    }, [arrayField.default, effectiveValue]);
+    const minLength = (_a = arrayField.minLength) !== null && _a !== void 0 ? _a : 0;
+    const maxLength = (_b = arrayField.maxLength) !== null && _b !== void 0 ? _b : Infinity;
+    const canAdd = items.length < maxLength;
+    const canRemove = items.length > minLength;
+    const itemKeys = (0, react_1.useRef)([]);
+    const nextItemKey = (0, react_1.useRef)(0);
+    while (itemKeys.current.length < items.length) {
+        itemKeys.current.push(`${field.key}-${nextItemKey.current}`);
+        nextItemKey.current++;
+    }
+    if (itemKeys.current.length > items.length) {
+        itemKeys.current.length = items.length;
+    }
+    const onAdd = (0, react_1.useCallback)(() => {
+        if (!canAdd) {
+            return;
+        }
+        itemKeys.current.push(`${field.key}-${nextItemKey.current}`);
+        nextItemKey.current++;
+        onSave([...items, getFallbackItemValue(arrayField)]);
+    }, [arrayField, canAdd, field.key, items, onSave]);
+    const onRemove = (0, react_1.useCallback)((index) => {
+        if (!canRemove) {
+            return;
+        }
+        itemKeys.current.splice(index, 1);
+        onSave(items.filter((_item, i) => i !== index));
+    }, [canRemove, items, onSave]);
+    return (jsx_runtime_1.jsxs("span", { style: container, children: [items.map((_item, index) => {
+                const itemKey = itemKeys.current[index];
+                return (jsx_runtime_1.jsxs("span", { style: itemContainer, children: [
+                        jsx_runtime_1.jsx("span", { style: itemLabel, children: index }), jsx_runtime_1.jsx(ItemEditor, { arrayField: arrayField, field: field, index: index, items: items, onDragEnd: onDragEnd, onDragValueChange: onDragValueChange, onSave: onSave }), jsx_runtime_1.jsx("button", { disabled: !canRemove, onClick: () => onRemove(index), style: canRemove ? button : disabledButton, title: `Remove item ${index}`, type: "button", children: "-" })
+                    ] }, itemKey));
+            }), canAdd ? (jsx_runtime_1.jsx("span", { style: addButtonRow, children: jsx_runtime_1.jsx("button", { type: "button", style: button, onClick: onAdd, title: "Add item", children: "+" }) })) : null] }));
+};
+exports.TimelineArrayField = TimelineArrayField;

package/dist/components/Timeline/TimelineBooleanField.d.ts

@@ -1,9 +1,9 @@
 import React from 'react';
-import type { CanUpdateSequencePropStatus } from 'remotion';
+import type { CanUpdateSequencePropStatusStatic } from 'remotion';
 import type { SchemaFieldInfo, TimelineFieldOnSave } from '../../helpers/timeline-layout';
 export declare const TimelineBooleanField: React.FC<{
     readonly field: SchemaFieldInfo;
-    readonly propStatus: CanUpdateSequencePropStatus;
+    readonly propStatus: CanUpdateSequencePropStatusStatic;
     readonly effectiveValue: unknown;
     readonly onSave: TimelineFieldOnSave;
 }>;

package/dist/components/Timeline/TimelineBooleanField.js

@@ -11,10 +11,10 @@ const TimelineBooleanField = ({ field, propStatus, effectiveValue, onSave }) =>
     const checked = Boolean(effectiveValue);
     const onChange = (0, react_1.useCallback)(() => {
         const newValue = !checked;
-        if (propStatus.canUpdate && newValue !== propStatus.codeValue) {
+        if (newValue !== propStatus.codeValue) {
             onSave(newValue);
         }
     }, [propStatus, onSave, checked]);
-    return (jsx_runtime_1.jsx("div", { style: checkboxContainer, children: jsx_runtime_1.jsx(Checkbox_1.Checkbox, { checked: checked, onChange: onChange, name: field.key, disabled: !propStatus.canUpdate, variant: "small" }) }));
+    return (jsx_runtime_1.jsx("div", { style: checkboxContainer, children: jsx_runtime_1.jsx(Checkbox_1.Checkbox, { checked: checked, onChange: onChange, name: field.key, disabled: false, variant: "small" }) }));
 };
 exports.TimelineBooleanField = TimelineBooleanField;

package/dist/components/Timeline/TimelineClipboardKeybindings.d.ts

@@ -0,0 +1,20 @@
+import { type EffectClipboardSnapshot } from '@remotion/studio-shared';
+import type React from 'react';
+import type { SequenceNodePathInfo } from '../../helpers/get-timeline-sequence-sort-key';
+import { type TimelineSelection } from './TimelineSelection';
+export type PasteEffectsTarget = {
+    readonly type: 'valid';
+    readonly nodePathInfo: SequenceNodePathInfo;
+} | {
+    readonly type: 'none';
+} | {
+    readonly type: 'multiple';
+} | {
+    readonly type: 'unsupported';
+};
+export declare const getPasteEffectsTarget: (selectedItems: readonly TimelineSelection[]) => PasteEffectsTarget;
+export declare const getSnapshotsFromSelection: ({ selection, codeValues, }: {
+    selection: TimelineSelection;
+    codeValues: import("remotion").CodeValues;
+}) => EffectClipboardSnapshot[] | null;
+export declare const TimelineClipboardKeybindings: React.FC;