@remotion/studio 4.0.472 → 4.0.474

package/dist/components/Timeline/save-prop-queue.d.ts

@@ -1,11 +1,12 @@
 import type { CanUpdateSequencePropsResponse, SequencePropsSubscriptionKey } from 'remotion';
-type SetCodeValues = (nodePath: SequencePropsSubscriptionKey, values: (prev: CanUpdateSequencePropsResponse) => CanUpdateSequencePropsResponse) => void;
+type SetPropStatuses = (nodePath: SequencePropsSubscriptionKey, values: (prev: CanUpdateSequencePropsResponse) => CanUpdateSequencePropsResponse) => void;
 export type EnqueueSaveOptions<TResponse> = {
     nodePath: SequencePropsSubscriptionKey;
-    setCodeValues: SetCodeValues;
+    setPropStatuses: SetPropStatuses;
     applyOptimistic: (prev: CanUpdateSequencePropsResponse) => CanUpdateSequencePropsResponse;
+    applyServerResponse?: (prev: CanUpdateSequencePropsResponse, response: TResponse) => CanUpdateSequencePropsResponse;
     apiCall: () => Promise<TResponse>;
     errorLabel: string;
 };
-export declare const enqueueSavePropChange: <TResponse>({ nodePath, setCodeValues, applyOptimistic, apiCall, errorLabel, }: EnqueueSaveOptions<TResponse>) => Promise<void>;
+export declare const enqueueSavePropChange: <TResponse>({ nodePath, setPropStatuses, applyOptimistic, applyServerResponse, apiCall, errorLabel, }: EnqueueSaveOptions<TResponse>) => Promise<void>;
 export {};

package/dist/components/Timeline/save-prop-queue.js

@@ -19,12 +19,12 @@ const dropQueue = (nodePath, q) => {
         queues.delete(key);
     }
 };
