@remotion/studio 4.0.482 → 4.0.484

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

@@ -20,6 +20,7 @@ const saveSequenceProps = ({ changes, setPropStatuses, clientId, undoLabel, redo
                 previous: prev,
                 fieldKey: change.fieldKey,
                 value: change.value,
+                defaultValue: change.defaultValue,
                 schema: change.schema,
             }),
             apiCall: () => (0, call_api_1.callApi)('/api/save-sequence-props', {
@@ -45,6 +46,7 @@ const saveSequenceProps = ({ changes, setPropStatuses, clientId, undoLabel, redo
             previous: prev,
             fieldKey: change.fieldKey,
             value: change.value,
+            defaultValue: change.defaultValue,
             schema: change.schema,
         }));
     }

package/dist/components/Timeline/should-subscribe-to-sequence-props.d.ts

@@ -0,0 +1,4 @@
+import type { TSequence } from 'remotion';
+export declare const shouldSubscribeToSequenceProps: (sequence: TSequence, previewConnected: boolean) => sequence is TSequence & {
+    readonly controls: import("remotion").SequenceControls;
+};

package/dist/components/Timeline/should-subscribe-to-sequence-props.js

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.shouldSubscribeToSequenceProps = void 0;
+const shouldSubscribeToSequenceProps = (sequence, previewConnected) => {
+    return (sequence.showInTimeline &&
+        Boolean(sequence.controls) &&
+        previewConnected &&
+        Boolean(sequence.getStack()));
+};
+exports.shouldSubscribeToSequenceProps = shouldSubscribeToSequenceProps;

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

@@ -23,6 +23,7 @@ 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

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.updateSelectedTimelineEasings = exports.getTimelineEasingValueForSelection = exports.getEasingSelections = exports.makeEasingDragOverride = exports.getSelectedEasingUpdates = exports.getSelectedEasingUpdate = void 0;
+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 remotion_1 = require("remotion");
 const call_update_keyframe_settings_1 = require("./call-update-keyframe-settings");
