@remotion/studio 4.0.464 → 4.0.465

package/dist/components/NewComposition/CodemodFooter.d.ts

@@ -3,6 +3,7 @@ import React from 'react';
 export declare const CodemodFooter: React.FC<{
     readonly valid: boolean;
     readonly codemod: RecastCodemod;
+    readonly stack: string | null;
     readonly loadingNotification: React.ReactNode;
     readonly successNotification: React.ReactNode;
     readonly errorNotification: string;

package/dist/components/NewComposition/CodemodFooter.js

@@ -4,33 +4,25 @@ exports.CodemodFooter = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const ShortcutHint_1 = require("../../error-overlay/remotion-overlay/ShortcutHint");
+const resolved_stack_to_symbolicated_1 = require("../../helpers/resolved-stack-to-symbolicated");
 const use_keybinding_1 = require("../../helpers/use-keybinding");
 const modals_1 = require("../../state/modals");
 const layout_1 = require("../layout");
 const ModalButton_1 = require("../ModalButton");
 const NotificationCenter_1 = require("../Notifications/NotificationCenter");
 const actions_1 = require("../RenderQueue/actions");
+const use_resolved_stack_1 = require("../Timeline/use-resolved-stack");
 const DiffPreview_1 = require("./DiffPreview");
-const CodemodFooter = ({ codemod, valid, loadingNotification, successNotification, errorNotification, genericSubmitLabel, submitLabel, onSuccess, }) => {
+const CodemodFooter = ({ codemod, stack, valid, loadingNotification, successNotification, errorNotification, genericSubmitLabel, submitLabel, onSuccess, }) => {
+    var _a;
     const [submitting, setSubmitting] = (0, react_1.useState)(false);
     const { setSelectedModal } = (0, react_1.useContext)(modals_1.ModalsContext);
     const [codemodStatus, setCanApplyCodemod] = (0, react_1.useState)({
         type: 'loading',
     });
-    const [projectInfo, setProjectInfo] = (0, react_1.useState)(null);
-    (0, react_1.useEffect)(() => {
-        const controller = new AbortController();
-        (0, actions_1.getProjectInfo)(controller.signal)
-            .then((info) => {
-            setProjectInfo(info.projectInfo);
-        })
-            .catch((err) => {
-            (0, NotificationCenter_1.showNotification)(`Could not get project info: ${err.message}. Unable to duplicate composition`, 3000);
-        });
-        return () => {
-            controller.abort();
-        };
-    }, []);
+    const resolvedLocation = (0, use_resolved_stack_1.useResolvedStack)(stack);
+    const symbolicatedStack = (0, react_1.useMemo)(() => (0, resolved_stack_to_symbolicated_1.resolvedStackToSymbolicated)(resolvedLocation), [resolvedLocation]);
+    const relativeFilePath = (_a = symbolicatedStack === null || symbolicatedStack === void 0 ? void 0 : symbolicatedStack.originalFileName) !== null && _a !== void 0 ? _a : null;
     const trigger = (0, react_1.useCallback)(() => {
         setSubmitting(true);
         setSelectedModal(null);
@@ -38,6 +30,7 @@ const CodemodFooter = ({ codemod, valid, loadingNotification, successNotificatio
         (0, actions_1.applyCodemod)({
             codemod,
             dryRun: false,
+            symbolicatedStack,
             signal: new AbortController().signal,
         })
             .then(() => {
@@ -54,11 +47,13 @@ const CodemodFooter = ({ codemod, valid, loadingNotification, successNotificatio
         onSuccess,
         setSelectedModal,
         successNotification,
+        symbolicatedStack,
     ]);
     const getCanApplyCodemod = (0, react_1.useCallback)(async (signal) => {
         const res = await (0, actions_1.applyCodemod)({
             codemod,
             dryRun: true,
+            symbolicatedStack,
             signal,
         });
         if (res.success) {
@@ -70,8 +65,25 @@ const CodemodFooter = ({ codemod, valid, loadingNotification, successNotificatio
                 error: res.reason,
             });
         }
-    }, [codemod]);
+    }, [codemod, symbolicatedStack]);
     (0, react_1.useEffect)(() => {
+        if (!stack) {
+            setCanApplyCodemod({
+                type: 'fail',
+                error: 'Could not determine where this composition is defined',
+            });
+            return;
+        }
+        if (!(0, use_resolved_stack_1.hasResolvedStack)(stack)) {
+            return;
+        }
+        if (!symbolicatedStack) {
+            setCanApplyCodemod({
+                type: 'fail',
+                error: 'Could not resolve the source location of this composition',
+            });
+            return;
+        }
         const abortController = new AbortController();
         let aborted = false;
         getCanApplyCodemod(abortController.signal)
@@ -80,16 +92,16 @@ const CodemodFooter = ({ codemod, valid, loadingNotification, successNotificatio
             if (aborted) {
                 return;
             }
-            (0, NotificationCenter_1.showNotification)(`Cannot duplicate composition: ${err.message}`, 3000);
+            (0, NotificationCenter_1.showNotification)(`${errorNotification}: ${err.message}`, 3000);
         });
         return () => {
             aborted = true;
             abortController.abort();
         };
-    }, [getCanApplyCodemod]);
+    }, [errorNotification, getCanApplyCodemod, stack, symbolicatedStack]);
     const disabled = !valid ||
         submitting ||
-        projectInfo === null ||
+        symbolicatedStack === null ||
         codemodStatus.type !== 'success';
     const { registerKeybinding } = (0, use_keybinding_1.useKeybinding)();
     (0, react_1.useEffect)(() => {
@@ -100,7 +112,7 @@ const CodemodFooter = ({ codemod, valid, loadingNotification, successNotificatio
             callback() {
                 trigger();
             },
-            commandCtrlKey: true,
+            commandCtrlKey: false,
             key: 'Enter',
             event: 'keydown',
             preventDefault: true,
@@ -112,9 +124,9 @@ const CodemodFooter = ({ codemod, valid, loadingNotification, successNotificatio
         };
     }, [disabled, registerKeybinding, trigger, valid]);
     return (jsx_runtime_1.jsxs(layout_1.Row, { align: "center", children: [
-            jsx_runtime_1.jsx(DiffPreview_1.CodemodDiffPreview, { status: codemodStatus }), jsx_runtime_1.jsx(layout_1.Flex, {}), jsx_runtime_1.jsx(layout_1.Spacing, { block: true, x: 2 }), jsx_runtime_1.jsxs(ModalButton_1.ModalButton, { onClick: trigger, disabled: disabled, children: [projectInfo && projectInfo.relativeRootFile
-                        ? submitLabel({ relativeRootPath: projectInfo.relativeRootFile })
-                        : genericSubmitLabel, jsx_runtime_1.jsx(ShortcutHint_1.ShortcutHint, { keyToPress: "\u21B5", cmdOrCtrl: true })
+            jsx_runtime_1.jsx(DiffPreview_1.CodemodDiffPreview, { status: codemodStatus }), jsx_runtime_1.jsx(layout_1.Flex, {}), jsx_runtime_1.jsx(layout_1.Spacing, { block: true, x: 2 }), jsx_runtime_1.jsxs(ModalButton_1.ModalButton, { onClick: trigger, disabled: disabled, children: [relativeFilePath
+                        ? submitLabel({ relativeRootPath: relativeFilePath })
+                        : genericSubmitLabel, jsx_runtime_1.jsx(ShortcutHint_1.ShortcutHint, { keyToPress: "\u21B5", cmdOrCtrl: false })
                 ] })
         ] }));
 };

package/dist/components/NewComposition/DeleteComposition.js

@@ -16,11 +16,13 @@ const content = {
     minWidth: 500,
 };
 const DeleteCompositionLoaded = ({ compositionId }) => {
+    var _a;
     const context = (0, react_1.useContext)(ResolveCompositionBeforeModal_1.ResolvedCompositionContext);
     if (!context) {
         throw new Error('Resolved composition context');
     }
     const { unresolved } = context;
+    const compositionStack = (_a = unresolved.stack) !== null && _a !== void 0 ? _a : null;
     const codemod = (0, react_1.useMemo)(() => {
         return {
             type: 'delete-composition',
@@ -36,7 +38,7 @@ const DeleteCompositionLoaded = ({ compositionId }) => {
                             jsx_runtime_1.jsx("br", {}),
                             "The associated ",
                             jsx_runtime_1.jsx("code", { style: styles_1.inlineCodeSnippet, children: "component" }),
-                            " will remain in your code."] }), jsx_runtime_1.jsx(ModalFooter_1.ModalFooterContainer, { children: jsx_runtime_1.jsx(CodemodFooter_1.CodemodFooter, { errorNotification: `Could not delete composition`, loadingNotification: 'Deleting', successNotification: `Deleted ${unresolved.id}`, genericSubmitLabel: `Delete`, submitLabel: ({ relativeRootPath }) => `Delete from ${relativeRootPath}`, codemod: codemod, valid: true, onSuccess: null }) })
+                            " will remain in your code."] }), jsx_runtime_1.jsx(ModalFooter_1.ModalFooterContainer, { children: jsx_runtime_1.jsx(CodemodFooter_1.CodemodFooter, { errorNotification: `Could not delete composition`, loadingNotification: 'Deleting', successNotification: `Deleted ${unresolved.id}`, genericSubmitLabel: `Delete`, submitLabel: ({ relativeRootPath }) => `Delete from ${relativeRootPath}`, codemod: codemod, stack: compositionStack, valid: true, onSuccess: null }) })
                 ] })
         ] }));
 };

package/dist/components/NewComposition/DiffPreview.js

@@ -11,7 +11,7 @@ const CodemodDiffPreview = ({ status }) => {
         return (jsx_runtime_1.jsx("span", { style: { color: colors_1.FAIL_COLOR, fontSize: 13, lineHeight: 1.2 }, children: status.error }));
     }
     return (jsx_runtime_1.jsxs("div", { style: { lineHeight: 1.2 }, children: [
-            jsx_runtime_1.jsx("span", { style: { color: colors_1.LIGHT_TEXT, fontSize: 13, lineHeight: 1.2 }, children: "This will edit your Root file." }), jsx_runtime_1.jsx("br", {}), jsx_runtime_1.jsxs("span", { style: { color: colors_1.BLUE, fontSize: 13, lineHeight: 1.2 }, children: [status.diff.additions, " addition", status.diff.additions === 1 ? '' : 's', ","] }), ' ', jsx_runtime_1.jsxs("span", { style: {
+            jsx_runtime_1.jsx("span", { style: { color: colors_1.LIGHT_TEXT, fontSize: 13, lineHeight: 1.2 }, children: "This will edit your codebase." }), jsx_runtime_1.jsx("br", {}), jsx_runtime_1.jsxs("span", { style: { color: colors_1.BLUE, fontSize: 13, lineHeight: 1.2 }, children: [status.diff.additions, " addition", status.diff.additions === 1 ? '' : 's', ","] }), ' ', jsx_runtime_1.jsxs("span", { style: {
                     color: colors_1.SELECTED_GUIDE,
                     fontSize: 13,
                     lineHeight: 1.2,

package/dist/components/NewComposition/DuplicateComposition.js

@@ -29,11 +29,13 @@ const comboBoxStyle = {
     width: 190,
 };
 const DuplicateCompositionLoaded = ({ initialType }) => {
+    var _a;
     const context = (0, react_1.useContext)(ResolveCompositionBeforeModal_1.ResolvedCompositionContext);
     if (!context) {
         throw new Error('Resolved composition context');
     }
     const { resolved, unresolved } = context;
+    const compositionStack = (_a = unresolved.stack) !== null && _a !== void 0 ? _a : null;
     const [initialCompType] = (0, react_1.useState)(initialType);
     const hadDimensionsDefined = unresolved.width && unresolved.height;
     const hadFpsDefined = unresolved.fps !== undefined;
@@ -199,7 +201,7 @@ const DuplicateCompositionLoaded = ({ initialType }) => {
                                         ] })
                                 ] })) : null, type === 'composition' && hadDurationDefined ? (jsx_runtime_1.jsx(NewCompDuration_1.NewCompDuration, { durationInFrames: durationInFrames, setDurationInFrames: setDurationInFrames })) : null, type === 'composition' && hadFpsDefined ? (jsx_runtime_1.jsxs("div", { style: layout_2.optionRow, children: [
                                     jsx_runtime_1.jsx("div", { style: layout_2.label, children: "FPS" }), jsx_runtime_1.jsx("div", { style: layout_2.rightRow, children: jsx_runtime_1.jsx(InputDragger_1.InputDragger, { type: "number", value: selectedFrameRate, onTextChange: onTextFpsChange, placeholder: "Frame rate (fps)", name: "fps", min: 1, required: true, status: "ok", max: 240, step: 0.01, onValueChange: onFpsChange, rightAlign: false }) })
-                                ] })) : null] }), jsx_runtime_1.jsx(ModalFooter_1.ModalFooterContainer, { children: jsx_runtime_1.jsx(CodemodFooter_1.CodemodFooter, { loadingNotification: 'Duplicating...', errorNotification: 'Could not duplicate composition', successNotification: `Duplicated ${unresolved.id} as ${newId}`, genericSubmitLabel: 'Duplicate', submitLabel: ({ relativeRootPath }) => `Add to ${relativeRootPath}`, codemod: codemod, valid: valid, onSuccess: onDuplicateSuccess }) })
+                                ] })) : null] }), jsx_runtime_1.jsx(ModalFooter_1.ModalFooterContainer, { children: jsx_runtime_1.jsx(CodemodFooter_1.CodemodFooter, { loadingNotification: 'Duplicating...', errorNotification: 'Could not duplicate composition', successNotification: `Duplicated ${unresolved.id} as ${newId}`, genericSubmitLabel: 'Duplicate', submitLabel: ({ relativeRootPath }) => `Add to ${relativeRootPath}`, codemod: codemod, stack: compositionStack, valid: valid, onSuccess: onDuplicateSuccess }) })
                 ] })
         ] }));
 };

