@remotion/studio 4.0.477 → 4.0.479

package/dist/components/Timeline/delete-selected-timeline-item.js

@@ -1,9 +1,10 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.deleteSelectedTimelineItems = exports.deleteSelectedTimelineItem = void 0;
+exports.deleteSelectedTimelineItems = exports.getTimelineSelectionAfterDeletingItems = exports.deleteSelectedTimelineItem = void 0;
 const call_api_1 = require("../call-api");
 const NotificationCenter_1 = require("../Notifications/NotificationCenter");
 const delete_selected_keyframe_1 = require("./delete-selected-keyframe");
+const TimelineSelection_1 = require("./TimelineSelection");
 const confirmDeletingDuplicatedSequences = (nodePathInfos, confirm) => {
     const duplicatedNodePathInfos = nodePathInfos.filter((nodePathInfo) => nodePathInfo.numberOfSequencesWithThisNodePath > 1);
     if (duplicatedNodePathInfos.length === 0) {
@@ -136,6 +137,31 @@ const isSequenceRowSelection = (selection) => selection.type === 'sequence';
 const isSequenceEffectSelection = (selection) => selection.type === 'sequence-effect';
 const isSequenceAllEffectsSelection = (selection) => selection.type === 'sequence-all-effects';
 const isKeyframeSelection = (selection) => selection.type === 'keyframe';
+const getSequenceSelectionAfterDeletingEffect = (selection) => {
+    if (selection.type !== 'sequence-effect' &&
+        selection.type !== 'sequence-all-effects') {
+        return null;
+    }
+    return {
+        type: 'sequence',
+        nodePathInfo: {
+            ...selection.nodePathInfo,
+            auxiliaryKeys: [],
+        },
+    };
+};
+const getTimelineSelectionAfterDeletingItems = (selections) => {
+    const nextSelections = new Map();
+    for (const selection of selections) {
+        const nextSelection = getSequenceSelectionAfterDeletingEffect(selection);
+        if (!nextSelection) {
+            return [];
+        }
+        nextSelections.set((0, TimelineSelection_1.getTimelineSelectionKey)(nextSelection), nextSelection);
+    }
+    return Array.from(nextSelections.values());
+};
+exports.getTimelineSelectionAfterDeletingItems = getTimelineSelectionAfterDeletingItems;
 const areSelectionsOnlyOfType = (selections, type) => selections.every((selection) => selection.type === type);
 const assertTimelineSelectionsHaveSameType = (selections) => {
     const firstSelection = selections[0];

package/dist/components/Timeline/duplicate-selected-timeline-item.d.ts

@@ -8,6 +8,13 @@ export declare const isDuplicatableSequenceRowSelection: (selection: TimelineSel
 } & {
     type: "sequence";
 };
+export declare const isDuplicatableEffectSelection: (selection: TimelineSelection) => selection is {
+    readonly type: "sequence-effect";
+    readonly nodePathInfo: SequenceNodePathInfo;
+    readonly i: number;
+} & {
+    type: "sequence-effect";
+};
 export declare const duplicateSelectedTimelineItems: ({ selections, confirm, }: {
     selections: readonly TimelineSelection[];
     confirm: ConfirmationDialogFunction;

package/dist/components/Timeline/duplicate-selected-timeline-item.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.duplicateSelectedTimelineItems = exports.isDuplicatableSequenceRowSelection = exports.duplicateSequencesFromSource = void 0;
+exports.duplicateSelectedTimelineItems = exports.isDuplicatableEffectSelection = exports.isDuplicatableSequenceRowSelection = exports.duplicateSequencesFromSource = void 0;
 const call_api_1 = require("../call-api");
 const NotificationCenter_1 = require("../Notifications/NotificationCenter");
 const confirmDuplicatingProgrammaticallyDuplicatedSequences = (nodePathInfos, confirm) => {
@@ -61,11 +61,40 @@ const duplicateSequencesFromSource = (nodePathInfos, confirm) => {
 exports.duplicateSequencesFromSource = duplicateSequencesFromSource;
 const isDuplicatableSequenceRowSelection = (selection) => selection.type === 'sequence';
 exports.isDuplicatableSequenceRowSelection = isDuplicatableSequenceRowSelection;
+const isDuplicatableEffectSelection = (selection) => selection.type === 'sequence-effect';
+exports.isDuplicatableEffectSelection = isDuplicatableEffectSelection;
+const duplicateEffectsFromSource = (effects) => {
+    return (0, call_api_1.callApi)('/api/duplicate-effect', effects.map((effect) => {
+        const nodePath = effect.nodePathInfo.sequenceSubscriptionKey;
+        return {
+            fileName: nodePath.absolutePath,
+            sequenceNodePath: nodePath,
+            effectIndex: effect.i,
+        };
+    }))
+        .then((result) => {
+        if (result.success) {
+            (0, NotificationCenter_1.showNotification)(effects.length === 1
+                ? 'Duplicated effect in source file'
+                : 'Duplicated effects in source files', 2000);
+        }
+        else {
+            (0, NotificationCenter_1.showNotification)(result.reason, 4000);
+        }
+    })
+        .catch((err) => {
+        (0, NotificationCenter_1.showNotification)(err.message, 4000);
+    });
+};
 const duplicateSelectedTimelineItems = ({ selections, confirm, }) => {
     const sequenceSelections = selections.filter(exports.isDuplicatableSequenceRowSelection);
-    if (sequenceSelections.length === 0) {
+    if (sequenceSelections.length > 0) {
+        return (0, exports.duplicateSequencesFromSource)(sequenceSelections.map((selection) => selection.nodePathInfo), confirm);
+    }
+    const effectSelections = selections.filter(exports.isDuplicatableEffectSelection);
+    if (effectSelections.length === 0) {
         return null;
     }
-    return (0, exports.duplicateSequencesFromSource)(sequenceSelections.map((selection) => selection.nodePathInfo), confirm);
+    return duplicateEffectsFromSource(effectSelections);
 };
 exports.duplicateSelectedTimelineItems = duplicateSelectedTimelineItems;

package/dist/components/Timeline/parse-keyframe-field-from-node-path.js

@@ -6,7 +6,7 @@ const parseKeyframeFieldFromNodePath = (auxiliaryKeys) => {
     if (auxiliaryKeys[0] === 'controls' && auxiliaryKeys.length >= 2) {
         return {
             type: 'sequence',
-            fieldKey: auxiliaryKeys[1],
+            fieldKey: auxiliaryKeys.slice(1).join('.'),
         };
     }
     // Effect field: ['effects', effectIndex, fieldKey]
@@ -18,7 +18,7 @@ const parseKeyframeFieldFromNodePath = (auxiliaryKeys) => {
         return {
             type: 'effect',
             effectIndex,
-            fieldKey: auxiliaryKeys[2],
+            fieldKey: auxiliaryKeys.slice(2).join('.'),
         };
     }
     return null;

package/dist/components/Timeline/reset-selected-timeline-props.d.ts

@@ -1,4 +1,4 @@
-import type { OverrideIdToNodePaths, PropStatuses, SequencePropsSubscriptionKey, SequenceSchema, TSequence } from 'remotion';
+import type { OverrideIdToNodePaths, PropStatuses, SequencePropsSubscriptionKey, InteractivitySchema, TSequence } from 'remotion';
 import type { SetPropStatuses } from './save-sequence-prop';
 import type { TimelineSelection } from './TimelineSelection';
 type SequencePropResetTarget = {
@@ -8,7 +8,7 @@ type SequencePropResetTarget = {
     readonly fieldKey: string;
     readonly value: unknown;
     readonly defaultValue: string | null;
-    readonly schema: SequenceSchema;
+    readonly schema: InteractivitySchema;
 };
 type EffectPropResetTarget = {
     readonly type: 'effect-prop';
@@ -18,7 +18,7 @@ type EffectPropResetTarget = {
     readonly fieldKey: string;
     readonly value: unknown;
     readonly defaultValue: string | null;
-    readonly schema: SequenceSchema;
+    readonly schema: InteractivitySchema;
 };
 type TimelinePropResetTarget = SequencePropResetTarget | EffectPropResetTarget;
 export declare const getTimelinePropResetTargets: ({ selections, sequences, overrideIdsToNodePaths, propStatuses, }: {

package/dist/components/Timeline/reset-selected-timeline-props.js

@@ -34,9 +34,11 @@ const isResettablePropStatus = ({ propStatus, defaultValue, }) => {
 const getDefaultValue = (fieldSchema) => fieldSchema.default !== undefined
     ? JSON.stringify(fieldSchema.default)
     : null;
+const getActiveFieldSchema = ({ schema, key, resolveValue, }) => {
+    return remotion_1.Internals.flattenActiveSchema(schema, resolveValue)[key];
+};
 const getTimelinePropResetTargets = ({ selections, sequences, overrideIdsToNodePaths, propStatuses, }) => {
     var _a;
-    var _b;
     const propSelections = selections.filter(isPropResetSelection);
     if (propSelections.length === 0) {
         return null;
@@ -52,7 +54,7 @@ const getTimelinePropResetTargets = ({ selections, sequences, overrideIdsToNodeP
             overrideIdsToNodePaths,
             nodePathInfo: selection.nodePathInfo,
         });
-        const sequence = (_b = track === null || track === void 0 ? void 0 : track.sequence) !== null && _b !== void 0 ? _b : null;
+        const sequence = (_a = track === null || track === void 0 ? void 0 : track.sequence) !== null && _a !== void 0 ? _a : null;
         if (!sequence) {
             continue;
         }
@@ -61,11 +63,23 @@ const getTimelinePropResetTargets = ({ selections, sequences, overrideIdsToNodeP
             if (!sequence.controls) {
                 continue;
             }
-            const sequenceFieldSchema = sequence.controls.schema[selection.key];
-            const sequencePropStatus = (_a = remotion_1.Internals.getPropStatusesCtx(propStatuses, nodePath)) === null || _a === void 0 ? void 0 : _a[selection.key];
+            const sequencePropStatus = remotion_1.Internals.getPropStatusesCtx(propStatuses, nodePath);
+            const { merged: sequenceValuesDotNotation } = remotion_1.Internals.computeEffectiveSchemaValuesDotNotation({
+                schema: sequence.controls.schema,
+                currentValue: sequence.controls.currentRuntimeValueDotNotation,
+                overrideValues: {},
+                propStatus: sequencePropStatus,
+                frame: null,
+            });
+            const sequenceFieldSchema = getActiveFieldSchema({
+                schema: sequence.controls.schema,
+                key: selection.key,
+                resolveValue: (key) => sequenceValuesDotNotation[key],
+            });
+            const selectedPropStatus = sequencePropStatus === null || sequencePropStatus === void 0 ? void 0 : sequencePropStatus[selection.key];
             if (!isVisibleFieldSchema(sequenceFieldSchema) ||
                 !isResettablePropStatus({
-                    propStatus: sequencePropStatus,
+                    propStatus: selectedPropStatus,
                     defaultValue: sequenceFieldSchema.default,
                 })) {
                 continue;

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

@@ -1,5 +1,5 @@
 import { type EffectClipboardParam } from '@remotion/studio-shared';
-import type { SequencePropsSubscriptionKey, SequenceSchema } from 'remotion';
+import type { SequencePropsSubscriptionKey, InteractivitySchema } from 'remotion';
 import type { SetPropStatuses } from './save-sequence-prop';
 type SaveEffectPropBase = {
     fileName: string;
@@ -7,7 +7,7 @@ type SaveEffectPropBase = {
     effectIndex: number;
     fieldKey: string;
     defaultValue: string | null;
-    schema: SequenceSchema;
+    schema: InteractivitySchema;
     setPropStatuses: SetPropStatuses;
     clientId: string;
 };

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

@@ -1,4 +1,4 @@
-import type { CanUpdateSequencePropsResponse, SequencePropsSubscriptionKey, SequenceSchema } from 'remotion';
+import type { CanUpdateSequencePropsResponse, SequencePropsSubscriptionKey, InteractivitySchema } from 'remotion';
 export type SetPropStatuses = (nodePath: SequencePropsSubscriptionKey, values: (prev: CanUpdateSequencePropsResponse) => CanUpdateSequencePropsResponse) => void;
 export type SaveSequencePropChange = {
     fileName: string;
@@ -6,7 +6,7 @@ export type SaveSequencePropChange = {
     fieldKey: string;
     value: unknown;
     defaultValue: string | null;
-    schema: SequenceSchema;
+    schema: InteractivitySchema;
 };
 type SaveSequencePropsOptions = {
     changes: SaveSequencePropChange[];

package/dist/components/Timeline/sequence-props-subscription-store.d.ts

@@ -1,4 +1,4 @@
-import type { SequenceNodePath, SequenceSchema } from 'remotion';
+import type { SequenceNodePath, InteractivitySchema } from 'remotion';
 import { callApi } from '../call-api';
 type SubscribeResult = Awaited<ReturnType<typeof callApi<'/api/subscribe-to-sequence-props'>>>;
 type ApplyResult = (result: SubscribeResult) => void;
@@ -6,9 +6,9 @@ export declare const acquireSequencePropsSubscription: ({ fileName, line, column
     fileName: string;
     line: number;
     column: number;
-    schema: SequenceSchema;
+    schema: InteractivitySchema;
     componentIdentity: string | null;
-    effects: SequenceSchema[];
+    effects: InteractivitySchema[];
     nodePath: SequenceNodePath | null;
     clientId: string;
     applyOnce: ApplyResult;

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

@@ -0,0 +1,5 @@
+import type { InteractivitySchemaField } from 'remotion';
+export declare const formatTimelineFieldValueForDisplay: ({ fieldSchema, value, }: {
+    readonly fieldSchema: InteractivitySchemaField | undefined;
+    readonly value: unknown;
+}) => string;

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

@@ -0,0 +1,244 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.formatTimelineFieldValueForDisplay = void 0;
+const timeline_field_utils_1 = require("./timeline-field-utils");
+const timeline_rotation_utils_1 = require("./timeline-rotation-utils");
+const timeline_translate_utils_1 = require("./timeline-translate-utils");
+const transform_origin_utils_1 = require("./transform-origin-utils");
+const DISPLAY_FALLBACK_DECIMAL_PLACES = 3;
+const DEFAULT_SCALE_VALUE = [1, 1, 1];
+const getFiniteNumericValue = (value) => {
+    if (typeof value !== 'number' && typeof value !== 'string') {
+        return null;
+    }
+    const numericValue = Number(value);
+    return Number.isFinite(numericValue) ? numericValue : null;
+};
+const parseScaleStringForDisplay = (value) => {
+    var _a, _b;
+    const parts = value.trim().split(/\s+/);
+    if (parts.length < 1 || parts.length > 3 || parts[0] === '') {
+        return null;
+    }
+    const parsed = parts.map((part) => Number(part));
+    if (!parsed.every((part) => Number.isFinite(part))) {
+        return null;
+    }
+    const x = parsed[0];
+    const y = (_a = parsed[1]) !== null && _a !== void 0 ? _a : x;
+    const z = (_b = parsed[2]) !== null && _b !== void 0 ? _b : 1;
+    return [x, y, z];
+};
+const parseScaleValueForDisplay = (value) => {
+    var _a;
+    if (typeof value === 'number') {
+        return Number.isFinite(value) ? [value, value, 1] : DEFAULT_SCALE_VALUE;
+    }
+    if (typeof value === 'string') {
+        return (_a = parseScaleStringForDisplay(value)) !== null && _a !== void 0 ? _a : DEFAULT_SCALE_VALUE;
+    }
+    return DEFAULT_SCALE_VALUE;
+};
+const formatUnknownNumberForDisplay = (value) => {
+    if (!Number.isFinite(value)) {
+        return String(value);
+    }
+    return (0, timeline_field_utils_1.formatTimelineNumber)({
+        decimalPlaces: DISPLAY_FALLBACK_DECIMAL_PLACES,
+        fixed: false,
+        value: (0, timeline_field_utils_1.normalizeTimelineNumber)(value),
+    });
+};
+const normalizeUnknownForDisplay = (value) => {
+    if (typeof value === 'number' && Number.isFinite(value)) {
+        return (0, timeline_field_utils_1.roundToDecimalPlaces)((0, timeline_field_utils_1.normalizeTimelineNumber)(value), DISPLAY_FALLBACK_DECIMAL_PLACES);
+    }
+    if (Array.isArray(value)) {
+        return value.map(normalizeUnknownForDisplay);
+    }
+    if (value && typeof value === 'object') {
+        return Object.fromEntries(Object.entries(value).map(([key, item]) => [
+            key,
+            normalizeUnknownForDisplay(item),
+        ]));
+    }
+    return value;
+};
+const formatUnknownTimelineValueForDisplay = (value) => {
+    var _a;
+    if (typeof value === 'number') {
+        return formatUnknownNumberForDisplay(value);
+    }
+    if (value === null ||
+        typeof value === 'string' ||
+        typeof value === 'boolean' ||
+        typeof value === 'bigint') {
+        return String(value);
+    }
+    if (value === undefined) {
+        return 'undefined';
+    }
+    try {
+        return (_a = JSON.stringify(normalizeUnknownForDisplay(value))) !== null && _a !== void 0 ? _a : String(value);
+    }
+    catch (_b) {
+        return String(value);
+    }
+};
+const formatNumberTimelineFieldValueForDisplay = ({ fieldSchema, value, }) => {
+    const numericValue = getFiniteNumericValue(value);
+    if (numericValue === null) {
+        return null;
+    }
+    const stepDecimals = fieldSchema.step === undefined ? null : (0, timeline_field_utils_1.getDecimalPlaces)(fieldSchema.step);
+    if (stepDecimals === null) {
+        const digits = (0, timeline_field_utils_1.getDecimalPlaces)(numericValue);
+        return digits === 0 ? String(numericValue) : numericValue.toFixed(digits);
+    }
+    return (0, timeline_field_utils_1.formatTimelineNumber)({
+        decimalPlaces: stepDecimals,
+        fixed: true,
+        value: numericValue,
+    });
+};
+const formatRotationTimelineFieldValueForDisplay = ({ fieldSchema, value, }) => {
+    const configuredStep = fieldSchema.type === 'rotation-css' ||
+        fieldSchema.type === 'rotation-degrees'
+        ? fieldSchema.step
+        : undefined;
+    const decimalPlaces = (0, timeline_field_utils_1.getTimelineDisplayDecimalPlaces)({
+        defaultDecimalPlaces: 1,
+        step: configuredStep,
+    });
+    const degrees = fieldSchema.type === 'rotation-css'
+        ? (0, timeline_rotation_utils_1.parseCssRotationToDegrees)(String(value !== null && value !== void 0 ? value : '0deg'))
+        : getFiniteNumericValue(value);
+    if (degrees === null || !Number.isFinite(degrees)) {
+        return null;
+    }
+    return `${(0, timeline_field_utils_1.formatTimelineNumber)({
+        decimalPlaces,
+        fixed: false,
+        value: (0, timeline_field_utils_1.normalizeTimelineNumber)(degrees),
+    })}\u00B0`;
+};
+const formatScaleTimelineFieldValueForDisplay = ({ fieldSchema, value, }) => {
+    const decimalPlaces = (0, timeline_field_utils_1.getTimelineDisplayDecimalPlaces)({
+        defaultDecimalPlaces: 3,
+        step: fieldSchema.step,
+    });
+    const formatScalePart = (part) => (0, timeline_field_utils_1.formatTimelineNumber)({
+        decimalPlaces,
+        fixed: true,
+        value: part,
+    });
+    const [x, y, z] = parseScaleValueForDisplay(value);
+    const parts = x === y && z === 1 ? [x] : z === 1 ? [x, y] : [x, y, z];
+    return parts.map(formatScalePart).join(' ');
+};
+const formatTranslateCoordinateForDisplay = (value, decimalPlaces) => `${(0, timeline_field_utils_1.formatTimelineNumber)({
+    decimalPlaces,
+    fixed: false,
+    value,
+})}px`;
+const formatTranslateTimelineFieldValueForDisplay = ({ fieldSchema, value, }) => {
+    const decimalPlaces = (0, timeline_field_utils_1.getTimelineDisplayDecimalPlaces)({
+        defaultDecimalPlaces: 1,
+        step: fieldSchema.step,
+    });
+    const numericValue = getFiniteNumericValue(value);
+    if (numericValue !== null) {
+        return formatTranslateCoordinateForDisplay(numericValue, decimalPlaces);
+    }
+    const [x, y] = (0, timeline_translate_utils_1.parseTranslate)(String(value !== null && value !== void 0 ? value : '0px 0px'));
+    return (0, timeline_translate_utils_1.serializeTranslate)(x, y, decimalPlaces);
+};
+const formatTransformOriginAxisValueForDisplay = ({ decimalPlaces, unit, value, }) => {
+    return `${(0, timeline_field_utils_1.formatTimelineNumber)({
+        decimalPlaces,
+        fixed: false,
+        value,
+    })}${unit}`;
+};
+const formatTransformOriginTimelineFieldValueForDisplay = ({ fieldSchema, value, }) => {
+    const decimalPlaces = (0, timeline_field_utils_1.getTimelineDisplayDecimalPlaces)({
+        defaultDecimalPlaces: 2,
+        step: fieldSchema.step,
+    });
+    const numericValue = getFiniteNumericValue(value);
+    if (numericValue !== null) {
+        return formatTransformOriginAxisValueForDisplay({
+            decimalPlaces,
+            unit: '%',
+            value: numericValue,
+        });
+    }
+    const parsed = (0, transform_origin_utils_1.parseTransformOrigin)(value);
+    if (parsed === null) {
+        return null;
+    }
+    const xy = `${formatTransformOriginAxisValueForDisplay({
+        decimalPlaces,
+        unit: parsed.x.unit,
+        value: parsed.x.value,
+    })} ${formatTransformOriginAxisValueForDisplay({
+        decimalPlaces,
+        unit: parsed.y.unit,
+        value: parsed.y.value,
+    })}`;
+    return parsed.z === null ? xy : `${xy} ${parsed.z}`;
+};
+const formatUvCoordinatePartForDisplay = (value, decimalPlaces) => (0, timeline_field_utils_1.formatTimelineNumber)({
+    decimalPlaces,
+    fixed: true,
+    value,
+});
+const formatUvCoordinateTimelineFieldValueForDisplay = ({ fieldSchema, value, }) => {
+    const decimalPlaces = (0, timeline_field_utils_1.getTimelineDisplayDecimalPlaces)({
+        defaultDecimalPlaces: 2,
+        step: fieldSchema.step,
+    });
+    const numericValue = getFiniteNumericValue(value);
+    if (numericValue !== null) {
+        return formatUvCoordinatePartForDisplay(numericValue, decimalPlaces);
+    }
+    if (!Array.isArray(value) ||
+        value.length !== 2 ||
+        !value.every((item) => typeof item === 'number' && Number.isFinite(item))) {
+        return null;
+    }
+    return `${formatUvCoordinatePartForDisplay(value[0], decimalPlaces)}, ${formatUvCoordinatePartForDisplay(value[1], decimalPlaces)}`;
+};
+const formatTimelineFieldValueForDisplay = ({ fieldSchema, value, }) => {
+    var _a, _b, _c, _d, _e;
+    if (!fieldSchema) {
+        return formatUnknownTimelineValueForDisplay(value);
+    }
+    switch (fieldSchema.type) {
+        case 'number':
+            return ((_a = formatNumberTimelineFieldValueForDisplay({ fieldSchema, value })) !== null && _a !== void 0 ? _a : formatUnknownTimelineValueForDisplay(value));
+        case 'rotation-css':
+        case 'rotation-degrees':
+            return ((_b = formatRotationTimelineFieldValueForDisplay({ fieldSchema, value })) !== null && _b !== void 0 ? _b : formatUnknownTimelineValueForDisplay(value));
+        case 'scale':
+            return formatScaleTimelineFieldValueForDisplay({ fieldSchema, value });
+        case 'translate':
+            return ((_c = formatTranslateTimelineFieldValueForDisplay({ fieldSchema, value })) !== null && _c !== void 0 ? _c : formatUnknownTimelineValueForDisplay(value));
+        case 'transform-origin':
+            return ((_d = formatTransformOriginTimelineFieldValueForDisplay({
+                fieldSchema,
+                value,
+            })) !== null && _d !== void 0 ? _d : formatUnknownTimelineValueForDisplay(value));
+        case 'uv-coordinate':
+            return ((_e = formatUvCoordinateTimelineFieldValueForDisplay({ fieldSchema, value })) !== null && _e !== void 0 ? _e : formatUnknownTimelineValueForDisplay(value));
+        case 'array':
+        case 'boolean':
+        case 'color':
+        case 'enum':
+        case 'hidden':
+            return formatUnknownTimelineValueForDisplay(value);
+        default:
+            return formatUnknownTimelineValueForDisplay(value);
+    }
+};
+exports.formatTimelineFieldValueForDisplay = formatTimelineFieldValueForDisplay;

package/dist/components/Timeline/timeline-video-filmstrip-times.d.ts

@@ -0,0 +1,17 @@
+import type { LoopDisplay } from 'remotion';
+export type TimelineVideoFilmstripTimes = {
+    type: 'frozen';
+    timestampInSeconds: number;
+} | {
+    type: 'range';
+    fromSeconds: number;
+    toSeconds: number;
+};
+export declare const getTimelineVideoFilmstripTimes: ({ trimBefore, durationInFrames, playbackRate, fps, loopDisplay, frozenMediaFrame, }: {
+    trimBefore: number;
+    durationInFrames: number;
+    playbackRate: number;
+    fps: number;
+    loopDisplay: LoopDisplay | undefined;
+    frozenMediaFrame: number | null;
+}) => TimelineVideoFilmstripTimes;

package/dist/components/Timeline/timeline-video-filmstrip-times.js

@@ -0,0 +1,22 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getTimelineVideoFilmstripTimes = void 0;
+const timeline_utils_1 = require("@remotion/timeline-utils");
+const getTimelineVideoFilmstripTimes = ({ trimBefore, durationInFrames, playbackRate, fps, loopDisplay, frozenMediaFrame, }) => {
+    if (frozenMediaFrame !== null) {
+        return {
+            type: 'frozen',
+            timestampInSeconds: Math.max(0, frozenMediaFrame / fps),
+        };
+    }
+    const fromSeconds = trimBefore / fps;
+    const visibleDurationInFrames = (0, timeline_utils_1.shouldTileLoopDisplay)(loopDisplay) && loopDisplay
+        ? loopDisplay.durationInFrames
+        : durationInFrames;
+    return {
+        type: 'range',
+        fromSeconds,
+        toSeconds: fromSeconds + (visibleDurationInFrames * playbackRate) / fps,
+    };
+};
+exports.getTimelineVideoFilmstripTimes = getTimelineVideoFilmstripTimes;

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

@@ -1,8 +1,51 @@
-import type { OverrideIdToNodePaths, PropStatuses, TSequence } from 'remotion';
+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';
 export type EasingSelection = TimelineEasingSelection;
-export type TimelineEasingValue = 'linear' | [number, number, number, number];
+export type TimelineEasingValue = CanUpdateSequencePropStatusEasing;
+export type SelectedEasingUpdate = {
+    readonly type: 'sequence';
+    readonly fileName: string;
+    readonly nodePath: SequencePropsSubscriptionKey;
+    readonly fieldKey: string;
+    readonly schema: InteractivitySchema;
+    readonly segmentIndex: number;
+    readonly currentEasing: TimelineEasingValue;
+    readonly propStatus: CanUpdateSequencePropStatusKeyframed;
+} | {
+    readonly type: 'effect';
+    readonly fileName: string;
+    readonly nodePath: SequencePropsSubscriptionKey;
+    readonly effectIndex: number;
+    readonly fieldKey: string;
+    readonly schema: InteractivitySchema;
+    readonly segmentIndex: number;
+    readonly currentEasing: TimelineEasingValue;
+    readonly propStatus: CanUpdateSequencePropStatusKeyframed;
+};
+export declare const getSelectedEasingUpdate: ({ selection, sequences, overrideIdsToNodePaths, propStatuses, }: {
+    selection: {
+        readonly type: "easing";
+        readonly nodePathInfo: import("../../helpers/get-timeline-sequence-sort-key").SequenceNodePathInfo;
+        readonly fromFrame: number;
+        readonly toFrame: number;
+        readonly segmentIndex: number;
+    };
+    sequences: TSequence[];
+    overrideIdsToNodePaths: OverrideIdToNodePaths;
+    propStatuses: PropStatuses;
+}) => SelectedEasingUpdate | null;
+export declare const getSelectedEasingUpdates: ({ selections, sequences, overrideIdsToNodePaths, propStatuses, }: {
+    readonly selections: readonly TimelineSelection[];
+    readonly sequences: TSequence[];
+    readonly overrideIdsToNodePaths: OverrideIdToNodePaths;
+    readonly propStatuses: PropStatuses;
+}) => SelectedEasingUpdate[];
+export declare const makeEasingDragOverride: ({ status, segmentIndex, easing, }: {
+    readonly status: CanUpdateSequencePropStatusKeyframed;
+    readonly segmentIndex: number;
+    readonly easing: CanUpdateSequencePropStatusEasing;
+}) => DragOverrideValue;
 export declare const getEasingSelections: (selections: readonly TimelineSelection[]) => {
     readonly type: "easing";
     readonly nodePathInfo: import("../../helpers/get-timeline-sequence-sort-key").SequenceNodePathInfo;
@@ -21,7 +64,7 @@ export declare const getTimelineEasingValueForSelection: ({ selection, sequences
     sequences: TSequence[];
     overrideIdsToNodePaths: OverrideIdToNodePaths;
     propStatuses: PropStatuses;
-}) => TimelineEasingValue | null;
+}) => CanUpdateSequencePropStatusEasing | null;
 export declare const updateSelectedTimelineEasings: ({ selections, sequences, overrideIdsToNodePaths, propStatuses, setPropStatuses, clientId, easing, }: {
     selections: readonly TimelineSelection[];
     sequences: TSequence[];
@@ -29,5 +72,5 @@ export declare const updateSelectedTimelineEasings: ({ selections, sequences, ov
     propStatuses: PropStatuses;
     setPropStatuses: SetPropStatuses;
     clientId: string;
-    easing: TimelineEasingValue;
+    easing: CanUpdateSequencePropStatusEasing;
 }) => Promise<void> | null;