@remotion/studio 4.0.472 → 4.0.474

package/dist/components/ShowOutlinesProvider.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+export declare const ShowOutlinesProvider: React.FC<{
+    readonly children: React.ReactNode;
+}>;

package/dist/components/ShowOutlinesProvider.js

@@ -0,0 +1,24 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ShowOutlinesProvider = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const editor_outlines_1 = require("../state/editor-outlines");
+const ShowOutlinesProvider = ({ children }) => {
+    const [editorShowOutlines, setEditorShowOutlinesState] = (0, react_1.useState)(() => (0, editor_outlines_1.loadEditorShowOutlinesOption)());
+    const setEditorShowOutlines = (0, react_1.useCallback)((newValue) => {
+        setEditorShowOutlinesState((prevState) => {
+            const newVal = newValue(prevState);
+            (0, editor_outlines_1.persistEditorShowOutlinesOption)(newVal);
+            return newVal;
+        });
+    }, []);
+    const editorShowOutlinesCtx = (0, react_1.useMemo)(() => {
+        return {
+            editorShowOutlines,
+            setEditorShowOutlines,
+        };
+    }, [editorShowOutlines, setEditorShowOutlines]);
+    return (jsx_runtime_1.jsx(editor_outlines_1.EditorShowOutlinesContext.Provider, { value: editorShowOutlinesCtx, children: children }));
+};
+exports.ShowOutlinesProvider = ShowOutlinesProvider;

package/dist/components/SizeSelector.js

@@ -4,10 +4,10 @@ exports.SizeSelector = exports.getUniqueSizes = exports.getPreviewSizeLabel = vo
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const remotion_1 = require("remotion");
+const get_preview_file_type_1 = require("../helpers/get-preview-file-type");
 const Checkmark_1 = require("../icons/Checkmark");
 const ControlButton_1 = require("./ControlButton");
 const ComboBox_1 = require("./NewComposition/ComboBox");
