@remotion/studio 4.0.442 → 4.0.444

package/dist/components/CanvasOrLoading.js

@@ -11,6 +11,7 @@ const Canvas_1 = require("./Canvas");
 const FramePersistor_1 = require("./FramePersistor");
 const is_menu_item_1 = require("./Menu/is-menu-item");
 const RefreshCompositionOverlay_1 = require("./RefreshCompositionOverlay");
+const RenderErrorContext_1 = require("./RenderErrorContext");
 const RunningCalculateMetadata_1 = require("./RunningCalculateMetadata");
 const imperative_state_1 = require("./Timeline/imperative-state");
 const timeline_scroll_logic_1 = require("./Timeline/timeline-scroll-logic");
@@ -28,6 +29,7 @@ const CanvasOrLoading = ({ size }) => {
     const resolved = remotion_1.Internals.useResolvedVideoConfig(null);
     const { setZoom } = (0, react_1.useContext)(timeline_zoom_1.TimelineZoomCtx);
     const { canvasContent } = (0, react_1.useContext)(remotion_1.Internals.CompositionManager);
+    const { error: renderError } = (0, react_1.useContext)(RenderErrorContext_1.RenderErrorContext);
     (0, react_1.useEffect)(() => {
         if ((resolved === null || resolved === void 0 ? void 0 : resolved.type) !== 'success' &&
             (resolved === null || resolved === void 0 ? void 0 : resolved.type) !== 'success-and-refreshing') {
@@ -42,6 +44,9 @@ const CanvasOrLoading = ({ size }) => {
             });
         });
     }, [resolved, setZoom]);
