@remotion/studio 4.0.519 → 4.0.520

package/dist/api/visual-control.js

@@ -1,8 +1,8 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.visualControl = void 0;
-const react_1 = require("react");
 const remotion_1 = require("remotion");
+const use_sync_external_store_1 = require("../helpers/use-sync-external-store");
 const visual_control_store_1 = require("../visual-controls/visual-control-store");
 const VisualControls_1 = require("../visual-controls/VisualControls");
 /**
@@ -12,7 +12,7 @@ const visualControl = (key, value, schema) => {
     // Subscribe to store changes so the calling component
     // re-renders when a visual control value is edited in the sidebar.
     // eslint-disable-next-line react-hooks/rules-of-hooks
-    (0, react_1.useSyncExternalStore)(visual_control_store_1.visualControlStore.subscribe, visual_control_store_1.visualControlStore.getSnapshot, visual_control_store_1.visualControlStore.getSnapshot);
+    (0, use_sync_external_store_1.useSyncExternalStore)(visual_control_store_1.visualControlStore.subscribe, visual_control_store_1.visualControlStore.getSnapshot, visual_control_store_1.visualControlStore.getSnapshot);
     if ((0, remotion_1.getRemotionEnvironment)().isRendering) {
         return value;
     }

package/dist/components/AudioWaveform.js

@@ -39,6 +39,7 @@ const timeline_utils_1 = require("@remotion/timeline-utils");
 const react_1 = __importStar(require("react"));
 const remotion_1 = require("remotion");
 const colors_1 = require("../helpers/colors");
+const get_timeline_max_zoom_1 = require("../helpers/get-timeline-max-zoom");
 const timeline_layout_1 = require("../helpers/timeline-layout");
 const EMPTY_PEAKS = new Float32Array(0);
 const getContainerStyle = (height) => {
@@ -74,6 +75,7 @@ const AudioWaveformInner = ({ src, height, startFrom, durationInFrames, displayO
     if (vidConf === null) {
         throw new Error('Expected video config');
     }
+    const waveformSampleRate = Math.ceil(vidConf.fps * get_timeline_max_zoom_1.TIMELINE_FRAME_WIDTH_AT_MAX_ZOOM);
     const waveformCanvas = (0, react_1.useRef)(null);
     const volumeCanvas = (0, react_1.useRef)(null);
     const shouldRenderVolumeOverlay = doesVolumeChange && typeof volume === 'string';
@@ -102,10 +104,11 @@ const AudioWaveformInner = ({ src, height, startFrom, durationInFrames, displayO
         setError(null);
         return (0, timeline_utils_1.subscribeToWaveformPeaks)({
             src,
+            waveformSampleRate,
             onPeaks: (p) => setPeaks(p),
             onError: (err) => setError(err),
         });
-    }, [src]);
+    }, [src, waveformSampleRate]);
     const portionPeaks = (0, react_1.useMemo)(() => {
         if (!peaks) {
             return null;
@@ -119,6 +122,7 @@ const AudioWaveformInner = ({ src, height, startFrom, durationInFrames, displayO
             peaks,
             playbackRate,
             startFrom,
+            waveformSampleRate,
         });
     }, [
         displayDurationInFrames,
@@ -129,6 +133,7 @@ const AudioWaveformInner = ({ src, height, startFrom, durationInFrames, displayO
         playbackRate,
         startFrom,
         vidConf.fps,
+        waveformSampleRate,
     ]);
     // Drawing must happen in a layout effect: when the timeline zooms, the
     // canvas CSS box resizes in the same commit, and painting the bitmap

package/dist/components/Canvas.js

@@ -29,6 +29,7 @@ const editor_zoom_gestures_1 = require("../state/editor-zoom-gestures");
 const modals_1 = require("../state/modals");
 const call_api_1 = require("./call-api");
 const canvas_capture_drop_1 = require("./canvas-capture-drop");
+const composition_drag_data_1 = require("./composition-drag-data");
 const composition_drop_preview_1 = require("./composition-drop-preview");
 const drop_handler_data_1 = require("./drop-handler-data");
 const EditorGuides_1 = __importDefault(require("./EditorGuides"));
@@ -37,7 +38,6 @@ const use_is_ruler_visible_1 = require("./EditorRuler/use-is-ruler-visible");
 const effect_drag_and_drop_1 = require("./effect-drag-and-drop");
 const element_install_api_1 = require("./element-install-api");
 const element_install_request_1 = require("./element-install-request");
-const ElementInstallConfirmation_1 = require("./ElementInstallConfirmation");
 const handle_drop_1 = require("./handle-drop");
 const import_assets_1 = require("./import-assets");
 const layout_1 = require("./layout");
@@ -48,6 +48,19 @@ const SvgImportDialog_1 = require("./SvgImportDialog");
 const imperative_state_1 = require("./Timeline/imperative-state");
 const use_resolved_stack_1 = require("./Timeline/use-resolved-stack");
 const elementInstallDependencyIgnoreList = ['react', 'react-dom', 'remotion'];
+const getCanvasDragPreviewMetadata = (mimeTypes) => {
+    var _a, _b, _c;
+    const composition = (0, composition_drag_data_1.getCompositionDragPreviewMetadata)(mimeTypes);
+    if (composition !== null) {
+        return {
+            ...composition,
+            width: (_a = composition.width) !== null && _a !== void 0 ? _a : undefined,
+            height: (_b = composition.height) !== null && _b !== void 0 ? _b : undefined,
+            durationInFrames: (_c = composition.durationInFrames) !== null && _c !== void 0 ? _c : undefined,
+        };
+    }
+    return studio_protocol_1.StudioProtocolInternals.getDragPreviewMetadata(mimeTypes);
+};
 const getContainerStyle = (editorZoomGestures) => ({
     flex: 1,
     display: 'flex',
@@ -140,10 +153,8 @@ const Canvas = ({ canvasContent, size }) => {
         : null;
     const [isAddingAsset, setIsAddingAsset] = (0, react_1.useState)(false);
     const [compositionDropPreview, setCompositionDropPreview] = (0, react_1.useState)(null);
-    const [installingElementName, setInstallingElementName] = (0, react_1.useState)(null);
     const [pendingElementInstallRequests, setPendingElementInstallRequests] = (0, react_1.useState)([]);
     const [activeElementInstallRequest, setActiveElementInstallRequest] = (0, react_1.useState)(null);
-    const [elementInstallReview, setElementInstallReview] = (0, react_1.useState)(null);
     const lastFocusedAtRef = (0, react_1.useRef)(typeof document === 'undefined' || document.hasFocus() ? Date.now() : null);
     const [assetResolution, setAssetResolution] = (0, react_1.useState)(null);
     const metadataRequestRef = (0, react_1.useRef)(0);
@@ -601,16 +612,6 @@ const Canvas = ({ canvasContent, size }) => {
             updateElementInstallTarget(event.requestId);
         });
     }, [subscribeToEvent, updateElementInstallTarget]);
-    (0, react_1.useEffect)(() => {
-        if (installingElementName === null) {
-            return;
-        }
-        const previousTitle = document.title;
-        document.title = `📦 Install ${installingElementName} - Remotion Studio`;
-        return () => {
-            document.title = previousTitle;
-        };
-    }, [installingElementName]);
     (0, react_1.useEffect)(() => {
         if (previewServerClientId === null) {
             return;
@@ -680,6 +681,10 @@ const Canvas = ({ canvasContent, size }) => {
         setActiveElementInstallRequest(nextRequest);
         setPendingElementInstallRequests(remainingRequests);
     }, [activeElementInstallRequest, pendingElementInstallRequests]);
+    const closeElementInstallDialog = (0, react_1.useCallback)(() => {
+        setSelectedModal(null);
+        setActiveElementInstallRequest(null);
+    }, [setSelectedModal]);
     (0, react_1.useEffect)(() => {
         if (activeElementInstallRequest === null) {
             return;
@@ -687,7 +692,6 @@ const Canvas = ({ canvasContent, size }) => {
         let canceled = false;
         const handleInstallRequest = async () => {
             var _a;
-            setInstallingElementName(activeElementInstallRequest.element.displayName);
             try {
                 const [newPreflight, currentPreflight] = await Promise.all([
                     (0, element_install_api_1.prepareElementInstall)({
@@ -711,7 +715,6 @@ const Canvas = ({ canvasContent, size }) => {
                 }
                 if (!newPreflight.success) {
                     (0, NotificationCenter_1.showNotification)(`Could not review Element installation: ${newPreflight.reason}`, 4000);
-                    setInstallingElementName(null);
                     setActiveElementInstallRequest(null);
                     return;
                 }
@@ -735,12 +738,14 @@ const Canvas = ({ canvasContent, size }) => {
                 const currentPlan = currentPreflight.success
                     ? currentPreflight.plan
                     : null;
-                setSelectedModal(null);
-                setElementInstallReview({
+                setSelectedModal({
+                    type: 'element-install',
                     currentPlan,
                     dependenciesToReview,
                     missingPackages,
                     newPlan: newPreflight.plan,
+                    onClose: closeElementInstallDialog,
+                    request: activeElementInstallRequest,
                     sourceIsUnverified,
                     sourceLabel,
                 });
@@ -750,7 +755,6 @@ const Canvas = ({ canvasContent, size }) => {
                     return;
                 }
                 (0, NotificationCenter_1.showNotification)(`Could not review Element installation: ${error instanceof Error ? error.message : String(error)}`, 4000);
-                setInstallingElementName(null);
                 setActiveElementInstallRequest(null);
             }
         };
@@ -758,12 +762,11 @@ const Canvas = ({ canvasContent, size }) => {
         return () => {
             canceled = true;
         };
-    }, [activeElementInstallRequest, setSelectedModal]);
-    const closeElementInstallDialog = (0, react_1.useCallback)(() => {
-        setElementInstallReview(null);
-        setInstallingElementName(null);
-        setActiveElementInstallRequest(null);
-    }, []);
+    }, [
+        activeElementInstallRequest,
+        closeElementInstallDialog,
+        setSelectedModal,
+    ]);
     const onDragOver = (0, react_1.useCallback)((event) => {
         var _a;
         var _b;
@@ -787,7 +790,7 @@ const Canvas = ({ canvasContent, size }) => {
             setCompositionDropPreview(null);
             return;
         }
-        const metadata = studio_protocol_1.StudioProtocolInternals.getDragPreviewMetadata((_b = (_a = event.dataTransfer) === null || _a === void 0 ? void 0 : _a.types) !== null && _b !== void 0 ? _b : []);
+        const metadata = getCanvasDragPreviewMetadata((_b = (_a = event.dataTransfer) === null || _a === void 0 ? void 0 : _a.types) !== null && _b !== void 0 ? _b : []);
         if (((metadata === null || metadata === void 0 ? void 0 : metadata.type) !== 'composition' && (metadata === null || metadata === void 0 ? void 0 : metadata.type) !== 'element') ||
             metadata.width === undefined ||
             metadata.height === undefined) {
@@ -918,7 +921,7 @@ const Canvas = ({ canvasContent, size }) => {
         event.stopPropagation();
         setIsAddingAsset(true);
         try {
-            const metadata = studio_protocol_1.StudioProtocolInternals.getDragPreviewMetadata((_d = (_b = event.dataTransfer) === null || _b === void 0 ? void 0 : _b.types) !== null && _d !== void 0 ? _d : []);
+            const metadata = getCanvasDragPreviewMetadata((_d = (_b = event.dataTransfer) === null || _b === void 0 ? void 0 : _b.types) !== null && _d !== void 0 ? _d : []);
             const isComposition = (metadata === null || metadata === void 0 ? void 0 : metadata.type) === 'composition';
             let dropPosition = getDropPosition({
                 addFitPadding,
@@ -1122,15 +1125,6 @@ const Canvas = ({ canvasContent, size }) => {
         };
     }, [compositionDropPreview, contentDimensions, previewSize, size]);
     return (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
-            jsx_runtime_1.jsxs("div", { ref: canvas_ref_1.canvasRef, style: getContainerStyle(editorZoomGestures), children: [size ? (jsx_runtime_1.jsx(Preview_1.VideoPreview, { canvasContent: canvasContent, contentDimensions: contentDimensions, canvasSize: size, assetMetadata: assetResolution, onRetryAssetMetadata: fetchMetadata })) : null, compositionDropPreviewStyle === null ? null : (jsx_runtime_1.jsx("div", { className: "css-reset", "data-testid": "composition-drop-preview", style: compositionDropPreviewStyle })), isFit ? null : (jsx_runtime_1.jsx("div", { style: resetZoom, className: "css-reset", children: jsx_runtime_1.jsx(ResetZoomButton_1.ResetZoomButton, { onClick: onReset }) })), editorShowGuides && canvasContent.type === 'composition' && (jsx_runtime_1.jsx(EditorGuides_1.default, { canvasSize: size, contentDimensions: contentDimensions, assetMetadata: assetResolution }))] }), areRulersVisible && (jsx_runtime_1.jsx(EditorRuler_1.EditorRulers, { canCreateGuides: canvasContent.type === 'composition', contentDimensions: contentDimensions, canvasSize: size, assetMetadata: assetResolution, containerRef: canvas_ref_1.canvasRef })), activeElementInstallRequest === null ||
-                elementInstallReview === null ? null : (jsx_runtime_1.jsx(ElementInstallConfirmation_1.ElementInstallConfirmation, { currentCompositionMetadata: config === null ||
-                    currentCompositionId !== activeElementInstallRequest.compositionId
-                    ? null
-                    : {
-                        durationInFrames: config.durationInFrames,
-                        fps: config.fps,
-                        height: config.height,
-                        width: config.width,
-                    }, currentPlan: elementInstallReview.currentPlan, dependenciesToReview: elementInstallReview.dependenciesToReview, missingPackages: elementInstallReview.missingPackages, newPlan: elementInstallReview.newPlan, onClose: closeElementInstallDialog, request: activeElementInstallRequest, sourceIsUnverified: elementInstallReview.sourceIsUnverified, sourceLabel: elementInstallReview.sourceLabel, usesBrowserDependencyResolution: (0, browser_studio_operations_1.getBrowserStudioOperations)() !== null }))] }));
+            jsx_runtime_1.jsxs("div", { ref: canvas_ref_1.canvasRef, style: getContainerStyle(editorZoomGestures), children: [size ? (jsx_runtime_1.jsx(Preview_1.VideoPreview, { canvasContent: canvasContent, contentDimensions: contentDimensions, canvasSize: size, assetMetadata: assetResolution, onRetryAssetMetadata: fetchMetadata })) : null, compositionDropPreviewStyle === null ? null : (jsx_runtime_1.jsx("div", { className: "css-reset", "data-testid": "composition-drop-preview", style: compositionDropPreviewStyle })), isFit ? null : (jsx_runtime_1.jsx("div", { style: resetZoom, className: "css-reset", children: jsx_runtime_1.jsx(ResetZoomButton_1.ResetZoomButton, { onClick: onReset }) })), editorShowGuides && canvasContent.type === 'composition' && (jsx_runtime_1.jsx(EditorGuides_1.default, { canvasSize: size, contentDimensions: contentDimensions, assetMetadata: assetResolution }))] }), areRulersVisible && (jsx_runtime_1.jsx(EditorRuler_1.EditorRulers, { canCreateGuides: canvasContent.type === 'composition', contentDimensions: contentDimensions, canvasSize: size, assetMetadata: assetResolution, containerRef: canvas_ref_1.canvasRef }))] }));
 };
 exports.Canvas = Canvas;

package/dist/components/CompositionSelector.js

@@ -2,8 +2,6 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.CompositionSelector = exports.useCompositionNavigation = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const studio_protocol_1 = require("@remotion/studio-protocol");
-const studio_shared_1 = require("@remotion/studio-shared");
 const react_1 = require("react");
 const remotion_1 = require("remotion");
 const client_id_1 = require("../helpers/client-id");
@@ -13,6 +11,7 @@ const persist_open_folders_1 = require("../helpers/persist-open-folders");
 const folders_1 = require("../state/folders");
 const modals_1 = require("../state/modals");
 const z_index_1 = require("../state/z-index");
+const composition_drag_data_1 = require("./composition-drag-data");
 const CompositionSelectorItem_1 = require("./CompositionSelectorItem");
 const ContextMenu_1 = require("./ContextMenu");
 const InitialCompositionLoader_1 = require("./InitialCompositionLoader");
@@ -166,9 +165,8 @@ const CompositionSelector = () => {
         }
     }, [runCompositionListAutoScroll, stopCompositionListAutoScroll]);
     const onCompositionListDragOverCapture = (0, react_1.useCallback)((event) => {
-        var _a;
         if (window.remotion_isReadOnlyStudio ||
-            ((_a = studio_protocol_1.StudioProtocolInternals.getDragPreviewMetadata(event.dataTransfer.types)) === null || _a === void 0 ? void 0 : _a.type) !== 'composition') {
+            (0, composition_drag_data_1.getCompositionDragPreviewMetadata)(event.dataTransfer.types) === null) {
             stopCompositionListAutoScroll();
             return;
         }
@@ -183,9 +181,8 @@ const CompositionSelector = () => {
         return stopCompositionListAutoScroll;
     }, [stopCompositionListAutoScroll]);
     const onRootDragOver = (0, react_1.useCallback)((event) => {
-        var _a;
         if (window.remotion_isReadOnlyStudio ||
-            ((_a = studio_protocol_1.StudioProtocolInternals.getDragPreviewMetadata(event.dataTransfer.types)) === null || _a === void 0 ? void 0 : _a.type) !== 'composition') {
+            (0, composition_drag_data_1.getCompositionDragPreviewMetadata)(event.dataTransfer.types) === null) {
             return;
         }
         event.preventDefault();
@@ -205,11 +202,10 @@ const CompositionSelector = () => {
         if (window.remotion_isReadOnlyStudio) {
             return;
         }
-        const parsed = studio_protocol_1.StudioProtocolInternals.parseDragData(event.dataTransfer);
-        if ((parsed === null || parsed === void 0 ? void 0 : parsed.type) !== 'composition') {
+        const compositionDragData = (0, composition_drag_data_1.parseCompositionDragData)(event.dataTransfer);
+        if (compositionDragData === null) {
             return;
         }
-        const compositionDragData = parsed.data;
         event.preventDefault();
         event.stopPropagation();
         stopCompositionListAutoScroll();
@@ -230,7 +226,7 @@ const CompositionSelector = () => {
                 },
                 dryRun: false,
                 signal: controller.signal,
-                symbolicatedStack: (0, studio_shared_1.compositionDragDataToSymbolicatedStack)(compositionDragData),
+                symbolicatedStack: (0, composition_drag_data_1.compositionDragDataToSymbolicatedStack)(compositionDragData),
             });
             if (result.success) {
                 notification.dismiss();

package/dist/components/CompositionSelectorItem.js

@@ -2,8 +2,6 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.CompositionSelectorItem = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const studio_protocol_1 = require("@remotion/studio-protocol");
-const studio_shared_1 = require("@remotion/studio-shared");
 const react_1 = require("react");
 const client_id_1 = require("../helpers/client-id");
 const colors_1 = require("../helpers/colors");
@@ -12,6 +10,7 @@ const noop_1 = require("../helpers/noop");
 const sidebar_scroll_into_view_1 = require("../helpers/sidebar-scroll-into-view");
 const folder_1 = require("../icons/folder");
 const modals_1 = require("../state/modals");
+const composition_drag_data_1 = require("./composition-drag-data");
 const composition_menu_items_1 = require("./composition-menu-items");
 const CompositionContextButton_1 = require("./CompositionContextButton");
 const CompositionOrStillIcon_1 = require("./CompositionOrStillIcon");
@@ -155,8 +154,7 @@ const CompositionSelectorItem = ({ item, level, currentComposition, tabIndex, se
         }
         setIsDragging(true);
         event.dataTransfer.effectAllowed = 'copyMove';
-        const dragData = studio_protocol_1.StudioProtocolInternals.makeDragData({
-            type: 'composition',
+        const dragData = (0, composition_drag_data_1.makeCompositionDragData)({
             compositionFile: (_a = resolvedLocation === null || resolvedLocation === void 0 ? void 0 : resolvedLocation.source) !== null && _a !== void 0 ? _a : null,
             compositionId: item.composition.id,
             width: (_b = item.composition.width) !== null && _b !== void 0 ? _b : null,
@@ -169,10 +167,9 @@ const CompositionSelectorItem = ({ item, level, currentComposition, tabIndex, se
         setIsDragging(false);
     }, []);
     const onFolderDragOver = (0, react_1.useCallback)((event) => {
-        var _a;
         if (item.type !== 'folder' ||
             window.remotion_isReadOnlyStudio ||
-            ((_a = studio_protocol_1.StudioProtocolInternals.getDragPreviewMetadata(event.dataTransfer.types)) === null || _a === void 0 ? void 0 : _a.type) !== 'composition') {
+            (0, composition_drag_data_1.getCompositionDragPreviewMetadata)(event.dataTransfer.types) === null) {
             return;
         }
         event.preventDefault();
@@ -185,10 +182,9 @@ const CompositionSelectorItem = ({ item, level, currentComposition, tabIndex, se
         setDragHovered(false);
     }, []);
     const onFolderChildListDragOver = (0, react_1.useCallback)((event) => {
-        var _a;
         if (item.type !== 'folder' ||
             window.remotion_isReadOnlyStudio ||
-            ((_a = studio_protocol_1.StudioProtocolInternals.getDragPreviewMetadata(event.dataTransfer.types)) === null || _a === void 0 ? void 0 : _a.type) !== 'composition') {
+            (0, composition_drag_data_1.getCompositionDragPreviewMetadata)(event.dataTransfer.types) === null) {
             return;
         }
         event.preventDefault();
@@ -200,11 +196,10 @@ const CompositionSelectorItem = ({ item, level, currentComposition, tabIndex, se
         if (item.type !== 'folder' || window.remotion_isReadOnlyStudio) {
             return;
         }
-        const parsed = studio_protocol_1.StudioProtocolInternals.parseDragData(event.dataTransfer);
-        if ((parsed === null || parsed === void 0 ? void 0 : parsed.type) !== 'composition') {
+        const compositionDragData = (0, composition_drag_data_1.parseCompositionDragData)(event.dataTransfer);
+        if (compositionDragData === null) {
             return;
         }
-        const compositionDragData = parsed.data;
         event.preventDefault();
         event.stopPropagation();
         clearRootDragHover();
@@ -228,7 +223,7 @@ const CompositionSelectorItem = ({ item, level, currentComposition, tabIndex, se
                 },
                 dryRun: false,
                 signal: controller.signal,
-                symbolicatedStack: (0, studio_shared_1.compositionDragDataToSymbolicatedStack)(compositionDragData),
+                symbolicatedStack: (0, composition_drag_data_1.compositionDragDataToSymbolicatedStack)(compositionDragData),
             });
             if (result.success) {
                 notification.dismiss();

package/dist/components/CurrentCompositionSideEffects.js

@@ -4,10 +4,12 @@ exports.TitleUpdater = void 0;
 const react_1 = require("react");
 const remotion_1 = require("remotion");
 const document_title_1 = require("../helpers/document-title");
+const modals_1 = require("../state/modals");
 const context_1 = require("./RenderQueue/context");
 const TitleUpdater = () => {
     const renderQueue = (0, react_1.useContext)(context_1.RenderQueueContext);
     const { canvasContent } = (0, react_1.useContext)(remotion_1.Internals.CompositionManager);
+    const selectedModal = (0, react_1.useContext)(modals_1.SelectedModalContext);
     const { jobs } = renderQueue;
     (0, react_1.useEffect)(() => {
         if (!canvasContent) {
@@ -31,6 +33,9 @@ const TitleUpdater = () => {
     (0, react_1.useEffect)(() => {
         (0, document_title_1.setRenderJobs)(jobs);
     }, [jobs]);
+    (0, react_1.useEffect)(() => {
+        (0, document_title_1.setCurrentModal)(selectedModal);
+    }, [selectedModal]);
     return null;
 };
 exports.TitleUpdater = TitleUpdater;

package/dist/components/ElementInstallConfirmation.d.ts

@@ -1,31 +1,10 @@
-import type { ElementInstallExpectedFileState, ElementInstallRequest } from '@remotion/studio-shared';
 import React from 'react';
+import type { ElementInstallModalState } from '../state/modals';
 export declare const ElementLibraryAddConfirmation: React.FC<{
     readonly displayName: string | null;
     readonly origin: string;
     readonly url: string;
 }>;
-type ElementInstallPlan = {
-    readonly compositionFile: string;
-    readonly filePath: string;
-    readonly expectedFileState: ElementInstallExpectedFileState;
-};
-type CurrentCompositionMetadata = {
-    readonly durationInFrames: number;
-    readonly fps: number;
-    readonly height: number;
-    readonly width: number;
-};
 export declare const ElementInstallConfirmation: React.FC<{
-    readonly currentCompositionMetadata: CurrentCompositionMetadata | null;
-    readonly currentPlan: ElementInstallPlan | null;
-    readonly dependenciesToReview: string[];
-    readonly missingPackages: string[];
-    readonly newPlan: ElementInstallPlan;
-    readonly onClose: () => void;
-    readonly request: ElementInstallRequest;
-    readonly sourceIsUnverified: boolean;
-    readonly sourceLabel: string;
-    readonly usesBrowserDependencyResolution: boolean;
+    readonly state: ElementInstallModalState;
 }>;
-export {};

package/dist/components/ElementInstallConfirmation.js

@@ -7,6 +7,7 @@ const react_1 = require("react");
 const react_dom_1 = require("react-dom");
 const remotion_1 = require("remotion");
 const ShortcutHint_1 = require("../error-overlay/remotion-overlay/ShortcutHint");
+const browser_studio_operations_1 = require("../helpers/browser-studio-operations");
 const colors_1 = require("../helpers/colors");
 const hoverable_1 = require("../helpers/hoverable");
 const resolved_stack_to_symbolicated_1 = require("../helpers/resolved-stack-to-symbolicated");
@@ -262,9 +263,22 @@ const ElementLibraryAddConfirmation = ({ displayName, origin, url }) => {
         ] }));
 };
 exports.ElementLibraryAddConfirmation = ElementLibraryAddConfirmation;
-const ElementInstallConfirmation = ({ currentCompositionMetadata, currentPlan, dependenciesToReview, missingPackages, newPlan, onClose, request, sourceIsUnverified, sourceLabel, usesBrowserDependencyResolution, }) => {
+const ElementInstallConfirmation = ({ state }) => {
     var _a, _b;
-    const { compositions } = (0, react_1.useContext)(remotion_1.Internals.CompositionManager);
+    const { currentPlan, dependenciesToReview, missingPackages, newPlan, onClose, request, sourceIsUnverified, sourceLabel, } = state;
+    const config = remotion_1.Internals.useUnsafeVideoConfig();
+    const { canvasContent, compositions } = (0, react_1.useContext)(remotion_1.Internals.CompositionManager);
+    const currentCompositionMetadata = config === null ||
+        (canvasContent === null || canvasContent === void 0 ? void 0 : canvasContent.type) !== 'composition' ||
+        canvasContent.compositionId !== request.compositionId
+        ? null
+        : {
+            durationInFrames: config.durationInFrames,
+            fps: config.fps,
+            height: config.height,
+            width: config.width,
+        };
+    const usesBrowserDependencyResolution = (0, browser_studio_operations_1.getBrowserStudioOperations)() !== null;
     const { currentZIndex } = (0, z_index_1.useZIndex)();
     const [mode, setMode] = (0, react_1.useState)(currentPlan === null ? 'new-composition' : 'current-composition');
     const [submitting, setSubmitting] = (0, react_1.useState)(false);

package/dist/components/FpsCounter.js

@@ -17,7 +17,7 @@ const pushWithMaxSize = (arr, value, maxSize) => {
 };
 const FpsCounter = ({ playbackSpeed }) => {
     const videoConfig = remotion_1.Internals.useUnsafeVideoConfig();
-    const [playing] = remotion_1.Internals.Timeline.usePlayingState();
+    const playing = remotion_1.Internals.usePlaying();
     const frame = remotion_1.Internals.Timeline.useTimelinePosition();
     const [marker, rerender] = (0, react_1.useState)({});
     const [fps, setFps] = (0, react_1.useState)(0);

package/dist/components/FramePersistor.js

@@ -4,7 +4,7 @@ exports.FramePersistor = void 0;
 const react_1 = require("react");
 const remotion_1 = require("remotion");
 const FramePersistor = () => {
-    const [playing] = remotion_1.Internals.Timeline.usePlayingState();
+    const playing = remotion_1.Internals.usePlaying();
     const config = (0, remotion_1.useVideoConfig)();
     const frame = remotion_1.Internals.Timeline.useTimelinePosition();
     const setFrame = remotion_1.Internals.useTimelineSetFrame();

package/dist/components/InspectorPanel/SequenceSelectionInspector.js

@@ -16,10 +16,10 @@ const InspectorSequenceSection_1 = require("../InspectorSequenceSection");
 const is_menu_item_1 = require("../Menu/is-menu-item");
 const NotificationCenter_1 = require("../Notifications/NotificationCenter");
 const split_video_from_audio_api_1 = require("../split-video-from-audio-api");
-const delete_selected_timeline_item_1 = require("../Timeline/delete-selected-timeline-item");
 const duplicate_selected_timeline_item_1 = require("../Timeline/duplicate-selected-timeline-item");
 const split_selected_timeline_item_1 = require("../Timeline/split-selected-timeline-item");
 const TimelineSelection_1 = require("../Timeline/TimelineSelection");
+const use_delete_timeline_items_1 = require("../Timeline/use-delete-timeline-items");
 const use_sequence_freeze_frame_menu_item_1 = require("../Timeline/use-sequence-freeze-frame-menu-item");
 const AlignmentControls_1 = require("./AlignmentControls");
 const common_1 = require("./common");
@@ -74,6 +74,7 @@ const SequenceSourceQuickActions = ({ selection, track, validatedSource }) => {
     const { propStatuses } = (0, react_1.useContext)(remotion_1.Internals.VisualModePropStatusesContext);
     const { setPropStatuses } = (0, react_1.useContext)(remotion_1.Internals.VisualModeSettersContext);
     const confirm = (0, ConfirmationDialog_1.useConfirmationDialog)();
+    const deleteTimelineItems = (0, use_delete_timeline_items_1.useDeleteTimelineItems)();
     const propStatusesForOverride = (0, react_1.useMemo)(() => remotion_1.Internals.getPropStatusesCtx(propStatuses, selection.nodePathInfo.sequenceSubscriptionKey), [propStatuses, selection.nodePathInfo.sequenceSubscriptionKey]);
     const freezeFrameMenuItem = (0, use_sequence_freeze_frame_menu_item_1.getSequenceFreezeFrameMenuItem)({
         clientId: previewServerState.type === 'connected' && (0, interactivity_enabled_1.isStudioInteractivityEnabled)()
@@ -98,8 +99,8 @@ const SequenceSourceQuickActions = ({ selection, track, validatedSource }) => {
         if (sourceActionsDisabled) {
             return;
         }
-        (0, delete_selected_timeline_item_1.deleteSequencesFromSource)([selection.nodePathInfo], confirm).catch(() => undefined);
-    }, [confirm, selection.nodePathInfo, sourceActionsDisabled]);
+        deleteTimelineItems([selection]);
+    }, [deleteTimelineItems, selection, sourceActionsDisabled]);
     const splitVideoFromAudioDisabledReason = sourceActionsDisabled
         ? 'Studio is read-only'
         : selection.nodePathInfo.numberOfSequencesWithThisNodePath > 1

package/dist/components/InspectorPanel/use-composition-actions.js

@@ -1,7 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useCompositionActions = void 0;
-const studio_protocol_1 = require("@remotion/studio-protocol");
 const react_1 = require("react");
 const remotion_1 = require("remotion");
 const browser_studio_operations_1 = require("../../helpers/browser-studio-operations");
@@ -173,7 +172,7 @@ const useCompositionActions = () => {
         });
     }, [canInsertAsset, onAssetSelected, onFilesSelected, setSelectedModal]);
     const onCompositionSelected = (0, react_1.useCallback)(async (composition) => {
-        var _a, _b, _c, _d, _e;
+        var _a, _b;
         if (!canInsertComposition ||
             currentCompositionId === null ||
             compositionFile === null) {
@@ -185,14 +184,12 @@ const useCompositionActions = () => {
                 ? await (0, get_stack_1.getOriginalLocationFromStack)(composition.stack, 'sequence')
                 : null;
             const selectedCompositionFile = (_b = (_a = resolvedLocation === null || resolvedLocation === void 0 ? void 0 : resolvedLocation.source) !== null && _a !== void 0 ? _a : browserStudioOperations === null || browserStudioOperations === void 0 ? void 0 : browserStudioOperations.getCompositionFile(composition.id)) !== null && _b !== void 0 ? _b : null;
-            const compositionDragData = studio_protocol_1.StudioProtocolInternals.makeDragData({
-                type: 'composition',
+            const compositionDragData = {
+                type: 'remotion-composition',
+                version: 1,
                 compositionFile: selectedCompositionFile,
                 compositionId: composition.id,
-                width: (_c = composition.width) !== null && _c !== void 0 ? _c : null,
-                height: (_d = composition.height) !== null && _d !== void 0 ? _d : null,
-                durationInFrames: (_e = composition.durationInFrames) !== null && _e !== void 0 ? _e : null,
-            }).data;
+            };
             await (0, import_assets_1.insertComposition)({
                 composition: compositionDragData,
                 compositionFile,

package/dist/components/Modals.js

@@ -107,6 +107,6 @@ const Modals = ({ readOnlyStudio }) => {
                     modalContextType.initialTab === 'packages' ||
                     modalContextType.initialTab === 'shortcuts') ? (jsx_runtime_1.jsx(SettingsModal_1.SettingsModal, { initialTab: modalContextType.initialTab, initialPublicLicenseKey: modalContextType.initialPublicLicenseKey }, `${modalContextType.initialTab}-${modalContextType.initialPublicLicenseKey}`)) : null, modalContextType && modalContextType.type === 'web-render' && (jsx_runtime_1.jsx(WebRenderModal_1.WebRenderModalWithLoader, { ...modalContextType })), modalContextType &&
                 modalContextType.type === 'server-render' &&
-                (canRender || modalContextType.readOnlyStudio) ? (jsx_runtime_1.jsx(ServerRenderModal_1.RenderModalWithLoader, { readOnlyStudio: (_a = modalContextType.readOnlyStudio) !== null && _a !== void 0 ? _a : false, initialFrame: modalContextType.initialFrame, initialDarkMode: modalContextType.initialDarkMode, compositionId: modalContextType.compositionId, initialVideoImageFormat: modalContextType.initialVideoImageFormat, initialJpegQuality: modalContextType.initialJpegQuality, initialScale: modalContextType.initialScale, initialLogLevel: modalContextType.initialLogLevel, initialOffthreadVideoCacheSizeInBytes: modalContextType.initialOffthreadVideoCacheSizeInBytes, initialOffthreadVideoThreads: modalContextType.initialOffthreadVideoThreads, initialMediaCacheSizeInBytes: modalContextType.initialMediaCacheSizeInBytes, initialConcurrency: modalContextType.initialConcurrency, maxConcurrency: modalContextType.maxConcurrency, minConcurrency: modalContextType.minConcurrency, initialStillImageFormat: modalContextType.initialStillImageFormat, initialMuted: modalContextType.initialMuted, initialEnforceAudioTrack: modalContextType.initialEnforceAudioTrack, initialProResProfile: modalContextType.initialProResProfile, initialx264Preset: modalContextType.initialx264Preset, initialGopSize: modalContextType.initialGopSize, initialPixelFormat: modalContextType.initialPixelFormat, initialAudioBitrate: modalContextType.initialAudioBitrate, initialVideoBitrate: modalContextType.initialVideoBitrate, initialEveryNthFrame: modalContextType.initialEveryNthFrame, initialNumberOfGifLoops: modalContextType.initialNumberOfGifLoops, initialDelayRenderTimeout: modalContextType.initialDelayRenderTimeout, initialEnvVariables: modalContextType.initialEnvVariables, initialDisableWebSecurity: modalContextType.initialDisableWebSecurity, initialGl: modalContextType.initialOpenGlRenderer, initialHeadless: modalContextType.initialHeadless, initialIgnoreCertificateErrors: modalContextType.initialIgnoreCertificateErrors, initialEncodingBufferSize: modalContextType.initialEncodingBufferSize, initialEncodingMaxRate: modalContextType.initialEncodingMaxRate, initialUserAgent: modalContextType.initialUserAgent, initialColorSpace: modalContextType.initialColorSpace, initialMultiProcessOnLinux: modalContextType.initialMultiProcessOnLinux, initialRepro: modalContextType.initialRepro, initialBeep: modalContextType.initialBeep, initialForSeamlessAacConcatenation: modalContextType.initialForSeamlessAacConcatenation, defaultProps: modalContextType.defaultProps, inFrameMark: modalContextType.inFrameMark, outFrameMark: modalContextType.outFrameMark, defaultConfigurationAudioCodec: modalContextType.defaultConfigurationAudioCodec, defaultConfigurationVideoCodec: modalContextType.defaultConfigurationVideoCodec, renderTypeOfLastRender: modalContextType.renderTypeOfLastRender, defaultMetadata: modalContextType.defaulMetadata, initialHardwareAcceleration: modalContextType.initialHardwareAcceleration, initialSampleRate: modalContextType.initialSampleRate, initialChromeMode: modalContextType.initialChromeMode, renderDefaults: modalContextType.renderDefaults })) : null, modalContextType && modalContextType.type === 'render-progress' && (jsx_runtime_1.jsx(RenderStatusModal_1.RenderStatusModal, { jobId: modalContextType.jobId })), modalContextType && modalContextType.type === 'fix-computed-value' && (jsx_runtime_1.jsx(FixComputedValueModal_1.FixComputedValueModal, { state: modalContextType })), modalContextType && modalContextType.type === 'quick-switcher' && (jsx_runtime_1.jsx(QuickSwitcher_1.default, { readOnlyStudio: readOnlyStudio, invocationTimestamp: modalContextType.invocationTimestamp, initialMode: modalContextType.mode, assetSelection: modalContextType.assetSelection, compositionSelection: modalContextType.compositionSelection })), modalContextType && modalContextType.type === 'element-library' && (jsx_runtime_1.jsx(ElementLibraryModal_1.ElementLibraryModal, { name: modalContextType.name, url: modalContextType.url })), modalContextType && modalContextType.type === 'add-effect' && (jsx_runtime_1.jsx(EffectPickerModal_1.EffectPickerModal, { state: modalContextType })), modalContextType && modalContextType.type === 'confirmation-dialog' && (jsx_runtime_1.jsx(ConfirmationDialog_1.ConfirmationDialog, { state: modalContextType })), modalContextType && modalContextType.type === 'svg-import-dialog' && (jsx_runtime_1.jsx(SvgImportDialog_1.SvgImportDialog, { state: modalContextType })), (0, studio_runtime_config_1.getStudioAskAIEnabled)() && jsx_runtime_1.jsx(AskAiModal_1.AskAiModal, {})] }));
+                (canRender || modalContextType.readOnlyStudio) ? (jsx_runtime_1.jsx(ServerRenderModal_1.RenderModalWithLoader, { readOnlyStudio: (_a = modalContextType.readOnlyStudio) !== null && _a !== void 0 ? _a : false, initialFrame: modalContextType.initialFrame, initialDarkMode: modalContextType.initialDarkMode, compositionId: modalContextType.compositionId, initialVideoImageFormat: modalContextType.initialVideoImageFormat, initialJpegQuality: modalContextType.initialJpegQuality, initialScale: modalContextType.initialScale, initialLogLevel: modalContextType.initialLogLevel, initialOffthreadVideoCacheSizeInBytes: modalContextType.initialOffthreadVideoCacheSizeInBytes, initialOffthreadVideoThreads: modalContextType.initialOffthreadVideoThreads, initialMediaCacheSizeInBytes: modalContextType.initialMediaCacheSizeInBytes, initialConcurrency: modalContextType.initialConcurrency, maxConcurrency: modalContextType.maxConcurrency, minConcurrency: modalContextType.minConcurrency, initialStillImageFormat: modalContextType.initialStillImageFormat, initialMuted: modalContextType.initialMuted, initialEnforceAudioTrack: modalContextType.initialEnforceAudioTrack, initialProResProfile: modalContextType.initialProResProfile, initialx264Preset: modalContextType.initialx264Preset, initialGopSize: modalContextType.initialGopSize, initialPixelFormat: modalContextType.initialPixelFormat, initialAudioBitrate: modalContextType.initialAudioBitrate, initialVideoBitrate: modalContextType.initialVideoBitrate, initialEveryNthFrame: modalContextType.initialEveryNthFrame, initialNumberOfGifLoops: modalContextType.initialNumberOfGifLoops, initialDelayRenderTimeout: modalContextType.initialDelayRenderTimeout, initialEnvVariables: modalContextType.initialEnvVariables, initialDisableWebSecurity: modalContextType.initialDisableWebSecurity, initialGl: modalContextType.initialOpenGlRenderer, initialHeadless: modalContextType.initialHeadless, initialIgnoreCertificateErrors: modalContextType.initialIgnoreCertificateErrors, initialEncodingBufferSize: modalContextType.initialEncodingBufferSize, initialEncodingMaxRate: modalContextType.initialEncodingMaxRate, initialUserAgent: modalContextType.initialUserAgent, initialColorSpace: modalContextType.initialColorSpace, initialMultiProcessOnLinux: modalContextType.initialMultiProcessOnLinux, initialRepro: modalContextType.initialRepro, initialBeep: modalContextType.initialBeep, initialForSeamlessAacConcatenation: modalContextType.initialForSeamlessAacConcatenation, defaultProps: modalContextType.defaultProps, inFrameMark: modalContextType.inFrameMark, outFrameMark: modalContextType.outFrameMark, defaultConfigurationAudioCodec: modalContextType.defaultConfigurationAudioCodec, defaultConfigurationVideoCodec: modalContextType.defaultConfigurationVideoCodec, renderTypeOfLastRender: modalContextType.renderTypeOfLastRender, defaultMetadata: modalContextType.defaulMetadata, initialHardwareAcceleration: modalContextType.initialHardwareAcceleration, initialSampleRate: modalContextType.initialSampleRate, initialChromeMode: modalContextType.initialChromeMode, renderDefaults: modalContextType.renderDefaults })) : null, modalContextType && modalContextType.type === 'render-progress' && (jsx_runtime_1.jsx(RenderStatusModal_1.RenderStatusModal, { jobId: modalContextType.jobId })), modalContextType && modalContextType.type === 'fix-computed-value' && (jsx_runtime_1.jsx(FixComputedValueModal_1.FixComputedValueModal, { state: modalContextType })), modalContextType && modalContextType.type === 'quick-switcher' && (jsx_runtime_1.jsx(QuickSwitcher_1.default, { readOnlyStudio: readOnlyStudio, invocationTimestamp: modalContextType.invocationTimestamp, initialMode: modalContextType.mode, assetSelection: modalContextType.assetSelection, compositionSelection: modalContextType.compositionSelection })), modalContextType && modalContextType.type === 'element-library' && (jsx_runtime_1.jsx(ElementLibraryModal_1.ElementLibraryModal, { name: modalContextType.name, url: modalContextType.url })), modalContextType && modalContextType.type === 'element-install' && (jsx_runtime_1.jsx(ElementInstallConfirmation_1.ElementInstallConfirmation, { state: modalContextType })), modalContextType && modalContextType.type === 'add-effect' && (jsx_runtime_1.jsx(EffectPickerModal_1.EffectPickerModal, { state: modalContextType })), modalContextType && modalContextType.type === 'confirmation-dialog' && (jsx_runtime_1.jsx(ConfirmationDialog_1.ConfirmationDialog, { state: modalContextType })), modalContextType && modalContextType.type === 'svg-import-dialog' && (jsx_runtime_1.jsx(SvgImportDialog_1.SvgImportDialog, { state: modalContextType })), (0, studio_runtime_config_1.getStudioAskAIEnabled)() && jsx_runtime_1.jsx(AskAiModal_1.AskAiModal, {})] }));
 };
 exports.Modals = Modals;

package/dist/components/NewComposition/NewComposition.js

@@ -2,6 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.NewComposition = exports.NewCompositionFields = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
+const canvas_1 = require("@remotion/canvas");
 const react_1 = require("react");
 const remotion_1 = require("remotion");
 const get_static_files_1 = require("../../api/get-static-files");
@@ -9,7 +10,6 @@ const write_static_file_1 = require("../../api/write-static-file");
 const colors_1 = require("../../helpers/colors");
 const get_folder_id_1 = require("../../helpers/get-folder-id");
 const install_required_package_1 = require("../../helpers/install-required-package");
-const sort_by_nonce_history_1 = require("../../helpers/sort-by-nonce-history");
 const use_create_composition_1 = require("../../helpers/use-create-composition");
 const Checkmark_1 = require("../../icons/Checkmark");
 const folder_1 = require("../../icons/folder");
@@ -83,7 +83,7 @@ const NewCompositionFields = ({ heightValidationMessage, inputRef, nameValidatio
             ? folders
                 .slice()
                 .sort((a, b) => a.name.localeCompare(b.name, undefined, { numeric: true }))
-            : (0, sort_by_nonce_history_1.sortItemsByNonceHistory)(folders);
+            : (0, canvas_1.sortItemsByCommitOrder)(folders, (folder) => folder.order);
         const appendFolders = (parent) => {
             sortedFolders
                 .filter((folder) => folder.parent === parent)

package/dist/components/PlayPause.js

@@ -79,19 +79,8 @@ const PlayPauseInner = ({ playbackRate, loop, bufferStateDelayInMilliseconds, mu
     const { inFrame, outFrame } = (0, in_out_1.useTimelineInOutFramePosition)();
     const videoConfig = remotion_1.Internals.useUnsafeVideoConfig();
     const [showBufferIndicator, setShowBufferState] = (0, react_1.useState)(false);
-    const { play, pause, pauseAndReturnToPlayStart, frameBack, seek, frameForward, emitter, getCurrentFrame, isPlaying, } = player_1.PlayerInternals.usePlayerMethods();
-    const [playing, setPlaying] = (0, react_1.useState)(isPlaying);
-    (0, react_1.useEffect)(() => {
-        const onPlay = () => setPlaying(true);
-        const onPause = () => setPlaying(false);
-        setPlaying(isPlaying());
-        emitter.addEventListener('play', onPlay);
-        emitter.addEventListener('pause', onPause);
-        return () => {
-            emitter.removeEventListener('play', onPlay);
-            emitter.removeEventListener('pause', onPause);
-        };
-    }, [emitter, isPlaying]);
+    const { play, pause, pauseAndReturnToPlayStart, frameBack, seek, frameForward, emitter, getCurrentFrame, } = player_1.PlayerInternals.usePlayerMethods();
+    const playing = remotion_1.Internals.usePlaying();
     const isStill = (0, is_current_selected_still_1.useIsStill)();
     (0, react_1.useEffect)(() => {
         if (isStill) {