@@ -8,6 +8,7 @@ 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;
@@ -33,7 +34,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' ||
-            !canEditEasingForInterpolationFunction(sequencePropStatus.interpolationFunction)) {
+            !(0, exports.canEditEasingForInterpolationFunction)(sequencePropStatus.interpolationFunction)) {
             return null;
         }
         return {
@@ -60,7 +61,7 @@ const getSelectedEasingUpdate = ({ selection, sequences, overrideIdsToNodePaths,
         ? effectStatus.props[field.fieldKey]
         : null;
     if ((effectPropStatus === null || effectPropStatus === void 0 ? void 0 : effectPropStatus.status) !== 'keyframed' ||
-        !canEditEasingForInterpolationFunction(effectPropStatus.interpolationFunction)) {
+        !(0, exports.canEditEasingForInterpolationFunction)(effectPropStatus.interpolationFunction)) {
         return null;
     }
     return {

package/dist/components/Timeline/use-sequence-freeze-frame-menu-item.d.ts

@@ -1,6 +1,7 @@
 import type { CanUpdateSequencePropStatus, SequencePropsSubscriptionKey, TSequence } from 'remotion';
 import type { ComboboxValue } from '../NewComposition/ComboBox';
 import { type SetPropStatuses } from './save-sequence-prop';
+export declare const shouldShowFreezeFrameMenuItem: (sequence: TSequence) => boolean;
 export declare const useSequenceFreezeFrameMenuItem: ({ clientId, nodePath, propStatusesForOverride, sequence, sequenceFrameOffset, setPropStatuses, timelinePosition, validatedSource, }: {
     readonly clientId: string | null;
     readonly nodePath: SequencePropsSubscriptionKey | null;
@@ -10,4 +11,4 @@ export declare const useSequenceFreezeFrameMenuItem: ({ clientId, nodePath, prop
     readonly setPropStatuses: SetPropStatuses;
     readonly timelinePosition: number;
     readonly validatedSource: string | null;
-}) => ComboboxValue;
+}) => ComboboxValue | null;

package/dist/components/Timeline/use-sequence-freeze-frame-menu-item.js

@@ -1,8 +1,12 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.useSequenceFreezeFrameMenuItem = void 0;
+exports.useSequenceFreezeFrameMenuItem = exports.shouldShowFreezeFrameMenuItem = void 0;
 const react_1 = require("react");
 const save_sequence_prop_1 = require("./save-sequence-prop");
+const shouldShowFreezeFrameMenuItem = (sequence) => {
+    return sequence.type !== 'audio';
+};
+exports.shouldShowFreezeFrameMenuItem = shouldShowFreezeFrameMenuItem;
 const useSequenceFreezeFrameMenuItem = ({ clientId, nodePath, propStatusesForOverride, sequence, sequenceFrameOffset, setPropStatuses, timelinePosition, validatedSource, }) => {
     const freezeStatus = propStatusesForOverride === null || propStatusesForOverride === void 0 ? void 0 : propStatusesForOverride.freeze;
     const isFrozen = (freezeStatus === null || freezeStatus === void 0 ? void 0 : freezeStatus.status) === 'static' &&
@@ -57,17 +61,19 @@ const useSequenceFreezeFrameMenuItem = ({ clientId, nodePath, propStatusesForOve
         timelinePosition,
         validatedSource,
     ]);
-    return (0, react_1.useMemo)(() => ({
-        type: 'item',
-        id: 'toggle-freeze-frame',
-        keyHint: null,
-        label: isFrozen ? 'Unfreeze frame' : 'Freeze frame',
-        leftItem: null,
-        disabled: !canToggleFreeze,
-        onClick: onToggleFreezeFrame,
-        quickSwitcherLabel: null,
-        subMenu: null,
-        value: 'toggle-freeze-frame',
-    }), [canToggleFreeze, isFrozen, onToggleFreezeFrame]);
+    return (0, react_1.useMemo)(() => (0, exports.shouldShowFreezeFrameMenuItem)(sequence)
+        ? {
+            type: 'item',
+            id: 'toggle-freeze-frame',
+            keyHint: null,
+            label: isFrozen ? 'Unfreeze frame' : 'Freeze frame',
+            leftItem: null,
+            disabled: !canToggleFreeze,
+            onClick: onToggleFreezeFrame,
+            quickSwitcherLabel: null,
+            subMenu: null,
+            value: 'toggle-freeze-frame',
+        }
+        : null, [canToggleFreeze, isFrozen, onToggleFreezeFrame, sequence]);
 };
 exports.useSequenceFreezeFrameMenuItem = useSequenceFreezeFrameMenuItem;

package/dist/components/element-drag-and-drop.d.ts

@@ -0,0 +1,3 @@
+import { type ElementDragData } from '@remotion/studio-shared';
+export declare const hasElementDragType: (dataTransfer: DataTransfer | null) => boolean;
+export declare const getElementDragData: (dataTransfer: DataTransfer | null) => ElementDragData | null;

package/dist/components/element-drag-and-drop.js

@@ -0,0 +1,30 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getElementDragData = exports.hasElementDragType = void 0;
+const studio_shared_1 = require("@remotion/studio-shared");
+const hasElementDragType = (dataTransfer) => {
+    var _a;
+    return Array.from((_a = dataTransfer === null || dataTransfer === void 0 ? void 0 : dataTransfer.types) !== null && _a !== void 0 ? _a : []).includes(studio_shared_1.ELEMENT_DRAG_MIME_TYPE);
+};
+exports.hasElementDragType = hasElementDragType;
+const getElementDragData = (dataTransfer) => {
+    if (!dataTransfer) {
+        return null;
+    }
+    for (const type of [
+        studio_shared_1.ELEMENT_DRAG_MIME_TYPE,
+        'application/json',
+        'text/plain',
+    ]) {
+        const raw = dataTransfer.getData(type);
+        if (!raw) {
+            continue;
+        }
+        const parsed = (0, studio_shared_1.parseElementDragData)(raw);
+        if (parsed) {
+            return parsed;
+        }
+    }
+    return null;
+};
+exports.getElementDragData = getElementDragData;

package/dist/components/import-assets.d.ts

@@ -72,3 +72,14 @@ export declare const insertComponent: ({ component, compositionFile, composition
     compositionId: string;
     dropPosition: InsertElementDropPosition | null;
 }) => Promise<void>;
+export declare const insertElement: ({ compositionFile, compositionId, dropPosition, element, }: {
+    compositionFile: string;
+    compositionId: string;
+    dropPosition: InsertElementDropPosition | null;
+    element: {
+        slug: string;
+        displayName: string;
+        sourceCode: string;
+        dimensions: import("@remotion/studio-shared").ComponentDimensions;
+    };
+}) => Promise<void>;

package/dist/components/import-assets.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.insertComponent = exports.insertExistingAssets = exports.insertRemoteAudio = exports.importRemoteAsset = exports.importAssets = exports.pickFilesToImport = exports.getComponentDimensions = exports.getAssetElementFromPath = exports.getAssetElement = void 0;
+exports.insertElement = exports.insertComponent = exports.insertExistingAssets = exports.insertRemoteAudio = exports.importRemoteAsset = exports.importAssets = exports.pickFilesToImport = exports.getComponentDimensions = exports.getAssetElementFromPath = exports.getAssetElement = void 0;
 const media_utils_1 = require("@remotion/media-utils");
 const studio_shared_1 = require("@remotion/studio-shared");
 const remotion_1 = require("remotion");
@@ -569,3 +569,25 @@ const insertComponent = async ({ component, compositionFile, compositionId, drop
     }
 };
 exports.insertComponent = insertComponent;
+const insertElement = async ({ compositionFile, compositionId, dropPosition, element, }) => {
+    try {
+        const response = await (0, call_api_1.callApi)('/api/insert-element', {
+            compositionFile,
+            compositionId,
+            element,
+            position: getCenteredPosition({
+                dimensions: element.dimensions,
+                dropPosition,
+            }),
+        });
+        if (!response.success) {
+            (0, NotificationCenter_1.showNotification)(`Could not add Element: ${response.reason}`, 4000);
+            return;
+        }
+        (0, NotificationCenter_1.showNotification)(`Added ${element.displayName} to source file`, 2000);
+    }
+    catch (error) {
+        (0, NotificationCenter_1.showNotification)(`Could not add Element: ${error instanceof Error ? error.message : String(error)}`, 4000);
+    }
+};
+exports.insertElement = insertElement;

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

@@ -1,13 +1,35 @@
 import type { CanUpdateSequencePropStatusKeyframed, CanUpdateSequencePropStatusStatic, GetEffectDragOverrides, PropStatuses, InteractivitySchemaField, SequencePropsSubscriptionKey, InteractivitySchema, TSequence } from 'remotion';
 import { type OutlinePoint } from './selected-outline-geometry';
 export type UvCoordinate = readonly [number, number];
+type UvEllipseDimensions = {
+    readonly width: number;
+    readonly height: number;
+};
 export type UvCoordinateFieldSchema = Extract<InteractivitySchemaField, {
     type: 'uv-coordinate';
 }>;
+export type NumericUvEllipseFieldSchema = Extract<InteractivitySchemaField, {
+    type: 'number' | 'rotation-degrees';
+}>;
+export type UvEllipseControlField = {
+    readonly fieldKey: string;
+    readonly fieldSchema: NumericUvEllipseFieldSchema;
+    readonly fieldDefault: number | null | undefined;
+    readonly propStatus: CanUpdateSequencePropStatusStatic | CanUpdateSequencePropStatusKeyframed;
+    readonly value: number;
+};
+export type UvEllipseControls = {
+    readonly width: UvEllipseControlField;
+    readonly height: UvEllipseControlField;
+    readonly rotation: UvEllipseControlField | null;
+    readonly innerScale: UvEllipseControlField | null;
+};
 export type SelectedOutlineUvHandle = {
     readonly clientId: string;
     readonly propStatus: CanUpdateSequencePropStatusStatic | CanUpdateSequencePropStatusKeyframed;
     readonly effectIndex: number;
+    readonly effectValues: Record<string, unknown>;
+    readonly ellipseControls: UvEllipseControls | null;
     readonly fieldDefault: UvCoordinate | undefined;
     readonly fieldKey: string;
     readonly fieldSchema: UvCoordinateFieldSchema;
@@ -17,12 +39,49 @@ export type SelectedOutlineUvHandle = {
     readonly sourceFrame: number;
     readonly value: UvCoordinate;
 };
-type UvConnectionHandle = Pick<SelectedOutlineUvHandle, 'effectIndex' | 'fieldKey' | 'fieldSchema' | 'value'>;
+type UvConnectionHandle = Pick<SelectedOutlineUvHandle, 'effectIndex' | 'fieldKey' | 'fieldSchema' | 'value'> & {
+    readonly effectValues?: Record<string, unknown>;
+    readonly ellipseControls?: UvEllipseControls | null;
+};
 type UvHandleConnectionLine = {
     readonly key: string;
     readonly from: OutlinePoint;
     readonly to: OutlinePoint;
 };
+type UvHandleConnectionEllipse = {
+    readonly key: string;
+    readonly points: readonly OutlinePoint[];
+};
+export type UvEllipseResizeAxis = 'width' | 'height';
+export type UvEllipseResizeControl = {
+    readonly key: string;
+    readonly axis: UvEllipseResizeAxis;
+    readonly field: UvEllipseControlField;
+    readonly position: OutlinePoint;
+    readonly cursor: string;
+};
+export type UvEllipseRotationControl = {
+    readonly key: string;
+    readonly field: UvEllipseControlField;
+    readonly position: OutlinePoint;
+    readonly cursor: string;
+};
+export type UvEllipseStartControl = {
+    readonly key: string;
+    readonly field: UvEllipseControlField;
+    readonly position: OutlinePoint;
+    readonly cursor: string;
+};
+export type UvEllipseInteractiveControls = {
+    readonly handle: SelectedOutlineUvHandle;
+    readonly center: OutlinePoint;
+    readonly width: number;
+    readonly height: number;
+    readonly rotation: number;
+    readonly resize: readonly UvEllipseResizeControl[];
+    readonly rotationControl: UvEllipseRotationControl | null;
+    readonly startControl: UvEllipseStartControl | null;
+};
 type SelectedEffectFields = {
     readonly allFields: boolean;
     readonly fieldKeys: ReadonlySet<string>;
@@ -33,9 +92,20 @@ export declare const getUvHandleConnectionLines: ({ handles, points, }: {
     readonly handles: readonly UvConnectionHandle[];
     readonly points: readonly [OutlinePoint, OutlinePoint, OutlinePoint, OutlinePoint];
 }) => UvHandleConnectionLine[];
+export declare const getUvHandleConnectionEllipses: ({ handles, dimensions, points, }: {
+    readonly handles: readonly UvConnectionHandle[];
+    readonly dimensions?: UvEllipseDimensions | null | undefined;
+    readonly points: readonly [OutlinePoint, OutlinePoint, OutlinePoint, OutlinePoint];
+}) => UvHandleConnectionEllipse[];
+export declare const getUvEllipseInteractiveControls: ({ handles, dimensions, points, }: {
+    readonly handles: readonly SelectedOutlineUvHandle[];
+    readonly dimensions?: UvEllipseDimensions | null | undefined;
+    readonly points: readonly [OutlinePoint, OutlinePoint, OutlinePoint, OutlinePoint];
+}) => UvEllipseInteractiveControls[];
 export declare const getUvCoordinateForPoint: (points: readonly [OutlinePoint, OutlinePoint, OutlinePoint, OutlinePoint], point: OutlinePoint) => UvCoordinate;
 export declare function constrainUv(value: UvCoordinate, schema: UvCoordinateFieldSchema): UvCoordinate;
 export declare function roundUvCoordinate(value: UvCoordinate, schema: UvCoordinateFieldSchema): UvCoordinate;
+export declare const roundNumericUvEllipseValue: (value: number, schema: NumericUvEllipseFieldSchema) => number;
 export declare const getSelectedUvHandles: ({ propStatuses, clientId, getEffectDragOverrides, nodePath, selectedEffects, sequence, sourceFrame, }: {
     readonly propStatuses: PropStatuses;
     readonly clientId: string | null;