+    if (renderError) {
+        return jsx_runtime_1.jsx(ErrorLoading, { error: renderError });
+    }
     if (!canvasContent) {
         const compname = window.location.pathname.replace('/', '');
         return (jsx_runtime_1.jsx("div", { style: container, className: "css-reset", children: jsx_runtime_1.jsxs("div", { style: RunningCalculateMetadata_1.loaderLabel, children: ["Composition with ID ", compname, " not found."] }) }));

package/dist/components/Editor.js

@@ -48,6 +48,7 @@ const ForceSpecificCursor_1 = require("./ForceSpecificCursor");
 const GlobalKeybindings_1 = require("./GlobalKeybindings");
 const Modals_1 = require("./Modals");
 const NotificationCenter_1 = require("./Notifications/NotificationCenter");
+const RenderErrorContext_1 = require("./RenderErrorContext");
 const TopPanel_1 = require("./TopPanel");
 const background = {
     backgroundColor: colors_1.BACKGROUND,
@@ -83,10 +84,17 @@ const Editor = ({ Root, readOnlyStudio }) => {
     const MemoRoot = (0, react_1.useMemo)(() => {
         return react_1.default.memo(Root);
     }, [Root]);
+    const [renderError, setRenderError] = (0, react_1.useState)(null);
+    const clearError = (0, react_1.useCallback)(() => {
+        setRenderError(null);
+    }, []);
+    const compositionRenderErrorContextValue = (0, react_1.useMemo)(() => ({ setError: setRenderError, clearError }), [clearError]);
+    const renderErrorContextValue = (0, react_1.useMemo)(() => ({ error: renderError }), [renderError]);
     return (jsx_runtime_1.jsx(z_index_1.HigherZIndex, { onEscape: noop_1.noop, onOutsideClick: noop_1.noop, children: jsx_runtime_1.jsxs(timeline_zoom_1.TimelineZoomContext, { children: [
                 jsx_runtime_1.jsxs(remotion_1.Internals.CurrentScaleContext.Provider, { value: value, children: [
-                        jsx_runtime_1.jsx(ForceSpecificCursor_1.ForceSpecificCursor, {}), jsx_runtime_1.jsxs("div", { style: background, children: [canvasMounted ? jsx_runtime_1.jsx(MemoRoot, {}) : null, jsx_runtime_1.jsxs(remotion_1.Internals.CanUseRemotionHooksProvider, { children: [
-                                        jsx_runtime_1.jsx(EditorContent_1.EditorContent, { readOnlyStudio: readOnlyStudio, children: jsx_runtime_1.jsx(TopPanel_1.TopPanel, { drawRef: canvas_ref_1.drawRef, bufferStateDelayInMilliseconds: exports.BUFFER_STATE_DELAY_IN_MILLISECONDS, onMounted: onMounted, readOnlyStudio: readOnlyStudio }) }), jsx_runtime_1.jsx(GlobalKeybindings_1.GlobalKeybindings, {})
+                        jsx_runtime_1.jsx(ForceSpecificCursor_1.ForceSpecificCursor, {}), jsx_runtime_1.jsxs("div", { style: background, children: [
+                                jsx_runtime_1.jsx(remotion_1.Internals.CompositionRenderErrorContext.Provider, { value: compositionRenderErrorContextValue, children: canvasMounted ? jsx_runtime_1.jsx(MemoRoot, {}) : null }), jsx_runtime_1.jsxs(remotion_1.Internals.CanUseRemotionHooksProvider, { children: [
+                                        jsx_runtime_1.jsx(RenderErrorContext_1.RenderErrorContext.Provider, { value: renderErrorContextValue, children: jsx_runtime_1.jsx(EditorContent_1.EditorContent, { readOnlyStudio: readOnlyStudio, children: jsx_runtime_1.jsx(TopPanel_1.TopPanel, { drawRef: canvas_ref_1.drawRef, bufferStateDelayInMilliseconds: exports.BUFFER_STATE_DELAY_IN_MILLISECONDS, onMounted: onMounted, readOnlyStudio: readOnlyStudio }) }) }), jsx_runtime_1.jsx(GlobalKeybindings_1.GlobalKeybindings, {})
                                     ] })
                             ] })
                     ] }), jsx_runtime_1.jsx(Modals_1.Modals, { readOnlyStudio: readOnlyStudio }), jsx_runtime_1.jsx(NotificationCenter_1.NotificationCenter, {})

package/dist/components/MenuBuildIndicator.js

@@ -4,8 +4,11 @@ exports.MenuBuildIndicator = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const client_id_1 = require("../helpers/client-id");
+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 OpenEditorButton_1 = require("./OpenEditorButton");
+const MenuCompositionName_1 = require("./MenuCompositionName");
+const NotificationCenter_1 = require("./Notifications/NotificationCenter");
 const Spinner_1 = require("./Spinner");
 const cwd = {
     fontSize: 13,
@@ -25,10 +28,61 @@ const noSpinner = {
     position: 'relative',
     width: spinnerSize,
 };
+const projectNameLinkBase = {
+    color: 'inherit',
+    textDecoration: 'none',
+    cursor: 'pointer',
+    fontSize: 'inherit',
+    textUnderlineOffset: 2,
+};
+const projectNameLink = {
+    ...projectNameLinkBase,
+};
+const projectNameLinkHovered = {
+    ...projectNameLinkBase,
+    textDecoration: 'underline',
+};
 const MenuBuildIndicator = () => {
     const [isBuilding, setIsBuilding] = (0, react_1.useState)(false);
+    const [projectNameHovered, setProjectNameHovered] = (0, react_1.useState)(false);
     const ctx = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx).previewServerState;
-    const showButton = window.remotion_editorName && ctx.type === 'connected';
+    const showEditorLink = window.remotion_editorName && ctx.type === 'connected';
+    const showGitLink = !showEditorLink && Boolean(window.remotion_gitSource);
+    const handleProjectNameClick = (0, react_1.useCallback)(async () => {
+        if (showEditorLink) {
+            await (0, open_in_editor_1.openInEditor)({
+                originalFileName: `${window.remotion_cwd}`,
+                originalLineNumber: 1,
+                originalColumnNumber: 1,
+                originalFunctionName: null,
+                originalScriptCode: null,
+            })
+                .then((res) => res.json())
+                .then(({ success }) => {
+                if (!success) {
+                    (0, NotificationCenter_1.showNotification)(`Could not open ${window.remotion_editorName}`, 2000);
+                }
+            })
+                .catch((err) => {
+                // eslint-disable-next-line no-console
+                console.error(err);
+                (0, NotificationCenter_1.showNotification)(`Could not open ${window.remotion_editorName}`, 2000);
+            });
+        }
+        else if (showGitLink) {
+            window.open((0, get_git_menu_item_1.getGitSourceBranchUrl)(window.remotion_gitSource), '_blank');
+        }
+    }, [showEditorLink, showGitLink]);
+    const projectNameTitle = (0, react_1.useMemo)(() => {
+        if (showEditorLink) {
+            return `Open in ${window.remotion_editorName}`;
+        }
+        if (showGitLink) {
+            return `Open ${(0, get_git_menu_item_1.getGitSourceName)(window.remotion_gitSource)} Repo`;
+        }
+        return undefined;
+    }, [showEditorLink, showGitLink]);
+    const isClickable = showEditorLink || showGitLink;
     (0, react_1.useEffect)(() => {
         window.remotion_isBuilding = () => {
             setIsBuilding(true);
@@ -41,6 +95,7 @@ const MenuBuildIndicator = () => {
             window.remotion_finishedBuilding = undefined;
         };
     }, []);
-    return (jsx_runtime_1.jsxs("div", { style: cwd, title: window.remotion_cwd, children: [showButton ? jsx_runtime_1.jsx(layout_1.Spacing, { x: 2 }) : null, isBuilding ? (jsx_runtime_1.jsx("div", { style: spinner, children: jsx_runtime_1.jsx(Spinner_1.Spinner, { duration: 0.5, size: spinnerSize }) })) : (jsx_runtime_1.jsx("div", { style: noSpinner })), showButton ? jsx_runtime_1.jsx(layout_1.Spacing, { x: 0.5 }) : null, window.remotion_projectName, showButton ? jsx_runtime_1.jsx(layout_1.Spacing, { x: 0.25 }) : null, showButton ? (jsx_runtime_1.jsx(OpenEditorButton_1.OpenEditorButton, { type: "editor" })) : window.remotion_gitSource ? (jsx_runtime_1.jsx(OpenEditorButton_1.OpenEditorButton, { type: "git" })) : null] }));
+    return (jsx_runtime_1.jsxs("div", { style: cwd, title: window.remotion_cwd, children: [isClickable ? jsx_runtime_1.jsx(layout_1.Spacing, { x: 2 }) : null, isBuilding ? (jsx_runtime_1.jsx("div", { style: spinner, children: jsx_runtime_1.jsx(Spinner_1.Spinner, { duration: 0.5, size: spinnerSize }) })) : (jsx_runtime_1.jsx("div", { style: noSpinner })), isClickable ? jsx_runtime_1.jsx(layout_1.Spacing, { x: 0.5 }) : null, isClickable ? (jsx_runtime_1.jsx("a", { style: projectNameHovered ? projectNameLinkHovered : projectNameLink, title: projectNameTitle, onClick: handleProjectNameClick, onPointerEnter: () => setProjectNameHovered(true), onPointerLeave: () => setProjectNameHovered(false), children: window.remotion_projectName })) : (window.remotion_projectName), jsx_runtime_1.jsx(MenuCompositionName_1.MenuCompositionName, {})
+        ] }));
 };
 exports.MenuBuildIndicator = MenuBuildIndicator;

package/dist/components/MenuCompositionName.d.ts

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

package/dist/components/MenuCompositionName.js

@@ -0,0 +1,80 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MenuCompositionName = 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 colors_1 = require("../helpers/colors");
+const open_in_editor_1 = require("../helpers/open-in-editor");
+const NotificationCenter_1 = require("./Notifications/NotificationCenter");
+const use_resolved_stack_1 = require("./Timeline/use-resolved-stack");
+const baseStyle = {
+    color: 'inherit',
+    textDecoration: 'none',
+    fontSize: 'inherit',
+    textUnderlineOffset: 2,
+};
+const compositionNameStyle = {
+    ...baseStyle,
+    cursor: 'default',
+};
+const clickableStyle = {
+    ...baseStyle,
+    cursor: 'pointer',
+};
+const clickableHoveredStyle = {
+    ...clickableStyle,
+    textDecoration: 'underline',
+};
+const slashStyle = {
+    color: colors_1.LIGHT_TEXT,
+    marginInline: 4,
+    position: 'relative',
+    top: 1,
+};
+const MenuCompositionName = () => {
+    var _a;
+    const { canvasContent, compositions } = (0, react_1.useContext)(remotion_1.Internals.CompositionManager);
+    const connectionStatus = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx)
+        .previewServerState.type;
+    const [opening, setOpening] = (0, react_1.useState)(false);
+    const [hovered, setHovered] = (0, react_1.useState)(false);
+    const composition = (0, react_1.useMemo)(() => {
+        var _a;
+        if (canvasContent === null || canvasContent.type !== 'composition') {
+            return null;
+        }
+        return ((_a = compositions.find((c) => c.id === canvasContent.compositionId)) !== null && _a !== void 0 ? _a : null);
+    }, [canvasContent, compositions]);
+    const resolvedLocation = (0, use_resolved_stack_1.useResolvedStack)((_a = composition === null || composition === void 0 ? void 0 : composition.stack) !== null && _a !== void 0 ? _a : null);
+    const canOpen = resolvedLocation &&
+        window.remotion_editorName &&
+        connectionStatus === 'connected';
+    const handleClick = (0, react_1.useCallback)(async () => {
+        if (!canOpen || !resolvedLocation) {
+            return;
+        }
+        setOpening(true);
+        try {
+            await (0, open_in_editor_1.openOriginalPositionInEditor)(resolvedLocation);
+        }
+        catch (err) {
+            (0, NotificationCenter_1.showNotification)(err.message, 2000);
+        }
+        finally {
+            setOpening(false);
+        }
+    }, [canOpen, resolvedLocation]);
+    if (!composition) {
+        return null;
+    }
+    return (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
+            jsx_runtime_1.jsx("span", { style: slashStyle, children: "/" }), jsx_runtime_1.jsx("a", { style: canOpen && !opening
+                    ? hovered
+                        ? clickableHoveredStyle
+                        : clickableStyle
+                    : compositionNameStyle, title: canOpen ? `Open in ${window.remotion_editorName}` : composition.id, onClick: handleClick, onPointerEnter: () => setHovered(true), onPointerLeave: () => setHovered(false), children: composition.id })
+        ] }));
+};
+exports.MenuCompositionName = MenuCompositionName;

package/dist/components/RenderErrorContext.d.ts

@@ -0,0 +1,4 @@
+export type RenderErrorContextType = {
+    error: Error | null;
+};
+export declare const RenderErrorContext: import("react").Context<RenderErrorContextType>;

package/dist/components/RenderErrorContext.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.RenderErrorContext = void 0;
+const react_1 = require("react");
+exports.RenderErrorContext = (0, react_1.createContext)({
+    error: null,
+});

package/dist/components/RenderModal/RenderModalJSONPropsEditor.js

@@ -112,11 +112,13 @@ const RenderModalJSONPropsEditor = ({ setValue, value, defaultProps, onSave, ser
         };
     }, [subscribeToEvent, compositionId, schema]);
     (0, react_1.useEffect)(() => {
-        if (localValue.validJSON && (0, deep_equal_1.deepEqual)(value, localValue.value)) {
-            return;
-        }
-        setLocalValue(parseJS(value, schema));
-    }, [value, schema, localValue]);
+        setLocalValue((prev) => {
+            if (prev.validJSON && (0, deep_equal_1.deepEqual)(value, prev.value)) {
+                return prev;
+            }
+            return parseJS(value, schema);
+        });
+    }, [value, schema]);
     const onPretty = (0, react_1.useCallback)(() => {
         if (!localValue.validJSON) {
             return;

package/dist/components/RenderModal/SchemaEditor/SchemaEditor.js

@@ -7,6 +7,7 @@ const is_menu_item_1 = require("../../Menu/is-menu-item");
 const SchemaErrorMessages_1 = require("./SchemaErrorMessages");
 const scroll_to_default_props_path_1 = require("./scroll-to-default-props-path");
 const zod_schema_type_1 = require("./zod-schema-type");
+const ZodDiscriminatedUnionEditor_1 = require("./ZodDiscriminatedUnionEditor");
 const ZodObjectEditor_1 = require("./ZodObjectEditor");
 const scrollable = {
     display: 'flex',
@@ -19,9 +20,12 @@ const SchemaEditor = ({ schema, value, setValue }) => {
         throw new Error('expected zod');
     }
     const typeName = (0, zod_schema_type_1.getZodSchemaType)(schema);
-    if (typeName !== 'object') {
+    if (typeName !== 'object' && typeName !== 'discriminatedUnion') {
         return jsx_runtime_1.jsx(SchemaErrorMessages_1.TopLevelZodValue, { typeReceived: typeName });
     }
+    if (typeName === 'discriminatedUnion') {
+        return (jsx_runtime_1.jsx("div", { ref: scroll_to_default_props_path_1.defaultPropsEditorScrollableAreaRef, style: scrollable, className: is_menu_item_1.VERTICAL_SCROLLBAR_CLASSNAME, children: jsx_runtime_1.jsx(ZodDiscriminatedUnionEditor_1.ZodDiscriminatedUnionEditor, { schema: schema, setValue: setValue, value: value, mayPad: true, jsonPath: [], onRemove: null }) }));
+    }
     return (jsx_runtime_1.jsx("div", { ref: scroll_to_default_props_path_1.defaultPropsEditorScrollableAreaRef, style: scrollable, className: is_menu_item_1.VERTICAL_SCROLLBAR_CLASSNAME, children: jsx_runtime_1.jsx(ZodObjectEditor_1.ZodObjectEditor, { discriminatedUnionReplacement: null, value: value, setValue: setValue, jsonPath: [], schema: schema, onRemove: null, mayPad: true }) }));
 };
 exports.SchemaEditor = SchemaEditor;

package/dist/components/RenderModal/SchemaEditor/SchemaErrorMessages.js

@@ -78,9 +78,11 @@ const InvalidSchema = ({ zodValidationResult }) => {
 exports.InvalidSchema = InvalidSchema;
 const TopLevelZodValue = ({ typeReceived }) => {
     return (jsx_runtime_1.jsxs("div", { style: explainer, children: [
-            jsx_runtime_1.jsxs("div", { style: errorExplanation, children: ["The top-level type of the schema must be a pure", ' ', jsx_runtime_1.jsx("code", { style: codeSnippet, children: "z.object" }),
-                    ". Instead got a schema of type", ' ', jsx_runtime_1.jsx("code", { style: codeSnippet, children: typeReceived })
-                ] }), jsx_runtime_1.jsx(layout_1.Spacing, { y: 1 }), jsx_runtime_1.jsx("div", { style: errorExplanation, children: "Fix the schema by changing the top-level Zod type to an object." }), jsx_runtime_1.jsx(layout_1.Spacing, { y: 2, block: true }), jsx_runtime_1.jsx(Button_1.Button, { onClick: openDocs, children: "Learn more" })
+            jsx_runtime_1.jsxs("div", { style: errorExplanation, children: ["The top-level type of the schema must be", ' ', jsx_runtime_1.jsx("code", { style: codeSnippet, children: "z.object()" }),
+                    " or", ' ', jsx_runtime_1.jsx("code", { style: codeSnippet, children: "z.discriminatedUnion()" }),
+                    ". Instead got a schema of type ",
+                    jsx_runtime_1.jsx("code", { style: codeSnippet, children: typeReceived })
+                ] }), jsx_runtime_1.jsx(layout_1.Spacing, { y: 1 }), jsx_runtime_1.jsx("div", { style: errorExplanation, children: "Fix the schema by changing the top-level Zod type to an object or discriminated union." }), jsx_runtime_1.jsx(layout_1.Spacing, { y: 2, block: true }), jsx_runtime_1.jsx(Button_1.Button, { onClick: openDocs, children: "Learn more" })
         ] }));
 };
 exports.TopLevelZodValue = TopLevelZodValue;

package/dist/components/Timeline/TimelineListItem.js

@@ -7,7 +7,10 @@ const remotion_1 = require("remotion");
 const client_id_1 = require("../../helpers/client-id");
 const colors_1 = require("../../helpers/colors");
 const timeline_layout_1 = require("../../helpers/timeline-layout");
+const call_api_1 = require("../call-api");
+const ContextMenu_1 = require("../ContextMenu");
 const ExpandedTracksProvider_1 = require("../ExpandedTracksProvider");
+const NotificationCenter_1 = require("../Notifications/NotificationCenter");
 const TimelineExpandedSection_1 = require("./TimelineExpandedSection");
 const TimelineLayerEye_1 = require("./TimelineLayerEye");
 const TimelineStack_1 = require("./TimelineStack");
@@ -39,13 +42,73 @@ const arrowButton = {
 const TimelineListItem = ({ nestedDepth, sequence, isCompact }) => {
     var _a, _b;
     const { previewServerState } = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx);
-    const visualModeEnabled = Boolean(process.env.EXPERIMENTAL_VISUAL_MODE_ENABLED) &&
-        previewServerState.type === 'connected';
+    const visualModeEnvEnabled = Boolean(process.env.EXPERIMENTAL_VISUAL_MODE_ENABLED);
+    const previewConnected = previewServerState.type === 'connected';
+    const visualModeActive = visualModeEnvEnabled && previewConnected;
     const { hidden, setHidden } = (0, react_1.useContext)(remotion_1.Internals.SequenceVisibilityToggleContext);
     const { expandedTracks, toggleTrack } = (0, react_1.useContext)(ExpandedTracksProvider_1.ExpandedTracksContext);
     const originalLocation = (0, use_resolved_stack_1.useResolvedStack)((_a = sequence.stack) !== null && _a !== void 0 ? _a : null);
-    const nodePath = (0, use_sequence_props_subscription_1.useSequencePropsSubscription)(sequence, originalLocation);
-    const isExpanded = visualModeEnabled && ((_b = expandedTracks[sequence.id]) !== null && _b !== void 0 ? _b : false);
+    const nodePath = (0, use_sequence_props_subscription_1.useSequencePropsSubscription)(sequence, originalLocation, visualModeActive);
+    const validatedLocation = (0, react_1.useMemo)(() => {
+        var _a;
+        if (!originalLocation ||
+            !originalLocation.source ||
+            !originalLocation.line) {
+            return null;
+        }
+        return {
+            source: originalLocation.source,
+            line: originalLocation.line,
+            column: (_a = originalLocation.column) !== null && _a !== void 0 ? _a : 0,
+        };
+    }, [originalLocation]);
+    const canDeleteFromSource = Boolean(nodePath && (validatedLocation === null || validatedLocation === void 0 ? void 0 : validatedLocation.source));
+    const deleteDisabled = (0, react_1.useMemo)(() => !previewConnected || !sequence.controls || !canDeleteFromSource, [previewConnected, sequence.controls, canDeleteFromSource]);
+    const onDeleteSequenceFromSource = (0, react_1.useCallback)(async () => {
+        if (!(validatedLocation === null || validatedLocation === void 0 ? void 0 : validatedLocation.source) || !nodePath) {
+            return;
+        }
+        try {
+            const result = await (0, call_api_1.callApi)('/api/delete-jsx-node', {
+                fileName: validatedLocation.source,
+                nodePath,
+            });
+            if (result.success) {
+                (0, NotificationCenter_1.showNotification)('Removed sequence from source file', 2000);
+            }
+            else {
+                (0, NotificationCenter_1.showNotification)(result.reason, 4000);
+            }
+        }
+        catch (err) {
+            (0, NotificationCenter_1.showNotification)(err.message, 4000);
+        }
+    }, [nodePath, validatedLocation === null || validatedLocation === void 0 ? void 0 : validatedLocation.source]);
+    const contextMenuValues = (0, react_1.useMemo)(() => {
+        if (!visualModeEnvEnabled) {
+            return [];
+        }
+        return [
+            {
+                type: 'item',
+                id: 'delete-sequence',
+                keyHint: null,
+                label: 'Delete',
+                leftItem: null,
+                disabled: deleteDisabled,
+                onClick: () => {
+                    if (deleteDisabled) {
+                        return;
+                    }
+                    onDeleteSequenceFromSource();
+                },
+                quickSwitcherLabel: null,
+                subMenu: null,
+                value: 'delete-sequence',
+            },
+        ];
+    }, [deleteDisabled, onDeleteSequenceFromSource, visualModeEnvEnabled]);
+    const isExpanded = visualModeActive && ((_b = expandedTracks[sequence.id]) !== null && _b !== void 0 ? _b : false);
     const onToggleExpand = (0, react_1.useCallback)(() => {
         toggleTrack(sequence.id);
     }, [sequence.id, toggleTrack]);
@@ -87,9 +150,9 @@ const TimelineListItem = ({ nestedDepth, sequence, isCompact }) => {
             transform: isExpanded ? 'rotate(90deg)' : 'rotate(0deg)',
         };
     }, [isExpanded]);
-    return (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
-            jsx_runtime_1.jsxs("div", { style: outer, children: [
-                    jsx_runtime_1.jsx(TimelineLayerEye_1.TimelineLayerEye, { type: sequence.type === 'audio' ? 'speaker' : 'eye', hidden: isItemHidden, onInvoked: onToggleVisibility }), jsx_runtime_1.jsx("div", { style: padder }), sequence.parent && nestedDepth > 0 ? jsx_runtime_1.jsx("div", { style: space }) : null, visualModeEnabled ? (sequence.controls ? (jsx_runtime_1.jsx("button", { type: "button", style: arrowStyle, onClick: onToggleExpand, "aria-expanded": isExpanded, "aria-label": `${isExpanded ? 'Collapse' : 'Expand'} track`, children: jsx_runtime_1.jsx("svg", { width: "12", height: "12", viewBox: "0 0 8 8", style: { display: 'block' }, children: jsx_runtime_1.jsx("path", { d: "M2 1L6 4L2 7Z", fill: "white" }) }) })) : (jsx_runtime_1.jsx("div", { style: arrowButton }))) : null, jsx_runtime_1.jsx(TimelineStack_1.TimelineStack, { sequence: sequence, isCompact: isCompact, originalLocation: originalLocation })
-                ] }), visualModeEnabled && isExpanded && sequence.controls ? (jsx_runtime_1.jsx(TimelineExpandedSection_1.TimelineExpandedSection, { sequence: sequence, originalLocation: originalLocation, nestedDepth: nestedDepth, nodePath: nodePath })) : null] }));
+    const trackRow = (jsx_runtime_1.jsxs("div", { style: outer, children: [
+            jsx_runtime_1.jsx(TimelineLayerEye_1.TimelineLayerEye, { type: sequence.type === 'audio' ? 'speaker' : 'eye', hidden: isItemHidden, onInvoked: onToggleVisibility }), jsx_runtime_1.jsx("div", { style: padder }), sequence.parent && nestedDepth > 0 ? jsx_runtime_1.jsx("div", { style: space }) : null, visualModeActive ? (sequence.controls ? (jsx_runtime_1.jsx("button", { type: "button", style: arrowStyle, onClick: onToggleExpand, "aria-expanded": isExpanded, "aria-label": `${isExpanded ? 'Collapse' : 'Expand'} track`, children: jsx_runtime_1.jsx("svg", { width: "12", height: "12", viewBox: "0 0 8 8", style: { display: 'block' }, children: jsx_runtime_1.jsx("path", { d: "M2 1L6 4L2 7Z", fill: "white" }) }) })) : (jsx_runtime_1.jsx("div", { style: arrowButton }))) : null, jsx_runtime_1.jsx(TimelineStack_1.TimelineStack, { sequence: sequence, isCompact: isCompact, originalLocation: originalLocation })
+        ] }));
+    return (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [visualModeEnvEnabled ? (jsx_runtime_1.jsx(ContextMenu_1.ContextMenu, { values: contextMenuValues, children: trackRow })) : (trackRow), visualModeActive && isExpanded && sequence.controls ? (jsx_runtime_1.jsx(TimelineExpandedSection_1.TimelineExpandedSection, { sequence: sequence, originalLocation: originalLocation, nestedDepth: nestedDepth, nodePath: nodePath })) : null] }));
 };
 exports.TimelineListItem = TimelineListItem;

package/dist/components/Timeline/TimelineRotationField.js

@@ -5,7 +5,18 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const InputDragger_1 = require("../NewComposition/InputDragger");
 const timeline_field_utils_1 = require("./timeline-field-utils");
+const unitPattern = /^([+-]?(?:\d+\.?\d*|\.\d+))(deg|rad|turn|grad)$/;
+const unitToDegrees = {
+    deg: 1,
+    rad: 180 / Math.PI,
+    turn: 360,
+    grad: 360 / 400,
+};
 const parseCssRotationToDegrees = (value) => {
+    const match = value.trim().match(unitPattern);
+    if (match) {
+        return Number(match[1]) * unitToDegrees[match[2]];
+    }
     try {
         const m = new DOMMatrix(`rotate(${value})`);
         return Math.round(Math.atan2(m.b, m.a) * (180 / Math.PI) * 1e6) / 1e6;

package/dist/components/Timeline/TimelineSequence.js

@@ -107,7 +107,7 @@ const Inner = ({ s, windowWidth }) => {
 						)`,
                     position: 'absolute',
                     right: 0,
-                } })) : null, s.type === 'audio' ? (jsx_runtime_1.jsx(AudioWaveform_1.AudioWaveform, { src: s.src, doesVolumeChange: s.doesVolumeChange, visualizationWidth: width, startFrom: s.startMediaFrom, durationInFrames: s.duration, volume: s.volume, playbackRate: s.playbackRate })) : null, s.type === 'video' ? (jsx_runtime_1.jsx(TimelineVideoInfo_1.TimelineVideoInfo, { src: s.src, visualizationWidth: width, naturalWidth: naturalWidth, trimBefore: s.startMediaFrom, durationInFrames: s.duration, playbackRate: s.playbackRate })) : null, s.type === 'image' ? (jsx_runtime_1.jsx(TimelineImageInfo_1.TimelineImageInfo, { src: s.src, visualizationWidth: width })) : null, s.loopDisplay === undefined ? null : (jsx_runtime_1.jsx(LoopedTimelineIndicators_1.LoopedTimelineIndicator, { loops: s.loopDisplay.numberOfTimes })), s.type !== 'audio' &&
+                } })) : null, s.type === 'audio' ? (jsx_runtime_1.jsx(AudioWaveform_1.AudioWaveform, { src: s.src, doesVolumeChange: s.doesVolumeChange, visualizationWidth: width, startFrom: s.startMediaFrom, durationInFrames: s.duration, volume: s.volume, playbackRate: s.playbackRate })) : null, s.type === 'video' ? (jsx_runtime_1.jsx(TimelineVideoInfo_1.TimelineVideoInfo, { src: s.src, visualizationWidth: width, naturalWidth: naturalWidth, trimBefore: s.startMediaFrom, durationInFrames: s.duration, playbackRate: s.playbackRate, volume: s.volume, doesVolumeChange: s.doesVolumeChange, premountWidth: premountWidth !== null && premountWidth !== void 0 ? premountWidth : 0, postmountWidth: postmountWidth !== null && postmountWidth !== void 0 ? postmountWidth : 0 })) : null, s.type === 'image' ? (jsx_runtime_1.jsx(TimelineImageInfo_1.TimelineImageInfo, { src: s.src, visualizationWidth: width })) : null, s.loopDisplay === undefined ? null : (jsx_runtime_1.jsx(LoopedTimelineIndicators_1.LoopedTimelineIndicator, { loops: s.loopDisplay.numberOfTimes })), s.type !== 'audio' &&
                 s.type !== 'video' &&
                 s.type !== 'image' &&
                 s.loopDisplay === undefined &&

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

@@ -149,7 +149,8 @@ const TimelineStack = ({ isCompact, sequence, originalLocation }) => {
             color: opening && isCompact ? colors_1.VERY_LIGHT_TEXT : colors_1.LIGHT_COLOR,
             userSelect: 'none',
             WebkitUserSelect: 'none',
-            borderBottom: hoverEffect ? '1px solid #fff' : 'none',
+            textDecoration: hoverEffect ? 'underline' : 'none',
+            textUnderlineOffset: 2,
             cursor: hoverEffect ? 'pointer' : undefined,
         };
     }, [titleHoverable, isCompact, opening, titleHovered]);

package/dist/components/Timeline/TimelineVideoInfo.d.ts

@@ -6,4 +6,8 @@ export declare const TimelineVideoInfo: React.FC<{
     readonly trimBefore: number;
     readonly durationInFrames: number;
     readonly playbackRate: number;
+    readonly volume: string | number;
+    readonly doesVolumeChange: boolean;
+    readonly premountWidth: number;
+    readonly postmountWidth: number;
 }>;

package/dist/components/Timeline/TimelineVideoInfo.js

@@ -8,21 +8,27 @@ const extract_frames_1 = require("../../helpers/extract-frames");
 const frame_database_1 = require("../../helpers/frame-database");
 const resize_video_frame_1 = require("../../helpers/resize-video-frame");
 const timeline_layout_1 = require("../../helpers/timeline-layout");
-const HEIGHT = (0, timeline_layout_1.getTimelineLayerHeight)('video') - 2;
-const containerStyle = {
-    height: HEIGHT,
+const AudioWaveform_1 = require("../AudioWaveform");
+const FILMSTRIP_HEIGHT = timeline_layout_1.TIMELINE_LAYER_HEIGHT_IMAGE - 2;
+const outerStyle = {
+    width: '100%',
+    height: '100%',
+    display: 'flex',
+    flexDirection: 'column',
+};
+const filmstripContainerStyle = {
+    height: FILMSTRIP_HEIGHT,
     width: '100%',
     backgroundColor: 'rgba(0, 0, 0, 0.3)',
     display: 'flex',
     borderTopLeftRadius: 2,
-    borderBottomLeftRadius: 2,
     fontSize: 10,
     fontFamily: 'Arial, Helvetica',
 };
 const WEBCODECS_TIMESCALE = 1000000;
 const MAX_TIME_DEVIATION = WEBCODECS_TIMESCALE * 0.05;
 const getDurationOfOneFrame = ({ visualizationWidth, aspectRatio, segmentDuration, }) => {
-    const framesFitInWidthUnrounded = visualizationWidth / (HEIGHT * aspectRatio);
+    const framesFitInWidthUnrounded = visualizationWidth / (FILMSTRIP_HEIGHT * aspectRatio);
     return (segmentDuration / framesFitInWidthUnrounded) * WEBCODECS_TIMESCALE;
 };
 const fixRounding = (value) => {
@@ -32,7 +38,7 @@ const fixRounding = (value) => {
     return Math.floor(value);
 };
 const calculateTimestampSlots = ({ visualizationWidth, fromSeconds, segmentDuration, aspectRatio, }) => {
-    const framesFitInWidthUnrounded = visualizationWidth / (HEIGHT * aspectRatio);
+    const framesFitInWidthUnrounded = visualizationWidth / (FILMSTRIP_HEIGHT * aspectRatio);
     const framesFitInWidth = Math.ceil(framesFitInWidthUnrounded);
     const durationOfOneFrame = getDurationOfOneFrame({
         visualizationWidth,
@@ -70,8 +76,10 @@ const drawSlot = ({ frame, ctx, filledSlots, visualizationWidth, timestamp, segm
     });
     const relativeTimestamp = timestamp - fromSeconds * WEBCODECS_TIMESCALE;
     const frameIndex = relativeTimestamp / durationOfOneFrame;
-    const left = Math.floor((frameIndex * frame.displayWidth) / window.devicePixelRatio); // round to avoid antialiasing
-    ctx.drawImage(frame, left, 0, frame.displayWidth / window.devicePixelRatio, frame.displayHeight / window.devicePixelRatio);
+    const thumbnailWidth = frame.displayWidth / window.devicePixelRatio;
+    const left = Math.floor(frameIndex * thumbnailWidth);
+    const right = Math.ceil((frameIndex + 1) * thumbnailWidth);
+    ctx.drawImage(frame, left, 0, right - left, frame.displayHeight / window.devicePixelRatio);
     filledSlots.set(timestamp, frame.timestamp);
 };
 const fillWithCachedFrames = ({ ctx, naturalWidth, filledSlots, src, segmentDuration, fromSeconds, }) => {
@@ -138,16 +146,11 @@ const fillFrameWhereItFits = ({ frame, filledSlots, ctx, visualizationWidth, seg
         });
     }
 };
-const TimelineVideoInfo = ({ src, visualizationWidth, naturalWidth, trimBefore, durationInFrames, playbackRate, }) => {
+const TimelineVideoInfo = ({ src, visualizationWidth, naturalWidth, trimBefore, durationInFrames, playbackRate, volume, doesVolumeChange, premountWidth, postmountWidth, }) => {
     const { fps } = (0, remotion_1.useVideoConfig)();
     const ref = (0, react_1.useRef)(null);
     const [error, setError] = (0, react_1.useState)(null);
     const aspectRatio = (0, react_1.useRef)((0, frame_database_1.getAspectRatioFromCache)(src));
-    (0, react_1.useEffect)(() => {
-        return () => {
-            (0, frame_database_1.clearFramesForSrc)(src);
-        };
-    }, [src]);
     // for rendering frames
     (0, react_1.useEffect)(() => {
         if (error) {
@@ -160,7 +163,7 @@ const TimelineVideoInfo = ({ src, visualizationWidth, naturalWidth, trimBefore,
         const controller = new AbortController();
         const canvas = document.createElement('canvas');
         canvas.width = visualizationWidth;
-        canvas.height = HEIGHT;
+        canvas.height = FILMSTRIP_HEIGHT;
         const ctx = canvas.getContext('2d');
         if (!ctx) {
             return;
@@ -193,11 +196,9 @@ const TimelineVideoInfo = ({ src, visualizationWidth, naturalWidth, trimBefore,
             if (unfilled.length === 0) {
                 return () => {
                     current.removeChild(canvas);
-                    (0, frame_database_1.clearOldFrames)();
                 };
             }
         }
-        (0, frame_database_1.clearOldFrames)();
         (0, extract_frames_1.extractFrames)({
             timestampsInSeconds: ({ track, }) => {
                 aspectRatio.current = track.width / track.height;
@@ -216,7 +217,7 @@ const TimelineVideoInfo = ({ src, visualizationWidth, naturalWidth, trimBefore,
                 let frame;
                 try {
                     frame = sample.toVideoFrame();
-                    const scale = (HEIGHT / frame.displayHeight) * window.devicePixelRatio;
+                    const scale = (FILMSTRIP_HEIGHT / frame.displayHeight) * window.devicePixelRatio;
                     const transformed = (0, resize_video_frame_1.resizeVideoFrame)({
                         frame,
                         scale,
@@ -226,14 +227,7 @@ const TimelineVideoInfo = ({ src, visualizationWidth, naturalWidth, trimBefore,
                     }
                     frame = undefined;
                     const databaseKey = (0, frame_database_1.makeFrameDatabaseKey)(src, transformed.timestamp);
-                    const existingFrame = frame_database_1.frameDatabase.get(databaseKey);
-                    if (existingFrame) {
-                        existingFrame.frame.close();
-                    }
-                    frame_database_1.frameDatabase.set(databaseKey, {
-                        frame: transformed,
-                        lastUsed: Date.now(),
-                    });
+                    (0, frame_database_1.addFrameToCache)(databaseKey, transformed);
                     if (aspectRatio.current === null) {
                         throw new Error('Aspect ratio is not set');
                     }
@@ -280,9 +274,6 @@ const TimelineVideoInfo = ({ src, visualizationWidth, naturalWidth, trimBefore,
         })
             .catch((e) => {
             setError(e);
-        })
-            .finally(() => {
-            (0, frame_database_1.clearOldFrames)();
         });
         return () => {
             controller.abort();
@@ -298,6 +289,17 @@ const TimelineVideoInfo = ({ src, visualizationWidth, naturalWidth, trimBefore,
         trimBefore,
         visualizationWidth,
     ]);
-    return jsx_runtime_1.jsx("div", { ref: ref, style: containerStyle });
+    const audioWidth = visualizationWidth - premountWidth - postmountWidth;
+    const audioStyle = (0, react_1.useMemo)(() => {
+        return {
+            height: timeline_layout_1.TIMELINE_LAYER_HEIGHT_AUDIO,
+            width: audioWidth,
+            position: 'relative',
+            marginLeft: premountWidth,
+        };
+    }, [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 }) })
+        ] }));
 };
 exports.TimelineVideoInfo = TimelineVideoInfo;

package/dist/components/Timeline/use-sequence-props-subscription.d.ts

@@ -1,4 +1,4 @@
 import type { SequenceNodePath } from '@remotion/studio-shared';
 import type { TSequence } from 'remotion';
 import type { OriginalPosition } from '../../error-overlay/react-overlay/utils/get-source-map';
-export declare const useSequencePropsSubscription: (sequence: TSequence, originalLocation: OriginalPosition | null) => SequenceNodePath | null;
+export declare const useSequencePropsSubscription: (sequence: TSequence, originalLocation: OriginalPosition | null, visualModeEnabled: boolean) => SequenceNodePath | null;