@remotion/studio 4.0.482 → 4.0.484

package/dist/components/InspectorPanel/keyframe-easing-navigator-items.js

@@ -0,0 +1,40 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getNavigatorItemPlayheadFrame = exports.getKeyframeEasingNavigatorItems = void 0;
+const getKeyframeEasingNavigatorItems = ({ includeEasings, keyframes, nodePathInfo, }) => {
+    return keyframes.flatMap((keyframe, index) => {
+        const keyframeItem = {
+            type: 'keyframe',
+            selection: {
+                type: 'keyframe',
+                nodePathInfo,
+                frame: keyframe.frame,
+            },
+        };
+        const nextKeyframe = keyframes[index + 1];
+        if (!includeEasings || !nextKeyframe) {
+            return [keyframeItem];
+        }
+        return [
+            keyframeItem,
+            {
+                type: 'easing',
+                selection: {
+                    type: 'easing',
+                    nodePathInfo,
+                    fromFrame: keyframe.frame,
+                    toFrame: nextKeyframe.frame,
+                    segmentIndex: index,
+                },
+            },
+        ];
+    });
+};
+exports.getKeyframeEasingNavigatorItems = getKeyframeEasingNavigatorItems;
+const getNavigatorItemPlayheadFrame = (item) => {
+    if (item.type === 'keyframe') {
+        return item.selection.frame;
+    }
+    return Math.round((item.selection.fromFrame + item.selection.toFrame) / 2);
+};
+exports.getNavigatorItemPlayheadFrame = getNavigatorItemPlayheadFrame;

package/dist/components/InspectorPanel/keyframe-inspector-frame.d.ts

@@ -0,0 +1,8 @@
+export declare const clampInspectorKeyframeDisplayFrame: ({ durationInFrames, frame, }: {
+    readonly durationInFrames: number;
+    readonly frame: number;
+}) => number;
+export declare const getInspectorKeyframeSourceFrame: ({ displayFrame, keyframeDisplayOffset, }: {
+    readonly displayFrame: number;
+    readonly keyframeDisplayOffset: number;
+}) => number;

package/dist/components/InspectorPanel/keyframe-inspector-frame.js

@@ -0,0 +1,14 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getInspectorKeyframeSourceFrame = exports.clampInspectorKeyframeDisplayFrame = void 0;
+const clampInspectorKeyframeDisplayFrame = ({ durationInFrames, frame, }) => {
+    if (durationInFrames <= 0) {
+        return 0;
+    }
+    return Math.min(Math.max(Math.round(frame), 0), durationInFrames - 1);
+};
+exports.clampInspectorKeyframeDisplayFrame = clampInspectorKeyframeDisplayFrame;
+const getInspectorKeyframeSourceFrame = ({ displayFrame, keyframeDisplayOffset, }) => {
+    return displayFrame - keyframeDisplayOffset;
+};
+exports.getInspectorKeyframeSourceFrame = getInspectorKeyframeSourceFrame;

package/dist/components/InspectorPanel/styles.d.ts

@@ -5,6 +5,7 @@ export declare const defaultPropsSection: React.CSSProperties;
 export declare const visualControlsSection: React.CSSProperties;
 export declare const compositionSection: React.CSSProperties;
 export declare const inspectorSectionDivider: React.CSSProperties;
+export declare const sequenceHeaderDivider: React.CSSProperties;
 export declare const sectionHeader: React.CSSProperties;
 export declare const sequenceHeader: React.CSSProperties;
 export declare const sequenceHeaderTitle: React.CSSProperties;