-const Preview_1 = require("./Preview");
 const commonPreviewSizes = [
     {
         size: 'auto',
@@ -83,11 +83,11 @@ const SizeSelector = () => {
             return true;
         }
         if (canvasContent.type === 'asset' &&
-            zoomableFileTypes.includes((0, Preview_1.getPreviewFileType)(canvasContent.asset))) {
+            zoomableFileTypes.includes((0, get_preview_file_type_1.getPreviewFileType)(canvasContent.asset))) {
             return true;
         }
         if (canvasContent.type === 'output' &&
-            zoomableFileTypes.includes((0, Preview_1.getPreviewFileType)(canvasContent.path))) {
+            zoomableFileTypes.includes((0, get_preview_file_type_1.getPreviewFileType)(canvasContent.path))) {
             return true;
         }
         return false;

package/dist/components/Splitter/SplitterHandle.js

@@ -34,6 +34,8 @@ const SplitterHandle = ({ allowToCollapse, onCollapse }) => {
             if (e.button !== 0) {
                 return;
             }
+            // Prevent deselection of currently selected items
+            e.stopPropagation();
             // Capture the context and starting flex once, at drag start. The flex
             // value updates on every pointermove, so it must not be re-read live.
             const dragContext = latest.current.context;

package/dist/components/StaticFilePreview.js

@@ -6,8 +6,8 @@ const react_1 = require("react");
 const remotion_1 = require("remotion");
 const client_id_1 = require("../helpers/client-id");
 const colors_1 = require("../helpers/colors");
+const get_preview_file_type_1 = require("../helpers/get-preview-file-type");
 const FilePreview_1 = require("./FilePreview");
-const Preview_1 = require("./Preview");
 const use_static_files_1 = require("./use-static-files");
 const msgStyle = {
     fontSize: 13,
@@ -21,7 +21,7 @@ const errMsgStyle = {
     color: colors_1.LIGHT_TEXT,
 };
 const StaticFilePreview = ({ currentAsset, assetMetadata }) => {
-    const fileType = (0, Preview_1.getPreviewFileType)(currentAsset);
+    const fileType = (0, get_preview_file_type_1.getPreviewFileType)(currentAsset);
     const staticFileSrc = (0, remotion_1.staticFile)(currentAsset);
     const staticFiles = (0, use_static_files_1.useStaticFiles)();
     const connectionStatus = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx)

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

@@ -0,0 +1,15 @@
+import React from 'react';
+import type { CanUpdateSequencePropStatusKeyframed, SequencePropsSubscriptionKey, SequenceSchema } from 'remotion';
+export type KeyframeSettingsModalState = {
+    type: 'keyframe-settings';
+    fileName: string;
+    nodePath: SequencePropsSubscriptionKey;
+    fieldKey: string;
+    fieldLabel: string;
+    status: CanUpdateSequencePropStatusKeyframed;
+    schema: SequenceSchema;
+    effectIndex: number | null;
+};
+export declare const KeyframeSettingsModal: React.FC<{
+    readonly state: KeyframeSettingsModalState;
+}>;

package/dist/components/Timeline/KeyframeSettingsModal.js

@@ -0,0 +1,150 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.KeyframeSettingsModal = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const remotion_1 = require("remotion");
+const client_id_1 = require("../../helpers/client-id");
+const colors_1 = require("../../helpers/colors");
+const modals_1 = require("../../state/modals");
+const Button_1 = require("../Button");
+const layout_1 = require("../layout");
+const ModalButton_1 = require("../ModalButton");
+const ModalFooter_1 = require("../ModalFooter");
+const ModalHeader_1 = require("../ModalHeader");
+const ComboBox_1 = require("../NewComposition/ComboBox");
+const DismissableModal_1 = require("../NewComposition/DismissableModal");
+const InputDragger_1 = require("../NewComposition/InputDragger");
+const call_update_keyframe_settings_1 = require("./call-update-keyframe-settings");
+const container = {
+    padding: 16,
+    width: 520,
+};
+const row = {
+    alignItems: 'center',
+    display: 'flex',
+    justifyContent: 'space-between',
+    marginBottom: 12,
+};
+const label = {
+    fontSize: 13,
+};
+const helperText = {
+    color: 'rgba(255, 255, 255, 0.6)',
+    fontSize: 12,
+    lineHeight: 1.4,
+    marginTop: 4,
+};
+const comboStyle = {
+    minWidth: 150,
+};
+const posterizeInputStyle = {
+    backgroundColor: colors_1.INPUT_BACKGROUND,
+    borderRadius: 4,
+    minWidth: 64,
+    textAlign: 'right',
+};
+const extrapolateOptions = [
+    'extend',
+    'clamp',
+    'identity',
+    'wrap',
+];
+const labelForExtrapolate = (value) => value[0].toUpperCase() + value.slice(1);
+const getExtrapolateValues = (onSelect) => {
+    return extrapolateOptions.map((value) => ({
+        type: 'item',
+        id: value,
+        keyHint: null,
+        label: labelForExtrapolate(value),
+        leftItem: null,
+        disabled: false,
+        onClick: () => onSelect(value),
+        quickSwitcherLabel: null,
+        subMenu: null,
+        value,
+    }));
+};
+const KeyframeSettingsModal = ({ state }) => {
+    var _a;
+    const { setSelectedModal } = (0, react_1.useContext)(modals_1.ModalsContext);
+    const { setPropStatuses } = (0, react_1.useContext)(remotion_1.Internals.VisualModeSettersContext);
+    const { previewServerState } = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx);
+    const [left, setLeft] = (0, react_1.useState)(state.status.clamping.left);
+    const [right, setRight] = (0, react_1.useState)(state.status.clamping.right);
+    const [posterize, setPosterize] = (0, react_1.useState)((_a = state.status.posterize) !== null && _a !== void 0 ? _a : 0);
+    const [saving, setSaving] = (0, react_1.useState)(false);
+    const canEditClamping = state.status.interpolationFunction === 'interpolate';
+    const close = (0, react_1.useCallback)(() => {
+        setSelectedModal(null);
+    }, [setSelectedModal]);
+    const leftOptions = (0, react_1.useMemo)(() => getExtrapolateValues(setLeft), []);
+    const rightOptions = (0, react_1.useMemo)(() => getExtrapolateValues(setRight), []);
+    const onPosterizeChange = (0, react_1.useCallback)((value) => {
+        setPosterize(Math.max(0, Math.round(value)));
+    }, []);
+    const posterizeFormatter = (0, react_1.useCallback)((value) => {
+        const numericValue = Number(value);
+        return String(Math.round(numericValue));
+    }, []);
+    const onSave = (0, react_1.useCallback)(() => {
+        if (previewServerState.type !== 'connected') {
+            return;
+        }
+        const settings = {
+            clamping: canEditClamping ? { left, right } : undefined,
+            posterize: posterize <= 0 ? undefined : posterize,
+        };
+        setSaving(true);
+        const promise = state.effectIndex === null
+            ? (0, call_update_keyframe_settings_1.callUpdateSequenceKeyframeSettings)({
+                fileName: state.fileName,
+                nodePath: state.nodePath,
+                fieldKey: state.fieldKey,
+                settings,
+                schema: state.schema,
+                setPropStatuses,
+                clientId: previewServerState.clientId,
+            })
+            : (0, call_update_keyframe_settings_1.callUpdateEffectKeyframeSettings)({
+                fileName: state.fileName,
+                nodePath: state.nodePath,
+                effectIndex: state.effectIndex,
+                fieldKey: state.fieldKey,
+                settings,
+                schema: state.schema,
+                setPropStatuses,
+                clientId: previewServerState.clientId,
+            });
+        promise.then(close).finally(() => {
+            setSaving(false);
+        });
+    }, [
+        canEditClamping,
+        close,
+        left,
+        posterize,
+        previewServerState,
+        right,
+        setPropStatuses,
+        state,
+    ]);
+    const saveDisabled = saving || previewServerState.type !== 'connected';
+    return (jsx_runtime_1.jsxs(DismissableModal_1.DismissableModal, { children: [
+            jsx_runtime_1.jsx(ModalHeader_1.ModalHeader, { title: `Keyframe settings: ${state.fieldLabel}` }), jsx_runtime_1.jsxs("div", { style: container, children: [canEditClamping ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
+                            jsx_runtime_1.jsxs("div", { style: row, children: [
+                                    jsx_runtime_1.jsx("div", { style: label, children: "Extrapolate left" }), jsx_runtime_1.jsx(ComboBox_1.Combobox, { values: leftOptions, selectedId: left, title: "Extrapolate left", style: comboStyle })
+                                ] }), jsx_runtime_1.jsxs("div", { style: row, children: [
+                                    jsx_runtime_1.jsx("div", { style: label, children: "Extrapolate right" }), jsx_runtime_1.jsx(ComboBox_1.Combobox, { values: rightOptions, selectedId: right, title: "Extrapolate right", style: comboStyle })
+                                ] })
+                        ] })) : null, jsx_runtime_1.jsxs("div", { style: row, children: [
+                            jsx_runtime_1.jsxs("div", { children: [
+                                    jsx_runtime_1.jsx("div", { style: label, children: "Posterize" }), jsx_runtime_1.jsx("div", { style: helperText, children: "Use 0 to turn posterization off." })
+                                ] }), jsx_runtime_1.jsx(InputDragger_1.InputDragger, { type: "number", value: posterize, status: "ok", onValueChange: onPosterizeChange, onValueChangeEnd: onPosterizeChange, onTextChange: () => undefined, min: 0, step: 1, formatter: posterizeFormatter, rightAlign: true, style: posterizeInputStyle })
+                        ] })
+                ] }), jsx_runtime_1.jsx(ModalFooter_1.ModalFooterContainer, { children: jsx_runtime_1.jsxs(layout_1.Row, { justify: "flex-end", align: "center", children: [
+                        jsx_runtime_1.jsx(Button_1.Button, { onClick: close, children: "Cancel" }), jsx_runtime_1.jsx(layout_1.Spacing, { x: 1 }), jsx_runtime_1.jsx(ModalButton_1.ModalButton, { onClick: onSave, disabled: saveDisabled, children: "Save" })
+                    ] }) })
+        ] }));
+};
+exports.KeyframeSettingsModal = KeyframeSettingsModal;

