@remotion/studio 4.0.500 → 4.0.502

package/dist/components/QuickSwitcher/QuickSwitcherContent.js

@@ -97,13 +97,15 @@ const mapModeToQuery = (mode) => {
     }
     throw new Error('no mode' + mode);
 };
-const QuickSwitcherContent = ({ initialMode, invocationTimestamp, readOnlyStudio, assetSelection }) => {
+const QuickSwitcherContent = ({ initialMode, invocationTimestamp, readOnlyStudio, assetSelection, compositionSelection, }) => {
     const { compositions } = (0, react_1.useContext)(remotion_1.Internals.CompositionManager);
     const staticFiles = (0, use_static_files_1.useStaticFiles)();
     const [state, setState] = (0, react_1.useState)(() => {
         return {
             query: assetSelection === null
-                ? mapModeToQuery(initialMode)
+                ? compositionSelection === null
+                    ? mapModeToQuery(initialMode)
+                    : ''
                 : assetSelection.initialQuery,
             selectedIndex: 0,
         };
@@ -111,11 +113,13 @@ const QuickSwitcherContent = ({ initialMode, invocationTimestamp, readOnlyStudio
     (0, react_1.useEffect)(() => {
         setState({
             query: assetSelection === null
-                ? mapModeToQuery(initialMode)
+                ? compositionSelection === null
+                    ? mapModeToQuery(initialMode)
+                    : ''
                 : assetSelection.initialQuery,
             selectedIndex: 0,
         });
-    }, [assetSelection, initialMode, invocationTimestamp]);
+    }, [assetSelection, compositionSelection, initialMode, invocationTimestamp]);
     const inputRef = (0, react_1.useRef)(null);
     const selectComposition = (0, InitialCompositionLoader_1.useSelectComposition)();
     const selectAsset = (0, use_select_asset_1.useSelectAsset)();
@@ -124,7 +128,11 @@ const QuickSwitcherContent = ({ initialMode, invocationTimestamp, readOnlyStudio
     const [docResults, setDocResults] = (0, react_1.useState)({ type: 'initial' });
     const { setSelectedModal } = (0, react_1.useContext)(modals_1.ModalsContext);
     const keybindings = (0, use_keybinding_1.useKeybinding)();
-    const mode = assetSelection !== null ? 'assets' : mapQueryToMode(state.query);
+    const mode = assetSelection !== null
+        ? 'assets'
+        : compositionSelection !== null
+            ? 'compositions'
+            : mapQueryToMode(state.query);
     const actualQuery = (0, react_1.useMemo)(() => {
         return stripQuery(state.query);
     }, [state.query]);
@@ -148,7 +156,7 @@ const QuickSwitcherContent = ({ initialMode, invocationTimestamp, readOnlyStudio
             return docResults.results;
         }
         if (mode === 'assets') {
-            return (0, fuzzy_search_1.fuzzySearch)(assetSearch.query, assetSearch.assets.map((asset) => {
+            const assetResults = (0, fuzzy_search_1.fuzzySearch)(assetSearch.query, assetSearch.assets.map((asset) => {
                 return {
                     id: 'asset-' + asset.name,
                     title: asset.name,
@@ -166,14 +174,36 @@ const QuickSwitcherContent = ({ initialMode, invocationTimestamp, readOnlyStudio
                     },
                 };
             }));
+            if (assetSelection === null) {
+                return assetResults;
+            }
+            return [
+                {
+                    id: 'select-file',
+                    title: 'Select file...',
+                    type: 'select-file',
+                    onSelected: () => {
+                        assetSelection.onSelectFile();
+                        setSelectedModal(null);
+                    },
+                },
+                ...assetResults,
+            ];
         }
-        return (0, fuzzy_search_1.fuzzySearch)(actualQuery, compositions.map((c) => {
+        return (0, fuzzy_search_1.fuzzySearch)(actualQuery, compositions
+            .filter((c) => c.id !== (compositionSelection === null || compositionSelection === void 0 ? void 0 : compositionSelection.excludeCompositionId))
+            .map((c) => {
             return {
                 id: 'composition-' + c.id,
                 title: c.id,
                 type: 'composition',
                 onSelected: () => {
                     var _a;
+                    if (compositionSelection !== null) {
+                        compositionSelection.onSelected(c);
+                        setSelectedModal(null);
+                        return;
+                    }
                     selectComposition(c, true);
                     setSelectedModal(null);
                     const selector = `.__remotion-composition[data-compname="${c.id}"]`;
@@ -195,6 +225,7 @@ const QuickSwitcherContent = ({ initialMode, invocationTimestamp, readOnlyStudio
         docResults,
         assetSearch,
         assetSelection,
+        compositionSelection,
         selectAsset,
         selectComposition,
         setSelectedModal,
@@ -337,9 +368,11 @@ const QuickSwitcherContent = ({ initialMode, invocationTimestamp, readOnlyStudio
             height: 300,
         };
     }, [showKeyboardShortcuts]);
-    return (jsx_runtime_1.jsxs("div", { style: container, children: [assetSelection === null && (jsx_runtime_1.jsxs("div", { style: modeSelector, children: [
+    return (jsx_runtime_1.jsxs("div", { style: container, children: [assetSelection === null && compositionSelection === null && (jsx_runtime_1.jsxs("div", { style: modeSelector, children: [
                     jsx_runtime_1.jsx("button", { onClick: onCompositionsSelected, style: mode === 'compositions' ? modeActive : modeInactive, type: "button", children: "Compositions" }), jsx_runtime_1.jsx(layout_1.Spacing, { x: 1 }), jsx_runtime_1.jsx("button", { onClick: onAssetsSelected, style: mode === 'assets' ? modeActive : modeInactive, type: "button", children: "Assets" }), jsx_runtime_1.jsx(layout_1.Spacing, { x: 1 }), jsx_runtime_1.jsx("button", { onClick: onActionsSelected, style: mode === 'commands' ? modeActive : modeInactive, type: "button", children: "Actions" }), jsx_runtime_1.jsx(layout_1.Spacing, { x: 1 }), jsx_runtime_1.jsx("button", { onClick: onDocSearchSelected, style: mode === 'docs' ? modeActive : modeInactive, type: "button", children: "Documentation" })
-                ] })), jsx_runtime_1.jsxs("div", { style: assetSelection === null ? content : contentWithoutModeSelector, children: [
+                ] })), jsx_runtime_1.jsxs("div", { style: assetSelection === null && compositionSelection === null
+                    ? content
+                    : contentWithoutModeSelector, children: [
                     jsx_runtime_1.jsx(RemInput_1.RemotionInput, { ref: inputRef, type: "text", style: input, autoFocus: true, status: "ok", value: state.query, onChange: onTextChange, placeholder: placeholder, rightAlign: false }), showKeyboardShortcuts ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
                             jsx_runtime_1.jsx(layout_1.Spacing, { x: 2 }),
                             " ",

package/dist/components/QuickSwitcher/QuickSwitcherResult.d.ts

@@ -8,6 +8,8 @@ type QuickSwitcherResultDetail = {
     compositionType: 'composition' | 'still';
 } | {
     type: 'menu-item';
+} | {
+    type: 'select-file';
 } | {
     type: 'search-result';
     titleLine: string;

package/dist/components/QuickSwitcher/QuickSwitcherResult.js

@@ -6,6 +6,7 @@ const react_1 = require("react");
 const colors_1 = require("../../helpers/colors");
 const use_keybinding_1 = require("../../helpers/use-keybinding");
 const still_1 = require("../../icons/still");
+const upload_1 = require("../../icons/upload");
 const video_1 = require("../../icons/video");
 const AssetFileIcon_1 = require("../AssetFileIcon");
 const layout_1 = require("../layout");
@@ -35,6 +36,11 @@ const iconStyle = {
     height: 18,
     flexShrink: 0,
 };
+const selectFileIconStyle = {
+    ...iconStyle,
+    width: 20,
+    height: 20,
+};
 const labelContainer = {
     overflow: 'hidden',
     flex: 1,
@@ -95,7 +101,7 @@ const QuickSwitcherResult = ({ result, selected }) => {
             fontSize: shared_1.QUICK_SWITCHER_RESULT_LABEL_FONT_SIZE,
         };
     }, [hovered, result.type, selected]);
-    return (jsx_runtime_1.jsxs("div", { ref: ref, style: style, onClick: result.onSelected, children: [result.type === 'composition' ? (result.compositionType === 'still' ? (jsx_runtime_1.jsx(still_1.StillIcon, { color: selected || hovered ? colors_1.WHITE : colors_1.LIGHT_TEXT, style: iconStyle })) : (jsx_runtime_1.jsx(video_1.FilmIcon, { color: selected || hovered ? colors_1.WHITE : colors_1.LIGHT_TEXT, style: iconStyle }))) : result.type === 'asset' ? (jsx_runtime_1.jsx(AssetFileIcon_1.AssetFileIcon, { fileType: result.fileType, color: selected || hovered ? colors_1.WHITE : colors_1.LIGHT_TEXT, style: iconStyle })) : null, jsx_runtime_1.jsx(layout_1.Spacing, { x: 1 }), jsx_runtime_1.jsx("div", { style: labelContainer, children: result.type === 'search-result' ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
+    return (jsx_runtime_1.jsxs("div", { ref: ref, style: style, onClick: result.onSelected, children: [result.type === 'composition' ? (result.compositionType === 'still' ? (jsx_runtime_1.jsx(still_1.StillIcon, { color: selected || hovered ? colors_1.WHITE : colors_1.LIGHT_TEXT, style: iconStyle })) : (jsx_runtime_1.jsx(video_1.FilmIcon, { color: selected || hovered ? colors_1.WHITE : colors_1.LIGHT_TEXT, style: iconStyle }))) : result.type === 'asset' ? (jsx_runtime_1.jsx(AssetFileIcon_1.AssetFileIcon, { fileType: result.fileType, color: selected || hovered ? colors_1.WHITE : colors_1.LIGHT_TEXT, style: iconStyle })) : result.type === 'select-file' ? (jsx_runtime_1.jsx(upload_1.UploadIcon, { color: selected || hovered ? colors_1.WHITE : colors_1.LIGHT_TEXT, style: selectFileIconStyle })) : null, jsx_runtime_1.jsx(layout_1.Spacing, { x: 1 }), jsx_runtime_1.jsx("div", { style: labelContainer, children: result.type === 'search-result' ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
                         jsx_runtime_1.jsx("div", { 
                             // eslint-disable-next-line react/no-danger
                             dangerouslySetInnerHTML: {

package/dist/components/RenderButton.d.ts

@@ -3,4 +3,5 @@ export type RenderType = 'server-render' | 'client-render' | 'render-command';
 export declare const RenderButton: React.FC<{
     readonly readOnlyStudio: boolean;
     readonly size?: 'default' | 'compact';
+    readonly hidden: boolean;
 }>;

package/dist/components/RenderButton.js

@@ -123,7 +123,7 @@ const getInitialRenderType = (readOnlyStudio) => {
     }
     return 'server-render';
 };
-const RenderButton = ({ readOnlyStudio, size: controlSize = 'default' }) => {
+const RenderButton = ({ readOnlyStudio, size: controlSize = 'default', hidden }) => {
     const { inFrame, outFrame } = (0, in_out_1.useTimelineInOutFramePosition)();
     const { setSelectedModal } = (0, react_1.useContext)(modals_1.ModalsContext);
     const [preferredRenderType, setPreferredRenderType] = (0, react_1.useState)(() => getInitialRenderType(readOnlyStudio));
@@ -437,15 +437,17 @@ const RenderButton = ({ readOnlyStudio, size: controlSize = 'default' }) => {
         return null;
     }
     return (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
-            jsx_runtime_1.jsx("button", { style: { display: 'none' }, id: "render-modal-button-server", disabled: !canServerRender, onClick: () => openServerRenderModal(false), type: "button" }), ' ', jsx_runtime_1.jsx("button", { style: { display: 'none' }, id: "render-modal-button-client", onClick: openClientRenderModal, type: "button" }), jsx_runtime_1.jsxs("div", { ref: containerRef, style: containerStyle, title: tooltip, children: [
-                    jsx_runtime_1.jsx("button", { type: "button", style: controlSize === 'compact' ? compactMainButtonStyle : mainButtonStyle, onClick: onClick, id: "render-modal-button", children: jsx_runtime_1.jsxs(layout_1.Row, { align: "center", style: controlSize === 'compact'
+            jsx_runtime_1.jsx("button", { style: { display: 'none' }, id: "render-modal-button-server", disabled: !canServerRender, onClick: () => openServerRenderModal(false), type: "button" }), ' ', jsx_runtime_1.jsx("button", { style: { display: 'none' }, id: "render-modal-button-client", onClick: openClientRenderModal, type: "button" }), jsx_runtime_1.jsx("button", { style: { display: 'none' }, id: "render-modal-button-command", onClick: () => openServerRenderModal(true), type: "button" }), hidden ? (jsx_runtime_1.jsx("button", { style: { display: 'none' }, onClick: onClick, id: "render-modal-button", type: "button" })) : (jsx_runtime_1.jsxs("div", { ref: containerRef, style: containerStyle, title: tooltip, children: [
+                    jsx_runtime_1.jsx("button", { type: "button", style: controlSize === 'compact'
+                            ? compactMainButtonStyle
+                            : mainButtonStyle, onClick: onClick, id: "render-modal-button", children: jsx_runtime_1.jsxs(layout_1.Row, { align: "center", style: controlSize === 'compact'
                                 ? compactMainButtonContent
                                 : mainButtonContent, children: [
                                 jsx_runtime_1.jsx(render_1.ThinRenderIcon, { fill: colors_1.CURRENT_COLOR_LOWERCASE, svgProps: iconStyle }), jsx_runtime_1.jsx(layout_1.Spacing, { x: controlSize === 'compact' ? 0.75 : 1 }), jsx_runtime_1.jsx("span", { style: controlSize === 'compact' ? compactLabel : label, children: renderLabel })
                             ] }) }), jsx_runtime_1.jsx("div", { style: dividerStyle }), jsx_runtime_1.jsx("button", { ref: dropdownRef, type: "button", style: controlSize === 'compact'
                             ? compactDropdownTriggerStyle
                             : dropdownTriggerStyle, className: is_menu_item_1.MENU_INITIATOR_CLASSNAME, onPointerDown: onPointerDown, onClick: onClickDropdown, children: jsx_runtime_1.jsx(caret_1.CaretDown, {}) })
-                ] }), portalStyle
+                ] })), portalStyle
                 ? react_dom_1.default.createPortal(jsx_runtime_1.jsx("div", { style: styles_1.fullScreenOverlay, children: jsx_runtime_1.jsx("div", { style: styles_1.outerPortal, className: "css-reset", children: jsx_runtime_1.jsx(z_index_1.HigherZIndex, { onOutsideClick: onHideDropdown, onEscape: onHideDropdown, children: jsx_runtime_1.jsx("div", { style: portalStyle, onPointerDown: onMenuPointerDown, children: jsx_runtime_1.jsx(MenuContent_1.MenuContent, { onNextMenu: () => { }, onPreviousMenu: () => { }, values: dropdownValues, onHide: onHideDropdown, leaveLeftSpace: false, preselectIndex: dropdownValues.findIndex((v) => v.id === renderType), topItemCanBeUnselected: false, fixedHeight: derivedMaxHeight }) }) }) }) }), (0, portals_1.getPortal)(currentZIndex))
                 : null] }));
 };

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

@@ -1,2 +1 @@
-export declare const downloadBlob: (blob: Blob, filename: string) => void;
 export declare const ClientRenderQueueProcessor: React.FC;

package/dist/components/RenderQueue/ClientRenderQueueProcessor.js

@@ -1,22 +1,11 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.ClientRenderQueueProcessor = exports.downloadBlob = void 0;
+exports.ClientRenderQueueProcessor = void 0;
 const web_renderer_1 = require("@remotion/web-renderer");
 const react_1 = require("react");
 const save_render_output_1 = require("../../api/save-render-output");
+const download_blob_1 = require("../../helpers/download-blob");
 const context_1 = require("./context");
-const downloadBlob = (blob, filename) => {
-    const url = URL.createObjectURL(blob);
-    const a = document.createElement('a');
-    a.href = url;
-    const cleanFilename = filename.includes('/')
-        ? filename.substring(filename.lastIndexOf('/') + 1)
-        : filename;
-    a.download = cleanFilename;
-    a.click();
-    URL.revokeObjectURL(url);
-};
-exports.downloadBlob = downloadBlob;
 const ClientRenderQueueProcessor = () => {
     const { getAbortController, getCompositionForJob, updateClientJobProgress, markClientJobSaving, markClientJobDone, markClientJobFailed, markClientJobCancelled, setProcessJobCallback, } = (0, react_1.useContext)(context_1.RenderQueueContext);
     const processStillJob = (0, react_1.useCallback)(async (job, signal) => {
@@ -126,7 +115,7 @@ const ClientRenderQueueProcessor = () => {
             markClientJobSaving(job.id);
             const getBlob = () => Promise.resolve(blob);
             const downloadAndFinish = () => {
-                (0, exports.downloadBlob)(blob, job.outName);
+                (0, download_blob_1.downloadBlob)(blob, job.outName);
                 markClientJobDone(job.id, metadata, getBlob);
             };
             if (window.remotion_isReadOnlyStudio) {

package/dist/components/RenderQueue/RenderQueueDownloadItem.js

@@ -4,9 +4,9 @@ exports.RenderQueueDownloadItem = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const colors_1 = require("../../helpers/colors");
+const download_blob_1 = require("../../helpers/download-blob");
 const InlineAction_1 = require("../InlineAction");
 const NotificationCenter_1 = require("../Notifications/NotificationCenter");
-const ClientRenderQueueProcessor_1 = require("./ClientRenderQueueProcessor");
 const RenderQueueDownloadItem = ({ job }) => {
     const onClick = (0, react_1.useCallback)((e) => {
         e.stopPropagation();
@@ -16,7 +16,7 @@ const RenderQueueDownloadItem = ({ job }) => {
         job
             .getBlob()
             .then((blob) => {
-            (0, ClientRenderQueueProcessor_1.downloadBlob)(blob, job.outName);
+            (0, download_blob_1.downloadBlob)(blob, job.outName);
         })
             .catch((err) => {
             (0, NotificationCenter_1.showNotification)(`Could not download file: ${err.message}`, 2000);

package/dist/components/SelectedOutlineElement.js

@@ -1077,10 +1077,7 @@ const SelectedOutlineElement = ({ allDragTargets, allDragOutlines, allRotationDr
                             },
                         ],
                     });
-                    if (result.success) {
-                        (0, NotificationCenter_1.showNotification)('Removed sequence from source file', 2000);
-                    }
-                    else {
+                    if (!result.success) {
                         (0, NotificationCenter_1.showNotification)(result.reason, 4000);
                     }
                 }

package/dist/components/SelectedOutlineOverlay.js

@@ -45,6 +45,7 @@ const use_keybinding_1 = require("../helpers/use-keybinding");
 const editor_guides_1 = require("../state/editor-guides");
 const editor_outlines_1 = require("../state/editor-outlines");
 const scale_lock_1 = require("../state/scale-lock");
+const timeline_sequence_hover_1 = require("../state/timeline-sequence-hover");
 const NotificationCenter_1 = require("./Notifications/NotificationCenter");
 const selected_outline_drag_1 = require("./selected-outline-drag");
 const selected_outline_measurement_1 = require("./selected-outline-measurement");
@@ -419,12 +420,12 @@ const SelectedOutlineOverlay = ({ compositionHeight, compositionWidth, scale, tr
     const { setPropStatuses, setDragOverrides, clearDragOverrides } = (0, react_1.useContext)(remotion_1.Internals.VisualModeSettersContext);
     const { getScaleLockState } = (0, react_1.useContext)(scale_lock_1.ScaleLockContext);
     const { editorShowOutlines } = (0, react_1.useContext)(editor_outlines_1.EditorShowOutlinesContext);
+    const { hoveredSequence, setHoveredSequence } = (0, react_1.useContext)(timeline_sequence_hover_1.TimelineSequenceHoverContext);
     const { editorShowGuides, guidesList } = (0, react_1.useContext)(editor_guides_1.EditorShowGuidesContext);
     const { frameBack, frameForward, getCurrentFrame, seek } = player_1.PlayerInternals.usePlayer();
     const keybindings = (0, use_keybinding_1.useKeybinding)();
     const timelinePosition = remotion_1.Internals.Timeline.useTimelinePosition();
     const [outlines, setOutlines] = (0, react_1.useState)([]);
-    const [hoveredOutlineKey, setHoveredOutlineKey] = (0, react_1.useState)(null);
     const [draggingOutline, setDraggingOutline] = (0, react_1.useState)(false);
     const [activeSnapPoints, setActiveSnapPoints] = (0, react_1.useState)([]);
     const overlayRef = (0, react_1.useRef)(null);
@@ -435,12 +436,20 @@ const SelectedOutlineOverlay = ({ compositionHeight, compositionWidth, scale, tr
     const onDraggingChange = react_1.default.useCallback((dragging) => {
         setDraggingOutline(dragging);
         if (dragging) {
-            setHoveredOutlineKey(null);
+            setHoveredSequence((currentHover) => (currentHover === null || currentHover === void 0 ? void 0 : currentHover.source) === 'canvas' ? null : currentHover);
         }
         else {
             setActiveSnapPoints([]);
         }
-    }, []);
+    }, [setHoveredSequence]);
+    const onHoverChange = (0, react_1.useCallback)((key) => {
+        setHoveredSequence((currentHover) => {
+            if (key !== null) {
+                return { key, source: 'canvas' };
+            }
+            return (currentHover === null || currentHover === void 0 ? void 0 : currentHover.source) === 'canvas' ? null : currentHover;
+        });
+    }, [setHoveredSequence]);
     const onSnapPointsChange = (0, react_1.useCallback)((snapPoints) => {
         setActiveSnapPoints(snapPoints);
     }, []);
@@ -757,11 +766,11 @@ const SelectedOutlineOverlay = ({ compositionHeight, compositionWidth, scale, tr
         timelinePosition,
     ]);
     (0, react_1.useEffect)(() => {
-        if (hoveredOutlineKey !== null &&
-            !outlineTargets.some((target) => target.key === hoveredOutlineKey)) {
-            setHoveredOutlineKey(null);
+        if ((hoveredSequence === null || hoveredSequence === void 0 ? void 0 : hoveredSequence.source) === 'canvas' &&
+            !outlineTargets.some((target) => target.key === hoveredSequence.key)) {
+            setHoveredSequence((currentHover) => (currentHover === null || currentHover === void 0 ? void 0 : currentHover.source) === 'canvas' ? null : currentHover);
         }
-    }, [hoveredOutlineKey, outlineTargets]);
+    }, [hoveredSequence, outlineTargets, setHoveredSequence]);
     const targetsByKey = (0, react_1.useMemo)(() => {
         return new Map(outlineTargets.map((target) => [target.key, target]));
     }, [outlineTargets]);
@@ -1073,6 +1082,6 @@ const SelectedOutlineOverlay = ({ compositionHeight, compositionWidth, scale, tr
         return null;
     }
     return (jsx_runtime_1.jsxs("svg", { ref: overlayRef, style: outlineContainer, width: "100%", height: "100%", "aria-hidden": "true", children: [
-            jsx_runtime_1.jsx(SelectedOutlineSnapIndicators, { activeSnapPoints: activeSnapPoints, compositionHeight: compositionHeight, compositionWidth: compositionWidth, scale: scale }), outlinesForRendering.map((outline) => (jsx_runtime_1.jsx(SelectedOutlineElement_1.SelectedOutlineElement, { allDragTargets: allDragTargets, allDragOutlines: allDragOutlines, allRotationDragTargets: allRotationDragTargets, allScaleDragTargets: allScaleDragTargets, dragging: draggingOutline, hovered: hoveredOutlineKey === outline.key, outline: outline, onDraggingChange: onDraggingChange, onHoverChange: setHoveredOutlineKey, onSnapPointsChange: onSnapPointsChange, onSelect: selectOutlineItem, scale: scale, snapTargets: snapTargets, target: targetsByKey.get(outline.key) }, outline.key))), outlinesForRendering.map((outline) => (jsx_runtime_1.jsx(SelectedOutlineElement_1.SelectedOutlineTransformOriginHandle, { outline: outline, onDraggingChange: onDraggingChange, target: targetsByKey.get(outline.key) }, `${outline.key}-transform-origin`))), outlinesForRendering.map((outline) => (jsx_runtime_1.jsx(SelectedOutlineUvControls_1.SelectedOutlineUvHandleConnectionLayer, { outline: outline, target: targetsByKey.get(outline.key) }, `${outline.key}-uv-connection-lines`))), outlinesForRendering.map((outline) => (jsx_runtime_1.jsx(SelectedOutlineUvControls_1.SelectedOutlineUvHandleCircleLayer, { onDraggingChange: onDraggingChange, onSelect: selectOutlineItem, outline: outline, target: targetsByKey.get(outline.key) }, `${outline.key}-uv-handles`)))] }));
+            jsx_runtime_1.jsx(SelectedOutlineSnapIndicators, { activeSnapPoints: activeSnapPoints, compositionHeight: compositionHeight, compositionWidth: compositionWidth, scale: scale }), outlinesForRendering.map((outline) => (jsx_runtime_1.jsx(SelectedOutlineElement_1.SelectedOutlineElement, { allDragTargets: allDragTargets, allDragOutlines: allDragOutlines, allRotationDragTargets: allRotationDragTargets, allScaleDragTargets: allScaleDragTargets, dragging: draggingOutline, hovered: (hoveredSequence === null || hoveredSequence === void 0 ? void 0 : hoveredSequence.key) === outline.key, outline: outline, onDraggingChange: onDraggingChange, onHoverChange: onHoverChange, onSnapPointsChange: onSnapPointsChange, onSelect: selectOutlineItem, scale: scale, snapTargets: snapTargets, target: targetsByKey.get(outline.key) }, outline.key))), outlinesForRendering.map((outline) => (jsx_runtime_1.jsx(SelectedOutlineElement_1.SelectedOutlineTransformOriginHandle, { outline: outline, onDraggingChange: onDraggingChange, target: targetsByKey.get(outline.key) }, `${outline.key}-transform-origin`))), outlinesForRendering.map((outline) => (jsx_runtime_1.jsx(SelectedOutlineUvControls_1.SelectedOutlineUvHandleConnectionLayer, { outline: outline, target: targetsByKey.get(outline.key) }, `${outline.key}-uv-connection-lines`))), outlinesForRendering.map((outline) => (jsx_runtime_1.jsx(SelectedOutlineUvControls_1.SelectedOutlineUvHandleCircleLayer, { onDraggingChange: onDraggingChange, onSelect: selectOutlineItem, outline: outline, target: targetsByKey.get(outline.key) }, `${outline.key}-uv-handles`)))] }));
 };
 exports.SelectedOutlineOverlay = SelectedOutlineOverlay;

package/dist/components/ShowOutlinesProvider.js

@@ -4,8 +4,10 @@ exports.ShowOutlinesProvider = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const editor_outlines_1 = require("../state/editor-outlines");
+const timeline_sequence_hover_1 = require("../state/timeline-sequence-hover");
 const ShowOutlinesProvider = ({ children }) => {
     const [editorShowOutlines, setEditorShowOutlinesState] = (0, react_1.useState)(() => (0, editor_outlines_1.loadEditorShowOutlinesOption)());
+    const [hoveredSequence, setHoveredSequence] = (0, react_1.useState)(null);
     const setEditorShowOutlines = (0, react_1.useCallback)((newValue) => {
         setEditorShowOutlinesState((prevState) => {
             const newVal = newValue(prevState);
@@ -19,6 +21,7 @@ const ShowOutlinesProvider = ({ children }) => {
             setEditorShowOutlines,
         };
     }, [editorShowOutlines, setEditorShowOutlines]);
-    return (jsx_runtime_1.jsx(editor_outlines_1.EditorShowOutlinesContext.Provider, { value: editorShowOutlinesCtx, children: children }));
+    const timelineSequenceHoverCtx = (0, react_1.useMemo)(() => ({ hoveredSequence, setHoveredSequence }), [hoveredSequence]);
+    return (jsx_runtime_1.jsx(editor_outlines_1.EditorShowOutlinesContext.Provider, { value: editorShowOutlinesCtx, children: jsx_runtime_1.jsx(timeline_sequence_hover_1.TimelineSequenceHoverContext.Provider, { value: timelineSequenceHoverCtx, children: children }) }));
 };
 exports.ShowOutlinesProvider = ShowOutlinesProvider;

package/dist/components/SizeSelector.d.ts

@@ -1,5 +1,11 @@
 import React from 'react';
 import type { PreviewSize } from 'remotion';
+import type { ComboboxValue } from './NewComposition/ComboBox';
 export declare const getPreviewSizeLabel: (previewSize: PreviewSize) => string;
 export declare const getUniqueSizes: (size: PreviewSize) => PreviewSize[];
+export declare const usePreviewSizeMenuItems: () => {
+    items: ComboboxValue[];
+    selectedId: string;
+    zoomable: boolean | null;
+};
 export declare const SizeSelector: React.FC;

package/dist/components/SizeSelector.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.SizeSelector = exports.getUniqueSizes = exports.getPreviewSizeLabel = void 0;
+exports.SizeSelector = exports.usePreviewSizeMenuItems = exports.getUniqueSizes = exports.getPreviewSizeLabel = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const remotion_1 = require("remotion");
@@ -67,14 +67,9 @@ const getUniqueSizes = (size) => {
 };
 exports.getUniqueSizes = getUniqueSizes;
 const zoomableFileTypes = ['video', 'image'];
-const SizeSelector = () => {
+const usePreviewSizeMenuItems = () => {
     const { size, setSize } = (0, react_1.useContext)(remotion_1.Internals.PreviewSizeContext);
     const { canvasContent } = (0, react_1.useContext)(remotion_1.Internals.CompositionManager);
-    const style = (0, react_1.useMemo)(() => {
-        return {
-            padding: ControlButton_1.CONTROL_BUTTON_PADDING - 2,
-        };
-    }, []);
     const zoomable = (0, react_1.useMemo)(() => {
         if (!canvasContent) {
             return null;
@@ -111,9 +106,23 @@ const SizeSelector = () => {
             };
         });
     }, [setSize, size]);
+    return {
+        items,
+        selectedId: String(size.size),
+        zoomable,
+    };
+};
+exports.usePreviewSizeMenuItems = usePreviewSizeMenuItems;
+const SizeSelector = () => {
+    const { items, selectedId, zoomable } = (0, exports.usePreviewSizeMenuItems)();
+    const style = (0, react_1.useMemo)(() => {
+        return {
+            padding: ControlButton_1.CONTROL_BUTTON_PADDING - 2,
+        };
+    }, []);
     if (!zoomable) {
         return null;
     }
-    return (jsx_runtime_1.jsx("div", { style: style, "aria-label": accessibilityLabel, children: jsx_runtime_1.jsx(ComboBox_1.Combobox, { size: "compact", title: accessibilityLabel, style: comboStyle, selectedId: String(size.size), values: items }) }));
+    return (jsx_runtime_1.jsx("div", { style: style, "aria-label": accessibilityLabel, children: jsx_runtime_1.jsx(ComboBox_1.Combobox, { size: "compact", title: accessibilityLabel, style: comboStyle, selectedId: selectedId, values: items }) }));
 };
 exports.SizeSelector = SizeSelector;

package/dist/components/Splitter/SplitterContainer.d.ts

@@ -6,6 +6,7 @@ export declare const SplitterContainer: React.FC<{
     readonly maxFlex: number;
     readonly minFlex: number;
     readonly maxFlexerSize: number | null;
+    readonly minFlexerSize: number | null;
     readonly maxAntiFlexerSize: number | null;
     readonly id: string;
     readonly defaultFlex: number;

package/dist/components/Splitter/SplitterContainer.js

@@ -6,6 +6,7 @@ const player_1 = require("@remotion/player");
 const react_1 = require("react");
 const timeline_1 = require("../../state/timeline");
 const SplitterContext_1 = require("./SplitterContext");
+const SplitterHandle_1 = require("./SplitterHandle");
 const containerRow = {
     display: 'flex',
     flexDirection: 'row',
@@ -19,14 +20,31 @@ exports.containerColumn = {
     flex: 1,
     height: 0,
 };
-const SplitterContainer = ({ orientation, children, defaultFlex, maxFlex, minFlex, maxFlexerSize, maxAntiFlexerSize, id, }) => {
+const SplitterContainer = ({ orientation, children, defaultFlex, maxFlex, minFlex, maxFlexerSize, minFlexerSize, maxAntiFlexerSize, id, }) => {
     const [initialTimelineFlex, persistFlex] = (0, timeline_1.useTimelineFlex)(id);
     const [flexValue, setFlexValue] = (0, react_1.useState)(initialTimelineFlex !== null && initialTimelineFlex !== void 0 ? initialTimelineFlex : defaultFlex);
     const ref = (0, react_1.useRef)(null);
     const isDragging = (0, react_1.useRef)(false);
+    const size = player_1.PlayerInternals.useElementSize(ref, {
+        triggerOnWindowResize: true,
+        shouldApplyCssTransforms: true,
+    });
+    const availableSize = size
+        ? (orientation === 'vertical' ? size.width : size.height) -
+            SplitterHandle_1.SPLITTER_HANDLE_SIZE
+        : null;
+    const effectiveFlexValue = (0, SplitterContext_1.getClampedSplitterFlex)({
+        availableSize,
+        flexValue,
+        maxAntiFlexerSize,
+        maxFlex,
+        maxFlexerSize,
+        minFlex,
+        minFlexerSize,
+    });
     const value = (0, react_1.useMemo)(() => {
         return {
-            flexValue,
+            flexValue: effectiveFlexValue,
             ref,
             setFlexValue,
             isDragging,
@@ -35,16 +53,18 @@ const SplitterContainer = ({ orientation, children, defaultFlex, maxFlex, minFle
             maxFlex,
             minFlex,
             maxFlexerSize,
+            minFlexerSize,
             maxAntiFlexerSize,
             defaultFlex,
             persistFlex,
         };
     }, [
         defaultFlex,
-        flexValue,
+        effectiveFlexValue,
         id,
         maxFlex,
         maxFlexerSize,
+        minFlexerSize,
         maxAntiFlexerSize,
         minFlex,
         orientation,

package/dist/components/Splitter/SplitterContext.d.ts

@@ -12,6 +12,7 @@ export type TSplitterContext = {
     maxFlex: number;
     minFlex: number;
     maxFlexerSize: number | null;
+    minFlexerSize: number | null;
     maxAntiFlexerSize: number | null;
     defaultFlex: number;
     id: string;
@@ -21,4 +22,17 @@ export type TSplitterContext = {
         y: number;
     }>;
 };
+type SplitterFlexBounds = Pick<TSplitterContext, 'maxAntiFlexerSize' | 'maxFlex' | 'maxFlexerSize' | 'minFlex' | 'minFlexerSize'> & {
+    readonly availableSize: number | null;
+};
+export declare const getSplitterFlexBounds: ({ availableSize, maxAntiFlexerSize, maxFlex, maxFlexerSize, minFlex, minFlexerSize, }: SplitterFlexBounds) => {
+    minFlex: number;
+    maxFlex: number;
+};
+export declare const getClampedSplitterFlex: ({ flexValue, ...bounds }: Pick<TSplitterContext, "maxAntiFlexerSize" | "maxFlex" | "maxFlexerSize" | "minFlex" | "minFlexerSize"> & {
+    readonly availableSize: number | null;
+} & {
+    readonly flexValue: number;
+}) => number;
 export declare const SplitterContext: React.Context<TSplitterContext>;
+export {};

package/dist/components/Splitter/SplitterContext.js

@@ -3,8 +3,22 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.SplitterContext = void 0;
+exports.SplitterContext = exports.getClampedSplitterFlex = exports.getSplitterFlexBounds = void 0;
 const react_1 = __importDefault(require("react"));
+const getSplitterFlexBounds = ({ availableSize, maxAntiFlexerSize, maxFlex, maxFlexerSize, minFlex, minFlexerSize, }) => {
+    if (availableSize === null || availableSize <= 0) {
+        return { minFlex, maxFlex };
+    }
+    const minimum = Math.min(1, Math.max(minFlex, minFlexerSize === null ? 0 : minFlexerSize / availableSize, maxAntiFlexerSize === null ? 0 : 1 - maxAntiFlexerSize / availableSize));
+    const maximum = Math.max(minimum, Math.min(maxFlex, maxFlexerSize === null ? 1 : maxFlexerSize / availableSize));
+    return { minFlex: minimum, maxFlex: maximum };
+};
+exports.getSplitterFlexBounds = getSplitterFlexBounds;
+const getClampedSplitterFlex = ({ flexValue, ...bounds }) => {
+    const { minFlex, maxFlex } = (0, exports.getSplitterFlexBounds)(bounds);
+    return Math.min(maxFlex, Math.max(minFlex, flexValue));
+};
+exports.getClampedSplitterFlex = getClampedSplitterFlex;
 exports.SplitterContext = react_1.default.createContext({
     flexValue: 1,
     ref: { current: null },
@@ -14,6 +28,7 @@ exports.SplitterContext = react_1.default.createContext({
     maxFlex: 1,
     minFlex: 1,
     maxFlexerSize: null,
+    minFlexerSize: null,
     maxAntiFlexerSize: null,
     defaultFlex: 1,
     id: '--',

package/dist/components/Splitter/SplitterHandle.js

@@ -49,12 +49,14 @@ const SplitterHandle = ({ allowToCollapse, onCollapse }) => {
             const availableSize = (dragContext.orientation === 'vertical'
                 ? containerWidth
                 : containerHeight) - exports.SPLITTER_HANDLE_SIZE;
-            const minFlex = dragContext.maxAntiFlexerSize === null || availableSize <= 0
-                ? dragContext.minFlex
-                : Math.max(dragContext.minFlex, 1 - dragContext.maxAntiFlexerSize / availableSize);
-            const maxFlex = dragContext.maxFlexerSize === null || availableSize <= 0
-                ? dragContext.maxFlex
-                : Math.min(dragContext.maxFlex, dragContext.maxFlexerSize / availableSize);
+            const { minFlex, maxFlex } = (0, SplitterContext_1.getSplitterFlexBounds)({
+                availableSize,
+                maxAntiFlexerSize: dragContext.maxAntiFlexerSize,
+                maxFlex: dragContext.maxFlex,
+                maxFlexerSize: dragContext.maxFlexerSize,
+                minFlex: dragContext.minFlex,
+                minFlexerSize: dragContext.minFlexerSize,
+            });
             const startFlex = Math.min(maxFlex, Math.max(minFlex, dragContext.flexValue));
             dragContext.isDragging.current = start;
             (0, ForceSpecificCursor_1.forceSpecificCursor)(dragContext.orientation === 'horizontal' ? 'row-resize' : 'col-resize');