package/dist/components/InspectorPanel/styles.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.keyframeEditorValue = exports.keyframeEditorLabel = exports.keyframeEditorRow = exports.detailValue = exports.detailLabel = exports.detailRow = exports.guideDetailsContainer = exports.detailsContainer = exports.centeredMessage = exports.selectedContainer = exports.resolveLinkStyle = exports.defaultPropsWarningMessages = exports.defaultPropsWarningContainer = exports.sectionHeaderEnd = exports.sectionHeaderStart = exports.sectionHeaderTitle = exports.sectionHeaderRow = exports.sequenceHeaderSubtitle = exports.sequenceHeaderTitle = exports.sequenceHeader = exports.sectionHeader = exports.inspectorSectionDivider = exports.compositionSection = exports.visualControlsSection = exports.defaultPropsSection = exports.scrollableContainer = exports.container = void 0;
+exports.keyframeEditorValue = exports.keyframeEditorLabel = exports.keyframeEditorRow = exports.detailValue = exports.detailLabel = exports.detailRow = exports.guideDetailsContainer = exports.detailsContainer = exports.centeredMessage = exports.selectedContainer = exports.resolveLinkStyle = exports.defaultPropsWarningMessages = exports.defaultPropsWarningContainer = exports.sectionHeaderEnd = exports.sectionHeaderStart = exports.sectionHeaderTitle = exports.sectionHeaderRow = exports.sequenceHeaderSubtitle = exports.sequenceHeaderTitle = exports.sequenceHeader = exports.sectionHeader = exports.sequenceHeaderDivider = exports.inspectorSectionDivider = exports.compositionSection = exports.visualControlsSection = exports.defaultPropsSection = exports.scrollableContainer = exports.container = void 0;
 const colors_1 = require("../../helpers/colors");
 const InspectorPanelLayout_1 = require("../InspectorPanelLayout");
 exports.container = {
@@ -31,11 +31,18 @@ exports.compositionSection = {
 exports.inspectorSectionDivider = {
     borderBottom: `1px solid ${colors_1.LINE_COLOR}`,
 };
+exports.sequenceHeaderDivider = {
+    backgroundColor: colors_1.LINE_COLOR,
+    flexShrink: 0,
+    height: 1,
+    margin: '4px 0',
+};
 exports.sectionHeader = {
     color: colors_1.LIGHT_TEXT,
     fontSize: 12,
     fontWeight: 'bold',
     padding: `8px ${InspectorPanelLayout_1.INSPECTOR_PANEL_HORIZONTAL_PADDING}px`,
+    userSelect: 'none',
 };
 exports.sequenceHeader = {
     backgroundColor: colors_1.BACKGROUND,
@@ -96,6 +103,7 @@ exports.sectionHeaderTitle = {
     minWidth: 0,
     overflow: 'hidden',
     textOverflow: 'ellipsis',
+    userSelect: 'none',
     whiteSpace: 'nowrap',
 };
 exports.sectionHeaderStart = {

package/dist/components/InspectorSequenceSection.js

@@ -1,8 +1,41 @@
 "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.InspectorSequenceSection = exports.hasSequenceControls = exports.getInspectorSelectableItems = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
+const react_1 = __importStar(require("react"));
 const client_id_1 = require("../helpers/client-id");
 const colors_1 = require("../helpers/colors");
 const timeline_layout_1 = require("../helpers/timeline-layout");
@@ -27,14 +60,8 @@ const emptyState = {
     lineHeight: 1.4,
     padding: '0 12px 8px',
 };
-const divider = {
-    backgroundColor: colors_1.LINE_COLOR,
-    flexShrink: 0,
-    height: 1,
-    margin: '4px 0',
-};
 const controlsEffectsDivider = {
-    ...divider,
+    ...styles_1.sequenceHeaderDivider,
     margin: '8px 0 4px',
 };
 const effectsHeaderTitle = {
@@ -55,6 +82,15 @@ const isEffectsRoot = (node) => {
 const getInspectorExpansionKey = (nodePathInfo) => {
     return JSON.stringify(nodePathInfo);
 };
+const getInspectorControlGroups = (rows) => {
+    return timeline_layout_1.SCHEMA_FIELD_GROUPS.map((group) => ({
+        ...group,
+        rows: rows.filter(({ node }) => {
+            var _a;
+            return node.kind === 'field' && ((_a = node.field) === null || _a === void 0 ? void 0 : _a.group) === group.id;
+        }),
+    })).filter((group) => group.rows.length > 0);
+};
 const getInspectorSelectableItems = (rows) => {
     return rows.flatMap(({ node }) => {
         const selection = (0, TimelineSelection_1.getTimelineSelectionFromNodePathInfo)(node.nodePathInfo);
@@ -116,6 +152,7 @@ const InspectorSequenceSection = ({ sequence, validatedLocation, nodePathInfo, k
     }, [getIsExpanded, tree]);
     const controlSelectableItems = (0, react_1.useMemo)(() => (0, exports.getInspectorSelectableItems)(controlRows), [controlRows]);
     const effectSelectableItems = (0, react_1.useMemo)(() => (0, exports.getInspectorSelectableItems)(effectRows), [effectRows]);
+    const controlGroups = (0, react_1.useMemo)(() => getInspectorControlGroups(controlRows), [controlRows]);
     const { schema } = sequence.controls;
     const showEffectsSection = nodePathInfo.supportsEffects || effectRows.length > 0;
     const showControlsEffectsDivider = controlRows.length > 0 && showEffectsSection;
@@ -148,10 +185,10 @@ const InspectorSequenceSection = ({ sequence, validatedLocation, nodePathInfo, k
     };
     if (controlRows.length === 0 && !showEffectsSection) {
         return (jsx_runtime_1.jsxs("div", { style: container, children: [
-                jsx_runtime_1.jsx("div", { style: divider }), jsx_runtime_1.jsx("div", { style: emptyState, children: "No schema" })
+                jsx_runtime_1.jsx("div", { style: styles_1.sequenceHeaderDivider }), jsx_runtime_1.jsx("div", { style: emptyState, children: "No schema" })
             ] }));
     }
     return (jsx_runtime_1.jsxs("div", { style: container, children: [
-            jsx_runtime_1.jsx("div", { style: divider }), controlRows.length > 0 ? renderSectionHeader('Controls') : null, jsx_runtime_1.jsx(TimelineSelection_1.TimelineSelectionOrderProvider, { items: controlSelectableItems, children: controlRows.map(renderRow) }), showEffectsSection ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [showControlsEffectsDivider ? (jsx_runtime_1.jsx("div", { style: controlsEffectsDivider })) : null, renderEffectsHeader(), effectRows.length === 0 ? (jsx_runtime_1.jsx("div", { style: emptyState, children: "None" })) : (jsx_runtime_1.jsx(TimelineSelection_1.TimelineSelectionOrderProvider, { items: effectSelectableItems, children: effectRows.map(renderRow) }))] })) : null] }));
+            jsx_runtime_1.jsx("div", { style: styles_1.sequenceHeaderDivider }), controlRows.length > 0 ? (jsx_runtime_1.jsx(TimelineSelection_1.TimelineSelectionOrderProvider, { items: controlSelectableItems, children: controlGroups.map((group, i) => (jsx_runtime_1.jsxs(react_1.default.Fragment, { children: [i === 0 ? null : jsx_runtime_1.jsx("div", { style: controlsEffectsDivider }), renderSectionHeader(group.label), group.rows.map(renderRow)] }, group.id))) })) : null, showEffectsSection ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [showControlsEffectsDivider ? (jsx_runtime_1.jsx("div", { style: controlsEffectsDivider })) : null, renderEffectsHeader(), effectRows.length === 0 ? (jsx_runtime_1.jsx("div", { style: emptyState, children: "None" })) : (jsx_runtime_1.jsx(TimelineSelection_1.TimelineSelectionOrderProvider, { items: effectSelectableItems, children: effectRows.map(renderRow) }))] })) : null] }));
 };
 exports.InspectorSequenceSection = InspectorSequenceSection;

