@remotion/studio-shared 4.0.477 → 4.0.478

package/dist/api-requests.d.ts

@@ -294,6 +294,19 @@ export type ReorderEffectResponse = {
     reason: string;
     stack: string;
 };
+export type DuplicateEffectRequestItem = {
+    fileName: string;
+    sequenceNodePath: SequencePropsSubscriptionKey;
+    effectIndex: number;
+};
+export type DuplicateEffectRequest = DuplicateEffectRequestItem[];
+export type DuplicateEffectResponse = {
+    success: true;
+} | {
+    success: false;
+    reason: string;
+    stack: string;
+};
 export type ReorderSequencePosition = 'before' | 'after';
 export type ReorderSequenceRequest = {
     fileName: string;
@@ -490,7 +503,7 @@ export type InsertableCompositionElement = {
     position: InsertableCompositionElementPosition | null;
 } | {
     type: 'asset';
-    assetType: 'image' | 'video' | 'gif' | 'audio';
+    assetType: 'image' | 'video' | 'gif' | 'animated-image' | 'audio';
     src: string;
     srcType: 'static' | 'remote';
     dimensions: {
@@ -586,6 +599,7 @@ export type ApiRoutes = {
     '/api/save-effect-props': ReqAndRes<SaveEffectPropsRequest, SaveEffectPropsResponse>;
     '/api/add-effect': ReqAndRes<AddEffectRequest, AddEffectResponse>;
     '/api/reorder-effect': ReqAndRes<ReorderEffectRequest, ReorderEffectResponse>;
+    '/api/duplicate-effect': ReqAndRes<DuplicateEffectRequest, DuplicateEffectResponse>;
     '/api/reorder-sequence': ReqAndRes<ReorderSequenceRequest, ReorderSequenceResponse>;
     '/api/delete-keyframes': ReqAndRes<DeleteKeyframesRequest, DeleteKeyframesResponse>;
     '/api/move-keyframes': ReqAndRes<MoveKeyframesRequest, MoveKeyframesResponse>;

package/dist/component-drag-data.d.ts

@@ -3,11 +3,16 @@ export type ComponentProp = {
     name: string;
     value: string | number | boolean;
 };
+export type ComponentDimensions = {
+    height: number;
+    width: number;
+};
 export type ComponentDragData = {
     type: 'remotion-component';
     version: 1;
     component: {
         componentName: string;
+        dimensions?: ComponentDimensions;
         importName: string;
         importPath: string;
         props: ComponentProp[];
@@ -18,8 +23,9 @@ export declare const isComponentImportPath: (value: unknown) => value is string;
 export declare const isComponentPropName: (value: unknown) => value is string;
 export declare const isComponentProp: (value: unknown) => value is ComponentProp;
 export declare const areComponentProps: (value: unknown) => value is ComponentProp[];
-export declare const makeComponentDragData: ({ componentName, importName, importPath, props, }: {
+export declare const makeComponentDragData: ({ componentName, dimensions, importName, importPath, props, }: {
     componentName: string;
+    dimensions?: ComponentDimensions | null | undefined;
     importName: string;
     importPath: string;
     props: ComponentProp[];

package/dist/component-drag-data.js

@@ -51,12 +51,24 @@ const areComponentProps = (value) => {
     return true;
 };
 exports.areComponentProps = areComponentProps;
-const makeComponentDragData = ({ componentName, importName, importPath, props, }) => {
+const isComponentDimensions = (value) => {
+    if (!isRecord(value)) {
+        return false;
+    }
+    return (typeof value.width === 'number' &&
+        Number.isFinite(value.width) &&
+        value.width >= 0 &&
+        typeof value.height === 'number' &&
+        Number.isFinite(value.height) &&
+        value.height >= 0);
+};
+const makeComponentDragData = ({ componentName, dimensions, importName, importPath, props, }) => {
     return {
         type: 'remotion-component',
         version: 1,
         component: {
             componentName,
+            ...(dimensions ? { dimensions } : {}),
             importName,
             importPath,
             props,
@@ -76,11 +88,12 @@ const parseComponentDragData = (value) => {
         if (!isRecord(parsed.component)) {
             return null;
         }
-        const { componentName, importName, importPath, props } = parsed.component;
+        const { componentName, dimensions, importName, importPath, props } = parsed.component;
         if (!(0, exports.isComponentIdentifier)(componentName) ||
             !(0, exports.isComponentIdentifier)(importName) ||
             !(0, exports.isComponentImportPath)(importPath) ||
-            !(0, exports.areComponentProps)(props)) {
+            !(0, exports.areComponentProps)(props) ||
+            (typeof dimensions !== 'undefined' && !isComponentDimensions(dimensions))) {
             return null;
         }
         return {
@@ -88,6 +101,7 @@ const parseComponentDragData = (value) => {
             version: 1,
             component: {
                 componentName,
+                ...(dimensions ? { dimensions } : {}),
                 importName,
                 importPath,
                 props,

package/dist/detect-file-type.d.ts

@@ -47,6 +47,10 @@ export type PngType = {
     type: 'png';
     dimensions: FileDimensions | null;
 };
+export type ApngType = {
+    type: 'apng';
+    dimensions: FileDimensions | null;
+};
 export type JpegType = {
     type: 'jpeg';
     dimensions: FileDimensions | null;
@@ -65,7 +69,7 @@ export type PdfType = {
 export type UnknownType = {
     type: 'unknown';
 };
-export type FileType = JpegType | WebpType | RiffType | WebmType | WavType | PdfType | AacType | IsoBaseMediaType | TransportStreamType | Mp3Type | GifType | PngType | BmpType | AacType | FlacType | M3uType | UnknownType;
-export type ImageFileType = JpegType | WebpType | GifType | PngType | BmpType;
+export type FileType = JpegType | WebpType | RiffType | WebmType | WavType | PdfType | AacType | IsoBaseMediaType | TransportStreamType | Mp3Type | GifType | PngType | ApngType | BmpType | AacType | FlacType | M3uType | UnknownType;
+export type ImageFileType = JpegType | WebpType | GifType | PngType | ApngType | BmpType;
 export declare const isImageFileType: (fileType: FileType) => fileType is ImageFileType;
 export declare const detectFileType: (data: Uint8Array<ArrayBufferLike>) => FileType;

package/dist/detect-file-type.js

@@ -69,12 +69,15 @@ const isM3u = (data) => {
     return new TextDecoder('utf-8').decode(data.slice(0, 7)) === '#EXTM3U';
 };
 exports.isM3u = isM3u;
+const pngSignature = [137, 80, 78, 71, 13, 10, 26, 10];
+const acTLChunkType = new Uint8Array([0x61, 0x63, 0x54, 0x4c]);
+const idatChunkType = new Uint8Array([0x49, 0x44, 0x41, 0x54]);
+const iendChunkType = new Uint8Array([0x49, 0x45, 0x4e, 0x44]);
 const getPngDimensions = (pngData) => {
     if (pngData.length < 24) {
         return null;
     }
     const view = new DataView(pngData.buffer, pngData.byteOffset);
-    const pngSignature = [137, 80, 78, 71, 13, 10, 26, 10];
     for (let i = 0; i < 8; i++) {
         if (pngData[i] !== pngSignature[i]) {
             return null;
@@ -85,11 +88,38 @@ const getPngDimensions = (pngData) => {
         height: view.getUint32(20, false),
     };
 };
+const hasApngAnimationControlChunk = (pngData) => {
+    if (pngData.length < 16) {
+        return false;
+    }
+    const view = new DataView(pngData.buffer, pngData.byteOffset, pngData.byteLength);
+    let offset = 8;
+    while (offset + 8 <= pngData.length) {
+        const chunkLength = view.getUint32(offset, false);
+        const chunkType = pngData.subarray(offset + 4, offset + 8);
+        if ((0, exports.matchesPattern)(acTLChunkType)(chunkType)) {
+            return true;
+        }
+        if ((0, exports.matchesPattern)(idatChunkType)(chunkType) ||
+            (0, exports.matchesPattern)(iendChunkType)(chunkType)) {
+            return false;
+        }
+        const nextOffset = offset + 12 + chunkLength;
+        if (nextOffset <= offset) {
+            return false;
+        }
+        offset = nextOffset;
+    }
+    return false;
+};
 const isPng = (data) => {
     const pngPattern = new Uint8Array([0x89, 0x50, 0x4e, 0x47]);
     if ((0, exports.matchesPattern)(pngPattern)(data.subarray(0, 4))) {
         const png = getPngDimensions(data);
-        return { dimensions: png, type: 'png' };
+        return {
+            dimensions: png,
+            type: hasApngAnimationControlChunk(data) ? 'apng' : 'png',
+        };
     }
     return null;
 };
@@ -235,6 +265,7 @@ const isImageFileType = (fileType) => {
         fileType.type === 'webp' ||
         fileType.type === 'gif' ||
         fileType.type === 'png' ||
+        fileType.type === 'apng' ||
         fileType.type === 'bmp');
 };
 exports.isImageFileType = isImageFileType;

package/dist/index.d.ts

@@ -1,8 +1,8 @@
 export { splitAnsi, stripAnsi } from './ansi';
-export { AddEffectKeyframeRequest, AddEffectKeyframeResponse, AddKeyframesRequest, AddKeyframesResponse, AddEffectRequest, AddEffectResponse, AddRenderRequest, AddSequenceKeyframeRequest, AddSequenceKeyframeResponse, ApiRoutes, ApplyCodemodRequest, ApplyCodemodResponse, ApplyVisualControlRequest, ApplyVisualControlResponse, CanUpdateDefaultPropsResponse, CanUpdateSequencePropsRequest, CancelRenderRequest, CancelRenderResponse, CompositionComponentInfoRequest, CompositionComponentInfoResponse, CopyStillToClipboardRequest, DeleteEffectKeyframe, DeleteEffectRequest, DeleteEffectRequestItem, DeleteEffectResponse, DeleteJsxNodeRequest, DeleteJsxNodeRequestItem, DeleteJsxNodeResponse, DeleteKeyframesRequest, DeleteKeyframesResponse, DeleteSequenceKeyframe, DeleteStaticFileRequest, DeleteStaticFileResponse, DownloadRemoteAssetRequest, DownloadRemoteAssetResponse, DuplicateJsxNodeRequest, DuplicateJsxNodeResponse, InsertJsxElementRequest, InsertJsxElementResponse, InsertableCompositionElement, InsertableCompositionElementPosition, InstallPackageRequest, InstallPackageResponse, LogStudioErrorRequest, LogStudioErrorResponse, MoveEffectKeyframe, MoveKeyframesRequest, MoveKeyframesResponse, MoveSequenceKeyframe, OpenInEditorRequest, OpenInEditorResponse, OpenInFileExplorerRequest, PasteEffectsRequest, PasteEffectsResponse, ProjectInfoRequest, ProjectInfoResponse, RedoRequest, RedoResponse, RemoveRenderRequest, RenameStaticFileRequest, RenameStaticFileResponse, ReorderEffectRequest, ReorderEffectResponse, ReorderSequencePosition, ReorderSequenceRequest, ReorderSequenceResponse, RestartStudioRequest, RestartStudioResponse, SaveEffectPropsRequest, SaveEffectPropsResponse, SaveSequencePropEdit, SaveSequencePropsRequest, SaveSequencePropsResponse, SaveSequencePropsResult, SimpleDiff, SubscribeToDefaultPropsRequest, SubscribeToDefaultPropsResponse, SubscribeToFileExistenceRequest, SubscribeToFileExistenceResponse, SubscribeToSequencePropsRequest, SubscribeToSequencePropsResponse, UndoRequest, UndoResponse, UnsubscribeFromDefaultPropsRequest, UnsubscribeFromFileExistenceRequest, UnsubscribeFromSequencePropsRequest, UpdateAvailableRequest, UpdateAvailableResponse, UpdateDefaultPropsRequest, UpdateDefaultPropsResponse, UpdateEffectKeyframeSettingsRequest, UpdateEffectKeyframeSettingsResponse, UpdateSequenceKeyframeSettingsRequest, UpdateSequenceKeyframeSettingsResponse, type KeyframeSettings, type AddEffectKeyframe, type AddSequenceKeyframe, } from './api-requests';
+export { AddEffectKeyframeRequest, AddEffectKeyframeResponse, AddKeyframesRequest, AddKeyframesResponse, AddEffectRequest, AddEffectResponse, AddRenderRequest, AddSequenceKeyframeRequest, AddSequenceKeyframeResponse, ApiRoutes, ApplyCodemodRequest, ApplyCodemodResponse, ApplyVisualControlRequest, ApplyVisualControlResponse, CanUpdateDefaultPropsResponse, CanUpdateSequencePropsRequest, CancelRenderRequest, CancelRenderResponse, CompositionComponentInfoRequest, CompositionComponentInfoResponse, CopyStillToClipboardRequest, DeleteEffectKeyframe, DeleteEffectRequest, DeleteEffectRequestItem, DeleteEffectResponse, DeleteJsxNodeRequest, DeleteJsxNodeRequestItem, DeleteJsxNodeResponse, DeleteKeyframesRequest, DeleteKeyframesResponse, DeleteSequenceKeyframe, DeleteStaticFileRequest, DeleteStaticFileResponse, DownloadRemoteAssetRequest, DownloadRemoteAssetResponse, DuplicateEffectRequest, DuplicateEffectRequestItem, DuplicateEffectResponse, DuplicateJsxNodeRequest, DuplicateJsxNodeResponse, InsertJsxElementRequest, InsertJsxElementResponse, InsertableCompositionElement, InsertableCompositionElementPosition, InstallPackageRequest, InstallPackageResponse, LogStudioErrorRequest, LogStudioErrorResponse, MoveEffectKeyframe, MoveKeyframesRequest, MoveKeyframesResponse, MoveSequenceKeyframe, OpenInEditorRequest, OpenInEditorResponse, OpenInFileExplorerRequest, PasteEffectsRequest, PasteEffectsResponse, ProjectInfoRequest, ProjectInfoResponse, RedoRequest, RedoResponse, RemoveRenderRequest, RenameStaticFileRequest, RenameStaticFileResponse, ReorderEffectRequest, ReorderEffectResponse, ReorderSequencePosition, ReorderSequenceRequest, ReorderSequenceResponse, RestartStudioRequest, RestartStudioResponse, SaveEffectPropsRequest, SaveEffectPropsResponse, SaveSequencePropEdit, SaveSequencePropsRequest, SaveSequencePropsResponse, SaveSequencePropsResult, SimpleDiff, SubscribeToDefaultPropsRequest, SubscribeToDefaultPropsResponse, SubscribeToFileExistenceRequest, SubscribeToFileExistenceResponse, SubscribeToSequencePropsRequest, SubscribeToSequencePropsResponse, UndoRequest, UndoResponse, UnsubscribeFromDefaultPropsRequest, UnsubscribeFromFileExistenceRequest, UnsubscribeFromSequencePropsRequest, UpdateAvailableRequest, UpdateAvailableResponse, UpdateDefaultPropsRequest, UpdateDefaultPropsResponse, UpdateEffectKeyframeSettingsRequest, UpdateEffectKeyframeSettingsResponse, UpdateSequenceKeyframeSettingsRequest, UpdateSequenceKeyframeSettingsResponse, type KeyframeSettings, type AddEffectKeyframe, type AddSequenceKeyframe, } from './api-requests';
 export { ASSET_DRAG_MIME_TYPE, makeAssetDragData, parseAssetDragData, type AssetDragData, } from './asset-drag-data';
 export type { ApplyVisualControlCodemod, RecastCodemod } from './codemods';
-export { COMPONENT_DRAG_MIME_TYPE, areComponentProps, isComponentIdentifier, isComponentImportPath, makeComponentDragData, parseComponentDragData, type ComponentDragData, type ComponentProp, } from './component-drag-data';
+export { COMPONENT_DRAG_MIME_TYPE, areComponentProps, isComponentIdentifier, isComponentImportPath, makeComponentDragData, parseComponentDragData, type ComponentDimensions, type ComponentDragData, type ComponentProp, } from './component-drag-data';
 export { DEFAULT_BUFFER_STATE_DELAY_IN_MILLISECONDS } from './default-buffer-state-delay-in-milliseconds';
 export { KEYFRAME_EASING_PRESETS, type KeyframeEasingPreset, } from './keyframe-easing-presets';
 export { detectFileType, isImageFileType, type FileDimensions, type FileType, type ImageFileType, } from './detect-file-type';

package/dist/required-package.js

@@ -26,6 +26,9 @@ const getRequiredPackageForInsertableElement = (element) => {
     if (element.assetType === 'gif') {
         return '@remotion/gif';
     }
+    if (element.assetType === 'animated-image') {
+        return null;
+    }
     return null;
 };
 exports.getRequiredPackageForInsertableElement = getRequiredPackageForInsertableElement;

package/package.json

@@ -3,7 +3,7 @@
 		"url": "https://github.com/remotion-dev/remotion/tree/main/packages/studio-shared"
 	},
 	"name": "@remotion/studio-shared",
-	"version": "4.0.477",
+	"version": "4.0.478",
 	"description": "Internal package for shared objects between the Studio backend and frontend",
 	"main": "dist",
 	"scripts": {
@@ -20,11 +20,11 @@
 		"url": "https://github.com/remotion-dev/remotion/issues"
 	},
 	"dependencies": {
-		"remotion": "4.0.477"
+		"remotion": "4.0.478"
 	},
 	"devDependencies": {
-		"@remotion/renderer": "4.0.477",
-		"@remotion/eslint-config-internal": "4.0.477",
+		"@remotion/renderer": "4.0.478",
+		"@remotion/eslint-config-internal": "4.0.478",
 		"eslint": "9.19.0",
 		"@typescript/native-preview": "7.0.0-dev.20260217.1"
 	},

package/dist/shape-drag-data.d.ts

@@ -1,22 +0,0 @@
-export declare const SHAPE_DRAG_MIME_TYPE = "application/vnd.remotion.shape+json";
-export declare const shapeNames: readonly ["Arrow", "Circle", "Ellipse", "Heart", "Pie", "Polygon", "Rect", "Star", "Triangle"];
-export type ShapeName = (typeof shapeNames)[number];
-export type ShapeAttribute = {
-    name: string;
-    value: string | number | boolean;
-};
-export type ShapeDragData = {
-    type: 'remotion-shape';
-    version: 1;
-    shape: ShapeName;
-    attributes: ShapeAttribute[];
-};
-export declare const isShapeName: (value: unknown) => value is "Arrow" | "Circle" | "Ellipse" | "Heart" | "Pie" | "Polygon" | "Rect" | "Star" | "Triangle";
-export declare const isShapeAttributeName: (value: unknown) => value is string;
-export declare const isShapeAttribute: (value: unknown) => value is ShapeAttribute;
-export declare const areShapeAttributes: (value: unknown) => value is ShapeAttribute[];
-export declare const makeShapeDragData: ({ attributes, shape, }: {
-    attributes: ShapeAttribute[];
-    shape: "Arrow" | "Circle" | "Ellipse" | "Heart" | "Pie" | "Polygon" | "Rect" | "Star" | "Triangle";
-}) => ShapeDragData;
-export declare const parseShapeDragData: (value: string) => ShapeDragData | null;

package/dist/shape-drag-data.js

@@ -1,90 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.parseShapeDragData = exports.makeShapeDragData = exports.areShapeAttributes = exports.isShapeAttribute = exports.isShapeAttributeName = exports.isShapeName = exports.shapeNames = exports.SHAPE_DRAG_MIME_TYPE = void 0;
-exports.SHAPE_DRAG_MIME_TYPE = 'application/vnd.remotion.shape+json';
-exports.shapeNames = [
-    'Arrow',
-    'Circle',
-    'Ellipse',
-    'Heart',
-    'Pie',
-    'Polygon',
-    'Rect',
-    'Star',
-    'Triangle',
-];
-const isRecord = (value) => {
-    return typeof value === 'object' && value !== null && !Array.isArray(value);
-};
-const isShapeName = (value) => {
-    return typeof value === 'string' && exports.shapeNames.includes(value);
-};
-exports.isShapeName = isShapeName;
-const isShapeAttributeName = (value) => {
-    return (typeof value === 'string' &&
-        value !== 'style' &&
-        /^[A-Za-z_$][A-Za-z0-9_$]*$/.test(value));
-};
-exports.isShapeAttributeName = isShapeAttributeName;
-const isShapeAttribute = (value) => {
-    if (!isRecord(value)) {
-        return false;
-    }
-    if (!(0, exports.isShapeAttributeName)(value.name)) {
-        return false;
-    }
-    return (typeof value.value === 'string' ||
-        typeof value.value === 'boolean' ||
-        (typeof value.value === 'number' && Number.isFinite(value.value)));
-};
-exports.isShapeAttribute = isShapeAttribute;
-const areShapeAttributes = (value) => {
-    if (!Array.isArray(value)) {
-        return false;
-    }
-    const seen = new Set();
-    for (const attribute of value) {
-        if (!(0, exports.isShapeAttribute)(attribute) || seen.has(attribute.name)) {
-            return false;
-        }
-        seen.add(attribute.name);
-    }
-    return true;
-};
-exports.areShapeAttributes = areShapeAttributes;
-const makeShapeDragData = ({ attributes, shape, }) => {
-    return {
-        type: 'remotion-shape',
-        version: 1,
-        shape,
-        attributes,
-    };
-};
-exports.makeShapeDragData = makeShapeDragData;
-const parseShapeDragData = (value) => {
-    try {
-        const parsed = JSON.parse(value);
-        if (!isRecord(parsed)) {
-            return null;
-        }
-        if (parsed.type !== 'remotion-shape' || parsed.version !== 1) {
-            return null;
-        }
-        if (!(0, exports.isShapeName)(parsed.shape)) {
-            return null;
-        }
-        if (!(0, exports.areShapeAttributes)(parsed.attributes)) {
-            return null;
-        }
-        return {
-            type: 'remotion-shape',
-            version: 1,
-            shape: parsed.shape,
-            attributes: parsed.attributes,
-        };
-    }
-    catch (_a) {
-        return null;
-    }
-};
-exports.parseShapeDragData = parseShapeDragData;