@remotion/studio-shared 4.0.477 → 4.0.479

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, JsxComponentIdentity, SequenceNodePath, SequencePropsSubscriptionKey, SequenceSchema } from 'remotion';
+import type { _InternalTypes, CannotUpdateSequenceReason, CanUpdateEffectPropsResponse, CanUpdateSequencePropsResponseFalse, CanUpdateSequencePropsResponseTrue, CanUpdateSequencePropStatus, ExtrapolateType, JsxComponentIdentity, SequenceNodePath, SequencePropsSubscriptionKey, InteractivitySchema } from 'remotion';
 import type { RecastCodemod, VisualControlChange } from './codemods';
 import type { ComponentProp } from './component-drag-data';
 import type { EffectClipboardParam, EffectClipboardPasteType, EffectClipboardSnapshot } from './effect-clipboard-data';
@@ -227,7 +227,7 @@ export type SaveSequencePropEdit = {
     key: string;
     value: string;
     defaultValue: string | null;
-    schema: SequenceSchema;
+    schema: InteractivitySchema;
 };
 export type SaveSequencePropsRequest = {
     edits: SaveSequencePropEdit[];
@@ -254,7 +254,7 @@ type SaveEffectPropsRequestBase = {
     effectIndex: number;
     key: string;
     defaultValue: string | null;
-    schema: SequenceSchema;
+    schema: InteractivitySchema;
     clientId: string;
 };
 export type SaveEffectPropsRequest = (SaveEffectPropsRequestBase & {
@@ -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;
@@ -314,7 +327,7 @@ export type DeleteSequenceKeyframe = {
     nodePath: SequencePropsSubscriptionKey;
     key: string;
     frame: number;
-    schema: SequenceSchema;
+    schema: InteractivitySchema;
 };
 export type MoveSequenceKeyframe = {
     fileName: string;
@@ -322,7 +335,7 @@ export type MoveSequenceKeyframe = {
     key: string;
     fromFrame: number;
     toFrame: number;
-    schema: SequenceSchema;
+    schema: InteractivitySchema;
 };
 export type AddSequenceKeyframeRequest = {
     fileName: string;
@@ -330,7 +343,7 @@ export type AddSequenceKeyframeRequest = {
     key: string;
     frame: number;
     value: string;
-    schema: SequenceSchema;
+    schema: InteractivitySchema;
     clientId: string;
 };
 export type AddSequenceKeyframeResponse = SaveSequencePropsResponse;
@@ -341,7 +354,7 @@ export type DeleteEffectKeyframe = {
     effectIndex: number;
     key: string;
     frame: number;
-    schema: SequenceSchema;
+    schema: InteractivitySchema;
 };
 export type MoveEffectKeyframe = {
     fileName: string;
@@ -350,7 +363,7 @@ export type MoveEffectKeyframe = {
     key: string;
     fromFrame: number;
     toFrame: number;
-    schema: SequenceSchema;
+    schema: InteractivitySchema;
 };
 export type DeleteKeyframesRequest = {
     sequenceKeyframes: DeleteSequenceKeyframe[];
@@ -375,7 +388,7 @@ export type AddEffectKeyframeRequest = {
     key: string;
     frame: number;
     value: string;
-    schema: SequenceSchema;
+    schema: InteractivitySchema;
     clientId: string;
 };
 export type AddEffectKeyframeResponse = SaveEffectPropsResponse;
@@ -405,7 +418,7 @@ export type UpdateSequenceKeyframeSettingsRequest = {
     nodePath: SequencePropsSubscriptionKey;
     key: string;
     settings: KeyframeSettings;
-    schema: SequenceSchema;
+    schema: InteractivitySchema;
     clientId: string;
 };
 export type UpdateSequenceKeyframeSettingsResponse = SaveSequencePropsResponse;
@@ -415,7 +428,7 @@ export type UpdateEffectKeyframeSettingsRequest = {
     effectIndex: number;
     key: string;
     settings: KeyframeSettings;
-    schema: SequenceSchema;
+    schema: InteractivitySchema;
     clientId: string;
 };
 export type UpdateEffectKeyframeSettingsResponse = SaveEffectPropsResponse;
@@ -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/easing-clipboard-data.d.ts

@@ -0,0 +1,18 @@
+import type { KeyframeEasing } from './keyframe-easing-presets';
+export type EasingClipboardData = {
+    readonly type: 'easing';
+    readonly version: 1;
+    readonly remotionClipboard: 'easing';
+    readonly easing: KeyframeEasing;
+};
+export type EasingClipboardDataParseResult = {
+    readonly status: 'valid';
+    readonly data: EasingClipboardData;
+} | {
+    readonly status: 'unsupported-version';
+    readonly version: unknown;
+} | {
+    readonly status: 'invalid';
+};
+export declare const parseEasingClipboardDataResult: (value: string) => EasingClipboardDataParseResult;
+export declare const parseEasingClipboardData: (value: string) => EasingClipboardData | null;

package/dist/easing-clipboard-data.js

@@ -0,0 +1,64 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.parseEasingClipboardData = exports.parseEasingClipboardDataResult = void 0;
+const isRecord = (value) => {
+    return typeof value === 'object' && value !== null && !Array.isArray(value);
+};
+const isFiniteNumber = (value) => {
+    return typeof value === 'number' && Number.isFinite(value);
+};
+const isEasing = (value) => {
+    return (isRecord(value) &&
+        (value.type === 'linear' ||
+            (value.type === 'bezier' &&
+                isFiniteNumber(value.x1) &&
+                isFiniteNumber(value.y1) &&
+                isFiniteNumber(value.x2) &&
+                isFiniteNumber(value.y2)) ||
+            (value.type === 'spring' &&
+                isFiniteNumber(value.damping) &&
+                isFiniteNumber(value.mass) &&
+                isFiniteNumber(value.stiffness) &&
+                typeof value.overshootClamping === 'boolean')));
+};
+const parseEasingClipboardDataResult = (value) => {
+    try {
+        const parsed = JSON.parse(value);
+        if (!isRecord(parsed)) {
+            return { status: 'invalid' };
+        }
+        if (parsed.remotionClipboard !== 'easing') {
+            return { status: 'invalid' };
+        }
+        if (parsed.version !== 1) {
+            return {
+                status: 'unsupported-version',
+                version: parsed.version,
+            };
+        }
+        if (parsed.type !== 'easing' || !isEasing(parsed.easing)) {
+            return { status: 'invalid' };
+        }
+        return {
+            status: 'valid',
+            data: {
+                type: 'easing',
+                version: 1,
+                remotionClipboard: 'easing',
+                easing: parsed.easing,
+            },
+        };
+    }
+    catch (_a) {
+        return { status: 'invalid' };
+    }
+};
+exports.parseEasingClipboardDataResult = parseEasingClipboardDataResult;
+const parseEasingClipboardData = (value) => {
+    const result = (0, exports.parseEasingClipboardDataResult)(value);
+    if (result.status !== 'valid') {
+        return null;
+    }
+    return result.data;
+};
+exports.parseEasingClipboardData = parseEasingClipboardData;

package/dist/effect-catalog.d.ts

@@ -0,0 +1,19 @@
+import type { EffectDragData } from './effect-drag-data';
+export type EffectCatalogItem = {
+    readonly id: string;
+    readonly category: string;
+    readonly label: string;
+    readonly description: string;
+    readonly effect: EffectDragData['effect'];
+};
+export type EffectCatalogCategory = {
+    readonly title: string;
+    readonly effects: readonly EffectCatalogItem[];
+};
+export declare const getEffectDocumentationPath: (item: EffectCatalogItem) => string;
+export declare const getEffectDocumentationLink: (item: EffectCatalogItem) => string;
+export declare const getEffectPreviewSource: (item: EffectCatalogItem) => string;
+export declare const getEffectPreviewAlt: (item: EffectCatalogItem) => string;
+export declare const makeEffectDragDataFromCatalogItem: (item: EffectCatalogItem) => EffectDragData;
+export declare const getEffectCatalogCategories: (items: readonly EffectCatalogItem[]) => readonly EffectCatalogCategory[];
+export declare const EFFECT_CATALOG: readonly EffectCatalogItem[];