@remotion/studio 4.0.477 → 4.0.479

package/dist/components/Timeline/update-selected-easing.js

@@ -1,6 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.updateSelectedTimelineEasings = exports.getTimelineEasingValueForSelection = exports.getEasingSelections = void 0;
+exports.updateSelectedTimelineEasings = exports.getTimelineEasingValueForSelection = exports.getEasingSelections = exports.makeEasingDragOverride = exports.getSelectedEasingUpdates = exports.getSelectedEasingUpdate = 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");
 const find_track_for_node_path_info_1 = require("./find-track-for-node-path-info");
@@ -42,7 +43,8 @@ const getSelectedEasingUpdate = ({ selection, sequences, overrideIdsToNodePaths,
             fieldKey: field.fieldKey,
             schema: sequence.controls.schema,
             segmentIndex: selection.segmentIndex,
-            currentEasing: (_c = sequencePropStatus.easing[selection.segmentIndex]) !== null && _c !== void 0 ? _c : 'linear',
+            currentEasing: (_c = sequencePropStatus.easing[selection.segmentIndex]) !== null && _c !== void 0 ? _c : studio_shared_1.LINEAR_KEYFRAME_EASING,
+            propStatus: sequencePropStatus,
         };
     }
     const effect = sequence.effects[field.effectIndex];
@@ -69,15 +71,46 @@ const getSelectedEasingUpdate = ({ selection, sequences, overrideIdsToNodePaths,
         fieldKey: field.fieldKey,
         schema: effect.schema,
         segmentIndex: selection.segmentIndex,
-        currentEasing: (_d = effectPropStatus.easing[selection.segmentIndex]) !== null && _d !== void 0 ? _d : 'linear',
+        currentEasing: (_d = effectPropStatus.easing[selection.segmentIndex]) !== null && _d !== void 0 ? _d : studio_shared_1.LINEAR_KEYFRAME_EASING,
+        propStatus: effectPropStatus,
     };
 };