package/dist/components/NewComposition/RenameComposition.js

@@ -22,11 +22,13 @@ const content = {
     minWidth: 500,
 };
 const RenameCompositionLoaded = () => {
+    var _a;
     const context = (0, react_1.useContext)(ResolveCompositionBeforeModal_1.ResolvedCompositionContext);
     if (!context) {
         throw new Error('Resolved composition context');
     }
-    const { resolved } = context;
+    const { resolved, unresolved } = context;
+    const compositionStack = (_a = unresolved.stack) !== null && _a !== void 0 ? _a : null;
     const { compositions } = (0, react_1.useContext)(remotion_1.Internals.CompositionManager);
     const [newId, setName] = (0, react_1.useState)(() => {
         return resolved.result.id;
@@ -55,7 +57,7 @@ const RenameCompositionLoaded = () => {
                                             jsx_runtime_1.jsx(RemInput_1.RemotionInput, { value: newId, onChange: onNameChange, type: "text", autoFocus: true, placeholder: "Composition ID", status: "ok", rightAlign: true }), compNameErrMessage ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
                                                     jsx_runtime_1.jsx(layout_1.Spacing, { y: 1, block: true }), jsx_runtime_1.jsx(ValidationMessage_1.ValidationMessage, { align: "flex-start", message: compNameErrMessage, type: "error" })
                                                 ] })) : null] }) })
