@remotion/studio 4.0.491 → 4.0.493

package/dist/components/InspectorSequenceSection.js

@@ -41,11 +41,16 @@ const colors_1 = require("../helpers/colors");
 const timeline_layout_1 = require("../helpers/timeline-layout");
 const plus_1 = require("../icons/plus");
 const modals_1 = require("../state/modals");
+const CurrentAsset_1 = require("./CurrentAsset");
 const InlineAction_1 = require("./InlineAction");
 const styles_1 = require("./InspectorPanel/styles");
+const InspectorPanelLayout_1 = require("./InspectorPanelLayout");
+const timeline_asset_link_1 = require("./Timeline/timeline-asset-link");
 const TimelineExpandedRow_1 = require("./Timeline/TimelineExpandedRow");
+const TimelineRowLayoutContext_1 = require("./Timeline/TimelineRowLayoutContext");
 const TimelineSelection_1 = require("./Timeline/TimelineSelection");
 const use_timeline_expanded_tree_1 = require("./Timeline/use-timeline-expanded-tree");
+const use_select_asset_1 = require("./use-select-asset");
 const container = {
     color: colors_1.WHITE,
     display: 'flex',
@@ -72,6 +77,38 @@ const plusIcon = {
     width: 15,
     height: 15,
 };
+const remoteSourceLabel = {
+    color: colors_1.LIGHT_TEXT,
+    display: 'flex',
+    fontFamily: 'Arial, Helvetica, sans-serif',
+    fontSize: 12,
+    lineHeight: '18px',
+    minWidth: 0,
+    overflow: 'hidden',
+    padding: `6px ${InspectorPanelLayout_1.INSPECTOR_PANEL_HORIZONTAL_PADDING}px`,
+    whiteSpace: 'nowrap',
+};
+const remoteSourceLeading = {
+    color: colors_1.LIGHT_TEXT,
+    fontFamily: 'Arial, Helvetica, sans-serif',
+    fontSize: 12,
+    lineHeight: '18px',
+    minWidth: 0,
+    overflow: 'hidden',
+    textOverflow: 'ellipsis',
+    whiteSpace: 'nowrap',
+};
+const remoteSourceTrailing = {
+    color: colors_1.LIGHT_TEXT,
+    flexShrink: 0,
+    fontFamily: 'Arial, Helvetica, sans-serif',
+    fontSize: 12,
+    lineHeight: '18px',
+    maxWidth: '55%',
+    overflow: 'hidden',
+    textOverflow: 'ellipsis',
+    whiteSpace: 'nowrap',
+};
 const isEffectsRoot = (node) => {
     if (node.kind !== 'group' || node.effectInfo !== null) {
         return false;
@@ -138,10 +175,22 @@ const InspectorSequenceSection = ({ sequence, validatedLocation, nodePathInfo, k
         sequence,
         nodePathInfo,
         includeTextContent: true,
+        includeSourceControls: true,
     });
     const [collapsedKeys, setCollapsedKeys] = (0, react_1.useState)(loadInspectorCollapsedKeys);
     const { previewServerState } = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx);
     const { setSelectedModal } = (0, react_1.useContext)(modals_1.ModalsContext);
+    const selectAsset = (0, use_select_asset_1.useSelectAsset)();
+    const mediaSrc = (0, timeline_asset_link_1.getTimelineAssetSrcFromSchema)(sequence.controls);
+    const assetLinkInfo = (0, react_1.useMemo)(() => (mediaSrc ? (0, timeline_asset_link_1.getTimelineAssetLinkInfo)(mediaSrc) : null), [mediaSrc]);
+    const localAsset = (assetLinkInfo === null || assetLinkInfo === void 0 ? void 0 : assetLinkInfo.kind) === 'local' ? assetLinkInfo : null;
+    const remoteAsset = (assetLinkInfo === null || assetLinkInfo === void 0 ? void 0 : assetLinkInfo.kind) === 'remote' ? assetLinkInfo : null;
+    const remoteSourceParts = (0, react_1.useMemo)(() => remoteAsset ? (0, timeline_asset_link_1.splitRemoteSourceForMiddleEllipsis)(remoteAsset.href) : null, [remoteAsset]);
+    const jumpToAsset = (0, react_1.useCallback)(() => {
+        if (localAsset) {
+            (0, timeline_asset_link_1.openTimelineAssetLink)(localAsset, selectAsset);
+        }
+    }, [localAsset, selectAsset]);
     const getIsExpanded = (0, react_1.useCallback)((candidate) => {
         return !collapsedKeys.has(getInspectorExpansionKey(candidate));
     }, [collapsedKeys]);
@@ -183,7 +232,10 @@ const InspectorSequenceSection = ({ sequence, validatedLocation, nodePathInfo, k
                 }),
         };
     }, [getIsExpanded, tree]);
