@remotion/studio 4.0.513 → 4.0.514

package/dist/components/Timeline/TimelineEffectPropItem.js

@@ -7,6 +7,7 @@ const react_1 = require("react");
 const remotion_1 = require("remotion");
 const client_id_1 = require("../../helpers/client-id");
 const open_in_editor_1 = require("../../helpers/open-in-editor");
+const use_runtime_values_1 = require("../../helpers/use-runtime-values");
 const call_api_1 = require("../call-api");
 const ContextMenu_1 = require("../ContextMenu");
 const use_default_editor_info_1 = require("../use-default-editor-info");
@@ -40,7 +41,11 @@ const isResettableStatus = ({ status, defaultValue, }) => {
     const effectiveCodeValue = (_a = status.codeValue) !== null && _a !== void 0 ? _a : defaultValue;
     return JSON.stringify(effectiveCodeValue) !== JSON.stringify(defaultValue);
 };
-const TimelineEffectPropValue = ({ field, nodePath, validatedLocation, sourceFrame }) => {
+const TimelineComputedEffectPropValue = ({ field, propStatus, runtimeValueStore, validatedLocation }) => {
+    const runtimeValue = (0, use_runtime_values_1.useRuntimeStoreValue)(runtimeValueStore, field.key);
+    return (jsx_runtime_1.jsx(TimelineSchemaField_1.TimelineNonEditableStatus, { propStatus: propStatus, field: field, runtimeValue: runtimeValue, validatedLocation: validatedLocation }));
+};
+const TimelineEffectPropValue = ({ field, nodePath, validatedLocation, sourceFrame, runtimeValueStore }) => {
     var _a;
     var _b;
     const { setEffectDragOverrides, clearEffectDragOverrides, setPropStatuses } = (0, react_1.useContext)(remotion_1.Internals.VisualModeSettersContext);
@@ -179,22 +184,22 @@ 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", fixHref: TimelineSchemaField_1.TIMELINE_COMPUTED_EFFECT_FIX_LINK }));
+            return (jsx_runtime_1.jsx(TimelineComputedEffectPropValue, { propStatus: { status: 'computed' }, field: field, runtimeValueStore: runtimeValueStore, validatedLocation: validatedLocation }));
         }
         if (effectStatus.reason === 'not-call-expression') {
-            return jsx_runtime_1.jsx(TimelineSchemaField_1.UnsupportedStatus, { label: "not inline" });
+            return jsx_runtime_1.jsx(TimelineSchemaField_1.UnsupportedStatus, { label: "not inline", formattedValue: false });
         }
         if (effectStatus.reason === 'not-found') {
-            return jsx_runtime_1.jsx(TimelineSchemaField_1.UnsupportedStatus, { label: "not found in code" });
+            return (jsx_runtime_1.jsx(TimelineSchemaField_1.UnsupportedStatus, { label: "not found in code", formattedValue: false }));
         }
         throw new Error(`Unsupported effect status: ${effectStatus.reason}`);
     }
     if (effectStatus.type === 'cannot-update-sequence') {
         if (effectStatus.reason === 'not-found') {
-            return jsx_runtime_1.jsx(TimelineSchemaField_1.UnsupportedStatus, { label: "not found in code" });
+            return (jsx_runtime_1.jsx(TimelineSchemaField_1.UnsupportedStatus, { label: "not found in code", formattedValue: false }));
         }
         if (effectStatus.reason === 'error') {
-            return jsx_runtime_1.jsx(TimelineSchemaField_1.UnsupportedStatus, { label: "error" });
+            return jsx_runtime_1.jsx(TimelineSchemaField_1.UnsupportedStatus, { label: "error", formattedValue: false });
         }
         throw new Error(`Unsupported effect status: ${effectStatus.reason}`);
     }
