@remotion/studio 4.0.518 → 4.0.519

package/dist/components/UpdateStatusContext.js

@@ -0,0 +1,74 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useUpdateStatus = exports.UpdateStatusProvider = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const remotion_1 = require("remotion");
+const browser_studio_operations_1 = require("../helpers/browser-studio-operations");
+const can_show_updates_1 = require("../helpers/can-show-updates");
+const client_id_1 = require("../helpers/client-id");
+const actions_1 = require("./RenderQueue/actions");
+const UpdateStatusContext = (0, react_1.createContext)(null);
+const UpdateStatusProvider = ({ children }) => {
+    const { previewServerState } = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx);
+    const [info, setInfo] = (0, react_1.useState)(null);
+    const [knownBugs, setKnownBugs] = (0, react_1.useState)(null);
+    const [error, setError] = (0, react_1.useState)(null);
+    const showUpdates = (0, can_show_updates_1.canShowUpdates)({
+        connectionStatus: previewServerState.type,
+        isBrowserStudio: (0, browser_studio_operations_1.getBrowserStudioOperations)() !== null,
+        readOnlyStudio: window.remotion_isReadOnlyStudio,
+    });
+    (0, react_1.useEffect)(() => {
+        if (!showUpdates) {
+            setInfo(null);
+            setKnownBugs(null);
+            setError(null);
+            return;
+        }
+        const updateController = new AbortController();
+        const bugsController = new AbortController();
+        (0, actions_1.updateAvailable)(updateController.signal)
+            .then((response) => {
+            setInfo(response);
+            setError(null);
+        })
+            .catch((err) => {
+            if (updateController.signal.aborted) {
+                return;
+            }
+            setError(err.message);
+        });
+        fetch('https://bugs.remotion.dev/api/' + remotion_1.VERSION, {
+            signal: bugsController.signal,
+        })
+            .then(async (response) => {
+            const body = await response.json();
+            setKnownBugs(body.bugs);
+        })
+            .catch((err) => {
+            if (bugsController.signal.aborted) {
+                return;
+            }
+            // eslint-disable-next-line no-console
+            console.log('Could not check for bugs in this version', err);
+        });
+        return () => {
+            updateController.abort();
+            bugsController.abort();
+        };
+    }, [showUpdates]);
+    const value = (0, react_1.useMemo)(() => {
+        return { error, info, knownBugs };
+    }, [error, info, knownBugs]);
+    return (jsx_runtime_1.jsx(UpdateStatusContext.Provider, { value: value, children: children }));
+};
+exports.UpdateStatusProvider = UpdateStatusProvider;
+const useUpdateStatus = () => {
+    const context = (0, react_1.useContext)(UpdateStatusContext);
+    if (context === null) {
+        throw new Error('useUpdateStatus must be used inside UpdateStatusProvider');
+    }
+    return context;
+};
+exports.useUpdateStatus = useUpdateStatus;

package/dist/components/UpdatesSettings.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const UpdatesSettings: React.FC;

package/dist/components/UpdatesSettings.js