-    const controlSelectableItems = (0, react_1.useMemo)(() => (0, exports.getInspectorSelectableItems)(controlRows), [controlRows]);
+    const controlSelectableItems = (0, react_1.useMemo)(() => (0, exports.getInspectorSelectableItems)(controlRows.filter(({ node }) => {
+        var _a;
+        return node.kind !== 'field' || ((_a = node.field) === null || _a === void 0 ? void 0 : _a.key) !== 'src';
+    })), [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;
@@ -214,14 +266,13 @@ const InspectorSequenceSection = ({ sequence, validatedLocation, nodePathInfo, k
                 jsx_runtime_1.jsx("div", { style: effectsHeaderTitle, children: "Effects" }), jsx_runtime_1.jsx(InlineAction_1.InlineAction, { disabled: !canAddEffect, onClick: onAddEffect, title: canAddEffect ? 'Add effect' : undefined, renderAction: (color) => jsx_runtime_1.jsx(plus_1.Plus, { color: color, style: plusIcon }) })] }));
     };
     const renderRow = ({ node, depth }) => {
-        return (jsx_runtime_1.jsx(TimelineExpandedRow_1.TimelineExpandedRow, { node: node, depth: depth, nestedDepth: 0, rowDepthBase: 0, getIsExpanded: getIsExpanded, toggleTrack: toggleTrack, validatedLocation: validatedLocation, nodePath: nodePathInfo.sequenceSubscriptionKey, schema: schema, keyframeDisplayOffset: keyframeDisplayOffset, keyframeControlsMode: "inspector" }, JSON.stringify(node.nodePathInfo)));
+        return (jsx_runtime_1.jsx(TimelineRowLayoutContext_1.TimelineRowLayoutContext.Provider, { value: TimelineRowLayoutContext_1.INSPECTOR_TIMELINE_ROW_LAYOUT, children: jsx_runtime_1.jsx(TimelineExpandedRow_1.TimelineExpandedRow, { node: node, depth: depth, nestedDepth: 0, rowDepthBase: 0, getIsExpanded: getIsExpanded, toggleTrack: toggleTrack, validatedLocation: validatedLocation, nodePath: nodePathInfo.sequenceSubscriptionKey, schema: schema, keyframeDisplayOffset: keyframeDisplayOffset, keyframeControlsMode: "inspector" }) }, JSON.stringify(node.nodePathInfo)));
     };
     if (controlRows.length === 0 && !showEffectsSection) {
-        return (jsx_runtime_1.jsxs("div", { style: container, children: [
-                jsx_runtime_1.jsx("div", { style: styles_1.sequenceHeaderDivider }), jsx_runtime_1.jsx("div", { style: emptyState, children: "No schema" })
-            ] }));
+        return (jsx_runtime_1.jsx("div", { style: container, children: 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: 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.id === 'transforms' ? renderTransformControls() : null, 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] }));
+    return (jsx_runtime_1.jsxs("div", { style: container, children: [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.id === 'source' && localAsset ? (jsx_runtime_1.jsx(CurrentAsset_1.AssetInfo, { assetName: localAsset.assetPath, contentSized: true, onAssetClick: jumpToAsset, readOnlyStudio: true })) : null, group.id === 'source' && remoteAsset && remoteSourceParts ? (jsx_runtime_1.jsxs("div", { style: remoteSourceLabel, title: remoteAsset.href, children: [
+                                jsx_runtime_1.jsx("span", { style: remoteSourceLeading, children: remoteSourceParts.leading }), jsx_runtime_1.jsx("span", { style: remoteSourceTrailing, children: remoteSourceParts.trailing })
+                            ] })) : null, group.id === 'transforms' ? renderTransformControls() : null, group.id === 'source' ? null : 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(TimelineSelection_1.TimelineSelectionOrderProvider, { items: effectSelectableItems, children: effectRows.map(renderRow) })) : null] })) : null] }));
 };
 exports.InspectorSequenceSection = InspectorSequenceSection;

package/dist/components/NewComposition/NewComposition.js

@@ -11,6 +11,7 @@ const ModalHeader_1 = require("../ModalHeader");
 const layout_2 = require("../RenderModal/layout");
 const CodemodFooter_1 = require("./CodemodFooter");
 const DismissableModal_1 = require("./DismissableModal");
+const get_new_composition_defaults_1 = require("./get-new-composition-defaults");
 const InputAndValidationContainer_1 = require("./InputAndValidationContainer");
 const InputDragger_1 = require("./InputDragger");
 const NewCompDuration_1 = require("./NewCompDuration");
