@remotion/studio 4.0.432 → 4.0.433

package/dist/Studio.js

@@ -9,7 +9,6 @@ const Editor_1 = require("./components/Editor");
 const EditorContexts_1 = require("./components/EditorContexts");
 const ServerDisconnected_1 = require("./components/Notifications/ServerDisconnected");
 const use_static_files_1 = require("./components/use-static-files");
-const fast_refresh_context_1 = require("./fast-refresh-context");
 const FastRefreshProvider_1 = require("./FastRefreshProvider");
 const inject_css_1 = require("./helpers/inject-css");
 const ResolveCompositionConfigInStudio_1 = require("./ResolveCompositionConfigInStudio");
@@ -18,8 +17,7 @@ const getServerDisconnectedDomElement = () => {
 };
 const StudioInner = ({ rootComponent, readOnly, visualModeEnabled }) => {
     var _a;
-    const { fastRefreshes, manualRefreshes } = (0, react_1.useContext)(fast_refresh_context_1.FastRefreshContext);
-    return (jsx_runtime_1.jsx(remotion_1.Internals.CompositionManagerProvider, { onlyRenderComposition: null, currentCompositionMetadata: null, initialCompositions: [], initialCanvasContent: null, children: jsx_runtime_1.jsx(remotion_1.Internals.RemotionRootContexts, { visualModeEnabled: visualModeEnabled, frameState: null, audioEnabled: window.remotion_audioEnabled, videoEnabled: window.remotion_videoEnabled, logLevel: window.remotion_logLevel, numberOfAudioTags: window.remotion_numberOfAudioTags, audioLatencyHint: (_a = window.remotion_audioLatencyHint) !== null && _a !== void 0 ? _a : 'interactive', nonceContextSeed: fastRefreshes + manualRefreshes, children: jsx_runtime_1.jsx(use_static_files_1.StaticFilesProvider, { children: jsx_runtime_1.jsx(ResolveCompositionConfigInStudio_1.ResolveCompositionConfigInStudio, { children: jsx_runtime_1.jsxs(EditorContexts_1.EditorContexts, { readOnlyStudio: readOnly, children: [
+    return (jsx_runtime_1.jsx(remotion_1.Internals.CompositionManagerProvider, { onlyRenderComposition: null, currentCompositionMetadata: null, initialCompositions: [], initialCanvasContent: null, children: jsx_runtime_1.jsx(remotion_1.Internals.RemotionRootContexts, { visualModeEnabled: visualModeEnabled, frameState: null, audioEnabled: window.remotion_audioEnabled, videoEnabled: window.remotion_videoEnabled, logLevel: window.remotion_logLevel, numberOfAudioTags: window.remotion_numberOfAudioTags, audioLatencyHint: (_a = window.remotion_audioLatencyHint) !== null && _a !== void 0 ? _a : 'interactive', children: jsx_runtime_1.jsx(use_static_files_1.StaticFilesProvider, { children: jsx_runtime_1.jsx(ResolveCompositionConfigInStudio_1.ResolveCompositionConfigInStudio, { children: jsx_runtime_1.jsxs(EditorContexts_1.EditorContexts, { readOnlyStudio: readOnly, children: [
                             jsx_runtime_1.jsx(Editor_1.Editor, { readOnlyStudio: readOnly, Root: rootComponent }), readOnly
                                 ? null
                                 : (0, react_dom_1.createPortal)(jsx_runtime_1.jsx(ServerDisconnected_1.ServerDisconnected, {}), getServerDisconnectedDomElement())] }) }) }) }) }));

package/dist/components/CompositionSelector.js

@@ -7,6 +7,7 @@ const remotion_1 = require("remotion");
 const colors_1 = require("../helpers/colors");
 const create_folder_tree_1 = require("../helpers/create-folder-tree");
 const persist_open_folders_1 = require("../helpers/persist-open-folders");
+const sort_by_nonce_history_1 = require("../helpers/sort-by-nonce-history");
 const z_index_1 = require("../state/z-index");
 const CompositionSelectorItem_1 = require("./CompositionSelectorItem");
 const CurrentComposition_1 = require("./CurrentComposition");
@@ -72,24 +73,30 @@ const CompositionSelector = () => {
     const { foldersExpanded } = (0, react_1.useContext)(persist_open_folders_1.ExpandedFoldersContext);
     const { tabIndex } = (0, z_index_1.useZIndex)();
     const selectComposition = (0, InitialCompositionLoader_1.useSelectComposition)();
+    const sortedCompositions = (0, react_1.useMemo)(() => {
+        return (0, sort_by_nonce_history_1.sortItemsByNonceHistory)(compositions);
+    }, [compositions]);
+    const sortedFolders = (0, react_1.useMemo)(() => {
+        return (0, sort_by_nonce_history_1.sortItemsByNonceHistory)(folders);
+    }, [folders]);
     const items = (0, react_1.useMemo)(() => {
-        return (0, create_folder_tree_1.createFolderTree)(compositions, folders, foldersExpanded);
-    }, [compositions, folders, foldersExpanded]);
-    const showCurrentComposition = canvasContent && canvasContent.type === 'composition';
+        return (0, create_folder_tree_1.createFolderTree)(sortedCompositions, sortedFolders, foldersExpanded);
+    }, [sortedCompositions, sortedFolders, foldersExpanded]);
     const list = (0, react_1.useMemo)(() => {
         return {
-            height: showCurrentComposition
-                ? `calc(100% - ${CurrentComposition_1.CURRENT_COMPOSITION_HEIGHT}px)`
-                : '100%',
+            height: `calc(100% - ${CurrentComposition_1.CURRENT_COMPOSITION_HEIGHT}px)`,
             overflowY: 'auto',
         };
-    }, [showCurrentComposition]);
+    }, []);
     const toggleFolder = (0, react_1.useCallback)((folderName, parentName) => {
         var _a;
         (_a = remotion_1.Internals.compositionSelectorRef.current) === null || _a === void 0 ? void 0 : _a.toggleFolder(folderName, parentName);
     }, []);
-    return (jsx_runtime_1.jsxs("div", { style: container, children: [showCurrentComposition ? jsx_runtime_1.jsx(CurrentComposition_1.CurrentComposition, {}) : null, jsx_runtime_1.jsx("div", { className: "__remotion-vertical-scrollbar", style: list, children: items.map((c) => {
-                    return (jsx_runtime_1.jsx(CompositionSelectorItem_1.CompositionSelectorItem, { level: 0, currentComposition: showCurrentComposition ? canvasContent.compositionId : null, selectComposition: selectComposition, toggleFolder: toggleFolder, tabIndex: tabIndex, item: c }, c.key + c.type));
+    return (jsx_runtime_1.jsxs("div", { style: container, children: [
+            jsx_runtime_1.jsx(CurrentComposition_1.CurrentComposition, {}), jsx_runtime_1.jsx("div", { className: "__remotion-vertical-scrollbar", style: list, children: items.map((c) => {
+                    return (jsx_runtime_1.jsx(CompositionSelectorItem_1.CompositionSelectorItem, { level: 0, currentComposition: canvasContent && canvasContent.type === 'composition'
+                            ? canvasContent.compositionId
+                            : null, selectComposition: selectComposition, toggleFolder: toggleFolder, tabIndex: tabIndex, item: c }, c.key + c.type));
                 }) })
         ] }));
 };

package/dist/components/CurrentComposition.js

@@ -37,10 +37,7 @@ const row = {
 };
 const CurrentComposition = () => {
     const video = remotion_1.Internals.useVideo();
-    if (!video) {
-        return jsx_runtime_1.jsx("div", { style: container });
-    }
-    return (jsx_runtime_1.jsx("div", { style: container, children: jsx_runtime_1.jsx("div", { style: row, children: jsx_runtime_1.jsxs("div", { children: [
-                    jsx_runtime_1.jsx("div", { style: title, children: video.id }), jsx_runtime_1.jsxs("div", { style: subtitle, children: [video.width, "x", video.height, (0, is_composition_still_1.isCompositionStill)(video) ? null : `, ${video.fps} FPS`] }), (0, is_composition_still_1.isCompositionStill)(video) ? (jsx_runtime_1.jsx("div", { style: subtitle, children: "Still" })) : (jsx_runtime_1.jsxs("div", { style: subtitle, children: ["Duration ", (0, render_frame_1.renderFrame)(video.durationInFrames, video.fps)] }))] }) }) }));
+    return (jsx_runtime_1.jsx("div", { style: container, children: video ? (jsx_runtime_1.jsx("div", { style: row, children: jsx_runtime_1.jsxs("div", { children: [
+                    jsx_runtime_1.jsx("div", { style: title, children: video.id }), jsx_runtime_1.jsxs("div", { style: subtitle, children: [video.width, "x", video.height, (0, is_composition_still_1.isCompositionStill)(video) ? null : `, ${video.fps} FPS`] }), (0, is_composition_still_1.isCompositionStill)(video) ? (jsx_runtime_1.jsx("div", { style: subtitle, children: "Still" })) : (jsx_runtime_1.jsxs("div", { style: subtitle, children: ["Duration ", (0, render_frame_1.renderFrame)(video.durationInFrames, video.fps)] }))] }) })) : null }));
 };
 exports.CurrentComposition = CurrentComposition;

package/dist/components/EditorContent.js

@@ -11,6 +11,7 @@ const SplitterContainer_1 = require("./Splitter/SplitterContainer");
 const SplitterElement_1 = require("./Splitter/SplitterElement");
 const SplitterHandle_1 = require("./Splitter/SplitterHandle");
 const Timeline_1 = require("./Timeline/Timeline");
+const TimelineEmptyState_1 = require("./Timeline/TimelineEmptyState");
 const noop = () => undefined;
 const container = {
     display: 'flex',
@@ -21,13 +22,11 @@ const container = {
 const EditorContent = ({ readOnlyStudio, children }) => {
     const isStill = (0, is_current_selected_still_1.useIsStill)();
     const { canvasContent } = (0, react_1.useContext)(remotion_1.Internals.CompositionManager);
-    // Preventing multiple renders so the update check doesn't get rendered twice and needs to be aborted
-    const onlyTopPanel = canvasContent === null || isStill || canvasContent.type !== 'composition';
+    const showTimeline = canvasContent !== null && !isStill && canvasContent.type === 'composition';
     return (jsx_runtime_1.jsxs("div", { style: container, children: [
             jsx_runtime_1.jsx(InitialCompositionLoader_1.InitialCompositionLoader, {}), jsx_runtime_1.jsx(MenuToolbar_1.MenuToolbar, { readOnlyStudio: readOnlyStudio }), jsx_runtime_1.jsxs(SplitterContainer_1.SplitterContainer, { orientation: "horizontal", id: "top-to-bottom", maxFlex: 0.9, minFlex: 0.2, defaultFlex: 0.75, children: [
-                    jsx_runtime_1.jsx(SplitterElement_1.SplitterElement, { sticky: null, type: "flexer", children: children }), onlyTopPanel ? null : (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
-                            jsx_runtime_1.jsx(SplitterHandle_1.SplitterHandle, { allowToCollapse: "none", onCollapse: noop }), jsx_runtime_1.jsx(SplitterElement_1.SplitterElement, { sticky: null, type: "anti-flexer", children: jsx_runtime_1.jsx(Timeline_1.Timeline, {}) })
-                        ] }))] })
+                    jsx_runtime_1.jsx(SplitterElement_1.SplitterElement, { sticky: null, type: "flexer", children: children }), jsx_runtime_1.jsx(SplitterHandle_1.SplitterHandle, { allowToCollapse: "none", onCollapse: noop }), jsx_runtime_1.jsx(SplitterElement_1.SplitterElement, { sticky: null, type: "anti-flexer", children: showTimeline ? jsx_runtime_1.jsx(Timeline_1.Timeline, {}) : jsx_runtime_1.jsx(TimelineEmptyState_1.TimelineEmptyState, {}) })
+                ] })
         ] }));
 };
 exports.EditorContent = EditorContent;

package/dist/components/NewComposition/DuplicateComposition.js

@@ -175,7 +175,10 @@ const DuplicateCompositionLoaded = ({ initialType }) => {
     }, []);
     return (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
             jsx_runtime_1.jsx(ModalHeader_1.ModalHeader, { title: `Duplicate ${resolved.result.id}` }), jsx_runtime_1.jsxs("form", { onSubmit: onSubmit, children: [
-                    jsx_runtime_1.jsxs("div", { style: content, children: [initialCompType === 'composition' ? (jsx_runtime_1.jsxs("div", { style: layout_2.optionRow, children: [
+                    jsx_runtime_1.jsxs("div", { style: content, children: [initialCompType === 'composition' ? (
+                            // We allow converting from a composition to a still, but
+                            // not the other way around
+                            jsx_runtime_1.jsxs("div", { style: layout_2.optionRow, children: [
                                     jsx_runtime_1.jsx("div", { style: layout_2.label, children: "Type" }), jsx_runtime_1.jsx("div", { style: layout_2.rightRow, children: jsx_runtime_1.jsx(ComboBox_1.Combobox, { title: "Type of composition", style: comboBoxStyle, values: typeValues, selectedId: type }) })
                                 ] })) : null, jsx_runtime_1.jsxs("div", { style: layout_2.optionRow, children: [
                                     jsx_runtime_1.jsx("div", { style: layout_2.label, children: "ID" }), jsx_runtime_1.jsx("div", { style: layout_2.rightRow, children: jsx_runtime_1.jsxs("div", { children: [

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

@@ -8,4 +8,5 @@ export declare const InputDragger: React.ForwardRefExoticComponent<InputHTMLAttr
     readonly status: RemInputStatus;
     readonly formatter?: ((str: string | number) => string) | undefined;
     readonly rightAlign: boolean;
+    readonly small?: boolean | undefined;
 } & React.RefAttributes<HTMLButtonElement>>;

package/dist/components/NewComposition/InputDragger.js

@@ -45,27 +45,34 @@ const RemInput_1 = require("./RemInput");
 const isInt = (num) => {
     return num % 1 === 0;
 };
-const InputDraggerForwardRefFn = ({ onValueChange, onValueChangeEnd, min: _min, max: _max, step: _step, value, onTextChange, formatter = (q) => String(q), status, rightAlign, ...props }, ref) => {
+const InputDraggerForwardRefFn = ({ onValueChange, onValueChangeEnd, min: _min, max: _max, step: _step, value, onTextChange, formatter = (q) => String(q), status, rightAlign, small, ...props }, ref) => {
     const [inputFallback, setInputFallback] = (0, react_1.useState)(false);
+    const [dragging, setDragging] = (0, react_1.useState)(false);
     const fallbackRef = (0, react_1.useRef)(null);
+    const pointerDownRef = (0, react_1.useRef)(false);
     const style = (0, react_1.useMemo)(() => {
         return {
             ...RemInput_1.inputBaseStyle,
             backgroundColor: 'transparent',
             borderColor: 'transparent',
             padding: '4px 6px',
+            ...{ outline: 'none' },
         };
     }, []);
     const span = (0, react_1.useMemo)(() => ({
-        borderBottom: '1px dotted ' + colors_1.BLUE,
-        paddingBottom: 1,
-        color: colors_1.BLUE,
+        color: dragging ? 'var(--remotion-cli-internals-blue-hovered)' : colors_1.BLUE,
         cursor: 'ew-resize',
         userSelect: 'none',
         WebkitUserSelect: 'none',
-        fontSize: 13,
+        fontSize: small ? 12 : 14,
         fontVariantNumeric: 'tabular-nums',
-    }), []);
+    }), [dragging, small]);
+    const onFocus = (0, react_1.useCallback)(() => {
+        if (!small || pointerDownRef.current) {
+            return;
+        }
+        setInputFallback(true);
+    }, [small]);
     const onClick = (0, react_1.useCallback)((e) => {
         if (!(0, input_dragger_click_lock_1.getClickLock)()) {
             e.stopPropagation();
@@ -78,6 +85,12 @@ const InputDraggerForwardRefFn = ({ onValueChange, onValueChangeEnd, min: _min,
     const onEscape = (0, react_1.useCallback)(() => {
         setInputFallback(false);
     }, []);
+    const onInputChange = (0, react_1.useCallback)((e) => {
+        const parsed = Number(e.target.value);
+        if (e.target.value !== '' && !Number.isNaN(parsed)) {
+            onValueChange(parsed);
+        }
+    }, [onValueChange]);
     const onBlur = (0, react_1.useCallback)(() => {
         if (!fallbackRef.current) {
             return;
@@ -106,6 +119,8 @@ const InputDraggerForwardRefFn = ({ onValueChange, onValueChangeEnd, min: _min,
         return Math.ceil(val * factor) / factor;
     };
     const onPointerDown = (0, react_1.useCallback)((e) => {
+        pointerDownRef.current = true;
+        const target = e.currentTarget;
         const { pageX, pageY, button } = e;
         if (button !== 0) {
             return;
@@ -119,6 +134,8 @@ const InputDraggerForwardRefFn = ({ onValueChange, onValueChangeEnd, min: _min,
             const max = Number(_max !== null && _max !== void 0 ? _max : Infinity);
             if (distanceFromStart > 4) {
                 (0, input_dragger_click_lock_1.setClickLock)(true);
+                setDragging(true);
+                target.blur();
             }
             const diff = (0, remotion_1.interpolate)(xDistance, [-5, -4, 0, 4, 5], [-step, 0, 0, 0, step]);
             const newValue = Math.min(max, Math.max(min, Number(value) + diff));
@@ -129,6 +146,8 @@ const InputDraggerForwardRefFn = ({ onValueChange, onValueChangeEnd, min: _min,
         window.addEventListener('mousemove', moveListener);
         window.addEventListener('pointerup', () => {
             window.removeEventListener('mousemove', moveListener);
+            pointerDownRef.current = false;
+            setDragging(false);
             if (lastDragValue !== null && onValueChangeEnd) {
                 onValueChangeEnd(lastDragValue);
             }
@@ -155,8 +174,8 @@ const InputDraggerForwardRefFn = ({ onValueChange, onValueChangeEnd, min: _min,
         return 0.0001;
     }, [_min, _step]);
     if (inputFallback) {
-        return (jsx_runtime_1.jsx(z_index_1.HigherZIndex, { onEscape: onEscape, onOutsideClick: noop_1.noop, children: jsx_runtime_1.jsx(RemInput_1.RemotionInput, { ref: fallbackRef, autoFocus: true, onKeyPress: onKeyPress, onBlur: onBlur, min: _min, max: _max, step: deriveStep, defaultValue: value, status: status, pattern: '[0-9]*[.]?[0-9]*', rightAlign: rightAlign, ...props }) }));
+        return (jsx_runtime_1.jsx(z_index_1.HigherZIndex, { onEscape: onEscape, onOutsideClick: noop_1.noop, children: jsx_runtime_1.jsx(RemInput_1.RemotionInput, { ref: fallbackRef, autoFocus: true, onKeyPress: onKeyPress, onBlur: onBlur, onChange: onInputChange, min: _min, max: _max, step: deriveStep, defaultValue: value, status: status, pattern: '[0-9]*[.]?[0-9]*', rightAlign: rightAlign, ...props, ...(small ? { style: { padding: '4px 6px', fontSize: 12 } } : {}) }) }));
     }
-    return (jsx_runtime_1.jsx("button", { ref: ref, type: "button", style: style, onClick: onClick, onPointerDown: onPointerDown, children: jsx_runtime_1.jsx("span", { style: span, children: formatter(value) }) }));
+    return (jsx_runtime_1.jsx("button", { ref: ref, type: "button", className: '__remotion_input_dragger', style: style, onClick: onClick, onFocus: onFocus, onPointerDown: onPointerDown, children: jsx_runtime_1.jsx("span", { style: span, children: formatter(value) }) }));
 };
 exports.InputDragger = react_1.default.forwardRef(InputDraggerForwardRefFn);

package/dist/components/OptionsPanel.js

@@ -120,6 +120,6 @@ const OptionsPanel = ({ readOnlyStudio }) => {
         };
     }, [reset]);
     return (jsx_runtime_1.jsxs("div", { style: container, className: "css-reset", children: [
-            jsx_runtime_1.jsx("div", { style: tabsContainer, children: jsx_runtime_1.jsxs(Tabs_1.Tabs, { children: [visualControlsTabActivated ? (jsx_runtime_1.jsx(Tabs_1.Tab, { selected: panel === 'visual-controls', onClick: onVisualControlsSelected, children: "Controls" })) : null, composition ? (jsx_runtime_1.jsxs(Tabs_1.Tab, { selected: panel === 'input-props', onClick: onPropsSelected, style: { justifyContent: 'space-between' }, children: ["Props", unsavedChangesExist ? (jsx_runtime_1.jsx(GlobalPropsEditorUpdateButton_1.GlobalPropsEditorUpdateButton, { compositionId: composition.id, currentDefaultProps: currentDefaultProps })) : null] })) : null, renderingAvailable ? (jsx_runtime_1.jsx(RendersTab_1.RendersTab, { onClick: onRendersSelected, selected: panel === 'renders' })) : null] }) }), panel === `input-props` && composition ? (jsx_runtime_1.jsx(DataEditor_1.DataEditor, { unresolvedComposition: composition, defaultProps: currentDefaultProps, setDefaultProps: setDefaultProps, mayShowSaveButton: true, propsEditType: "default-props", saving: saving, setSaving: setSaving, readOnlyStudio: readOnlyStudio }, composition.id)) : panel === 'visual-controls' && visualControlsTabActivated ? (jsx_runtime_1.jsx(VisualControlsContent_1.VisualControlsContent, {})) : !renderingAvailable ? null : (jsx_runtime_1.jsx(RenderQueue_1.RenderQueue, {}))] }));
+            jsx_runtime_1.jsx("div", { style: tabsContainer, children: jsx_runtime_1.jsxs(Tabs_1.Tabs, { children: [visualControlsTabActivated ? (jsx_runtime_1.jsx(Tabs_1.Tab, { selected: panel === 'visual-controls', onClick: onVisualControlsSelected, children: "Controls" })) : null, jsx_runtime_1.jsxs(Tabs_1.Tab, { selected: panel === 'input-props', onClick: onPropsSelected, style: { justifyContent: 'space-between' }, children: ["Props", unsavedChangesExist && composition ? (jsx_runtime_1.jsx(GlobalPropsEditorUpdateButton_1.GlobalPropsEditorUpdateButton, { compositionId: composition.id, currentDefaultProps: currentDefaultProps })) : null] }), renderingAvailable ? (jsx_runtime_1.jsx(RendersTab_1.RendersTab, { onClick: onRendersSelected, selected: panel === 'renders' })) : null] }) }), panel === 'input-props' ? (composition ? (jsx_runtime_1.jsx(DataEditor_1.DataEditor, { unresolvedComposition: composition, defaultProps: currentDefaultProps, setDefaultProps: setDefaultProps, mayShowSaveButton: true, propsEditType: "default-props", saving: saving, setSaving: setSaving, readOnlyStudio: readOnlyStudio }, composition.id)) : null) : panel === 'visual-controls' && visualControlsTabActivated ? (jsx_runtime_1.jsx(VisualControlsContent_1.VisualControlsContent, {})) : !renderingAvailable ? null : (jsx_runtime_1.jsx(RenderQueue_1.RenderQueue, {}))] }));
 };
 exports.OptionsPanel = OptionsPanel;

package/dist/components/PlaybackRatePersistor.js

@@ -5,7 +5,7 @@ const react_1 = require("react");
 const remotion_1 = require("remotion");
 const playbackrate_1 = require("../state/playbackrate");
 const PlaybackRatePersistor = () => {
-    const { setPlaybackRate, playbackRate } = (0, react_1.useContext)(remotion_1.Internals.TimelineContext);
+    const { setPlaybackRate, playbackRate } = remotion_1.Internals.useTimelineContext();
     (0, react_1.useEffect)(() => {
         setPlaybackRate((0, playbackrate_1.loadPlaybackRate)());
     }, [setPlaybackRate]);

package/dist/components/PreviewToolbar.js

@@ -25,6 +25,7 @@ const RenderButton_1 = require("./RenderButton");
 const SizeSelector_1 = require("./SizeSelector");
 const TimelineZoomControls_1 = require("./Timeline/TimelineZoomControls");
 const TimelineInOutToggle_1 = require("./TimelineInOutToggle");
+const TOOLBAR_HEIGHT = 56;
 const container = {
     display: 'flex',
     justifyContent: 'center',
@@ -34,6 +35,7 @@ const container = {
     alignItems: 'center',
     flexDirection: 'row',
     background: colors_1.BACKGROUND,
+    height: TOOLBAR_HEIGHT,
 };
 const mobileContainer = {
     ...container,
@@ -72,7 +74,7 @@ const padding = {
     width: timeline_layout_1.TIMELINE_PADDING,
 };
 const PreviewToolbar = ({ readOnlyStudio, bufferStateDelayInMilliseconds }) => {
-    const { playbackRate, setPlaybackRate } = (0, react_1.useContext)(remotion_1.Internals.TimelineContext);
+    const { playbackRate, setPlaybackRate } = remotion_1.Internals.useTimelineContext();
     const { mediaMuted } = (0, react_1.useContext)(remotion_1.Internals.MediaVolumeContext);
     const { setMediaMuted } = (0, react_1.useContext)(remotion_1.Internals.SetMediaVolumeContext);
     const { canvasContent } = (0, react_1.useContext)(remotion_1.Internals.CompositionManager);
@@ -140,7 +142,7 @@ const PreviewToolbar = ({ readOnlyStudio, bufferStateDelayInMilliseconds }) => {
                             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 })
-                ] })) : 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 }), isFullscreenSupported && jsx_runtime_1.jsx(FullscreenToggle_1.FullScreenToggle, {}), jsx_runtime_1.jsx(layout_1.Flex, {}), isMobileLayout && (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
+                ] })) : 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 }), (0, should_show_render_button_1.shouldShowRenderButton)(readOnlyStudio) ? (jsx_runtime_1.jsx(RenderButton_1.RenderButton, { readOnlyStudio: readOnlyStudio })) : null, jsx_runtime_1.jsx(layout_1.Spacing, { x: 1.5 })
                 ] }), jsx_runtime_1.jsx(PlaybackKeyboardShortcutsManager_1.PlaybackKeyboardShortcutsManager, { setPlaybackRate: setPlaybackRate }), jsx_runtime_1.jsx(PlaybackRatePersistor_1.PlaybackRatePersistor, {}), jsx_runtime_1.jsx("div", { ref: rightScrollIndicatorRef, style: scrollIndicatorRight })

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

@@ -41,6 +41,8 @@ const SchemaLabel = ({ jsonPath, isDefaultValue, onReset, onSave, showSaveButton
         setClickableButtonHovered(false);
     }, []);
     const labelContent = (jsx_runtime_1.jsxs("span", { style: labelStyle, children: [(0, get_schema_label_1.getSchemaLabel)(jsonPath), " ", suffix ? suffix : null] }));
-    return (jsx_runtime_1.jsxs("div", { style: compactStyles, className: scroll_to_default_props_path_1.DEFAULT_PROPS_PATH_CLASSNAME, "data-json-path": jsonPath.join('.'), children: [handleClick ? (jsx_runtime_1.jsx("button", { onPointerEnter: onClickablePointerEnter, onPointerLeave: onClickablePointerLeave, type: "button", onClick: handleClick, style: { border: 'none', padding: 0 }, children: labelContent })) : (labelContent), jsx_runtime_1.jsx(layout_1.Flex, {}), isDefaultValue ? null : jsx_runtime_1.jsx(SchemaResetButton_1.SchemaResetButton, { onClick: onReset }), isDefaultValue ? null : showSaveButton ? (jsx_runtime_1.jsx(SchemaSaveButton_1.SchemaSaveButton, { onClick: onSave, disabled: disableSave })) : null, onRemove ? jsx_runtime_1.jsx(InlineRemoveButton_1.InlineRemoveButton, { onClick: onRemove }) : null] }));
+    return (jsx_runtime_1.jsxs("div", { style: compactStyles, className: scroll_to_default_props_path_1.DEFAULT_PROPS_PATH_CLASSNAME, "data-json-path": jsonPath.join('.'), children: [handleClick ? (
+            // Minus the padding that a button has (user agent padding-line-start)
+            jsx_runtime_1.jsx("button", { onPointerEnter: onClickablePointerEnter, onPointerLeave: onClickablePointerLeave, type: "button", onClick: handleClick, style: { border: 'none', padding: 0 }, children: labelContent })) : (labelContent), jsx_runtime_1.jsx(layout_1.Flex, {}), isDefaultValue ? null : jsx_runtime_1.jsx(SchemaResetButton_1.SchemaResetButton, { onClick: onReset }), isDefaultValue ? null : showSaveButton ? (jsx_runtime_1.jsx(SchemaSaveButton_1.SchemaSaveButton, { onClick: onSave, disabled: disableSave })) : null, onRemove ? jsx_runtime_1.jsx(InlineRemoveButton_1.InlineRemoveButton, { onClick: onRemove }) : null] }));
 };
 exports.SchemaLabel = SchemaLabel;

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

@@ -75,7 +75,9 @@ const ZodArrayEditor = ({ schema, jsonPath, setValue, defaultValue, value, onSav
                         onSave(() => localValue.value, false, false);
                     }, saveDisabledByParent: saveDisabledByParent, saving: saving, showSaveButton: showSaveButton, valid: localValue.zodValidation.success, handleClick: () => setExpanded(!expanded) }) }), expanded ? (jsx_runtime_1.jsx(RevisionContextProvider, { children: jsx_runtime_1.jsxs(SchemaVerticalGuide_1.SchemaVerticalGuide, { isRoot: false, children: [localValue.value.map((child, i) => {
                             var _a;
-                            return (jsx_runtime_1.jsxs(react_1.default.Fragment, { children: [
+                            return (
+                            // eslint-disable-next-line react/no-array-index-key
+                            jsx_runtime_1.jsxs(react_1.default.Fragment, { children: [
                                     jsx_runtime_1.jsx(ZodArrayItemEditor_1.ZodArrayItemEditor, { onChange: onChange, value: child, elementSchema: arrayElement, index: i, jsonPath: jsonPath, defaultValue: (_a = defaultValue === null || defaultValue === void 0 ? void 0 : defaultValue[i]) !== null && _a !== void 0 ? _a : (0, create_zod_values_1.createZodValues)(arrayElement, z, zodTypes), onSave: onSave, showSaveButton: showSaveButton, saving: saving, saveDisabledByParent: saveDisabledByParent, mayPad: mayPad, mayRemove: true }), jsx_runtime_1.jsx(SchemaSeparationLine_1.SchemaArrayItemSeparationLine, { schema: schema, index: i, onChange: onChange, isLast: i === localValue.value.length - 1, showAddButton: true })
                                 ] }, `${i}${localValue.keyStabilityRevision}`));
                         }), value.length === 0 ? (jsx_runtime_1.jsx(SchemaSeparationLine_1.SchemaArrayItemSeparationLine, { schema: schema, index: 0, onChange: onChange, isLast: true, showAddButton: true })) : null] }) })) : null, jsx_runtime_1.jsx(ZodFieldValidation_1.ZodFieldValidation, { path: jsonPath, localValue: localValue })

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

@@ -23,7 +23,9 @@ const ZodFieldValidation = ({ localValue, path }) => {
     }
     return (jsx_runtime_1.jsxs("div", { style: legend, children: [
             jsx_runtime_1.jsx(ValidationMessage_1.ValidationMessage, { align: "flex-start", message: zodValidation.error.format()._errors[0], type: "error" }), jsx_runtime_1.jsx(layout_1.Spacing, { x: 0.5 }), jsx_runtime_1.jsx(InfoBubble_1.InfoBubble, { title: "Zod validation failure", children: jsx_runtime_1.jsxs("div", { style: stackTrace, children: [
-                        jsx_runtime_1.jsx("div", { style: stackTraceLabel, children: "Zod Validation has failed:" }), zodValidation.error.issues.map((error, index) => (jsx_runtime_1.jsxs("div", { style: stackTraceLabel, children: ["Type: ", error.code, " ",
+                        jsx_runtime_1.jsx("div", { style: stackTraceLabel, children: "Zod Validation has failed:" }), zodValidation.error.issues.map((error, index) => (
+                        // eslint-disable-next-line react/no-array-index-key
+                        jsx_runtime_1.jsxs("div", { style: stackTraceLabel, children: ["Type: ", error.code, " ",
                                 jsx_runtime_1.jsx("br", {}),
                                 "Message: ", error.message, jsx_runtime_1.jsx("br", {}),
                                 "Path: ", path.join('.')] }, index)))] }) }), jsx_runtime_1.jsx(layout_1.Spacing, { x: 0.5 })

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

@@ -75,7 +75,9 @@ const ZodTupleEditor = ({ schema, jsonPath, setValue, defaultValue, value, onSav
                         onSave(() => localValue.value, false, false);
                     }, saveDisabledByParent: saveDisabledByParent, saving: saving, showSaveButton: showSaveButton, valid: localValue.zodValidation.success, handleClick: () => setExpanded(!expanded) }) }), expanded ? (jsx_runtime_1.jsx(RevisionContextProvider, { children: jsx_runtime_1.jsxs(SchemaVerticalGuide_1.SchemaVerticalGuide, { isRoot: false, children: [localValue.value.map((child, i) => {
                             var _a;
-                            return (jsx_runtime_1.jsxs(react_1.default.Fragment, { children: [
+                            return (
+                            // eslint-disable-next-line react/no-array-index-key
+                            jsx_runtime_1.jsxs(react_1.default.Fragment, { children: [
                                     jsx_runtime_1.jsx(ZodTupleItemEditor_1.ZodTupleItemEditor, { onChange: onChange, value: child, tupleItems: tupleItems, index: i, jsonPath: jsonPath, defaultValue: (_a = defaultValue === null || defaultValue === void 0 ? void 0 : defaultValue[i]) !== null && _a !== void 0 ? _a : (0, create_zod_values_1.createZodValues)(tupleItems[i], z, zodTypes), onSave: onSave, showSaveButton: showSaveButton, saving: saving, saveDisabledByParent: saveDisabledByParent, mayPad: mayPad }), jsx_runtime_1.jsx(SchemaSeparationLine_1.SchemaArrayItemSeparationLine, { schema: schema, index: i, onChange: onChange, isLast: i === localValue.value.length - 1, showAddButton: false })
                                 ] }, `${i}${localValue.keyStabilityRevision}`));
                         }), value.length === 0 ? (jsx_runtime_1.jsx(SchemaSeparationLine_1.SchemaArrayItemSeparationLine, { schema: schema, index: 0, onChange: onChange, isLast: true, showAddButton: false })) : null] }) })) : null, jsx_runtime_1.jsx(ZodFieldValidation_1.ZodFieldValidation, { path: jsonPath, localValue: localValue })

package/dist/components/RenderModal/WebRenderModalAudio.js

@@ -40,6 +40,8 @@ const humanReadableWebAudioCodec = (audioCodec) => {
             return 'Vorbis';
         case 'pcm-s16':
             return 'Lossless (PCM)';
+        case 'flac':
+            return 'FLAC';
         default:
             throw new Error(`Unsupported audio codec: ${audioCodec}`);
     }

package/dist/components/RenderModal/WebRenderModalBasic.js

@@ -26,9 +26,16 @@ const containerLabels = {
     mp3: 'MP3',
     aac: 'AAC',
     ogg: 'OGG',
+    flac: 'FLAC',
 };
 const videoContainers = ['mp4', 'webm', 'mkv', 'mov'];
-const audioContainers = ['wav', 'mp3', 'aac', 'ogg'];
+const audioContainers = [
+    'wav',
+    'mp3',
+    'aac',
+    'ogg',
+    'flac',
+];
 const codecLabels = {
     h264: 'H.264',
     h265: 'H.265',

package/dist/components/RendersTab.js

@@ -3,7 +3,6 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.RendersTab = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
-const remotion_1 = require("remotion");
 const colors_1 = require("../helpers/colors");
 const layout_1 = require("./layout");
 const context_1 = require("./RenderQueue/context");
@@ -27,15 +26,8 @@ const badge = {
 };
 const RendersTab = ({ selected, onClick }) => {
     const { jobs } = (0, react_1.useContext)(context_1.RenderQueueContext);
-    const { canvasContent } = (0, react_1.useContext)(remotion_1.Internals.CompositionManager);
     const failedJobs = jobs.filter((j) => j.status === 'failed').length;
     const jobCount = jobs.length;
-    const isActuallySelected = (0, react_1.useMemo)(() => {
-        if (!canvasContent || canvasContent.type !== 'composition') {
-            return true;
-        }
-        return selected;
-    }, [canvasContent, selected]);
     const badgeStyle = (0, react_1.useMemo)(() => {
         return {
             ...badge,
@@ -46,7 +38,7 @@ const RendersTab = ({ selected, onClick }) => {
             borderColor: colors_1.LIGHT_TEXT,
         };
     }, [failedJobs]);
-    return (jsx_runtime_1.jsx(Tabs_1.Tab, { selected: isActuallySelected, onClick: onClick, children: jsx_runtime_1.jsxs("div", { style: row, children: ["Renders", jobCount > 0 ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
+    return (jsx_runtime_1.jsx(Tabs_1.Tab, { selected: selected, onClick: onClick, children: jsx_runtime_1.jsxs("div", { style: row, children: ["Renders", jobCount > 0 ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
                         jsx_runtime_1.jsx(layout_1.Flex, {}), jsx_runtime_1.jsx("div", { style: badgeStyle, children: jobCount })
                     ] })) : null] }) }));
 };

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

@@ -0,0 +1,9 @@
+import React from 'react';
+import type { SchemaFieldInfo } from '../../helpers/timeline-layout';
+export declare const TimelineBooleanField: React.FC<{
+    readonly field: SchemaFieldInfo;
+    readonly codeValue: unknown;
+    readonly effectiveValue: unknown;
+    readonly canUpdate: boolean;
+    readonly onSave: (key: string, value: unknown) => Promise<void>;
+}>;

package/dist/components/Timeline/TimelineBooleanField.js

@@ -0,0 +1,20 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TimelineBooleanField = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const Checkbox_1 = require("../Checkbox");
+const checkboxContainer = {
+    marginLeft: 8,
+};
+const TimelineBooleanField = ({ field, codeValue, effectiveValue, canUpdate, onSave }) => {
+    const checked = Boolean(effectiveValue);
+    const onChange = (0, react_1.useCallback)(() => {
+        const newValue = !checked;
+        if (canUpdate && newValue !== codeValue) {
+            onSave(field.key, newValue);
+        }
+    }, [canUpdate, onSave, field.key, checked, codeValue]);
+    return (jsx_runtime_1.jsx("div", { style: checkboxContainer, children: jsx_runtime_1.jsx(Checkbox_1.Checkbox, { checked: checked, onChange: onChange, name: field.key, disabled: !canUpdate }) }));
+};
+exports.TimelineBooleanField = TimelineBooleanField;

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

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

package/dist/components/Timeline/TimelineEmptyState.js

@@ -0,0 +1,15 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TimelineEmptyState = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const colors_1 = require("../../helpers/colors");
+const container = {
+    display: 'flex',
+    flex: 1,
+    height: 0,
+    backgroundColor: colors_1.BACKGROUND,
+};
+const TimelineEmptyState = () => {
+    return jsx_runtime_1.jsx("div", { style: container });
+};
+exports.TimelineEmptyState = TimelineEmptyState;

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

@@ -1,7 +1,12 @@
+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;
+    readonly nestedDepth: number;
+    readonly nodePath: SequenceNodePath | null;
 }>;

package/dist/components/Timeline/TimelineExpandedSection.js

@@ -1,22 +1,59 @@
 "use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.TimelineExpandedSection = void 0;
+exports.TimelineExpandedSection = exports.EXPANDED_SECTION_PADDING_RIGHT = exports.EXPANDED_SECTION_PADDING_LEFT = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
+const react_1 = __importStar(require("react"));
 const colors_1 = require("../../helpers/colors");
 const timeline_layout_1 = require("../../helpers/timeline-layout");
 const TimelineFieldRow_1 = require("./TimelineFieldRow");
+exports.EXPANDED_SECTION_PADDING_LEFT = 28;
+exports.EXPANDED_SECTION_PADDING_RIGHT = 10;
 const expandedSectionBase = {
     color: 'white',
     fontFamily: 'Arial, Helvetica, sans-serif',
     fontSize: 12,
     display: 'flex',
     flexDirection: 'column',
-    paddingLeft: 28,
-    paddingRight: 10,
     borderBottom: `1px solid ${colors_1.TIMELINE_TRACK_SEPARATOR}`,
 };
-const TimelineExpandedSection = ({ sequence, originalLocation }) => {
+const separator = {
+    height: 1,
+    backgroundColor: colors_1.TIMELINE_TRACK_SEPARATOR,
+};
+const TimelineExpandedSection = ({ sequence, originalLocation, nestedDepth, nodePath }) => {
     var _a;
     var _b;
     const overrideId = (_b = (_a = sequence.controls) === null || _a === void 0 ? void 0 : _a.overrideId) !== null && _b !== void 0 ? _b : sequence.id;
@@ -42,8 +79,9 @@ const TimelineExpandedSection = ({ sequence, originalLocation }) => {
         };
     }, [expandedHeight]);
     return (jsx_runtime_1.jsx("div", { style: style, children: schemaFields
-            ? schemaFields.map((field) => {
-                return (jsx_runtime_1.jsx(TimelineFieldRow_1.TimelineFieldRow, { field: field, overrideId: overrideId, validatedLocation: validatedLocation }, field.key));
+            ? 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 })
+                    ] }, field.key));
             })
             : 'No schema' }));
 };

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

@@ -1,3 +1,4 @@
+import type { SequenceNodePath } from '@remotion/studio-shared';
 import React from 'react';
 import type { CodePosition } from '../../error-overlay/react-overlay/utils/get-source-map';
 import type { SchemaFieldInfo } from '../../helpers/timeline-layout';
@@ -5,4 +6,6 @@ export declare const TimelineFieldRow: React.FC<{
     readonly field: SchemaFieldInfo;
     readonly overrideId: string;
     readonly validatedLocation: CodePosition | null;
+    readonly nestedDepth: number;
+    readonly nodePath: SequenceNodePath | null;
 }>;