@remotion/studio 4.0.484 → 4.0.486

package/dist/components/Timeline/TimelineDeleteKeybindings.js

@@ -11,6 +11,7 @@ const ConfirmationDialog_1 = require("../ConfirmationDialog");
 const delete_selected_timeline_item_1 = require("./delete-selected-timeline-item");
 const duplicate_selected_timeline_item_1 = require("./duplicate-selected-timeline-item");
 const reset_selected_timeline_props_1 = require("./reset-selected-timeline-props");
+const split_selected_timeline_item_1 = require("./split-selected-timeline-item");
 const TimelineSelection_1 = require("./TimelineSelection");
 const update_selected_easing_1 = require("./update-selected-easing");
 const TimelineDeleteKeybindings = () => {
@@ -128,7 +129,10 @@ const TimelineDeleteKeybindings = () => {
         const duplicate = keybindings.registerKeybinding({
             event: 'keydown',
             key: 'd',
-            callback: () => {
+            callback: (event) => {
+                if (!(0, split_selected_timeline_item_1.shouldHandleTimelineDuplicateShortcut)(event)) {
+                    return;
+                }
                 const { selectedItems } = currentSelection.current;
                 if (selectedItems.length === 0) {
                     return;
@@ -147,10 +151,39 @@ const TimelineDeleteKeybindings = () => {
             triggerIfInputFieldFocused: false,
             keepRegisteredWhenNotHighestContext: false,
         });
+        const split = keybindings.registerKeybinding({
+            event: 'keydown',
+            key: 'd',
+            callback: (event) => {
+                if (!(0, split_selected_timeline_item_1.shouldHandleTimelineSplitShortcut)(event)) {
+                    return;
+                }
+                const { selectedItems } = currentSelection.current;
+                if (selectedItems.length === 0) {
+                    return;
+                }
+                const splitPromise = (0, split_selected_timeline_item_1.splitSelectedTimelineItems)({
+                    selections: selectedItems,
+                    sequences: sequencesRef.current,
+                    overrideIdsToNodePaths: overrideIdToNodePathMappings,
+                    propStatuses: propStatusesRef.current,
+                    splitFrame: timelinePositionRef.current,
+                });
+                if (splitPromise === null) {
+                    return;
+                }
+                splitPromise.catch(() => undefined);
+            },
+            commandCtrlKey: true,
+            preventDefault: true,
+            triggerIfInputFieldFocused: false,
+            keepRegisteredWhenNotHighestContext: false,
+        });
         return () => {
             backspace.unregister();
             deleteKey.unregister();
             duplicate.unregister();
+            split.unregister();
         };
     }, [
         canSelect,

package/dist/components/Timeline/TimelineEffectItem.js

@@ -5,6 +5,7 @@ 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 colors_1 = require("../../helpers/colors");
 const timeline_layout_1 = require("../../helpers/timeline-layout");
 const call_api_1 = require("../call-api");
 const ContextMenu_1 = require("../ContextMenu");
@@ -18,7 +19,7 @@ const EFFECT_REORDER_MIME_TYPE = 'application/remotion-effect-reorder';
 let currentEffectDrag = null;
 const rowLabel = {
     fontSize: 12,
-    color: 'rgba(255, 255, 255, 0.8)',
+    color: colors_1.WHITE_ALPHA_80,
     userSelect: 'none',
 };
 const rowStyle = {
@@ -29,7 +30,7 @@ const reorderWrapper = {
     position: 'relative',
 };
 const reorderLineBase = {
-    backgroundColor: '#0b84ff',
+    backgroundColor: colors_1.TIMELINE_BLUE,
     height: 2,
     left: 0,
     pointerEvents: 'none',

package/dist/components/Timeline/TimelineEffectPropItem.js

@@ -174,7 +174,7 @@ const TimelineEffectPropValue = ({ field, nodePath, validatedLocation, sourceFra
     }
     if (effectStatus.type === 'cannot-update-effect') {
         if (effectStatus.reason === 'computed') {
-            return jsx_runtime_1.jsx(TimelineSchemaField_1.UnsupportedStatus, { label: "computed" });
+            return (jsx_runtime_1.jsx(TimelineSchemaField_1.UnsupportedStatus, { label: "computed", fixHref: TimelineSchemaField_1.TIMELINE_COMPUTED_EFFECT_FIX_LINK }));
         }
         if (effectStatus.reason === 'not-call-expression') {
             return jsx_runtime_1.jsx(TimelineSchemaField_1.UnsupportedStatus, { label: "not inline" });
@@ -200,7 +200,7 @@ const TimelineEffectPropValue = ({ field, nodePath, validatedLocation, sourceFra
         return (jsx_runtime_1.jsx(TimelineKeyframedValue_1.TimelineKeyframedValue, { field: field, propStatus: propStatus, sourceFrame: sourceFrame, dragOverrideValue: dragOverrideValue, onSave: onSaveKeyframed, onDragValueChange: onDragValueChange, onDragEnd: onDragEnd, scaleLockNodePath: nodePath }));
     }
     if (propStatus.status === 'computed') {
-        return jsx_runtime_1.jsx(TimelineSchemaField_1.UnsupportedStatus, { label: (0, get_timeline_keyframes_1.getComputedStatusLabel)(propStatus) });
+        return (jsx_runtime_1.jsx(TimelineSchemaField_1.UnsupportedStatus, { label: (0, get_timeline_keyframes_1.getComputedStatusLabel)(propStatus), fixHref: TimelineSchemaField_1.TIMELINE_COMPUTED_EFFECT_FIX_LINK }));
     }
     const effectiveValue = remotion_1.Internals.getEffectiveVisualModeValue({
         propStatus,

package/dist/components/Timeline/TimelineExpandArrowButton.js

@@ -36,10 +36,11 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.TimelineExpandArrowSpacer = exports.TimelineExpandArrowButton = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = __importStar(require("react"));
+const colors_1 = require("../../helpers/colors");
 const arrowButton = {
     background: 'none',
     border: 'none',
-    color: 'white',
+    color: colors_1.WHITE,
     cursor: 'pointer',
     padding: 0,
     display: 'flex',
@@ -75,7 +76,7 @@ const TimelineExpandArrowButton = ({ isExpanded, onClick, label, disabled = fals
             opacity: disabled ? 0.5 : 1,
         };
     }, [isExpanded, disabled]);
-    return (jsx_runtime_1.jsx("button", { type: "button", style: style, onClick: handleClick, onDoubleClick: stopPropagation, onPointerDown: stopPropagation, disabled: disabled, "aria-expanded": isExpanded, "aria-label": `${isExpanded ? 'Collapse' : 'Expand'} ${label}`, children: jsx_runtime_1.jsx("svg", { width: "12", height: "12", viewBox: "0 0 8 8", style: svgStyle, children: jsx_runtime_1.jsx("path", { d: "M2 1L6 4L2 7Z", fill: "#ccc" }) }) }));
+    return (jsx_runtime_1.jsx("button", { type: "button", style: style, onClick: handleClick, onDoubleClick: stopPropagation, onPointerDown: stopPropagation, disabled: disabled, "aria-expanded": isExpanded, "aria-label": `${isExpanded ? 'Collapse' : 'Expand'} ${label}`, children: jsx_runtime_1.jsx("svg", { width: "12", height: "12", viewBox: "0 0 8 8", style: svgStyle, children: jsx_runtime_1.jsx("path", { d: "M2 1L6 4L2 7Z", fill: colors_1.LIGHT_GRAY }) }) }));
 };
 exports.TimelineExpandArrowButton = TimelineExpandArrowButton;
 const TimelineExpandArrowSpacer = () => {

package/dist/components/Timeline/TimelineExpandedRow.js

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.TimelineExpandedRow = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = __importDefault(require("react"));
+const colors_1 = require("../../helpers/colors");
 const timeline_layout_1 = require("../../helpers/timeline-layout");
 const timeline_row_layout_1 = require("./timeline-row-layout");
 const TimelineEffectItem_1 = require("./TimelineEffectItem");
@@ -17,7 +18,7 @@ const TimelineSelection_1 = require("./TimelineSelection");
 const TimelineSequencePropItem_1 = require("./TimelineSequencePropItem");
 const rowLabel = {
     fontSize: 12,
-    color: 'rgba(255, 255, 255, 0.8)',
+    color: colors_1.WHITE_ALPHA_80,
     userSelect: 'none',
 };
 const TimelineExpandedRow = ({ node, depth, nestedDepth, rowDepthBase, getIsExpanded, toggleTrack, validatedLocation, nodePath, schema, keyframeDisplayOffset, keyframeControlsMode, }) => {

package/dist/components/Timeline/TimelineExpandedSection.js

@@ -41,7 +41,7 @@ const timeline_layout_1 = require("../../helpers/timeline-layout");
 const TimelineExpandedRow_1 = require("./TimelineExpandedRow");
 const use_timeline_expanded_tree_1 = require("./use-timeline-expanded-tree");
 const expandedSectionBase = {
-    color: 'white',
+    color: colors_1.WHITE,
     fontFamily: 'Arial, Helvetica, sans-serif',
     fontSize: 12,
     display: 'flex',
@@ -56,6 +56,7 @@ const TimelineExpandedSection = ({ sequence, validatedLocation, nodePathInfo, ne
     const { filteredTree, getIsExpanded, toggleTrack } = (0, use_timeline_expanded_tree_1.useTimelineExpandedTree)({
         sequence,
         nodePathInfo,
+        includeTextContent: false,
     });
     const flat = (0, react_1.useMemo)(() => (0, timeline_layout_1.flattenVisibleTreeNodes)({ nodes: filteredTree, getIsExpanded }), [filteredTree, getIsExpanded]);
     const expandedHeight = (0, react_1.useMemo)(() => {

package/dist/components/Timeline/TimelineFieldLabel.js

@@ -3,11 +3,12 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.TimelineFieldLabel = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
+const colors_1 = require("../../helpers/colors");
 const timeline_field_row_layout_1 = require("./timeline-field-row-layout");
 const TimelineSelection_1 = require("./TimelineSelection");
 const fieldNameBase = {
     fontSize: 12,
-    color: 'rgba(255, 255, 255, 0.8)',
+    color: colors_1.WHITE_ALPHA_80,
     userSelect: 'none',
     whiteSpace: 'nowrap',
     overflow: 'hidden',

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

@@ -0,0 +1,11 @@
+import React from 'react';
+import type { CanUpdateSequencePropStatusStatic } from 'remotion';
+import type { SchemaFieldInfo, TimelineFieldOnDragValueChange, TimelineFieldOnSave } from '../../helpers/timeline-layout';
+export declare const TimelineFontFamilyField: React.FC<{
+    readonly field: SchemaFieldInfo;
+    readonly propStatus: CanUpdateSequencePropStatusStatic;
+    readonly effectiveValue: unknown;
+    readonly onSave: TimelineFieldOnSave;
+    readonly onDragValueChange: TimelineFieldOnDragValueChange;
+    readonly onDragEnd: () => void;
+}>;