@@ -205,7 +210,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), fixHref: TimelineSchemaField_1.TIMELINE_COMPUTED_EFFECT_FIX_LINK }));
+        return (jsx_runtime_1.jsx(TimelineComputedEffectPropValue, { propStatus: propStatus, field: field, runtimeValueStore: runtimeValueStore, validatedLocation: validatedLocation }));
     }
     const effectiveValue = remotion_1.Internals.getEffectiveVisualModeValue({
         propStatus,
@@ -217,11 +222,11 @@ const TimelineEffectPropValue = ({ field, nodePath, validatedLocation, sourceFra
     return (jsx_runtime_1.jsx(TimelineSchemaField_1.TimelineFieldValue, { field: field, propStatus: propStatus, onSave: onSave, onDragValueChange: onDragValueChange, onDragEnd: onDragEnd, effectiveValue: effectiveValue, scaleLockNodePath: null }));
 };
 exports.TimelineEffectPropValue = TimelineEffectPropValue;
-const TimelineEffectPropValueAtCurrentFrame = ({ field, nodePath, validatedLocation, keyframeDisplayOffset }) => {
+const TimelineEffectPropValueAtCurrentFrame = ({ field, nodePath, validatedLocation, keyframeDisplayOffset, runtimeValueStore, }) => {
     const timelinePosition = remotion_1.Internals.Timeline.useTimelinePosition();
-    return (jsx_runtime_1.jsx(exports.TimelineEffectPropValue, { field: field, nodePath: nodePath, validatedLocation: validatedLocation, sourceFrame: timelinePosition - keyframeDisplayOffset }));
+    return (jsx_runtime_1.jsx(exports.TimelineEffectPropValue, { field: field, nodePath: nodePath, validatedLocation: validatedLocation, sourceFrame: timelinePosition - keyframeDisplayOffset, runtimeValueStore: runtimeValueStore }));
 };
-const TimelineEffectPropItem = ({ field, validatedLocation, rowDepth, nodePath, nodePathInfo, keyframeDisplayOffset, keyframeControlsMode = 'timeline', }) => {
+const TimelineEffectPropItem = ({ field, validatedLocation, rowDepth, nodePath, nodePathInfo, keyframeDisplayOffset, keyframeControlsMode, runtimeValueStore, }) => {
     var _a;
     var _b;
     const { previewServerState } = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx);
@@ -339,7 +344,7 @@ const TimelineEffectPropItem = ({ field, validatedLocation, rowDepth, nodePath,
             property: field.key,
         }).catch(() => undefined);
     }, [canOpenInEditor, defaultEditorId, field.key, validatedLocation]);
-    const row = (jsx_runtime_1.jsx(TimelineRowChrome_1.TimelineRowChrome, { depth: rowDepth, eye: jsx_runtime_1.jsx(TimelineLayerEye_1.TimelineLayerEyeSpacer, {}), keyframeControls: keyframeControls, arrow: jsx_runtime_1.jsx(TimelineExpandArrowButton_1.TimelineExpandArrowSpacer, {}), style: style, selected: selection.selected, selectable: selection.selectable, selectionItem: selection.selectionItem, onSelect: selection.onSelect, onDoubleClick: onPropertyDoubleClick, showSelectedBackground: true, containsSelection: false, isFieldRow: true, outerHeight: null, children: jsx_runtime_1.jsx(TimelineFieldRowContent_1.TimelineFieldRowContent, { field: field, rowDepth: rowDepth, selected: selection.selected, keyframeControls: keyframeControls, children: jsx_runtime_1.jsx(TimelineEffectPropValueAtCurrentFrame, { field: field, nodePath: nodePath, validatedLocation: validatedLocation, keyframeDisplayOffset: resolvedKeyframeDisplayOffset }) }) }));
+    const row = (jsx_runtime_1.jsx(TimelineRowChrome_1.TimelineRowChrome, { depth: rowDepth, eye: jsx_runtime_1.jsx(TimelineLayerEye_1.TimelineLayerEyeSpacer, {}), keyframeControls: keyframeControls, arrow: jsx_runtime_1.jsx(TimelineExpandArrowButton_1.TimelineExpandArrowSpacer, {}), style: style, selected: selection.selected, selectable: selection.selectable, onSelect: selection.onSelect, onDoubleClick: onPropertyDoubleClick, showSelectedBackground: true, containsSelection: false, isFieldRow: true, outerHeight: null, children: jsx_runtime_1.jsx(TimelineFieldRowContent_1.TimelineFieldRowContent, { field: field, rowDepth: rowDepth, selected: selection.selected, keyframeControls: keyframeControls, children: jsx_runtime_1.jsx(TimelineEffectPropValueAtCurrentFrame, { field: field, nodePath: nodePath, validatedLocation: validatedLocation, keyframeDisplayOffset: resolvedKeyframeDisplayOffset, runtimeValueStore: runtimeValueStore }) }) }));
     return jsx_runtime_1.jsx(ContextMenu_1.ContextMenu, { getItems: getContextMenuItems, children: row });
 };
 exports.TimelineEffectPropItem = TimelineEffectPropItem;

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

@@ -16,7 +16,7 @@ type TimelineExpandedRowProps = {
     readonly nodePath: SequencePropsSubscriptionKey;
     readonly schema: InteractivitySchema;
     readonly keyframeDisplayOffset: number;
-    readonly keyframeControlsMode?: TimelineKeyframeControlsMode;
+    readonly keyframeControlsMode: TimelineKeyframeControlsMode;
 };
 export declare const TimelineExpandedRow: React.NamedExoticComponent<TimelineExpandedRowProps>;
 export {};

package/dist/components/Timeline/TimelineExpandedRow.js

@@ -45,19 +45,19 @@ const TimelineExpandedRowInner = ({ node, depth, nestedDepth, rowDepthBase, getI
         const isExpanded = getIsExpanded(node.nodePathInfo);
         return (jsx_runtime_1.jsx(TimelineRowChrome_1.TimelineRowChrome, { depth: rowDepth, eye: jsx_runtime_1.jsx(TimelineLayerEye_1.TimelineLayerEyeSpacer, {}), arrow: jsx_runtime_1.jsx(TimelineExpandArrowButton_1.TimelineExpandArrowButton, { isExpanded: isExpanded, onClick: () => toggleTrack(node.nodePathInfo), label: `${node.label} section`, disabled: false }), style: {
                 height: timeline_layout_1.TREE_GROUP_ROW_HEIGHT,
-            }, selected: selection.selected, selectable: selection.selectable, selectionItem: selection.selectionItem, onSelect: selection.onSelect, showSelectedBackground: true, containsSelection: false, isFieldRow: false, outerHeight: null, children: jsx_runtime_1.jsx("span", { style: labelStyle, children: node.label }) }));
+            }, selected: selection.selected, selectable: selection.selectable, onSelect: selection.onSelect, showSelectedBackground: true, containsSelection: false, isFieldRow: false, outerHeight: null, children: jsx_runtime_1.jsx("span", { style: labelStyle, children: node.label }) }));
     }
     if (node.field) {
         if (node.field.kind === 'effect-field') {
-            return (jsx_runtime_1.jsx(TimelineEffectPropItem_1.TimelineEffectPropItem, { field: node.field, validatedLocation: validatedLocation, rowDepth: rowDepth, nodePath: nodePath, nodePathInfo: node.nodePathInfo, keyframeDisplayOffset: keyframeDisplayOffset, keyframeControlsMode: keyframeControlsMode }));
+            return (jsx_runtime_1.jsx(TimelineEffectPropItem_1.TimelineEffectPropItem, { field: node.field, validatedLocation: validatedLocation, rowDepth: rowDepth, nodePath: nodePath, nodePathInfo: node.nodePathInfo, keyframeDisplayOffset: keyframeDisplayOffset, keyframeControlsMode: keyframeControlsMode, runtimeValueStore: node.runtimeValueStore }));
         }
         if (node.field.kind === 'sequence-field') {
-            return (jsx_runtime_1.jsx(TimelineSequencePropItem_1.TimelineSequencePropItem, { field: node.field, validatedLocation: validatedLocation, rowDepth: rowDepth, nodePath: nodePath, nodePathInfo: node.nodePathInfo, schema: schema, keyframeDisplayOffset: keyframeDisplayOffset, keyframeControlsMode: keyframeControlsMode }));
+            return (jsx_runtime_1.jsx(TimelineSequencePropItem_1.TimelineSequencePropItem, { field: node.field, validatedLocation: validatedLocation, rowDepth: rowDepth, nodePath: nodePath, nodePathInfo: node.nodePathInfo, schema: schema, keyframeDisplayOffset: keyframeDisplayOffset, keyframeControlsMode: keyframeControlsMode, runtimeValue: node.runtimeValue }));
         }
         throw new Error('Unexpected field kind: ' + JSON.stringify(node.field));
     }
     return (jsx_runtime_1.jsx(TimelineRowChrome_1.TimelineRowChrome, { depth: rowDepth, eye: jsx_runtime_1.jsx(TimelineLayerEye_1.TimelineLayerEyeSpacer, {}), arrow: jsx_runtime_1.jsx(TimelineExpandArrowButton_1.TimelineExpandArrowSpacer, {}), style: {
             height: (0, timeline_layout_1.getTreeRowHeight)(node),
-        }, selected: selection.selected, selectable: selection.selectable, selectionItem: selection.selectionItem, onSelect: selection.onSelect, showSelectedBackground: true, containsSelection: false, isFieldRow: false, outerHeight: null, children: jsx_runtime_1.jsx("span", { style: labelStyle, children: node.label }) }));
+        }, selected: selection.selected, selectable: selection.selectable, onSelect: selection.onSelect, showSelectedBackground: true, containsSelection: false, isFieldRow: false, outerHeight: null, children: jsx_runtime_1.jsx("span", { style: labelStyle, children: node.label }) }));
 };
 exports.TimelineExpandedRow = react_1.default.memo(TimelineExpandedRowInner);

