@remotion/studio 4.0.503 → 4.0.505

package/dist/components/RenderModal/WebRenderModal.js

@@ -8,10 +8,10 @@ const react_1 = require("react");
 const ShortcutHint_1 = require("../../error-overlay/remotion-overlay/ShortcutHint");
 const audio_1 = require("../../icons/audio");
 const certificate_1 = require("../../icons/certificate");
-const data_1 = require("../../icons/data");
 const file_1 = require("../../icons/file");
 const frame_1 = require("../../icons/frame");
 const gear_1 = require("../../icons/gear");
+const input_props_1 = require("../../icons/input-props");
 const modals_1 = require("../../state/modals");
 const sidebar_1 = require("../../state/sidebar");
 const Button_1 = require("../Button");
@@ -414,24 +414,10 @@ const WebRenderModal = ({ initialFrame, defaultProps, inFrameMark, outFrameMark,
                     jsx_runtime_1.jsx(SegmentedControl_1.SegmentedControl, { items: renderTabOptions, needsWrapping: false }), jsx_runtime_1.jsx("div", { style: render_modals_1.flexer }), jsx_runtime_1.jsxs(Button_1.Button, { autoFocus: true, onClick: onAddToQueue, style: render_modals_1.buttonStyle, disabled: !outnameValidation.valid, children: ["Render ", renderMode, jsx_runtime_1.jsx(ShortcutHint_1.ShortcutHint, { keyToPress: "\u21B5", cmdOrCtrl: true })
                         ] })
                 ] }), jsx_runtime_1.jsxs("div", { style: render_modals_1.horizontalLayout, children: [
-                    jsx_runtime_1.jsxs("div", { style: render_modals_1.leftSidebar, children: [
-                            jsx_runtime_1.jsxs(vertical_1.VerticalTab, { style: render_modals_1.horizontalTab, selected: tab === 'general', onClick: () => setTab('general'), children: [
-                                    jsx_runtime_1.jsx("div", { style: render_modals_1.iconContainer, children: jsx_runtime_1.jsx(file_1.FileIcon, { style: render_modals_1.icon }) }),
-                                    "General"] }), jsx_runtime_1.jsxs(vertical_1.VerticalTab, { style: render_modals_1.horizontalTab, selected: tab === 'data', onClick: () => setTab('data'), children: [
-                                    jsx_runtime_1.jsx("div", { style: render_modals_1.iconContainer, children: jsx_runtime_1.jsx(data_1.DataIcon, { style: render_modals_1.icon }) }),
-                                    "Input Props"] }), renderMode !== 'audio' ? (jsx_runtime_1.jsxs(vertical_1.VerticalTab, { style: render_modals_1.horizontalTab, selected: tab === 'picture', onClick: () => setTab('picture'), children: [
-                                    jsx_runtime_1.jsx("div", { style: render_modals_1.iconContainer, children: jsx_runtime_1.jsx(frame_1.PicIcon, { style: render_modals_1.icon }) }),
-                                    "Picture"] })) : null, renderMode === 'video' || renderMode === 'audio' ? (jsx_runtime_1.jsxs(vertical_1.VerticalTab, { style: render_modals_1.horizontalTab, selected: tab === 'audio', onClick: () => setTab('audio'), children: [
-                                    jsx_runtime_1.jsx("div", { style: render_modals_1.iconContainer, children: jsx_runtime_1.jsx(audio_1.AudioIcon, { style: render_modals_1.icon }) }),
-                                    "Audio"] })) : null, jsx_runtime_1.jsxs(vertical_1.VerticalTab, { style: render_modals_1.horizontalTab, selected: tab === 'advanced', onClick: () => setTab('advanced'), children: [
-                                    jsx_runtime_1.jsx("div", { style: render_modals_1.iconContainer, children: jsx_runtime_1.jsx(gear_1.GearIcon, { style: render_modals_1.icon }) }),
-                                    "Other"] }), jsx_runtime_1.jsxs(vertical_1.VerticalTab, { style: render_modals_1.horizontalTab, selected: false, onClick: () => setSelectedModal({
+                    jsx_runtime_1.jsxs("div", { style: render_modals_1.leftSidebar, children: [jsx_runtime_1.jsx(vertical_1.VerticalTab, { style: render_modals_1.horizontalTab, selected: tab === 'general', onClick: () => setTab('general'), renderIcon: (color) => (jsx_runtime_1.jsx("div", { style: render_modals_1.iconContainer, children: jsx_runtime_1.jsx(file_1.FileIcon, { color: color, style: render_modals_1.icon }) })), children: "General" }), jsx_runtime_1.jsx(vertical_1.VerticalTab, { style: render_modals_1.horizontalTab, selected: tab === 'data', onClick: () => setTab('data'), renderIcon: (color) => (jsx_runtime_1.jsx("div", { style: render_modals_1.iconContainer, children: jsx_runtime_1.jsx(input_props_1.InputPropsIcon, { color: color, style: render_modals_1.icon }) })), children: "Input Props" }), renderMode !== 'audio' ? (jsx_runtime_1.jsx(vertical_1.VerticalTab, { style: render_modals_1.horizontalTab, selected: tab === 'picture', onClick: () => setTab('picture'), renderIcon: (color) => (jsx_runtime_1.jsx("div", { style: render_modals_1.iconContainer, children: jsx_runtime_1.jsx(frame_1.PicIcon, { color: color, style: render_modals_1.icon }) })), children: "Picture" })) : null, renderMode === 'video' || renderMode === 'audio' ? (jsx_runtime_1.jsx(vertical_1.VerticalTab, { style: render_modals_1.horizontalTab, selected: tab === 'audio', onClick: () => setTab('audio'), renderIcon: (color) => (jsx_runtime_1.jsx("div", { style: render_modals_1.iconContainer, children: jsx_runtime_1.jsx(audio_1.AudioIcon, { color: color, style: render_modals_1.icon }) })), children: "Audio" })) : null, jsx_runtime_1.jsx(vertical_1.VerticalTab, { style: render_modals_1.horizontalTab, selected: tab === 'advanced', onClick: () => setTab('advanced'), renderIcon: (color) => (jsx_runtime_1.jsx("div", { style: render_modals_1.iconContainer, children: jsx_runtime_1.jsx(gear_1.GearIcon, { color: color, style: render_modals_1.icon }) })), children: "Other" }), jsx_runtime_1.jsx(vertical_1.VerticalTab, { style: render_modals_1.horizontalTab, selected: false, onClick: () => setSelectedModal({
                                     type: 'configure-license',
                                     initialPublicLicenseKey: publicLicenseKey,
-                                }), children: [
-                                    jsx_runtime_1.jsx("div", { style: render_modals_1.iconContainer, children: jsx_runtime_1.jsx(certificate_1.CertificateIcon, { style: render_modals_1.icon }) }),
-                                    "License"] })
-                        ] }), jsx_runtime_1.jsx("div", { style: render_modals_1.optionsPanel, className: is_menu_item_1.VERTICAL_SCROLLBAR_CLASSNAME, children: tab === 'general' ? (jsx_runtime_1.jsx(WebRenderModalBasic_1.WebRenderModalBasic, { renderMode: renderMode, resolvedComposition: resolvedComposition, imageFormat: imageFormat, setStillFormat: setStillFormat, frame: frame, onFrameChanged: onFrameChanged, onFrameSetDirectly: onFrameSetDirectly, container: container, setContainerFormat: setContainerFormat, setCodec: setCodecWithContainer, encodableVideoCodecs: encodableVideoCodecs, effectiveVideoCodec: effectiveVideoCodec, startFrame: finalStartFrame, setStartFrame: setStartFrame, endFrame: finalEndFrame, setEndFrame: setEndFrame, outName: outName, onOutNameChange: onOutNameChange, validationMessage: outnameValidation.valid ? null : outnameValidation.error.message, logLevel: logLevel, setLogLevel: setLogLevel })) : tab === 'data' ? (jsx_runtime_1.jsx(DataEditor_1.DataEditor, { defaultProps: inputProps, setDefaultProps: setInputProps, unresolvedComposition: unresolvedComposition, propsEditType: "input-props", canSaveDefaultProps: {
+                                }), renderIcon: (color) => (jsx_runtime_1.jsx("div", { style: render_modals_1.iconContainer, children: jsx_runtime_1.jsx(certificate_1.CertificateIcon, { color: color, style: render_modals_1.icon }) })), children: "License" })] }), jsx_runtime_1.jsx("div", { style: render_modals_1.optionsPanel, className: is_menu_item_1.VERTICAL_SCROLLBAR_CLASSNAME, children: tab === 'general' ? (jsx_runtime_1.jsx(WebRenderModalBasic_1.WebRenderModalBasic, { renderMode: renderMode, resolvedComposition: resolvedComposition, imageFormat: imageFormat, setStillFormat: setStillFormat, frame: frame, onFrameChanged: onFrameChanged, onFrameSetDirectly: onFrameSetDirectly, container: container, setContainerFormat: setContainerFormat, setCodec: setCodecWithContainer, encodableVideoCodecs: encodableVideoCodecs, effectiveVideoCodec: effectiveVideoCodec, startFrame: finalStartFrame, setStartFrame: setStartFrame, endFrame: finalEndFrame, setEndFrame: setEndFrame, outName: outName, onOutNameChange: onOutNameChange, validationMessage: outnameValidation.valid ? null : outnameValidation.error.message, logLevel: logLevel, setLogLevel: setLogLevel })) : tab === 'data' ? (jsx_runtime_1.jsx(DataEditor_1.DataEditor, { defaultProps: inputProps, setDefaultProps: setInputProps, unresolvedComposition: unresolvedComposition, propsEditType: "input-props", canSaveDefaultProps: {
                                 canUpdate: false,
                                 reason: 'render dialogue',
                                 determined: false,

package/dist/components/RenderModal/layout.js

@@ -8,12 +8,12 @@ exports.optionRow = {
     minHeight: 40,
     paddingLeft: 16,
     paddingRight: 16,
-    paddingTop: 8,
-    paddingBottom: 8,
+    paddingTop: 4,
+    paddingBottom: 4,
 };
 exports.label = {
-    width: 290,
-    fontSize: 15,
+    minWidth: 0,
+    fontSize: 14,
     lineHeight: '40px',
     color: colors_1.LIGHT_TEXT,
     fontFamily: 'sans-serif',
@@ -24,12 +24,14 @@ exports.label = {
 exports.rightRow = {
     display: 'flex',
     flexDirection: 'row',
+    alignItems: 'center',
     justifyContent: 'flex-end',
     alignSelf: 'center',
     flex: 1,
+    minWidth: 0,
 };
 exports.input = {
-    minWidth: 250,
+    minWidth: 0,
 };
 exports.fieldSetText = {
     color: colors_1.LIGHT_TEXT,

package/dist/components/RenderModal/render-modals.js

@@ -4,8 +4,8 @@ exports.flexer = exports.buttonStyle = exports.icon = exports.iconContainer = ex
 const colors_1 = require("../../helpers/colors");
 const ModalContainer_1 = require("../ModalContainer");
 exports.outerModalStyle = {
-    width: (0, ModalContainer_1.getMaxModalWidth)(1000),
-    height: (0, ModalContainer_1.getMaxModalHeight)(640),
+    width: (0, ModalContainer_1.getMaxModalWidth)(800),
+    height: (0, ModalContainer_1.getMaxModalHeight)(490),
     overflow: 'hidden',
     display: 'flex',
     flexDirection: 'column',
@@ -19,7 +19,8 @@ exports.container = {
 };
 exports.optionsPanel = {
     display: 'flex',
-    width: '100%',
+    flex: 1,
+    minWidth: 0,
 };
 exports.horizontalLayout = {
     display: 'flex',
@@ -28,31 +29,33 @@ exports.horizontalLayout = {
     flex: 1,
 };
 exports.leftSidebar = {
-    padding: 12,
+    padding: 6,
 };
 exports.horizontalTab = {
-    width: 250,
+    width: 150,
     display: 'flex',
     flexDirection: 'row',
     alignItems: 'center',
     textAlign: 'left',
-    fontSize: 16,
-    fontWeight: 'bold',
-    paddingLeft: 15,
-    paddingTop: 12,
-    paddingBottom: 12,
+    fontSize: 14,
+    fontWeight: 'normal',
+    paddingLeft: 8,
+    paddingTop: 6,
+    paddingBottom: 6,
+    borderRadius: 4,
 };
 exports.iconContainer = {
-    width: 20,
-    height: 20,
-    marginRight: 15,
+    width: 18,
+    height: 18,
+    marginRight: 8,
+    color: 'inherit',
     display: 'inline-flex',
     justifyContent: 'center',
     alignItems: 'center',
 };
 exports.icon = {
-    color: colors_1.CURRENT_COLOR_LOWERCASE,
-    height: 20,
+    color: 'inherit',
+    height: 18,
 };
 exports.buttonStyle = {
     backgroundColor: colors_1.BLUE,

package/dist/components/RenderQueue/RenderQueueRepeat.js

@@ -4,16 +4,12 @@ exports.RenderQueueRepeatItem = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const colors_1 = require("../../helpers/colors");
-const mobile_layout_1 = require("../../helpers/mobile-layout");
 const retry_payload_1 = require("../../helpers/retry-payload");
 const modals_1 = require("../../state/modals");
-const sidebar_1 = require("../../state/sidebar");
 const InlineAction_1 = require("../InlineAction");
 const context_1 = require("./context");
 const RenderQueueRepeatItem = ({ job }) => {
     const { setSelectedModal } = (0, react_1.useContext)(modals_1.ModalsContext);
-    const isMobileLayout = (0, mobile_layout_1.useMobileLayout)();
-    const { setSidebarCollapsedState } = (0, react_1.useContext)(sidebar_1.SidebarContext);
     const isClientJob = (0, context_1.isClientRenderJob)(job);
     const onClick = (0, react_1.useCallback)((e) => {
         e.stopPropagation();
@@ -25,16 +21,7 @@ const RenderQueueRepeatItem = ({ job }) => {
             const retryPayload = (0, retry_payload_1.makeRetryPayload)(job);
             setSelectedModal(retryPayload);
         }
-        if (isMobileLayout) {
-            setSidebarCollapsedState({ left: 'collapsed', right: 'collapsed' });
-        }
-    }, [
-        isMobileLayout,
-        job,
-        isClientJob,
-        setSelectedModal,
-        setSidebarCollapsedState,
-    ]);
+    }, [job, isClientJob, setSelectedModal]);
     const icon = (0, react_1.useMemo)(() => {
         return {
             height: 12,

package/dist/components/SelectedOutlineElement.js

@@ -66,13 +66,13 @@ const disable_sequence_interactivity_1 = require("./Timeline/disable-sequence-in
 const duplicate_selected_timeline_item_1 = require("./Timeline/duplicate-selected-timeline-item");
 const focus_inspector_field_1 = require("./Timeline/focus-inspector-field");
 const get_sequence_context_menu_items_1 = require("./Timeline/get-sequence-context-menu-items");
+const imperative_state_1 = require("./Timeline/imperative-state");
 const save_sequence_prop_1 = require("./Timeline/save-sequence-prop");
 const timeline_asset_link_1 = require("./Timeline/timeline-asset-link");
 const timeline_translate_utils_1 = require("./Timeline/timeline-translate-utils");
 const get_stack_1 = require("./Timeline/TimelineStack/get-stack");
 const transform_origin_utils_1 = require("./Timeline/transform-origin-utils");
 const use_select_asset_1 = require("./use-select-asset");
-const emptyContextMenuValues = [];
 const SelectedOutlineTransformOriginHandle = ({ outline, onDraggingChange, target }) => {
     var _a, _b;
     const { setDragOverrides, clearDragOverrides, setPropStatuses } = (0, react_1.useContext)(remotion_1.Internals.VisualModeSettersContext);
@@ -304,14 +304,11 @@ const SelectedOutlineTransformOriginHandle = ({ outline, onDraggingChange, targe
         ] }));
 };
 exports.SelectedOutlineTransformOriginHandle = SelectedOutlineTransformOriginHandle;
-const SelectedOutlinePolygon = ({ allDragTargets, allDragOutlines, contextMenuValues, dragging, hovered, onContextMenuOpen, outline, onDraggingChange, onHoverChange, onSnapPointsChange, onSelect, onDoubleClickTarget, scale, snapTargets, target, }) => {
+const SelectedOutlinePolygon = ({ allDragTargets, allDragOutlines, dragging, hovered, onContextMenuOpen, outline, onDraggingChange, onHoverChange, onSnapPointsChange, onSelect, onDoubleClickTarget, scale, snapTargets, target, }) => {
     var _a, _b, _c, _d;
     const { getDragOverrides } = (0, react_1.useContext)(remotion_1.Internals.VisualModeDragOverridesContext);
     const { setPropStatuses, setDragOverrides, clearDragOverrides } = (0, react_1.useContext)(remotion_1.Internals.VisualModeSettersContext);
     const { editorSnapping } = (0, react_1.useContext)(editor_snapping_1.EditorSnappingContext);
-    const timelinePosition = remotion_1.Internals.Timeline.useTimelinePosition();
-    const timelinePositionRef = (0, react_1.useRef)(timelinePosition);
-    timelinePositionRef.current = timelinePosition;
     const polygonRef = (0, react_1.useRef)(null);
     const points = (0, react_1.useMemo)(() => outline.points.map(selected_outline_measurement_1.pointToString).join(' '), [outline.points]);
     const drag = (_a = target === null || target === void 0 ? void 0 : target.drag) !== null && _a !== void 0 ? _a : null;
@@ -342,7 +339,7 @@ const SelectedOutlinePolygon = ({ allDragTargets, allDragOutlines, contextMenuVa
         const dragStates = (0, selected_outline_drag_1.getSelectedOutlineDragStates)({
             dragTargets: selected ? allDragTargets : [drag],
             getDragOverrides,
-            timelinePosition: timelinePositionRef.current,
+            timelinePosition: (0, imperative_state_1.getCurrentFrame)(),
         });
         let lastValues = new Map();
         let currentPointerX = startPointerX;
@@ -568,16 +565,13 @@ const SelectedOutlinePolygon = ({ allDragTargets, allDragOutlines, contextMenuVa
                     if (!dragging) {
                         onHoverChange(null);
                     }
-                }, onPointerDown: onPointerDown, onDoubleClick: onDoubleClick, onDragOver: effectDrop === null ? undefined : onEffectDragOver, onDragLeave: effectDrop === null ? undefined : onEffectDragLeave, onDrop: effectDrop === null ? undefined : onEffectDrop }), jsx_runtime_1.jsx(ContextMenu_1.ContextMenuForTarget, { triggerRef: polygonRef, values: [...contextMenuValues], onOpen: onContextMenuOpen })
+                }, onPointerDown: onPointerDown, onDoubleClick: onDoubleClick, onDragOver: effectDrop === null ? undefined : onEffectDragOver, onDragLeave: effectDrop === null ? undefined : onEffectDragLeave, onDrop: effectDrop === null ? undefined : onEffectDrop }), jsx_runtime_1.jsx(ContextMenu_1.ContextMenuForTarget, { triggerRef: polygonRef, getItems: onContextMenuOpen })
         ] }));
 };
-const SelectedOutlineScaleEdgeLine = ({ allScaleDragTargets, contextMenuValues, dragging, edge, outline, onDraggingChange, onContextMenuOpen, onHoverChange, onSelect, target, }) => {
+const SelectedOutlineScaleEdgeLine = ({ allScaleDragTargets, dragging, edge, outline, onDraggingChange, onContextMenuOpen, onHoverChange, onSelect, target, }) => {
     var _a, _b;
     const { getDragOverrides } = (0, react_1.useContext)(remotion_1.Internals.VisualModeDragOverridesContext);
     const { setPropStatuses, setDragOverrides, clearDragOverrides } = (0, react_1.useContext)(remotion_1.Internals.VisualModeSettersContext);
-    const timelinePosition = remotion_1.Internals.Timeline.useTimelinePosition();
-    const timelinePositionRef = (0, react_1.useRef)(timelinePosition);
-    timelinePositionRef.current = timelinePosition;
     const scaleDrag = (_a = target === null || target === void 0 ? void 0 : target.scaleDrag) !== null && _a !== void 0 ? _a : null;
     const selected = (_b = target === null || target === void 0 ? void 0 : target.selected) !== null && _b !== void 0 ? _b : false;
     const lineRef = (0, react_1.useRef)(null);
@@ -603,7 +597,7 @@ const SelectedOutlineScaleEdgeLine = ({ allScaleDragTargets, contextMenuValues,
         const dragStates = (0, selected_outline_drag_1.getSelectedOutlineScaleDragStates)({
             dragTargets: selected ? allScaleDragTargets : [scaleDrag],
             getDragOverrides,
-            timelinePosition: timelinePositionRef.current,
+            timelinePosition: (0, imperative_state_1.getCurrentFrame)(),
         });
         let lastValues = new Map();
         let dragStarted = false;
@@ -730,7 +724,7 @@ const SelectedOutlineScaleEdgeLine = ({ allScaleDragTargets, contextMenuValues,
                     if (!dragging) {
                         onHoverChange(null);
                     }
-                }, onPointerDown: onPointerDown }), jsx_runtime_1.jsx(ContextMenu_1.ContextMenuForTarget, { triggerRef: lineRef, values: [...contextMenuValues], onOpen: onContextMenuOpen })
+                }, onPointerDown: onPointerDown }), jsx_runtime_1.jsx(ContextMenu_1.ContextMenuForTarget, { triggerRef: lineRef, getItems: onContextMenuOpen })
         ] }));
 };
 const svgPointToClientPoint = (point, rect) => {
@@ -739,14 +733,11 @@ const svgPointToClientPoint = (point, rect) => {
         y: point.y + rect.top,
     };
 };
-const SelectedOutlineRotationCornerHandle = ({ allRotationDragTargets, contextMenuValues, corner, dragging, outline, onDraggingChange, onContextMenuOpen, onHoverChange, onSelect, target, }) => {
+const SelectedOutlineRotationCornerHandle = ({ allRotationDragTargets, corner, dragging, outline, onDraggingChange, onContextMenuOpen, onHoverChange, onSelect, target, }) => {
     var _a, _b;
     const { getDragOverrides } = (0, react_1.useContext)(remotion_1.Internals.VisualModeDragOverridesContext);
     const { setPropStatuses, setDragOverrides, clearDragOverrides } = (0, react_1.useContext)(remotion_1.Internals.VisualModeSettersContext);
     const { editorSnapping } = (0, react_1.useContext)(editor_snapping_1.EditorSnappingContext);
-    const timelinePosition = remotion_1.Internals.Timeline.useTimelinePosition();
-    const timelinePositionRef = (0, react_1.useRef)(timelinePosition);
-    timelinePositionRef.current = timelinePosition;
     const rotationDrag = (_a = target === null || target === void 0 ? void 0 : target.rotationDrag) !== null && _a !== void 0 ? _a : null;
     const selected = (_b = target === null || target === void 0 ? void 0 : target.selected) !== null && _b !== void 0 ? _b : false;
     const circleRef = (0, react_1.useRef)(null);
@@ -786,7 +777,7 @@ const SelectedOutlineRotationCornerHandle = ({ allRotationDragTargets, contextMe
         const dragStates = (0, selected_outline_drag_1.getSelectedOutlineRotationDragStates)({
             dragTargets: selected ? allRotationDragTargets : [rotationDrag],
             getDragOverrides,
-            timelinePosition: timelinePositionRef.current,
+            timelinePosition: (0, imperative_state_1.getCurrentFrame)(),
         });
         let previousAngle = (0, selected_outline_measurement_1.getAngleDegrees)(center, {
             x: event.clientX,
@@ -954,7 +945,7 @@ const SelectedOutlineRotationCornerHandle = ({ allRotationDragTargets, contextMe
                     if (!dragging) {
                         onHoverChange(null);
                     }
-                }, onPointerDown: onPointerDown }), jsx_runtime_1.jsx(ContextMenu_1.ContextMenuForTarget, { triggerRef: circleRef, values: [...contextMenuValues], onOpen: onContextMenuOpen })
+                }, onPointerDown: onPointerDown }), jsx_runtime_1.jsx(ContextMenu_1.ContextMenuForTarget, { triggerRef: circleRef, getItems: onContextMenuOpen })
         ] }));
 };
 const SelectedOutlineElement = ({ allDragTargets, allDragOutlines, allRotationDragTargets, allScaleDragTargets, dragging, hovered, outline, onDraggingChange, onHoverChange, onSnapPointsChange, onSelect, scale, snapTargets, target, }) => {
@@ -1187,10 +1178,10 @@ const SelectedOutlineElement = ({ allDragTargets, allDragOutlines, allRotationDr
         target,
     ]);
     return (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
-            jsx_runtime_1.jsx(SelectedOutlinePolygon, { allDragTargets: allDragTargets, allDragOutlines: allDragOutlines, contextMenuValues: emptyContextMenuValues, dragging: dragging, hovered: hovered, outline: outline, onContextMenuOpen: onContextMenuOpen, onDraggingChange: onDraggingChange, onHoverChange: onHoverChange, onSnapPointsChange: onSnapPointsChange, onSelect: onSelect, onDoubleClickTarget: onDoubleClickTarget, scale: scale, snapTargets: snapTargets, target: target }), jsx_runtime_1.jsx(SelectedOutlineCropControls_1.SelectedOutlineCropControls, { outline: outline, onDraggingChange: onDraggingChange, target: target }), (target === null || target === void 0 ? void 0 : target.cropDrag) === null && (target.containsSelection || hovered)
-                ? ['top', 'right', 'bottom', 'left'].map((edge) => (jsx_runtime_1.jsx(SelectedOutlineScaleEdgeLine, { allScaleDragTargets: allScaleDragTargets, contextMenuValues: emptyContextMenuValues, dragging: dragging, edge: edge, outline: outline, onContextMenuOpen: onContextMenuOpen, onDraggingChange: onDraggingChange, onHoverChange: onHoverChange, onSelect: onSelect, target: target }, edge)))
+            jsx_runtime_1.jsx(SelectedOutlinePolygon, { allDragTargets: allDragTargets, allDragOutlines: allDragOutlines, dragging: dragging, hovered: hovered, outline: outline, onContextMenuOpen: onContextMenuOpen, onDraggingChange: onDraggingChange, onHoverChange: onHoverChange, onSnapPointsChange: onSnapPointsChange, onSelect: onSelect, onDoubleClickTarget: onDoubleClickTarget, scale: scale, snapTargets: snapTargets, target: target }), jsx_runtime_1.jsx(SelectedOutlineCropControls_1.SelectedOutlineCropControls, { outline: outline, onDraggingChange: onDraggingChange, target: target }), (target === null || target === void 0 ? void 0 : target.cropDrag) === null && (target.containsSelection || hovered)
+                ? ['top', 'right', 'bottom', 'left'].map((edge) => (jsx_runtime_1.jsx(SelectedOutlineScaleEdgeLine, { allScaleDragTargets: allScaleDragTargets, dragging: dragging, edge: edge, outline: outline, onContextMenuOpen: onContextMenuOpen, onDraggingChange: onDraggingChange, onHoverChange: onHoverChange, onSelect: onSelect, target: target }, edge)))
                 : null, (target === null || target === void 0 ? void 0 : target.cropDrag) === null && (target.containsSelection || hovered)
-                ? ['top-left', 'top-right', 'bottom-right', 'bottom-left'].map((corner) => (jsx_runtime_1.jsx(SelectedOutlineRotationCornerHandle, { allRotationDragTargets: allRotationDragTargets, contextMenuValues: emptyContextMenuValues, corner: corner, dragging: dragging, outline: outline, onContextMenuOpen: onContextMenuOpen, onDraggingChange: onDraggingChange, onHoverChange: onHoverChange, onSelect: onSelect, target: target }, corner)))
+                ? ['top-left', 'top-right', 'bottom-right', 'bottom-left'].map((corner) => (jsx_runtime_1.jsx(SelectedOutlineRotationCornerHandle, { allRotationDragTargets: allRotationDragTargets, corner: corner, dragging: dragging, outline: outline, onContextMenuOpen: onContextMenuOpen, onDraggingChange: onDraggingChange, onHoverChange: onHoverChange, onSelect: onSelect, target: target }, corner)))
                 : null] }));
 };
 exports.SelectedOutlineElement = SelectedOutlineElement;

package/dist/components/SelectedOutlineOverlay.js

@@ -41,6 +41,7 @@ const remotion_1 = require("remotion");
 const no_react_1 = require("remotion/no-react");
 const client_id_1 = require("../helpers/client-id");
 const interactivity_enabled_1 = require("../helpers/interactivity-enabled");
+const use_is_fullscreen_1 = require("../helpers/use-is-fullscreen");
 const use_keybinding_1 = require("../helpers/use-keybinding");
 const editor_guides_1 = require("../state/editor-guides");
 const editor_outlines_1 = require("../state/editor-outlines");
@@ -422,6 +423,7 @@ const SelectedOutlineOverlay = ({ compositionHeight, compositionWidth, scale, tr
     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 isFullscreen = (0, use_is_fullscreen_1.useIsFullscreen)();
     const { frameBack, frameForward, getCurrentFrame, seek } = player_1.PlayerInternals.usePlayer();
     const keybindings = (0, use_keybinding_1.useKeybinding)();
     const timelinePosition = remotion_1.Internals.Timeline.useTimelinePosition();
@@ -457,7 +459,8 @@ const SelectedOutlineOverlay = ({ compositionHeight, compositionWidth, scale, tr
         selectItem(item, interaction, undefined, { reveal: true });
     }, [selectItem]);
     const outlineTargets = (0, react_1.useMemo)(() => {
-        if (!(0, interactivity_enabled_1.isStudioSelectionEnabled)() ||
+        if (isFullscreen ||
+            !(0, interactivity_enabled_1.isStudioSelectionEnabled)() ||
             !previewSelectionAvailable ||
             !editorShowOutlines) {
             return [];
@@ -756,6 +759,7 @@ const SelectedOutlineOverlay = ({ compositionHeight, compositionWidth, scale, tr
         getEffectDragOverrides,
         getScaleLockState,
         editorShowOutlines,
+        isFullscreen,
         overrideIdToNodePathMappings,
         previewInteractive,
         previewSelectionAvailable,

package/dist/components/SidebarRenderButton.js

@@ -5,15 +5,11 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const remotion_1 = require("remotion");
 const client_id_1 = require("../helpers/client-id");
-const mobile_layout_1 = require("../helpers/mobile-layout");
 const render_1 = require("../icons/render");
 const modals_1 = require("../state/modals");
-const sidebar_1 = require("../state/sidebar");
 const InlineAction_1 = require("./InlineAction");
 const SidebarRenderButton = ({ composition, visible }) => {
     const { setSelectedModal } = (0, react_1.useContext)(modals_1.ModalsContext);
-    const { setSidebarCollapsedState } = (0, react_1.useContext)(sidebar_1.SidebarContext);
-    const isMobileLayout = (0, mobile_layout_1.useMobileLayout)();
     const iconStyle = (0, react_1.useMemo)(() => {
         return {
             style: {
@@ -84,17 +80,7 @@ const SidebarRenderButton = ({ composition, visible }) => {
             initialDarkMode: defaults.darkMode,
             readOnlyStudio: false,
         });
-        if (isMobileLayout) {
-            setSidebarCollapsedState({ left: 'collapsed', right: 'collapsed' });
-        }
-    }, [
-        composition.defaultProps,
-        composition.id,
-        isMobileLayout,
-        props,
-        setSelectedModal,
-        setSidebarCollapsedState,
-    ]);
+    }, [composition.defaultProps, composition.id, props, setSelectedModal]);
     const renderAction = (0, react_1.useCallback)((color) => {
         return jsx_runtime_1.jsx(render_1.ThinRenderIcon, { fill: color, svgProps: iconStyle });
     }, [iconStyle]);

package/dist/components/SizeSelector.js

@@ -4,10 +4,11 @@ exports.SizeSelector = exports.usePreviewSizeMenuItems = exports.getUniqueSizes
 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 get_preview_file_type_1 = require("../helpers/get-preview-file-type");
+const canvas_zoom_1 = require("../icons/canvas-zoom");
 const Checkmark_1 = require("../icons/Checkmark");
-const ControlButton_1 = require("./ControlButton");
-const ComboBox_1 = require("./NewComposition/ComboBox");
+const TimelineCombobox_1 = require("./TimelineCombobox");
 const commonPreviewSizes = [
     {
         size: 'auto',
@@ -46,7 +47,6 @@ const getPreviewSizeLabel = (previewSize) => {
 };
 exports.getPreviewSizeLabel = getPreviewSizeLabel;
 const accessibilityLabel = 'Preview Size';
-const comboStyle = { width: 64 };
 const getUniqueSizes = (size) => {
     const customPreviewSizes = [size, ...commonPreviewSizes];
     const uniqueSizes = [];
@@ -115,14 +115,9 @@ const usePreviewSizeMenuItems = () => {
 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: selectedId, values: items }) }));
+    return (jsx_runtime_1.jsx(TimelineCombobox_1.TimelineCombobox, { title: accessibilityLabel, selectedId: selectedId, values: items, renderLeftItem: (color) => selectedId === 'auto' ? (jsx_runtime_1.jsx(canvas_zoom_1.CanvasFitIcon, { color: color })) : Number(selectedId) < 1 ? (jsx_runtime_1.jsx(canvas_zoom_1.CanvasZoomOutIcon, { color: color })) : (jsx_runtime_1.jsx(canvas_zoom_1.CanvasZoomIcon, { color: color })), unhoveredIconColor: colors_1.WHITE_ALPHA_80 }));
 };
 exports.SizeSelector = SizeSelector;

package/dist/components/SnappingToggle.js

@@ -14,13 +14,12 @@ const SnappingToggle = () => {
     const onClick = (0, react_1.useCallback)(() => {
         setEditorSnapping((current) => !current);
     }, [setEditorSnapping]);
-    const color = editorSnapping ? colors_1.BLUE : colors_1.WHITE;
     const accessibilityLabel = [
         editorSnapping ? 'Disable snapping' : 'Enable snapping',
         (0, use_keybinding_1.areKeyboardShortcutsDisabled)() ? null : '(Shift+M)',
     ]
         .filter(no_react_1.NoReactInternals.truthy)
         .join(' ');
-    return (jsx_runtime_1.jsx(ControlButton_1.ControlButton, { title: accessibilityLabel, "aria-label": accessibilityLabel, "aria-pressed": editorSnapping, "aria-keyshortcuts": "Shift+M", onClick: onClick, children: jsx_runtime_1.jsx(magnet_1.MagnetIcon, { style: { width: 17, height: 17 }, fill: color, "aria-hidden": "true", focusable: "false" }) }));
+    return (jsx_runtime_1.jsx(ControlButton_1.ControlButton, { title: accessibilityLabel, "aria-label": accessibilityLabel, "aria-pressed": editorSnapping, "aria-keyshortcuts": "Shift+M", onClick: onClick, children: (color) => (jsx_runtime_1.jsx(magnet_1.MagnetIcon, { style: { width: 18, height: 18, transform: 'translateY(1px)' }, color: editorSnapping ? colors_1.BLUE : color, "aria-hidden": "true", focusable: "false" })) }));
 };
 exports.SnappingToggle = SnappingToggle;

package/dist/components/Spinner.d.ts

@@ -2,4 +2,5 @@ import React from 'react';
 export declare const Spinner: React.FC<{
     readonly size: number;
     readonly duration: number;
+    readonly color?: string;
 }>;

package/dist/components/Spinner.js

@@ -10,7 +10,7 @@ const className = '__remotion_spinner_line';
 const remotionSpinnerAnimation = '__remotion_spinner_animation';
 // Generated from https://github.com/remotion-dev/template-next/commit/9282c93f7c51ada31a42e18a94680fa09a14eee3
 const translated = 'M 44 0 L 50 0 a 6 6 0 0 1 6 6 L 56 26 a 6 6 0 0 1 -6 6 L 50 32 a 6 6 0 0 1 -6 -6 L 44 6 a 6 6 0 0 1 6 -6 Z';
-const Spinner = ({ size, duration }) => {
+const Spinner = ({ size, duration, color = colors_1.LIGHT_TEXT }) => {
     const style = (0, react_1.useMemo)(() => {
         return {
             width: size,
@@ -36,7 +36,7 @@ const Spinner = ({ size, duration }) => {
                             rotate: `${(index * Math.PI * 2) / lines}rad`,
                             transformOrigin: 'center center',
                             animationDelay: `${index * (duration / lines) - duration}s`,
-                        }, d: translated, fill: colors_1.LIGHT_TEXT }, index));
+                        }, d: translated, fill: color }, index));
                 }) })
         ] }));
 };

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

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

package/dist/components/Splitter/SplitterContainer.js

@@ -20,7 +20,7 @@ exports.containerColumn = {
     flex: 1,
     height: 0,
 };
-const SplitterContainer = ({ orientation, children, defaultFlex, maxFlex, minFlex, maxFlexerSize, minFlexerSize, maxAntiFlexerSize, id, }) => {
+const SplitterContainer = ({ orientation, children, defaultFlex, maxFlex, minFlex, maxFlexerSize, minFlexerSize, maxAntiFlexerSize, minAntiFlexerSize, 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);
@@ -39,6 +39,7 @@ const SplitterContainer = ({ orientation, children, defaultFlex, maxFlex, minFle
         maxAntiFlexerSize,
         maxFlex,
         maxFlexerSize,
+        minAntiFlexerSize,
         minFlex,
         minFlexerSize,
     });
@@ -55,6 +56,7 @@ const SplitterContainer = ({ orientation, children, defaultFlex, maxFlex, minFle
             maxFlexerSize,
             minFlexerSize,
             maxAntiFlexerSize,
+            minAntiFlexerSize,
             defaultFlex,
             persistFlex,
         };
@@ -66,6 +68,7 @@ const SplitterContainer = ({ orientation, children, defaultFlex, maxFlex, minFle
         maxFlexerSize,
         minFlexerSize,
         maxAntiFlexerSize,
+        minAntiFlexerSize,
         minFlex,
         orientation,
         persistFlex,

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

@@ -14,6 +14,7 @@ export type TSplitterContext = {
     maxFlexerSize: number | null;
     minFlexerSize: number | null;
     maxAntiFlexerSize: number | null;
+    minAntiFlexerSize: number | null;
     defaultFlex: number;
     id: string;
     persistFlex: (value: number) => void;
@@ -22,14 +23,14 @@ export type TSplitterContext = {
         y: number;
     }>;
 };
-type SplitterFlexBounds = Pick<TSplitterContext, 'maxAntiFlexerSize' | 'maxFlex' | 'maxFlexerSize' | 'minFlex' | 'minFlexerSize'> & {
+type SplitterFlexBounds = Pick<TSplitterContext, 'maxAntiFlexerSize' | 'maxFlex' | 'maxFlexerSize' | 'minAntiFlexerSize' | 'minFlex' | 'minFlexerSize'> & {
     readonly availableSize: number | null;
 };
-export declare const getSplitterFlexBounds: ({ availableSize, maxAntiFlexerSize, maxFlex, maxFlexerSize, minFlex, minFlexerSize, }: SplitterFlexBounds) => {
+export declare const getSplitterFlexBounds: ({ availableSize, maxAntiFlexerSize, maxFlex, maxFlexerSize, minAntiFlexerSize, minFlex, minFlexerSize, }: SplitterFlexBounds) => {
     minFlex: number;
     maxFlex: number;
 };
-export declare const getClampedSplitterFlex: ({ flexValue, ...bounds }: Pick<TSplitterContext, "maxAntiFlexerSize" | "maxFlex" | "maxFlexerSize" | "minFlex" | "minFlexerSize"> & {
+export declare const getClampedSplitterFlex: ({ flexValue, ...bounds }: Pick<TSplitterContext, "maxAntiFlexerSize" | "maxFlex" | "maxFlexerSize" | "minAntiFlexerSize" | "minFlex" | "minFlexerSize"> & {
     readonly availableSize: number | null;
 } & {
     readonly flexValue: number;

package/dist/components/Splitter/SplitterContext.js

@@ -5,12 +5,12 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.SplitterContext = exports.getClampedSplitterFlex = exports.getSplitterFlexBounds = void 0;
 const react_1 = __importDefault(require("react"));
-const getSplitterFlexBounds = ({ availableSize, maxAntiFlexerSize, maxFlex, maxFlexerSize, minFlex, minFlexerSize, }) => {
+const getSplitterFlexBounds = ({ availableSize, maxAntiFlexerSize, maxFlex, maxFlexerSize, minAntiFlexerSize, 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));
+    const maximum = Math.max(minimum, Math.min(maxFlex, maxFlexerSize === null ? 1 : maxFlexerSize / availableSize, minAntiFlexerSize === null ? 1 : 1 - minAntiFlexerSize / availableSize));
     return { minFlex: minimum, maxFlex: maximum };
 };
 exports.getSplitterFlexBounds = getSplitterFlexBounds;
@@ -30,6 +30,7 @@ exports.SplitterContext = react_1.default.createContext({
     maxFlexerSize: null,
     minFlexerSize: null,
     maxAntiFlexerSize: null,
+    minAntiFlexerSize: null,
     defaultFlex: 1,
     id: '--',
     persistFlex: () => undefined,

package/dist/components/Splitter/SplitterElement.js

@@ -9,6 +9,7 @@ const SplitterContext_1 = require("./SplitterContext");
 const SplitterElement = ({ children, type, sticky }) => {
     const context = (0, react_1.useContext)(SplitterContext_1.SplitterContext);
     const maxSize = type === 'flexer' ? context.maxFlexerSize : context.maxAntiFlexerSize;
+    const minSize = type === 'flexer' ? context.minFlexerSize : context.minAntiFlexerSize;
     const style = (0, react_1.useMemo)(() => {
         return {
             flex: 
@@ -22,8 +23,12 @@ const SplitterElement = ({ children, type, sticky }) => {
             maxHeight: context.orientation === 'horizontal'
                 ? (maxSize !== null && maxSize !== void 0 ? maxSize : undefined)
                 : undefined,
+            minWidth: context.orientation === 'vertical' ? (minSize !== null && minSize !== void 0 ? minSize : undefined) : undefined,
+            minHeight: context.orientation === 'horizontal'
+                ? (minSize !== null && minSize !== void 0 ? minSize : undefined)
+                : undefined,
         };
-    }, [context.flexValue, context.orientation, maxSize, type]);
+    }, [context.flexValue, context.orientation, maxSize, minSize, type]);
     const stickStyle = (0, react_1.useMemo)(() => {
         return {
             position: 'absolute',

package/dist/components/Splitter/SplitterHandle.js

@@ -54,6 +54,7 @@ const SplitterHandle = ({ allowToCollapse, onCollapse }) => {
                 maxAntiFlexerSize: dragContext.maxAntiFlexerSize,
                 maxFlex: dragContext.maxFlex,
                 maxFlexerSize: dragContext.maxFlexerSize,
+                minAntiFlexerSize: dragContext.minAntiFlexerSize,
                 minFlex: dragContext.minFlex,
                 minFlexerSize: dragContext.minFlexerSize,
             });

package/dist/components/Tabs/vertical.d.ts

@@ -2,6 +2,7 @@ import React from 'react';
 export declare const VerticalTab: React.FC<{
     readonly children: React.ReactNode;
     readonly onClick: React.MouseEventHandler<HTMLButtonElement>;
+    readonly renderIcon?: (color: string) => React.ReactNode;
     readonly style?: React.CSSProperties;
     readonly selected: boolean;
 }>;