@remotion/studio-shared 4.0.472 → 4.0.474

package/dist/api-requests.d.ts

@@ -1,8 +1,9 @@
 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, SequenceNodePath, SequencePropsSubscriptionKey, SequenceSchema } from 'remotion';
+import type { _InternalTypes, CannotUpdateSequenceReason, CanUpdateEffectPropsResponse, CanUpdateSequencePropsResponseFalse, CanUpdateSequencePropsResponseTrue, CanUpdateSequencePropStatus, ExtrapolateType, SequenceNodePath, SequencePropsSubscriptionKey, SequenceSchema } from 'remotion';
 import type { RecastCodemod, VisualControlChange } from './codemods';
-import type { EffectClipboardPasteType, EffectClipboardSnapshot } from './effect-clipboard-data';
+import type { ComponentProp } from './component-drag-data';
+import type { EffectClipboardParam, EffectClipboardPasteType, EffectClipboardSnapshot } from './effect-clipboard-data';
 import type { PackageManager } from './package-manager';
 import type { ProjectInfo } from './project-info';
 import type { CompletedClientRender, RequiredChromiumOptions } from './render-job';
@@ -164,6 +165,13 @@ export type DeleteStaticFileResponse = {
     success: boolean;
     existed: boolean;
 };
+export type RenameStaticFileRequest = {
+    oldRelativePath: string;
+    newRelativePath: string;
+};
+export type RenameStaticFileResponse = {
+    success: boolean;
+};
 export type CanUpdateDefaultPropsResponse = {
     canUpdate: true;
     currentDefaultProps: Record<string, unknown>;
@@ -220,8 +228,8 @@ export type SaveSequencePropEdit = {
 export type SaveSequencePropsRequest = {
     edits: SaveSequencePropEdit[];
     clientId: string;
-    undoLabel: string | null;
-    redoLabel: string | null;
+    undoLabel: string;
+    redoLabel: string;
 };
 export type SaveSequencePropsResult = {
     fileName: string;
@@ -236,16 +244,22 @@ export type SaveSequencePropsResponse = {
     canUpdate: false;
     reason: CannotUpdateSequenceReason;
 };
-export type SaveEffectPropsRequest = {
+type SaveEffectPropsRequestBase = {
     fileName: string;
     sequenceNodePath: SequencePropsSubscriptionKey;
     effectIndex: number;
     key: string;
-    value: string;
     defaultValue: string | null;
     schema: SequenceSchema;
     clientId: string;
 };
+export type SaveEffectPropsRequest = (SaveEffectPropsRequestBase & {
+    type: 'value';
+    value: string;
+}) | (SaveEffectPropsRequestBase & {
+    type: 'effect-param';
+    effectParam: EffectClipboardParam;
+});
 export type SaveEffectPropsResponse = CanUpdateEffectPropsResponse;
 export type AddEffectRequest = {
     fileName: string;
@@ -276,6 +290,21 @@ export type ReorderEffectResponse = {
     reason: string;
     stack: string;
 };
+export type ReorderSequencePosition = 'before' | 'after';
+export type ReorderSequenceRequest = {
+    fileName: string;
+    sourceNodePath: SequencePropsSubscriptionKey;
+    targetNodePath: SequencePropsSubscriptionKey;
+    position: ReorderSequencePosition;
+    clientId: string;
+};
+export type ReorderSequenceResponse = {
+    success: true;
+} | {
+    success: false;
+    reason: string;
+    stack: string;
+};
 export type DeleteSequenceKeyframe = {
     fileName: string;
     nodePath: SequencePropsSubscriptionKey;
@@ -283,6 +312,14 @@ export type DeleteSequenceKeyframe = {
     frame: number;
     schema: SequenceSchema;
 };
+export type MoveSequenceKeyframe = {
+    fileName: string;
+    nodePath: SequencePropsSubscriptionKey;
+    key: string;
+    fromFrame: number;
+    toFrame: number;
+    schema: SequenceSchema;
+};
 export type AddSequenceKeyframeRequest = {
     fileName: string;
     nodePath: SequencePropsSubscriptionKey;
@@ -301,6 +338,15 @@ export type DeleteEffectKeyframe = {
     frame: number;
     schema: SequenceSchema;
 };
+export type MoveEffectKeyframe = {
+    fileName: string;
+    sequenceNodePath: SequencePropsSubscriptionKey;
+    effectIndex: number;
+    key: string;
+    fromFrame: number;
+    toFrame: number;
+    schema: SequenceSchema;
+};
 export type DeleteKeyframesRequest = {
     sequenceKeyframes: DeleteSequenceKeyframe[];
     effectKeyframes: DeleteEffectKeyframe[];
@@ -309,6 +355,14 @@ export type DeleteKeyframesRequest = {
 export type DeleteKeyframesResponse = {
     success: true;
 };
+export type MoveKeyframesRequest = {
+    sequenceKeyframes: MoveSequenceKeyframe[];
+    effectKeyframes: MoveEffectKeyframe[];
+    clientId: string;
+};
+export type MoveKeyframesResponse = {
+    success: true;
+};
 export type AddEffectKeyframeRequest = {
     fileName: string;
     sequenceNodePath: SequencePropsSubscriptionKey;
@@ -320,6 +374,32 @@ export type AddEffectKeyframeRequest = {
     clientId: string;
 };
 export type AddEffectKeyframeResponse = SaveEffectPropsResponse;
+export type KeyframeSettings = {
+    clamping: {
+        left: ExtrapolateType;
+        right: ExtrapolateType;
+    } | undefined;
+    posterize: number | undefined;
+};
+export type UpdateSequenceKeyframeSettingsRequest = {
+    fileName: string;
+    nodePath: SequencePropsSubscriptionKey;
+    key: string;
+    settings: KeyframeSettings;
+    schema: SequenceSchema;
+    clientId: string;
+};
+export type UpdateSequenceKeyframeSettingsResponse = SaveSequencePropsResponse;
+export type UpdateEffectKeyframeSettingsRequest = {
+    fileName: string;
+    sequenceNodePath: SequencePropsSubscriptionKey;
+    effectIndex: number;
+    key: string;
+    settings: KeyframeSettings;
+    schema: SequenceSchema;
+    clientId: string;
+};
+export type UpdateEffectKeyframeSettingsResponse = SaveEffectPropsResponse;
 type BaseDeleteEffectRequestItem = {
     fileName: string;
     sequenceNodePath: SequencePropsSubscriptionKey;
@@ -381,10 +461,17 @@ export type InsertableCompositionElement = {
     type: 'solid';
     width: number;
     height: number;
+} | {
+    type: 'component';
+    componentName: string;
+    importName: string;
+    importPath: string;
+    props: ComponentProp[];
 } | {
     type: 'asset';
-    assetType: 'image' | 'video' | 'gif';
+    assetType: 'image' | 'video' | 'gif' | 'audio';
     src: string;
+    srcType: 'static' | 'remote';
     dimensions: {
         width: number;
         height: number;
@@ -402,6 +489,15 @@ export type InsertJsxElementResponse = {
     reason: string;
     stack: string;
 };
+export type DownloadRemoteAssetRequest = {
+    url: string;
+};
+export type DownloadRemoteAssetResponse = {
+    assetPath: string;
+    sizeInBytes: number;
+    created: boolean;
+    element: InsertableCompositionElement;
+};
 export type UpdateAvailableRequest = {};
 export type UpdateAvailableResponse = {
     currentVersion: string;
@@ -434,6 +530,13 @@ export type RedoResponse = {
     success: false;
     reason: string;
 };
+export type LogStudioErrorRequest = {
+    name: string | null;
+    message: string;
+    stack: string | null;
+    symbolicatedStackFrames: SymbolicatedStackFrame[] | null;
+};
+export type LogStudioErrorResponse = {};
 export type ApiRoutes = {
     '/api/composition-component-info': ReqAndRes<CompositionComponentInfoRequest, CompositionComponentInfoResponse>;
     '/api/cancel': ReqAndRes<CancelRenderRequest, CancelRenderResponse>;
@@ -457,21 +560,28 @@ export type ApiRoutes = {
     '/api/save-effect-props': ReqAndRes<SaveEffectPropsRequest, SaveEffectPropsResponse>;
     '/api/add-effect': ReqAndRes<AddEffectRequest, AddEffectResponse>;
     '/api/reorder-effect': ReqAndRes<ReorderEffectRequest, ReorderEffectResponse>;
+    '/api/reorder-sequence': ReqAndRes<ReorderSequenceRequest, ReorderSequenceResponse>;
     '/api/delete-keyframes': ReqAndRes<DeleteKeyframesRequest, DeleteKeyframesResponse>;
+    '/api/move-keyframes': ReqAndRes<MoveKeyframesRequest, MoveKeyframesResponse>;
     '/api/add-sequence-keyframe': ReqAndRes<AddSequenceKeyframeRequest, AddSequenceKeyframeResponse>;
     '/api/add-effect-keyframe': ReqAndRes<AddEffectKeyframeRequest, AddEffectKeyframeResponse>;
+    '/api/update-sequence-keyframe-settings': ReqAndRes<UpdateSequenceKeyframeSettingsRequest, UpdateSequenceKeyframeSettingsResponse>;
+    '/api/update-effect-keyframe-settings': ReqAndRes<UpdateEffectKeyframeSettingsRequest, UpdateEffectKeyframeSettingsResponse>;
     '/api/delete-effect': ReqAndRes<DeleteEffectRequest, DeleteEffectResponse>;
     '/api/paste-effects': ReqAndRes<PasteEffectsRequest, PasteEffectsResponse>;
     '/api/delete-jsx-node': ReqAndRes<DeleteJsxNodeRequest, DeleteJsxNodeResponse>;
     '/api/duplicate-jsx-node': ReqAndRes<DuplicateJsxNodeRequest, DuplicateJsxNodeResponse>;
     '/api/insert-jsx-element': ReqAndRes<InsertJsxElementRequest, InsertJsxElementResponse>;
+    '/api/download-remote-asset': ReqAndRes<DownloadRemoteAssetRequest, DownloadRemoteAssetResponse>;
     '/api/update-available': ReqAndRes<UpdateAvailableRequest, UpdateAvailableResponse>;
     '/api/apply-codemod': ReqAndRes<ApplyCodemodRequest, ApplyCodemodResponse>;
     '/api/project-info': ReqAndRes<ProjectInfoRequest, ProjectInfoResponse>;
     '/api/delete-static-file': ReqAndRes<DeleteStaticFileRequest, DeleteStaticFileResponse>;
+    '/api/rename-static-file': ReqAndRes<RenameStaticFileRequest, RenameStaticFileResponse>;
     '/api/restart-studio': ReqAndRes<RestartStudioRequest, RestartStudioResponse>;
     '/api/install-package': ReqAndRes<InstallPackageRequest, InstallPackageResponse>;
     '/api/undo': ReqAndRes<UndoRequest, UndoResponse>;
     '/api/redo': ReqAndRes<RedoRequest, RedoResponse>;
+    '/api/log-studio-error': ReqAndRes<LogStudioErrorRequest, LogStudioErrorResponse>;
 };
 export {};

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

@@ -0,0 +1,8 @@
+export declare const ASSET_DRAG_MIME_TYPE = "application/vnd.remotion.asset+json";
+export type AssetDragData = {
+    type: 'remotion-asset';
+    version: 1;
+    assetPath: string;
+};
+export declare const makeAssetDragData: (assetPath: string) => AssetDragData;
+export declare const parseAssetDragData: (value: string) => AssetDragData | null;

package/dist/asset-drag-data.js

@@ -0,0 +1,38 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.parseAssetDragData = exports.makeAssetDragData = exports.ASSET_DRAG_MIME_TYPE = void 0;
+exports.ASSET_DRAG_MIME_TYPE = 'application/vnd.remotion.asset+json';
+const isRecord = (value) => {
+    return typeof value === 'object' && value !== null && !Array.isArray(value);
+};
+const makeAssetDragData = (assetPath) => {
+    return {
+        type: 'remotion-asset',
+        version: 1,
+        assetPath,
+    };
+};
+exports.makeAssetDragData = makeAssetDragData;
+const parseAssetDragData = (value) => {
+    try {
+        const parsed = JSON.parse(value);
+        if (!isRecord(parsed)) {
+            return null;
+        }
+        if (parsed.type !== 'remotion-asset' || parsed.version !== 1) {
+            return null;
+        }
+        if (typeof parsed.assetPath !== 'string' || parsed.assetPath.length === 0) {
+            return null;
+        }
+        return {
+            type: 'remotion-asset',
+            version: 1,
+            assetPath: parsed.assetPath,
+        };
+    }
+    catch (_a) {
+        return null;
+    }
+};
+exports.parseAssetDragData = parseAssetDragData;

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

@@ -0,0 +1,27 @@
+export declare const COMPONENT_DRAG_MIME_TYPE = "application/vnd.remotion.component+json";
+export type ComponentProp = {
+    name: string;
+    value: string | number | boolean;
+};
+export type ComponentDragData = {
+    type: 'remotion-component';
+    version: 1;
+    component: {
+        componentName: string;
+        importName: string;
+        importPath: string;
+        props: ComponentProp[];
+    };
+};
+export declare const isComponentIdentifier: (value: unknown) => value is string;
+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, }: {
+    componentName: string;
+    importName: string;
+    importPath: string;
+    props: ComponentProp[];
+}) => ComponentDragData;
+export declare const parseComponentDragData: (value: string) => ComponentDragData | null;

package/dist/component-drag-data.js

@@ -0,0 +1,101 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.parseComponentDragData = exports.makeComponentDragData = exports.areComponentProps = exports.isComponentProp = exports.isComponentPropName = exports.isComponentImportPath = exports.isComponentIdentifier = exports.COMPONENT_DRAG_MIME_TYPE = void 0;
+exports.COMPONENT_DRAG_MIME_TYPE = 'application/vnd.remotion.component+json';
+const isRecord = (value) => {
+    return typeof value === 'object' && value !== null && !Array.isArray(value);
+};
+const isComponentIdentifier = (value) => {
+    return typeof value === 'string' && /^[A-Z_$][A-Za-z0-9_$]*$/.test(value);
+};
+exports.isComponentIdentifier = isComponentIdentifier;
+const isComponentImportPath = (value) => {
+    return (typeof value === 'string' &&
+        value.length > 0 &&
+        value.length < 200 &&
+        !value.includes('\\') &&
+        !value.includes('\0') &&
+        !value.startsWith('/') &&
+        /^[A-Za-z0-9@._/-]+$/.test(value));
+};
+exports.isComponentImportPath = isComponentImportPath;
+const isComponentPropName = (value) => {
+    return (typeof value === 'string' &&
+        value !== 'style' &&
+        /^[A-Za-z_$][A-Za-z0-9_$]*$/.test(value));
+};
+exports.isComponentPropName = isComponentPropName;
+const isComponentProp = (value) => {
+    if (!isRecord(value)) {
+        return false;
+    }
+    if (!(0, exports.isComponentPropName)(value.name)) {
+        return false;
+    }
+    return (typeof value.value === 'string' ||
+        typeof value.value === 'boolean' ||
+        (typeof value.value === 'number' && Number.isFinite(value.value)));
+};
+exports.isComponentProp = isComponentProp;
+const areComponentProps = (value) => {
+    if (!Array.isArray(value)) {
+        return false;
+    }
+    const seen = new Set();
+    for (const prop of value) {
+        if (!(0, exports.isComponentProp)(prop) || seen.has(prop.name)) {
+            return false;
+        }
+        seen.add(prop.name);
+    }
+    return true;
+};
+exports.areComponentProps = areComponentProps;
+const makeComponentDragData = ({ componentName, importName, importPath, props, }) => {
+    return {
+        type: 'remotion-component',
+        version: 1,
+        component: {
+            componentName,
+            importName,
+            importPath,
+            props,
+        },
+    };
+};
+exports.makeComponentDragData = makeComponentDragData;
+const parseComponentDragData = (value) => {
+    try {
+        const parsed = JSON.parse(value);
+        if (!isRecord(parsed)) {
+            return null;
+        }
+        if (parsed.type !== 'remotion-component' || parsed.version !== 1) {
+            return null;
+        }
+        if (!isRecord(parsed.component)) {
+            return null;
+        }
+        const { componentName, importName, importPath, props } = parsed.component;
+        if (!(0, exports.isComponentIdentifier)(componentName) ||
+            !(0, exports.isComponentIdentifier)(importName) ||
+            !(0, exports.isComponentImportPath)(importPath) ||
+            !(0, exports.areComponentProps)(props)) {
+            return null;
+        }
+        return {
+            type: 'remotion-component',
+            version: 1,
+            component: {
+                componentName,
+                importName,
+                importPath,
+                props,
+            },
+        };
+    }
+    catch (_a) {
+        return null;
+    }
+};
+exports.parseComponentDragData = parseComponentDragData;

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

@@ -0,0 +1,71 @@
+export type FileDimensions = {
+    readonly width: number;
+    readonly height: number;
+};
+export declare const matchesPattern: (pattern: Uint8Array<ArrayBufferLike>) => (data: Uint8Array<ArrayBufferLike>) => boolean;
+export declare const isRiffAvi: (data: Uint8Array<ArrayBufferLike>) => boolean;
+export declare const isRiffWave: (data: Uint8Array<ArrayBufferLike>) => boolean;
+export declare const isWebm: (data: Uint8Array<ArrayBufferLike>) => boolean;
+export declare const isIsoBaseMedia: (data: Uint8Array<ArrayBufferLike>) => boolean;
+export declare const isTransportStream: (data: Uint8Array<ArrayBufferLike>) => boolean;
+export declare const isMp3: (data: Uint8Array<ArrayBufferLike>) => boolean;
+export declare const isAac: (data: Uint8Array<ArrayBufferLike>) => boolean;
+export declare const isFlac: (data: Uint8Array<ArrayBufferLike>) => boolean;
+export declare const isM3u: (data: Uint8Array<ArrayBufferLike>) => boolean;
+export type RiffType = {
+    type: 'riff';
+};
+export type WebmType = {
+    type: 'webm';
+};
+export type IsoBaseMediaType = {
+    type: 'iso-base-media';
+};
+export type TransportStreamType = {
+    type: 'transport-stream';
+};
+export type Mp3Type = {
+    type: 'mp3';
+};
+export type AacType = {
+    type: 'aac';
+};
+export type WavType = {
+    type: 'wav';
+};
+export type GifType = {
+    type: 'gif';
+    dimensions: FileDimensions | null;
+};
+export type FlacType = {
+    type: 'flac';
+};
+export type M3uType = {
+    type: 'm3u';
+};
+export type PngType = {
+    type: 'png';
+    dimensions: FileDimensions | null;
+};
+export type JpegType = {
+    type: 'jpeg';
+    dimensions: FileDimensions | null;
+};
+export type WebpType = {
+    type: 'webp';
+    dimensions: FileDimensions | null;
+};
+export type BmpType = {
+    type: 'bmp';
+    dimensions: FileDimensions | null;
+};
+export type PdfType = {
+    type: 'pdf';
+};
+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 declare const isImageFileType: (fileType: FileType) => fileType is ImageFileType;
+export declare const detectFileType: (data: Uint8Array<ArrayBufferLike>) => FileType;