package/dist/components/Preview.js

@@ -122,7 +122,7 @@ const CompWhenItHasDimensions = ({ contentDimensions, canvasSize, canvasContent,
         return (jsx_runtime_1.jsx("div", { style: outer, children: jsx_runtime_1.jsx(RenderPreview_1.RenderPreview, { path: canvasContent.displayName, assetMetadata: assetMetadata, getBlob: canvasContent.getBlob }) }));
     }
     return (jsx_runtime_1.jsxs("div", { style: outer, children: [
-            jsx_runtime_1.jsx(PortalContainer, { contentDimensions: contentDimensions, scale: scale, xCorrection: xCorrection, yCorrection: yCorrection }), jsx_runtime_1.jsx(SelectedOutlineOverlay_1.SelectedOutlineOverlay, { scale: scale })
+            jsx_runtime_1.jsx(PortalContainer, { contentDimensions: contentDimensions, scale: scale, xCorrection: xCorrection, yCorrection: yCorrection }), jsx_runtime_1.jsx(SelectedOutlineOverlay_1.SelectedOutlineOverlay, { scale: scale, translationX: previewSize.translation.x, translationY: previewSize.translation.y })
         ] }));
 };
 const PortalContainer = ({ scale, xCorrection, yCorrection, contentDimensions }) => {

package/dist/components/SelectedOutlineOverlay.d.ts

@@ -11,4 +11,6 @@ export declare const orderOutlinesForRendering: ({ outlines, targetsByKey, }: {
 }) => readonly SelectedOutline[];
 export declare const SelectedOutlineOverlay: React.FC<{
     readonly scale: number;
+    readonly translationX: number;
+    readonly translationY: number;
 }>;

package/dist/components/SelectedOutlineOverlay.js

@@ -105,7 +105,7 @@ const orderOutlinesForRendering = ({ outlines, targetsByKey, }) => {
     });
 };
 exports.orderOutlinesForRendering = orderOutlinesForRendering;