@@ -28,13 +29,19 @@ const folderPathStyle = {
 };
 const NewCompositionLoaded = ({ folderName, parentName, stack }) => {
     const { compositions } = (0, react_1.useContext)(remotion_1.Internals.CompositionManager);
+    const resolvedComposition = remotion_1.Internals.useResolvedVideoConfig(null);
+    const initialComposition = (resolvedComposition === null || resolvedComposition === void 0 ? void 0 : resolvedComposition.type) === 'success' ||
+        (resolvedComposition === null || resolvedComposition === void 0 ? void 0 : resolvedComposition.type) === 'success-and-refreshing'
+        ? resolvedComposition.result
+        : null;
+    const initialDimensions = (0, get_new_composition_defaults_1.getNewCompositionDefaults)(initialComposition);
     const [newId, setName] = (0, react_1.useState)(() => (0, use_create_composition_1.getUniqueCompositionName)(compositions));
-    const [selectedFrameRate, setFrameRate] = (0, react_1.useState)(30);
+    const [selectedFrameRate, setFrameRate] = (0, react_1.useState)(initialDimensions.fps);
     const [size, setSize] = (0, react_1.useState)(() => ({
-        width: 1920,
-        height: 1080,
+        width: initialDimensions.width,
+        height: initialDimensions.height,
     }));
-    const [durationInFrames, setDurationInFrames] = (0, react_1.useState)(150);
+    const [durationInFrames, setDurationInFrames] = (0, react_1.useState)(initialDimensions.durationInFrames);
     const onWidthChanged = (0, react_1.useCallback)((newValue) => {
         setSize((s) => {
             return {

package/dist/components/NewComposition/get-new-composition-defaults.d.ts

@@ -0,0 +1,4 @@
+import type { VideoConfig } from 'remotion';
+type CompositionDimensions = Pick<VideoConfig, 'width' | 'height' | 'fps' | 'durationInFrames'>;
+export declare const getNewCompositionDefaults: (composition: CompositionDimensions | null) => CompositionDimensions;
+export {};

package/dist/components/NewComposition/get-new-composition-defaults.js

@@ -0,0 +1,13 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getNewCompositionDefaults = void 0;
+const defaultCompositionDimensions = {
+    width: 1920,
+    height: 1080,
+    fps: 30,
+    durationInFrames: 150,
+};
+const getNewCompositionDefaults = (composition) => {
+    return composition !== null && composition !== void 0 ? composition : defaultCompositionDimensions;
+};
+exports.getNewCompositionDefaults = getNewCompositionDefaults;

package/dist/components/SelectedOutlineElement.js

@@ -41,6 +41,8 @@ const no_react_1 = require("remotion/no-react");
 const client_id_1 = require("../helpers/client-id");
 const colors_1 = require("../helpers/colors");
 const format_file_location_1 = require("../helpers/format-file-location");
+const get_connected_compositions_1 = require("../helpers/get-connected-compositions");
+const get_sequence_double_click_action_1 = require("../helpers/get-sequence-double-click-action");
 const open_in_editor_1 = require("../helpers/open-in-editor");
 const editor_snapping_1 = require("../state/editor-snapping");
 const modals_1 = require("../state/modals");
@@ -49,6 +51,7 @@ const ConfirmationDialog_1 = require("./ConfirmationDialog");
 const ContextMenu_1 = require("./ContextMenu");
 const effect_drag_and_drop_1 = require("./effect-drag-and-drop");
 const ForceSpecificCursor_1 = require("./ForceSpecificCursor");
+const InitialCompositionLoader_1 = require("./InitialCompositionLoader");
 const NotificationCenter_1 = require("./Notifications/NotificationCenter");
 const selected_outline_drag_1 = require("./selected-outline-drag");
 const selected_outline_measurement_1 = require("./selected-outline-measurement");
@@ -981,6 +984,8 @@ const SelectedOutlineElement = ({ allDragTargets, allDragOutlines, allRotationDr
     const updateResolvedStackTrace = (0, react_1.useContext)(remotion_1.Internals.SequenceStackTracesUpdateContext);
     const confirm = (0, ConfirmationDialog_1.useConfirmationDialog)();
     const selectAsset = (0, use_select_asset_1.useSelectAsset)();
+    const selectComposition = (0, InitialCompositionLoader_1.useSelectComposition)();
+    const { compositions } = (0, react_1.useContext)(remotion_1.Internals.CompositionManager);
     const { setSelectedModal } = (0, react_1.useContext)(modals_1.ModalsContext);
     const resolveOriginalLocation = react_1.default.useCallback(async (resolveTarget) => {
         const stack = resolveTarget.sequence.getStack();
@@ -998,14 +1003,23 @@ const SelectedOutlineElement = ({ allDragTargets, allDragOutlines, allRotationDr
         return originalLocation;
     }, [updateResolvedStackTrace]);
     const onDoubleClickTarget = react_1.default.useCallback((doubleClickTarget, button) => {
-        const action = (0, selected_outline_measurement_1.getOutlineDoubleClickAction)({
+        const connectedCompositions = (0, get_connected_compositions_1.getConnectedCompositions)({
+            compositions,
+            singleChildComponent: doubleClickTarget.sequence.singleChildComponent,
+        });
+        const action = (0, get_sequence_double_click_action_1.getSequenceDoubleClickAction)({
             button,
             canOpenInEditor: previewServerState.type === 'connected' &&
                 Boolean(window.remotion_editorName),
+            numberOfConnectedCompositions: connectedCompositions.length,
         });
         if (action === null) {
             return false;
         }
+        if (action === 'open-connected-composition') {
+            selectComposition(connectedCompositions[0], true);
+            return true;
+        }
         const openTargetInEditor = async () => {
             const originalLocation = await resolveOriginalLocation(doubleClickTarget);
             if (originalLocation === null) {
@@ -1017,7 +1031,12 @@ const SelectedOutlineElement = ({ allDragTargets, allDragOutlines, allRotationDr
             (0, NotificationCenter_1.showNotification)(err.message, 2000);
         });
         return true;
-    }, [previewServerState.type, resolveOriginalLocation]);
+    }, [
+        compositions,
+        previewServerState.type,
+        resolveOriginalLocation,
+        selectComposition,
+    ]);
     const onContextMenuOpen = react_1.default.useCallback(async () => {
         if (target === undefined || previewServerState.type !== 'connected') {
             return false;

package/dist/components/SelectedOutlineOverlay.d.ts

@@ -2,7 +2,7 @@ import React from 'react';
 import { type SelectedOutline } from './selected-outline-geometry';
 import { type SelectedOutlineTarget } from './selected-outline-types';
 export { applySelectedOutlineDragAxisLock, applySelectedOutlineTransformOriginAxisLock, compensateTranslateForTransformOrigin, getSelectedOutlineActiveSchema, getSelectedOutlineDragChanges, getSelectedOutlineDragValues, getSelectedOutlineKeyboardNudgeDelta, getSelectedOutlineKeyboardNudgeDeltas, getSelectedOutlineRotationDragChanges, getSelectedOutlineRotationDragStates, getSelectedOutlineRotationDragValues, getSelectedOutlineScaleDragChanges, getSelectedOutlineScaleDragStates, getSelectedOutlineScaleDragValues, getSelectedOutlineScaleEdgeInfo, getSelectedOutlineTransformOriginLockedAxis, isSelectedOutlineDragPastThreshold, selectedOutlineTransformOriginSnapThresholdPx, selectedOutlineUvSnapThresholdPx, snapSelectedOutlineRotationDeltaDegrees, snapSelectedOutlineTransformOriginUv, snapSelectedOutlineUv, } from './selected-outline-drag';
-export { getOutlineDoubleClickAction, getOutlineSelectionInteraction, getSelectedEffectFieldsBySequenceKey, getSelectedOutlineRotationCornerInfo, getSelectedOutlineRotationDeltaDegrees, getSelectedOutlineRotationPivot, getSelectedSequenceKeys, getSequencesWithSelectableOutlines, getTransformedSvgViewportPoints, } from './selected-outline-measurement';
+export { getOutlineSelectionInteraction, getSelectedEffectFieldsBySequenceKey, getSelectedOutlineRotationCornerInfo, getSelectedOutlineRotationDeltaDegrees, getSelectedOutlineRotationPivot, getSelectedSequenceKeys, getSequencesWithSelectableOutlines, getTransformedSvgViewportPoints, } from './selected-outline-measurement';
 export { selectedOutlineDragThresholdPx } from './selected-outline-types';
 export type { SelectedOutlineDragState, SelectedOutlineRotationDragState, SelectedOutlineScaleDragState, } from './selected-outline-types';
 type OutlineSequenceParent = {

package/dist/components/SelectedOutlineOverlay.js

@@ -33,7 +33,7 @@ var __importStar = (this && this.__importStar) || (function () {
     };
 })();
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.SelectedOutlineOverlay = exports.orderOutlinesForRendering = exports.selectedOutlineDragThresholdPx = exports.getTransformedSvgViewportPoints = exports.getSequencesWithSelectableOutlines = exports.getSelectedSequenceKeys = exports.getSelectedOutlineRotationPivot = exports.getSelectedOutlineRotationDeltaDegrees = exports.getSelectedOutlineRotationCornerInfo = exports.getSelectedEffectFieldsBySequenceKey = exports.getOutlineSelectionInteraction = exports.getOutlineDoubleClickAction = exports.snapSelectedOutlineUv = exports.snapSelectedOutlineTransformOriginUv = exports.snapSelectedOutlineRotationDeltaDegrees = exports.selectedOutlineUvSnapThresholdPx = exports.selectedOutlineTransformOriginSnapThresholdPx = exports.isSelectedOutlineDragPastThreshold = exports.getSelectedOutlineTransformOriginLockedAxis = exports.getSelectedOutlineScaleEdgeInfo = exports.getSelectedOutlineScaleDragValues = exports.getSelectedOutlineScaleDragStates = exports.getSelectedOutlineScaleDragChanges = exports.getSelectedOutlineRotationDragValues = exports.getSelectedOutlineRotationDragStates = exports.getSelectedOutlineRotationDragChanges = exports.getSelectedOutlineKeyboardNudgeDeltas = exports.getSelectedOutlineKeyboardNudgeDelta = exports.getSelectedOutlineDragValues = exports.getSelectedOutlineDragChanges = exports.getSelectedOutlineActiveSchema = exports.compensateTranslateForTransformOrigin = exports.applySelectedOutlineTransformOriginAxisLock = exports.applySelectedOutlineDragAxisLock = void 0;
+exports.SelectedOutlineOverlay = exports.orderOutlinesForRendering = exports.selectedOutlineDragThresholdPx = exports.getTransformedSvgViewportPoints = exports.getSequencesWithSelectableOutlines = exports.getSelectedSequenceKeys = exports.getSelectedOutlineRotationPivot = exports.getSelectedOutlineRotationDeltaDegrees = exports.getSelectedOutlineRotationCornerInfo = exports.getSelectedEffectFieldsBySequenceKey = exports.getOutlineSelectionInteraction = exports.snapSelectedOutlineUv = exports.snapSelectedOutlineTransformOriginUv = exports.snapSelectedOutlineRotationDeltaDegrees = exports.selectedOutlineUvSnapThresholdPx = exports.selectedOutlineTransformOriginSnapThresholdPx = exports.isSelectedOutlineDragPastThreshold = exports.getSelectedOutlineTransformOriginLockedAxis = exports.getSelectedOutlineScaleEdgeInfo = exports.getSelectedOutlineScaleDragValues = exports.getSelectedOutlineScaleDragStates = exports.getSelectedOutlineScaleDragChanges = exports.getSelectedOutlineRotationDragValues = exports.getSelectedOutlineRotationDragStates = exports.getSelectedOutlineRotationDragChanges = exports.getSelectedOutlineKeyboardNudgeDeltas = exports.getSelectedOutlineKeyboardNudgeDelta = exports.getSelectedOutlineDragValues = exports.getSelectedOutlineDragChanges = exports.getSelectedOutlineActiveSchema = exports.compensateTranslateForTransformOrigin = exports.applySelectedOutlineTransformOriginAxisLock = exports.applySelectedOutlineDragAxisLock = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const player_1 = require("@remotion/player");
 const react_1 = __importStar(require("react"));
@@ -82,7 +82,6 @@ Object.defineProperty(exports, "snapSelectedOutlineRotationDeltaDegrees", { enum
 Object.defineProperty(exports, "snapSelectedOutlineTransformOriginUv", { enumerable: true, get: function () { return selected_outline_drag_2.snapSelectedOutlineTransformOriginUv; } });
 Object.defineProperty(exports, "snapSelectedOutlineUv", { enumerable: true, get: function () { return selected_outline_drag_2.snapSelectedOutlineUv; } });
 const selected_outline_measurement_2 = require("./selected-outline-measurement");
-Object.defineProperty(exports, "getOutlineDoubleClickAction", { enumerable: true, get: function () { return selected_outline_measurement_2.getOutlineDoubleClickAction; } });
 Object.defineProperty(exports, "getOutlineSelectionInteraction", { enumerable: true, get: function () { return selected_outline_measurement_2.getOutlineSelectionInteraction; } });
 Object.defineProperty(exports, "getSelectedEffectFieldsBySequenceKey", { enumerable: true, get: function () { return selected_outline_measurement_2.getSelectedEffectFieldsBySequenceKey; } });
 Object.defineProperty(exports, "getSelectedOutlineRotationCornerInfo", { enumerable: true, get: function () { return selected_outline_measurement_2.getSelectedOutlineRotationCornerInfo; } });
@@ -363,7 +362,7 @@ exports.orderOutlinesForRendering = orderOutlinesForRendering;
 const SelectedOutlineOverlay = ({ compositionHeight, compositionWidth, scale, translationX, translationY, }) => {
     const { selectedItems, selectItem } = (0, TimelineSelection_1.useTimelineSelection)();
     const { sequences } = (0, react_1.useContext)(remotion_1.Internals.SequenceManager);
-    const { canvasContent } = (0, react_1.useContext)(remotion_1.Internals.CompositionManager);
+    const { canvasContent, compositions } = (0, react_1.useContext)(remotion_1.Internals.CompositionManager);
     const { propStatuses } = (0, react_1.useContext)(remotion_1.Internals.VisualModePropStatusesContext);
     const { previewServerState } = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx);
     const { overrideIdToNodePathMappings } = (0, react_1.useContext)(remotion_1.Internals.OverrideIdsToNodePathsGettersContext);
@@ -411,6 +410,7 @@ const SelectedOutlineOverlay = ({ compositionHeight, compositionWidth, scale, tr
         return (0, selected_outline_measurement_1.getSequencesWithSelectableOutlines)({
             sequences,
             overrideIdsToNodePaths: overrideIdToNodePathMappings,
+            compositions,
         }).map(({ key, keyframeDisplayOffset, nodePathInfo, sequence }) => {
             var _a, _b, _c, _d, _e, _f;
             if (sequence.refForOutline === null) {
@@ -629,6 +629,7 @@ const SelectedOutlineOverlay = ({ compositionHeight, compositionWidth, scale, tr
         previewServerState,
         selectedItems,
         sequences,
+        compositions,
         timelinePosition,
     ]);
     (0, react_1.useEffect)(() => {

package/dist/components/Timeline/Timeline.js

@@ -204,6 +204,7 @@ const TimelineContextMenuArea = ({ children }) => {
 const TimelineInner = () => {
     var _a;
     const { sequences } = (0, react_1.useContext)(remotion_1.Internals.SequenceManager);
+    const { compositions } = (0, react_1.useContext)(remotion_1.Internals.CompositionManager);
     const videoConfig = remotion_1.Internals.useUnsafeVideoConfig();
     const isStill = (0, is_current_selected_still_1.useIsStill)();
     const { overrideIdToNodePathMappings } = (0, react_1.useContext)(remotion_1.Internals.OverrideIdsToNodePathsGettersContext);
@@ -218,8 +219,14 @@ const TimelineInner = () => {
         return (0, calculate_timeline_1.calculateTimeline)({
             sequences,
             overrideIdsToNodePaths: overrideIdToNodePathMappings,
+            compositions,
         });
-    }, [sequences, videoConfigIsNull, overrideIdToNodePathMappings]);
+    }, [
+        sequences,
+        videoConfigIsNull,
+        overrideIdToNodePathMappings,
+        compositions,
+    ]);
     const durationInFrames = (_a = videoConfig === null || videoConfig === void 0 ? void 0 : videoConfig.durationInFrames) !== null && _a !== void 0 ? _a : 0;
     const filtered = (0, react_1.useMemo)(() => {
         return timeline.filter((t) => (0, should_show_track_in_timeline_1.shouldShowTrackInTimeline)(t, durationInFrames));

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

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

package/dist/components/Timeline/TimelineAssetField.js

@@ -0,0 +1,125 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TimelineAssetField = exports.isStaticFileAssetValue = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const no_react_1 = require("remotion/no-react");
+const write_static_file_1 = require("../../api/write-static-file");
+const Checkmark_1 = require("../../icons/Checkmark");
+const import_assets_1 = require("../import-assets");
+const ComboBox_1 = require("../NewComposition/ComboBox");
+const NotificationCenter_1 = require("../Notifications/NotificationCenter");
+const use_static_files_1 = require("../use-static-files");
+const comboboxStyle = {
+    marginLeft: 8,
+    maxWidth: 180,
+};
+const remoteAssetStyle = {
+    display: 'inline-block',
+    marginLeft: 8,
+    maxWidth: 180,
+    overflow: 'hidden',
+    textOverflow: 'ellipsis',
+    verticalAlign: 'middle',
+    whiteSpace: 'nowrap',
+};
+const toFileToken = (name) => {
+    return `${no_react_1.NoReactInternals.FILE_TOKEN}${name
+        .split('/')
+        .map(encodeURIComponent)
+        .join('/')}`;
+};
+const toStaticFileUrl = (fileToken) => {
+    return `${window.remotion_staticBase}/${fileToken.slice(no_react_1.NoReactInternals.FILE_TOKEN.length)}`;
+};
+const isStaticFileAssetValue = (value) => {
+    return (typeof value === 'string' && value.startsWith(no_react_1.NoReactInternals.FILE_TOKEN));
+};
+exports.isStaticFileAssetValue = isStaticFileAssetValue;
+const TimelineStaticFileAssetField = ({ propStatus, effectiveValue, onSave, onDragValueChange, onDragEnd, }) => {
+    const staticFiles = (0, use_static_files_1.useStaticFiles)();
+    const current = String(effectiveValue !== null && effectiveValue !== void 0 ? effectiveValue : '');
+    const onSelect = (0, react_1.useCallback)((sourceValue, previewValue) => {
+        if (sourceValue === propStatus.codeValue) {
+            return;
+        }
+        onDragValueChange(previewValue);
+        onSave(sourceValue).finally(() => {
+            onDragEnd();
+        });
+    }, [propStatus.codeValue, onDragValueChange, onSave, onDragEnd]);
+    const upload = (0, react_1.useCallback)(async () => {
+        const [file] = await (0, import_assets_1.pickFilesToImport)({ multiple: false });
+        if (!file) {
+            return;
+        }
+        const existing = staticFiles.find((candidate) => candidate.name === file.name);
+        if (existing && existing.sizeInBytes !== file.size) {
+            (0, NotificationCenter_1.showNotification)(`File with name ${file.name} already exists and is different`, 4000);
+            return;
+        }
+        try {
+            if (!existing) {
+                await (0, write_static_file_1.writeStaticFile)({
+                    contents: await file.arrayBuffer(),
+                    filePath: file.name,
+                });
+            }
+            const fileToken = toFileToken(file.name);
+            onSelect(fileToken, toStaticFileUrl(fileToken));
+            if (!existing) {
+                (0, NotificationCenter_1.showNotification)(`Created ${file.name} in public folder`, 3000);
+            }
+        }
+        catch (error) {
+            (0, NotificationCenter_1.showNotification)(`Could not upload asset: ${error instanceof Error ? error.message : String(error)}`, 4000);
+        }
+    }, [onSelect, staticFiles]);
+    const items = (0, react_1.useMemo)(() => {
+        const publicFileItems = staticFiles.map((file) => {
+            const fileToken = toFileToken(file.name);
+            return {
+                type: 'item',
+                id: fileToken,
+                value: fileToken,
+                label: file.name,
+                onClick: () => onSelect(fileToken, file.src),
+                keyHint: null,
+                leftItem: fileToken === current ? jsx_runtime_1.jsx(Checkmark_1.Checkmark, {}) : null,
+                subMenu: null,
+                quickSwitcherLabel: null,
+            };
+        });
+        return [
+            ...publicFileItems,
+            { type: 'divider', id: 'upload-asset-divider' },
+            {
+                type: 'item',
+                id: 'upload-asset',
+                value: 'upload-asset',
+                label: 'Upload…',
+                onClick: () => {
+                    upload().catch(() => undefined);
+                },
+                keyHint: null,
+                leftItem: null,
+                subMenu: null,
+                quickSwitcherLabel: null,
+                disabled: window.remotion_isReadOnlyStudio,
+            },
+        ];
+    }, [current, onSelect, staticFiles, upload]);
+    return (jsx_runtime_1.jsx(ComboBox_1.Combobox, { small: true, title: current, selectedId: current, values: items, style: comboboxStyle }));
+};
+const TimelineAssetField = (props) => {
+    var _a;
+    if (props.field.fieldSchema.type !== 'asset') {
+        throw new Error('TimelineAssetField rendered for non-asset field');
+    }
+    if (!(0, exports.isStaticFileAssetValue)(props.effectiveValue)) {
+        const remote = String((_a = props.effectiveValue) !== null && _a !== void 0 ? _a : '');
+        return (jsx_runtime_1.jsx("span", { style: remoteAssetStyle, title: remote, children: remote }));
+    }
+    return jsx_runtime_1.jsx(TimelineStaticFileAssetField, { ...props });
+};
+exports.TimelineAssetField = TimelineAssetField;

package/dist/components/Timeline/TimelineClipboardKeybindings.js

@@ -9,9 +9,13 @@ const use_keybinding_1 = require("../../helpers/use-keybinding");
 const call_api_1 = require("../call-api");
 const ConfirmationDialog_1 = require("../ConfirmationDialog");
 const NotificationCenter_1 = require("../Notifications/NotificationCenter");
+const call_add_keyframe_1 = require("./call-add-keyframe");
+const call_delete_keyframe_1 = require("./call-delete-keyframe");
+const call_update_keyframe_settings_1 = require("./call-update-keyframe-settings");
 const delete_selected_timeline_item_1 = require("./delete-selected-timeline-item");
 const effects_clipboard_1 = require("./effects-clipboard");
 const find_track_for_node_path_info_1 = require("./find-track-for-node-path-info");
+const keyframe_clipboard_1 = require("./keyframe-clipboard");
 const save_effect_prop_1 = require("./save-effect-prop");
 const TimelineSelection_1 = require("./TimelineSelection");
 const update_selected_easing_1 = require("./update-selected-easing");
@@ -352,6 +356,9 @@ const getPasteEffectPropTarget = ({ selectedItems, payload, propStatuses, sequen
 exports.getPasteEffectPropTarget = getPasteEffectPropTarget;
 const TimelineClipboardKeybindings = () => {
     const keybindings = (0, use_keybinding_1.useKeybinding)();
+    const timelinePosition = remotion_1.Internals.Timeline.useTimelinePosition();
+    const timelinePositionRef = (0, react_1.useRef)(timelinePosition);
+    timelinePositionRef.current = timelinePosition;
     const { previewServerState } = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx);
     const { canSelect } = (0, TimelineSelection_1.useTimelineSelection)();
     const currentSelection = (0, TimelineSelection_1.useCurrentTimelineSelectionStateAsRef)();
@@ -376,6 +383,30 @@ const TimelineClipboardKeybindings = () => {
                 if (selectedItems.length === 0) {
                     return;
                 }
+                const keyframeSelections = selectedItems.filter((selection) => selection.type === 'keyframe');
+                if (keyframeSelections.length > 0) {
+                    e.preventDefault();
+                    if (selectedItems.some((selection) => selection.type !== 'keyframe' && selection.type !== 'easing')) {
+                        (0, NotificationCenter_1.showNotification)('Select only keyframes and easings to copy', 3000);
+                        return;
+                    }
+                    const payload = (0, keyframe_clipboard_1.getKeyframeClipboardDataFromSelections)({
+                        selections: selectedItems,
+                        sequences,
+                        overrideIdsToNodePaths: overrideIdToNodePathMappings,
+                        propStatuses,
+                    });
+                    if (payload === null) {
+                        (0, NotificationCenter_1.showNotification)('Select a continuous keyframe range from one property to copy', 3000);
+                        return;
+                    }
+                    navigator.clipboard
+                        .writeText(makeClipboardText(payload))
+                        .catch((err) => {
+                        (0, NotificationCenter_1.showNotification)(`Could not copy keyframe: ${err.message}`, 2000);
+                    });
+                    return;
+                }
                 const easingSelections = (0, update_selected_easing_1.getEasingSelections)(selectedItems);
                 if (easingSelections.length > 0) {
                     e.preventDefault();
@@ -543,6 +574,106 @@ const TimelineClipboardKeybindings = () => {
                 .then(() => {
                 const propStatuses = propStatusesRef.current;
                 const sequences = sequencesRef.current;
+                const keyframeResult = (0, studio_shared_1.parseKeyframeClipboardDataResult)(text);
+                if (keyframeResult.status !== 'invalid') {
+                    if (keyframeResult.status === 'unsupported-version') {
+                        (0, NotificationCenter_1.showNotification)('Cannot paste keyframe copied from a different Remotion Studio version', 4000);
+                        return;
+                    }
+                    const keyframeTarget = (0, keyframe_clipboard_1.getPasteKeyframeTarget)({
+                        selectedItems,
+                        payload: keyframeResult.data,
+                        timelinePosition: timelinePositionRef.current,
+                        sequences,
+                        overrideIdsToNodePaths: overrideIdToNodePathMappings,
+                        propStatuses,
+                    });
+                    if (keyframeTarget.type !== 'valid') {
+                        switch (keyframeTarget.type) {
+                            case 'none':
+                                (0, NotificationCenter_1.showNotification)('Select a property or keyframe to paste onto', 3000);
+                                return;
+                            case 'multiple':
+                                (0, NotificationCenter_1.showNotification)('Select one property or keyframe to paste onto', 3000);
+                                return;
+                            case 'uncopyable':
+                                (0, NotificationCenter_1.showNotification)('Cannot paste onto a property that cannot be updated', 3000);
+                                return;
+                            case 'incompatible':
+                                (0, NotificationCenter_1.showNotification)('The copied keyframe is not compatible with this property', 3000);
+                                return;
+                            default:
+                                throw new Error(`Unexpected paste target: ${keyframeTarget}`);
+                        }
+                    }
+                    const changes = keyframeTarget.keyframes.map((keyframe) => ({
+                        fileName: keyframeTarget.fileName,
+                        nodePath: keyframeTarget.nodePath,
+                        fieldKey: keyframeTarget.fieldKey,
+                        sourceFrame: keyframe.sourceFrame,
+                        value: keyframe.value,
+                        schema: keyframeTarget.schema,
+                    }));
+                    const { effectIndex } = keyframeTarget;
+                    const deletions = keyframeTarget.keyframesToDelete.map((sourceFrame) => ({
+                        fileName: keyframeTarget.fileName,
+                        nodePath: keyframeTarget.nodePath,
+                        fieldKey: keyframeTarget.fieldKey,
+                        sourceFrame,
+                        schema: keyframeTarget.schema,
+                    }));
+                    return (0, call_delete_keyframe_1.callDeleteKeyframes)({
+                        sequenceKeyframes: effectIndex === null ? deletions : [],
+                        effectKeyframes: effectIndex === null
+                            ? []
+                            : deletions.map((deletion) => ({
+                                ...deletion,
+                                effectIndex,
+                            })),
+                        setPropStatuses,
+                        clientId,
+                    })
+                        .then(() => (0, call_add_keyframe_1.callAddKeyframes)({
+                        sequenceKeyframes: effectIndex === null ? changes : [],
+                        effectKeyframes: effectIndex === null
+                            ? []
+                            : changes.map((change) => ({ ...change, effectIndex })),
+                        setPropStatuses,
+                        clientId,
+                    }))
+                        .then(async () => {
+                        for (const [index, easing] of keyframeTarget.easing.entries()) {
+                            const settings = {
+                                type: 'easing',
+                                segmentIndex: keyframeTarget.firstEasingSegmentIndex + index,
+                                easing,
+                            };
+                            if (effectIndex === null) {
+                                await (0, call_update_keyframe_settings_1.callUpdateSequenceKeyframeSettings)({
+                                    fileName: keyframeTarget.fileName,
+                                    nodePath: keyframeTarget.nodePath,
+                                    fieldKey: keyframeTarget.fieldKey,
+                                    settings,
+                                    schema: keyframeTarget.schema,
+                                    setPropStatuses,
+                                    clientId,
+                                });
+                            }
+                            else {
+                                await (0, call_update_keyframe_settings_1.callUpdateEffectKeyframeSettings)({
+                                    fileName: keyframeTarget.fileName,
+                                    nodePath: keyframeTarget.nodePath,
+                                    effectIndex,
+                                    fieldKey: keyframeTarget.fieldKey,
+                                    settings,
+                                    schema: keyframeTarget.schema,
+                                    setPropStatuses,
+                                    clientId,
+                                });
+                            }
+                        }
+                    });
+                }
                 const easingResult = (0, studio_shared_1.parseEasingClipboardDataResult)(text);
                 if (easingResult.status !== 'invalid') {
                     e.preventDefault();
@@ -685,7 +816,7 @@ const TimelineClipboardKeybindings = () => {
                 });
             })
                 .catch((err) => {
-                (0, NotificationCenter_1.showNotification)(`Could not paste effects: ${err.message}`, 3000);
+                (0, NotificationCenter_1.showNotification)(`Could not paste: ${err.message}`, 3000);
             });
         };
         // Reading ClipboardEvent data avoids the permission prompt caused by
@@ -708,6 +839,7 @@ const TimelineClipboardKeybindings = () => {
         previewServerState,
         sequencesRef,
         setPropStatuses,
+        timelinePositionRef,
     ]);
     return null;
 };

package/dist/components/Timeline/TimelineExpandedSection.js

@@ -57,6 +57,7 @@ const TimelineExpandedSection = ({ sequence, validatedLocation, nodePathInfo, ne
         sequence,
         nodePathInfo,
         includeTextContent: false,
+        includeSourceControls: false,
     });
     const flat = (0, react_1.useMemo)(() => (0, timeline_layout_1.flattenVisibleTreeNodes)({ nodes: filteredTree, getIsExpanded }), [filteredTree, getIsExpanded]);
     const expandedHeight = (0, react_1.useMemo)(() => {