@remotion/studio 4.0.513 → 4.0.514

package/dist/components/Timeline/use-timeline-height.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.useTimelineHeight = void 0;
+exports.useTimelineTrackHeights = void 0;
 const react_1 = require("react");
 const remotion_1 = require("remotion");
 const client_id_1 = require("../../helpers/client-id");
@@ -8,11 +8,9 @@ const timeline_layout_1 = require("../../helpers/timeline-layout");
 const use_runtime_values_1 = require("../../helpers/use-runtime-values");
 const ExpandedTracksProvider_1 = require("../ExpandedTracksProvider");
 const get_node_keyframes_1 = require("./get-node-keyframes");
-const MaxTimelineTracks_1 = require("./MaxTimelineTracks");
 const timeline_expanded_filter_1 = require("./timeline-expanded-filter");
 const TimelineSelection_1 = require("./TimelineSelection");
-const TimelineTimeIndicators_1 = require("./TimelineTimeIndicators");
-const useTimelineHeight = ({ shown, hasBeenCut, isStill, }) => {
+const useTimelineTrackHeights = ({ timeline, }) => {
     const { getIsExpanded } = (0, react_1.useContext)(ExpandedTracksProvider_1.ExpandedTracksGetterContext);
     const { previewServerState } = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx);
     const { propStatuses } = (0, react_1.useContext)(remotion_1.Internals.VisualModePropStatusesContext);
@@ -20,7 +18,7 @@ const useTimelineHeight = ({ shown, hasBeenCut, isStill, }) => {
     const { selectedItems } = (0, TimelineSelection_1.useTimelineSelection)();
     const previewServerConnected = previewServerState.type === 'connected';
     const selectedRowKeys = (0, react_1.useMemo)(() => (0, timeline_expanded_filter_1.getSelectedTimelineExpandedRowKeys)(selectedItems), [selectedItems]);
-    const expandedControls = (0, react_1.useMemo)(() => shown.flatMap((track) => {
+    const expandedControls = (0, react_1.useMemo)(() => timeline.flatMap((track) => {
         if (!previewServerConnected ||
             track.nodePathInfo === null ||
             !getIsExpanded(track.nodePathInfo) ||
@@ -28,14 +26,14 @@ const useTimelineHeight = ({ shown, hasBeenCut, isStill, }) => {
             return [];
         }
         return [track.sequence.controls];
-    }), [getIsExpanded, previewServerConnected, shown]);
+    }), [getIsExpanded, previewServerConnected, timeline]);
     const runtimeValueSnapshots = (0, use_runtime_values_1.useRuntimeValueSnapshots)(expandedControls);
     const runtimeValuesByStore = (0, react_1.useMemo)(() => new Map(expandedControls.map((controls, index) => [
         controls.runtimeValues,
         runtimeValueSnapshots[index],
     ])), [expandedControls, runtimeValueSnapshots]);
-    return (0, react_1.useMemo)(() => {
-        const tracksHeight = shown.reduce((acc, track) => {
+    const heights = (0, react_1.useMemo)(() => {
+        return timeline.map((track) => {
             const isExpanded = previewServerConnected &&
                 track.nodePathInfo !== null &&
                 getIsExpanded(track.nodePathInfo);
@@ -84,16 +82,10 @@ const useTimelineHeight = ({ shown, hasBeenCut, isStill, }) => {
                 const separators = Math.max(0, flat.length - 1);
                 return totalRowsHeight + separators + timeline_layout_1.TIMELINE_ITEM_BORDER_BOTTOM;
             })();
-            return acc + layerHeight + expandedHeight;
-        }, 0);
-        return (tracksHeight +
-            timeline_layout_1.TIMELINE_ITEM_BORDER_BOTTOM +
-            (hasBeenCut ? MaxTimelineTracks_1.MAX_TIMELINE_TRACKS_NOTICE_HEIGHT : 0) +
-            (isStill ? 0 : TimelineTimeIndicators_1.TIMELINE_TIME_INDICATOR_HEIGHT));
+            return layerHeight + expandedHeight;
+        });
     }, [
-        shown,
-        hasBeenCut,
-        isStill,
+        timeline,
         previewServerConnected,
         getIsExpanded,
         propStatuses,
@@ -102,5 +94,11 @@ const useTimelineHeight = ({ shown, hasBeenCut, isStill, }) => {
         selectedRowKeys,
         runtimeValuesByStore,
     ]);
+    const stableHeights = (0, react_1.useRef)(heights);
+    if (stableHeights.current.length !== heights.length ||
+        heights.some((height, index) => stableHeights.current[index] !== height)) {
+        stableHeights.current = heights;
+    }
+    return stableHeights.current;
 };
-exports.useTimelineHeight = useTimelineHeight;
+exports.useTimelineTrackHeights = useTimelineTrackHeights;

package/dist/components/UpdateCheck.d.ts

@@ -1,13 +1,5 @@
-import type { PackageManager } from '@remotion/studio-shared';
-export type UpdateInfo = {
-    currentVersion: string;
-    latestVersion: string;
-    updateAvailable: boolean;
-    skillsUpdateAvailable: boolean;
-    remotionUpgradeSkillAvailable: boolean;
-    timedOut: boolean;
-    packageManager: PackageManager | 'unknown';
-};
+import type { GetRemotionSkillsInfoResponse, UpdateAvailableResponse } from '@remotion/studio-shared';
+export type UpdateInfo = UpdateAvailableResponse & Pick<GetRemotionSkillsInfoResponse, 'remotionUpgradeSkillAvailable'>;
 export type Bug = {
     title: string;
     description: string;

package/dist/components/UpdateCheck.js

@@ -9,6 +9,7 @@ const modals_1 = require("../state/modals");
 const z_index_1 = require("../state/z-index");
 const InlineAction_1 = require("./InlineAction");
 const actions_1 = require("./RenderQueue/actions");
+const SettingsContext_1 = require("./SettingsContext");
 const buttonStyle = {
     appearance: 'none',
     border: 'none',
@@ -28,6 +29,7 @@ const updateIconContainer = {
 const UpdateCheck = () => {
     const [info, setInfo] = (0, react_1.useState)(null);
     const { setSelectedModal } = (0, react_1.useContext)(modals_1.SetSelectedModalContext);
+    const { remotionSkillsInfo } = (0, SettingsContext_1.useSettings)();
     const { tabIndex } = (0, z_index_1.useZIndex)();
     const [knownBugs, setKnownBugs] = (0, react_1.useState)(null);
     const [hovered, setHovered] = (0, react_1.useState)(false);
@@ -76,12 +78,16 @@ const UpdateCheck = () => {
         };
     }, [checkForBugs, checkForUpdates]);
     const openModal = (0, react_1.useCallback)(() => {
+        var _a;
         setSelectedModal({
             type: 'update',
-            info: info,
+            info: {
+                ...info,
+                remotionUpgradeSkillAvailable: (_a = remotionSkillsInfo === null || remotionSkillsInfo === void 0 ? void 0 : remotionSkillsInfo.remotionUpgradeSkillAvailable) !== null && _a !== void 0 ? _a : false,
+            },
             knownBugs: knownBugs,
         });
-    }, [info, knownBugs, setSelectedModal]);
+    }, [info, knownBugs, remotionSkillsInfo, setSelectedModal]);
     const dynButtonStyle = (0, react_1.useMemo)(() => {
         return {
             ...buttonStyle,

package/dist/components/VisualControls/VisualControlHandle.js

@@ -5,6 +5,7 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const no_react_1 = require("remotion/no-react");
 const fast_refresh_context_1 = require("../../fast-refresh-context");
+const browser_studio_operations_1 = require("../../helpers/browser-studio-operations");
 const get_current_edited_value_1 = require("../../visual-controls/get-current-edited-value");
 const VisualControls_1 = require("../../visual-controls/VisualControls");
 const get_zod_if_possible_1 = require("../get-zod-if-possible");
@@ -35,6 +36,13 @@ const VisualControlHandle = ({ value, keyName }) => {
         if (disableSave) {
             return;
         }
+        // Saving visual control changes goes through
+        // /api/apply-visual-control-change, which Browser Studio does not
+        // support.
+        if ((0, browser_studio_operations_1.getBrowserStudioOperations)()) {
+            (0, NotificationCenter_1.showNotification)('Saving visual control changes is not supported in Browser Studio', 4000);
+            return;
+        }
         if (originalFileName.type !== 'loaded') {
             throw new Error('Original file name is not loaded');
         }

package/dist/components/delete-jsx-node-api.d.ts

@@ -0,0 +1,2 @@
+import type { DeleteJsxNodeRequest, DeleteJsxNodeResponse } from '@remotion/studio-shared';
+export declare const deleteJsxNode: (request: DeleteJsxNodeRequest) => Promise<DeleteJsxNodeResponse>;

package/dist/components/delete-jsx-node-api.js

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.deleteJsxNode = void 0;
+const browser_studio_operations_1 = require("../helpers/browser-studio-operations");
+const call_api_1 = require("./call-api");
+const deleteJsxNode = (request) => {
+    const browserStudioOperations = (0, browser_studio_operations_1.getBrowserStudioOperations)();
+    return browserStudioOperations
+        ? browserStudioOperations.deleteJsxNode(request)
+        : (0, call_api_1.callApi)('/api/delete-jsx-node', request);
+};
+exports.deleteJsxNode = deleteJsxNode;

package/dist/components/element-install-api.d.ts

@@ -0,0 +1,3 @@
+import type { InsertElementRequest, InsertElementResponse, PrepareElementInstallRequest, PrepareElementInstallResponse } from '@remotion/studio-shared';
+export declare const prepareElementInstall: (request: PrepareElementInstallRequest) => Promise<PrepareElementInstallResponse>;
+export declare const installElement: (request: InsertElementRequest) => Promise<InsertElementResponse>;

package/dist/components/element-install-api.js

@@ -0,0 +1,19 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.installElement = exports.prepareElementInstall = void 0;
+const browser_studio_operations_1 = require("../helpers/browser-studio-operations");
+const call_api_1 = require("./call-api");
+const prepareElementInstall = (request) => {
+    const browserStudioOperations = (0, browser_studio_operations_1.getBrowserStudioOperations)();
+    return browserStudioOperations
+        ? browserStudioOperations.prepareElementInstall(request)
+        : (0, call_api_1.callApi)('/api/prepare-element-install', request);
+};
+exports.prepareElementInstall = prepareElementInstall;
+const installElement = (request) => {
+    const browserStudioOperations = (0, browser_studio_operations_1.getBrowserStudioOperations)();
+    return browserStudioOperations
+        ? browserStudioOperations.insertElement(request)
+        : (0, call_api_1.callApi)('/api/insert-element', request);
+};
+exports.installElement = installElement;

package/dist/components/import-assets.js

@@ -6,11 +6,13 @@ const remotion_1 = require("remotion");
 const no_react_1 = require("remotion/no-react");
 const get_static_files_1 = require("../api/get-static-files");
 const write_static_file_1 = require("../api/write-static-file");
+const browser_studio_operations_1 = require("../helpers/browser-studio-operations");
 const clipboard_figma_1 = require("../helpers/clipboard-figma");
 const inserted_element_selection_1 = require("../helpers/inserted-element-selection");
 const install_required_package_1 = require("../helpers/install-required-package");
 const use_media_metadata_1 = require("../helpers/use-media-metadata");
 const call_api_1 = require("./call-api");
+const element_install_api_1 = require("./element-install-api");
 const NotificationCenter_1 = require("./Notifications/NotificationCenter");
 const getFromForDrop = ({ durationInFrames, from, preferCompositionStart, }) => {
     if (preferCompositionStart !== true) {
@@ -494,13 +496,14 @@ const notifyUnsupportedFiles = (unsupportedFiles) => {
 };
 const insertCompositionElement = async ({ compositionFile, compositionId, element, from, }) => {
     const requiredPackage = (0, studio_shared_1.getRequiredPackageForInsertableElement)(element);
-    await (0, install_required_package_1.installRequiredPackages)(requiredPackage ? [{ name: requiredPackage, version: null }] : []);
-    const result = await (0, call_api_1.callApi)('/api/insert-jsx-element', {
-        compositionFile,
-        compositionId,
-        element,
-        from,
-    });
+    const browserStudioOperations = (0, browser_studio_operations_1.getBrowserStudioOperations)();
+    if (browserStudioOperations === null) {
+        await (0, install_required_package_1.installRequiredPackages)(requiredPackage ? [{ name: requiredPackage, version: null }] : []);
+    }
+    const request = { compositionFile, compositionId, element, from };
+    const result = browserStudioOperations
+        ? await browserStudioOperations.insertJsxElement(request)
+        : await (0, call_api_1.callApi)('/api/insert-jsx-element', request);
     if (!result.success) {
         (0, NotificationCenter_1.showNotification)(result.reason, 4000);
         return false;
@@ -635,6 +638,12 @@ const importAssets = async ({ compositionFile, compositionId, destinationDimensi
 };
 exports.importAssets = importAssets;
 const importFigmaClipboard = async ({ compositionFile, compositionId, destinationDimensions, dropPosition, html, }) => {
+    // Figma clipboard conversion requires the SVGR-based pipeline in
+    // @remotion/studio-server, which Browser Studio does not support.
+    if ((0, browser_studio_operations_1.getBrowserStudioOperations)()) {
+        (0, NotificationCenter_1.showNotification)('Importing Figma clipboard data is not supported in Browser Studio', 4000);
+        return;
+    }
     try {
         const converted = await (0, call_api_1.callApi)('/api/convert-figma-clipboard-to-svg', {
             html,
@@ -925,8 +934,10 @@ const insertComposition = async ({ composition, compositionFile, compositionId,
 exports.insertComposition = insertComposition;
 const insertElement = async ({ compositionFile, compositionId, element, expectedFileState, position, from, overwriteExisting, }) => {
     try {
-        await (0, install_required_package_1.installRequiredPackages)(element.dependencies);
-        const response = await (0, call_api_1.callApi)('/api/insert-element', {
+        if ((0, browser_studio_operations_1.getBrowserStudioOperations)() === null) {
+            await (0, install_required_package_1.installRequiredPackages)(element.dependencies);
+        }
+        const response = await (0, element_install_api_1.installElement)({
             compositionFile,
             compositionId,
             element,

package/dist/components/reorder-sequence-api.d.ts

@@ -0,0 +1,2 @@
+import type { ReorderSequenceRequest, ReorderSequenceResponse } from '@remotion/studio-shared';
+export declare const reorderSequence: (request: ReorderSequenceRequest) => Promise<ReorderSequenceResponse>;

package/dist/components/reorder-sequence-api.js

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.reorderSequence = void 0;
+const browser_studio_operations_1 = require("../helpers/browser-studio-operations");
+const call_api_1 = require("./call-api");
+const reorderSequence = (request) => {
+    const browserStudioOperations = (0, browser_studio_operations_1.getBrowserStudioOperations)();
+    return browserStudioOperations
+        ? browserStudioOperations.reorderSequence(request)
+        : (0, call_api_1.callApi)('/api/reorder-sequence', request);
+};
+exports.reorderSequence = reorderSequence;

package/dist/components/split-jsx-sequence-api.d.ts

@@ -0,0 +1,2 @@
+import type { SplitJsxSequenceRequest, SplitJsxSequenceResponse } from '@remotion/studio-shared';
+export declare const splitJsxSequence: (request: SplitJsxSequenceRequest) => Promise<SplitJsxSequenceResponse>;

package/dist/components/split-jsx-sequence-api.js

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.splitJsxSequence = void 0;
+const browser_studio_operations_1 = require("../helpers/browser-studio-operations");
+const call_api_1 = require("./call-api");
+const splitJsxSequence = (request) => {
+    const browserStudioOperations = (0, browser_studio_operations_1.getBrowserStudioOperations)();
+    return browserStudioOperations
+        ? browserStudioOperations.splitJsxSequence(request)
+        : (0, call_api_1.callApi)('/api/split-jsx-sequence', request);
+};
+exports.splitJsxSequence = splitJsxSequence;

package/dist/components/split-video-from-audio-api.d.ts

@@ -0,0 +1,2 @@
+import type { SplitVideoFromAudioRequest, SplitVideoFromAudioResponse } from '@remotion/studio-shared';
+export declare const splitVideoFromAudio: (request: SplitVideoFromAudioRequest) => Promise<SplitVideoFromAudioResponse>;

package/dist/components/split-video-from-audio-api.js

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.splitVideoFromAudio = void 0;
+const browser_studio_operations_1 = require("../helpers/browser-studio-operations");
+const call_api_1 = require("./call-api");
+const splitVideoFromAudio = (request) => {
+    const browserStudioOperations = (0, browser_studio_operations_1.getBrowserStudioOperations)();
+    return browserStudioOperations
+        ? browserStudioOperations.splitVideoFromAudio(request)
+        : (0, call_api_1.callApi)('/api/split-video-from-audio', request);
+};
+exports.splitVideoFromAudio = splitVideoFromAudio;

package/dist/error-overlay/remotion-overlay/Overlay.js

@@ -43,7 +43,7 @@ const Overlay = () => {
     if (errors.errors.length === 0) {
         return null;
     }
-    return (jsx_runtime_1.jsx(client_id_1.PreviewServerConnection, { children: jsx_runtime_1.jsx(SettingsContext_1.SettingsProvider, { children: jsx_runtime_1.jsx(keybindings_1.KeybindingContextProvider, { children: jsx_runtime_1.jsx(remotion_1.AbsoluteFill, { style: {
+    return (jsx_runtime_1.jsx(client_id_1.PreviewServerConnection, { children: jsx_runtime_1.jsx(SettingsContext_1.SettingsProvider, { children: jsx_runtime_1.jsx(keybindings_1.KeybindingContextProvider, { children: jsx_runtime_1.jsx(remotion_1.Internals.AbsoluteFillElement, { style: {
                         backgroundColor: BACKGROUND_COLOR,
                         overflow: 'auto',
                         color: colors_1.WHITE,