@remotion/studio 4.0.468 → 4.0.470

package/dist/helpers/get-box-quads-ponyfill.d.ts

@@ -0,0 +1,10 @@
+export type GetBoxQuadsBox = 'margin' | 'border' | 'padding' | 'content';
+export type GetBoxQuadsPonyfillOptions = {
+    readonly box?: GetBoxQuadsBox;
+    readonly relativeTo?: Element;
+};
+/**
+ * Returns border/margin/padding/content box quads for an element.
+ * Uses the native API when available, otherwise the getBoxQuads ponyfill.
+ */
+export declare const getBoxQuadsPonyfill: (element: Element, options?: GetBoxQuadsPonyfillOptions | undefined) => readonly DOMQuad[] | null;

package/dist/helpers/get-box-quads-ponyfill.js

@@ -0,0 +1,23 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getBoxQuadsPonyfill = void 0;
+const get_box_quads_polyfill_internals_js_1 = require("./get-box-quads-polyfill-internals.js");
+const hasNativeGetBoxQuads = (element) => {
+    return (typeof element.getBoxQuads === 'function');
+};
+/**
+ * Returns border/margin/padding/content box quads for an element.
+ * Uses the native API when available, otherwise the getBoxQuads ponyfill.
+ */
+const getBoxQuadsPonyfill = (element, options) => {
+    try {
+        if (hasNativeGetBoxQuads(element)) {
+            return element.getBoxQuads(options);
+        }
+        return (0, get_box_quads_polyfill_internals_js_1.getBoxQuads)(element, options);
+    }
+    catch (_a) {
+        return null;
+    }
+};
+exports.getBoxQuadsPonyfill = getBoxQuadsPonyfill;

package/dist/helpers/open-in-editor.d.ts

@@ -1,6 +1,6 @@
 import type { SymbolicatedStackFrame } from '@remotion/studio-shared';
 import type { OriginalPosition } from '../error-overlay/react-overlay/utils/get-source-map';
