@remotion/studio 4.0.479 → 4.0.482

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

@@ -285,7 +285,8 @@ const useTimelineKeyframeDrag = ({ frame, nodePathInfo, onSelect, selectable, se
             toggleKey: e.metaKey || e.ctrlKey,
         };
         const shouldDragExistingSelection = selected && !interaction.shiftKey && !interaction.toggleKey;
-        if (!shouldDragExistingSelection) {
+        const shouldSelectOnPointerUp = !selected && !interaction.shiftKey && !interaction.toggleKey;
+        if (!shouldDragExistingSelection && !shouldSelectOnPointerUp) {
             onSelect(interaction);
         }
         const clickedSelection = {
@@ -380,6 +381,9 @@ const useTimelineKeyframeDrag = ({ frame, nodePathInfo, onSelect, selectable, se
             cleanup();
             const targets = dragTargets;
             if (!hasDragged || lastDelta === 0 || targets === null) {
+                if (shouldSelectOnPointerUp) {
+                    onSelect(interaction);
+                }
                 clearActiveOverrides();
                 clearDraggedKeyframes();
                 return;
@@ -392,11 +396,13 @@ const useTimelineKeyframeDrag = ({ frame, nodePathInfo, onSelect, selectable, se
                 clearDraggedKeyframes();
                 return;
             }
-            currentSelection.current.selectItems(targets.map((target) => ({
-                type: 'keyframe',
-                nodePathInfo: target.nodePathInfo,
-                frame: target.displayFrame + lastDelta,
-            })));
+            if (shouldDragExistingSelection) {
+                currentSelection.current.selectItems(targets.map((target) => ({
+                    type: 'keyframe',
+                    nodePathInfo: target.nodePathInfo,
+                    frame: target.displayFrame + lastDelta,
+                })));
+            }
             clearActiveOverrides();
             clearDraggedKeyframes();
             (0, call_move_keyframe_1.callMoveKeyframes)({

package/dist/components/TopPanel.js

@@ -115,7 +115,7 @@ const TopPanelInner = ({ readOnlyStudio, onMounted, drawRef, bufferStateDelayInM
             : 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, 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' ? (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, 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' ? (isMobileLayout ? (jsx_runtime_1.jsx(MobilePanel_1.default, { onClose: onCollapseRight, 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(PreviewToolbar_1.PreviewToolbar, { bufferStateDelayInMilliseconds: bufferStateDelayInMilliseconds, readOnlyStudio: readOnlyStudio }), jsx_runtime_1.jsx(CurrentCompositionSideEffects_1.CurrentCompositionKeybindings, { readOnlyStudio: readOnlyStudio }), jsx_runtime_1.jsx(CurrentCompositionSideEffects_1.TitleUpdater, {})
+                        ] }) }), jsx_runtime_1.jsx(PreviewToolbar_1.PreviewToolbar, { bufferStateDelayInMilliseconds: bufferStateDelayInMilliseconds, readOnlyStudio: readOnlyStudio }), jsx_runtime_1.jsx(CurrentCompositionSideEffects_1.TitleUpdater, {})
             ] }) }));
 };
 exports.TopPanel = react_1.default.memo(TopPanelInner);

package/dist/components/composition-menu-items.js

@@ -99,6 +99,23 @@ const getCompositionMenuItems = ({ composition, connectionStatus, resolvedLocati
                 id: 'show-in-editor-divider',
             }
             : null,
+        {
+            id: 'new',
+            keyHint: null,
+            label: `New...`,
+            leftItem: null,
+            onClick: () => {
+                closeMenu();
+                setSelectedModal({
+                    type: 'new-comp',
+                });
+            },
+            quickSwitcherLabel: 'New composition...',
+            subMenu: null,
+            type: 'item',
+            value: 'new',
+            disabled: readOnlyStudio,
+        },
         {
             id: 'rename',
             keyHint: null,

package/dist/components/selected-outline-measurement.js

@@ -219,28 +219,60 @@ const getOutlineSelectionInteraction = ({ shiftKey, metaKey, ctrlKey, }) => ({
     toggleKey: metaKey || ctrlKey,
 });
 exports.getOutlineSelectionInteraction = getOutlineSelectionInteraction;
+const getKeyframeOrEasingField = (item) => {
+    if (item.type !== 'keyframe' && item.type !== 'easing') {
+        return null;
+    }
+    return (0, parse_keyframe_field_from_node_path_1.parseKeyframeFieldFromNodePath)(item.nodePathInfo.auxiliaryKeys);
+};
 const getSelectedEffectFieldsBySequenceKey = (selectedItems) => {
-    var _a, _b;
+    var _a;
     const selectedEffects = new Map();
     for (const item of selectedItems) {
-        if (item.type !== 'sequence-effect' &&
-            item.type !== 'sequence-effect-prop') {
+        if (item.type === 'guide') {
             continue;
         }
         const sequenceKey = (0, TimelineSelection_1.getTimelineSequenceSelectionKey)(item.nodePathInfo);
         const effectsForSequence = (_a = selectedEffects.get(sequenceKey)) !== null && _a !== void 0 ? _a : new Map();
-        const selectedFields = (_b = effectsForSequence.get(item.i)) !== null && _b !== void 0 ? _b : {
-            allFields: false,
-            fieldKeys: new Set(),
+        const addSelectedFields = ({ effectIndex, fieldKey, allFields, }) => {
+            var _a;
+            const selectedFields = (_a = effectsForSequence.get(effectIndex)) !== null && _a !== void 0 ? _a : {
+                allFields: false,
+                fieldKeys: new Set(),
+            };
+            if (allFields) {
+                selectedFields.allFields = true;
+            }
+            else if (fieldKey !== null) {
+                selectedFields.fieldKeys.add(fieldKey);
+            }
+            effectsForSequence.set(effectIndex, selectedFields);
+            selectedEffects.set(sequenceKey, effectsForSequence);
         };
         if (item.type === 'sequence-effect') {
-            selectedFields.allFields = true;
+            addSelectedFields({
+                effectIndex: item.i,
+                fieldKey: null,
+                allFields: true,
+            });
+            continue;
+        }
+        if (item.type === 'sequence-effect-prop') {
+            addSelectedFields({
+                effectIndex: item.i,
+                fieldKey: item.key,
+                allFields: false,
+            });
+            continue;
         }
-        else {
-            selectedFields.fieldKeys.add(item.key);
+        const keyframedField = getKeyframeOrEasingField(item);
+        if ((keyframedField === null || keyframedField === void 0 ? void 0 : keyframedField.type) === 'effect') {
+            addSelectedFields({
+                effectIndex: keyframedField.effectIndex,
+                fieldKey: keyframedField.fieldKey,
+                allFields: false,
+            });
         }
-        effectsForSequence.set(item.i, selectedFields);
-        selectedEffects.set(sequenceKey, effectsForSequence);
     }
     return selectedEffects;
 };
@@ -257,17 +289,19 @@ const getSelectedTransformOriginInfo = (selectedItems) => {
             displayFrame: null,
         };
     }
-    if (selectedItem.type !== 'keyframe') {
+    if (selectedItem.type !== 'keyframe' && selectedItem.type !== 'easing') {
         return null;
     }
-    const field = (0, parse_keyframe_field_from_node_path_1.parseKeyframeFieldFromNodePath)(selectedItem.nodePathInfo.auxiliaryKeys);
+    const field = getKeyframeOrEasingField(selectedItem);
     if ((field === null || field === void 0 ? void 0 : field.type) !== 'sequence' ||
         field.fieldKey !== selected_outline_types_1.transformOriginFieldKey) {
         return null;
     }
     return {
         sequenceKey: (0, TimelineSelection_1.getTimelineSequenceSelectionKey)(selectedItem.nodePathInfo),
-        displayFrame: selectedItem.frame,
+        displayFrame: selectedItem.type === 'keyframe'
+            ? selectedItem.frame
+            : selectedItem.fromFrame,
     };
 };
 exports.getSelectedTransformOriginInfo = getSelectedTransformOriginInfo;

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

@@ -24,6 +24,12 @@ const errorWhileErrorStyle = {
     lineHeight: 1.5,
     whiteSpace: 'pre',
 };
+const errorWhileSymbolicatingStyle = {
+    color: 'white',
+    lineHeight: 1.5,
+    marginTop: 24,
+    opacity: 0.7,
+};
 const shouldLogError = (error) => {
     return (!(0, error_origin_1.wasErrorLoggedByServer)(error) && (0, studio_shared_1.getLocationFromBuildError)(error) === null);
 };
@@ -51,6 +57,7 @@ const logSymbolicatedStudioError = (record) => {
     });
 };
 const ErrorLoader = ({ error, keyboardShortcuts, onRetry, canHaveDismissButton, calculateMetadata, }) => {
+    var _a;
     const [state, setState] = (0, react_1.useState)({
         type: 'loading',
     });
@@ -90,7 +97,7 @@ const ErrorLoader = ({ error, keyboardShortcuts, onRetry, canHaveDismissButton,
     }
     if (state.type === 'error') {
         return (jsx_runtime_1.jsxs("div", { style: container, children: [
-                jsx_runtime_1.jsx(ErrorTitle_1.ErrorTitle, { symbolicating: false, name: error.name, message: error.message, canHaveDismissButton: canHaveDismissButton }), jsx_runtime_1.jsx("div", { style: errorWhileErrorStyle, children: "Error while getting stack trace:" }), jsx_runtime_1.jsx("div", { style: errorWhileErrorStyle, children: state.err.stack }), jsx_runtime_1.jsx("div", { style: errorWhileErrorStyle, children: "Report this in the Remotion repo." })
+                jsx_runtime_1.jsx(ErrorTitle_1.ErrorTitle, { symbolicating: false, name: error.name, message: error.message, canHaveDismissButton: canHaveDismissButton }), jsx_runtime_1.jsx("div", { style: errorWhileErrorStyle, children: (_a = error.stack) !== null && _a !== void 0 ? _a : 'Check the Terminal and browser console for error messages.' }), jsx_runtime_1.jsxs("div", { style: errorWhileSymbolicatingStyle, children: ["Could not symbolicate the stack trace: ", state.err.message] })
             ] }));
     }
     if (state.type === 'no-record') {