@remotion/studio 4.0.492 → 4.0.493

package/dist/components/Timeline/TimelineSequenceItem.js

@@ -40,16 +40,19 @@ const remotion_1 = require("remotion");
 const client_id_1 = require("../../helpers/client-id");
 const colors_1 = require("../../helpers/colors");
 const format_file_location_1 = require("../../helpers/format-file-location");
+const get_sequence_double_click_action_1 = require("../../helpers/get-sequence-double-click-action");
 const interactivity_enabled_1 = require("../../helpers/interactivity-enabled");
 const studio_runtime_config_1 = require("../../helpers/studio-runtime-config");
 const timeline_layout_1 = require("../../helpers/timeline-layout");
 const use_keybinding_1 = require("../../helpers/use-keybinding");
 const modals_1 = require("../../state/modals");
 const call_api_1 = require("../call-api");
+const CompositionOrStillIcon_1 = require("../CompositionOrStillIcon");
 const ConfirmationDialog_1 = require("../ConfirmationDialog");
 const ContextMenu_1 = require("../ContextMenu");
 const effect_drag_and_drop_1 = require("../effect-drag-and-drop");
 const ExpandedTracksProvider_1 = require("../ExpandedTracksProvider");
+const InitialCompositionLoader_1 = require("../InitialCompositionLoader");
 const layout_1 = require("../layout");
 const NotificationCenter_1 = require("../Notifications/NotificationCenter");
 const use_select_asset_1 = require("../use-select-asset");
@@ -76,6 +79,11 @@ const labelContainerStyle = {
     flexDirection: 'row',
     minWidth: 0,
 };