package/dist/components/Timeline/SequencePropsObserver.js

@@ -6,19 +6,19 @@ const remotion_1 = require("remotion");
 const client_id_1 = require("../../helpers/client-id");
 const SequencePropsObserver = () => {
     const { subscribeToEvent } = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx);
-    const { setCodeValues } = (0, react_1.useContext)(remotion_1.Internals.VisualModeSettersContext);
+    const { setPropStatuses } = (0, react_1.useContext)(remotion_1.Internals.VisualModeSettersContext);
     (0, react_1.useEffect)(() => {
         const handleEvent = (event) => {
             if (event.type !== 'sequence-props-updated') {
                 return;
             }
-            setCodeValues(event.nodePath, () => event.result);
+            setPropStatuses(event.nodePath, () => event.result);
         };
         const unsubscribe = subscribeToEvent('sequence-props-updated', handleEvent);
         return () => {
             unsubscribe();
         };
-    }, [setCodeValues, subscribeToEvent]);
+    }, [setPropStatuses, subscribeToEvent]);
     return null;
 };
 exports.SequencePropsObserver = SequencePropsObserver;

package/dist/components/Timeline/Timeline.js

@@ -78,9 +78,8 @@ const container = {
     backgroundColor: colors_1.BACKGROUND,
 };
 const noop = () => undefined;