package/dist/components/Timeline/TimelineExpandedSection.js

@@ -76,7 +76,7 @@ const TimelineExpandedSection = ({ sequence, validatedLocation, nodePathInfo, ne
         return null;
     }
     return (jsx_runtime_1.jsx("div", { style: style, children: flat.map(({ node, depth }, i) => {
-            return (jsx_runtime_1.jsxs(react_1.default.Fragment, { children: [i > 0 ? jsx_runtime_1.jsx("div", { style: separator }) : null, jsx_runtime_1.jsx(TimelineExpandedRow_1.TimelineExpandedRow, { node: node, depth: depth, nestedDepth: nestedDepth, getIsExpanded: getIsExpanded, toggleTrack: toggleTrack, validatedLocation: validatedLocation, nodePath: nodePathInfo.sequenceSubscriptionKey, schema: schema, keyframeDisplayOffset: keyframeDisplayOffset })
+            return (jsx_runtime_1.jsxs(react_1.default.Fragment, { children: [i > 0 ? jsx_runtime_1.jsx("div", { style: separator }) : null, jsx_runtime_1.jsx(TimelineExpandedRow_1.TimelineExpandedRow, { node: node, depth: depth, nestedDepth: nestedDepth, getIsExpanded: getIsExpanded, toggleTrack: toggleTrack, validatedLocation: validatedLocation, nodePath: nodePathInfo.sequenceSubscriptionKey, schema: schema, keyframeDisplayOffset: keyframeDisplayOffset, keyframeControlsMode: "timeline" })
                 ] }, JSON.stringify(node.nodePathInfo)));
         }) }));
 };

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

@@ -1,8 +1,4 @@
 import React from 'react';
-import type { TimelineTrackData } from '../../helpers/get-timeline-sequence-sort-key';
 export declare const TimelineHeightContainer: React.NamedExoticComponent<{
-    readonly shown: TimelineTrackData[];
-    readonly hasBeenCut: boolean;
-    readonly isStill: boolean;
     readonly children: React.ReactNode;
 }>;

package/dist/components/Timeline/TimelineHeightContainer.js

@@ -37,7 +37,7 @@ exports.TimelineHeightContainer = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = __importStar(require("react"));
 const TimelineSelection_1 = require("./TimelineSelection");
-const use_timeline_height_1 = require("./use-timeline-height");
+const TimelineVirtualization_1 = require("./TimelineVirtualization");
 const baseStyle = {
     display: 'flex',
     flex: 1,
@@ -45,9 +45,9 @@ const baseStyle = {
     overflowX: 'hidden',
     backgroundColor: TimelineSelection_1.TIMELINE_BACKGROUND,
 };
-const TimelineHeightContainerInner = ({ shown, hasBeenCut, isStill, children }) => {
-    const height = (0, use_timeline_height_1.useTimelineHeight)({ shown, hasBeenCut, isStill });
-    const style = (0, react_1.useMemo)(() => ({ ...baseStyle, height }), [height]);
+const TimelineHeightContainerInner = ({ children }) => {
+    const { totalSize } = (0, TimelineVirtualization_1.useTimelineVirtualization)();
+    const style = (0, react_1.useMemo)(() => ({ ...baseStyle, height: totalSize }), [totalSize]);
     return jsx_runtime_1.jsx("div", { style: style, children: children });
 };
 exports.TimelineHeightContainer = react_1.default.memo(TimelineHeightContainerInner);

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

@@ -2,4 +2,5 @@ import React from 'react';
 export declare const TimelineImageInfo: React.FC<{
     readonly src: string;
     readonly visualizationWidth: number;
+    readonly offsetInPixels: number;
 }>;

package/dist/components/Timeline/TimelineImageInfo.js

@@ -15,7 +15,7 @@ const containerStyle = {
     borderTopLeftRadius: 2,
     borderBottomLeftRadius: 2,
 };
-const TimelineImageInfo = ({ src, visualizationWidth }) => {
+const TimelineImageInfo = ({ src, visualizationWidth, offsetInPixels }) => {
     const ref = (0, react_1.useRef)(null);
     (0, react_1.useEffect)(() => {
         const { current } = ref;
@@ -38,13 +38,14 @@ const TimelineImageInfo = ({ src, visualizationWidth }) => {
             (0, timeline_utils_1.drawRepeatingImageThumbnail)({
                 canvas,
                 image: img,
+                offsetInPixels: offsetInPixels * window.devicePixelRatio,
             });
         };
         img.src = src;
         return () => {
             current.removeChild(canvas);
         };
-    }, [src, visualizationWidth]);
+    }, [offsetInPixels, src, visualizationWidth]);
     return jsx_runtime_1.jsx("div", { ref: ref, style: containerStyle });
 };
 exports.TimelineImageInfo = TimelineImageInfo;

package/dist/components/Timeline/TimelineKeyframeControls.js

@@ -5,6 +5,7 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const studio_shared_1 = require("@remotion/studio-shared");
 const react_1 = require("react");
 const remotion_1 = require("remotion");
+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 timeline_layout_1 = require("../../helpers/timeline-layout");
@@ -292,6 +293,9 @@ const shouldShowTimelineKeyframeControls = ({ propStatus, selected, keyframable,
 };
 exports.shouldShowTimelineKeyframeControls = shouldShowTimelineKeyframeControls;
 const shouldShowTimelineKeyframeNavigation = ({ propStatus, selected, }) => {
+    if (propStatus.status === 'computed') {
+        return false;
+    }
     if (selected) {
         return true;
     }
@@ -342,7 +346,8 @@ const TimelineKeyframeControls = ({ fieldKey, propStatus, nodePath, fileName, ke
         key: fieldKey,
     });
     const canAddKeyframe = keyframable;
-    const canToggleKeyframe = propStatus.status !== 'computed' &&
+    const canToggleKeyframe = (0, browser_studio_operations_1.canUseKeyframeOperations)() &&
+        propStatus.status !== 'computed' &&
         (hasKeyframeAtCurrentFrame || canAddKeyframe);
     const selectedNodePathInfos = (0, react_1.useMemo)(() => (0, exports.getSelectedKeyframeControlNodePathInfos)({
         clickedNodePathInfo: nodePathInfo,

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

@@ -1,6 +1,2 @@
 import React from 'react';
-import type { TimelineTrackData } from '../../helpers/get-timeline-sequence-sort-key';
-export declare const TimelineList: React.FC<{
-    readonly timeline: TimelineTrackData[];
-    readonly showTimePadding: boolean;
-}>;
+export declare const TimelineList: React.FC;

package/dist/components/Timeline/TimelineList.js

@@ -2,22 +2,27 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.TimelineList = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
 const colors_1 = require("../../helpers/colors");
-const nest_timeline_tracks_1 = require("./nest-timeline-tracks");
 const TimelineSequenceItem_1 = require("./TimelineSequenceItem");
-const TimelineTimeIndicators_1 = require("./TimelineTimeIndicators");
+const TimelineVirtualization_1 = require("./TimelineVirtualization");
 const container = {
     flex: 1,
     background: colors_1.BACKGROUND,
+    position: 'relative',
 };
-const TimelineListTrack = ({ nestedTrack }) => {
+const TimelineListTrack = ({ row }) => {
     var _a;
-    const { track, children, siblingIndex } = nestedTrack;
-    return (jsx_runtime_1.jsx("div", { children: jsx_runtime_1.jsx(TimelineSequenceItem_1.TimelineSequenceItem, { siblingIndex: siblingIndex, connectedCompositions: (_a = track.connectedCompositions) !== null && _a !== void 0 ? _a : [], nestedDepth: track.depth, sequence: track.sequence, nodePathInfo: track.nodePathInfo, keyframeDisplayOffset: track.keyframeDisplayOffset, sequenceFrameOffset: track.sequenceFrameOffset, children: children.map((child) => (jsx_runtime_1.jsx(TimelineListTrack, { nestedTrack: child }, child.track.sequence.id))) }) }));
+    const { afterDropLineOffset, siblingIndex, track } = row;
+    return (jsx_runtime_1.jsx(TimelineSequenceItem_1.TimelineSequenceItem, { afterDropLineOffset: afterDropLineOffset, siblingIndex: siblingIndex, connectedCompositions: (_a = track.connectedCompositions) !== null && _a !== void 0 ? _a : [], nestedDepth: track.depth, sequence: track.sequence, nodePathInfo: track.nodePathInfo, keyframeDisplayOffset: track.keyframeDisplayOffset, sequenceFrameOffset: track.sequenceFrameOffset }));
 };
-const TimelineList = ({ timeline, showTimePadding }) => {
-    const nestedTimeline = (0, react_1.useMemo)(() => (0, nest_timeline_tracks_1.nestTimelineTracks)(timeline), [timeline]);
-    return (jsx_runtime_1.jsxs("div", { style: container, children: [showTimePadding ? jsx_runtime_1.jsx(TimelineTimeIndicators_1.TimelineTimePadding, {}) : null, nestedTimeline.map((nestedTrack) => (jsx_runtime_1.jsx(TimelineListTrack, { nestedTrack: nestedTrack }, nestedTrack.track.sequence.id)))] }));
+const TimelineList = () => {
+    const { rows, tracksEnd, virtualItems } = (0, TimelineVirtualization_1.useTimelineVirtualization)();
+    return (jsx_runtime_1.jsx("div", { style: { ...container, height: tracksEnd }, children: virtualItems.map((virtualItem) => (jsx_runtime_1.jsx("div", { style: {
+                height: virtualItem.size,
+                left: 0,
+                position: 'absolute',
+                top: virtualItem.start,
+                width: '100%',
+            }, children: jsx_runtime_1.jsx(TimelineListTrack, { row: rows[virtualItem.index] }) }, virtualItem.key))) }));
 };
 exports.TimelineList = TimelineList;

package/dist/components/Timeline/TimelinePinchZoom.js

@@ -9,11 +9,11 @@ const timeline_zoom_1 = require("../../state/timeline-zoom");
 const timeline_refs_1 = require("./timeline-refs");
 const timeline_scroll_logic_1 = require("./timeline-scroll-logic");
 /**
- * Maps wheel deltaY to zoom delta. Must be large enough that typical ctrl+wheel
- * pinch steps change `TimelineZoomCtx` zoom by at least one 0.1 step after
- * `Math.round(z * 10) / 10` in `timeline-zoom.tsx` (0.005 was too small).
+ * Maps wheel deltaY to a multiplicative zoom change. Must be large enough that
+ * typical ctrl+wheel pinch steps change `TimelineZoomCtx` zoom by at least one
+ * 0.1 step after rounding in `clampTimelineZoom` (0.005 was too small at 1x).
  */
-const ZOOM_WHEEL_DELTA = 0.06;
+const ZOOM_WHEEL_SENSITIVITY = 0.06;
 const TimelinePinchZoom = () => {
     const isVideoComposition = (0, is_current_selected_still_1.useIsVideoComposition)();
     const videoConfig = remotion_1.Internals.useUnsafeVideoConfig();
@@ -60,7 +60,7 @@ const TimelinePinchZoom = () => {
         else if (deltaMode === WheelEvent.DOM_DELTA_PAGE) {
             scaledDeltaY *= scrollEl.clientHeight;
         }
-        setZoom(canvasContent.compositionId, (z) => z - scaledDeltaY * ZOOM_WHEEL_DELTA, { anchorFrame: null, anchorContentX });
+        setZoom(canvasContent.compositionId, (z) => z * Math.exp(-scaledDeltaY * ZOOM_WHEEL_SENSITIVITY), { anchorFrame: null, anchorContentX });
     }, [
         editorZoomGestures,
         isVideoComposition,

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

@@ -1,6 +1,5 @@
 import React from 'react';
 import type { TimelineSelectionInteraction } from './TimelineSelection';
-import { type TimelineSelection } from './TimelineSelection';
 export declare const TimelineRowKeyframeControlsColumn: React.FC<{
     readonly children: React.ReactNode;
     readonly depth: number;
@@ -14,7 +13,6 @@ export declare const TimelineRowChrome: React.FC<{
     readonly style: React.CSSProperties;
     readonly selected: boolean;
     readonly selectable: boolean;
-    readonly selectionItem: TimelineSelection | null;
     readonly onSelect: (interaction?: TimelineSelectionInteraction) => void;
     readonly showSelectedBackground: boolean;
     readonly containsSelection: boolean;

package/dist/components/Timeline/TimelineRowChrome.js

@@ -35,11 +35,9 @@ const TimelineRowKeyframeControlsColumn = ({ children, depth }) => {
     return (jsx_runtime_1.jsx("div", { style: leftChromeStyle, children: jsx_runtime_1.jsx("div", { style: style, children: children }) }));
 };
 exports.TimelineRowKeyframeControlsColumn = TimelineRowKeyframeControlsColumn;
-const TimelineRowChrome = ({ depth, eye, keyframeControls, arrow, children, style, selected, selectable, selectionItem, onSelect, showSelectedBackground, containsSelection, hovered = false, isFieldRow, outerHeight, onDragLeave, onDragOver, onDrop, onDoubleClick, onPointerEnter, onPointerLeave, }) => {
-    const ref = (0, react_1.useRef)(null);
+const TimelineRowChrome = ({ depth, eye, keyframeControls, arrow, children, style, selected, selectable, onSelect, showSelectedBackground, containsSelection, hovered = false, isFieldRow, outerHeight, onDragLeave, onDragOver, onDrop, onDoubleClick, onPointerEnter, onPointerLeave, }) => {
     const { basePadding, keyframeControlsPlacement, rowBorderRadius, rowHorizontalMargin, } = (0, react_1.useContext)(TimelineRowLayoutContext_1.TimelineRowLayoutContext);
     const indentWidth = (0, timeline_row_layout_1.getTimelineRowIndentWidth)(depth);
-    (0, TimelineSelection_1.useTimelineFocusableItem)(selectionItem, ref);
     const chromeColumnStyle = (0, react_1.useMemo)(() => ({
         alignItems: 'center',
         alignSelf: 'stretch',
@@ -60,6 +58,15 @@ const TimelineRowChrome = ({ depth, eye, keyframeControls, arrow, children, styl
         e.stopPropagation();
         onSelect();
     }, [onSelect]);
+    const onDoubleClickIfNotInteractive = (0, react_1.useCallback)((e) => {
+        const { target } = e;
+        if (target instanceof Element &&
+            e.currentTarget.contains(target.closest('button, input, select, textarea, a, [contenteditable="true"]'))) {
+            e.stopPropagation();
+            return;
+        }
+        onDoubleClick === null || onDoubleClick === void 0 ? void 0 : onDoubleClick(e);
+    }, [onDoubleClick]);
     const highlightBackground = (0, TimelineSelection_1.getTimelineRowHighlightBackground)({
         showSelectedBackground,
         selected,
@@ -95,8 +102,8 @@ const TimelineRowChrome = ({ depth, eye, keyframeControls, arrow, children, styl
     const shouldRenderLeftChrome = !isFieldRow || keyframeControlsPlacement === 'before-label';
     const chrome = (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [shouldRenderLeftChrome ? (keyframeControls ? (jsx_runtime_1.jsx(exports.TimelineRowKeyframeControlsColumn, { depth: depth, children: keyframeControls })) : (jsx_runtime_1.jsx("div", { style: leftChromeStyle, children: jsx_runtime_1.jsxs("div", { style: chromeColumnStyle, children: [eye, indentWidth > 0 ? jsx_runtime_1.jsx(Padder_1.Padder, { depth: depth }) : null, arrow] }) }))) : null, children] }));
     if (outerStyle) {
-        return (jsx_runtime_1.jsx("div", { ref: ref, style: outerStyle, onDragLeave: onDragLeave, onDragOver: onDragOver, onDrop: onDrop, onPointerDown: selectable ? onPointerDown : undefined, onContextMenu: selectable ? onContextMenu : undefined, onDoubleClick: onDoubleClick, onPointerEnter: onPointerEnter, onPointerLeave: onPointerLeave, children: jsx_runtime_1.jsx("div", { style: innerRowStyle, children: chrome }) }));
+        return (jsx_runtime_1.jsx("div", { style: outerStyle, onDragLeave: onDragLeave, onDragOver: onDragOver, onDrop: onDrop, onPointerDown: selectable ? onPointerDown : undefined, onContextMenu: selectable ? onContextMenu : undefined, onDoubleClick: onDoubleClickIfNotInteractive, onPointerEnter: onPointerEnter, onPointerLeave: onPointerLeave, children: jsx_runtime_1.jsx("div", { style: innerRowStyle, children: chrome }) }));
     }
-    return (jsx_runtime_1.jsx("div", { ref: ref, onDragLeave: onDragLeave, onDragOver: onDragOver, onDrop: onDrop, onPointerDown: selectable ? onPointerDown : undefined, onContextMenu: selectable ? onContextMenu : undefined, onDoubleClick: onDoubleClick, onPointerEnter: onPointerEnter, onPointerLeave: onPointerLeave, style: innerRowStyle, children: chrome }));
+    return (jsx_runtime_1.jsx("div", { onDragLeave: onDragLeave, onDragOver: onDragOver, onDrop: onDrop, onPointerDown: selectable ? onPointerDown : undefined, onContextMenu: selectable ? onContextMenu : undefined, onDoubleClick: onDoubleClickIfNotInteractive, onPointerEnter: onPointerEnter, onPointerLeave: onPointerLeave, style: innerRowStyle, children: chrome }));
 };
 exports.TimelineRowChrome = TimelineRowChrome;

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

@@ -1,13 +1,17 @@
 import React from 'react';
 import type { CanUpdateSequencePropStatusFalse, CanUpdateSequencePropStatusStatic, SequencePropsSubscriptionKey } from 'remotion';
+import type { CodePosition } from '../../error-overlay/react-overlay/utils/get-source-map';
 import type { SchemaFieldInfo, TimelineFieldOnDragValueChange, TimelineFieldOnSave } from '../../helpers/timeline-layout';
-export declare const TIMELINE_COMPUTED_EFFECT_FIX_LINK = "https://www.remotion.dev/docs/studio/interactivity-best-practices#keep-effects-editable";
 export declare const UnsupportedStatus: React.FC<{
-    readonly label: string;
-    readonly fixHref?: string;
+    readonly label: React.ReactNode;
+    readonly onFix?: () => void;
+    readonly formattedValue: boolean;
 }>;
 export declare const TimelineNonEditableStatus: React.FC<{
     readonly propStatus: CanUpdateSequencePropStatusFalse;
+    readonly field: SchemaFieldInfo;
+    readonly runtimeValue: unknown;
+    readonly validatedLocation: CodePosition;
 }>;
 export declare const TimelineFieldValue: React.FC<{
     readonly field: SchemaFieldInfo;

package/dist/components/Timeline/TimelineSchemaField.js

@@ -1,18 +1,47 @@
 "use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.TimelineFieldValue = exports.TimelineNonEditableStatus = exports.UnsupportedStatus = exports.TIMELINE_COMPUTED_EFFECT_FIX_LINK = void 0;
+exports.TimelineFieldValue = exports.TimelineNonEditableStatus = exports.UnsupportedStatus = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = __importDefault(require("react"));
+const react_1 = __importStar(require("react"));
 const colors_1 = require("../../helpers/colors");
-const get_timeline_keyframes_1 = require("./get-timeline-keyframes");
+const modals_1 = require("../../state/modals");
+const SettingsContext_1 = require("../SettingsContext");
+const timeline_field_display_utils_1 = require("./timeline-field-display-utils");
 const TimelineArrayField_1 = require("./TimelineArrayField");
 const TimelinePrimitiveFieldValue_1 = require("./TimelinePrimitiveFieldValue");
-const INTERACTIVITY_BEST_PRACTICES_DOCS = 'https://www.remotion.dev/docs/studio/interactivity-best-practices';
-const TIMELINE_COMPUTED_VALUE_FIX_LINK = `${INTERACTIVITY_BEST_PRACTICES_DOCS}#keep-editable-values-visible`;
-exports.TIMELINE_COMPUTED_EFFECT_FIX_LINK = `${INTERACTIVITY_BEST_PRACTICES_DOCS}#keep-effects-editable`;
 const unsupportedStatusWrapper = {
     alignItems: 'center',
     display: 'inline-flex',
@@ -25,6 +54,13 @@ const unsupportedLabel = {
     fontSize: 12,
     fontStyle: 'italic',
 };
+const computedValue = {
+    color: colors_1.WHITE_ALPHA_40,
+    fontFamily: 'Arial, Helvetica, sans-serif',
+    fontSize: 12,
+    lineHeight: '18px',
+    pointerEvents: 'none',
+};
 const fixLinkBase = {
     color: colors_1.LIGHT_TEXT,
     display: 'inline-block',
@@ -34,8 +70,13 @@ const fixLinkBase = {
     lineHeight: 1,
     textDecoration: 'none',
     width: 17,
+    appearance: 'none',
+    background: 'none',
+    border: 'none',
+    cursor: 'pointer',
+    padding: 0,
 };
-const UnsupportedStatus = ({ label, fixHref }) => {
+const UnsupportedStatus = ({ label, onFix, formattedValue }) => {
     const [hovered, setHovered] = react_1.default.useState(false);
     const [focused, setFocused] = react_1.default.useState(false);
     const visible = hovered || focused;
@@ -53,12 +94,29 @@ const UnsupportedStatus = ({ label, fixHref }) => {
         event.stopPropagation();
     };
     return (jsx_runtime_1.jsxs("span", { style: unsupportedStatusWrapper, onPointerEnter: () => setHovered(true), onPointerLeave: () => setHovered(false), children: [
-            jsx_runtime_1.jsx("span", { style: unsupportedLabel, children: label }), fixHref ? (jsx_runtime_1.jsx("a", { href: fixHref, target: "_blank", rel: "noreferrer", style: fixLink, title: "Open docs to fix computed Studio values", onClick: stopMousePropagation, onDoubleClick: stopMousePropagation, onPointerDown: stopPointerPropagation, onFocus: () => setFocused(true), onBlur: () => setFocused(false), tabIndex: visible ? 0 : -1, children: "Fix" })) : null] }));
+            jsx_runtime_1.jsx("span", { style: formattedValue ? computedValue : unsupportedLabel, inert: formattedValue, children: label }), onFix ? (jsx_runtime_1.jsx("button", { type: "button", style: fixLink, title: "Fix computed Studio value", onClick: (event) => {
+                    stopMousePropagation(event);
+                    onFix();
+                }, onDoubleClick: stopMousePropagation, onPointerDown: stopPointerPropagation, onFocus: () => setFocused(true), onBlur: () => setFocused(false), tabIndex: visible ? 0 : -1, children: "Fix" })) : null] }));
 };
 exports.UnsupportedStatus = UnsupportedStatus;
-const TimelineNonEditableStatus = ({ propStatus }) => {
+const TimelineNonEditableStatus = ({ propStatus, field, runtimeValue, validatedLocation }) => {
+    const { setSelectedModal } = (0, react_1.useContext)(modals_1.SetSelectedModalContext);
+    const { remotionSkillsInfo } = (0, SettingsContext_1.useSettings)();
+    const onFix = (0, react_1.useCallback)(() => {
+        var _a;
+        setSelectedModal({
+            type: 'fix-computed-value',
+            prop: field.key,
+            context: `${validatedLocation.source}:${validatedLocation.line}:${validatedLocation.column}`,
+            remotionInteractivitySkillAvailable: (_a = remotionSkillsInfo === null || remotionSkillsInfo === void 0 ? void 0 : remotionSkillsInfo.remotionInteractivitySkillAvailable) !== null && _a !== void 0 ? _a : false,
+        });
+    }, [field.key, remotionSkillsInfo, setSelectedModal, validatedLocation]);
     if (propStatus.status === 'computed') {
-        return (jsx_runtime_1.jsx(exports.UnsupportedStatus, { label: (0, get_timeline_keyframes_1.getComputedStatusLabel)(propStatus), fixHref: TIMELINE_COMPUTED_VALUE_FIX_LINK }));
+        return (jsx_runtime_1.jsx(exports.UnsupportedStatus, { label: (0, timeline_field_display_utils_1.formatTimelineFieldValueForDisplay)({
+                fieldSchema: field.fieldSchema,
+                value: runtimeValue,
+            }), onFix: onFix, formattedValue: true }));
     }
 };
 exports.TimelineNonEditableStatus = TimelineNonEditableStatus;

package/dist/components/Timeline/TimelineScrollable.js

@@ -8,11 +8,13 @@ const is_menu_item_1 = require("../Menu/is-menu-item");
 const timeline_refs_1 = require("./timeline-refs");
 const TimelineAssetDropIndicator_1 = require("./TimelineAssetDropIndicator");
 const TimelineSelection_1 = require("./TimelineSelection");
+const TimelineViewport_1 = require("./TimelineViewport");
 const outer = {
     width: '100%',
     height: '100%',
     overflowX: 'auto',
     overflowY: 'hidden',
+    overscrollBehaviorX: 'none',
     position: 'relative',
     backgroundColor: TimelineSelection_1.TIMELINE_BACKGROUND,
 };
@@ -33,7 +35,7 @@ const TimelineScrollable = ({ children }) => {
         };
     }, []);
     return (jsx_runtime_1.jsxs("div", { ref: timeline_refs_1.scrollableRef, "data-timeline-scrollable": "true", style: outer, className: is_menu_item_1.HORIZONTAL_SCROLLBAR_CLASSNAME, onPointerDownCapture: onPointerDownCapture, children: [
-            jsx_runtime_1.jsx("div", { style: containerStyle, children: children }), jsx_runtime_1.jsx(TimelineAssetDropIndicator_1.TimelineAssetDropIndicator, {}), marqueeRect === null ? null : (jsx_runtime_1.jsx("div", { style: {
+            jsx_runtime_1.jsx(TimelineViewport_1.TimelineViewportProvider, { scrollable: timeline_refs_1.scrollableRef, children: jsx_runtime_1.jsx("div", { style: containerStyle, children: children }) }), jsx_runtime_1.jsx(TimelineAssetDropIndicator_1.TimelineAssetDropIndicator, {}), marqueeRect === null ? null : (jsx_runtime_1.jsx("div", { style: {
                     ...marqueeStyle,
                     height: marqueeRect.bottom - marqueeRect.top,
                     left: marqueeRect.left,

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

@@ -125,12 +125,12 @@ export declare const extendTimelineMarqueeSelection: ({ currentSelection, marque
 }) => readonly TimelineSelection[];
 type TimelineSelectionContextValue = {
     readonly canSelect: boolean;
+    readonly revealRequest: TimelineSelectionRevealRequest | null;
     readonly selectedItems: readonly TimelineSelection[];
     readonly isSelected: (item: TimelineSelection) => boolean;
     readonly selectItem: (item: TimelineSelection, interaction?: TimelineSelectionInteraction, allSelectableItems?: readonly TimelineSelection[], options?: TimelineSelectionOptions) => void;
     readonly selectItems: (items: readonly TimelineSelection[], options?: TimelineSelectionOptions) => void;
     readonly registerMarqueeSelectableItem: (item: TimelineSelection, getRect: () => DOMRect | null) => () => void;
-    readonly registerFocusableItem: (item: TimelineSelection, getElement: () => Element | null) => () => void;
     readonly getMarqueeSelection: (marqueeRect: TimelineMarqueeRect, lockedSelectionKind: TimelineMarqueeSelectionKind | null) => {
         readonly lockedSelectionKind: TimelineMarqueeSelectionKind | null;
         readonly selectedItems: readonly TimelineSelection[];
@@ -145,6 +145,10 @@ export declare const TimelineSelectionOrderProvider: React.FC<{
 type TimelineSelectionOptions = {
     readonly reveal?: boolean;
 };
+type TimelineSelectionRevealRequest = {
+    readonly item: TimelineSelection;
+    readonly token: number;
+};
 export declare const getTimelineSelectionFromNodePathInfo: (nodePathInfo: SequenceNodePathInfo | null) => TimelineSelection | null;
 export declare const getTimelineSelectionKey: (item: TimelineSelection) => string;
 export declare const getSelectableTimelineSequenceSelections: (tracks: readonly Pick<TimelineTrackData, "nodePathInfo">[]) => TimelineSelection[];
@@ -181,7 +185,6 @@ export declare const useTimelineMarqueeSelection: () => {
     onPointerDownCapture: (event: React.PointerEvent<HTMLDivElement>) => void;
 };
 export declare const useTimelineMarqueeSelectableItem: (item: TimelineSelection | null, ref: React.RefObject<Element | null>) => void;
-export declare const useTimelineFocusableItem: (item: TimelineSelection | null, ref: React.RefObject<Element | null>) => void;
 export declare const useTimelineRowSelection: (nodePathInfo: SequenceNodePathInfo | null) => {
     onSelect: (interaction?: TimelineSelectionInteraction | undefined) => void;
     selectable: boolean;