+const connectedCompositionIconStyle = {
+    flexShrink: 0,
+    height: 12,
+    width: 12,
+};
 const effectDropHighlight = {
     backgroundColor: colors_1.TIMELINE_DROP_BLUE_ALPHA_16,
     outline: colors_1.BORDER_TIMELINE_DROP_BLUE,
@@ -155,7 +163,7 @@ const getSequenceReorderDragData = (dataTransfer) => {
 const getDestinationIndex = ({ fromIndex, insertionIndex, }) => {
     return insertionIndex > fromIndex ? insertionIndex - 1 : insertionIndex;
 };
-const TimelineSequenceItem = ({ nestedDepth, sequence, nodePathInfo, keyframeDisplayOffset, sequenceFrameOffset, trackIndex, }) => {
+const TimelineSequenceItem = ({ connectedCompositions, nestedDepth, sequence, nodePathInfo, keyframeDisplayOffset, sequenceFrameOffset, trackIndex, }) => {
     var _a, _b, _c;
     var _d, _e, _f;
     const nodePath = (_d = nodePathInfo === null || nodePathInfo === void 0 ? void 0 : nodePathInfo.sequenceSubscriptionKey) !== null && _d !== void 0 ? _d : null;
@@ -168,6 +176,7 @@ const TimelineSequenceItem = ({ nestedDepth, sequence, nodePathInfo, keyframeDis
     const { setSelectedModal } = (0, react_1.useContext)(modals_1.ModalsContext);
     const { isHighestContext } = (0, use_keybinding_1.useKeybinding)();
     const selectAsset = (0, use_select_asset_1.useSelectAsset)();
+    const selectComposition = (0, InitialCompositionLoader_1.useSelectComposition)();
     const { onSelect, selectable, selected, selectionItem } = (0, TimelineSelection_1.useTimelineRowSelection)(nodePathInfo);
     const { selectedItems } = (0, TimelineSelection_1.useTimelineSelection)();
     const containsSelection = (0, TimelineSelection_1.useTimelineRowContainsSelection)(nodePathInfo);
@@ -202,6 +211,9 @@ const TimelineSequenceItem = ({ nestedDepth, sequence, nodePathInfo, keyframeDis
         sequence,
         validatedLocation,
     });
+    const timelineDisplayName = sequence.displayName === '' && connectedCompositions.length === 1
+        ? connectedCompositions[0].id
+        : displayName;
     const canDeleteFromSource = Boolean(nodePath && (validatedLocation === null || validatedLocation === void 0 ? void 0 : validatedLocation.source));
     const nodePathKey = (0, react_1.useMemo)(() => nodePath ? remotion_1.Internals.makeSequencePropsSubscriptionKey(nodePath) : null, [nodePath]);
     const parentId = (_e = sequence.parent) !== null && _e !== void 0 ? _e : null;
@@ -536,17 +548,27 @@ const TimelineSequenceItem = ({ nestedDepth, sequence, nodePathInfo, keyframeDis
         codeHiddenStatus !== undefined &&
         codeHiddenStatus !== null &&
         codeHiddenStatus.status === 'static';
-    const onShowInEditorDoubleClick = (0, react_1.useCallback)((e) => {
-        if (!canOpenInEditor) {
-            return;
-        }
+    const onSequenceDoubleClick = (0, react_1.useCallback)((e) => {
         if ((0, TimelineSelection_1.isTimelineSelectionModifierEvent)(e)) {
             e.stopPropagation();
             return;
         }
+        const action = (0, get_sequence_double_click_action_1.getSequenceDoubleClickAction)({
+            button: e.button,
+            canOpenInEditor,
+            numberOfConnectedCompositions: connectedCompositions.length,
+        });
+        if (action === null) {
+            return;
+        }
         e.stopPropagation();
+        if (action === 'open-connected-composition') {
+            selectComposition(connectedCompositions[0], true);
+            return;
+        }
         openInEditor();
-    }, [canOpenInEditor, openInEditor]);
+    }, [canOpenInEditor, connectedCompositions, openInEditor, selectComposition]);
+    const canHandleSequenceDoubleClick = connectedCompositions.length === 1 || canOpenInEditor;
     const canRenameSelectedSequence = canRenameThisSequence &&
         selected &&
         selectedItems.length === 1 &&
@@ -766,8 +788,9 @@ const TimelineSequenceItem = ({ nestedDepth, sequence, nodePathInfo, keyframeDis
             clientId: previewServerState.clientId,
         });
     }, [canDropEffect, nodePath, previewServerState, validatedLocation]);
-    const trackRow = (jsx_runtime_1.jsx(TimelineRowChrome_1.TimelineRowChrome, { depth: nestedDepth, eye: canToggleVisibility ? (jsx_runtime_1.jsx(TimelineLayerEye_1.TimelineLayerEye, { type: sequence.type === 'audio' ? 'speaker' : 'eye', hidden: isItemHidden, onInvoked: onToggleVisibility })) : (jsx_runtime_1.jsx(TimelineLayerEye_1.TimelineLayerEyeSpacer, {})), arrow: hasExpandableContent && nodePathInfo !== null ? (jsx_runtime_1.jsx(TimelineSequenceExpandArrow, { disabled: !previewInteractive, isExpanded: isExpanded, nodePathInfo: nodePathInfo, onToggleExpand: onToggleExpand, sequence: sequence })) : (jsx_runtime_1.jsx(TimelineExpandArrowButton_1.TimelineExpandArrowSpacer, {})), style: rowStyle, selected: selected, selectable: selectable, selectionItem: selectionItem, onSelect: onSelect, showSelectedBackground: true, containsSelection: containsSelection, outerHeight: outerHeight, onDragLeave: canDropEffect ? onEffectDragLeave : undefined, onDragOver: canDropEffect ? onEffectDragOver : undefined, onDrop: canDropEffect ? onEffectDrop : undefined, onDoubleClick: canOpenInEditor ? onShowInEditorDoubleClick : undefined, children: jsx_runtime_1.jsxs("div", { style: labelContainerStyle, children: [
-                jsx_runtime_1.jsx(TimelineSequenceName_1.TimelineSequenceName, { displayName: displayName, fallbackDisplayName: fallbackDisplayName, selected: selected, containsSelection: containsSelection, editing: isRenaming, onCancelEditing: onCancelRenaming, onSaveName: onSaveName }), mediaSrc ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
+    const trackRow = (jsx_runtime_1.jsx(TimelineRowChrome_1.TimelineRowChrome, { depth: nestedDepth, eye: canToggleVisibility ? (jsx_runtime_1.jsx(TimelineLayerEye_1.TimelineLayerEye, { type: sequence.type === 'audio' ? 'speaker' : 'eye', hidden: isItemHidden, onInvoked: onToggleVisibility })) : (jsx_runtime_1.jsx(TimelineLayerEye_1.TimelineLayerEyeSpacer, {})), arrow: hasExpandableContent && nodePathInfo !== null ? (jsx_runtime_1.jsx(TimelineSequenceExpandArrow, { disabled: !previewInteractive, isExpanded: isExpanded, nodePathInfo: nodePathInfo, onToggleExpand: onToggleExpand, sequence: sequence })) : (jsx_runtime_1.jsx(TimelineExpandArrowButton_1.TimelineExpandArrowSpacer, {})), style: rowStyle, selected: selected, selectable: selectable, selectionItem: selectionItem, onSelect: onSelect, showSelectedBackground: true, containsSelection: containsSelection, outerHeight: outerHeight, onDragLeave: canDropEffect ? onEffectDragLeave : undefined, onDragOver: canDropEffect ? onEffectDragOver : undefined, onDrop: canDropEffect ? onEffectDrop : undefined, onDoubleClick: canHandleSequenceDoubleClick ? onSequenceDoubleClick : undefined, children: jsx_runtime_1.jsxs("div", { style: labelContainerStyle, children: [connectedCompositions.length > 0 ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
+                        jsx_runtime_1.jsx(CompositionOrStillIcon_1.CompositionOrStillIcon, { color: (0, TimelineSelection_1.getTimelineColor)(false, false), composition: connectedCompositions[0], style: connectedCompositionIconStyle }), jsx_runtime_1.jsx(layout_1.Spacing, { x: 0.5 })
+                    ] })) : null, jsx_runtime_1.jsx(TimelineSequenceName_1.TimelineSequenceName, { displayName: timelineDisplayName, fallbackDisplayName: fallbackDisplayName, selected: selected, containsSelection: containsSelection, editing: isRenaming, onCancelEditing: onCancelRenaming, onSaveName: onSaveName }), mediaSrc ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
                         jsx_runtime_1.jsx(layout_1.Spacing, { x: 0.5 }),
                         " ",
                         jsx_runtime_1.jsx(TimelineMediaInfo_1.TimelineMediaInfo, { src: mediaSrc })

package/dist/components/Timeline/TimelineSequenceName.js

@@ -24,7 +24,11 @@ const TimelineSequenceName = ({ displayName, fallbackDisplayName, selected, cont
             alignSelf: 'stretch',
             ...(0, TimelineSelection_1.getTimelineSelectedLabelStyle)(selected, false),
             display: 'inline-flex',
+            fontFamily: 'inherit',
             fontSize: 12,
+            lineHeight: 'normal',
+            minWidth: 0,
+            overflow: 'hidden',
             whiteSpace: 'nowrap',
             textOverflow: 'ellipsis',
             color: (0, TimelineSelection_1.getTimelineColor)(selected, false),

package/dist/components/Timeline/keyframe-clipboard.d.ts

@@ -0,0 +1,34 @@
+import type { KeyframeClipboardData } from '@remotion/studio-shared';
+import { type InteractivitySchema, type OverrideIdToNodePaths, type PropStatuses, type SequencePropsSubscriptionKey, type TSequence } from 'remotion';
+import type { TimelineSelection } from './TimelineSelection';
+export declare const getKeyframeClipboardDataFromSelections: ({ selections, sequences, overrideIdsToNodePaths, propStatuses, }: {
+    readonly selections: readonly TimelineSelection[];
+    readonly sequences: TSequence[];
+    readonly overrideIdsToNodePaths: OverrideIdToNodePaths;
+    readonly propStatuses: PropStatuses;
+}) => KeyframeClipboardData | null;
+export type PasteKeyframeTarget = {
+    readonly type: 'valid';
+    readonly fileName: string;
+    readonly nodePath: SequencePropsSubscriptionKey;
+    readonly fieldKey: string;
+    readonly effectIndex: number | null;
+    readonly keyframes: readonly {
+        readonly sourceFrame: number;
+        readonly value: unknown;
+    }[];
+    readonly keyframesToDelete: readonly number[];
+    readonly easing: KeyframeClipboardData['easing'];
+    readonly firstEasingSegmentIndex: number;
+    readonly schema: InteractivitySchema;
+} | {
+    readonly type: 'none' | 'multiple' | 'uncopyable' | 'incompatible';
+};
+export declare const getPasteKeyframeTarget: ({ selectedItems, payload, timelinePosition, sequences, overrideIdsToNodePaths, propStatuses, }: {
+    readonly selectedItems: readonly TimelineSelection[];
+    readonly payload: KeyframeClipboardData;
+    readonly timelinePosition: number;
+    readonly sequences: TSequence[];
+    readonly overrideIdsToNodePaths: OverrideIdToNodePaths;
+    readonly propStatuses: PropStatuses;
+}) => PasteKeyframeTarget;

package/dist/components/Timeline/keyframe-clipboard.js

@@ -0,0 +1,278 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getPasteKeyframeTarget = exports.getKeyframeClipboardDataFromSelections = void 0;
+const studio_shared_1 = require("@remotion/studio-shared");
+const remotion_1 = require("remotion");
+const find_track_for_node_path_info_1 = require("./find-track-for-node-path-info");
+const parse_keyframe_field_from_node_path_1 = require("./parse-keyframe-field-from-node-path");
+const getKeyframeClipboardFieldType = ({ schema, fieldKey, }) => {
+    const field = remotion_1.Internals.getFlatSchemaWithAllKeys(schema)[fieldKey];
+    if (!field) {
+        return null;
+    }
+    return (0, studio_shared_1.isKeyframeClipboardFieldType)(field.type) ? field.type : null;
+};
+const getKeyframeFieldIdentity = (selection) => {
+    if (selection.type === 'keyframe' || selection.type === 'easing') {
+        return (0, parse_keyframe_field_from_node_path_1.parseKeyframeFieldFromNodePath)(selection.nodePathInfo.auxiliaryKeys);
+    }
+    if (selection.type === 'sequence-prop') {
+        return { type: 'sequence', fieldKey: selection.key };
+    }
+    if (selection.type === 'sequence-effect-prop') {
+        return {
+            type: 'effect',
+            effectIndex: selection.i,
+            fieldKey: selection.key,
+        };
+    }
+    return null;
+};
+const resolveKeyframeField = ({ selection, sequences, overrideIdsToNodePaths, propStatuses, }) => {
+    var _a, _b;
+    if (selection.type !== 'keyframe' &&
+        selection.type !== 'easing' &&
+        selection.type !== 'sequence-prop' &&
+        selection.type !== 'sequence-effect-prop') {
+        return null;
+    }
+    const identity = getKeyframeFieldIdentity(selection);
+    if (identity === null) {
+        return null;
+    }
+    const track = (0, find_track_for_node_path_info_1.findTrackForNodePathInfo)({
+        sequences,
+        overrideIdsToNodePaths,
+        nodePathInfo: selection.nodePathInfo,
+    });
+    if (!track || track.nodePathInfo === null) {
+        return null;
+    }
+    const nodePath = track.nodePathInfo.sequenceSubscriptionKey;
+    if (identity.type === 'sequence') {
+        if (!track.sequence.controls) {
+            return null;
+        }
+        const sequencePropStatus = (_a = remotion_1.Internals.getPropStatusesCtx(propStatuses, nodePath)) === null || _a === void 0 ? void 0 : _a[identity.fieldKey];
+        if (!sequencePropStatus || sequencePropStatus.status === 'computed') {
+            return null;
+        }
+        const { schema } = track.sequence.controls;
+        return {
+            identity,
+            nodePath,
+            fileName: nodePath.absolutePath,
+            schema,
+            fieldType: getKeyframeClipboardFieldType({
+                schema,
+                fieldKey: identity.fieldKey,
+            }),
+            propStatus: sequencePropStatus,
+            keyframeDisplayOffset: track.keyframeDisplayOffset,
+        };
+    }
+    const effect = track.sequence.effects[identity.effectIndex];
+    const effectStatus = remotion_1.Internals.getEffectPropStatusesCtx({
+        propStatuses,
+        nodePath,
+        effectIndex: identity.effectIndex,
+    });
+    const effectPropStatus = effectStatus.type === 'can-update-effect'
+        ? (_b = effectStatus.props) === null || _b === void 0 ? void 0 : _b[identity.fieldKey]
+        : null;
+    if (!effect || !effectPropStatus || effectPropStatus.status === 'computed') {
+        return null;
+    }
+    return {
+        identity,
+        nodePath,
+        fileName: nodePath.absolutePath,
+        schema: effect.schema,
+        fieldType: getKeyframeClipboardFieldType({
+            schema: effect.schema,
+            fieldKey: identity.fieldKey,
+        }),
+        propStatus: effectPropStatus,
+        keyframeDisplayOffset: track.keyframeDisplayOffset,
+    };
+};
+const areResolvedFieldsEqual = (first, second) => {
+    if (remotion_1.Internals.makeSequencePropsSubscriptionKey(first.nodePath) !==
+        remotion_1.Internals.makeSequencePropsSubscriptionKey(second.nodePath)) {
+        return false;
+    }
+    if (first.identity.type !== second.identity.type) {
+        return false;
+    }
+    if (first.identity.fieldKey !== second.identity.fieldKey) {
+        return false;
+    }
+    return (first.identity.type === 'sequence' ||
+        (second.identity.type === 'effect' &&
+            first.identity.effectIndex === second.identity.effectIndex));
+};
+const getKeyframeClipboardDataFromSelections = ({ selections, sequences, overrideIdsToNodePaths, propStatuses, }) => {
+    var _a, _b;
+    const keyframeSelections = selections.filter((selection) => selection.type === 'keyframe');
+    const easingSelections = selections.filter((selection) => selection.type === 'easing');
+    if (keyframeSelections.length + easingSelections.length !==
+        selections.length) {
+        return null;
+    }
+    const resolvedFields = keyframeSelections.map((selection) => ({
+        selection,
+        resolved: resolveKeyframeField({
+            selection,
+            sequences,
+            overrideIdsToNodePaths,
+            propStatuses,
+        }),
+    }));
+    const firstResolved = (_a = resolvedFields[0]) === null || _a === void 0 ? void 0 : _a.resolved;
+    if (firstResolved === null ||
+        firstResolved === undefined ||
+        resolvedFields.some(({ resolved }) => resolved === null || !areResolvedFieldsEqual(firstResolved, resolved))) {
+        return null;
+    }
+    const keyframedPropStatus = firstResolved.propStatus;
+    if (keyframedPropStatus.status !== 'keyframed') {
+        return null;
+    }
+    const keyframes = [];
+    for (const { selection } of resolvedFields) {
+        const sourceFrame = selection.frame - firstResolved.keyframeDisplayOffset;
+        const keyframe = keyframedPropStatus.keyframes.find((item) => item.frame === sourceFrame);
+        if (keyframe === undefined ||
+            JSON.stringify(keyframe.value) === undefined) {
+            return null;
+        }
+        keyframes.push({ frame: sourceFrame, value: keyframe.value });
+    }
+    keyframes.sort((first, second) => first.frame - second.frame);
+    const firstFrame = (_b = keyframes[0]) === null || _b === void 0 ? void 0 : _b.frame;
+    if (firstFrame === undefined) {
+        return null;
+    }
+    const keyframeIndexes = keyframes.map((keyframe) => keyframedPropStatus.keyframes.findIndex((item) => item.frame === keyframe.frame));
+    if (keyframeIndexes.some((index, position) => index === -1 ||
+        (position > 0 && index !== keyframeIndexes[position - 1] + 1))) {
+        return null;
+    }
+    const firstKeyframeIndex = keyframeIndexes[0];
+    const lastKeyframeIndex = keyframeIndexes.at(-1);
+    if (firstKeyframeIndex === undefined || lastKeyframeIndex === undefined) {
+        return null;
+    }
+    for (const easingSelection of easingSelections) {
+        const resolved = resolveKeyframeField({
+            selection: easingSelection,
+            sequences,
+            overrideIdsToNodePaths,
+            propStatuses,
+        });
+        if (resolved === null ||
+            !areResolvedFieldsEqual(firstResolved, resolved) ||
+            easingSelection.segmentIndex < firstKeyframeIndex ||
+            easingSelection.segmentIndex >= lastKeyframeIndex) {
+            return null;
+        }
+    }
+    return {
+        type: 'keyframe',
+        version: 1,
+        remotionClipboard: 'keyframe',
+        fieldType: firstResolved.fieldType,
+        keyframes: keyframes.map((keyframe) => {
+            return {
+                frameOffset: keyframe.frame - firstFrame,
+                value: keyframe.value,
+            };
+        }),
+        easing: keyframeIndexes.slice(0, -1).map((index) => {
+            var _a;
+            return (_a = keyframedPropStatus.easing[index]) !== null && _a !== void 0 ? _a : studio_shared_1.LINEAR_KEYFRAME_EASING;
+        }),
+    };
+};
+exports.getKeyframeClipboardDataFromSelections = getKeyframeClipboardDataFromSelections;
+const isKeyframeValueCompatible = ({ value, fieldType, }) => {
+    if (fieldType === null) {
+        return true;
+    }
+    if (fieldType === 'number' || fieldType === 'rotation-degrees') {
+        return typeof value === 'number' && Number.isFinite(value);
+    }
+    if (fieldType === 'scale') {
+        return ((typeof value === 'number' && Number.isFinite(value)) ||
+            typeof value === 'string');
+    }
+    if (fieldType === 'uv-coordinate') {
+        return (Array.isArray(value) &&
+            value.length === 2 &&
+            value.every((item) => typeof item === 'number' && Number.isFinite(item)));
+    }
+    return typeof value === 'string';
+};
+const getPasteKeyframeTarget = ({ selectedItems, payload, timelinePosition, sequences, overrideIdsToNodePaths, propStatuses, }) => {
+    var _a, _b;
+    if (selectedItems.length === 0) {
+        return { type: 'none' };
+    }
+    const selection = selectedItems[0];
+    if (!selection || getKeyframeFieldIdentity(selection) === null) {
+        return { type: 'none' };
+    }
+    const resolvedFields = selectedItems.map((item) => resolveKeyframeField({
+        selection: item,
+        sequences,
+        overrideIdsToNodePaths,
+        propStatuses,
+    }));
+    const resolved = resolvedFields[0];
+    if (resolved === null) {
+        return { type: 'uncopyable' };
+    }
+    if (resolvedFields.some((field) => field === null || !areResolvedFieldsEqual(resolved, field))) {
+        return { type: 'multiple' };
+    }
+    const keyframes = payload.keyframes.map((keyframe) => ({
+        sourceFrame: timelinePosition - resolved.keyframeDisplayOffset + keyframe.frameOffset,
+        value: keyframe.value,
+    }));
+    const firstFrame = (_a = keyframes[0]) === null || _a === void 0 ? void 0 : _a.sourceFrame;
+    const lastFrame = (_b = keyframes.at(-1)) === null || _b === void 0 ? void 0 : _b.sourceFrame;
+    if (firstFrame === undefined || lastFrame === undefined) {
+        return { type: 'incompatible' };
+    }
+    const existingFrames = resolved.propStatus.status === 'keyframed'
+        ? resolved.propStatus.keyframes.map((keyframe) => keyframe.frame)
+        : [];
+    const keyframesToDelete = existingFrames.filter((frame) => frame >= firstFrame && frame <= lastFrame);
+    const finalFrames = [
+        ...existingFrames.filter((frame) => frame < firstFrame || frame > lastFrame),
+        ...keyframes.map((keyframe) => keyframe.sourceFrame),
+    ].sort((first, second) => first - second);
+    const firstEasingSegmentIndex = finalFrames.indexOf(firstFrame);
+    if (resolved.fieldType !== payload.fieldType ||
+        payload.keyframes.some((keyframe) => !isKeyframeValueCompatible({
+            value: keyframe.value,
+            fieldType: payload.fieldType,
+        }))) {
+        return { type: 'incompatible' };
+    }
+    return {
+        type: 'valid',
+        fileName: resolved.fileName,
+        nodePath: resolved.nodePath,
+        fieldKey: resolved.identity.fieldKey,
+        effectIndex: resolved.identity.type === 'effect'
+            ? resolved.identity.effectIndex
+            : null,
+        keyframes,
+        keyframesToDelete,
+        easing: payload.easing,
+        firstEasingSegmentIndex,
+        schema: resolved.schema,
+    };
+};
+exports.getPasteKeyframeTarget = getPasteKeyframeTarget;

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

@@ -241,10 +241,11 @@ const formatTimelineFieldValueForDisplay = ({ fieldSchema, value, }) => {
         case 'boolean':
         case 'color':
         case 'enum':
+        case 'font-family':
         case 'hidden':
             return formatUnknownTimelineValueForDisplay(value);
         default:
-            return formatUnknownTimelineValueForDisplay(value);
+            throw new Error(`Unsupported field type: ${fieldSchema}`);
     }
 };
 exports.formatTimelineFieldValueForDisplay = formatTimelineFieldValueForDisplay;

package/dist/components/Timeline/update-selected-easing.d.ts

@@ -1,3 +1,4 @@
+export { canEditEasingForInterpolationFunction } from '@remotion/studio-shared';
 import type { CanUpdateSequencePropStatusKeyframed, CanUpdateSequencePropStatusEasing, DragOverrideValue, OverrideIdToNodePaths, PropStatuses, SequencePropsSubscriptionKey, InteractivitySchema, TSequence } from 'remotion';
 import type { SetPropStatuses } from './save-sequence-prop';
 import type { TimelineEasingSelection, TimelineSelection } from './TimelineSelection';
@@ -23,7 +24,6 @@ export type SelectedEasingUpdate = {
     readonly currentEasing: TimelineEasingValue;
     readonly propStatus: CanUpdateSequencePropStatusKeyframed;
 };
-export declare const canEditEasingForInterpolationFunction: (interpolationFunction: string) => boolean;
 export declare const getSelectedEasingUpdate: ({ selection, sequences, overrideIdsToNodePaths, propStatuses, }: {
     selection: {
         readonly type: "easing";

package/dist/components/Timeline/update-selected-easing.js

@@ -2,13 +2,12 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.updateSelectedTimelineEasings = exports.getTimelineEasingValueForSelection = exports.getEasingSelections = exports.makeEasingDragOverride = exports.getSelectedEasingUpdates = exports.getSelectedEasingUpdate = exports.canEditEasingForInterpolationFunction = void 0;
 const studio_shared_1 = require("@remotion/studio-shared");
+const studio_shared_2 = require("@remotion/studio-shared");
+Object.defineProperty(exports, "canEditEasingForInterpolationFunction", { enumerable: true, get: function () { return studio_shared_2.canEditEasingForInterpolationFunction; } });
 const remotion_1 = require("remotion");
 const call_update_keyframe_settings_1 = require("./call-update-keyframe-settings");
 const find_track_for_node_path_info_1 = require("./find-track-for-node-path-info");
 const parse_keyframe_field_from_node_path_1 = require("./parse-keyframe-field-from-node-path");
-const canEditEasingForInterpolationFunction = (interpolationFunction) => interpolationFunction === 'interpolate' ||
-    interpolationFunction === 'interpolateColors';
-exports.canEditEasingForInterpolationFunction = canEditEasingForInterpolationFunction;
 const isEasingSelection = (selection) => selection.type === 'easing';
 const getSelectedEasingUpdate = ({ selection, sequences, overrideIdsToNodePaths, propStatuses, }) => {
     var _a;
@@ -34,7 +33,7 @@ const getSelectedEasingUpdate = ({ selection, sequences, overrideIdsToNodePaths,
         }
         const sequencePropStatus = (_a = remotion_1.Internals.getPropStatusesCtx(propStatuses, nodePath)) === null || _a === void 0 ? void 0 : _a[field.fieldKey];
         if ((sequencePropStatus === null || sequencePropStatus === void 0 ? void 0 : sequencePropStatus.status) !== 'keyframed' ||
-            !(0, exports.canEditEasingForInterpolationFunction)(sequencePropStatus.interpolationFunction)) {
+            !(0, studio_shared_1.canEditEasingForInterpolationFunction)(sequencePropStatus.interpolationFunction)) {
             return null;
         }
         return {
@@ -61,7 +60,7 @@ const getSelectedEasingUpdate = ({ selection, sequences, overrideIdsToNodePaths,
         ? effectStatus.props[field.fieldKey]
         : null;
     if ((effectPropStatus === null || effectPropStatus === void 0 ? void 0 : effectPropStatus.status) !== 'keyframed' ||
-        !(0, exports.canEditEasingForInterpolationFunction)(effectPropStatus.interpolationFunction)) {
+        !(0, studio_shared_1.canEditEasingForInterpolationFunction)(effectPropStatus.interpolationFunction)) {
         return null;
     }
     return {

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

@@ -1,6 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useExpandedTrackKeyframeRows = void 0;
+const studio_shared_1 = require("@remotion/studio-shared");
 const react_1 = require("react");
 const remotion_1 = require("remotion");
 const timeline_layout_1 = require("../../helpers/timeline-layout");
@@ -9,8 +10,6 @@ const ExpandedTracksProvider_1 = require("../ExpandedTracksProvider");
 const get_node_keyframes_1 = require("./get-node-keyframes");
 const timeline_expanded_filter_1 = require("./timeline-expanded-filter");
 const TimelineSelection_1 = require("./TimelineSelection");
-const canEditEasingForInterpolationFunction = (interpolationFunction) => interpolationFunction === 'interpolate' ||
-    interpolationFunction === 'interpolateColors';
 const getNodeCanEditEasing = ({ node, nodePath, propStatuses, }) => {
     var _a;
     if (node.kind !== 'field' || node.field === null) {
@@ -19,7 +18,7 @@ const getNodeCanEditEasing = ({ node, nodePath, propStatuses, }) => {
     if (node.field.kind === 'sequence-field') {
         const sequencePropStatus = (_a = remotion_1.Internals.getPropStatusesCtx(propStatuses, nodePath)) === null || _a === void 0 ? void 0 : _a[node.field.key];
         return ((sequencePropStatus === null || sequencePropStatus === void 0 ? void 0 : sequencePropStatus.status) === 'keyframed' &&
-            canEditEasingForInterpolationFunction(sequencePropStatus.interpolationFunction));
+            (0, studio_shared_1.canEditEasingForInterpolationFunction)(sequencePropStatus.interpolationFunction));
     }
     const effectStatus = remotion_1.Internals.getEffectPropStatusesCtx({
         propStatuses,
@@ -30,7 +29,7 @@ const getNodeCanEditEasing = ({ node, nodePath, propStatuses, }) => {
         ? effectStatus.props[node.field.key]
         : null;
     return ((effectPropStatus === null || effectPropStatus === void 0 ? void 0 : effectPropStatus.status) === 'keyframed' &&
-        canEditEasingForInterpolationFunction(effectPropStatus.interpolationFunction));
+        (0, studio_shared_1.canEditEasingForInterpolationFunction)(effectPropStatus.interpolationFunction));
 };
 const useExpandedTrackKeyframeRows = ({ sequence, nodePathInfo, keyframeDisplayOffset, }) => {
     const { getIsExpanded } = (0, react_1.useContext)(ExpandedTracksProvider_1.ExpandedTracksGetterContext);

package/dist/components/selected-outline-measurement.d.ts

@@ -48,10 +48,6 @@ export declare const getOutlineSelectionInteraction: ({ shiftKey, metaKey, ctrlK
     readonly metaKey: boolean;
     readonly ctrlKey: boolean;
 }) => TimelineSelectionInteraction;
-export declare const getOutlineDoubleClickAction: ({ button, canOpenInEditor, }: {
-    readonly button: number;
-    readonly canOpenInEditor: boolean;
-}) => "open-in-editor" | null;
 type SelectedEffectFields = {
     allFields: boolean;
     fieldKeys: Set<string>;
@@ -62,9 +58,10 @@ type SelectedTransformOriginInfo = {
     readonly displayFrame: number | null;
 };
 export declare const getSelectedTransformOriginInfo: (selectedItems: readonly TimelineSelection[]) => SelectedTransformOriginInfo | null;
-export declare const getSequencesWithSelectableOutlines: ({ sequences, overrideIdsToNodePaths, }: {
+export declare const getSequencesWithSelectableOutlines: ({ sequences, overrideIdsToNodePaths, compositions, }: {
     readonly sequences: readonly TSequence[];
     readonly overrideIdsToNodePaths: OverrideIdToNodePaths;
+    readonly compositions?: readonly import("remotion").AnyComposition[] | undefined;
 }) => SequenceWithSelectedOutline[];
 export declare const measureOutlines: (container: SVGSVGElement, targets: readonly SelectedOutlineTarget[]) => SelectedOutline[];
 export declare const outlinesAreEqual: (a: readonly SelectedOutline[], b: readonly SelectedOutline[]) => boolean;

package/dist/components/selected-outline-measurement.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.outlinesAreEqual = exports.measureOutlines = exports.getSequencesWithSelectableOutlines = exports.getSelectedTransformOriginInfo = exports.getSelectedEffectFieldsBySequenceKey = exports.getOutlineDoubleClickAction = exports.getOutlineSelectionInteraction = exports.getSequenceKeysContainingSelection = exports.getSelectedSequenceKeys = exports.getTransformedSvgViewportPoints = exports.getSelectedOutlineRotationPivot = exports.getSelectedOutlineRotationCornerInfo = exports.getRotationCursor = exports.getSelectedOutlineRotationDeltaDegrees = exports.getAngleDegrees = exports.vectorBetween = exports.vectorLength = exports.dot = exports.getOutlineCenter = exports.midpoint = exports.pointToString = void 0;
+exports.outlinesAreEqual = exports.measureOutlines = exports.getSequencesWithSelectableOutlines = exports.getSelectedTransformOriginInfo = exports.getSelectedEffectFieldsBySequenceKey = exports.getOutlineSelectionInteraction = exports.getSequenceKeysContainingSelection = exports.getSelectedSequenceKeys = exports.getTransformedSvgViewportPoints = exports.getSelectedOutlineRotationPivot = exports.getSelectedOutlineRotationCornerInfo = exports.getRotationCursor = exports.getSelectedOutlineRotationDeltaDegrees = exports.getAngleDegrees = exports.vectorBetween = exports.vectorLength = exports.dot = exports.getOutlineCenter = exports.midpoint = exports.pointToString = void 0;
 const calculate_timeline_1 = require("../helpers/calculate-timeline");
 const colors_1 = require("../helpers/colors");
 const get_box_quads_ponyfill_1 = require("../helpers/get-box-quads-ponyfill");
@@ -220,8 +220,6 @@ const getOutlineSelectionInteraction = ({ shiftKey, metaKey, ctrlKey, }) => ({
     toggleKey: metaKey || ctrlKey,
 });
 exports.getOutlineSelectionInteraction = getOutlineSelectionInteraction;
-const getOutlineDoubleClickAction = ({ button, canOpenInEditor, }) => button === 0 && canOpenInEditor ? 'open-in-editor' : null;
-exports.getOutlineDoubleClickAction = getOutlineDoubleClickAction;
 const getKeyframeOrEasingField = (item) => {
     if (item.type !== 'keyframe' && item.type !== 'easing') {
         return null;
@@ -308,10 +306,11 @@ const getSelectedTransformOriginInfo = (selectedItems) => {
     };
 };
 exports.getSelectedTransformOriginInfo = getSelectedTransformOriginInfo;
-const getSequencesWithSelectableOutlines = ({ sequences, overrideIdsToNodePaths, }) => {
+const getSequencesWithSelectableOutlines = ({ sequences, overrideIdsToNodePaths, compositions = [], }) => {
     return (0, calculate_timeline_1.calculateTimeline)({
         sequences: [...sequences],
         overrideIdsToNodePaths,
+        compositions,
     })
         .filter((track) => {
         if (track.nodePathInfo === null) {