-export declare const openInEditor: (stack: SymbolicatedStackFrame) => Promise<Response>;
+export declare const openInEditor: (stack: SymbolicatedStackFrame) => Promise<import("@remotion/studio-shared").OpenInEditorResponse>;
 export declare const openOriginalPositionInEditor: (originalPosition: OriginalPosition) => Promise<void>;
 export declare const preloadCompositionComponentInfo: ({ compositionFile, compositionId, }: {
     compositionFile: string;

package/dist/helpers/open-in-editor.js

@@ -1,22 +1,17 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.openCompositionComponentInEditor = exports.preloadCompositionComponentInfo = exports.openOriginalPositionInEditor = exports.openInEditor = void 0;
+const call_api_1 = require("../components/call-api");
 const openInEditor = (stack) => {
     const { originalFileName, originalLineNumber, originalColumnNumber, originalFunctionName, originalScriptCode, } = stack;
-    return fetch(`/api/open-in-editor`, {
-        method: 'post',
-        headers: {
-            'content-type': 'application/json',
+    return (0, call_api_1.callApi)('/api/open-in-editor', {
+        stack: {
+            originalFileName,
+            originalLineNumber,
+            originalColumnNumber,
+            originalFunctionName,
+            originalScriptCode,
         },
-        body: JSON.stringify({
-            stack: {
-                originalFileName,
-                originalLineNumber,
-                originalColumnNumber,
-                originalFunctionName,
-                originalScriptCode,
-            },
-        }),
     });
 };
 exports.openInEditor = openInEditor;
@@ -44,20 +39,10 @@ const loadCompositionComponentInfo = async ({ compositionFile, compositionId, })
         return existing;
     }
     const promise = (async () => {
-        const response = await fetch(`/api/composition-component-info`, {
-            method: 'post',
-            headers: {
-                'content-type': 'application/json',
-            },
-            body: JSON.stringify({
-                compositionFile,
-                compositionId,
-            }),
+        const body = await (0, call_api_1.callApi)('/api/composition-component-info', {
+            compositionFile,
+            compositionId,
         });
-        const body = (await response.json());
-        if (!body.success) {
-            throw new Error(body.error);
-        }
         return {
             location: body.location,
             canAddSequence: body.canAddSequence,

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

@@ -52,10 +52,11 @@ export declare const getExpandedTrackHeight: ({ sequence, nodePathInfo, getIsExp
     getIsExpanded: GetIsExpanded;
     codeValues: CodeValues;
 }) => number;
-export declare const TIMELINE_LAYER_HEIGHT_VIDEO = 75;
-export declare const TIMELINE_LAYER_HEIGHT_IMAGE = 58;
-export declare const TIMELINE_LAYER_HEIGHT_AUDIO = 58;
-export declare const TIMELINE_LAYER_HEIGHT_DEFAULT = 25;
-export declare const TIMELINE_LIST_ITEM_ROW_HEIGHT = 25;
-export declare const TIMELINE_VIDEO_INFO_WAVEFORM_HEIGHT = 25;
-export declare const getTimelineLayerHeight: (type: "audio" | "image" | "other" | "sequence" | "video") => 25 | 58 | 75;
+export declare const TIMELINE_LAYER_FILMSTRIP_HEIGHT = 26;
+export declare const TIMELINE_VIDEO_INFO_WAVEFORM_HEIGHT = 17;
+export declare const TIMELINE_LAYER_HEIGHT_VIDEO: number;
+export declare const TIMELINE_LAYER_HEIGHT_IMAGE = 26;
+export declare const TIMELINE_LAYER_HEIGHT_AUDIO = 34;
+export declare const TIMELINE_LAYER_HEIGHT_DEFAULT = 21;
+export declare const TIMELINE_LIST_ITEM_ROW_HEIGHT = 21;
+export declare const getTimelineLayerHeight: (type: "audio" | "image" | "other" | "sequence" | "video") => number;

package/dist/helpers/timeline-layout.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.getTimelineLayerHeight = exports.TIMELINE_VIDEO_INFO_WAVEFORM_HEIGHT = exports.TIMELINE_LIST_ITEM_ROW_HEIGHT = exports.TIMELINE_LAYER_HEIGHT_DEFAULT = exports.TIMELINE_LAYER_HEIGHT_AUDIO = exports.TIMELINE_LAYER_HEIGHT_IMAGE = exports.TIMELINE_LAYER_HEIGHT_VIDEO = exports.getExpandedTrackHeight = exports.getTreeRowHeight = exports.flattenVisibleTreeNodes = exports.buildTimelineTree = exports.EXPANDED_SECTION_PADDING_RIGHT = exports.TREE_GROUP_ROW_HEIGHT = exports.TIMELINE_TRACK_EXPANDED_HEIGHT = exports.TIMELINE_ITEM_BORDER_BOTTOM = exports.TIMELINE_BORDER = exports.TIMELINE_PADDING = exports.SCHEMA_FIELD_ROW_HEIGHT = exports.getFieldsToShow = exports.getEffectFieldsToShow = void 0;
+exports.getTimelineLayerHeight = exports.TIMELINE_LIST_ITEM_ROW_HEIGHT = exports.TIMELINE_LAYER_HEIGHT_DEFAULT = exports.TIMELINE_LAYER_HEIGHT_AUDIO = exports.TIMELINE_LAYER_HEIGHT_IMAGE = exports.TIMELINE_LAYER_HEIGHT_VIDEO = exports.TIMELINE_VIDEO_INFO_WAVEFORM_HEIGHT = exports.TIMELINE_LAYER_FILMSTRIP_HEIGHT = exports.getExpandedTrackHeight = exports.getTreeRowHeight = exports.flattenVisibleTreeNodes = exports.buildTimelineTree = exports.EXPANDED_SECTION_PADDING_RIGHT = exports.TREE_GROUP_ROW_HEIGHT = exports.TIMELINE_TRACK_EXPANDED_HEIGHT = exports.TIMELINE_ITEM_BORDER_BOTTOM = exports.TIMELINE_BORDER = exports.TIMELINE_PADDING = exports.SCHEMA_FIELD_ROW_HEIGHT = exports.getFieldsToShow = exports.getEffectFieldsToShow = void 0;
 const studio_shared_1 = require("@remotion/studio-shared");
 const studio_shared_2 = require("@remotion/studio-shared");
 Object.defineProperty(exports, "getEffectFieldsToShow", { enumerable: true, get: function () { return studio_shared_2.getEffectFieldsToShow; } });
@@ -138,14 +138,15 @@ const getExpandedTrackHeight = ({ sequence, nodePathInfo, getIsExpanded, codeVal
     return totalRowsHeight + separators;
 };
 exports.getExpandedTrackHeight = getExpandedTrackHeight;
-exports.TIMELINE_LAYER_HEIGHT_VIDEO = 75;
-exports.TIMELINE_LAYER_HEIGHT_IMAGE = 58;
-exports.TIMELINE_LAYER_HEIGHT_AUDIO = 58;
-exports.TIMELINE_LAYER_HEIGHT_DEFAULT = 25;
-// The horizontal row inside a timeline list item (eye + arrow + label).
-exports.TIMELINE_LIST_ITEM_ROW_HEIGHT = 25;
+exports.TIMELINE_LAYER_FILMSTRIP_HEIGHT = 26;
 // The waveform stripe rendered underneath the filmstrip in TimelineVideoInfo.
-exports.TIMELINE_VIDEO_INFO_WAVEFORM_HEIGHT = 25;
+exports.TIMELINE_VIDEO_INFO_WAVEFORM_HEIGHT = 17;
+exports.TIMELINE_LAYER_HEIGHT_VIDEO = 2 + exports.TIMELINE_LAYER_FILMSTRIP_HEIGHT + exports.TIMELINE_VIDEO_INFO_WAVEFORM_HEIGHT;
+exports.TIMELINE_LAYER_HEIGHT_IMAGE = 26;
+exports.TIMELINE_LAYER_HEIGHT_AUDIO = 34;
+exports.TIMELINE_LAYER_HEIGHT_DEFAULT = 21;
+// The horizontal row inside a timeline list item (eye + arrow + label).
+exports.TIMELINE_LIST_ITEM_ROW_HEIGHT = 21;
 const getTimelineLayerHeight = (type) => {
     if (type === 'video') {
         return exports.TIMELINE_LAYER_HEIGHT_VIDEO;

package/dist/helpers/timeline-node-path-key.d.ts

@@ -0,0 +1,2 @@
+import type { SequenceNodePathInfo } from './get-timeline-sequence-sort-key';
+export declare const timelineNodePathInfoToKey: (info: SequenceNodePathInfo) => string;

package/dist/helpers/timeline-node-path-key.js

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.timelineNodePathInfoToKey = void 0;
+const studio_shared_1 = require("@remotion/studio-shared");
+const timelineNodePathInfoToKey = (info) => [
+    (0, studio_shared_1.stringifySequenceExpandedRowKey)(info.sequenceSubscriptionKey),
+    info.auxiliaryKeys.join('.'),
+    info.index,
+].join('.');
+exports.timelineNodePathInfoToKey = timelineNodePathInfoToKey;

package/dist/helpers/use-menu-structure.js

@@ -114,7 +114,6 @@ const getFileMenu = ({ readOnlyStudio, closeMenu, previewServerState, setSelecte
                         originalFunctionName: null,
                         originalScriptCode: null,
                     })
-                        .then((res) => res.json())
                         .then(({ success }) => {
                         if (!success) {
                             (0, NotificationCenter_1.showNotification)(`Could not open ${window.remotion_editorName}`, 2000);
@@ -664,20 +663,12 @@ const useMenuStructure = (closeMenu, readOnlyStudio) => {
                         type: 'item',
                         quickSwitcherLabel: 'Open spring() Editor',
                     },
-                ].filter(remotion_1.Internals.truthy),
-                quickSwitcherLabel: null,
-            },
-            readOnlyStudio || remotion_packageManager === 'unknown'
-                ? null
-                : {
-                    id: 'install',
-                    label: 'Packages',
-                    leaveLeftPadding: false,
-                    items: [
-                        {
+                    readOnlyStudio || remotion_packageManager === 'unknown'
+                        ? null
+                        : {
                             id: 'install-packages',
                             value: 'install-packages',
-                            label: 'Install...',
+                            label: 'Install package',
                             onClick: () => {
                                 closeMenu();
                                 setSelectedModal({
@@ -689,10 +680,11 @@ const useMenuStructure = (closeMenu, readOnlyStudio) => {
                             keyHint: null,
                             leftItem: null,
                             subMenu: null,
-                            quickSwitcherLabel: `Install packages`,
+                            quickSwitcherLabel: `Install package`,
                         },
-                    ],
-                },
+                ].filter(remotion_1.Internals.truthy),
+                quickSwitcherLabel: null,
+            },
             {
                 id: 'help',
                 label: 'Help',

package/dist/renderEntry.js

@@ -186,13 +186,13 @@ const renderContent = (Root) => {
                 defaultPixelFormat: bundleMode.compositionDefaultPixelFormat,
                 defaultProResProfile: bundleMode.compositionDefaultProResProfile,
                 defaultSampleRate: bundleMode.compositionDefaultSampleRate,
-            }, initialCompositions: [], children: jsx_runtime_1.jsx(remotion_1.Internals.RemotionRootContexts, { frameState: null, audioEnabled: window.remotion_audioEnabled, videoEnabled: window.remotion_videoEnabled, logLevel: (_a = window.remotion_logLevel) !== null && _a !== void 0 ? _a : 'info', numberOfAudioTags: 0, audioLatencyHint: (_b = window.remotion_audioLatencyHint) !== null && _b !== void 0 ? _b : 'playback', children: jsx_runtime_1.jsxs(remotion_1.Internals.RenderAssetManagerProvider, { collectAssets: null, children: [
+            }, initialCompositions: [], children: jsx_runtime_1.jsx(remotion_1.Internals.RemotionRootContexts, { frameState: null, audioEnabled: window.remotion_audioEnabled, videoEnabled: window.remotion_videoEnabled, logLevel: (_a = window.remotion_logLevel) !== null && _a !== void 0 ? _a : 'info', numberOfAudioTags: 0, audioLatencyHint: (_b = window.remotion_audioLatencyHint) !== null && _b !== void 0 ? _b : 'playback', previewSampleRate: window.remotion_previewSampleRate, children: jsx_runtime_1.jsxs(remotion_1.Internals.RenderAssetManagerProvider, { collectAssets: null, children: [
                         jsx_runtime_1.jsx(Root, {}), jsx_runtime_1.jsx(GetVideoComposition, { state: bundleMode })
                     ] }) }) }));
         renderToDOM(markup);
     }
     if (bundleMode.type === 'evaluation') {
-        const markup = (jsx_runtime_1.jsx(remotion_1.Internals.CompositionManagerProvider, { initialCanvasContent: null, onlyRenderComposition: null, currentCompositionMetadata: null, initialCompositions: [], children: jsx_runtime_1.jsx(remotion_1.Internals.RemotionRootContexts, { frameState: null, audioEnabled: window.remotion_audioEnabled, videoEnabled: window.remotion_videoEnabled, logLevel: (_c = window.remotion_logLevel) !== null && _c !== void 0 ? _c : 'info', numberOfAudioTags: 0, audioLatencyHint: (_d = window.remotion_audioLatencyHint) !== null && _d !== void 0 ? _d : 'playback', children: jsx_runtime_1.jsx(remotion_1.Internals.RenderAssetManagerProvider, { collectAssets: null, children: jsx_runtime_1.jsx(Root, {}) }) }) }));
+        const markup = (jsx_runtime_1.jsx(remotion_1.Internals.CompositionManagerProvider, { initialCanvasContent: null, onlyRenderComposition: null, currentCompositionMetadata: null, initialCompositions: [], children: jsx_runtime_1.jsx(remotion_1.Internals.RemotionRootContexts, { frameState: null, audioEnabled: window.remotion_audioEnabled, videoEnabled: window.remotion_videoEnabled, logLevel: (_c = window.remotion_logLevel) !== null && _c !== void 0 ? _c : 'info', numberOfAudioTags: 0, audioLatencyHint: (_d = window.remotion_audioLatencyHint) !== null && _d !== void 0 ? _d : 'playback', previewSampleRate: window.remotion_previewSampleRate, children: jsx_runtime_1.jsx(remotion_1.Internals.RenderAssetManagerProvider, { collectAssets: null, children: jsx_runtime_1.jsx(Root, {}) }) }) }));
         renderToDOM(markup);
     }
     if (bundleMode.type === 'index') {

package/package.json

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

package/dist/components/Timeline/TimelineFieldRow.js

@@ -1,113 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.TimelineFieldRow = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const remotion_1 = require("remotion");
-const client_id_1 = require("../../helpers/client-id");
-const timeline_layout_1 = require("../../helpers/timeline-layout");
-const save_sequence_prop_1 = require("./save-sequence-prop");
-const timeline_field_row_layout_1 = require("./timeline-field-row-layout");
-const TimelineExpandArrowButton_1 = require("./TimelineExpandArrowButton");
-const TimelineLayerEye_1 = require("./TimelineLayerEye");
-const TimelineRowChrome_1 = require("./TimelineRowChrome");
-const TimelineSchemaField_1 = require("./TimelineSchemaField");
-const fieldRowBase = {
-    paddingRight: timeline_layout_1.EXPANDED_SECTION_PADDING_RIGHT,
-};
-const fieldName = {
-    fontSize: 12,
-    color: 'rgba(255, 255, 255, 0.8)',
-    userSelect: 'none',
-};
-const Value = ({ field, nodePath, validatedLocation, schema, codeValue }) => {
-    const { getDragOverrides } = (0, react_1.useContext)(remotion_1.Internals.VisualModeDragOverridesContext);
-    const { setDragOverrides, clearDragOverrides } = (0, react_1.useContext)(remotion_1.Internals.VisualModeSettersContext);
-    const dragOverrideValue = (0, react_1.useMemo)(() => {
-        var _a;
-        return nodePath === null
-            ? undefined
-            : ((_a = getDragOverrides(nodePath)) !== null && _a !== void 0 ? _a : {})[field.key];
-    }, [getDragOverrides, nodePath, field.key]);
-    const effectiveValue = remotion_1.Internals.getEffectiveVisualModeValue({
-        codeValue,
-        dragOverrideValue,
-        defaultValue: field.fieldSchema.default,
-        shouldResortToDefaultValueIfUndefined: true,
-    });
-    const { setCodeValues } = (0, react_1.useContext)(remotion_1.Internals.VisualModeSettersContext);
-    const { previewServerState } = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx);
-    const clientId = previewServerState.type === 'connected'
-        ? previewServerState.clientId
-        : null;
-    const onSave = (0, react_1.useCallback)((value) => {
-        if (!codeValue || !codeValue.canUpdate) {
-            return Promise.reject(new Error('Cannot save'));
-        }
-        if (!clientId) {
-            return Promise.reject(new Error('Not connected to studio server'));
-        }
-        const defaultValue = field.fieldSchema.default !== undefined
-            ? JSON.stringify(field.fieldSchema.default)
-            : null;
-        const stringifiedValue = JSON.stringify(value);
-        if (value === codeValue.codeValue) {
-            return Promise.resolve();
-        }
-        if (defaultValue === stringifiedValue &&
-            codeValue.codeValue === undefined) {
-            return Promise.resolve();
-        }
-        return (0, save_sequence_prop_1.saveSequenceProp)({
-            fileName: validatedLocation.source,
-            nodePath,
-            fieldKey: field.key,
-            value,
-            defaultValue,
-            schema,
-            setCodeValues,
-            clientId,
-        });
-    }, [
-        codeValue,
-        clientId,
-        field.fieldSchema.default,
-        field.key,
-        nodePath,
-        schema,
-        setCodeValues,
-        validatedLocation,
-    ]);
-    const onDragValueChange = (0, react_1.useCallback)((value) => {
-        if (nodePath === null) {
-            throw new Error('Cannot drag value');
-        }
-        setDragOverrides(nodePath, field.key, value);
-    }, [setDragOverrides, nodePath, field.key]);
-    const onDragEnd = (0, react_1.useCallback)(() => {
-        if (nodePath === null) {
-            throw new Error('Cannot clear drag value');
-        }
-        clearDragOverrides(nodePath);
-    }, [clearDragOverrides, nodePath]);
-    return (jsx_runtime_1.jsx(TimelineSchemaField_1.TimelineFieldValue, { field: field, propStatus: codeValue, onSave: onSave, onDragValueChange: onDragValueChange, onDragEnd: onDragEnd, effectiveValue: effectiveValue }));
-};
-const TimelineFieldRow = ({ field, validatedLocation, rowDepth, nodePath, schema }) => {
-    var _a, _b;
-    const { codeValues: visualModeCodeValues } = (0, react_1.useContext)(remotion_1.Internals.VisualModeCodeValuesContext);
-    const codeValuesForOverride = remotion_1.Internals.getCodeValuesCtx(visualModeCodeValues, nodePath);
-    const codeValue = (_a = codeValuesForOverride === null || codeValuesForOverride === void 0 ? void 0 : codeValuesForOverride[field.key]) !== null && _a !== void 0 ? _a : null;
-    const style = (0, react_1.useMemo)(() => {
-        return {
-            ...fieldRowBase,
-            height: field.rowHeight,
-        };
-    }, [field.rowHeight]);
-    const labelRowStyle = (0, react_1.useMemo)(() => (0, timeline_field_row_layout_1.getTimelineFieldLabelRowStyle)(rowDepth), [rowDepth]);
-    if (codeValue === null) {
-        return null;
-    }
-    return (jsx_runtime_1.jsxs(TimelineRowChrome_1.TimelineRowChrome, { depth: rowDepth, eye: jsx_runtime_1.jsx(TimelineLayerEye_1.TimelineLayerEyeSpacer, {}), arrow: jsx_runtime_1.jsx(TimelineExpandArrowButton_1.TimelineExpandArrowSpacer, {}), style: style, children: [
-            jsx_runtime_1.jsx("div", { style: labelRowStyle, children: jsx_runtime_1.jsx("span", { style: fieldName, children: (_b = field.description) !== null && _b !== void 0 ? _b : field.key }) }), codeValue.canUpdate ? (jsx_runtime_1.jsx(Value, { field: field, nodePath: nodePath, validatedLocation: validatedLocation, schema: schema, codeValue: codeValue })) : (jsx_runtime_1.jsx(TimelineSchemaField_1.TimelineNonEditableStatus, { propStatus: codeValue }))] }));
-};
-exports.TimelineFieldRow = TimelineFieldRow;

package/dist/components/Timeline/TimelineStack/index.d.ts

@@ -1,8 +0,0 @@
-import React from 'react';
-import type { TSequence } from 'remotion';
-import type { OriginalPosition } from '../../../error-overlay/react-overlay/utils/get-source-map';
-export declare const TimelineStack: React.FC<{
-    readonly isCompact: boolean;
-    readonly sequence: TSequence;
-    readonly originalLocation: OriginalPosition | null;
-}>;

package/dist/components/Timeline/TimelineStack/index.js

@@ -1,119 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.TimelineStack = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const client_id_1 = require("../../../helpers/client-id");
-const colors_1 = require("../../../helpers/colors");
-const get_git_menu_item_1 = require("../../../helpers/get-git-menu-item");
-const open_in_editor_1 = require("../../../helpers/open-in-editor");
-const layout_1 = require("../../layout");
-const NotificationCenter_1 = require("../../Notifications/NotificationCenter");
-const Spinner_1 = require("../../Spinner");
-const source_attribution_1 = require("./source-attribution");
-const TimelineStack = ({ isCompact, sequence, originalLocation }) => {
-    const [stackHovered, setStackHovered] = (0, react_1.useState)(false);
-    const [titleHovered, setTitleHovered] = (0, react_1.useState)(false);
-    const [opening, setOpening] = (0, react_1.useState)(false);
-    const connectionStatus = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx)
-        .previewServerState.type;
-    const openEditor = (0, react_1.useCallback)(async (location) => {
-        if (!window.remotion_editorName) {
-            return;
-        }
-        setOpening(true);
-        try {
-            await (0, open_in_editor_1.openOriginalPositionInEditor)(location);
-        }
-        catch (err) {
-            (0, NotificationCenter_1.showNotification)(err.message, 2000);
-        }
-        finally {
-            setOpening(false);
-        }
-    }, []);
-    const canOpenInEditor = window.remotion_editorName &&
-        connectionStatus === 'connected' &&
-        originalLocation;
-    const canOpenInGitHub = window.remotion_gitSource && originalLocation;
-    const { documentationLink } = sequence;
-    const titleHoverable = documentationLink !== null;
-    const stackHoverable = !isCompact && (canOpenInEditor || canOpenInGitHub);
-    const onClickTitle = (0, react_1.useCallback)(() => {
-        if (documentationLink === null) {
-            return null;
-        }
-        window.open(documentationLink, '_blank', 'noopener,noreferrer');
-    }, [documentationLink]);
-    const onClickStack = (0, react_1.useCallback)(() => {
-        if (!originalLocation) {
-            return;
-        }
-        if (canOpenInEditor) {
-            openEditor(originalLocation);
-            return;
-        }
-        if (canOpenInGitHub) {
-            window.open((0, get_git_menu_item_1.getGitRefUrl)(window.remotion_gitSource, originalLocation), '_blank');
-        }
-    }, [canOpenInEditor, canOpenInGitHub, openEditor, originalLocation]);
-    const onStackPointerEnter = (0, react_1.useCallback)(() => {
-        setStackHovered(true);
-    }, []);
-    const onStackPointerLeave = (0, react_1.useCallback)(() => {
-        setStackHovered(false);
-    }, []);
-    const onTitlePointerEnter = (0, react_1.useCallback)(() => {
-        setTitleHovered(true);
-    }, []);
-    const onTitlePointerLeave = (0, react_1.useCallback)(() => {
-        setTitleHovered(false);
-    }, []);
-    const style = (0, react_1.useMemo)(() => {
-        return {
-            fontSize: 12,
-            color: opening
-                ? colors_1.VERY_LIGHT_TEXT
-                : stackHovered && stackHoverable
-                    ? colors_1.LIGHT_TEXT
-                    : colors_1.VERY_LIGHT_TEXT,
-            marginLeft: 5,
-            cursor: stackHoverable ? 'pointer' : undefined,
-            display: 'flex',
-            flexDirection: 'row',
-            alignItems: 'center',
-            whiteSpace: 'nowrap',
-            textOverflow: 'ellipsis',
-            overflow: 'hidden',
-            flexShrink: 100000,
-            userSelect: 'none',
-            WebkitUserSelect: 'none',
-        };
-    }, [opening, stackHovered, stackHoverable]);
-    const titleStyle = (0, react_1.useMemo)(() => {
-        const hoverEffect = titleHovered && titleHoverable;
-        return {
-            fontSize: 12,
-            whiteSpace: 'nowrap',
-            textOverflow: 'ellipsis',
-            overflow: 'hidden',
-            lineHeight: 1.2,
-            color: opening && isCompact ? colors_1.VERY_LIGHT_TEXT : colors_1.LIGHT_COLOR,
-            userSelect: 'none',
-            WebkitUserSelect: 'none',
-            textDecoration: hoverEffect ? 'underline' : 'none',
-            textUnderlineOffset: 2,
-            cursor: hoverEffect ? 'pointer' : undefined,
-        };
-    }, [titleHoverable, isCompact, opening, titleHovered]);
-    const text = sequence.displayName.length > 1000
-        ? sequence.displayName.slice(0, 1000) + '...'
-        : sequence.displayName;
-    return (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
-            jsx_runtime_1.jsx("div", { onPointerEnter: onTitlePointerEnter, onPointerLeave: onTitlePointerLeave, title: documentationLink
-                    ? `Open documentation: ${documentationLink}`
-                    : text || '<Sequence>', style: titleStyle, onClick: onClickTitle, children: text || '<Sequence>' }), isCompact || !originalLocation ? null : (jsx_runtime_1.jsx("div", { onPointerEnter: onStackPointerEnter, onPointerLeave: onStackPointerLeave, onClick: onClickStack, style: style, children: (0, source_attribution_1.getOriginalSourceAttribution)(originalLocation) })), opening ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
-                    jsx_runtime_1.jsx(layout_1.Spacing, { x: 0.5 }), jsx_runtime_1.jsx(Spinner_1.Spinner, { duration: 0.5, size: 12 })
-                ] })) : null] }));
-};
-exports.TimelineStack = TimelineStack;