@remotion/studio 4.0.513 → 4.0.515

package/dist/components/Timeline/TimelineRowChrome.js

@@ -1,13 +1,47 @@
 "use strict";
+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.TimelineRowChrome = exports.TimelineRowKeyframeControlsColumn = void 0;
+exports.TimelineRowChrome = exports.TimelineRowKeyframeControlsColumn = exports.TimelineRowSelectedBackgroundContext = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
+const react_1 = __importStar(require("react"));
 const colors_1 = require("../../helpers/colors");
 const Padder_1 = require("./Padder");
 const timeline_row_layout_1 = require("./timeline-row-layout");
 const TimelineRowLayoutContext_1 = require("./TimelineRowLayoutContext");
 const TimelineSelection_1 = require("./TimelineSelection");
+exports.TimelineRowSelectedBackgroundContext = react_1.default.createContext(TimelineSelection_1.TIMELINE_SELECTED_BACKGROUND);
 const rowBase = {
     alignItems: 'stretch',
     display: 'flex',
@@ -35,11 +69,10 @@ 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 selectedBackground = (0, react_1.useContext)(exports.TimelineRowSelectedBackgroundContext);
     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,11 +93,21 @@ 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,
         containsSelection,
         hovered,
+        selectedBackground,
     });
     const innerRowStyle = (0, react_1.useMemo)(() => ({
         ...rowBase,
@@ -95,8 +138,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

@@ -3,6 +3,7 @@ import { type GetDragOverrides, type GetEffectDragOverrides, type PropStatuses }
 import type { SequenceNodePathInfo, TimelineTrackData } from '../../helpers/get-timeline-sequence-sort-key';
 import { type GetIsExpanded } from '../ExpandedTracksProvider';
 export declare const TIMELINE_SELECTED_BACKGROUND = "#3B3F42";
+export declare const TIMELINE_EXPANDED_SELECTED_BACKGROUND = "rgb(31,36,40)";
 export declare const TIMELINE_HOVER_BACKGROUND = "rgba(255, 255, 255, 0.05)";
 export declare const TIMELINE_SELECTED_LABEL_BACKGROUND = "#B0B0B0";
 export declare const TIMELINE_SELECTED_LABEL_TEXT = "black";
@@ -10,13 +11,14 @@ export declare const TIMELINE_SELECTED_LABEL_HORIZONTAL_PADDING = 2;
 export declare const getTimelineSelectedLabelStyle: (selected: boolean, subcategory: boolean) => CSSProperties;
 export declare const getTimelineColor: (selected: boolean, subcategory: boolean) => "black" | "rgba(255, 255, 255, 0.8)";
 export declare const getTimelineSelectedTrackHighlightStyle: (timelineWidth: number, backgroundColor?: string) => CSSProperties;
-export declare const getTimelineRowHighlightBackground: ({ showSelectedBackground, selected, containsSelection, hovered, }: {
+export declare const getTimelineRowHighlightBackground: ({ showSelectedBackground, selected, containsSelection, hovered, selectedBackground, }: {
     readonly showSelectedBackground: boolean;
     readonly selected: boolean;
     readonly containsSelection: boolean;
     readonly hovered: boolean;
+    readonly selectedBackground: string;
 }) => string | undefined;
-export declare const TIMELINE_BACKGROUND = "#0F1113";
+export declare const TIMELINE_BACKGROUND = "#15181B";
 export declare const TIMELINE_TICKS_BACKGROUND = "rgb(31,36,40)";
 export type TimelineSelection = {
     readonly type: 'guide';
@@ -125,12 +127,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 +147,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 +187,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;
@@ -219,5 +224,8 @@ export declare const useTimelineGuideSelection: (guideId: string) => {
     selectionItem: TimelineSelection;
 };
 export declare const useTimelineRowContainsSelection: (nodePathInfo: SequenceNodePathInfo | null) => boolean;
-export declare const useTimelineRowHighlightBackground: (nodePathInfo: SequenceNodePathInfo | null, hovered?: boolean) => string | undefined;
+export declare const useTimelineRowHighlightBackground: (nodePathInfo: SequenceNodePathInfo | null, { hovered, selectedBackground, }: {
+    readonly hovered: boolean;
+    readonly selectedBackground: string;
+}) => string | undefined;
 export {};