@remotion/studio 4.0.502 → 4.0.504

package/dist/components/Timeline/TimelineZoomControls.js

@@ -22,34 +22,46 @@ const buttonStyle = {
     fontSize: 24,
 };
 const iconStyle = {
-    color: colors_1.WHITE,
     width: 14,
 };
-const TimelineZoomControls = () => {
+const TimelineZoomSlider = ({ maxWidth }) => {
     var _a;
     const { canvasContent } = (0, react_1.useContext)(remotion_1.Internals.CompositionManager);
     const { setZoom, zoom: zoomMap } = (0, react_1.useContext)(timeline_zoom_1.TimelineZoomCtx);
     const { tabIndex } = (0, z_index_1.useZIndex)();
-    const onMinusClicked = (0, react_1.useCallback)(() => {
+    const isStill = (0, is_current_selected_still_1.useIsStill)();
+    const onChange = (0, react_1.useCallback)((e) => {
         if (canvasContent === null || canvasContent.type !== 'composition') {
             return;
         }
-        setZoom(canvasContent.compositionId, (z) => Math.max(timeline_zoom_1.TIMELINE_MIN_ZOOM, z - 0.2), { anchorFrame: null, anchorContentX: null });
+        setZoom(canvasContent.compositionId, () => Number(e.target.value), {
+            anchorFrame: null,
+            anchorContentX: null,
+        });
     }, [canvasContent, setZoom]);
-    const onPlusClicked = (0, react_1.useCallback)(() => {
+    if (isStill ||
+        canvasContent === null ||
+        canvasContent.type !== 'composition') {
+        return null;
+    }
+    const zoom = (_a = zoomMap[canvasContent.compositionId]) !== null && _a !== void 0 ? _a : timeline_zoom_1.TIMELINE_MIN_ZOOM;
+    return (jsx_runtime_1.jsx("input", { style: maxWidth === undefined ? undefined : { maxWidth }, title: `Timeline zoom (${zoom}x)`, alt: `Timeline zoom (${zoom}x)`, type: "range", min: timeline_zoom_1.TIMELINE_MIN_ZOOM, step: 0.1, value: zoom, max: timeline_zoom_1.TIMELINE_MAX_ZOOM, onChange: onChange, className: "__remotion-timeline-slider", tabIndex: tabIndex }));
+};
+const TimelineZoomControls = ({ sliderMaxWidth }) => {
+    var _a;
+    const { canvasContent } = (0, react_1.useContext)(remotion_1.Internals.CompositionManager);
+    const { setZoom, zoom: zoomMap } = (0, react_1.useContext)(timeline_zoom_1.TimelineZoomCtx);
+    const onMinusClicked = (0, react_1.useCallback)(() => {
         if (canvasContent === null || canvasContent.type !== 'composition') {
             return;
         }
-        setZoom(canvasContent.compositionId, (z) => Math.min(timeline_zoom_1.TIMELINE_MAX_ZOOM, z + 0.2), { anchorFrame: null, anchorContentX: null });
+        setZoom(canvasContent.compositionId, (z) => Math.max(timeline_zoom_1.TIMELINE_MIN_ZOOM, z - 0.2), { anchorFrame: null, anchorContentX: null });
     }, [canvasContent, setZoom]);
-    const onChange = (0, react_1.useCallback)((e) => {
+    const onPlusClicked = (0, react_1.useCallback)(() => {
         if (canvasContent === null || canvasContent.type !== 'composition') {
             return;
         }
-        setZoom(canvasContent.compositionId, () => Number(e.target.value), {
-            anchorFrame: null,
-            anchorContentX: null,
-        });
+        setZoom(canvasContent.compositionId, (z) => Math.min(timeline_zoom_1.TIMELINE_MAX_ZOOM, z + 0.2), { anchorFrame: null, anchorContentX: null });
     }, [canvasContent, setZoom]);
     const isStill = (0, is_current_selected_still_1.useIsStill)();
     if (isStill ||
@@ -59,7 +71,7 @@ const TimelineZoomControls = () => {
     }
     const zoom = (_a = zoomMap[canvasContent.compositionId]) !== null && _a !== void 0 ? _a : timeline_zoom_1.TIMELINE_MIN_ZOOM;
     return (jsx_runtime_1.jsxs("div", { style: container, children: [
-            jsx_runtime_1.jsx(ControlButton_1.ControlButton, { onClick: onMinusClicked, style: buttonStyle, title: "Zoom out timeline", role: 'ControlButton', type: "button", disabled: timeline_zoom_1.TIMELINE_MIN_ZOOM === zoom, children: jsx_runtime_1.jsx(minus_1.Minus, { style: iconStyle }) }), jsx_runtime_1.jsx(layout_1.Spacing, { x: 0.5 }), jsx_runtime_1.jsx("input", { title: `Timeline zoom (${zoom}x)`, alt: `Timeline zoom (${zoom}x)`, type: 'range', min: timeline_zoom_1.TIMELINE_MIN_ZOOM, step: 0.1, value: zoom, max: timeline_zoom_1.TIMELINE_MAX_ZOOM, onChange: onChange, className: "__remotion-timeline-slider", tabIndex: tabIndex }), jsx_runtime_1.jsx(layout_1.Spacing, { x: 0.5 }), jsx_runtime_1.jsx(ControlButton_1.ControlButton, { onClick: onPlusClicked, style: buttonStyle, title: "Zoom in timeline", role: 'button', type: "button", disabled: timeline_zoom_1.TIMELINE_MAX_ZOOM === zoom, children: jsx_runtime_1.jsx(plus_1.Plus, { color: colors_1.CURRENT_COLOR_LOWERCASE, style: iconStyle }) })
+            jsx_runtime_1.jsx(ControlButton_1.ControlButton, { onClick: onMinusClicked, style: buttonStyle, title: "Zoom out timeline", role: 'ControlButton', type: "button", disabled: timeline_zoom_1.TIMELINE_MIN_ZOOM === zoom, children: (color) => jsx_runtime_1.jsx(minus_1.Minus, { style: iconStyle, color: color }) }), jsx_runtime_1.jsx(layout_1.Spacing, { x: 0.5 }), jsx_runtime_1.jsx(TimelineZoomSlider, { maxWidth: sliderMaxWidth }), jsx_runtime_1.jsx(layout_1.Spacing, { x: 0.5 }), jsx_runtime_1.jsx(ControlButton_1.ControlButton, { onClick: onPlusClicked, style: buttonStyle, title: "Zoom in timeline", role: 'button', type: "button", disabled: timeline_zoom_1.TIMELINE_MAX_ZOOM === zoom, children: (color) => jsx_runtime_1.jsx(plus_1.Plus, { color: color, style: iconStyle }) })
         ] }));
 };
 exports.TimelineZoomControls = TimelineZoomControls;

package/dist/components/Timeline/get-sequence-context-menu-items.d.ts

@@ -1,7 +1,8 @@
+import type { EditorPickerId, GetDefaultEditorInfoResponse } from '@remotion/studio-shared';
 import type { ResolvedStackLocation, TSequence } from 'remotion';
 import type { ComboboxValue } from '../NewComposition/ComboBox';
 import type { TimelineAssetLinkInfo } from './timeline-asset-link';
-export declare const getSequenceContextMenuItems: ({ assetLinkInfo, canOpenInEditor, deleteDisabled, disableInteractivityDisabled, duplicateDisabled, fileLocation, includeSourceEditItems, onDeleteSequenceFromSource, onDisableSequenceInteractivity, onDuplicateSequenceFromSource, openInEditor, originalLocation, selectAsset, sequence, sourceActions, }: {
+export declare const getSequenceContextMenuItems: ({ assetLinkInfo, canOpenInEditor, deleteDisabled, disableInteractivityDisabled, duplicateDisabled, fileLocation, includeSourceEditItems, editorInfo, onDeleteSequenceFromSource, onDisableSequenceInteractivity, onDuplicateSequenceFromSource, openInEditor, originalLocation, selectAsset, sequence, sourceActions, }: {
     readonly assetLinkInfo: TimelineAssetLinkInfo | null;
     readonly canOpenInEditor: boolean;
     readonly deleteDisabled: boolean;
@@ -9,10 +10,11 @@ export declare const getSequenceContextMenuItems: ({ assetLinkInfo, canOpenInEdi
     readonly duplicateDisabled: boolean;
     readonly fileLocation: string | null;
     readonly includeSourceEditItems: boolean;
+    readonly editorInfo: GetDefaultEditorInfoResponse | null;
     readonly onDeleteSequenceFromSource: () => void;
     readonly onDisableSequenceInteractivity: () => void;
     readonly onDuplicateSequenceFromSource: () => void;
-    readonly openInEditor: () => void;
+    readonly openInEditor: (editorId: EditorPickerId | null) => void;
     readonly originalLocation: ResolvedStackLocation | null;
     readonly selectAsset: (src: string) => void;
     readonly sequence: TSequence;

package/dist/components/Timeline/get-sequence-context-menu-items.js

@@ -1,7 +1,9 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.getSequenceContextMenuItems = void 0;
+const react_1 = require("react");
 const no_react_1 = require("remotion/no-react");
+const editor_1 = require("../../icons/editor");
 const NotificationCenter_1 = require("../Notifications/NotificationCenter");
 const timeline_asset_link_1 = require("./timeline-asset-link");
 const normalizeMenuDividers = (items) => {
@@ -22,11 +24,13 @@ const normalizeMenuDividers = (items) => {
     return normalized;
 };
 const interactiveSvgComponentIdentity = 'dev.remotion.remotion.Interactive.Svg';
-const getSequenceContextMenuItems = ({ assetLinkInfo, canOpenInEditor, deleteDisabled, disableInteractivityDisabled, duplicateDisabled, fileLocation, includeSourceEditItems, onDeleteSequenceFromSource, onDisableSequenceInteractivity, onDuplicateSequenceFromSource, openInEditor, originalLocation, selectAsset, sequence, sourceActions = [], }) => {
+const getSequenceContextMenuItems = ({ assetLinkInfo, canOpenInEditor, deleteDisabled, disableInteractivityDisabled, duplicateDisabled, fileLocation, includeSourceEditItems, editorInfo, onDeleteSequenceFromSource, onDisableSequenceInteractivity, onDuplicateSequenceFromSource, openInEditor, originalLocation, selectAsset, sequence, sourceActions = [], }) => {
     var _a, _b;
+    var _c;
     const editorName = window.remotion_editorName;
     const { documentationLink } = sequence;
     const isInteractiveSvg = ((_a = sequence.controls) === null || _a === void 0 ? void 0 : _a.componentIdentity) === interactiveSvgComponentIdentity;
+    const installedEditors = (_c = editorInfo === null || editorInfo === void 0 ? void 0 : editorInfo.installedEditors) !== null && _c !== void 0 ? _c : [];
     const items = [
         editorName
             ? {
@@ -36,12 +40,44 @@ const getSequenceContextMenuItems = ({ assetLinkInfo, canOpenInEditor, deleteDis
                 label: `Open in ${editorName}`,
                 leftItem: null,
                 disabled: !canOpenInEditor || !originalLocation,
-                onClick: openInEditor,
+                onClick: () => openInEditor(null),
                 quickSwitcherLabel: null,
                 subMenu: null,
                 value: 'open-in-editor',
             }
             : null,
+        editorName && installedEditors.length > 0
+            ? {
+                type: 'item',
+                id: 'open-in-another-editor',
+                keyHint: null,
+                label: 'Open in...',
+                leftItem: null,
+                disabled: !canOpenInEditor || !originalLocation,
+                onClick: () => undefined,
+                quickSwitcherLabel: null,
+                subMenu: {
+                    items: installedEditors.map((editor) => ({
+                        type: 'item',
+                        id: `open-in-${editor.id}`,
+                        keyHint: null,
+                        label: editor.name,
+                        leftItem: (0, react_1.createElement)(editor_1.EditorIcon, {
+                            editorId: editor.id,
+                            size: 18,
+                        }),
+                        disabled: false,
+                        onClick: () => openInEditor(editor.id),
+                        quickSwitcherLabel: null,
+                        subMenu: null,
+                        value: editor.id,
+                    })),
+                    leaveLeftSpace: true,
+                    preselectIndex: false,
+                },
+                value: 'open-in-another-editor',
+            }
+            : null,
         {
             type: 'item',
             id: 'copy-file-location',

package/dist/components/Timeline/should-subscribe-to-source-file.d.ts

@@ -0,0 +1 @@
+export declare const shouldSubscribeToSourceFile: (source: string) => boolean;

package/dist/components/Timeline/should-subscribe-to-source-file.js

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.shouldSubscribeToSourceFile = void 0;
+const shouldSubscribeToSourceFile = (source) => {
+    const normalized = source.replaceAll('\\', '/');
+    if (normalized === '..' || normalized.startsWith('../')) {
+        return false;
+    }
+    return !normalized.split('/').includes('node_modules');
+};
+exports.shouldSubscribeToSourceFile = shouldSubscribeToSourceFile;

package/dist/components/Timeline/use-expanded-track-keyframe-rows.js

@@ -8,6 +8,7 @@ const timeline_layout_1 = require("../../helpers/timeline-layout");
 const timeline_node_path_key_1 = require("../../helpers/timeline-node-path-key");
 const ExpandedTracksProvider_1 = require("../ExpandedTracksProvider");
 const get_node_keyframes_1 = require("./get-node-keyframes");
+const imperative_state_1 = require("./imperative-state");
 const timeline_expanded_filter_1 = require("./timeline-expanded-filter");
 const TimelineSelection_1 = require("./TimelineSelection");
 const getNodeCanEditEasing = ({ node, nodePath, propStatuses, }) => {
@@ -36,7 +37,6 @@ const useExpandedTrackKeyframeRows = ({ sequence, nodePathInfo, keyframeDisplayO
     const { propStatuses } = (0, react_1.useContext)(remotion_1.Internals.VisualModePropStatusesContext);
     const { getDragOverrides, getEffectDragOverrides } = (0, react_1.useContext)(remotion_1.Internals.VisualModeDragOverridesContext);
     const { selectedItems } = (0, TimelineSelection_1.useTimelineSelection)();
-    const timelinePosition = remotion_1.Internals.Timeline.useTimelinePosition();
     const tree = (0, react_1.useMemo)(() => (0, timeline_layout_1.buildTimelineTree)({
         sequence,
         nodePathInfo,
@@ -89,7 +89,7 @@ const useExpandedTrackKeyframeRows = ({ sequence, nodePathInfo, keyframeDisplayO
             keyframeDisplayOffset,
             getDragOverrides,
             getEffectDragOverrides,
-            timelinePosition,
+            timelinePosition: (0, imperative_state_1.getCurrentFrame)(),
         }),
     ])), [
         flat,
@@ -98,7 +98,6 @@ const useExpandedTrackKeyframeRows = ({ sequence, nodePathInfo, keyframeDisplayO
         keyframeDisplayOffset,
         nodePathInfo.sequenceSubscriptionKey,
         propStatuses,
-        timelinePosition,
     ]);
     const rows = (0, react_1.useMemo)(() => flat.map(({ node }) => {
         var _a;

package/dist/components/Timeline/use-open-sequence-in-editor.d.ts

@@ -1,6 +1,8 @@
+import type { EditorPickerId } from '@remotion/studio-shared';
 import type { TSequence } from 'remotion';
 export declare const useOpenSequenceInEditor: (sequence: TSequence) => {
     canOpenInEditor: boolean;
-    openInEditor: () => Promise<void>;
+    editorInfo: import("@remotion/studio-shared").GetDefaultEditorInfoResponse | null;
+    openInEditor: (editorId: EditorPickerId | null) => Promise<void>;
     originalLocation: import("remotion").ResolvedStackLocation | null;
 };

package/dist/components/Timeline/use-open-sequence-in-editor.js

@@ -5,18 +5,20 @@ const react_1 = require("react");
 const client_id_1 = require("../../helpers/client-id");
 const open_in_editor_1 = require("../../helpers/open-in-editor");
 const NotificationCenter_1 = require("../Notifications/NotificationCenter");
+const use_default_editor_info_1 = require("../use-default-editor-info");
 const use_resolved_stack_react_to_change_1 = require("./use-resolved-stack-react-to-change");
 const useOpenSequenceInEditor = (sequence) => {
     const { previewServerState } = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx);
     const previewConnected = previewServerState.type === 'connected';
     const originalLocation = (0, use_resolved_stack_react_to_change_1.useResolveStackAndReactToChange)(sequence.getStack);
+    const editorInfo = (0, use_default_editor_info_1.useDefaultEditorInfo)((0, use_default_editor_info_1.canUseEditorPicker)(previewConnected));
     const canOpenInEditor = (0, react_1.useMemo)(() => Boolean(window.remotion_editorName && previewConnected && originalLocation), [originalLocation, previewConnected]);
-    const openInEditor = (0, react_1.useCallback)(async () => {
+    const openInEditor = (0, react_1.useCallback)(async (editorId) => {
         if (!canOpenInEditor || !originalLocation) {
             return;
         }
         try {
-            await (0, open_in_editor_1.openOriginalPositionInEditor)(originalLocation);
+            await (0, open_in_editor_1.openOriginalPositionInEditor)(originalLocation, editorId);
         }
         catch (err) {
             (0, NotificationCenter_1.showNotification)(err.message, 2000);
@@ -24,6 +26,7 @@ const useOpenSequenceInEditor = (sequence) => {
     }, [canOpenInEditor, originalLocation]);
     return {
         canOpenInEditor,
+        editorInfo,
         openInEditor,
         originalLocation,
     };

package/dist/components/Timeline/use-sequence-props-subscription.js

@@ -7,6 +7,7 @@ const remotion_1 = require("remotion");
 const client_id_1 = require("../../helpers/client-id");
 const ExpandedTracksProvider_1 = require("../ExpandedTracksProvider");
 const sequence_props_subscription_store_1 = require("./sequence-props-subscription-store");
+const should_subscribe_to_source_file_1 = require("./should-subscribe-to-source-file");
 const useSequencePropsSubscription = ({ originalLocation, overrideId, componentIdentity, schema, effects, }) => {
     var _a, _b, _c;
     const { setPropStatuses } = (0, react_1.useContext)(remotion_1.Internals.VisualModeSettersContext);
@@ -40,6 +41,7 @@ const useSequencePropsSubscription = ({ originalLocation, overrideId, componentI
         var _a, _b;
         if (!clientId ||
             !locationSource ||
+            !(0, should_subscribe_to_source_file_1.shouldSubscribeToSourceFile)(locationSource) ||
             !locationLine ||
             locationColumn === null ||
             !schema ||

package/dist/components/Timeline/use-timeline-asset-drop.js

@@ -11,7 +11,7 @@ const effect_drag_and_drop_1 = require("../effect-drag-and-drop");
 const handle_drop_1 = require("../handle-drop");
 const NotificationCenter_1 = require("../Notifications/NotificationCenter");
 const SvgImportDialog_1 = require("../SvgImportDialog");
-const use_element_overwrite_confirmation_1 = require("../use-element-overwrite-confirmation");
+const imperative_state_1 = require("./imperative-state");
 const timeline_refs_1 = require("./timeline-refs");
 const timeline_scroll_logic_1 = require("./timeline-scroll-logic");
 const use_resolved_stack_1 = require("./use-resolved-stack");
@@ -29,9 +29,7 @@ const useTimelineAssetDrop = () => {
     var _a, _b;
     const { canvasContent, compositions } = (0, react_1.useContext)(remotion_1.Internals.CompositionManager);
     const videoConfig = remotion_1.Internals.useUnsafeVideoConfig();
-    const timelinePosition = remotion_1.Internals.Timeline.useTimelinePosition();
     const chooseSvgImportMode = (0, SvgImportDialog_1.useSvgImportDialog)();
-    const confirmElementOverwrite = (0, use_element_overwrite_confirmation_1.useElementOverwriteConfirmation)();
     const { previewServerState } = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx);
     const [isAddingAsset, setIsAddingAsset] = (0, react_1.useState)(false);
     const [assetDropFrame, setAssetDropFrame] = (0, react_1.useState)(null);
@@ -67,8 +65,8 @@ const useTimelineAssetDrop = () => {
                 timelineLeft: scrollable.getBoundingClientRect().left,
                 timelineWidth: scrollable.scrollWidth,
             })
-            : timelinePosition;
-    }, [timelinePosition, videoConfig]);
+            : (0, imperative_state_1.getCurrentFrame)();
+    }, [videoConfig]);
     const onAssetDragOver = (0, react_1.useCallback)((event) => {
         const timeline = timeline_refs_1.timelineVerticalScroll.current;
         const { dataTransfer } = event;
@@ -122,7 +120,6 @@ const useTimelineAssetDrop = () => {
             await (0, handle_drop_1.handleDrop)({
                 chooseSvgImportMode,
                 compositionFile,
-                confirmElementOverwrite,
                 compositionId: currentCompositionId,
                 destinationDimensions: {
                     height: videoConfig.height,
@@ -145,7 +142,6 @@ const useTimelineAssetDrop = () => {
         chooseSvgImportMode,
         compositionComponentInfo === null || compositionComponentInfo === void 0 ? void 0 : compositionComponentInfo.canAddSequence,
         compositionFile,
-        confirmElementOverwrite,
         currentCompositionId,
         getDropFrame,
         videoConfig,

package/dist/components/Timeline/use-timeline-keyframe-drag.js

@@ -5,6 +5,7 @@ const studio_shared_1 = require("@remotion/studio-shared");
 const react_1 = require("react");
 const remotion_1 = require("remotion");
 const client_id_1 = require("../../helpers/client-id");
+const pointer_session_1 = require("../../helpers/pointer-session");
 const timeline_layout_1 = require("../../helpers/timeline-layout");
 const call_move_keyframe_1 = require("./call-move-keyframe");
 const find_track_for_node_path_info_1 = require("./find-track-for-node-path-info");
@@ -319,11 +320,8 @@ const useTimelineKeyframeDrag = ({ frame, nodePathInfo, onSelect, selectable, se
                 .filter((target) => target !== null);
             return dragTargets;
         };
-        const cleanup = () => {
-            window.removeEventListener('pointermove', onPointerMove);
-            window.removeEventListener('pointerup', onPointerUp);
-            window.removeEventListener('pointercancel', onPointerCancel);
-        };
+        let stopPointerSession = null;
+        const cleanup = () => stopPointerSession === null || stopPointerSession === void 0 ? void 0 : stopPointerSession();
         const clearActiveOverrides = () => {
             const targets = dragTargets;
             if (targets === null) {
@@ -438,9 +436,19 @@ const useTimelineKeyframeDrag = ({ frame, nodePathInfo, onSelect, selectable, se
             clearActiveOverrides();
             clearDraggedKeyframes();
         };
-        window.addEventListener('pointermove', onPointerMove);
-        window.addEventListener('pointerup', onPointerUp);
-        window.addEventListener('pointercancel', onPointerCancel);
+        stopPointerSession = (0, pointer_session_1.startPointerSession)({
+            event: e,
+            target: e.currentTarget,
+            onMove: onPointerMove,
+            onEnd: (reason) => {
+                if (reason === 'pointerup' || reason === 'buttons-released') {
+                    onPointerUp();
+                }
+                else {
+                    onPointerCancel();
+                }
+            },
+        });
     }, [
         clearDragOverrides,
         clearEffectDragOverrides,
@@ -519,11 +527,8 @@ const useTimelineEasingKeyframeDrag = ({ onSelect, selectable, selected, selecti
                 .filter((target) => target !== null);
             return dragTargets;
         };
-        const cleanup = () => {
-            window.removeEventListener('pointermove', onPointerMove);
-            window.removeEventListener('pointerup', onPointerUp);
-            window.removeEventListener('pointercancel', onPointerCancel);
-        };
+        let stopPointerSession = null;
+        const cleanup = () => stopPointerSession === null || stopPointerSession === void 0 ? void 0 : stopPointerSession();
         const clearActiveOverrides = () => {
             const targets = dragTargets;
             if (targets === null) {
@@ -638,9 +643,19 @@ const useTimelineEasingKeyframeDrag = ({ onSelect, selectable, selected, selecti
             clearActiveOverrides();
             clearDraggedKeyframes();
         };
-        window.addEventListener('pointermove', onPointerMove);
-        window.addEventListener('pointerup', onPointerUp);
-        window.addEventListener('pointercancel', onPointerCancel);
+        stopPointerSession = (0, pointer_session_1.startPointerSession)({
+            event: e,
+            target: e.currentTarget,
+            onMove: onPointerMove,
+            onEnd: (reason) => {
+                if (reason === 'pointerup' || reason === 'buttons-released') {
+                    onPointerUp();
+                }
+                else {
+                    onPointerCancel();
+                }
+            },
+        });
     }, [
         clearDragOverrides,
         clearEffectDragOverrides,

package/dist/components/TimelineInOutToggle.js

@@ -19,8 +19,8 @@ const getTooltipText = (pointType, key) => [
     .filter(no_react_1.NoReactInternals.truthy)
     .join(' ');
 const style = {
-    width: 16,
-    height: 16,
+    width: 17,
+    height: 17,
 };
 exports.inOutHandles = (0, react_1.createRef)();
 exports.defaultInOutValue = { inFrame: null, outFrame: null };
@@ -239,7 +239,7 @@ const TimelineInOutPointToggle = () => {
         };
     }, [confId, onInMark, onInOutClear, onOutMark]);
     return (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
-            jsx_runtime_1.jsx(ControlButton_1.ControlButton, { title: getTooltipText('In', 'I'), "aria-label": getTooltipText('In', 'I'), onClick: onInMark, onContextMenu: clearInMark, disabled: !videoConfig || isFirstFrame, children: jsx_runtime_1.jsx(timelineInOutPointer_1.TimelineInPointer, { color: inFrame === null ? colors_1.WHITE : colors_1.BLUE, style: style }) }), jsx_runtime_1.jsx(ControlButton_1.ControlButton, { title: getTooltipText('Out', 'O'), "aria-label": getTooltipText('Out', 'O'), onClick: onOutMark, onContextMenu: clearOutMark, disabled: !videoConfig || isLastFrame, children: jsx_runtime_1.jsx(timelineInOutPointer_1.TimelineOutPointer, { color: outFrame === null ? colors_1.WHITE : colors_1.BLUE, style: style }) })
+            jsx_runtime_1.jsx(ControlButton_1.ControlButton, { title: getTooltipText('In', 'I'), "aria-label": getTooltipText('In', 'I'), onClick: onInMark, onContextMenu: clearInMark, disabled: !videoConfig || isFirstFrame, children: (color) => (jsx_runtime_1.jsx(timelineInOutPointer_1.TimelineInPointer, { color: inFrame === null ? color : colors_1.BLUE, style: style })) }), jsx_runtime_1.jsx(ControlButton_1.ControlButton, { title: getTooltipText('Out', 'O'), "aria-label": getTooltipText('Out', 'O'), onClick: onOutMark, onContextMenu: clearOutMark, disabled: !videoConfig || isLastFrame, children: (color) => (jsx_runtime_1.jsx(timelineInOutPointer_1.TimelineOutPointer, { color: outFrame === null ? color : colors_1.BLUE, style: style })) })
         ] }));
 };
 exports.TimelineInOutPointToggle = TimelineInOutPointToggle;

package/dist/components/TopPanel.js

@@ -69,6 +69,7 @@ const row = {
     minHeight: 0,
 };
 const MAX_SIDEBAR_WIDTH = 350;
+const MIN_SIDEBAR_WIDTH = 250;
 const useResponsiveSidebarStatus = () => {
     const { sidebarCollapsedStateLeft } = (0, react_1.useContext)(sidebar_1.SidebarContext);
     const responsiveLeftStatus = (0, use_breakpoint_1.useBreakpoint)(1200) ? 'collapsed' : 'expanded';
@@ -114,8 +115,8 @@ const TopPanelInner = ({ readOnlyStudio, onMounted, drawRef, bufferStateDelayInM
     return (jsx_runtime_1.jsx(ObserveDefaultPropsContext_1.ObserveDefaultProps, { compositionId: (canvasContent === null || canvasContent === void 0 ? void 0 : canvasContent.type) === 'composition'
             ? canvasContent.compositionId
             : null, readOnlyStudio: readOnlyStudio, children: jsx_runtime_1.jsxs("div", { style: container, children: [
-                jsx_runtime_1.jsx("div", { style: row, children: jsx_runtime_1.jsxs(SplitterContainer_1.SplitterContainer, { minFlex: 0.15, maxFlex: 0.4, defaultFlex: 0.2, maxFlexerSize: MAX_SIDEBAR_WIDTH, minFlexerSize: null, maxAntiFlexerSize: null, id: "sidebar-to-preview", orientation: "vertical", children: [actualStateLeft === 'expanded' ? (isMobileLayout ? (jsx_runtime_1.jsx(MobilePanel_1.default, { onClose: onCollapseLeft, side: "left", children: jsx_runtime_1.jsx(ExplorerPanel_1.ExplorerPanel, { readOnlyStudio: readOnlyStudio }) })) : (jsx_runtime_1.jsx(SplitterElement_1.SplitterElement, { sticky: null, type: "flexer", children: jsx_runtime_1.jsx(ExplorerPanel_1.ExplorerPanel, { readOnlyStudio: readOnlyStudio }) }))) : null, actualStateLeft === 'expanded' && !isMobileLayout ? (jsx_runtime_1.jsx(SplitterHandle_1.SplitterHandle, { allowToCollapse: "left", onCollapse: onCollapseLeft })) : null, jsx_runtime_1.jsx(SplitterElement_1.SplitterElement, { sticky: null, type: "anti-flexer", children: jsx_runtime_1.jsxs(SplitterContainer_1.SplitterContainer, { minFlex: 0.5, maxFlex: 0.8, defaultFlex: 0.7, maxFlexerSize: null, minFlexerSize: null, maxAntiFlexerSize: MAX_SIDEBAR_WIDTH, id: "canvas-to-right-sidebar", orientation: "vertical", children: [
-                                        jsx_runtime_1.jsx(SplitterElement_1.SplitterElement, { sticky: null, type: "flexer", children: jsx_runtime_1.jsx("div", { ref: drawRef, style: canvasContainerStyle, children: jsx_runtime_1.jsx(CanvasIfSizeIsAvailable_1.CanvasIfSizeIsAvailable, {}) }) }), actualStateRight === 'expanded' && !isMobileLayout ? (jsx_runtime_1.jsx(SplitterHandle_1.SplitterHandle, { allowToCollapse: "right", onCollapse: onCollapseRight })) : null, actualStateRight === 'expanded' ? (isMobileLayout ? (jsx_runtime_1.jsx(MobilePanel_1.default, { onClose: onCollapseRight, side: "right", children: jsx_runtime_1.jsx(OptionsPanel_1.OptionsPanel, { readOnlyStudio: readOnlyStudio }) })) : (jsx_runtime_1.jsx(SplitterElement_1.SplitterElement, { sticky: null, type: "anti-flexer", children: jsx_runtime_1.jsx(OptionsPanel_1.OptionsPanel, { readOnlyStudio: readOnlyStudio }) }))) : null] }) })
+                jsx_runtime_1.jsx("div", { style: row, children: jsx_runtime_1.jsxs(SplitterContainer_1.SplitterContainer, { minFlex: 0.15, maxFlex: 0.4, defaultFlex: 0.2, maxFlexerSize: MAX_SIDEBAR_WIDTH, minFlexerSize: null, maxAntiFlexerSize: null, minAntiFlexerSize: null, id: "sidebar-to-preview", orientation: "vertical", children: [actualStateLeft === 'expanded' ? (isMobileLayout ? (jsx_runtime_1.jsx(MobilePanel_1.default, { onClose: onCollapseLeft, children: jsx_runtime_1.jsx(ExplorerPanel_1.ExplorerPanel, { readOnlyStudio: readOnlyStudio }) })) : (jsx_runtime_1.jsx(SplitterElement_1.SplitterElement, { sticky: null, type: "flexer", children: jsx_runtime_1.jsx(ExplorerPanel_1.ExplorerPanel, { readOnlyStudio: readOnlyStudio }) }))) : null, actualStateLeft === 'expanded' && !isMobileLayout ? (jsx_runtime_1.jsx(SplitterHandle_1.SplitterHandle, { allowToCollapse: "left", onCollapse: onCollapseLeft })) : null, jsx_runtime_1.jsx(SplitterElement_1.SplitterElement, { sticky: null, type: "anti-flexer", children: jsx_runtime_1.jsxs(SplitterContainer_1.SplitterContainer, { minFlex: 0.5, maxFlex: 0.8, defaultFlex: 0.7, maxFlexerSize: null, minFlexerSize: null, maxAntiFlexerSize: MAX_SIDEBAR_WIDTH, minAntiFlexerSize: MIN_SIDEBAR_WIDTH, id: "canvas-to-right-sidebar", orientation: "vertical", children: [
+                                        jsx_runtime_1.jsx(SplitterElement_1.SplitterElement, { sticky: null, type: "flexer", children: jsx_runtime_1.jsx("div", { ref: drawRef, style: canvasContainerStyle, children: jsx_runtime_1.jsx(CanvasIfSizeIsAvailable_1.CanvasIfSizeIsAvailable, {}) }) }), actualStateRight === 'expanded' ? (jsx_runtime_1.jsx(SplitterHandle_1.SplitterHandle, { allowToCollapse: "right", onCollapse: onCollapseRight })) : null, actualStateRight === 'expanded' ? (jsx_runtime_1.jsx(SplitterElement_1.SplitterElement, { sticky: null, type: "anti-flexer", children: jsx_runtime_1.jsx(OptionsPanel_1.OptionsPanel, { readOnlyStudio: readOnlyStudio }) })) : null] }) })
                         ] }) }), jsx_runtime_1.jsx(PreviewToolbar_1.PreviewToolbar, { bufferStateDelayInMilliseconds: bufferStateDelayInMilliseconds, readOnlyStudio: readOnlyStudio }), jsx_runtime_1.jsx(CurrentCompositionSideEffects_1.TitleUpdater, {})
             ] }) }));
 };

package/dist/components/UndoRedoButtons.js

@@ -6,6 +6,7 @@ const react_1 = require("react");
 const ShortcutHint_1 = require("../error-overlay/remotion-overlay/ShortcutHint");
 const browser_studio_operations_1 = require("../helpers/browser-studio-operations");
 const client_id_1 = require("../helpers/client-id");
+const colors_1 = require("../helpers/colors");
 const is_mac_1 = require("../helpers/is-mac");
 const use_keybinding_1 = require("../helpers/use-keybinding");
 const redo_1 = require("../icons/redo");
@@ -13,8 +14,8 @@ const undo_1 = require("../icons/undo");
 const call_api_1 = require("./call-api");
 const InlineAction_1 = require("./InlineAction");
 const iconStyle = {
-    width: 16,
-    height: 16,
+    width: 14,
+    height: 14,
 };
 const UndoRedoButtons = () => {
     const [undoFile, setUndoFile] = (0, react_1.useState)(null);
@@ -130,10 +131,10 @@ const UndoRedoButtons = () => {
             ? `Redo (${ShortcutHint_1.cmdOrCtrlCharacter}+Shift+Z)`
             : `Redo (${ShortcutHint_1.cmdOrCtrlCharacter}+Y)`;
     const renderUndo = (0, react_1.useCallback)((color) => {
-        return jsx_runtime_1.jsx(undo_1.UndoIcon, { style: { ...iconStyle, color } });
+        return jsx_runtime_1.jsx(undo_1.UndoIcon, { style: iconStyle, color: color });
     }, []);
     const renderRedo = (0, react_1.useCallback)((color) => {
-        return jsx_runtime_1.jsx(redo_1.RedoIcon, { style: { ...iconStyle, color } });
+        return jsx_runtime_1.jsx(redo_1.RedoIcon, { style: iconStyle, color: color });
     }, []);
     const canUndo = undoFile !== null;
     const canRedo = redoFile !== null;
@@ -141,7 +142,7 @@ const UndoRedoButtons = () => {
         return null;
     }
     return (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
-            jsx_runtime_1.jsx(InlineAction_1.InlineAction, { onClick: onUndo, renderAction: renderUndo, title: undoTooltip, disabled: !canUndo }), jsx_runtime_1.jsx(InlineAction_1.InlineAction, { onClick: onRedo, renderAction: renderRedo, title: redoTooltip, disabled: !canRedo })
+            jsx_runtime_1.jsx(InlineAction_1.InlineAction, { variant: null, onClick: onUndo, renderAction: renderUndo, title: undoTooltip, disabled: !canUndo, unhoveredColor: colors_1.WHITE_ALPHA_80 }), jsx_runtime_1.jsx(InlineAction_1.InlineAction, { variant: null, onClick: onRedo, renderAction: renderRedo, title: redoTooltip, disabled: !canRedo, unhoveredColor: colors_1.WHITE_ALPHA_80 })
         ] }));
 };
 exports.UndoRedoButtons = UndoRedoButtons;

package/dist/components/UpdateCheck.d.ts

@@ -3,6 +3,8 @@ export type UpdateInfo = {
     currentVersion: string;
     latestVersion: string;
     updateAvailable: boolean;
+    skillsUpdateAvailable: boolean;
+    remotionUpgradeSkillAvailable: boolean;
     timedOut: boolean;
     packageManager: PackageManager | 'unknown';
 };

package/dist/components/UpdateCheck.js

@@ -7,6 +7,7 @@ const remotion_1 = require("remotion");
 const colors_1 = require("../helpers/colors");
 const modals_1 = require("../state/modals");
 const z_index_1 = require("../state/z-index");
+const InlineAction_1 = require("./InlineAction");
 const actions_1 = require("./RenderQueue/actions");
 const buttonStyle = {
     appearance: 'none',
@@ -17,6 +18,12 @@ const buttonStyle = {
     fontSize: 14,
     display: 'inline-flex',
     justifyContent: 'center',
+    marginLeft: 8,
+};
+const updateIconContainer = {
+    alignItems: 'center',
+    display: 'flex',
+    flexShrink: 0,
 };
 const UpdateCheck = () => {
     const [info, setInfo] = (0, react_1.useState)(null);
@@ -24,9 +31,9 @@ const UpdateCheck = () => {
     const { tabIndex } = (0, z_index_1.useZIndex)();
     const [knownBugs, setKnownBugs] = (0, react_1.useState)(null);
     const [hovered, setHovered] = (0, react_1.useState)(false);
-    const hasKnownBugs = (0, react_1.useMemo)(() => {
-        return knownBugs && knownBugs.length > 0;
-    }, [knownBugs]);
+    const hasBugfixesAvailable = (0, react_1.useMemo)(() => {
+        return Boolean((info === null || info === void 0 ? void 0 : info.updateAvailable) && knownBugs && knownBugs.length > 0);
+    }, [info === null || info === void 0 ? void 0 : info.updateAvailable, knownBugs]);
     const checkForUpdates = (0, react_1.useCallback)(() => {
         const controller = new AbortController();
         (0, actions_1.updateAvailable)(controller.signal)
@@ -78,25 +85,36 @@ const UpdateCheck = () => {
     const dynButtonStyle = (0, react_1.useMemo)(() => {
         return {
             ...buttonStyle,
-            color: hovered ? colors_1.WHITE : hasKnownBugs ? colors_1.WARNING_COLOR : colors_1.WHITE_ALPHA_80,
+            color: hovered
+                ? colors_1.WHITE
+                : hasBugfixesAvailable
+                    ? colors_1.WARNING_COLOR
+                    : colors_1.WHITE_ALPHA_80,
         };
-    }, [hasKnownBugs, hovered]);
+    }, [hasBugfixesAvailable, hovered]);
     const onPointerEnter = (0, react_1.useCallback)(() => {
         setHovered(true);
     }, []);
     const onPointerLeave = (0, react_1.useCallback)(() => {
         setHovered(false);
     }, []);
+    const renderUpdateIcon = (0, react_1.useCallback)((color) => {
+        return (jsx_runtime_1.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", style: {
+                height: 16,
+                width: 16,
+                color,
+                flexShrink: 0,
+            }, viewBox: "0 0 512 512", children: jsx_runtime_1.jsx("path", { fill: color, d: "M256 48a208 208 0 1 1 0 416 208 208 0 1 1 0-416zm0 464A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM135.1 217.4c-4.5 4.2-7.1 10.1-7.1 16.3c0 12.3 10 22.3 22.3 22.3H208v96c0 17.7 14.3 32 32 32h32c17.7 0 32-14.3 32-32V256h57.7c12.3 0 22.3-10 22.3-22.3c0-6.2-2.6-12.1-7.1-16.3L269.8 117.5c-3.8-3.5-8.7-5.5-13.8-5.5s-10.1 2-13.8 5.5L135.1 217.4z" }) }));
+    }, []);
     if (!info) {
         return null;
     }
-    if (!info.updateAvailable) {
+    if (!info.updateAvailable && !info.skillsUpdateAvailable) {
         return null;
     }
-    return (jsx_runtime_1.jsx("button", { tabIndex: tabIndex, style: dynButtonStyle, onClick: openModal, onPointerEnter: onPointerEnter, onPointerLeave: onPointerLeave, type: "button", title: hasKnownBugs ? 'Bugfixes available' : 'Update available', children: hasKnownBugs ? ('Bugfixes available') : (jsx_runtime_1.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", style: {
-                height: 16,
-                width: 16,
-                color: 'inherit',
-            }, viewBox: "0 0 512 512", children: jsx_runtime_1.jsx("path", { fill: colors_1.CURRENT_COLOR_LOWERCASE, d: "M256 48a208 208 0 1 1 0 416 208 208 0 1 1 0-416zm0 464A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM135.1 217.4c-4.5 4.2-7.1 10.1-7.1 16.3c0 12.3 10 22.3 22.3 22.3H208v96c0 17.7 14.3 32 32 32h32c17.7 0 32-14.3 32-32V256h57.7c12.3 0 22.3-10 22.3-22.3c0-6.2-2.6-12.1-7.1-16.3L269.8 117.5c-3.8-3.5-8.7-5.5-13.8-5.5s-10.1 2-13.8 5.5L135.1 217.4z" }) })) }));
+    if (!hasBugfixesAvailable) {
+        return (jsx_runtime_1.jsx("div", { style: updateIconContainer, children: jsx_runtime_1.jsx(InlineAction_1.InlineAction, { variant: null, onClick: openModal, renderAction: renderUpdateIcon, unhoveredColor: colors_1.WHITE_ALPHA_80, title: "Update available" }) }));
+    }
+    return (jsx_runtime_1.jsx("button", { tabIndex: tabIndex, style: dynButtonStyle, onClick: openModal, onPointerEnter: onPointerEnter, onPointerLeave: onPointerLeave, type: "button", title: "Bugfixes available", children: "Bugfixes available" }));
 };
 exports.UpdateCheck = UpdateCheck;