@remotion/studio 4.0.454 → 4.0.456

package/dist/components/CompSelectorRef.js

@@ -4,14 +4,16 @@ exports.CompSelectorRef = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const remotion_1 = require("remotion");
+const create_folder_tree_1 = require("../helpers/create-folder-tree");
 const persist_open_folders_1 = require("../helpers/persist-open-folders");
+const folders_1 = require("../state/folders");
 const InitialCompositionLoader_1 = require("./InitialCompositionLoader");
 const CompSelectorRef = ({ children }) => {
     const { compositions } = (0, react_1.useContext)(remotion_1.Internals.CompositionManager);
-    const [foldersExpanded, setFoldersExpanded] = (0, react_1.useState)((0, persist_open_folders_1.loadExpandedFolders)('compositions'));
+    const { compositionFoldersExpanded, setCompositionFoldersExpanded } = (0, react_1.useContext)(folders_1.FolderContext);
     const selectComposition = (0, InitialCompositionLoader_1.useSelectComposition)();
     const toggleFolder = (0, react_1.useCallback)((folderName, parentName) => {
-        setFoldersExpanded((p) => {
+        setCompositionFoldersExpanded((p) => {
             var _a;
             const key = (0, persist_open_folders_1.openFolderKey)({ folderName, parentName });
             const prev = (_a = p[key]) !== null && _a !== void 0 ? _a : false;
@@ -22,7 +24,7 @@ const CompSelectorRef = ({ children }) => {
             (0, persist_open_folders_1.persistExpandedFolders)('compositions', foldersExpandedState);
             return foldersExpandedState;
         });
-    }, []);
+    }, [setCompositionFoldersExpanded]);
     (0, react_1.useImperativeHandle)(remotion_1.Internals.compositionSelectorRef, () => {
         return {
             expandComposition: (compName) => {
@@ -34,25 +36,13 @@ const CompSelectorRef = ({ children }) => {
                 if (folderName === null) {
                     return;
                 }
-                setFoldersExpanded((previousState) => {
+                setCompositionFoldersExpanded((previousState) => {
+                    const keysToExpand = (0, create_folder_tree_1.getKeysToExpand)(folderName, parentFolderName);
                     const foldersExpandedState = {
                         ...previousState,
                     };
-                    const currentFolder = folderName;
-                    const currentParentName = parentFolderName;
-                    const key = (0, persist_open_folders_1.openFolderKey)({
-                        folderName: currentFolder,
-                        parentName: currentParentName,
-                    });
-                    const splitted = key.split('/');
-                    for (let i = 0; i < splitted.length - 1; i++) {
-                        const allExceptLast = i === 0
-                            ? (0, persist_open_folders_1.openFolderKey)({
-                                folderName: splitted.filter((s) => s !== 'no-parent')[0],
-                                parentName: null,
-                            })
-                            : splitted.slice(0, i + 1).join('/');
-                        foldersExpandedState[allExceptLast] = true;
+                    for (const key of keysToExpand) {
+                        foldersExpandedState[key] = true;
                     }
                     (0, persist_open_folders_1.persistExpandedFolders)('compositions', foldersExpandedState);
                     return foldersExpandedState;
@@ -69,14 +59,22 @@ const CompSelectorRef = ({ children }) => {
                 toggleFolder(folderName, parentName);
             },
         };
-    }, [compositions, selectComposition, toggleFolder]);
+    }, [
+        compositions,
+        selectComposition,
+        setCompositionFoldersExpanded,
+        toggleFolder,
+    ]);
     const contextValue = (0, react_1.useMemo)(() => {
         return {
-            foldersExpanded,
-            setFoldersExpanded,
+            foldersExpanded: compositionFoldersExpanded,
+            setFoldersExpanded: (foldersExpanded) => {
+                setCompositionFoldersExpanded(foldersExpanded);
+                (0, persist_open_folders_1.persistExpandedFolders)('compositions', foldersExpanded);
+            },
             toggleFolder,
         };
-    }, [foldersExpanded, setFoldersExpanded, toggleFolder]);
+    }, [compositionFoldersExpanded, setCompositionFoldersExpanded, toggleFolder]);
     return (jsx_runtime_1.jsx(persist_open_folders_1.ExpandedFoldersContext.Provider, { value: contextValue, children: children }));
 };
 exports.CompSelectorRef = CompSelectorRef;

package/dist/components/CompositionSelector.d.ts

@@ -3,5 +3,4 @@ export declare const useCompositionNavigation: () => {
     navigateToNextComposition: () => void;
     navigateToPreviousComposition: () => void;
 };
-export declare const getKeysToExpand: (initialFolderName: string, parentFolderName: string | null, initial?: string[]) => string[];
 export declare const CompositionSelector: React.FC;

package/dist/components/CompositionSelector.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.CompositionSelector = exports.getKeysToExpand = exports.useCompositionNavigation = void 0;
+exports.CompositionSelector = exports.useCompositionNavigation = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const remotion_1 = require("remotion");
@@ -82,18 +82,6 @@ const shortcutLabel = {
     fontSize: 11,
     opacity: 0.6,
 };
-const getKeysToExpand = (initialFolderName, parentFolderName, initial = []) => {
-    initial.push((0, persist_open_folders_1.openFolderKey)({
-        folderName: initialFolderName,
-        parentName: parentFolderName,
-    }));
-    const { name, parent } = (0, create_folder_tree_1.splitParentIntoNameAndParent)(parentFolderName);
-    if (!name) {
-        return initial;
-    }
-    return (0, exports.getKeysToExpand)(name, parent, initial);
-};
-exports.getKeysToExpand = getKeysToExpand;
 const CompositionSelector = () => {
     const { compositions, canvasContent, folders } = (0, react_1.useContext)(remotion_1.Internals.CompositionManager);
     const { foldersExpanded } = (0, react_1.useContext)(persist_open_folders_1.ExpandedFoldersContext);

package/dist/components/InitialCompositionLoader.js

@@ -3,11 +3,12 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.InitialCompositionLoader = exports.useSelectComposition = exports.useSelectAsset = void 0;
 const react_1 = require("react");
 const remotion_1 = require("remotion");
+const create_folder_tree_1 = require("../helpers/create-folder-tree");
 const mobile_layout_1 = require("../helpers/mobile-layout");
+const persist_open_folders_1 = require("../helpers/persist-open-folders");
 const url_state_1 = require("../helpers/url-state");
 const folders_1 = require("../state/folders");
 const sidebar_1 = require("../state/sidebar");
-const CompositionSelector_1 = require("./CompositionSelector");
 const ExplorerPanel_1 = require("./ExplorerPanel");
 const load_canvas_content_from_url_1 = require("./load-canvas-content-from-url");
 const use_static_files_1 = require("./use-static-files");
@@ -49,13 +50,14 @@ const useSelectComposition = () => {
         const { folderName, parentFolderName } = c;
         if (folderName !== null) {
             setCompositionFoldersExpanded((ex) => {
-                const keysToExpand = (0, CompositionSelector_1.getKeysToExpand)(folderName, parentFolderName);
+                const keysToExpand = (0, create_folder_tree_1.getKeysToExpand)(folderName, parentFolderName);
                 const newState = {
                     ...ex,
                 };
                 for (const key of keysToExpand) {
                     newState[key] = true;
                 }
+                (0, persist_open_folders_1.persistExpandedFolders)('compositions', newState);
                 return newState;
             });
             if (isMobileLayout) {

package/dist/components/PlayPause.d.ts

@@ -3,4 +3,5 @@ export declare const PlayPause: React.FC<{
     readonly playbackRate: number;
     readonly loop: boolean;
     readonly bufferStateDelayInMilliseconds: number;
+    readonly muted: boolean;
 }>;

package/dist/components/PlayPause.js

@@ -29,7 +29,7 @@ const iconButton = {
     width: 14,
     color: 'white',
 };
-const PlayPause = ({ playbackRate, loop, bufferStateDelayInMilliseconds }) => {
+const PlayPause = ({ playbackRate, loop, bufferStateDelayInMilliseconds, muted }) => {
     const { inFrame, outFrame } = (0, in_out_1.useTimelineInOutFramePosition)();
     const videoConfig = remotion_1.Internals.useUnsafeVideoConfig();
     const [showBufferIndicator, setShowBufferState] = (0, react_1.useState)(false);
@@ -44,6 +44,7 @@ const PlayPause = ({ playbackRate, loop, bufferStateDelayInMilliseconds }) => {
         browserMediaControlsBehavior: {
             mode: 'register-media-session',
         },
+        muted,
     });
     const isStill = (0, is_current_selected_still_1.useIsStill)();
     (0, react_1.useEffect)(() => {

package/dist/components/PreviewToolbar.js

@@ -140,7 +140,7 @@ const PreviewToolbar = ({ readOnlyStudio, bufferStateDelayInMilliseconds }) => {
                     jsx_runtime_1.jsxs("div", { style: sideContainer, children: [
                             jsx_runtime_1.jsx("div", { style: padding }), jsx_runtime_1.jsx(TimelineZoomControls_1.TimelineZoomControls, {})
                         ] }), jsx_runtime_1.jsx(layout_1.Flex, {}), jsx_runtime_1.jsx(SizeSelector_1.SizeSelector, {}), isStill || isVideoComposition ? (jsx_runtime_1.jsx(PlaybackRateSelector_1.PlaybackRateSelector, { setPlaybackRate: setPlaybackRate, playbackRate: playbackRate })) : null] })), isVideoComposition ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
-                    jsx_runtime_1.jsx(layout_1.Spacing, { x: 2 }), jsx_runtime_1.jsx(PlayPause_1.PlayPause, { bufferStateDelayInMilliseconds: bufferStateDelayInMilliseconds, loop: loop, playbackRate: playbackRate }), jsx_runtime_1.jsx(layout_1.Spacing, { x: 2 }), jsx_runtime_1.jsx(LoopToggle_1.LoopToggle, { loop: loop, setLoop: setLoop }), jsx_runtime_1.jsx(MuteToggle_1.MuteToggle, { muted: mediaMuted, setMuted: setMediaMuted }), jsx_runtime_1.jsx(layout_1.Spacing, { x: 2 }), jsx_runtime_1.jsx(TimelineInOutToggle_1.TimelineInOutPointToggle, {}), jsx_runtime_1.jsx(layout_1.Spacing, { x: 2 })
+                    jsx_runtime_1.jsx(layout_1.Spacing, { x: 2 }), jsx_runtime_1.jsx(PlayPause_1.PlayPause, { bufferStateDelayInMilliseconds: bufferStateDelayInMilliseconds, loop: loop, playbackRate: playbackRate, muted: mediaMuted }), jsx_runtime_1.jsx(layout_1.Spacing, { x: 2 }), jsx_runtime_1.jsx(LoopToggle_1.LoopToggle, { loop: loop, setLoop: setLoop }), jsx_runtime_1.jsx(MuteToggle_1.MuteToggle, { muted: mediaMuted, setMuted: setMediaMuted }), jsx_runtime_1.jsx(layout_1.Spacing, { x: 2 }), jsx_runtime_1.jsx(TimelineInOutToggle_1.TimelineInOutPointToggle, {}), jsx_runtime_1.jsx(layout_1.Spacing, { x: 2 })
                 ] })) : null, (canvasContent === null || canvasContent === void 0 ? void 0 : canvasContent.type) === 'composition' ? jsx_runtime_1.jsx(CheckboardToggle_1.CheckboardToggle, {}) : null, jsx_runtime_1.jsx(layout_1.Spacing, { x: 1 }), canvasContent && isFullscreenSupported ? jsx_runtime_1.jsx(FullscreenToggle_1.FullScreenToggle, {}) : null, jsx_runtime_1.jsx(layout_1.Flex, {}), isMobileLayout && (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
                     jsx_runtime_1.jsx(layout_1.Flex, {}), jsx_runtime_1.jsx(SizeSelector_1.SizeSelector, {}), isStill || isVideoComposition ? (jsx_runtime_1.jsx(PlaybackRateSelector_1.PlaybackRateSelector, { setPlaybackRate: setPlaybackRate, playbackRate: playbackRate })) : null] })), jsx_runtime_1.jsxs("div", { style: sideContainer, children: [
                     jsx_runtime_1.jsx(layout_1.Flex, {}), !isMobileLayout && jsx_runtime_1.jsx(FpsCounter_1.FpsCounter, { playbackSpeed: playbackRate }), jsx_runtime_1.jsx(layout_1.Spacing, { x: 2 }), jsx_runtime_1.jsx(RenderButton_1.RenderButton, { readOnlyStudio: readOnlyStudio }), jsx_runtime_1.jsx(layout_1.Spacing, { x: 1.5 })

package/dist/components/Timeline/Timeline.js

@@ -104,7 +104,7 @@ const TimelineInner = () => {
                     (0, timeline_layout_1.getTimelineLayerHeight)(track.sequence.type) +
                     Number(timeline_layout_1.TIMELINE_ITEM_BORDER_BOTTOM) +
                     (isExpanded
-                        ? (0, timeline_layout_1.getExpandedTrackHeight)(track.sequence.controls) +
+                        ? (0, timeline_layout_1.getExpandedTrackHeight)(track.sequence, expandedTracks) +
                             timeline_layout_1.TIMELINE_ITEM_BORDER_BOTTOM
                         : 0));
             }, 0) +

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

@@ -0,0 +1,8 @@
+import React from 'react';
+export declare const TimelineExpandArrowButton: React.FC<{
+    readonly isExpanded: boolean;
+    readonly onClick: () => void;
+    readonly label: string;
+    readonly hasExpandableContent: boolean;
+}>;
+export declare const TimelineExpandArrowSpacer: React.FC;

package/dist/components/Timeline/TimelineExpandArrowButton.js

@@ -0,0 +1,39 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TimelineExpandArrowSpacer = exports.TimelineExpandArrowButton = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const arrowButton = {
+    background: 'none',
+    border: 'none',
+    color: 'white',
+    cursor: 'pointer',
+    padding: 0,
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    width: 12,
+    height: 12,
+    flexShrink: 0,
+    fontSize: 8,
+    marginRight: 4,
+    userSelect: 'none',
+    outline: 'none',
+    lineHeight: 1,
+};
+const svgStyle = { display: 'block' };
+const TimelineExpandArrowButton = ({ isExpanded, onClick, label, hasExpandableContent }) => {
+    const style = (0, react_1.useMemo)(() => {
+        return {
+            ...arrowButton,
+            transform: isExpanded ? 'rotate(90deg)' : 'rotate(0deg)',
+            opacity: hasExpandableContent ? 1 : 0.2,
+        };
+    }, [isExpanded, hasExpandableContent]);
+    return (jsx_runtime_1.jsx("button", { type: "button", style: style, onClick: onClick, disabled: !hasExpandableContent, "aria-expanded": isExpanded, "aria-label": `${isExpanded ? 'Collapse' : 'Expand'} ${label}`, children: jsx_runtime_1.jsx("svg", { width: "12", height: "12", viewBox: "0 0 8 8", style: svgStyle, children: jsx_runtime_1.jsx("path", { d: "M2 1L6 4L2 7Z", fill: "white" }) }) }));
+};
+exports.TimelineExpandArrowButton = TimelineExpandArrowButton;
+const TimelineExpandArrowSpacer = () => {
+    return jsx_runtime_1.jsx("div", { style: arrowButton });
+};
+exports.TimelineExpandArrowSpacer = TimelineExpandArrowSpacer;

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

@@ -2,8 +2,6 @@ import type { SequenceNodePath } from '@remotion/studio-shared';
 import React from 'react';
 import type { TSequence } from 'remotion';
 import type { OriginalPosition } from '../../error-overlay/react-overlay/utils/get-source-map';
-export declare const EXPANDED_SECTION_PADDING_LEFT = 28;
-export declare const EXPANDED_SECTION_PADDING_RIGHT = 10;
 export declare const TimelineExpandedSection: React.FC<{
     readonly sequence: TSequence;
     readonly originalLocation: OriginalPosition | null;

package/dist/components/Timeline/TimelineExpandedSection.js

@@ -33,14 +33,15 @@ var __importStar = (this && this.__importStar) || (function () {
     };
 })();
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.TimelineExpandedSection = exports.EXPANDED_SECTION_PADDING_RIGHT = exports.EXPANDED_SECTION_PADDING_LEFT = void 0;
+exports.TimelineExpandedSection = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = __importStar(require("react"));
 const colors_1 = require("../../helpers/colors");
 const timeline_layout_1 = require("../../helpers/timeline-layout");
+const ExpandedTracksProvider_1 = require("../ExpandedTracksProvider");
+const TimelineExpandArrowButton_1 = require("./TimelineExpandArrowButton");
 const TimelineFieldRow_1 = require("./TimelineFieldRow");
-exports.EXPANDED_SECTION_PADDING_LEFT = 28;
-exports.EXPANDED_SECTION_PADDING_RIGHT = 10;
+const TimelineListItem_1 = require("./TimelineListItem");
 const expandedSectionBase = {
     color: 'white',
     fontFamily: 'Arial, Helvetica, sans-serif',
@@ -53,11 +54,27 @@ const separator = {
     height: 1,
     backgroundColor: colors_1.TIMELINE_TRACK_SEPARATOR,
 };
+const groupRowBase = {
+    height: timeline_layout_1.TREE_GROUP_ROW_HEIGHT,
+    display: 'flex',
+    alignItems: 'center',
+    paddingRight: timeline_layout_1.EXPANDED_SECTION_PADDING_RIGHT,
+};
+const rowLabel = {
+    fontSize: 12,
+    color: 'rgba(255, 255, 255, 0.8)',
+    userSelect: 'none',
+};
+const labelOnlyRowBase = {
+    display: 'flex',
+    alignItems: 'center',
+    paddingRight: timeline_layout_1.EXPANDED_SECTION_PADDING_RIGHT,
+};
 const TimelineExpandedSection = ({ sequence, originalLocation, nestedDepth, nodePath }) => {
     var _a;
     var _b;
+    const { expandedTracks, toggleTrack } = (0, react_1.useContext)(ExpandedTracksProvider_1.ExpandedTracksContext);
     const overrideId = (_b = (_a = sequence.controls) === null || _a === void 0 ? void 0 : _a.overrideId) !== null && _b !== void 0 ? _b : sequence.id;
-    const schemaFields = (0, react_1.useMemo)(() => (0, timeline_layout_1.getSchemaFields)(sequence.controls), [sequence.controls]);
     const validatedLocation = (0, react_1.useMemo)(() => {
         var _a;
         if (!originalLocation ||
@@ -71,24 +88,56 @@ const TimelineExpandedSection = ({ sequence, originalLocation, nestedDepth, node
             column: (_a = originalLocation.column) !== null && _a !== void 0 ? _a : 0,
         };
     }, [originalLocation]);
-    const expandedHeight = (0, react_1.useMemo)(() => (0, timeline_layout_1.getExpandedTrackHeight)(sequence.controls), [sequence.controls]);
+    const tree = (0, react_1.useMemo)(() => (0, timeline_layout_1.buildTimelineTree)(sequence), [sequence]);
+    const flat = (0, react_1.useMemo)(() => (0, timeline_layout_1.flattenVisibleTreeNodes)(tree, expandedTracks), [tree, expandedTracks]);
+    const expandedHeight = (0, react_1.useMemo)(() => (0, timeline_layout_1.getExpandedTrackHeight)(sequence, expandedTracks), [sequence, expandedTracks]);
+    const sequenceOffsetPx = TimelineListItem_1.SPACING * 3 * nestedDepth;
+    const keysToObserve = (0, react_1.useMemo)(() => {
+        const fields = (0, timeline_layout_1.getSchemaFields)(sequence.controls);
+        if (!fields) {
+            return [];
+        }
+        return fields.map((f) => f.key);
+    }, [sequence.controls]);
     const style = (0, react_1.useMemo)(() => {
         return {
             ...expandedSectionBase,
             height: expandedHeight,
         };
     }, [expandedHeight]);
-    const keysToObserve = (0, react_1.useMemo)(() => {
-        if (!schemaFields) {
-            return [];
+    const renderRow = (0, react_1.useCallback)((node, depth) => {
+        var _a;
+        const paddingLeft = timeline_layout_1.EXPANDED_SECTION_PADDING_LEFT +
+            depth * timeline_layout_1.TREE_INDENT_PER_LEVEL +
+            sequenceOffsetPx;
+        if (node.kind === 'group') {
+            const isExpanded = (_a = expandedTracks[node.id]) !== null && _a !== void 0 ? _a : false;
+            return (jsx_runtime_1.jsxs("div", { style: { ...groupRowBase, paddingLeft }, children: [
+                    jsx_runtime_1.jsx(TimelineExpandArrowButton_1.TimelineExpandArrowButton, { isExpanded: isExpanded, onClick: () => toggleTrack(node.id), label: `${node.label} section`, hasExpandableContent: true }), jsx_runtime_1.jsx("span", { style: rowLabel, children: node.label })
+                ] }));
+        }
+        if (node.field) {
+            return (jsx_runtime_1.jsx(TimelineFieldRow_1.TimelineFieldRow, { field: node.field, overrideId: overrideId, validatedLocation: validatedLocation, paddingLeft: paddingLeft, nodePath: nodePath, keysToObserve: keysToObserve }));
         }
-        return schemaFields.map((f) => f.key);
-    }, [schemaFields]);
-    return (jsx_runtime_1.jsx("div", { style: style, children: schemaFields
-            ? schemaFields.map((field, i) => {
-                return (jsx_runtime_1.jsxs(react_1.default.Fragment, { children: [i > 0 ? jsx_runtime_1.jsx("div", { style: separator }) : null, jsx_runtime_1.jsx(TimelineFieldRow_1.TimelineFieldRow, { field: field, overrideId: overrideId, validatedLocation: validatedLocation, nestedDepth: nestedDepth, nodePath: nodePath, keysToObserve: keysToObserve })
-                    ] }, field.key));
-            })
-            : 'No schema' }));
+        return (jsx_runtime_1.jsx("div", { style: {
+                ...labelOnlyRowBase,
+                height: (0, timeline_layout_1.getTreeRowHeight)(node),
+                paddingLeft,
+            }, children: jsx_runtime_1.jsx("span", { style: rowLabel, children: node.label }) }));
+    }, [
+        expandedTracks,
+        keysToObserve,
+        nodePath,
+        overrideId,
+        sequenceOffsetPx,
+        toggleTrack,
+        validatedLocation,
+    ]);
+    if (flat.length === 0) {
+        return jsx_runtime_1.jsx("div", { style: style, children: "No schema" });
+    }
+    return (jsx_runtime_1.jsx("div", { style: style, children: flat.map(({ node, depth }, i) => {
+            return (jsx_runtime_1.jsxs(react_1.default.Fragment, { children: [i > 0 ? jsx_runtime_1.jsx("div", { style: separator }) : null, renderRow(node, depth)] }, node.id));
+        }) }));
 };
 exports.TimelineExpandedSection = TimelineExpandedSection;

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

@@ -6,7 +6,7 @@ export declare const TimelineFieldRow: React.FC<{
     readonly field: SchemaFieldInfo;
     readonly overrideId: string;
     readonly validatedLocation: CodePosition | null;
-    readonly nestedDepth: number;
+    readonly paddingLeft: number;
     readonly nodePath: SequenceNodePath | null;
     readonly keysToObserve: string[];
 }>;

package/dist/components/Timeline/TimelineFieldRow.js

@@ -4,16 +4,14 @@ exports.TimelineFieldRow = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const remotion_1 = require("remotion");
+const timeline_layout_1 = require("../../helpers/timeline-layout");
 const call_api_1 = require("../call-api");
-const TimelineExpandedSection_1 = require("./TimelineExpandedSection");
-const TimelineListItem_1 = require("./TimelineListItem");
 const TimelineSchemaField_1 = require("./TimelineSchemaField");
-const FIELD_ROW_PADDING_LEFT = 24;
 const fieldRowBase = {
     display: 'flex',
     alignItems: 'center',
     gap: 8,
-    paddingRight: TimelineExpandedSection_1.EXPANDED_SECTION_PADDING_RIGHT,
+    paddingRight: timeline_layout_1.EXPANDED_SECTION_PADDING_RIGHT,
 };
 const fieldName = {
     fontSize: 12,
@@ -27,7 +25,7 @@ const fieldLabelRow = {
     alignItems: 'center',
     gap: 6,
 };
-const TimelineFieldRow = ({ field, overrideId, validatedLocation, nestedDepth, nodePath, keysToObserve, }) => {
+const TimelineFieldRow = ({ field, overrideId, validatedLocation, paddingLeft, nodePath, keysToObserve, }) => {
     var _a, _b, _c, _d;
     const { setDragOverrides, clearDragOverrides, dragOverrides, codeValues: allPropStatuses, } = (0, react_1.useContext)(remotion_1.Internals.VisualModeOverridesContext);
     const propStatuses = ((_a = allPropStatuses[overrideId]) !== null && _a !== void 0 ? _a : null);
@@ -93,11 +91,9 @@ const TimelineFieldRow = ({ field, overrideId, validatedLocation, nestedDepth, n
         return {
             ...fieldRowBase,
             height: field.rowHeight,
-            paddingLeft: TimelineExpandedSection_1.EXPANDED_SECTION_PADDING_LEFT +
-                FIELD_ROW_PADDING_LEFT +
-                TimelineListItem_1.SPACING * 3 * nestedDepth,
+            paddingLeft,
         };
-    }, [field.rowHeight, nestedDepth]);
+    }, [field.rowHeight, paddingLeft]);
     return (jsx_runtime_1.jsxs("div", { style: style, children: [
             jsx_runtime_1.jsx("div", { style: fieldLabelRow, children: jsx_runtime_1.jsx("span", { style: fieldName, children: (_c = field.description) !== null && _c !== void 0 ? _c : field.key }) }), jsx_runtime_1.jsx(TimelineSchemaField_1.TimelineFieldValue, { field: field, propStatus: propStatus, onSave: onSave, onDragValueChange: onDragValueChange, onDragEnd: onDragEnd, canUpdate: (_d = propStatus === null || propStatus === void 0 ? void 0 : propStatus.canUpdate) !== null && _d !== void 0 ? _d : false, effectiveValue: effectiveValue, codeValue: propStatus })
         ] }));

package/dist/components/Timeline/TimelineListItem.js

@@ -11,6 +11,7 @@ const call_api_1 = require("../call-api");
 const ContextMenu_1 = require("../ContextMenu");
 const ExpandedTracksProvider_1 = require("../ExpandedTracksProvider");
 const NotificationCenter_1 = require("../Notifications/NotificationCenter");
+const TimelineExpandArrowButton_1 = require("./TimelineExpandArrowButton");
 const TimelineExpandedSection_1 = require("./TimelineExpandedSection");
 const TimelineLayerEye_1 = require("./TimelineLayerEye");
 const TimelineStack_1 = require("./TimelineStack");
@@ -21,24 +22,6 @@ const space = {
     width: exports.SPACING,
     flexShrink: 0,
 };
-const arrowButton = {
-    background: 'none',
-    border: 'none',
-    color: 'white',
-    cursor: 'pointer',
-    padding: 0,
-    display: 'flex',
-    alignItems: 'center',
-    justifyContent: 'center',
-    width: 12,
-    height: 12,
-    flexShrink: 0,
-    fontSize: 8,
-    marginRight: 4,
-    userSelect: 'none',
-    outline: 'none',
-    lineHeight: 1,
-};
 const TimelineListItem = ({ nestedDepth, sequence, isCompact }) => {
     var _a, _b;
     const { previewServerState } = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx);
@@ -165,7 +148,7 @@ const TimelineListItem = ({ nestedDepth, sequence, isCompact }) => {
     }, [sequence.id, toggleTrack]);
     const padder = (0, react_1.useMemo)(() => {
         return {
-            width: Number(exports.SPACING * 3) * nestedDepth,
+            width: Number(exports.SPACING) * nestedDepth,
             flexShrink: 0,
         };
     }, [nestedDepth]);
@@ -184,6 +167,13 @@ const TimelineListItem = ({ nestedDepth, sequence, isCompact }) => {
     const outer = (0, react_1.useMemo)(() => {
         return {
             height: (0, timeline_layout_1.getTimelineLayerHeight)(sequence.type) + timeline_layout_1.TIMELINE_ITEM_BORDER_BOTTOM,
+            borderBottom: `1px solid ${colors_1.TIMELINE_TRACK_SEPARATOR}`,
+        };
+    }, [sequence.type]);
+    const inner = (0, react_1.useMemo)(() => {
+        return {
+            // TODO: Not so small
+            height: timeline_layout_1.TIMELINE_LAYER_HEIGHT_AUDIO,
             color: 'white',
             fontFamily: 'Arial, Helvetica, sans-serif',
             display: 'flex',
@@ -192,18 +182,12 @@ const TimelineListItem = ({ nestedDepth, sequence, isCompact }) => {
             wordBreak: 'break-all',
             textAlign: 'left',
             paddingLeft: exports.SPACING,
-            borderBottom: `1px solid ${colors_1.TIMELINE_TRACK_SEPARATOR}`,
-        };
-    }, [sequence.type]);
-    const arrowStyle = (0, react_1.useMemo)(() => {
-        return {
-            ...arrowButton,
-            transform: isExpanded ? 'rotate(90deg)' : 'rotate(0deg)',
         };
-    }, [isExpanded]);
-    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] }));
+    }, []);
+    const hasExpandableContent = Boolean(sequence.controls) || sequence.effects.length > 0;
+    const trackRow = (jsx_runtime_1.jsx("div", { style: outer, children: jsx_runtime_1.jsxs("div", { style: inner, 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 ? (jsx_runtime_1.jsx(TimelineExpandArrowButton_1.TimelineExpandArrowButton, { isExpanded: isExpanded, onClick: onToggleExpand, label: "track properties", hasExpandableContent: hasExpandableContent })) : 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 && hasExpandableContent ? (jsx_runtime_1.jsx(TimelineExpandedSection_1.TimelineExpandedSection, { sequence: sequence, originalLocation: originalLocation, nestedDepth: nestedDepth, nodePath: nodePath })) : null] }));
 };
 exports.TimelineListItem = TimelineListItem;

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

@@ -136,6 +136,8 @@ const TimelineStack = ({ isCompact, sequence, originalLocation }) => {
             textOverflow: 'ellipsis',
             overflow: 'hidden',
             flexShrink: 100000,
+            userSelect: 'none',
+            WebkitUserSelect: 'none',
         };
     }, [opening, stackHovered, stackHoverable]);
     const titleStyle = (0, react_1.useMemo)(() => {

package/dist/components/Timeline/TimelineTracks.js

@@ -18,8 +18,9 @@ const content = {
 const timelineContent = {
     minHeight: '100%',
 };
-const getExpandedPlaceholderStyle = (controls) => ({
-    height: (0, timeline_layout_1.getExpandedTrackHeight)(controls) + timeline_layout_1.TIMELINE_ITEM_BORDER_BOTTOM,
+const getExpandedPlaceholderStyle = (sequence, expandedTracks) => ({
+    height: (0, timeline_layout_1.getExpandedTrackHeight)(sequence, expandedTracks) +
+        timeline_layout_1.TIMELINE_ITEM_BORDER_BOTTOM,
 });
 const TimelineTracks = ({ timeline, hasBeenCut }) => {
     const { expandedTracks } = (0, react_1.useContext)(ExpandedTracksProvider_1.ExpandedTracksContext);
@@ -44,7 +45,7 @@ const TimelineTracks = ({ timeline, hasBeenCut }) => {
                                 jsx_runtime_1.jsx("div", { style: {
                                         height: (0, timeline_layout_1.getTimelineLayerHeight)(track.sequence.type),
                                         marginBottom: timeline_layout_1.TIMELINE_ITEM_BORDER_BOTTOM,
-                                    }, children: jsx_runtime_1.jsx(TimelineSequence_1.TimelineSequence, { s: track.sequence }) }), visualModeEnabled && isExpanded ? (jsx_runtime_1.jsx("div", { style: getExpandedPlaceholderStyle(track.sequence.controls) })) : null] }, track.sequence.id));
+                                    }, children: jsx_runtime_1.jsx(TimelineSequence_1.TimelineSequence, { s: track.sequence }) }), visualModeEnabled && isExpanded ? (jsx_runtime_1.jsx("div", { style: getExpandedPlaceholderStyle(track.sequence, expandedTracks) })) : null] }, track.sequence.id));
                     })] }), hasBeenCut ? jsx_runtime_1.jsx(MaxTimelineTracks_1.MaxTimelineTracksReached, {}) : null] }));
 };
 exports.TimelineTracks = TimelineTracks;