@@ -0,0 +1,251 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.UpdatesSettings = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const colors_1 = require("../helpers/colors");
+const copy_text_1 = require("../helpers/copy-text");
+const clipboard_1 = require("../icons/clipboard");
+const InlineAction_1 = require("./InlineAction");
+const KnownBugs_1 = require("./KnownBugs");
+const ValidationMessage_1 = require("./NewComposition/ValidationMessage");
+const NotificationCenter_1 = require("./Notifications/NotificationCenter");
+const actions_1 = require("./RenderQueue/actions");
+const SettingsContext_1 = require("./SettingsContext");
+const UpdateStatusContext_1 = require("./UpdateStatusContext");
+const container = {
+    alignSelf: 'flex-start',
+    boxSizing: 'border-box',
+    flex: 1,
+    minWidth: 0,
+    padding: '4px 16px 0',
+};
+const text = {
+    color: colors_1.LIGHT_TEXT,
+    fontFamily: 'sans-serif',
+    fontSize: 14,
+    lineHeight: 1.5,
+};
+const title = {
+    paddingTop: 12,
+    paddingBottom: 8,
+    ...text,
+};
+const titleBeforeCommand = {
+    ...title,
+    paddingBottom: 0,
+};
+const commandField = {
+    alignItems: 'center',
+    background: colors_1.SELECTED_BACKGROUND,
+    borderRadius: 6,
+    boxSizing: 'border-box',
+    display: 'flex',
+    marginBottom: 10,
+    marginTop: 10,
+    padding: '8px 8px 8px 10px',
+    width: '100%',
+};
+const code = {
+    color: colors_1.WHITE,
+    flex: 1,
+    fontFamily: 'monospace',
+    fontSize: 14,
+    lineHeight: 1.5,
+    margin: 0,
+    minWidth: 0,
+    overflowX: 'auto',
+    whiteSpace: 'pre',
+};
+const copyIcon = {
+    flexShrink: 0,
+    height: 12,
+    width: 12,
+};
+const link = {
+    ...text,
+    fontWeight: 'bold',
+    color: colors_1.BLUE,
+    textDecoration: 'none',
+};
+const releaseNotesFrame = {
+    backgroundColor: colors_1.BACKGROUND,
+    border: 0,
+    display: 'block',
+    marginTop: 8,
+    overflow: 'hidden',
+    width: '100%',
+};
+const releaseNotesTitle = {
+    ...title,
+    borderBottom: colors_1.BORDER_WHITE_ALPHA_12,
+    width: '100%',
+};
+const commands = {
+    npm: 'npx remotion upgrade',
+    yarn: 'yarn remotion upgrade',
+    pnpm: 'pnpm exec remotion upgrade',
+    bun: 'bun remotion upgrade',
+    unknown: 'npx remotion upgrade',
+};
+const skillsUpdateCommand = 'npx remotion skills update';
+const remotionUpgradeSkill = '/remotion-upgrade';
+const formatReleaseDate = (publishedAt) => {
+    if (publishedAt === null) {
+        return null;
+    }
+    const date = new Date(publishedAt);
+    if (Number.isNaN(date.getTime())) {
+        return null;
+    }
+    const day = date.getDate();
+    const lastTwoDigits = day % 100;
+    const suffix = lastTwoDigits >= 11 && lastTwoDigits <= 13
+        ? 'th'
+        : day % 10 === 1
+            ? 'st'
+            : day % 10 === 2
+                ? 'nd'
+                : day % 10 === 3
+                    ? 'rd'
+                    : 'th';
+    const month = new Intl.DateTimeFormat('en-US', {
+        month: 'long',
+    }).format(date);
+    return `${month} ${day}${suffix}, ${date.getFullYear()}`;
+};
+const RenderedReleaseNotes = ({ release }) => {
+    const [height, setHeight] = (0, react_1.useState)(220);
+    const frameRef = (0, react_1.useRef)(null);
+    const resizeObserver = (0, react_1.useRef)(null);
+    const formattedReleaseDate = formatReleaseDate(release.publishedAt);
+    const document = (0, react_1.useMemo)(() => {
+        if (release.releaseNotesHtml === null) {
+            return null;
+        }
+        return `<!doctype html><html><head><base href="https://github.com/remotion-dev/remotion/" target="_blank"><style>
+			:root { color-scheme: dark; }
+			html, body { overflow: hidden; }
+			body { background: ${colors_1.BACKGROUND}; color: ${colors_1.LIGHT_TEXT}; font-family: sans-serif; font-size: 13px; line-height: 1.5; margin: 0; overflow-wrap: anywhere; }
+			h1, h2, h3, h4, h5, h6 { color: ${colors_1.WHITE}; line-height: 1.25; margin: 16px 0 8px; }
+			h1:first-child, h2:first-child, h3:first-child { margin-top: 0; }
+			h1 { font-size: 18px; } h2 { font-size: 16px; } h3, h4, h5, h6 { font-size: 14px; }
+			p, ul, ol, pre, blockquote { margin: 8px 0; }
+			ul, ol { padding-left: 22px; }
+			a { color: ${colors_1.BLUE}; text-decoration: none; }
+			code { background: transparent; color: ${colors_1.LIGHT_TEXT}; font-family: monospace; padding: 0; }
+			pre { background: ${colors_1.SELECTED_BACKGROUND}; border-radius: 6px; overflow-x: auto; padding: 10px; }
+			pre code { background: transparent; padding: 0; }
+			img { max-width: 100%; }
+			blockquote { border-left: 3px solid ${colors_1.SELECTED_BACKGROUND}; margin-left: 0; padding-left: 10px; }
+			hr { border: 0; border-top: 1px solid ${colors_1.SELECTED_BACKGROUND}; }
+		</style></head><body>${release.releaseNotesHtml}</body></html>`;
+    }, [release.releaseNotesHtml]);
+    (0, react_1.useEffect)(() => {
+        return () => {
+            var _a;
+            return (_a = resizeObserver.current) === null || _a === void 0 ? void 0 : _a.disconnect();
+        };
+    }, []);
+    const onLoad = (0, react_1.useCallback)(() => {
+        var _a, _b;
+        (_a = resizeObserver.current) === null || _a === void 0 ? void 0 : _a.disconnect();
+        const iframeDocument = (_b = frameRef.current) === null || _b === void 0 ? void 0 : _b.contentDocument;
+        if (!(iframeDocument === null || iframeDocument === void 0 ? void 0 : iframeDocument.body)) {
+            return;
+        }
+        const updateHeight = () => {
+            setHeight(iframeDocument.documentElement.scrollHeight + 2);
+        };
+        updateHeight();
+        const observer = new ResizeObserver(updateHeight);
+        observer.observe(iframeDocument.body);
+        resizeObserver.current = observer;
+    }, []);
+    return (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
+            jsx_runtime_1.jsxs("div", { style: releaseNotesTitle, children: [release.version, formattedReleaseDate === null
+                        ? null
+                        : ` \u2013\u00a0${formattedReleaseDate}`] }), document === null ? (jsx_runtime_1.jsxs("div", { style: text, children: ["Release notes could not be loaded.", ' ', jsx_runtime_1.jsx("a", { style: link, target: "_blank", href: `https://github.com/remotion-dev/remotion/releases/tag/v${release.version}`, children: "View them on GitHub" }),
+                    "."] })) : (jsx_runtime_1.jsx("iframe", { ref: frameRef, onLoad: onLoad, sandbox: "allow-popups allow-popups-to-escape-sandbox allow-same-origin", scrolling: "no", srcDoc: document, style: { ...releaseNotesFrame, height }, title: `Release notes for Remotion ${release.version}` }))] }));
+};
+const UpdatesSettings = () => {
+    const { remotionSkillsInfo } = (0, SettingsContext_1.useSettings)();
+    const { error, info, knownBugs } = (0, UpdateStatusContext_1.useUpdateStatus)();
+    const [releaseNotes, setReleaseNotes] = (0, react_1.useState)(null);
+    (0, react_1.useEffect)(() => {
+        if (!(info === null || info === void 0 ? void 0 : info.updateAvailable)) {
+            return;
+        }
+        const controller = new AbortController();
+        (0, actions_1.getReleaseNotes)(info.currentVersion, info.latestVersion, controller.signal)
+            .then((response) => {
+            setReleaseNotes({
+                ...response,
+                currentVersion: info.currentVersion,
+                latestVersion: info.latestVersion,
+            });
+        })
+            .catch(() => {
+            if (!controller.signal.aborted) {
+                setReleaseNotes({
+                    currentVersion: info.currentVersion,
+                    hasMore: false,
+                    latestVersion: info.latestVersion,
+                    releases: [],
+                });
+            }
+        });
+        return () => controller.abort();
+    }, [info]);
+    const hasKnownBugs = (0, react_1.useMemo)(() => {
+        var _a;
+        return ((_a = knownBugs === null || knownBugs === void 0 ? void 0 : knownBugs.length) !== null && _a !== void 0 ? _a : 0) > 0;
+    }, [knownBugs]);
+    const updateAction = info
+        ? (remotionSkillsInfo === null || remotionSkillsInfo === void 0 ? void 0 : remotionSkillsInfo.remotionUpgradeSkillAvailable)
+            ? remotionUpgradeSkill
+            : info.updateAvailable
+                ? commands[info.packageManager]
+                : skillsUpdateCommand
+        : null;
+    const updateActionType = (remotionSkillsInfo === null || remotionSkillsInfo === void 0 ? void 0 : remotionSkillsInfo.remotionUpgradeSkillAvailable)
+        ? 'skill'
+        : 'command';
+    const onClick = (0, react_1.useCallback)(() => {
+        if (updateAction === null) {
+            return;
+        }
+        (0, copy_text_1.copyText)(updateAction).catch((err) => {
+            (0, NotificationCenter_1.showNotification)('Could not copy: ' + err.message, 2000);
+        });
+    }, [updateAction]);
+    const renderCopyAction = (0, react_1.useCallback)((color) => {
+        return jsx_runtime_1.jsx(clipboard_1.ClipboardIcon, { color: color, style: copyIcon });
+    }, []);
+    if (info === null) {
+        return (jsx_runtime_1.jsx("div", { style: container, children: error ? (jsx_runtime_1.jsx("div", { style: { paddingTop: 12 }, children: jsx_runtime_1.jsx(ValidationMessage_1.ValidationMessage, { message: 'Could not check for updates: ' + error, align: "flex-start", type: "error" }) })) : (jsx_runtime_1.jsx("div", { style: title, children: "Checking for updates..." })) }));
+    }
+    if (info.timedOut && !info.skillsUpdateAvailable) {
+        return (jsx_runtime_1.jsxs("div", { style: container, children: [
+                jsx_runtime_1.jsx("div", { style: title, children: "Could not check for updates." }), jsx_runtime_1.jsx("div", { style: text, children: "The update check timed out. Try again later." })
+            ] }));
+    }
+    if (!info.updateAvailable && !info.skillsUpdateAvailable) {
+        return (jsx_runtime_1.jsxs("div", { style: container, children: [
+                jsx_runtime_1.jsxs("div", { style: title, children: ["You", "'re", " up to date."] }), jsx_runtime_1.jsxs("div", { style: text, children: ["Remotion ", info.currentVersion, " and your Remotion Agent Skills are up to date."] })
+            ] }));
+    }
+    return (jsx_runtime_1.jsxs("div", { style: container, children: [hasKnownBugs && info.updateAvailable ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
+                    jsx_runtime_1.jsxs("div", { style: title, children: ["The currently installed version ", info.currentVersion, " has the following known bugs:"] }), jsx_runtime_1.jsx(KnownBugs_1.KnownBugs, { bugs: knownBugs !== null && knownBugs !== void 0 ? knownBugs : [] }), jsx_runtime_1.jsx("div", { style: { height: '20px' } }), jsx_runtime_1.jsxs("div", { style: text, children: ["To update, run the following ", updateActionType, ":"] })
+                ] })) : info.updateAvailable ? (jsx_runtime_1.jsxs("div", { style: titleBeforeCommand, children: ["A new Remotion update is available. Run the following", ' ', updateActionType, ":"] })) : (jsx_runtime_1.jsxs("div", { style: titleBeforeCommand, children: ["Your Remotion Agent Skills are out of date. Run the following", ' ', updateActionType, ":"] })), jsx_runtime_1.jsxs("div", { style: commandField, children: [
+                    jsx_runtime_1.jsx("pre", { style: code, children: updateAction }), jsx_runtime_1.jsx(InlineAction_1.InlineAction, { variant: null, onClick: onClick, renderAction: renderCopyAction, title: "Copy command" })
+                ] }), info.updateAvailable ? (jsx_runtime_1.jsxs("div", { style: text, children: ["This will update Remotion from ", info.currentVersion, " to", ' ', info.latestVersion, info.skillsUpdateAvailable
+                        ? ' and update your project Remotion Agent Skills.'
+                        : '.'] })) : null, info.updateAvailable ? ((releaseNotes === null || releaseNotes === void 0 ? void 0 : releaseNotes.currentVersion) === info.currentVersion &&
+                releaseNotes.latestVersion === info.latestVersion ? (releaseNotes.releases.length === 0 ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
+                    jsx_runtime_1.jsx("div", { style: releaseNotesTitle, children: info.latestVersion }), jsx_runtime_1.jsxs("div", { style: text, children: ["Release notes could not be loaded.", ' ', jsx_runtime_1.jsx("a", { style: link, target: "_blank", href: "https://github.com/remotion-dev/remotion/releases", children: "View them on GitHub" }),
+                            "."] })
+                ] })) : (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [releaseNotes.releases.map((release) => (jsx_runtime_1.jsx(RenderedReleaseNotes, { release: release }, release.version))), releaseNotes.hasMore ? (jsx_runtime_1.jsxs("div", { style: { ...text, paddingTop: 12 }, children: ["Showing the 5 most recent releases.", ' ', jsx_runtime_1.jsx("a", { style: link, target: "_blank", href: "https://github.com/remotion-dev/remotion/releases", children: "View all releases on GitHub" }),
+                            "."] })) : null] }))) : (jsx_runtime_1.jsx("div", { style: text, children: "Loading release notes..." }))) : null] }));
+};
+exports.UpdatesSettings = UpdatesSettings;

