@remotion/studio 4.0.477 → 4.0.479

package/dist/esm/renderEntry.mjs

@@ -209,7 +209,7 @@ var renderContent = (Root) => {
     renderToDOM(/* @__PURE__ */ jsx("div", {
       children: /* @__PURE__ */ jsx(DelayedSpinner, {})
     }));
-    import("./chunk-t8fjnw2d.js").then(({ StudioInternals }) => {
+    import("./chunk-fge2mq5p.js").then(({ StudioInternals }) => {
       window.remotion_isStudio = true;
       window.remotion_isReadOnlyStudio = true;
       window.remotion_inputProps = "{}";

package/dist/helpers/editor-guide-selection.js

@@ -24,7 +24,7 @@ const findGuide = (guidesList, guideId) => {
     if (guideId === null) {
         return null;
     }
-    return (_a = guidesList.find((guide) => guide.id === guideId)) !== null && _a !== void 0 ? _a : null;
+    return (_a = guidesList.find((guide) => guide.id === guideId && guide.show)) !== null && _a !== void 0 ? _a : null;
 };
 const getRulerGuideHighlight = ({ guidesList, selectedItems, hoveredGuideId, draggingGuideId, }) => {
     var _a;

package/dist/helpers/get-preview-file-type.js

@@ -8,7 +8,7 @@ const getPreviewFileType = (fileName) => {
     }
     const audioExtensions = ['mp3', 'wav', 'ogg', 'aac'];
     const videoExtensions = ['mp4', 'avi', 'mkv', 'mov', 'webm'];
-    const imageExtensions = ['jpg', 'jpeg', 'png', 'gif', 'bmp'];
+    const imageExtensions = ['jpg', 'jpeg', 'png', 'apng', 'gif', 'bmp'];
     const fileExtension = (_a = fileName.split('.').pop()) === null || _a === void 0 ? void 0 : _a.toLowerCase();
     if (fileExtension === undefined) {
         throw new Error('File extension is undefined');

package/dist/helpers/render-codec-label.d.ts

@@ -0,0 +1,2 @@
+export declare const renderHumanReadableAudioCodec: (codec: "aac" | "ac3" | "alaw" | "eac3" | "flac" | "mp3" | "opus" | "pcm-f32" | "pcm-f32be" | "pcm-f64" | "pcm-f64be" | "pcm-s16" | "pcm-s16be" | "pcm-s24" | "pcm-s24be" | "pcm-s32" | "pcm-s32be" | "pcm-s8" | "pcm-u8" | "ulaw" | "vorbis" | null) => string;
+export declare const renderHumanReadableVideoCodec: (codec: "av1" | "avc" | "hevc" | "vp8" | "vp9" | null) => string;

package/dist/helpers/render-codec-label.js

@@ -0,0 +1,49 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.renderHumanReadableVideoCodec = exports.renderHumanReadableAudioCodec = void 0;
+const audioCodecLabels = {
+    aac: 'AAC',
+    ac3: 'AC3',
+    alaw: 'A-law',
+    eac3: 'E-AC3',
+    flac: 'FLAC',
+    mp3: 'MP3',
+    opus: 'Opus',
+    'pcm-f32': 'PCM 32-bit float',
+    'pcm-f32be': 'PCM 32-bit big-endian float',
+    'pcm-f64': 'PCM 64-bit little-endian float',
+    'pcm-f64be': 'PCM 64-bit big-endian float',
+    'pcm-s16': 'PCM 16-bit signed integer',
+    'pcm-s16be': 'PCM 16-bit big-endian signed integer',
+    'pcm-s24': 'PCM 24-bit signed integer',
+    'pcm-s24be': 'PCM 24-bit big-endian signed integer',
+    'pcm-s32': 'PCM 32-bit signed integer',
+    'pcm-s32be': 'PCM 32-bit big-endian signed integer',
+    'pcm-s8': 'PCM 8-bit signed integer',
+    'pcm-u8': 'PCM 8-bit unsigned integer',
+    ulaw: 'u-law',
+    vorbis: 'Vorbis',
+};
+const renderHumanReadableAudioCodec = (codec) => {
+    var _a;
+    if (codec === null) {
+        return 'Unknown';
+    }
+    return (_a = audioCodecLabels[codec]) !== null && _a !== void 0 ? _a : codec;
+};
+exports.renderHumanReadableAudioCodec = renderHumanReadableAudioCodec;
+const videoCodecLabels = {
+    av1: 'AV1',
+    avc: 'H.264',
+    hevc: 'H.265',
+    vp8: 'VP8',
+    vp9: 'VP9',
+};
+const renderHumanReadableVideoCodec = (codec) => {
+    var _a;
+    if (codec === null) {
+        return 'Unknown';
+    }
+    return (_a = videoCodecLabels[codec]) !== null && _a !== void 0 ? _a : codec;
+};
+exports.renderHumanReadableVideoCodec = renderHumanReadableVideoCodec;

package/dist/helpers/ruler-canvas-size.d.ts

@@ -0,0 +1,5 @@
+import type { Size } from '@remotion/player';
+export declare const applyRulerInsetsToCanvasSize: ({ rulersAreVisible, size, }: {
+    readonly rulersAreVisible: boolean;
+    readonly size: Size;
+}) => Size;

package/dist/helpers/ruler-canvas-size.js

@@ -0,0 +1,17 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.applyRulerInsetsToCanvasSize = void 0;
+const editor_rulers_1 = require("../state/editor-rulers");
+const applyRulerInsetsToCanvasSize = ({ rulersAreVisible, size, }) => {
+    if (!rulersAreVisible) {
+        return size;
+    }
+    return {
+        ...size,
+        left: size.left + editor_rulers_1.RULER_WIDTH,
+        top: size.top + editor_rulers_1.RULER_WIDTH,
+        width: size.width - editor_rulers_1.RULER_WIDTH,
+        height: size.height - editor_rulers_1.RULER_WIDTH,
+    };
+};
+exports.applyRulerInsetsToCanvasSize = applyRulerInsetsToCanvasSize;

package/dist/helpers/timeline-layout.d.ts

@@ -1,9 +1,9 @@
-import { type AnySchemaFieldInfo, type DragOverrides, type EffectSchemaFieldInfo, type PropStatuses, type SchemaFieldInfo, type SequenceControls, type SequenceSchemaFieldInfo } from '@remotion/studio-shared';
-import type { GetDragOverrides, GetEffectDragOverrides, SequenceSchema as SequenceSchemaShape, TSequence } from 'remotion';
+import { type AnySchemaFieldInfo, type DragOverrides, type EffectSchemaFieldInfo, type PropStatuses, type SchemaFieldInfo, type SequenceControls, type InteractivitySchemaFieldInfo } from '@remotion/studio-shared';
+import type { GetDragOverrides, GetEffectDragOverrides, InteractivitySchema as InteractivitySchemaShape, TSequence } from 'remotion';
 import type { GetIsExpanded } from '../components/ExpandedTracksProvider';
 import type { SequenceNodePathInfo } from './get-timeline-sequence-sort-key';
 export { getEffectFieldsToShow, getFieldsToShow, SCHEMA_FIELD_ROW_HEIGHT, } from '@remotion/studio-shared';
-export type { AnySchemaFieldInfo, DragOverrides, EffectSchemaFieldInfo, PropStatuses, SchemaFieldInfo, SequenceControls, SequenceSchemaFieldInfo, };
+export type { AnySchemaFieldInfo, DragOverrides, EffectSchemaFieldInfo, PropStatuses, SchemaFieldInfo, SequenceControls, InteractivitySchemaFieldInfo, };
 export declare const TIMELINE_PADDING = 16;
 export declare const TIMELINE_BORDER = 1;
 export declare const TIMELINE_ITEM_BORDER_BOTTOM = 1;
@@ -14,7 +14,7 @@ export type TimelineFieldOnSave = (value: unknown) => Promise<void>;
 export type TimelineFieldOnDragValueChange = (value: unknown) => void;
 export type TimelineEffectGroupInfo = {
     readonly effectIndex: number;
-    readonly effectSchema: SequenceSchemaShape;
+    readonly effectSchema: InteractivitySchemaShape;
     readonly documentationLink: string | null;
 };
 export type TimelineTreeNode = {

package/dist/helpers/use-media-metadata.d.ts

@@ -1,10 +1,16 @@
+import type { InputAudioTrack, InputVideoTrack } from 'mediabunny';
 export type MediaMetadata = {
     duration: number;
     format: string | null;
     width: number | null;
     height: number | null;
-    videoCodec: string | null;
-    audioCodec: string | null;
+    videoCodec: InputVideoTrack['codec'] | null;
+    audioCodec: InputAudioTrack['codec'] | null;
+    fps: number | null;
+    isHdr: boolean | null;
+    sampleRate: number | null;
+    hasVideoTrack: boolean | null;
+    hasAudioTrack: boolean | null;
 };
 export declare const getMediaMetadata: (src: string) => Promise<MediaMetadata | null>;
 export declare const useMediaMetadata: (src: string | null) => MediaMetadata | null;

package/dist/helpers/use-media-metadata.js

@@ -16,7 +16,7 @@ const safeCall = async (fn) => {
     }
 };
 const getMediabunnyMetadata = async (src) => {
-    var _a;
+    var _a, _b;
     let input;
     try {
         input = new mediabunny_1.Input({
@@ -24,7 +24,7 @@ const getMediabunnyMetadata = async (src) => {
             source: new mediabunny_1.UrlSource(src),
         });
     }
-    catch (_b) {
+    catch (_c) {
         return null;
     }
     try {
@@ -37,11 +37,14 @@ const getMediabunnyMetadata = async (src) => {
         if (duration === null) {
             return null;
         }
-        const [width, height, videoCodec, audioCodec] = await Promise.all([
+        const [width, height, videoCodec, packetStats, isHdr, audioCodec, sampleRate,] = await Promise.all([
             videoTrack ? safeCall(() => videoTrack.getDisplayWidth()) : null,
             videoTrack ? safeCall(() => videoTrack.getDisplayHeight()) : null,
             videoTrack ? safeCall(() => videoTrack.getCodec()) : null,
+            videoTrack ? safeCall(() => videoTrack.computePacketStats(50)) : null,
+            videoTrack ? safeCall(() => videoTrack.hasHighDynamicRange()) : null,
             audioTrack ? safeCall(() => audioTrack.getCodec()) : null,
+            audioTrack ? safeCall(() => audioTrack.getSampleRate()) : null,
         ]);
         return {
             duration,
@@ -50,13 +53,18 @@ const getMediabunnyMetadata = async (src) => {
             height,
             videoCodec,
             audioCodec,
+            fps: (_b = packetStats === null || packetStats === void 0 ? void 0 : packetStats.averagePacketRate) !== null && _b !== void 0 ? _b : null,
+            isHdr,
+            sampleRate,
+            hasVideoTrack: Boolean(videoTrack),
+            hasAudioTrack: Boolean(audioTrack),
         };
     }
     finally {
         try {
             input.dispose();
         }
-        catch (_c) {
+        catch (_d) {
             // ignore
         }
     }
@@ -71,6 +79,11 @@ const getFallbackVideoMetadata = async (src) => {
             height: metadata.height,
             videoCodec: null,
             audioCodec: null,
+            fps: null,
+            isHdr: null,
+            sampleRate: null,
+            hasVideoTrack: null,
+            hasAudioTrack: null,
         };
     }
     catch (_a) {

package/dist/state/modals.d.ts

@@ -3,11 +3,10 @@ import type { HardwareAccelerationOption } from '@remotion/renderer/client';
 import type { PackageManager, RenderDefaults } from '@remotion/studio-shared';
 import type { RenderStillOnWebImageFormat, WebRendererAudioCodec, WebRendererContainer, WebRendererHardwareAcceleration, WebRendererQuality, WebRendererVideoCodec } from '@remotion/web-renderer';
 import type React from 'react';
-import type { _InternalTypes } from 'remotion';
+import type { SequencePropsSubscriptionKey, _InternalTypes } from 'remotion';
 import type { CompType } from '../components/NewComposition/DuplicateComposition';
 import type { QuickSwitcherMode } from '../components/QuickSwitcher/NoResults';
 import type { RenderType } from '../components/RenderModal/RenderModalAdvanced';
-import type { EasingEditorModalState } from '../components/Timeline/EasingEditorModal';
 import type { KeyframeSettingsModalState } from '../components/Timeline/KeyframeSettingsModal';
 import type { Bug, UpdateInfo } from '../components/UpdateCheck';
 export type WebRenderModalState = {
@@ -98,6 +97,12 @@ export type ConfirmationDialogState = {
     onConfirm: () => void;
     onCancel: () => void;
 };
+export type AddEffectModalState = {
+    type: 'add-effect';
+    fileName: string;
+    nodePath: SequencePropsSubscriptionKey;
+    clientId: string;
+};
 export type ModalState = {
     type: 'duplicate-comp';
     compositionId: string;
@@ -123,7 +128,7 @@ export type ModalState = {
     relativePath: string;
 } | {
     type: 'input-props-override';
-} | EasingEditorModalState | KeyframeSettingsModalState | RenderModalState | WebRenderModalState | {
+} | KeyframeSettingsModalState | RenderModalState | WebRenderModalState | {
     type: 'render-progress';
     jobId: string;
 } | {
@@ -137,7 +142,7 @@ export type ModalState = {
     type: 'quick-switcher';
     mode: QuickSwitcherMode;
     invocationTimestamp: number;
-} | ConfirmationDialogState;
+} | AddEffectModalState | ConfirmationDialogState;
 export type ModalContextType = {
     selectedModal: ModalState | null;
     setSelectedModal: React.Dispatch<React.SetStateAction<ModalState | null>>;

package/package.json

@@ -3,7 +3,7 @@
 		"url": "https://github.com/remotion-dev/remotion/tree/main/packages/studio"
 	},
 	"name": "@remotion/studio",
-	"version": "4.0.477",
+	"version": "4.0.479",
 	"description": "APIs for interacting with the Remotion Studio",
 	"main": "dist",
 	"scripts": {
@@ -25,17 +25,17 @@
 	},
 	"dependencies": {
 		"semver": "7.5.3",
-		"remotion": "4.0.477",
-		"@remotion/canvas-capture": "4.0.477",
-		"@remotion/player": "4.0.477",
-		"@remotion/media-utils": "4.0.477",
-		"@remotion/renderer": "4.0.477",
-		"@remotion/web-renderer": "4.0.477",
-		"@remotion/studio-shared": "4.0.477",
-		"@remotion/timeline-utils": "4.0.477",
-		"@remotion/zod-types": "4.0.477",
+		"remotion": "4.0.479",
+		"@remotion/canvas-capture": "4.0.479",
+		"@remotion/player": "4.0.479",
+		"@remotion/media-utils": "4.0.479",
+		"@remotion/renderer": "4.0.479",
+		"@remotion/web-renderer": "4.0.479",
+		"@remotion/studio-shared": "4.0.479",
+		"@remotion/timeline-utils": "4.0.479",
+		"@remotion/zod-types": "4.0.479",
 		"@jridgewell/trace-mapping": "0.3.31",
-		"mediabunny": "1.45.0",
+		"mediabunny": "1.47.0",
 		"memfs": "3.4.3",
 		"open": "8.4.2",
 		"zod": "4.3.6"
@@ -44,7 +44,7 @@
 		"react": "19.2.3",
 		"react-dom": "19.2.3",
 		"@types/semver": "7.5.3",
-		"@remotion/eslint-config-internal": "4.0.477",
+		"@remotion/eslint-config-internal": "4.0.479",
 		"eslint": "9.19.0",
 		"@typescript/native-preview": "7.0.0-dev.20260217.1"
 	},