@remotion/studio 4.0.471 → 4.0.473

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,43 @@
+import { type EffectClipboardSnapshot, type EffectPropClipboardData } from '@remotion/studio-shared';
+import type React from 'react';
+import { type CodeValues, type OverrideIdToNodePaths, type SequencePropsSubscriptionKey, type SequenceSchema, type TSequence } from 'remotion';
+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 type PasteEffectPropTarget = {
+    readonly type: 'valid';
+    readonly fileName: string;
+    readonly nodePath: SequencePropsSubscriptionKey;
+    readonly effectIndex: number;
+    readonly fieldKey: string;
+    readonly defaultValue: string | null;
+    readonly schema: SequenceSchema;
+} | {
+    readonly type: 'none' | 'multiple' | 'unsupported' | 'effect-type-mismatch' | 'prop-mismatch' | 'uncopyable';
+};
+export declare const getPasteEffectsTarget: (selectedItems: readonly TimelineSelection[]) => PasteEffectsTarget;
+export declare const getSnapshotsFromSelection: ({ selection, codeValues, }: {
+    selection: TimelineSelection;
+    codeValues: CodeValues;
+}) => EffectClipboardSnapshot[] | null;
+export declare const getEffectPropClipboardDataFromSelection: ({ selection, codeValues, }: {
+    selection: TimelineSelection;
+    codeValues: CodeValues;
+}) => EffectPropClipboardData | null;
+export declare const getPasteEffectPropTarget: ({ selectedItems, payload, codeValues, sequences, overrideIdsToNodePaths, }: {
+    readonly selectedItems: readonly TimelineSelection[];
+    readonly payload: EffectPropClipboardData;
+    readonly codeValues: CodeValues;
+    readonly sequences: TSequence[];
+    readonly overrideIdsToNodePaths: OverrideIdToNodePaths;
+}) => PasteEffectPropTarget;
+export declare const TimelineClipboardKeybindings: React.FC;