package/dist/error-overlay/remotion-overlay/CopyStackTrace.d.ts

@@ -1,5 +1,4 @@
 import React from 'react';
 export declare const CopyStackTrace: React.FC<{
-    readonly canHaveKeyboardShortcuts: boolean;
     readonly errorText: string;
 }>;

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

@@ -4,9 +4,7 @@ exports.CopyStackTrace = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const Button_1 = require("../../components/Button");
-const use_keybinding_1 = require("../../helpers/use-keybinding");
-const ShortcutHint_1 = require("./ShortcutHint");
-const CopyStackTrace = ({ canHaveKeyboardShortcuts, errorText }) => {
+const CopyStackTrace = ({ errorText }) => {
     const [copyState, setCopyState] = (0, react_1.useState)('idle');
     const handleCopyToClipboard = (0, react_1.useCallback)(() => {
         navigator.clipboard
@@ -20,22 +18,6 @@ const CopyStackTrace = ({ canHaveKeyboardShortcuts, errorText }) => {
             setTimeout(() => setCopyState('idle'), 2000);
         });
     }, [errorText]);
-    const { registerKeybinding } = (0, use_keybinding_1.useKeybinding)();
-    (0, react_1.useEffect)(() => {
-        if (!canHaveKeyboardShortcuts) {
-            return;
-        }
-        const { unregister } = registerKeybinding({
-            event: 'keydown',
-            key: 't',
-            callback: handleCopyToClipboard,
-            commandCtrlKey: true,
-            preventDefault: true,
-            triggerIfInputFieldFocused: false,
-            keepRegisteredWhenNotHighestContext: false,
-        });
-        return () => unregister();
-    }, [canHaveKeyboardShortcuts, handleCopyToClipboard, registerKeybinding]);
     const label = (0, react_1.useMemo)(() => {
         if (copyState === 'copied') {
             return 'Copied!';
@@ -45,6 +27,6 @@ const CopyStackTrace = ({ canHaveKeyboardShortcuts, errorText }) => {
         }
         return 'Copy Stacktrace';
     }, [copyState]);
-    return (jsx_runtime_1.jsxs(Button_1.Button, { onClick: handleCopyToClipboard, children: [label, ' ', copyState === 'idle' && canHaveKeyboardShortcuts ? (jsx_runtime_1.jsx(ShortcutHint_1.ShortcutHint, { cmdOrCtrl: true, keyToPress: "t" })) : null] }));
+    return jsx_runtime_1.jsx(Button_1.Button, { onClick: handleCopyToClipboard, children: label });
 };
 exports.CopyStackTrace = CopyStackTrace;

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

@@ -64,7 +64,7 @@ const ErrorDisplay = ({ display, keyboardShortcuts, onRetry, canHaveDismissButto
                     jsx_runtime_1.jsx(HelpLink_1.HelpLink, { link: helpLink, canHaveKeyboardShortcuts: keyboardShortcuts }), jsx_runtime_1.jsx("div", { style: spacer })
                 ] })) : null, display.stackFrames.length > 0 && window.remotion_editorName ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
                     jsx_runtime_1.jsx(OpenInEditor_1.OpenInEditor, { canHaveKeyboardShortcuts: keyboardShortcuts, stack: display.stackFrames[0] }), jsx_runtime_1.jsx("div", { style: spacer })