+exports.getSelectedEasingUpdate = getSelectedEasingUpdate;
+const getSelectedEasingUpdates = ({ selections, sequences, overrideIdsToNodePaths, propStatuses, }) => {
+    return (0, exports.getEasingSelections)(selections)
+        .map((selection) => (0, exports.getSelectedEasingUpdate)({
+        selection,
+        sequences,
+        overrideIdsToNodePaths,
+        propStatuses,
+    }))
+        .filter((update) => update !== null);
+};
+exports.getSelectedEasingUpdates = getSelectedEasingUpdates;
+const makeEasingDragOverride = ({ status, segmentIndex, easing, }) => {
+    const nextEasing = [...status.easing];
+    while (nextEasing.length < status.keyframes.length - 1) {
+        nextEasing.push(studio_shared_1.LINEAR_KEYFRAME_EASING);
+    }
+    if (nextEasing.length > status.keyframes.length - 1) {
+        nextEasing.length = status.keyframes.length - 1;
+    }
+    nextEasing[segmentIndex] = easing;
+    return {
+        type: 'keyframed',
+        status: {
+            ...status,
+            easing: nextEasing,
+        },
+    };
+};
+exports.makeEasingDragOverride = makeEasingDragOverride;
 const getEasingSelections = (selections) => selections.filter(isEasingSelection);
 exports.getEasingSelections = getEasingSelections;
 const getTimelineEasingValueForSelection = ({ selection, sequences, overrideIdsToNodePaths, propStatuses, }) => {
     var _a;
     var _b;
-    return ((_b = (_a = getSelectedEasingUpdate({
+    return ((_b = (_a = (0, exports.getSelectedEasingUpdate)({
         selection,
         sequences,
         overrideIdsToNodePaths,
@@ -90,14 +123,12 @@ const updateSelectedTimelineEasings = ({ selections, sequences, overrideIdsToNod
     if (easingSelections.length === 0) {
         return null;
     }
-    const updates = easingSelections
-        .map((selection) => getSelectedEasingUpdate({
-        selection,
+    const updates = (0, exports.getSelectedEasingUpdates)({
+        selections: easingSelections,
         sequences,
         overrideIdsToNodePaths,
         propStatuses,
-    }))
-        .filter((update) => update !== null);
+    });
     if (updates.length === 0) {
         return null;
     }

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

@@ -0,0 +1,13 @@
+import type { CanUpdateSequencePropStatus, SequencePropsSubscriptionKey, TSequence } from 'remotion';
+import type { ComboboxValue } from '../NewComposition/ComboBox';
+import { type SetPropStatuses } from './save-sequence-prop';
+export declare const useSequenceFreezeFrameMenuItem: ({ clientId, nodePath, propStatusesForOverride, sequence, sequenceFrameOffset, setPropStatuses, timelinePosition, validatedSource, }: {
+    readonly clientId: string | null;
+    readonly nodePath: SequencePropsSubscriptionKey | null;
+    readonly propStatusesForOverride: Record<string, CanUpdateSequencePropStatus> | undefined;
+    readonly sequence: TSequence;
+    readonly sequenceFrameOffset: number;
+    readonly setPropStatuses: SetPropStatuses;
+    readonly timelinePosition: number;
+    readonly validatedSource: string | null;
+}) => ComboboxValue;

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

@@ -0,0 +1,73 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useSequenceFreezeFrameMenuItem = void 0;
+const react_1 = require("react");
+const save_sequence_prop_1 = require("./save-sequence-prop");
+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' &&
+        typeof freezeStatus.codeValue === 'number';
+    const canToggleFreeze = clientId !== null &&
+        Boolean(sequence.controls) &&
+        nodePath !== null &&
+        validatedSource !== null &&
+        freezeStatus !== undefined &&
+        freezeStatus !== null &&
+        freezeStatus.status === 'static';
+    const onToggleFreezeFrame = (0, react_1.useCallback)(() => {
+        if (!canToggleFreeze ||
+            !sequence.controls ||
+            nodePath === null ||
+            validatedSource === null ||
+            clientId === null) {
+            return;
+        }
+        const rawFreezeFrame = Math.round(timelinePosition - sequence.from + sequenceFrameOffset);
+        const maxFrame = Number.isFinite(sequence.duration)
+            ? Math.max(0, sequence.duration - 1)
+            : rawFreezeFrame;
+        const freezeFrame = Math.min(Math.max(0, rawFreezeFrame), maxFrame);
+        const remove = isFrozen;
+        (0, save_sequence_prop_1.saveSequenceProps)({
+            changes: [
+                {
+                    fileName: validatedSource,
+                    nodePath,
+                    fieldKey: 'freeze',
+                    value: remove ? null : freezeFrame,
+                    defaultValue: null,
+                    schema: sequence.controls.schema,
+                },
+            ],
+            setPropStatuses,
+            clientId,
+            undoLabel: remove ? 'Unfreeze sequence' : 'Freeze sequence',
+            redoLabel: remove ? 'Freeze sequence again' : 'Unfreeze sequence again',
+        });
+    }, [
+        canToggleFreeze,
+        clientId,
+        isFrozen,
+        nodePath,
+        sequence.controls,
+        sequence.duration,
+        sequence.from,
+        sequenceFrameOffset,
+        setPropStatuses,
+        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]);
+};
+exports.useSequenceFreezeFrameMenuItem = useSequenceFreezeFrameMenuItem;

package/dist/components/Timeline/use-sequence-props-subscription.d.ts

@@ -1,9 +1,9 @@
-import type { SequenceSchema } from 'remotion';
+import type { InteractivitySchema } from 'remotion';
 import type { OriginalPosition } from '../../error-overlay/react-overlay/utils/get-source-map';
 export declare const useSequencePropsSubscription: ({ originalLocation, overrideId, componentIdentity, schema, effects, }: {
     overrideId: string;
     componentIdentity: string | null;
-    schema: SequenceSchema;
-    effects: SequenceSchema[];
+    schema: InteractivitySchema;
+    effects: InteractivitySchema[];
     originalLocation: OriginalPosition | null;
 }) => void;

package/dist/components/Timeline/use-timeline-expanded-tree.d.ts

@@ -0,0 +1,11 @@
+import { type TSequence } from 'remotion';
+import type { SequenceNodePathInfo } from '../../helpers/get-timeline-sequence-sort-key';
+export declare const useTimelineExpandedTree: ({ sequence, nodePathInfo, }: {
+    readonly sequence: TSequence;
+    readonly nodePathInfo: SequenceNodePathInfo;
+}) => {
+    getIsExpanded: import("../ExpandedTracksProvider").GetIsExpanded;
+    propStatuses: import("remotion").PropStatuses;
+    toggleTrack: (nodePathInfo: SequenceNodePathInfo) => void;
+    tree: import("../../helpers/timeline-layout").TimelineTreeNode[];
+};

package/dist/components/Timeline/use-timeline-expanded-tree.js

@@ -0,0 +1,33 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useTimelineExpandedTree = void 0;
+const react_1 = require("react");
+const remotion_1 = require("remotion");
+const timeline_layout_1 = require("../../helpers/timeline-layout");
+const ExpandedTracksProvider_1 = require("../ExpandedTracksProvider");
+const useTimelineExpandedTree = ({ sequence, nodePathInfo, }) => {
+    const { getIsExpanded } = (0, react_1.useContext)(ExpandedTracksProvider_1.ExpandedTracksGetterContext);
+    const { toggleTrack } = (0, react_1.useContext)(ExpandedTracksProvider_1.ExpandedTracksSetterContext);
+    const { propStatuses: visualModePropStatuses } = (0, react_1.useContext)(remotion_1.Internals.VisualModePropStatusesContext);
+    const { getDragOverrides, getEffectDragOverrides } = (0, react_1.useContext)(remotion_1.Internals.VisualModeDragOverridesContext);
+    const tree = (0, react_1.useMemo)(() => (0, timeline_layout_1.buildTimelineTree)({
+        sequence,
+        nodePathInfo,
+        getDragOverrides,
+        getEffectDragOverrides,
+        propStatuses: visualModePropStatuses,
+    }), [
+        sequence,
+        nodePathInfo,
+        getDragOverrides,
+        getEffectDragOverrides,
+        visualModePropStatuses,
+    ]);
+    return {
+        getIsExpanded,
+        propStatuses: visualModePropStatuses,
+        toggleTrack,
+        tree,
+    };
+};
+exports.useTimelineExpandedTree = useTimelineExpandedTree;

package/dist/components/VisualControls/VisualControlsContent.d.ts

@@ -1 +1 @@
-export declare const VisualControlsContent: () => import("react/jsx-runtime").JSX.Element;
+export declare const VisualControlsContent: () => import("react/jsx-runtime").JSX.Element | null;

package/dist/components/VisualControls/VisualControlsContent.js

@@ -37,16 +37,15 @@ exports.VisualControlsContent = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = __importStar(require("react"));
 const VisualControls_1 = require("../../visual-controls/VisualControls");
-const is_menu_item_1 = require("../Menu/is-menu-item");
 const SchemaSeparationLine_1 = require("../RenderModal/SchemaEditor/SchemaSeparationLine");
 const VisualControlHandle_1 = require("./VisualControlHandle");
-const container = {
-    overflowY: 'auto',
-};
 const VisualControlsContent = () => {
     const { handles } = (0, react_1.useContext)(VisualControls_1.VisualControlsContext);
     const entries = Object.entries(handles);
-    return (jsx_runtime_1.jsx("div", { style: container, className: is_menu_item_1.VERTICAL_SCROLLBAR_CLASSNAME, children: entries.map(([key, value], i) => {
+    if (entries.length === 0) {
+        return null;
+    }
+    return (jsx_runtime_1.jsx("div", { children: entries.map(([key, value], i) => {
             return (jsx_runtime_1.jsxs(react_1.default.Fragment, { children: [
                     jsx_runtime_1.jsx(VisualControlHandle_1.VisualControlHandle, { keyName: key, value: value }), i === entries.length - 1 ? null : jsx_runtime_1.jsx(SchemaSeparationLine_1.SchemaSeparationLine, {})] }, key));
         }) }));

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

@@ -9,3 +9,13 @@ export declare const addEffectFromDragData: ({ clientId, dragData, fileName, nod
     readonly fileName: string;
     readonly nodePath: SequencePropsSubscriptionKey;
 }) => Promise<void>;
+export declare const addEffectToSequence: ({ clientId, effect, fileName, nodePath, }: {
+    readonly clientId: string;
+    readonly effect: {
+        name: string;
+        importPath: string;
+        config: Record<string, unknown>;
+    };
+    readonly fileName: string;
+    readonly nodePath: SequencePropsSubscriptionKey;
+}) => Promise<void>;

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

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.addEffectFromDragData = exports.getEffectDragData = exports.hasExplicitEffectDragType = exports.hasEffectDragType = void 0;
+exports.addEffectToSequence = exports.addEffectFromDragData = exports.getEffectDragData = exports.hasExplicitEffectDragType = exports.hasEffectDragType = void 0;
 const studio_shared_1 = require("@remotion/studio-shared");
 const install_required_package_1 = require("../helpers/install-required-package");
 const call_api_1 = require("./call-api");
@@ -47,20 +47,29 @@ const getEffectDragData = (dataTransfer) => {
     return null;
 };
 exports.getEffectDragData = getEffectDragData;
-const addEffectFromDragData = async ({ clientId, dragData, fileName, nodePath, }) => {
+const addEffectFromDragData = ({ clientId, dragData, fileName, nodePath, }) => {
+    return (0, exports.addEffectToSequence)({
+        clientId,
+        effect: dragData.effect,
+        fileName,
+        nodePath,
+    });
+};
+exports.addEffectFromDragData = addEffectFromDragData;
+const addEffectToSequence = async ({ clientId, effect, fileName, nodePath, }) => {
     try {
-        const requiredPackage = (0, studio_shared_1.getRequiredPackageForEffectImportPath)(dragData.effect.importPath);
+        const requiredPackage = (0, studio_shared_1.getRequiredPackageForEffectImportPath)(effect.importPath);
         await (0, install_required_package_1.installRequiredPackages)(requiredPackage ? [requiredPackage] : []);
         const result = await (0, call_api_1.callApi)('/api/add-effect', {
             fileName,
             sequenceNodePath: nodePath,
-            effectName: dragData.effect.name,
-            effectImportPath: dragData.effect.importPath,
-            effectConfig: dragData.effect.config,
+            effectName: effect.name,
+            effectImportPath: effect.importPath,
+            effectConfig: effect.config,
             clientId,
         });
         if (result.success) {
-            (0, NotificationCenter_1.showNotification)(`Added ${dragData.effect.name}()`, 2000);
+            (0, NotificationCenter_1.showNotification)(`Added ${effect.name}()`, 2000);
         }
         else {
             (0, NotificationCenter_1.showNotification)(result.reason, 4000);
@@ -70,4 +79,4 @@ const addEffectFromDragData = async ({ clientId, dragData, fileName, nodePath, }
         (0, NotificationCenter_1.showNotification)(err.message, 4000);
     }
 };
-exports.addEffectFromDragData = addEffectFromDragData;
+exports.addEffectToSequence = addEffectToSequence;

package/dist/components/effect-picker-search.d.ts

@@ -0,0 +1,5 @@
+import type { EffectCatalogItem } from '@remotion/studio-shared';
+export declare const filterEffectCatalog: ({ items, query, }: {
+    readonly items: readonly EffectCatalogItem[];
+    readonly query: string;
+}) => EffectCatalogItem[];

package/dist/components/effect-picker-search.js

@@ -0,0 +1,77 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.filterEffectCatalog = void 0;
+const normalize = (value) => value.trim().toLowerCase();
+const compact = (value) => normalize(value).replace(/[^a-z0-9]/g, '');
+const fuzzyMatches = (query, value) => {
+    let index = -1;
+    for (const character of query) {
+        index = value.indexOf(character, index + 1);
+        if (index === -1) {
+            return false;
+        }
+    }
+    return true;
+};
+const getMatchScore = (item, query) => {
+    const normalizedQuery = normalize(query);
+    const compactQuery = compact(query);
+    if (normalizedQuery.length === 0) {
+        return 0;
+    }
+    const label = normalize(item.label);
+    const name = normalize(item.effect.name);
+    const primary = [label, name];
+    const compactPrimary = primary.map(compact);
+    if (primary.some((field) => field === normalizedQuery)) {
+        return 0;
+    }
+    if (compactQuery.length > 0) {
+        if (compactPrimary.some((field) => field === compactQuery)) {
+            return 1;
+        }
+        if (compactPrimary.some((field) => field.startsWith(compactQuery))) {
+            return 2;
+        }
+    }
+    if (primary.some((field) => field.startsWith(normalizedQuery))) {
+        return 2;
+    }
+    if (compactQuery.length > 0) {
+        if (compactPrimary.some((field) => field.includes(compactQuery))) {
+            return 3;
+        }
+    }
+    if (primary.some((field) => field.includes(normalizedQuery))) {
+        return 3;
+    }
+    const importPath = normalize(item.effect.importPath);
+    if (importPath.includes(normalizedQuery) ||
+        (compactQuery.length > 0 && compact(importPath).includes(compactQuery))) {
+        return 4;
+    }
+    const secondary = [normalize(item.category), normalize(item.description)];
+    const compactSecondary = secondary.map(compact);
+    if (secondary.some((field) => field.includes(normalizedQuery)) ||
+        (compactQuery.length > 0 &&
+            compactSecondary.some((field) => field.includes(compactQuery)))) {
+        return 5;
+    }
+    if (compactQuery.length > 0 &&
+        compactPrimary.some((field) => fuzzyMatches(compactQuery, field))) {
+        return 6;
+    }
+    return null;
+};
+const filterEffectCatalog = ({ items, query, }) => {
+    return items
+        .map((item, index) => ({
+        item,
+        index,
+        score: getMatchScore(item, query),
+    }))
+        .filter((candidate) => candidate.score !== null)
+        .sort((a, b) => a.score - b.score || a.index - b.index)
+        .map(({ item }) => item);
+};
+exports.filterEffectCatalog = filterEffectCatalog;

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

@@ -1,4 +1,5 @@
 import { type ComponentProp, type FileType, type InsertableCompositionElementPosition } from '@remotion/studio-shared';
+import type { Dimensions } from '../helpers/is-current-selected-still';
 export type InsertElementDropPosition = {
     readonly centerX: number;
     readonly centerY: number;
@@ -8,7 +9,7 @@ export declare const getAssetElement: ({ fileType, src, }: {
     src: string;
 }) => {
     type: "asset";
-    assetType: "audio" | "gif" | "image" | "video";
+    assetType: "animated-image" | "audio" | "gif" | "image" | "video";
     src: string;
     srcType: "remote" | "static";
     dimensions: {
@@ -19,7 +20,7 @@ export declare const getAssetElement: ({ fileType, src, }: {
 } | null;
 export declare const getAssetElementFromPath: (assetPath: string) => {
     type: "asset";
-    assetType: "audio" | "gif" | "image" | "video";
+    assetType: "animated-image" | "audio" | "gif" | "image" | "video";
     src: string;
     srcType: "remote" | "static";
     dimensions: {
@@ -28,6 +29,13 @@ export declare const getAssetElementFromPath: (assetPath: string) => {
     } | null;
     position: InsertableCompositionElementPosition | null;
 } | null;
+export declare const getComponentDimensions: (component: {
+    componentName: string;
+    dimensions?: import("@remotion/studio-shared").ComponentDimensions | undefined;
+    importName: string;
+    importPath: string;
+    props: ComponentProp[];
+}) => Dimensions | null;
 export declare const pickFilesToImport: () => Promise<File[]>;
 export declare const importAssets: ({ compositionFile, compositionId, dropPosition, files, }: {
     compositionFile: string;
@@ -55,6 +63,7 @@ export declare const insertExistingAssets: ({ assetPaths, compositionFile, compo
 export declare const insertComponent: ({ component, compositionFile, compositionId, dropPosition, }: {
     component: {
         componentName: string;
+        dimensions?: import("@remotion/studio-shared").ComponentDimensions | undefined;
         importName: string;
         importPath: string;
         props: ComponentProp[];

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.getAssetElementFromPath = exports.getAssetElement = void 0;
+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");
@@ -23,6 +23,16 @@ const getAssetElement = ({ fileType, src, }) => {
             position: null,
         };
     }
+    if (fileType.type === 'apng') {
+        return {
+            type: 'asset',
+            assetType: 'animated-image',
+            src,
+            srcType: 'static',
+            dimensions: fileType.dimensions,
+            position: null,
+        };
+    }
     if (fileType.type === 'gif') {
         return {
             type: 'asset',
@@ -81,6 +91,16 @@ const getAssetElementFromPath = (assetPath) => {
             position: null,
         };
     }
+    if (extension === 'apng') {
+        return {
+            type: 'asset',
+            assetType: 'animated-image',
+            src: assetPath,
+            srcType: 'static',
+            dimensions: null,
+            position: null,
+        };
+    }
     if (extension === 'gif') {
         return {
             type: 'asset',
@@ -127,6 +147,9 @@ const getAssetLabel = (element) => {
     if (element.assetType === 'gif') {
         return '<Gif>';
     }
+    if (element.assetType === 'animated-image') {
+        return '<AnimatedImage>';
+    }
     if (element.assetType === 'audio') {
         return '<Audio>';
     }
@@ -155,6 +178,9 @@ const getComponentPropNumber = (props, name) => {
     return typeof (prop === null || prop === void 0 ? void 0 : prop.value) === 'number' ? prop.value : null;
 };
 const getComponentDimensions = (component) => {
+    if (component.dimensions) {
+        return component.dimensions;
+    }
     const width = getComponentPropNumber(component.props, 'width');
     const height = getComponentPropNumber(component.props, 'height');
     if (width !== null && height !== null) {
@@ -166,6 +192,7 @@ const getComponentDimensions = (component) => {
     }
     return null;
 };
+exports.getComponentDimensions = getComponentDimensions;
 const getImageDimensions = ({ revokeObjectUrl, src, }) => {
     return new Promise((resolve, reject) => {
         const image = new Image();
@@ -199,6 +226,7 @@ const getFileDimensions = async ({ file, fileType, }) => {
         fileType.type === 'jpeg' ||
         fileType.type === 'webp' ||
         fileType.type === 'bmp' ||
+        fileType.type === 'apng' ||
         fileType.type === 'gif') {
         if (fileType.dimensions) {
             return fileType.dimensions;
@@ -225,7 +253,7 @@ const getStaticAssetDimensions = (assetPath) => {
     const extension = (_a = assetPath.split('.').pop()) === null || _a === void 0 ? void 0 : _a.toLowerCase();
     const src = (0, remotion_1.staticFile)(assetPath);
     if (extension &&
-        ['png', 'jpg', 'jpeg', 'webp', 'bmp', 'gif'].includes(extension)) {
+        ['png', 'jpg', 'jpeg', 'webp', 'bmp', 'gif', 'apng'].includes(extension)) {
         return getImageDimensions({ revokeObjectUrl: false, src });
     }
     if (extension &&
@@ -250,6 +278,33 @@ const getStaticAssetDimensionsOrNull = async (assetPath) => {
         return null;
     }
 };
+const getStaticAssetFileType = async (assetPath) => {
+    var _a;
+    const extension = (_a = assetPath.split('.').pop()) === null || _a === void 0 ? void 0 : _a.toLowerCase();
+    if (extension !== 'png' && extension !== 'apng') {
+        return null;
+    }
+    try {
+        const response = await fetch((0, remotion_1.staticFile)(assetPath));
+        if (!response.ok) {
+            return null;
+        }
+        return (0, studio_shared_1.detectFileType)(new Uint8Array(await response.arrayBuffer()));
+    }
+    catch (_b) {
+        return null;
+    }
+};
+const getAssetElementFromStaticAsset = async (assetPath) => {
+    const fileType = await getStaticAssetFileType(assetPath);
+    if (fileType) {
+        const element = (0, exports.getAssetElement)({ fileType, src: assetPath });
+        if (element) {
+            return element;
+        }
+    }
+    return (0, exports.getAssetElementFromPath)(assetPath);
+};
 const pickFilesToImport = () => {
     return new Promise((resolve) => {
         const input = document.createElement('input');
@@ -456,18 +511,18 @@ const insertExistingAssets = async ({ assetPaths, compositionFile, compositionId
     const unsupportedFiles = [];
     try {
         for (const assetPath of assetPaths) {
-            const element = (0, exports.getAssetElementFromPath)(assetPath);
+            const element = await getAssetElementFromStaticAsset(assetPath);
             if (element === null) {
                 unsupportedFiles.push(assetPath);
                 continue;
             }
-            const dimensions = await getStaticAssetDimensionsOrNull(assetPath);
+            const dimensions = (_a = element.dimensions) !== null && _a !== void 0 ? _a : (await getStaticAssetDimensionsOrNull(assetPath));
             const inserted = await insertAssetElement({
                 compositionFile,
                 compositionId,
                 element: {
                     ...element,
-                    dimensions: (_a = element.dimensions) !== null && _a !== void 0 ? _a : dimensions,
+                    dimensions,
                     position: getCenteredPosition({
                         dimensions,
                         dropPosition,
@@ -499,7 +554,7 @@ const insertComponent = async ({ component, compositionFile, compositionId, drop
                 importPath: component.importPath,
                 props: component.props,
                 position: getCenteredPosition({
-                    dimensions: getComponentDimensions(component),
+                    dimensions: (0, exports.getComponentDimensions)(component),
                     dropPosition,
                 }),
             },