-const TimelineClearSelectionArea = ({ children }) => {
+const TimelineContextMenuArea = ({ children }) => {
     var _a, _b;
-    const { clearSelection } = (0, TimelineSelection_1.useTimelineSelection)();
     const { compositions, canvasContent } = (0, react_1.useContext)(remotion_1.Internals.CompositionManager);
     const videoConfig = remotion_1.Internals.useUnsafeVideoConfig();
     const [isAddingSolid, setIsAddingSolid] = (0, react_1.useState)(false);
@@ -101,15 +100,6 @@ const TimelineClearSelectionArea = ({ children }) => {
         compositionFile,
         compositionId: currentCompositionId,
     });
-    // Selection-triggering click handlers in children call e.stopPropagation(),
-    // so any pointerdown that bubbles up here is by definition on empty space
-    // and should clear the current selection.
-    const onPointerDown = (0, react_1.useCallback)((e) => {
-        if (e.button !== 0) {
-            return;
-        }
-        clearSelection();
-    }, [clearSelection]);
     const canInsertSolid = previewConnected &&
         (compositionComponentInfo === null || compositionComponentInfo === void 0 ? void 0 : compositionComponentInfo.canAddSequence) === true &&
         currentCompositionId !== null &&
@@ -203,7 +193,7 @@ const TimelineClearSelectionArea = ({ children }) => {
             },
         ];
     }, [insertSolid, canInsertSolid, insertAsset, canInsertAsset]);
-    return (jsx_runtime_1.jsx(ContextMenu_1.ContextMenu, { ref: timeline_refs_1.timelineVerticalScroll, values: contextMenuItems, onOpen: null, style: container, className: 'css-reset ' + is_menu_item_1.VERTICAL_SCROLLBAR_CLASSNAME, onPointerDown: onPointerDown, children: children }));
+    return (jsx_runtime_1.jsx(ContextMenu_1.ContextMenu, { ref: timeline_refs_1.timelineVerticalScroll, values: contextMenuItems, onOpen: null, style: container, className: 'css-reset ' + is_menu_item_1.VERTICAL_SCROLLBAR_CLASSNAME, children: children }));
 };
 const TimelineInner = () => {
     var _a;
@@ -233,7 +223,7 @@ const TimelineInner = () => {
             : filtered;
     }, [filtered]);
     const hasBeenCut = filtered.length > shown.length;
-    return (jsx_runtime_1.jsxs(TimelineClearSelectionArea, { children: [sequences.map((sequence) => {
+    return (jsx_runtime_1.jsxs(TimelineContextMenuArea, { children: [sequences.map((sequence) => {
                 if (!sequence.controls || !previewConnected || !sequence.getStack()) {
                     return null;
                 }

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

@@ -1,5 +1,6 @@
-import { type EffectClipboardSnapshot } from '@remotion/studio-shared';
+import { type EffectClipboardSnapshot, type EffectPropClipboardData } from '@remotion/studio-shared';
 import type React from 'react';
+import { type OverrideIdToNodePaths, type PropStatuses, type SequencePropsSubscriptionKey, type SequenceSchema, type TSequence } from 'remotion';
 import type { SequenceNodePathInfo } from '../../helpers/get-timeline-sequence-sort-key';
 import { type TimelineSelection } from './TimelineSelection';
 export type PasteEffectsTarget = {
@@ -12,9 +13,31 @@ export type PasteEffectsTarget = {
 } | {
     readonly type: 'unsupported';
 };
+export type PasteEffectPropTarget = {
+    readonly type: 'valid';
+    readonly fileName: string;
+    readonly nodePath: SequencePropsSubscriptionKey;
+    readonly effectIndex: number;
+    readonly fieldKey: string;
+    readonly defaultValue: string | null;
+    readonly schema: SequenceSchema;
+} | {
+    readonly type: 'none' | 'multiple' | 'unsupported' | 'effect-type-mismatch' | 'prop-mismatch' | 'uncopyable';
+};
 export declare const getPasteEffectsTarget: (selectedItems: readonly TimelineSelection[]) => PasteEffectsTarget;
-export declare const getSnapshotsFromSelection: ({ selection, codeValues, }: {
+export declare const getSnapshotsFromSelection: ({ selection, propStatuses, }: {
     selection: TimelineSelection;
-    codeValues: import("remotion").CodeValues;
+    propStatuses: PropStatuses;
 }) => EffectClipboardSnapshot[] | null;
+export declare const getEffectPropClipboardDataFromSelection: ({ selection, propStatuses, }: {
+    selection: TimelineSelection;
+    propStatuses: PropStatuses;
+}) => EffectPropClipboardData | null;
+export declare const getPasteEffectPropTarget: ({ selectedItems, payload, propStatuses, sequences, overrideIdsToNodePaths, }: {
+    readonly selectedItems: readonly TimelineSelection[];
+    readonly payload: EffectPropClipboardData;
+    readonly propStatuses: PropStatuses;
+    readonly sequences: TSequence[];
+    readonly overrideIdsToNodePaths: OverrideIdToNodePaths;
+}) => PasteEffectPropTarget;
 export declare const TimelineClipboardKeybindings: React.FC;