-                ] })) : null, jsx_runtime_1.jsx(CopyStackTrace_1.CopyStackTrace, { canHaveKeyboardShortcuts: keyboardShortcuts, errorText: errorTextForCopy }), jsx_runtime_1.jsx("div", { style: spacer }), jsx_runtime_1.jsx(SearchGitHubIssues_1.SearchGithubIssues, { canHaveKeyboardShortcuts: keyboardShortcuts, message: display.error.message }), jsx_runtime_1.jsx("div", { style: spacer }), jsx_runtime_1.jsx(AskOnDiscord_1.AskOnDiscord, { canHaveKeyboardShortcuts: keyboardShortcuts }), onRetry ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
+                ] })) : null, jsx_runtime_1.jsx(CopyStackTrace_1.CopyStackTrace, { errorText: errorTextForCopy }), jsx_runtime_1.jsx("div", { style: spacer }), jsx_runtime_1.jsx(SearchGitHubIssues_1.SearchGithubIssues, { canHaveKeyboardShortcuts: keyboardShortcuts, message: display.error.message }), jsx_runtime_1.jsx("div", { style: spacer }), jsx_runtime_1.jsx(AskOnDiscord_1.AskOnDiscord, { canHaveKeyboardShortcuts: keyboardShortcuts }), onRetry ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
                     jsx_runtime_1.jsx("div", { style: spacer }), jsx_runtime_1.jsx(Retry_1.RetryButton, { onClick: onRetry, label: calculateMetadata ? 'Retry calculateMetadata()' : 'Retry' })
                 ] })) : null, calculateMetadata ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
                     jsx_runtime_1.jsx("br", {}), jsx_runtime_1.jsx(layout_1.Spacing, { y: 0.5 }), jsx_runtime_1.jsx(CalculateMetadataErrorExplainer_1.CalculateMetadataErrorExplainer, {})