@remotion/studio 4.0.467 → 4.0.469

package/dist/components/Timeline/get-timeline-keyframes.js

@@ -2,21 +2,26 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.getTimelineKeyframes = exports.getComputedStatusLabel = void 0;
 const getComputedStatusLabel = (propStatus) => {
-    var _a;
-    if (propStatus.reason !== 'computed') {
-        throw new Error(`Unsupported prop status: ${propStatus.reason}`);
+    if (propStatus.reason === 'computed') {
+        return 'computed';
     }
-    return ((_a = propStatus.keyframes) === null || _a === void 0 ? void 0 : _a.length) ? 'keyframed' : 'computed';
+    return 'keyframed';
 };
 exports.getComputedStatusLabel = getComputedStatusLabel;
-const getTimelineKeyframes = (propStatus) => {
-    var _a;
+const getTimelineKeyframes = (propStatus, keyframeDisplayOffset = 0) => {
     if (!propStatus || propStatus.canUpdate) {
         return [];
     }
-    if (propStatus.reason !== 'computed') {
-        throw new Error(`Unsupported prop status: ${propStatus.reason}`);
+    if (propStatus.reason === 'computed') {
+        return [];
+    }
+    const { keyframes } = propStatus;
+    if (keyframeDisplayOffset === 0) {
+        return keyframes;
     }
-    return (_a = propStatus.keyframes) !== null && _a !== void 0 ? _a : [];
+    return keyframes.map((keyframe) => ({
+        ...keyframe,
+        frame: keyframe.frame + keyframeDisplayOffset,
+    }));
 };
 exports.getTimelineKeyframes = getTimelineKeyframes;

package/dist/components/Timeline/timeline-field-row-layout.d.ts

@@ -1,2 +1,3 @@
 import type React from 'react';
 export declare const getTimelineFieldLabelRowStyle: (depth: number) => React.CSSProperties;
+export declare const timelineFieldValueColumnStyle: React.CSSProperties;

package/dist/components/Timeline/timeline-field-row-layout.js

@@ -1,10 +1,12 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.getTimelineFieldLabelRowStyle = void 0;
+exports.timelineFieldValueColumnStyle = exports.getTimelineFieldLabelRowStyle = void 0;
+const timeline_layout_1 = require("../../helpers/timeline-layout");
 const timeline_row_layout_1 = require("./timeline-row-layout");
 const getTimelineFieldLabelRowStyle = (depth) => {
     return {
         flex: `0 0 ${(0, timeline_row_layout_1.getTimelineFieldLabelFlexBasis)(depth)}`,
+        minWidth: 0,
         display: 'flex',
         flexDirection: 'row',
         alignItems: 'center',
@@ -12,3 +14,11 @@ const getTimelineFieldLabelRowStyle = (depth) => {
     };
 };
 exports.getTimelineFieldLabelRowStyle = getTimelineFieldLabelRowStyle;
+exports.timelineFieldValueColumnStyle = {
+    alignItems: 'center',
+    alignSelf: 'stretch',
+    display: 'flex',
+    flex: 1,
+    minWidth: 0,
+    paddingRight: timeline_layout_1.EXPANDED_SECTION_PADDING_RIGHT,
+};

package/dist/components/Timeline/use-expanded-track-keyframe-rows.d.ts

@@ -0,0 +1,17 @@
+import { type TSequence } from 'remotion';
+import type { SequenceNodePathInfo } from '../../helpers/get-timeline-sequence-sort-key';
+import type { getTimelineKeyframes } from './get-timeline-keyframes';
+export type ExpandedTrackKeyframeRow = {
+    readonly height: number;
+    readonly keyframes: ReturnType<typeof getTimelineKeyframes>;
+    readonly nodePathInfo: SequenceNodePathInfo;
+    readonly rowKey: string;
+};
+export declare const useExpandedTrackKeyframeRows: ({ sequence, nodePathInfo, keyframeDisplayOffset, }: {
+    sequence: TSequence;
+    nodePathInfo: SequenceNodePathInfo;
+    keyframeDisplayOffset: number;
+}) => {
+    readonly rows: ExpandedTrackKeyframeRow[];
+    readonly expandedHeight: number;
+};

package/dist/components/Timeline/use-expanded-track-keyframe-rows.js

@@ -0,0 +1,45 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useExpandedTrackKeyframeRows = void 0;
+const react_1 = require("react");
+const remotion_1 = require("remotion");
+const timeline_layout_1 = require("../../helpers/timeline-layout");
+const timeline_node_path_key_1 = require("../../helpers/timeline-node-path-key");
+const ExpandedTracksProvider_1 = require("../ExpandedTracksProvider");
+const get_node_keyframes_1 = require("./get-node-keyframes");
+const useExpandedTrackKeyframeRows = ({ sequence, nodePathInfo, keyframeDisplayOffset, }) => {
+    const { getIsExpanded } = (0, react_1.useContext)(ExpandedTracksProvider_1.ExpandedTracksGetterContext);
+    const { codeValues } = (0, react_1.useContext)(remotion_1.Internals.VisualModeCodeValuesContext);
+    const tree = (0, react_1.useMemo)(() => (0, timeline_layout_1.buildTimelineTree)({
+        sequence,
+        nodePathInfo,
+        getDragOverrides: () => ({}),
+        getEffectDragOverrides: () => ({}),
+        codeValues,
+    }), [codeValues, nodePathInfo, sequence]);
+    const flat = (0, react_1.useMemo)(() => (0, timeline_layout_1.flattenVisibleTreeNodes)({ nodes: tree, getIsExpanded }), [tree, getIsExpanded]);
+    const expandedHeight = (0, react_1.useMemo)(() => (0, timeline_layout_1.getExpandedTrackHeight)({
+        sequence,
+        nodePathInfo,
+        getIsExpanded,
+        codeValues,
+    }), [codeValues, getIsExpanded, nodePathInfo, sequence]);
+    const rows = (0, react_1.useMemo)(() => flat.map(({ node }) => ({
+        height: (0, timeline_layout_1.getTreeRowHeight)(node),
+        keyframes: (0, get_node_keyframes_1.getNodeKeyframes)({
+            node,
+            nodePath: nodePathInfo.sequenceSubscriptionKey,
+            codeValues,
+            keyframeDisplayOffset,
+        }),
+        rowKey: (0, timeline_node_path_key_1.timelineNodePathInfoToKey)(node.nodePathInfo),
+        nodePathInfo: node.nodePathInfo,
+    })), [
+        codeValues,
+        flat,
+        keyframeDisplayOffset,
+        nodePathInfo.sequenceSubscriptionKey,
+    ]);
+    return { rows, expandedHeight };
+};
+exports.useExpandedTrackKeyframeRows = useExpandedTrackKeyframeRows;

package/dist/components/Timeline/use-open-sequence-in-editor.d.ts

@@ -0,0 +1,6 @@
+import type { TSequence } from 'remotion';
+export declare const useOpenSequenceInEditor: (sequence: TSequence) => {
+    canOpenInEditor: boolean;
+    openInEditor: () => Promise<void>;
+    originalLocation: import("remotion").ResolvedStackLocation | null;
+};

package/dist/components/Timeline/use-open-sequence-in-editor.js

@@ -0,0 +1,31 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useOpenSequenceInEditor = void 0;
+const react_1 = require("react");
+const client_id_1 = require("../../helpers/client-id");
+const open_in_editor_1 = require("../../helpers/open-in-editor");
+const NotificationCenter_1 = require("../Notifications/NotificationCenter");
+const use_resolved_stack_react_to_change_1 = require("./use-resolved-stack-react-to-change");
+const useOpenSequenceInEditor = (sequence) => {
+    const { previewServerState } = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx);
+    const previewConnected = previewServerState.type === 'connected';
+    const originalLocation = (0, use_resolved_stack_react_to_change_1.useResolveStackAndReactToChange)(sequence.getStack);
+    const canOpenInEditor = (0, react_1.useMemo)(() => Boolean(window.remotion_editorName && previewConnected && originalLocation), [originalLocation, previewConnected]);
+    const openInEditor = (0, react_1.useCallback)(async () => {
+        if (!canOpenInEditor || !originalLocation) {
+            return;
+        }
+        try {
+            await (0, open_in_editor_1.openOriginalPositionInEditor)(originalLocation);
+        }
+        catch (err) {
+            (0, NotificationCenter_1.showNotification)(err.message, 2000);
+        }
+    }, [canOpenInEditor, originalLocation]);
+    return {
+        canOpenInEditor,
+        openInEditor,
+        originalLocation,
+    };
+};
+exports.useOpenSequenceInEditor = useOpenSequenceInEditor;