-                            ] }) }), jsx_runtime_1.jsx(ModalFooter_1.ModalFooterContainer, { children: jsx_runtime_1.jsx(CodemodFooter_1.CodemodFooter, { loadingNotification: 'Renaming...', errorNotification: 'Could not rename composition', successNotification: `Renamed to ${newId}`, genericSubmitLabel: 'Rename', submitLabel: ({ relativeRootPath }) => `Modify ${relativeRootPath}`, codemod: codemod, valid: valid, onSuccess: null }) })
+                            ] }) }), jsx_runtime_1.jsx(ModalFooter_1.ModalFooterContainer, { children: jsx_runtime_1.jsx(CodemodFooter_1.CodemodFooter, { loadingNotification: 'Renaming...', errorNotification: 'Could not rename composition', successNotification: `Renamed to ${newId}`, genericSubmitLabel: 'Rename', submitLabel: ({ relativeRootPath }) => `Modify ${relativeRootPath}`, codemod: codemod, stack: compositionStack, valid: valid, onSuccess: null }) })
                 ] })
         ] }));
 };

package/dist/components/RenderQueue/actions.d.ts

@@ -97,9 +97,10 @@ export declare const subscribeToFileExistenceWatcher: ({ file, clientId, }: {
 export declare const openInFileExplorer: ({ directory }: {
     directory: string;
 }) => Promise<void>;
-export declare const applyCodemod: ({ codemod, dryRun, signal, }: {
+export declare const applyCodemod: ({ codemod, dryRun, symbolicatedStack, signal, }: {
     codemod: RecastCodemod;
     dryRun: boolean;
+    symbolicatedStack: import("@remotion/studio-shared").SymbolicatedStackFrame | null;
     signal: AbortSignal;
 }) => Promise<import("@remotion/studio-shared").ApplyCodemodResponse>;
 export declare const removeRenderJob: (job: RenderJob) => Promise<undefined>;

package/dist/components/RenderQueue/actions.js

@@ -133,10 +133,11 @@ const openInFileExplorer = ({ directory }) => {
     return (0, call_api_1.callApi)('/api/open-in-file-explorer', body);
 };
 exports.openInFileExplorer = openInFileExplorer;
-const applyCodemod = ({ codemod, dryRun, signal, }) => {
+const applyCodemod = ({ codemod, dryRun, symbolicatedStack, signal, }) => {
     const body = {
         codemod,
         dryRun,
+        symbolicatedStack,
     };
     return (0, call_api_1.callApi)('/api/apply-codemod', body, signal);
 };

package/dist/components/Timeline/TimelineEffectGroupRow.js

@@ -6,6 +6,9 @@ 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 call_api_1 = require("../call-api");
+const ContextMenu_1 = require("../ContextMenu");
+const NotificationCenter_1 = require("../Notifications/NotificationCenter");
 const save_effect_prop_1 = require("./save-effect-prop");
 const TimelineExpandArrowButton_1 = require("./TimelineExpandArrowButton");
 const TimelineLayerEye_1 = require("./TimelineLayerEye");
@@ -37,6 +40,54 @@ const TimelineEffectGroupRow = ({ label, nodePathInfo, effectIndex, effectSchema
         return false;
     }, [disabledStatus]);
     const canToggle = previewConnected && disabledStatus !== null && disabledStatus.canUpdate;
+    const deleteDisabled = !previewConnected ||
+        effectStatus.type !== 'can-update-effect' ||
+        !validatedLocation.source;
+    const onDeleteEffectFromSource = (0, react_1.useCallback)(async () => {
+        if (deleteDisabled) {
+            return;
+        }
+        try {
+            const result = await (0, call_api_1.callApi)('/api/delete-effect', {
+                fileName: validatedLocation.source,
+                sequenceNodePath: nodePath,
+                effectIndex,
+            });
+            if (result.success) {
+                (0, NotificationCenter_1.showNotification)('Removed effect from source file', 2000);
+            }
+            else {
+                (0, NotificationCenter_1.showNotification)(result.reason, 4000);
+            }
+        }
+        catch (err) {
+            (0, NotificationCenter_1.showNotification)(err.message, 4000);
+        }
+    }, [deleteDisabled, effectIndex, nodePath, validatedLocation.source]);
+    const contextMenuValues = (0, react_1.useMemo)(() => {
+        if (!previewConnected) {
+            return [];
+        }
+        return [
+            {
+                type: 'item',
+                id: 'delete-effect',
+                keyHint: null,
+                label: 'Delete',
+                leftItem: null,
+                disabled: deleteDisabled,
+                onClick: () => {
+                    if (deleteDisabled) {
+                        return;
+                    }
+                    onDeleteEffectFromSource();
+                },
+                quickSwitcherLabel: null,
+                subMenu: null,
+                value: 'delete-effect',
+            },
+        ];
+    }, [deleteDisabled, onDeleteEffectFromSource, previewConnected]);
     const onToggle = (0, react_1.useCallback)((type) => {
         if (!canToggle || previewServerState.type !== 'connected') {
             return;
@@ -71,6 +122,7 @@ const TimelineEffectGroupRow = ({ label, nodePathInfo, effectIndex, effectSchema
         height: timeline_layout_1.TREE_GROUP_ROW_HEIGHT,
         paddingRight: timeline_layout_1.EXPANDED_SECTION_PADDING_RIGHT,
     }), []);
-    return (jsx_runtime_1.jsx(TimelineRowChrome_1.TimelineRowChrome, { depth: rowDepth, eye: canToggle ? (jsx_runtime_1.jsx(TimelineLayerEye_1.TimelineLayerEye, { type: "effect", hidden: isDisabled, onInvoked: onToggle })) : (jsx_runtime_1.jsx(TimelineLayerEye_1.TimelineLayerEyeSpacer, {})), arrow: jsx_runtime_1.jsx(TimelineExpandArrowButton_1.TimelineExpandArrowButton, { isExpanded: isExpanded, onClick: () => toggleTrack(nodePathInfo), label: `${label} section`, disabled: false }), style: rowStyle, children: jsx_runtime_1.jsx("span", { style: rowLabel, children: label }) }));
+    const row = (jsx_runtime_1.jsx(TimelineRowChrome_1.TimelineRowChrome, { depth: rowDepth, eye: canToggle ? (jsx_runtime_1.jsx(TimelineLayerEye_1.TimelineLayerEye, { type: "effect", hidden: isDisabled, onInvoked: onToggle })) : (jsx_runtime_1.jsx(TimelineLayerEye_1.TimelineLayerEyeSpacer, {})), arrow: jsx_runtime_1.jsx(TimelineExpandArrowButton_1.TimelineExpandArrowButton, { isExpanded: isExpanded, onClick: () => toggleTrack(nodePathInfo), label: `${label} section`, disabled: false }), style: rowStyle, children: jsx_runtime_1.jsx("span", { style: rowLabel, children: label }) }));
+    return previewConnected ? (jsx_runtime_1.jsx(ContextMenu_1.ContextMenu, { values: contextMenuValues, children: row })) : (row);
 };
 exports.TimelineEffectGroupRow = TimelineEffectGroupRow;

package/dist/components/Timeline/TimelineTimeIndicators.js

@@ -7,14 +7,13 @@ const remotion_1 = require("remotion");
 const colors_1 = require("../../helpers/colors");
 const timeline_layout_1 = require("../../helpers/timeline-layout");
 const render_frame_1 = require("../../state/render-frame");
-const SplitterHandle_1 = require("../Splitter/SplitterHandle");
 const TimeValue_1 = require("../TimeValue");
 const timeline_refs_1 = require("./timeline-refs");
 const timeline_scroll_logic_1 = require("./timeline-scroll-logic");
 const TimelineWidthProvider_1 = require("./TimelineWidthProvider");
 exports.TIMELINE_TIME_INDICATOR_HEIGHT = 39;
 const container = {
-    height: exports.TIMELINE_TIME_INDICATOR_HEIGHT - 4,
+    height: exports.TIMELINE_TIME_INDICATOR_HEIGHT,
     boxShadow: `0 0 4px ${colors_1.TIMELINE_BACKGROUND}`,
     position: 'absolute',
     backgroundColor: colors_1.TIMELINE_BACKGROUND,
@@ -94,10 +93,8 @@ const TimelineTimeIndicatorsInner = ({ windowWidth, durationInFrames, fps }) =>
     const style = (0, react_1.useMemo)(() => {
         return {
             ...container,
-            width: windowWidth - SplitterHandle_1.SPLITTER_HANDLE_SIZE / 2,
+            width: windowWidth,
             overflow: 'hidden',
-            // Since
-            marginLeft: SplitterHandle_1.SPLITTER_HANDLE_SIZE / 2,
             pointerEvents: 'none',
         };
     }, [windowWidth]);
@@ -119,9 +116,7 @@ const TimelineTimeIndicatorsInner = ({ windowWidth, durationInFrames, fps }) =>
                 frame: index * fps,
                 style: {
                     ...secondTick,
-                    left: frameInterval * index * fps +
-                        timeline_layout_1.TIMELINE_PADDING -
-                        SplitterHandle_1.SPLITTER_HANDLE_SIZE / 2,
+                    left: frameInterval * index * fps + timeline_layout_1.TIMELINE_PADDING,
                 },
                 showTime: index > 0,
             };
@@ -134,9 +129,7 @@ const TimelineTimeIndicatorsInner = ({ windowWidth, durationInFrames, fps }) =>
                 frame: index,
                 style: {
                     ...tick,
-                    left: frameInterval * index +
-                        timeline_layout_1.TIMELINE_PADDING -
-                        SplitterHandle_1.SPLITTER_HANDLE_SIZE / 2,
+                    left: frameInterval * index + timeline_layout_1.TIMELINE_PADDING,
                     height: index % fps === 0
                         ? 10
                         : (index / frameMarkerEveryNth) % 2 === 0

package/dist/components/Timeline/TimelineVideoInfo.js

@@ -7,6 +7,7 @@ const react_1 = require("react");
 const remotion_1 = require("remotion");
 const timeline_layout_1 = require("../../helpers/timeline-layout");
 const AudioWaveform_1 = require("../AudioWaveform");
+const get_timeline_video_info_widths_1 = require("./get-timeline-video-info-widths");
 const FILMSTRIP_HEIGHT = timeline_layout_1.TIMELINE_LAYER_HEIGHT_IMAGE - 2;
 const outerStyle = {
     width: '100%',
@@ -16,7 +17,6 @@ const outerStyle = {
 };
 const filmstripContainerStyle = {
     height: FILMSTRIP_HEIGHT,
-    width: '100%',
     backgroundColor: 'rgba(0, 0, 0, 0.3)',
     display: 'flex',
     borderTopLeftRadius: 2,
@@ -28,6 +28,14 @@ const TimelineVideoInfo = ({ src, visualizationWidth, naturalWidth, trimBefore,
     const ref = (0, react_1.useRef)(null);
     const [error, setError] = (0, react_1.useState)(null);
     const aspectRatio = (0, react_1.useRef)((0, timeline_utils_1.getAspectRatioFromCache)(src));
+    const { mediaVisualizationWidth, mediaNaturalWidth } = (0, react_1.useMemo)(() => {
+        return (0, get_timeline_video_info_widths_1.getTimelineVideoInfoWidths)({
+            visualizationWidth,
+            naturalWidth,
+            premountWidth,
+            postmountWidth,
+        });
+    }, [naturalWidth, postmountWidth, premountWidth, visualizationWidth]);
     // for rendering frames
     (0, react_1.useEffect)(() => {
         if (error) {
@@ -39,7 +47,7 @@ const TimelineVideoInfo = ({ src, visualizationWidth, naturalWidth, trimBefore,
         }
         const controller = new AbortController();
         const canvas = document.createElement('canvas');
-        canvas.width = visualizationWidth;
+        canvas.width = mediaVisualizationWidth;
         canvas.height = FILMSTRIP_HEIGHT;
         const ctx = canvas.getContext('2d');
         if (!ctx) {
@@ -47,7 +55,7 @@ const TimelineVideoInfo = ({ src, visualizationWidth, naturalWidth, trimBefore,
         }
         current.appendChild(canvas);
         const loopWidth = (0, timeline_utils_1.getLoopDisplayWidth)({
-            visualizationWidth: naturalWidth,
+            visualizationWidth: mediaNaturalWidth,
             loopDisplay,
         });
         const shouldRepeatVideo = (0, timeline_utils_1.shouldTileLoopDisplay)(loopDisplay);
@@ -85,7 +93,9 @@ const TimelineVideoInfo = ({ src, visualizationWidth, naturalWidth, trimBefore,
         // Trim is applied first, then playbackRate. Each composition frame
         // advances the source video by `playbackRate` source frames.
         const toSeconds = fromSeconds + (visibleDurationInFrames * playbackRate) / fps;
-        const targetWidth = shouldRepeatVideo ? targetCanvas.width : naturalWidth;
+        const targetWidth = shouldRepeatVideo
+            ? targetCanvas.width
+            : mediaNaturalWidth;
         if (aspectRatio.current !== null) {
             (0, timeline_utils_1.ensureSlots)({
                 filledSlots,
@@ -207,13 +217,20 @@ const TimelineVideoInfo = ({ src, visualizationWidth, naturalWidth, trimBefore,
         error,
         fps,
         loopDisplay,
-        naturalWidth,
+        mediaNaturalWidth,
+        mediaVisualizationWidth,
         playbackRate,
         src,
         trimBefore,
-        visualizationWidth,
     ]);
-    const audioWidth = visualizationWidth - premountWidth - postmountWidth;
+    const audioWidth = mediaVisualizationWidth;
+    const filmstripStyle = (0, react_1.useMemo)(() => {
+        return {
+            ...filmstripContainerStyle,
+            width: mediaVisualizationWidth,
+            marginLeft: premountWidth,
+        };
+    }, [mediaVisualizationWidth, premountWidth]);
     const audioStyle = (0, react_1.useMemo)(() => {
         return {
             height: timeline_layout_1.TIMELINE_LAYER_HEIGHT_AUDIO,
@@ -223,7 +240,7 @@ const TimelineVideoInfo = ({ src, visualizationWidth, naturalWidth, trimBefore,
         };
     }, [audioWidth, premountWidth]);
     return (jsx_runtime_1.jsxs("div", { style: outerStyle, children: [
-            jsx_runtime_1.jsx("div", { ref: ref, style: filmstripContainerStyle }), jsx_runtime_1.jsx("div", { style: audioStyle, children: jsx_runtime_1.jsx(AudioWaveform_1.AudioWaveform, { src: src, visualizationWidth: audioWidth, startFrom: trimBefore, durationInFrames: durationInFrames, volume: volume, doesVolumeChange: doesVolumeChange, playbackRate: playbackRate, loopDisplay: loopDisplay }) })
+            jsx_runtime_1.jsx("div", { ref: ref, style: filmstripStyle }), jsx_runtime_1.jsx("div", { style: audioStyle, children: jsx_runtime_1.jsx(AudioWaveform_1.AudioWaveform, { src: src, visualizationWidth: audioWidth, startFrom: trimBefore, durationInFrames: durationInFrames, volume: volume, doesVolumeChange: doesVolumeChange, playbackRate: playbackRate, loopDisplay: loopDisplay }) })
         ] }));
 };
 exports.TimelineVideoInfo = TimelineVideoInfo;

package/dist/components/Timeline/get-timeline-video-info-widths.d.ts

@@ -0,0 +1,9 @@
+export declare const getTimelineVideoInfoWidths: ({ visualizationWidth, naturalWidth, premountWidth, postmountWidth, }: {
+    visualizationWidth: number;
+    naturalWidth: number;
+    premountWidth: number;
+    postmountWidth: number;
+}) => {
+    mediaVisualizationWidth: number;
+    mediaNaturalWidth: number;
+};

package/dist/components/Timeline/get-timeline-video-info-widths.js

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getTimelineVideoInfoWidths = void 0;
+const getTimelineVideoInfoWidths = ({ visualizationWidth, naturalWidth, premountWidth, postmountWidth, }) => {
+    const mountWidth = premountWidth + postmountWidth;
+    return {
+        mediaVisualizationWidth: Math.max(0, visualizationWidth - mountWidth),
+        mediaNaturalWidth: Math.max(0, naturalWidth - mountWidth),
+    };
+};
+exports.getTimelineVideoInfoWidths = getTimelineVideoInfoWidths;

package/dist/components/Timeline/use-resolved-stack.d.ts

@@ -1,2 +1,3 @@
 import type { ResolvedStackLocation } from 'remotion';
+export declare const hasResolvedStack: (stack: string | null) => boolean;
 export declare const useResolvedStack: (stack: string | null) => ResolvedStackLocation | null;

package/dist/components/Timeline/use-resolved-stack.js

@@ -1,10 +1,17 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.useResolvedStack = void 0;
+exports.useResolvedStack = exports.hasResolvedStack = void 0;
 const react_1 = require("react");
 const remotion_1 = require("remotion");
 const get_stack_1 = require("./TimelineStack/get-stack");
 const resolvedCache = new Map();
+const hasResolvedStack = (stack) => {
+    if (!stack) {
+        return true;
+    }
+    return resolvedCache.has(stack);
+};
+exports.hasResolvedStack = hasResolvedStack;
 const inFlight = new Set();
 const subscribers = new Map();
 const useResolvedStack = (stack) => {
@@ -40,6 +47,8 @@ const useResolvedStack = (stack) => {
                 .catch((err) => {
                 // eslint-disable-next-line no-console
                 console.error('Could not get original location of Sequence', err);
+                resolvedCache.set(stack, null);
+                subs.forEach((fn) => fn(null));
             })
                 .finally(() => {
                 inFlight.delete(stack);