-const SelectedOutlineOverlay = ({ scale }) => {
+const SelectedOutlineOverlay = ({ scale, translationX, translationY }) => {
     const { selectedItems, selectItem } = (0, TimelineSelection_1.useTimelineSelection)();
     const { sequences } = (0, react_1.useContext)(remotion_1.Internals.SequenceManager);
     const { propStatuses } = (0, react_1.useContext)(remotion_1.Internals.VisualModePropStatusesContext);
@@ -613,28 +613,49 @@ const SelectedOutlineOverlay = ({ scale }) => {
             }
         };
     }, [keybindings, onArrowKeyDown, onArrowKeyUp, saveKeyboardNudgeSession]);
-    (0, react_1.useEffect)(() => {
-        if (outlineTargets.length === 0) {
+    const updateOutlines = (0, react_1.useCallback)(() => {
+        if (overlayRef.current === null || outlineTargets.length === 0) {
             setOutlines((prevOutlines) => prevOutlines.length === 0 ? prevOutlines : []);
             return;
         }
+        const nextOutlines = (0, selected_outline_measurement_1.measureOutlines)(overlayRef.current, outlineTargets);
+        setOutlines((prevOutlines) => (0, selected_outline_measurement_1.outlinesAreEqual)(prevOutlines, nextOutlines)
+            ? prevOutlines
+            : nextOutlines);
+    }, [outlineTargets]);
+    (0, react_1.useLayoutEffect)(() => {
+        updateOutlines();
+    }, [outlineTargets, scale, translationX, translationY, updateOutlines]);
+    (0, react_1.useLayoutEffect)(() => {
+        if (outlineTargets.length === 0 || typeof ResizeObserver === 'undefined') {
+            return;
+        }
         let animationFrame = null;
-        const updateOutlines = () => {
-            if (overlayRef.current) {
-                const nextOutlines = (0, selected_outline_measurement_1.measureOutlines)(overlayRef.current, outlineTargets);
-                setOutlines((prevOutlines) => (0, selected_outline_measurement_1.outlinesAreEqual)(prevOutlines, nextOutlines)
-                    ? prevOutlines
-                    : nextOutlines);
+        const scheduleUpdate = () => {
+            if (animationFrame !== null) {
+                return;
             }
-            animationFrame = requestAnimationFrame(updateOutlines);
+            animationFrame = requestAnimationFrame(() => {
+                animationFrame = null;
+                updateOutlines();
+            });
         };
-        updateOutlines();
+        const resizeObserver = new ResizeObserver(scheduleUpdate);
+        if (overlayRef.current !== null) {
+            resizeObserver.observe(overlayRef.current);
+        }
+        for (const target of outlineTargets) {
+            if (target.ref.current !== null) {
+                resizeObserver.observe(target.ref.current);
+            }
+        }
         return () => {
             if (animationFrame !== null) {
                 cancelAnimationFrame(animationFrame);
             }
+            resizeObserver.disconnect();
         };
-    }, [outlineTargets]);
+    }, [outlineTargets, updateOutlines]);
     if (outlineTargets.length === 0) {
         return null;
     }