-const enqueueSavePropChange = ({ nodePath, setCodeValues, applyOptimistic, apiCall, errorLabel, }) => {
+const enqueueSavePropChange = ({ nodePath, setPropStatuses, applyOptimistic, applyServerResponse, apiCall, errorLabel, }) => {
     const q = getQueue(nodePath);
     if (q.cancelled) {
         return Promise.resolve();
     }
-    setCodeValues(nodePath, (prev) => {
+    setPropStatuses(nodePath, (prev) => {
         return applyOptimistic(prev);
     });
     const myQueue = q;
@@ -33,12 +33,15 @@ const enqueueSavePropChange = ({ nodePath, setCodeValues, applyOptimistic, apiCa
             return;
         }
         try {
-            await apiCall();
+            const response = await apiCall();
             if (myQueue.cancelled) {
                 return;
             }
             // If nothing more is queued, reset baseline so the next round starts fresh.
             if (myQueue.chain === next) {
+                if (applyServerResponse) {
+                    setPropStatuses(nodePath, (prev) => applyServerResponse(prev, response));
+                }
                 dropQueue(nodePath, myQueue);
             }
         }

package/dist/components/Timeline/save-sequence-prop.d.ts

@@ -1,5 +1,5 @@
 import type { CanUpdateSequencePropsResponse, SequencePropsSubscriptionKey, SequenceSchema } from 'remotion';
-export type SetCodeValues = (nodePath: SequencePropsSubscriptionKey, values: (prev: CanUpdateSequencePropsResponse) => CanUpdateSequencePropsResponse) => void;
+export type SetPropStatuses = (nodePath: SequencePropsSubscriptionKey, values: (prev: CanUpdateSequencePropsResponse) => CanUpdateSequencePropsResponse) => void;
 export type SaveSequencePropChange = {
     fileName: string;
     nodePath: SequencePropsSubscriptionKey;
@@ -10,15 +10,10 @@ export type SaveSequencePropChange = {
 };
 type SaveSequencePropsOptions = {
     changes: SaveSequencePropChange[];
-    setCodeValues: SetCodeValues;
+    setPropStatuses: SetPropStatuses;
     clientId: string;
-    undoLabel: string | null;
-    redoLabel: string | null;
+    undoLabel: string;
+    redoLabel: string;
 };
-type SaveSequencePropOptions = SaveSequencePropChange & {
-    setCodeValues: SetCodeValues;
-    clientId: string;
-};
-export declare const saveSequenceProps: ({ changes, setCodeValues, clientId, undoLabel, redoLabel, }: SaveSequencePropsOptions) => Promise<void>;
-export declare const saveSequenceProp: ({ fileName, nodePath, fieldKey, value, defaultValue, schema, setCodeValues, clientId, }: SaveSequencePropOptions) => Promise<void>;
+export declare const saveSequenceProps: ({ changes, setPropStatuses, clientId, undoLabel, redoLabel, }: SaveSequencePropsOptions) => Promise<void>;
 export {};

package/dist/components/Timeline/save-sequence-prop.js

@@ -1,15 +1,47 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.saveSequenceProp = exports.saveSequenceProps = void 0;
+exports.saveSequenceProps = void 0;
 const studio_shared_1 = require("@remotion/studio-shared");
 const call_api_1 = require("../call-api");
 const save_prop_queue_1 = require("./save-prop-queue");
-const saveSequenceProps = ({ changes, setCodeValues, clientId, undoLabel, redoLabel, }) => {
+const saveSequenceProps = ({ changes, setPropStatuses, clientId, undoLabel, redoLabel, }) => {
     if (changes.length === 0) {
         return Promise.resolve();
     }
+    if (changes.length === 1) {
+        const change = changes[0];
+        if (change === undefined) {
+            throw new Error('Expected a sequence prop change');
+        }
+        return (0, save_prop_queue_1.enqueueSavePropChange)({
+            nodePath: change.nodePath,
+            setPropStatuses,
+            applyOptimistic: (prev) => (0, studio_shared_1.optimisticUpdateForPropStatuses)({
+                previous: prev,
+                fieldKey: change.fieldKey,
+                value: change.value,
+                schema: change.schema,
+            }),
+            apiCall: () => (0, call_api_1.callApi)('/api/save-sequence-props', {
+                edits: [
+                    {
+                        fileName: change.fileName,
+                        nodePath: change.nodePath,
+                        key: change.fieldKey,
+                        value: JSON.stringify(change.value),
+                        defaultValue: change.defaultValue,
+                        schema: change.schema,
+                    },
+                ],
+                clientId,
+                undoLabel,
+                redoLabel,
+            }),
+            errorLabel: 'Could not save sequence prop',
+        });
+    }
     for (const change of changes) {
-        setCodeValues(change.nodePath, (prev) => (0, studio_shared_1.optimisticUpdateForCodeValues)({
+        setPropStatuses(change.nodePath, (prev) => (0, studio_shared_1.optimisticUpdateForPropStatuses)({
             previous: prev,
             fieldKey: change.fieldKey,
             value: change.value,
@@ -33,32 +65,3 @@ const saveSequenceProps = ({ changes, setCodeValues, clientId, undoLabel, redoLa
     }).then(() => undefined);
 };
 exports.saveSequenceProps = saveSequenceProps;
-const saveSequenceProp = ({ fileName, nodePath, fieldKey, value, defaultValue, schema, setCodeValues, clientId, }) => {
-    return (0, save_prop_queue_1.enqueueSavePropChange)({
-        nodePath,
-        setCodeValues,
-        applyOptimistic: (prev) => (0, studio_shared_1.optimisticUpdateForCodeValues)({
-            previous: prev,
-            fieldKey,
-            value,
-            schema,
-        }),
-        apiCall: () => (0, call_api_1.callApi)('/api/save-sequence-props', {
-            edits: [
-                {
-                    fileName,
-                    nodePath,
-                    key: fieldKey,
-                    value: JSON.stringify(value),
-                    defaultValue,
-                    schema,
-                },
-            ],
-            clientId,
-            undoLabel: null,
-            redoLabel: null,
-        }),
-        errorLabel: 'Could not save sequence prop',
-    });
-};
-exports.saveSequenceProp = saveSequenceProp;

package/dist/components/Timeline/should-clear-selection-on-pointer-down.d.ts

@@ -0,0 +1,3 @@
+export declare const shouldClearSelectionOnPointerDown: (event: {
+    readonly button: number;
+}) => boolean;

package/dist/components/Timeline/should-clear-selection-on-pointer-down.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.shouldClearSelectionOnPointerDown = void 0;
+const shouldClearSelectionOnPointerDown = (event) => {
+    return event.button === 0;
+};
+exports.shouldClearSelectionOnPointerDown = shouldClearSelectionOnPointerDown;

package/dist/components/Timeline/timeline-asset-link.d.ts

@@ -0,0 +1,13 @@
+type LinkInfo = {
+    kind: 'local';
+    assetPath: string;
+    title: string;
+} | {
+    kind: 'remote';
+    href: string;
+    title: string;
+} | null;
+export type TimelineAssetLinkInfo = Exclude<LinkInfo, null>;
+export declare const getTimelineAssetLinkInfo: (src: string) => LinkInfo;
+export declare const openTimelineAssetLink: (linkInfo: TimelineAssetLinkInfo, selectAsset: (asset: string) => void) => void;
+export {};

package/dist/components/Timeline/timeline-asset-link.js

@@ -0,0 +1,37 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.openTimelineAssetLink = exports.getTimelineAssetLinkInfo = void 0;
+const url_state_1 = require("../../helpers/url-state");
+const getTimelineAssetLinkInfo = (src) => {
+    const staticBase = typeof window === 'undefined' ? null : window.remotion_staticBase;
+    if (staticBase && src.startsWith(staticBase + '/')) {
+        const assetPath = src.slice(staticBase.length + 1);
+        return {
+            kind: 'local',
+            assetPath: decodeURIComponent(assetPath),
+            title: decodeURIComponent(assetPath),
+        };
+    }
+    if (src.startsWith('http://') ||
+        src.startsWith('https://') ||
+        src.startsWith('//')) {
+        try {
+            const url = new URL(src.startsWith('//') ? 'https:' + src : src);
+            return { kind: 'remote', href: src, title: url.hostname };
+        }
+        catch (_a) {
+            return { kind: 'remote', href: src, title: src };
+        }
+    }
+    return null;
+};
+exports.getTimelineAssetLinkInfo = getTimelineAssetLinkInfo;
+const openTimelineAssetLink = (linkInfo, selectAsset) => {
+    if (linkInfo.kind === 'local') {
+        selectAsset(linkInfo.assetPath);
+        (0, url_state_1.pushUrl)(`/assets/${linkInfo.assetPath}`);
+        return;
+    }
+    window.open(linkInfo.href, '_blank', 'noopener,noreferrer');
+};
+exports.openTimelineAssetLink = openTimelineAssetLink;

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

@@ -1,3 +1,13 @@
 export declare const getDecimalPlaces: (num: number) => number;
+export declare const getTimelineDisplayDecimalPlaces: ({ defaultDecimalPlaces, step, }: {
+    readonly defaultDecimalPlaces: number;
+    readonly step: number | undefined;
+}) => number;
+export declare const roundToDecimalPlaces: (value: number, decimalPlaces: number) => number;
+export declare const formatTimelineNumber: ({ decimalPlaces, fixed, value, }: {
+    readonly decimalPlaces: number;
+    readonly fixed: boolean;
+    readonly value: string | number;
+}) => string;
 export declare const normalizeTimelineNumber: (value: number) => number;
 export declare const draggerStyle: React.CSSProperties;

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

@@ -1,14 +1,35 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.draggerStyle = exports.normalizeTimelineNumber = exports.getDecimalPlaces = void 0;
+exports.draggerStyle = exports.normalizeTimelineNumber = exports.formatTimelineNumber = exports.roundToDecimalPlaces = exports.getTimelineDisplayDecimalPlaces = exports.getDecimalPlaces = void 0;
 const getDecimalPlaces = (num) => {
-    const str = String(num);
-    const decimalIndex = str.indexOf('.');
-    return decimalIndex === -1 ? 0 : str.length - decimalIndex - 1;
+    const [coefficient, exponent] = String(num).toLowerCase().split('e');
+    const decimalIndex = coefficient.indexOf('.');
+    const coefficientDecimals = decimalIndex === -1 ? 0 : coefficient.length - decimalIndex - 1;
+    if (exponent === undefined) {
+        return coefficientDecimals;
+    }
+    return Math.max(0, coefficientDecimals - Number(exponent));
 };
 exports.getDecimalPlaces = getDecimalPlaces;
+const getTimelineDisplayDecimalPlaces = ({ defaultDecimalPlaces, step, }) => {
+    return Math.max(defaultDecimalPlaces, step === undefined ? 0 : (0, exports.getDecimalPlaces)(step));
+};
+exports.getTimelineDisplayDecimalPlaces = getTimelineDisplayDecimalPlaces;
+const roundToDecimalPlaces = (value, decimalPlaces) => {
+    const factor = 10 ** decimalPlaces;
+    const rounded = Math.round(value * factor) / factor;
+    return Object.is(rounded, -0) ? 0 : rounded;
+};
+exports.roundToDecimalPlaces = roundToDecimalPlaces;
+const formatTimelineNumber = ({ decimalPlaces, fixed, value, }) => {
+    const rounded = (0, exports.roundToDecimalPlaces)(Number(value), decimalPlaces);
+    return fixed && decimalPlaces > 0
+        ? rounded.toFixed(decimalPlaces)
+        : String(rounded);
+};
+exports.formatTimelineNumber = formatTimelineNumber;
 const normalizeTimelineNumber = (value) => {
-    return Math.round(value * 1000000) / 1000000;
+    return (0, exports.roundToDecimalPlaces)(value, 6);
 };
 exports.normalizeTimelineNumber = normalizeTimelineNumber;
 exports.draggerStyle = {

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

@@ -1,2 +1,2 @@
 export declare const parseTranslate: (value: string) => [number, number];
-export declare const serializeTranslate: (x: number, y: number) => string;
+export declare const serializeTranslate: (x: number, y: number, decimalPlaces?: number) => string;

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

@@ -3,6 +3,7 @@ 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 translateDecimalPlaces = 1;
 const parseTranslate = (value) => {
     const m = value.match(PIXEL_PATTERN);
     if (!m) {
@@ -14,11 +15,12 @@ const parseTranslate = (value) => {
     ];
 };
 exports.parseTranslate = parseTranslate;
-const formatTranslateCoordinate = (value) => {
-    const rounded = (0, timeline_field_utils_1.normalizeTimelineNumber)(value);
+const formatTranslateCoordinate = (value, decimalPlaces) => {
+    const normalized = (0, timeline_field_utils_1.normalizeTimelineNumber)(value);
+    const rounded = (0, timeline_field_utils_1.roundToDecimalPlaces)(normalized, decimalPlaces);
     return String(Object.is(rounded, -0) ? 0 : rounded);
 };
-const serializeTranslate = (x, y) => {
-    return `${formatTranslateCoordinate(x)}px ${formatTranslateCoordinate(y)}px`;
+const serializeTranslate = (x, y, decimalPlaces = translateDecimalPlaces) => {
+    return `${formatTranslateCoordinate(x, decimalPlaces)}px ${formatTranslateCoordinate(y, decimalPlaces)}px`;
 };
 exports.serializeTranslate = serializeTranslate;

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

@@ -9,7 +9,7 @@ const ExpandedTracksProvider_1 = require("../ExpandedTracksProvider");
 const get_node_keyframes_1 = require("./get-node-keyframes");
 const useExpandedTrackKeyframeRows = ({ sequence, nodePathInfo, keyframeDisplayOffset, }) => {
     const { getIsExpanded } = (0, react_1.useContext)(ExpandedTracksProvider_1.ExpandedTracksGetterContext);
-    const { codeValues } = (0, react_1.useContext)(remotion_1.Internals.VisualModeCodeValuesContext);
+    const { propStatuses } = (0, react_1.useContext)(remotion_1.Internals.VisualModePropStatusesContext);
     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)({
@@ -17,9 +17,9 @@ const useExpandedTrackKeyframeRows = ({ sequence, nodePathInfo, keyframeDisplayO
         nodePathInfo,
         getDragOverrides,
         getEffectDragOverrides,
-        codeValues,
+        propStatuses,
     }), [
-        codeValues,
+        propStatuses,
         getDragOverrides,
         getEffectDragOverrides,
         nodePathInfo,
@@ -30,14 +30,14 @@ const useExpandedTrackKeyframeRows = ({ sequence, nodePathInfo, keyframeDisplayO
         sequence,
         nodePathInfo,
         getIsExpanded,
-        codeValues,
-    }), [codeValues, getIsExpanded, nodePathInfo, sequence]);
+        propStatuses,
+    }), [propStatuses, getIsExpanded, nodePathInfo, sequence]);
     const rows = (0, react_1.useMemo)(() => flat.map(({ node }) => ({
         height: (0, timeline_layout_1.getTreeRowHeight)(node),
         keyframes: (0, get_node_keyframes_1.getNodeKeyframes)({
             node,
             nodePath: nodePathInfo.sequenceSubscriptionKey,
-            codeValues,
+            propStatuses,
             keyframeDisplayOffset,
             getDragOverrides,
             getEffectDragOverrides,
@@ -46,7 +46,7 @@ const useExpandedTrackKeyframeRows = ({ sequence, nodePathInfo, keyframeDisplayO
         rowKey: (0, timeline_node_path_key_1.timelineNodePathInfoToKey)(node.nodePathInfo),
         nodePathInfo: node.nodePathInfo,
     })), [
-        codeValues,
+        propStatuses,
         flat,
         getDragOverrides,
         getEffectDragOverrides,

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

@@ -9,7 +9,7 @@ const ExpandedTracksProvider_1 = require("../ExpandedTracksProvider");
 const sequence_props_subscription_store_1 = require("./sequence-props-subscription-store");
 const useSequencePropsSubscription = ({ originalLocation, overrideId, schema, effects, }) => {
     var _a, _b, _c;
-    const { setCodeValues } = (0, react_1.useContext)(remotion_1.Internals.VisualModeSettersContext);
+    const { setPropStatuses } = (0, react_1.useContext)(remotion_1.Internals.VisualModeSettersContext);
     const { setOverrideIdToNodePath } = (0, react_1.useContext)(remotion_1.Internals.OverrideIdsToNodePathsSettersContext);
     const { overrideIdToNodePathMappings } = (0, react_1.useContext)(remotion_1.Internals.OverrideIdsToNodePathsGettersContext);
     const { migrateExpandedTracksForSubscriptionKey } = (0, react_1.useContext)(ExpandedTracksProvider_1.ExpandedTracksSetterContext);
@@ -57,7 +57,7 @@ const useSequencePropsSubscription = ({ originalLocation, overrideId, schema, ef
                 if (!result.success) {
                     return;
                 }
-                setCodeValues(result.nodePath, () => result.status);
+                setPropStatuses(result.nodePath, () => result.status);
             },
             applyEach: (result) => {
                 var _a;
@@ -93,7 +93,7 @@ const useSequencePropsSubscription = ({ originalLocation, overrideId, schema, ef
         migrateExpandedTracksForSubscriptionKey,
         overrideId,
         schema,
-        setCodeValues,
+        setPropStatuses,
         setOverrideIdToNodePath,
     ]);
 };

package/dist/components/Timeline/use-timeline-height.js

@@ -11,7 +11,7 @@ const TimelineTimeIndicators_1 = require("./TimelineTimeIndicators");
 const useTimelineHeight = ({ shown, hasBeenCut, }) => {
     const { getIsExpanded } = (0, react_1.useContext)(ExpandedTracksProvider_1.ExpandedTracksGetterContext);
     const { previewServerState } = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx);
-    const { codeValues } = (0, react_1.useContext)(remotion_1.Internals.VisualModeCodeValuesContext);
+    const { propStatuses } = (0, react_1.useContext)(remotion_1.Internals.VisualModePropStatusesContext);
     const previewServerConnected = previewServerState.type === 'connected';
     return (0, react_1.useMemo)(() => {
         const tracksHeight = shown.reduce((acc, track) => {
@@ -25,7 +25,7 @@ const useTimelineHeight = ({ shown, hasBeenCut, }) => {
                     sequence: track.sequence,
                     nodePathInfo: track.nodePathInfo,
                     getIsExpanded,
-                    codeValues,
+                    propStatuses,
                 }) + timeline_layout_1.TIMELINE_ITEM_BORDER_BOTTOM
                 : 0;
             return acc + layerHeight + expandedHeight;
@@ -34,6 +34,6 @@ const useTimelineHeight = ({ shown, hasBeenCut, }) => {
             timeline_layout_1.TIMELINE_ITEM_BORDER_BOTTOM +
             (hasBeenCut ? MaxTimelineTracks_1.MAX_TIMELINE_TRACKS_NOTICE_HEIGHT : 0) +
             TimelineTimeIndicators_1.TIMELINE_TIME_INDICATOR_HEIGHT);
-    }, [shown, hasBeenCut, previewServerConnected, getIsExpanded, codeValues]);
+    }, [shown, hasBeenCut, previewServerConnected, getIsExpanded, propStatuses]);
 };
 exports.useTimelineHeight = useTimelineHeight;

package/dist/components/Timeline/use-timeline-keyframe-drag.d.ts

@@ -0,0 +1,10 @@
+import type React from 'react';
+import type { SequenceNodePathInfo } from '../../helpers/get-timeline-sequence-sort-key';
+import { type TimelineSelectionInteraction } from './TimelineSelection';
+export declare const useTimelineKeyframeDrag: ({ frame, nodePathInfo, onSelect, selectable, selected, }: {
+    readonly frame: number;
+    readonly nodePathInfo: SequenceNodePathInfo;
+    readonly onSelect: (interaction?: TimelineSelectionInteraction | undefined) => void;
+    readonly selectable: boolean;
+    readonly selected: boolean;
+}) => (e: React.PointerEvent<HTMLButtonElement>) => void;