@remotion/studio-shared 4.0.476 → 4.0.478

package/dist/api-requests.d.ts

@@ -1,6 +1,6 @@
 import type { AudioCodec, ChromeMode, Codec, ColorSpace, LogLevel, PixelFormat, StillImageFormat, VideoImageFormat, X264Preset } from '@remotion/renderer';
 import type { HardwareAccelerationOption } from '@remotion/renderer/client';
-import type { _InternalTypes, CannotUpdateSequenceReason, CanUpdateEffectPropsResponse, CanUpdateSequencePropsResponseFalse, CanUpdateSequencePropsResponseTrue, CanUpdateSequencePropStatus, ExtrapolateType, SequenceNodePath, SequencePropsSubscriptionKey, SequenceSchema } from 'remotion';
+import type { _InternalTypes, CannotUpdateSequenceReason, CanUpdateEffectPropsResponse, CanUpdateSequencePropsResponseFalse, CanUpdateSequencePropsResponseTrue, CanUpdateSequencePropStatus, ExtrapolateType, JsxComponentIdentity, SequenceNodePath, SequencePropsSubscriptionKey, SequenceSchema } from 'remotion';
 import type { RecastCodemod, VisualControlChange } from './codemods';
 import type { ComponentProp } from './component-drag-data';
 import type { EffectClipboardParam, EffectClipboardPasteType, EffectClipboardSnapshot } from './effect-clipboard-data';
@@ -201,6 +201,7 @@ export type SubscribeToSequencePropsRequest = {
     line: number;
     column: number;
     nodePath: SequenceNodePath | null;
+    componentIdentity: JsxComponentIdentity | null;
     keys: string[];
     effects: string[][];
     clientId: string;
@@ -293,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;
@@ -479,21 +493,28 @@ export type InsertableCompositionElement = {
     type: 'solid';
     width: number;
     height: number;
+    position: InsertableCompositionElementPosition | null;
 } | {
     type: 'component';
     componentName: string;
     importName: string;
     importPath: string;
     props: ComponentProp[];
+    position: InsertableCompositionElementPosition | null;
 } | {
     type: 'asset';
-    assetType: 'image' | 'video' | 'gif' | 'audio';
+    assetType: 'image' | 'video' | 'gif' | 'animated-image' | 'audio';
     src: string;
     srcType: 'static' | 'remote';
     dimensions: {
         width: number;
         height: number;
     } | null;
+    position: InsertableCompositionElementPosition | null;
+};
+export type InsertableCompositionElementPosition = {
+    x: number;
+    y: number;
 };
 export type InsertJsxElementRequest = {
     compositionFile: string;
@@ -578,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, 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.476",
+	"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.476"
+		"remotion": "4.0.478"
 	},
 	"devDependencies": {
-		"@remotion/renderer": "4.0.476",
-		"@remotion/eslint-config-internal": "4.0.476",
+		"@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"
 	},