package/dist/components/WebMcp.js

@@ -1,7 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.WebMcp = void 0;
-const canvas_1 = require("@remotion/canvas");
 const react_1 = require("react");
 const remotion_1 = require("remotion");
 const pause_1 = require("../api/pause");
@@ -17,6 +16,7 @@ const mute_1 = require("../state/mute");
 const playbackrate_1 = require("../state/playbackrate");
 const timeline_zoom_1 = require("../state/timeline-zoom");
 const InitialCompositionLoader_1 = require("./InitialCompositionLoader");
+const selected_outline_measurement_1 = require("./selected-outline-measurement");
 const find_track_for_node_path_info_1 = require("./Timeline/find-track-for-node-path-info");
 const imperative_state_1 = require("./Timeline/imperative-state");
 const parse_keyframe_field_from_node_path_1 = require("./Timeline/parse-keyframe-field-from-node-path");
@@ -397,7 +397,7 @@ const WebMcp = () => {
                         };
                     }
                     const currentFrame = (0, imperative_state_1.getCurrentFrame)();
-                    const selectableOutlines = (0, canvas_1.getCanvasSelectableOutlines)({
+                    const selectableOutlines = (0, selected_outline_measurement_1.getSequencesWithSelectableOutlines)({
                         sequences: sequencesRef.current,
                         overrideIdsToNodePaths: overrideIdToNodePathMappingsRef.current,
                         compositions: compositionsRef.current,
@@ -416,7 +416,7 @@ const WebMcp = () => {
                         scaleY === 0) {
                         throw new Error('The Studio canvas is not ready to be measured.');
                     }
-                    const measuredOutlines = (0, canvas_1.measureCanvasOutlines)(portalNode, selectableOutlines.map((outline) => {
+                    const measuredOutlines = (0, selected_outline_measurement_1.measureOutlineTargets)(portalNode, selectableOutlines.map((outline) => {
                         if (outline.sequence.refForOutline === null) {
                             throw new Error('Expected an outline ref.');
                         }

package/dist/components/get-open-in-menu-items.d.ts

@@ -2,6 +2,10 @@ import type { TerminalId } from '@remotion/studio-shared';
 import type { EditorPickerId, GetDefaultCodingAgentInfoResponse, GetDefaultEditorInfoResponse } from '@remotion/studio-shared';
 import type { OriginalPosition } from '../error-overlay/react-overlay/utils/get-source-map';
 import type { ComboboxValue } from './NewComposition/ComboBox';
+export declare const getConfigureDefaultAppsMenuItems: ({ hasPreviousItems, onConfigureApps, }: {
+    readonly hasPreviousItems: boolean;
+    readonly onConfigureApps: (() => void) | null;
+}) => ComboboxValue[];
 export declare const getOpenInMenuItems: ({ codingAgentInfo, editorDisabled, editorInfo, excludeCodingAgentId, excludeEditorId, fileManagerDisabled, folder, location, onConfigureApps, onOpenInCodingAgent, onOpenInEditor, onOpenInFileExplorer, onOpenInGitClient, onOpenInTerminal, }: {
     readonly codingAgentInfo: GetDefaultCodingAgentInfoResponse | null;
     readonly editorDisabled: boolean;

package/dist/components/get-open-in-menu-items.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.getOpenInMenuItems = void 0;
+exports.getOpenInMenuItems = exports.getConfigureDefaultAppsMenuItems = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const no_react_1 = require("remotion/no-react");
 const get_file_manager_name_1 = require("../helpers/get-file-manager-name");
@@ -17,6 +17,28 @@ const menuLabel = {
     fontSize: 13,
     lineHeight: '16px',
 };
+const getConfigureDefaultAppsMenuItems = ({ hasPreviousItems, onConfigureApps, }) => {
+    if (!onConfigureApps) {
+        return [];
+    }
+    return [
+        ...(hasPreviousItems
+            ? [{ type: 'divider', id: 'open-in-settings-divider' }]
+            : []),
+        {
+            id: 'change-default-apps',
+            keyHint: null,
+            label: jsx_runtime_1.jsx("span", { style: menuLabel, children: "Configure default apps..." }),
+            leftItem: null,
+            onClick: onConfigureApps,
+            quickSwitcherLabel: null,
+            subMenu: null,
+            type: 'item',
+            value: 'change-default-apps',
+        },
+    ];
+};
+exports.getConfigureDefaultAppsMenuItems = getConfigureDefaultAppsMenuItems;
 const getOpenInMenuItems = ({ codingAgentInfo, editorDisabled, editorInfo, excludeCodingAgentId, excludeEditorId, fileManagerDisabled, folder, location, onConfigureApps, onOpenInCodingAgent, onOpenInEditor, onOpenInFileExplorer, onOpenInGitClient, onOpenInTerminal, }) => {
     var _a, _b, _c, _d;
     const showFinder = window.remotion_fileSystemPlatform === 'darwin';
@@ -61,13 +83,7 @@ const getOpenInMenuItems = ({ codingAgentInfo, editorDisabled, editorInfo, exclu
             label: jsx_runtime_1.jsx("span", { style: menuLabel, children: "GitHub.com" }),
             leftItem: jsx_runtime_1.jsx(github_1.GitHubIcon, { size: 18 }),
             onClick: () => {
-                const gitSource = window.remotion_gitSource;
-                if (!gitSource) {
-                    return;
-                }
-                window.open(folder || !location
-                    ? (0, get_git_menu_item_1.getGitSourceBranchUrl)(gitSource)
-                    : (0, get_git_menu_item_1.getGitRefUrl)(gitSource, location, window.remotion_cwd), '_blank');
+                (0, get_git_menu_item_1.openGitSource)({ folder, location });
             },
             quickSwitcherLabel: null,
             subMenu: null,
@@ -174,22 +190,10 @@ const getOpenInMenuItems = ({ codingAgentInfo, editorDisabled, editorInfo, exclu
                 ...systemApps,
             ]
             : []),
-        ...(onConfigureApps && (hasCategorizedApps || systemApps.length > 0)
-            ? [{ type: 'divider', id: 'open-in-settings-divider' }]
-            : []),
-        onConfigureApps
-            ? {
-                id: 'change-default-apps',
-                keyHint: null,
-                label: jsx_runtime_1.jsx("span", { style: menuLabel, children: "Change default apps..." }),
-                leftItem: null,
-                onClick: onConfigureApps,
-                quickSwitcherLabel: null,
-                subMenu: null,
-                type: 'item',
-                value: 'change-default-apps',
-            }
-            : null,
+        ...(0, exports.getConfigureDefaultAppsMenuItems)({
+            hasPreviousItems: hasCategorizedApps || systemApps.length > 0,
+            onConfigureApps,
+        }),
     ].filter(no_react_1.NoReactInternals.truthy);
 };
 exports.getOpenInMenuItems = getOpenInMenuItems;

package/dist/components/root-composition-menu-items.d.ts

@@ -1,8 +1,11 @@
 import type { SetStateAction } from 'react';
+import type { CompositionSortOrder } from '../state/folders';
 import type { ModalState } from '../state/modals';
 import type { ComboboxValue } from './NewComposition/ComboBox';
-export declare const getRootCompositionMenuItems: ({ connectionStatus, readOnlyStudio, setSelectedModal, }: {
+export declare const getRootCompositionMenuItems: ({ connectionStatus, readOnlyStudio, setSelectedModal, compositionSortOrder, setCompositionSortOrder, }: {
     connectionStatus: "connected" | "disconnected" | "init";
     readOnlyStudio: boolean;
     setSelectedModal: (value: SetStateAction<ModalState | null>) => void;
+    compositionSortOrder: CompositionSortOrder;
+    setCompositionSortOrder: (sortOrder: CompositionSortOrder) => void;
 }) => ComboboxValue[];

package/dist/components/root-composition-menu-items.js

@@ -1,7 +1,9 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.getRootCompositionMenuItems = void 0;
-const getRootCompositionMenuItems = ({ connectionStatus, readOnlyStudio, setSelectedModal, }) => {
+const jsx_runtime_1 = require("react/jsx-runtime");
+const Checkmark_1 = require("../icons/Checkmark");
+const getRootCompositionMenuItems = ({ connectionStatus, readOnlyStudio, setSelectedModal, compositionSortOrder, setCompositionSortOrder, }) => {
     return [
         {
             id: 'new-root-composition',
@@ -41,6 +43,41 @@ const getRootCompositionMenuItems = ({ connectionStatus, readOnlyStudio, setSele
             value: 'new-root-folder',
             disabled: readOnlyStudio || connectionStatus !== 'connected',
         },
+        {
+            id: 'sort-compositions-divider',
+            type: 'divider',
+        },
+        {
+            id: 'sort-compositions-header',
+            label: 'Sort',
+            type: 'section-header',
+        },
+        {
+            id: 'sort-compositions-registration',
+            keyHint: null,
+            label: 'As registered',
+            leftItem: compositionSortOrder === 'registration' ? jsx_runtime_1.jsx(Checkmark_1.Checkmark, {}) : null,
+            onClick: () => {
+                setCompositionSortOrder('registration');
+            },
+            quickSwitcherLabel: 'Sort compositions as registered',
+            subMenu: null,
+            type: 'item',
+            value: 'registration',
+        },
+        {
+            id: 'sort-compositions-alphabetical',
+            keyHint: null,
+            label: 'Alphabetically',
+            leftItem: compositionSortOrder === 'alphabetical' ? jsx_runtime_1.jsx(Checkmark_1.Checkmark, {}) : null,
+            onClick: () => {
+                setCompositionSortOrder('alphabetical');
+            },
+            quickSwitcherLabel: 'Sort compositions alphabetically',
+            subMenu: null,
+            type: 'item',
+            value: 'alphabetical',
+        },
     ];
 };
 exports.getRootCompositionMenuItems = getRootCompositionMenuItems;

package/dist/components/selected-outline-geometry.d.ts

@@ -1,2 +1,21 @@
-export { clampCanvasOutlineValue as clamp, mixCanvasOutlinePoints as mixPoint, mixCanvasOutlineValues as mix, } from '@remotion/canvas';
-export type { CanvasOutline as SelectedOutline, CanvasOutlinePoint as OutlinePoint, } from '@remotion/canvas';
+export type OutlinePoint = {
+    readonly x: number;
+    readonly y: number;
+};
+export type SelectedOutline = {
+    readonly key: string;
+    readonly dimensions: {
+        readonly width: number;
+        readonly height: number;
+    } | null;
+    readonly uncroppedPoints: readonly [OutlinePoint, OutlinePoint, OutlinePoint, OutlinePoint] | null;
+    readonly points: readonly [
+        OutlinePoint,
+        OutlinePoint,
+        OutlinePoint,
+        OutlinePoint
+    ];
+};
+export declare const clamp: (value: number, min: number, max: number) => number;
+export declare const mix: (from: number, to: number, progress: number) => number;
+export declare const mixPoint: (from: OutlinePoint, to: OutlinePoint, progress: number) => OutlinePoint;

package/dist/components/selected-outline-geometry.js

@@ -1,7 +1,18 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.mix = exports.mixPoint = exports.clamp = void 0;
-const canvas_1 = require("@remotion/canvas");
-Object.defineProperty(exports, "clamp", { enumerable: true, get: function () { return canvas_1.clampCanvasOutlineValue; } });
-Object.defineProperty(exports, "mixPoint", { enumerable: true, get: function () { return canvas_1.mixCanvasOutlinePoints; } });
-Object.defineProperty(exports, "mix", { enumerable: true, get: function () { return canvas_1.mixCanvasOutlineValues; } });
+exports.mixPoint = exports.mix = exports.clamp = void 0;
+const clamp = (value, min, max) => {
+    return Math.min(max, Math.max(min, value));
+};
+exports.clamp = clamp;
+const mix = (from, to, progress) => {
+    return from + (to - from) * progress;
+};
+exports.mix = mix;
+const mixPoint = (from, to, progress) => {
+    return {
+        x: (0, exports.mix)(from.x, to.x, progress),
+        y: (0, exports.mix)(from.y, to.y, progress),
+    };
+};
+exports.mixPoint = mixPoint;

package/dist/components/selected-outline-measurement.d.ts

@@ -1,4 +1,6 @@
-import type { OutlinePoint } from './selected-outline-geometry';
+import type { OverrideIdToNodePaths, TSequence } from 'remotion';
+import type { OutlinePoint, SelectedOutline } from './selected-outline-geometry';
+import type { SelectedOutlineLayoutTarget, SequenceWithSelectedOutline } from './selected-outline-types';
 export declare const pointToString: (point: OutlinePoint) => string;
 export declare const midpoint: (from: OutlinePoint, to: OutlinePoint) => OutlinePoint;
 export declare const getOutlineCenter: (points: readonly [OutlinePoint, OutlinePoint, OutlinePoint, OutlinePoint]) => OutlinePoint;
@@ -26,6 +28,24 @@ export declare const getSelectedOutlineRotationPivot: ({ dimensions, points, tra
     readonly points: readonly [OutlinePoint, OutlinePoint, OutlinePoint, OutlinePoint];
     readonly transformOriginValue: string;
 }) => OutlinePoint;
+type SvgViewport = {
+    readonly x: number;
+    readonly y: number;
+    readonly width: number;
+    readonly height: number;
+};
+type SvgScreenCtm = Pick<DOMMatrixReadOnly, 'a' | 'b' | 'c' | 'd' | 'e' | 'f'>;
+export declare const getTransformedSvgViewportPoints: ({ viewport, ctm, containerRect, }: {
+    readonly viewport: SvgViewport;
+    readonly ctm: SvgScreenCtm;
+    readonly containerRect: Pick<DOMRect, "left" | "top">;
+}) => readonly [OutlinePoint, OutlinePoint, OutlinePoint, OutlinePoint];
+export declare const cropOutlinePoints: (points: readonly [OutlinePoint, OutlinePoint, OutlinePoint, OutlinePoint], crop: {
+    readonly left: number;
+    readonly right: number;
+    readonly top: number;
+    readonly bottom: number;
+}) => readonly [OutlinePoint, OutlinePoint, OutlinePoint, OutlinePoint];
 export declare const getSelectedSequenceKeys: (selectedItems: readonly import("@remotion/canvas").CanvasSelectionItem[]) => Set<string>;
 export declare const getSequenceKeysContainingSelection: (selectedItems: readonly import("@remotion/canvas").CanvasSelectionItem[]) => Set<string>;
 export declare const getOutlineSelectionInteraction: ({ shiftKey, metaKey, ctrlKey, }: {
@@ -53,4 +73,23 @@ export type SelectedCropInfo = {
 export declare const getSelectedCropInfo: (selectedItems: readonly import("@remotion/canvas").CanvasSelectionItem[]) => SelectedCropInfo | null;
 export declare const getSelectedTransformOriginInfo: (selectedItems: readonly import("@remotion/canvas").CanvasSelectionItem[]) => SelectedTransformOriginInfo | null;
 export declare const getSelectedRotationInfo: (selectedItems: readonly import("@remotion/canvas").CanvasSelectionItem[]) => SelectedRotationInfo | null;
+export declare const getSequencesWithSelectableOutlines: ({ sequences, overrideIdsToNodePaths, compositions, timelinePosition, }: {
+    readonly sequences: readonly TSequence[];
+    readonly overrideIdsToNodePaths: OverrideIdToNodePaths;
+    readonly compositions?: readonly import("remotion").AnyComposition[] | undefined;
+    readonly timelinePosition: number;
+}) => SequenceWithSelectedOutline[];
+export declare const measureOutlines: (container: SVGSVGElement, targets: readonly SelectedOutlineLayoutTarget[], hoveredTimelineNodePathKey: string | null) => SelectedOutline[];
+export declare const measureOutlineTargets: (container: Element, targets: readonly {
+    readonly crop: {
+        readonly left: number;
+        readonly right: number;
+        readonly top: number;
+        readonly bottom: number;
+    };
+    readonly includeOutsideContainer: boolean;
+    readonly key: string;
+    readonly ref: import("react").RefObject<Element | null>;
+}[]) => SelectedOutline[];
+export declare const outlinesAreEqual: (a: readonly SelectedOutline[], b: readonly SelectedOutline[]) => boolean;
 export {};