@remotion/studio 4.0.499 → 4.0.500

package/dist/components/SidebarCollapserControls.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.SidebarCollapserControls = void 0;
+exports.SidebarCollapserControl = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const ShortcutHint_1 = require("../error-overlay/remotion-overlay/ShortcutHint");
@@ -18,7 +18,7 @@ const style = {
     color: colors_1.CURRENT_COLOR,
     position: 'relative',
 };
-const SidebarCollapserControls = () => {
+const SidebarCollapserControl = ({ side }) => {
     const { setSidebarCollapsedState, sidebarCollapsedStateRight } = (0, react_1.useContext)(sidebar_1.SidebarContext);
     const keybindings = (0, use_keybinding_1.useKeybinding)();
     const leftSidebarStatus = (0, TopPanel_1.useResponsiveSidebarStatus)();
@@ -83,15 +83,30 @@ const SidebarCollapserControls = () => {
         toggleRight,
     ]);
     (0, react_1.useEffect)(() => {
-        const left = keybindings.registerKeybinding({
-            event: 'keydown',
-            key: 'b',
-            commandCtrlKey: true,
-            callback: toggleLeft,
-            preventDefault: true,
-            triggerIfInputFieldFocused: false,
-            keepRegisteredWhenNotHighestContext: false,
-        });
+        if (side === 'left') {
+            const left = keybindings.registerKeybinding({
+                event: 'keydown',
+                key: 'b',
+                commandCtrlKey: true,
+                callback: toggleLeft,
+                preventDefault: true,
+                triggerIfInputFieldFocused: false,
+                keepRegisteredWhenNotHighestContext: false,
+            });
+            const zen = keybindings.registerKeybinding({
+                event: 'keydown',
+                key: 'g',
+                commandCtrlKey: true,
+                callback: toggleBoth,
+                preventDefault: true,
+                triggerIfInputFieldFocused: false,
+                keepRegisteredWhenNotHighestContext: false,
+            });
+            return () => {
+                left.unregister();
+                zen.unregister();
+            };
+        }
         const right = keybindings.registerKeybinding({
             event: 'keydown',
             key: 'j',
@@ -101,21 +116,10 @@ const SidebarCollapserControls = () => {
             triggerIfInputFieldFocused: false,
             keepRegisteredWhenNotHighestContext: false,
         });
-        const zen = keybindings.registerKeybinding({
-            event: 'keydown',
-            key: 'g',
-            commandCtrlKey: true,
-            callback: toggleBoth,
-            preventDefault: true,
-            triggerIfInputFieldFocused: false,
-            keepRegisteredWhenNotHighestContext: false,
-        });
         return () => {
-            left.unregister();
             right.unregister();
-            zen.unregister();
         };
-    }, [keybindings, toggleBoth, toggleLeft, toggleRight]);
+    }, [keybindings, side, toggleBoth, toggleLeft, toggleRight]);
     const toggleLeftTooltip = (0, use_keybinding_1.areKeyboardShortcutsDisabled)()
         ? 'Toggle Left Sidebar'
         : `Toggle Left Sidebar (${ShortcutHint_1.cmdOrCtrlCharacter}+B)`;
@@ -129,13 +133,14 @@ const SidebarCollapserControls = () => {
         };
     }, []);
     const toggleLeftAction = (0, react_1.useCallback)((color) => {
-        return (jsx_runtime_1.jsx("div", { style: colorStyle(color), title: toggleLeftTooltip, children: jsx_runtime_1.jsx("div", { style: leftIcon(color) }) }));
+        return (jsx_runtime_1.jsx("div", { "data-sidebar-toggle": "left", style: colorStyle(color), title: toggleLeftTooltip, children: jsx_runtime_1.jsx("div", { style: leftIcon(color) }) }));
     }, [colorStyle, leftIcon, toggleLeftTooltip]);
     const toggleRightAction = (0, react_1.useCallback)((color) => {
-        return (jsx_runtime_1.jsx("div", { style: colorStyle(color), title: toggleRightTooltip, children: jsx_runtime_1.jsx("div", { style: rightIcon(color) }) }));
+        return (jsx_runtime_1.jsx("div", { "data-sidebar-toggle": "right", style: colorStyle(color), title: toggleRightTooltip, children: jsx_runtime_1.jsx("div", { style: rightIcon(color) }) }));
     }, [colorStyle, rightIcon, toggleRightTooltip]);
-    return (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
-            jsx_runtime_1.jsx(InlineAction_1.InlineAction, { onClick: toggleLeft, renderAction: toggleLeftAction }), jsx_runtime_1.jsx(InlineAction_1.InlineAction, { onClick: toggleRight, renderAction: toggleRightAction })
-        ] }));
+    if (side === 'left') {
+        return (jsx_runtime_1.jsx(InlineAction_1.InlineAction, { onClick: toggleLeft, renderAction: toggleLeftAction, unhoveredColor: colors_1.WHITE_ALPHA_80 }));
+    }
+    return (jsx_runtime_1.jsx(InlineAction_1.InlineAction, { onClick: toggleRight, renderAction: toggleRightAction, unhoveredColor: colors_1.WHITE_ALPHA_80 }));
 };
-exports.SidebarCollapserControls = SidebarCollapserControls;
+exports.SidebarCollapserControl = SidebarCollapserControl;

package/dist/components/SnappingToggle.d.ts

@@ -1,4 +1,2 @@
 import React from 'react';
-export declare const SnappingToggle: React.FC<{
-    readonly disabled: boolean;
-}>;
+export declare const SnappingToggle: React.FC;

package/dist/components/SnappingToggle.js

@@ -9,7 +9,7 @@ const use_keybinding_1 = require("../helpers/use-keybinding");
 const magnet_1 = require("../icons/magnet");
 const editor_snapping_1 = require("../state/editor-snapping");
 const ControlButton_1 = require("./ControlButton");
-const SnappingToggle = ({ disabled }) => {
+const SnappingToggle = () => {
     const { editorSnapping, setEditorSnapping } = (0, react_1.useContext)(editor_snapping_1.EditorSnappingContext);
     const onClick = (0, react_1.useCallback)(() => {
         setEditorSnapping((current) => !current);
@@ -21,6 +21,6 @@ const SnappingToggle = ({ disabled }) => {
     ]
         .filter(no_react_1.NoReactInternals.truthy)
         .join(' ');
-    return (jsx_runtime_1.jsx(ControlButton_1.ControlButton, { title: accessibilityLabel, "aria-label": accessibilityLabel, "aria-pressed": editorSnapping, "aria-keyshortcuts": "Shift+M", disabled: disabled, onClick: onClick, children: jsx_runtime_1.jsx(magnet_1.MagnetIcon, { style: { width: 17, height: 17 }, fill: color, "aria-hidden": "true", focusable: "false" }) }));
+    return (jsx_runtime_1.jsx(ControlButton_1.ControlButton, { title: accessibilityLabel, "aria-label": accessibilityLabel, "aria-pressed": editorSnapping, "aria-keyshortcuts": "Shift+M", onClick: onClick, children: jsx_runtime_1.jsx(magnet_1.MagnetIcon, { style: { width: 17, height: 17 }, fill: color, "aria-hidden": "true", focusable: "false" }) }));
 };
 exports.SnappingToggle = SnappingToggle;

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

@@ -1,6 +1,15 @@
 import React from 'react';
 import type { CanUpdateSequencePropStatusStatic } from 'remotion';
 import type { SchemaFieldInfo, TimelineFieldOnDragValueChange, TimelineFieldOnSave } from '../../helpers/timeline-layout';
+import { type InspectorInlineActionProps } from '../InspectorPanel/common';
+export type InspectorSourceAction = Omit<InspectorInlineActionProps, 'variant'>;
+type AssetSelectionContextValue = {
+    readonly initialQuery: string;
+    readonly getSourceAction: (src: string) => InspectorSourceAction | null;
+    readonly sourceAction: InspectorSourceAction | null;
+};
+export declare const AssetSelectionContext: React.Context<AssetSelectionContextValue>;
+export declare const toFileToken: (name: string) => string;
 type TimelineAssetFieldProps = {
     readonly field: SchemaFieldInfo;
     readonly propStatus: CanUpdateSequencePropStatusStatic;
@@ -9,6 +18,5 @@ type TimelineAssetFieldProps = {
     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

@@ -1,45 +1,46 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.TimelineAssetField = exports.isStaticFileAssetValue = void 0;
+exports.TimelineAssetField = exports.toFileToken = exports.AssetSelectionContext = 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 pen_1 = require("../../icons/pen");
+const modals_1 = require("../../state/modals");
+const InlineAction_1 = require("../InlineAction");
+const common_1 = require("../InspectorPanel/common");
+const penIcon = {
+    display: 'block',
+    height: 14,
+    width: 14,
 };
+exports.AssetSelectionContext = (0, react_1.createContext)({
+    getSourceAction: () => null,
+    initialQuery: '',
+    sourceAction: null,
+});
 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) => {
+exports.toFileToken = toFileToken;
+const TimelineAssetField = ({ field, effectiveValue, propStatus, onSave, onDragValueChange, onDragEnd, }) => {
+    if (field.fieldSchema.type !== 'asset') {
+        throw new Error('TimelineAssetField rendered for non-asset field');
+    }
+    const { setSelectedModal } = (0, react_1.useContext)(modals_1.ModalsContext);
+    const { getSourceAction, initialQuery, sourceAction } = (0, react_1.useContext)(exports.AssetSelectionContext);
+    const inlineSourceAction = (0, react_1.useMemo)(() => {
+        if (field.key !== 'src') {
+            return null;
+        }
+        return typeof effectiveValue === 'string'
+            ? getSourceAction(effectiveValue)
+            : sourceAction;
+    }, [effectiveValue, field.key, getSourceAction, sourceAction]);
+    const onSelect = (0, react_1.useCallback)((assetName, previewValue) => {
+        const sourceValue = (0, exports.toFileToken)(assetName);
         if (sourceValue === propStatus.codeValue) {
             return;
         }
@@ -48,78 +49,29 @@ const TimelineStaticFileAssetField = ({ propStatus, effectiveValue, onSave, onDr
             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,
-            };
+    const openAssetSelection = (0, react_1.useCallback)(() => {
+        setSelectedModal({
+            type: 'quick-switcher',
+            mode: 'assets',
+            invocationTimestamp: Date.now(),
+            assetSelection: {
+                initialQuery,
+                onSelected: (asset) => onSelect(asset.name, asset.src),
+            },
         });
-        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,
+    }, [initialQuery, onSelect, setSelectedModal]);
+    const action = (jsx_runtime_1.jsx(InlineAction_1.InlineAction, { onClick: openAssetSelection, disabled: window.remotion_isReadOnlyStudio, title: "Change source", renderAction: (color) => jsx_runtime_1.jsx(pen_1.PenIcon, { color: color, style: penIcon }) }));
+    if (inlineSourceAction === null) {
+        return action;
+    }
+    return (jsx_runtime_1.jsx(common_1.InspectorInlineAction, { ...inlineSourceAction, size: "compact", variant: {
+            type: 'segmented',
+            trailing: {
                 disabled: window.remotion_isReadOnlyStudio,
+                onClick: openAssetSelection,
+                renderIcon: (color) => jsx_runtime_1.jsx(pen_1.PenIcon, { color: color, style: penIcon }),
+                title: 'Change source',
             },
-        ];
-    }, [current, onSelect, staticFiles, upload]);
-    return (jsx_runtime_1.jsx(ComboBox_1.Combobox, { size: "small", 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.d.ts

@@ -14,16 +14,19 @@ export type PasteEffectsTarget = {
 } | {
     readonly type: 'unsupported';
 };
-export type PasteEffectPropTarget = {
-    readonly type: 'valid';
+type PasteEffectPropEditTarget = {
     readonly fileName: string;
     readonly nodePath: SequencePropsSubscriptionKey;
     readonly effectIndex: number;
     readonly fieldKey: string;
     readonly defaultValue: string | null;
     readonly schema: InteractivitySchema;
+};
+export type PasteEffectPropTarget = {
+    readonly type: 'valid';
+    readonly targets: PasteEffectPropEditTarget[];
 } | {
-    readonly type: 'none' | 'multiple' | 'unsupported' | 'effect-type-mismatch' | 'prop-mismatch' | 'uncopyable';
+    readonly type: 'none' | 'unsupported' | 'effect-type-mismatch' | 'prop-mismatch' | 'uncopyable';
 };
 export declare const getPasteEffectsTarget: (selectedItems: readonly TimelineSelection[]) => PasteEffectsTarget;
 export declare const getSnapshotsFromSelection: ({ selection, propStatuses, }: {
@@ -72,3 +75,4 @@ export declare const getPasteEffectPropTarget: ({ selectedItems, payload, propSt
     readonly overrideIdsToNodePaths: OverrideIdToNodePaths;
 }) => PasteEffectPropTarget;
 export declare const TimelineClipboardKeybindings: React.FC;
+export {};

package/dist/components/Timeline/TimelineClipboardKeybindings.js

@@ -285,18 +285,8 @@ const getEasingClipboardDataFromSelection = ({ selection, sequences, overrideIds
     };
 };
 exports.getEasingClipboardDataFromSelection = getEasingClipboardDataFromSelection;
-const getPasteEffectPropTarget = ({ selectedItems, payload, propStatuses, sequences, overrideIdsToNodePaths, }) => {
+const getPasteEffectPropTargetForSelection = ({ selection, payload, propStatuses, sequences, overrideIdsToNodePaths, }) => {
     var _a;
-    if (selectedItems.length === 0) {
-        return { type: 'none' };
-    }
-    if (selectedItems.length !== 1) {
-        return { type: 'multiple' };
-    }
-    const [selection] = selectedItems;
-    if (!selection) {
-        return { type: 'none' };
-    }
     if (selection.type !== 'sequence-effect-prop' &&
         selection.type !== 'sequence-effect') {
         return { type: 'none' };
@@ -348,12 +338,42 @@ const getPasteEffectPropTarget = ({ selectedItems, payload, propStatuses, sequen
     }
     return {
         type: 'valid',
-        fileName: selection.nodePathInfo.sequenceSubscriptionKey.absolutePath,
-        nodePath: selection.nodePathInfo.sequenceSubscriptionKey,
-        effectIndex: target.effectIndex,
-        fieldKey: target.fieldKey,
-        defaultValue: getDefaultValue(fieldSchema),
-        schema: effect.schema,
+        target: {
+            fileName: selection.nodePathInfo.sequenceSubscriptionKey.absolutePath,
+            nodePath: selection.nodePathInfo.sequenceSubscriptionKey,
+            effectIndex: target.effectIndex,
+            fieldKey: target.fieldKey,
+            defaultValue: getDefaultValue(fieldSchema),
+            schema: effect.schema,
+        },
+    };
+};
+const getPasteEffectPropTarget = ({ selectedItems, payload, propStatuses, sequences, overrideIdsToNodePaths, }) => {
+    if (selectedItems.length === 0) {
+        return { type: 'none' };
+    }
+    const targets = [];
+    for (const selection of selectedItems) {
+        const result = getPasteEffectPropTargetForSelection({
+            selection,
+            payload,
+            propStatuses,
+            sequences,
+            overrideIdsToNodePaths,
+        });
+        if (result.type !== 'valid') {
+            return result;
+        }
+        targets.push(result.target);
+    }
+    return {
+        type: 'valid',
+        targets: [
+            ...new Map(targets.map((target) => [
+                `${makeTargetKey(target.nodePath)}:${target.effectIndex}:${target.fieldKey}`,
+                target,
+            ])).values(),
+        ],
     };
 };
 exports.getPasteEffectPropTarget = getPasteEffectPropTarget;
@@ -730,11 +750,8 @@ const TimelineClipboardKeybindings = () => {
                     });
                     if (effectPropTarget.type !== 'valid') {
                         switch (effectPropTarget.type) {
-                            case 'multiple':
-                                (0, NotificationCenter_1.showNotification)('Select one target effect prop or effect to paste onto', 3000);
-                                return;
                             case 'none':
-                                (0, NotificationCenter_1.showNotification)('Select a matching effect prop or effect to paste onto', 3000);
+                                (0, NotificationCenter_1.showNotification)('Select matching effect props or effects to paste onto', 3000);
                                 return;
                             case 'unsupported':
                                 (0, NotificationCenter_1.showNotification)('This sequence does not support effects', 3000);
@@ -752,26 +769,36 @@ const TimelineClipboardKeybindings = () => {
                                 throw new Error(`Unexpected paste target: ${effectPropTarget}`);
                         }
                     }
-                    return (0, save_effect_prop_1.saveEffectProp)({
-                        fileName: effectPropTarget.fileName,
-                        nodePath: effectPropTarget.nodePath,
-                        effectIndex: effectPropTarget.effectIndex,
-                        fieldKey: effectPropTarget.fieldKey,
-                        ...(effectPropResult.data.param.type === 'static'
-                            ? {
-                                type: 'value',
-                                value: effectPropResult.data.param.value,
-                            }
-                            : {
-                                type: 'effect-param',
-                                effectParam: effectPropResult.data.param,
-                            }),
-                        defaultValue: effectPropTarget.defaultValue,
-                        schema: effectPropTarget.schema,
+                    return (0, save_effect_prop_1.saveMultipleEffectProps)({
+                        changes: effectPropTarget.targets.map((pasteTarget) => ({
+                            fileName: pasteTarget.fileName,
+                            nodePath: pasteTarget.nodePath,
+                            effectIndex: pasteTarget.effectIndex,
+                            fieldKey: pasteTarget.fieldKey,
+                            ...(effectPropResult.data.param.type === 'static'
+                                ? {
+                                    type: 'value',
+                                    value: effectPropResult.data.param.value,
+                                }
+                                : {
+                                    type: 'effect-param',
+                                    effectParam: effectPropResult.data.param,
+                                }),
+                            defaultValue: pasteTarget.defaultValue,
+                            schema: pasteTarget.schema,
+                        })),
                         setPropStatuses,
                         clientId,
+                        undoLabel: effectPropTarget.targets.length > 1
+                            ? 'Paste effect prop onto selected effects'
+                            : 'Paste effect prop',
+                        redoLabel: effectPropTarget.targets.length > 1
+                            ? 'Reapply effect prop paste onto selected effects'
+                            : 'Reapply effect prop paste',
                     }).then(() => {
-                        (0, NotificationCenter_1.showNotification)('Pasted effect prop', 2000);
+                        (0, NotificationCenter_1.showNotification)(effectPropTarget.targets.length > 1
+                            ? 'Pasted effect prop onto selected effects'
+                            : 'Pasted effect prop', 2000);
                     });
                 }
                 const result = envelope === null

package/dist/components/Timeline/TimelineColorField.js

@@ -12,8 +12,22 @@ const containerStyle = {
 };
 const SWATCH_WIDTH = 20;
 const SWATCH_HEIGHT = 15;
+const DEFAULT_SET_COLOR = '#808080';
+const noneLabelStyle = {
+    color: colors_1.LIGHT_TEXT,
+    fontSize: 12,
+};
+const setButtonStyle = {
+    background: 'none',
+    border: 'none',
+    color: colors_1.BLUE,
+    cursor: 'pointer',
+    fontSize: 12,
+    margin: 0,
+    padding: 0,
+};
 const TimelineColorField = ({ field, effectiveValue, propStatus, onSave, onDragValueChange, onDragEnd, }) => {
-    var _a;
+    var _a, _b;
     const currentValue = typeof effectiveValue === 'string'
         ? effectiveValue
         : field.fieldSchema.type === 'color'
@@ -33,6 +47,11 @@ const TimelineColorField = ({ field, effectiveValue, propStatus, onSave, onDragV
             marginLeft: 5,
         };
     }, []);
+    if (currentValue === 'none') {
+        return (jsx_runtime_1.jsxs("span", { style: containerStyle, children: [
+                jsx_runtime_1.jsx("span", { style: noneLabelStyle, children: "None" }), jsx_runtime_1.jsx("button", { type: "button", style: setButtonStyle, title: `Set ${(_b = field.description) !== null && _b !== void 0 ? _b : field.key} to gray`, onClick: () => onChangeComplete(DEFAULT_SET_COLOR), children: "Set" })
+            ] }));
+    }
     return (jsx_runtime_1.jsx("span", { style: containerStyle, children: jsx_runtime_1.jsx(ColorPicker_1.ColorPicker, { value: currentValue, status: "ok", onChange: onChange, onChangeComplete: onChangeComplete, width: SWATCH_WIDTH, height: SWATCH_HEIGHT, disabled: false, name: field.key, title: currentValue, style: swatchStyle }) }));
 };
 exports.TimelineColorField = TimelineColorField;

package/dist/components/Timeline/TimelineEffectPropItem.js

@@ -6,10 +6,10 @@ const studio_shared_1 = require("@remotion/studio-shared");
 const react_1 = require("react");
 const remotion_1 = require("remotion");
 const client_id_1 = require("../../helpers/client-id");
+const open_in_editor_1 = require("../../helpers/open-in-editor");
 const call_api_1 = require("../call-api");
 const ContextMenu_1 = require("../ContextMenu");
 const call_add_keyframe_1 = require("./call-add-keyframe");
-const get_animation_item_selection_for_frame_1 = require("./get-animation-item-selection-for-frame");
 const get_timeline_keyframes_1 = require("./get-timeline-keyframes");
 const save_effect_prop_1 = require("./save-effect-prop");
 const save_prop_queue_1 = require("./save-prop-queue");
@@ -21,7 +21,6 @@ const TimelineLayerEye_1 = require("./TimelineLayerEye");
 const TimelineRowChrome_1 = require("./TimelineRowChrome");
 const TimelineSchemaField_1 = require("./TimelineSchemaField");
 const TimelineSelection_1 = require("./TimelineSelection");
-const update_selected_easing_1 = require("./update-selected-easing");
 const fieldRowBase = {};
 const isKeyframedStatus = (status) => {
     return status.status === 'keyframed';
@@ -218,9 +217,6 @@ const TimelineEffectPropItem = ({ field, validatedLocation, rowDepth, nodePath,
     const { propStatuses } = (0, react_1.useContext)(remotion_1.Internals.VisualModePropStatusesContext);
     const { getEffectDragOverrides } = (0, react_1.useContext)(remotion_1.Internals.VisualModeDragOverridesContext);
     const selection = (0, TimelineSelection_1.useTimelineRowSelection)(nodePathInfo);
-    const { selectItems } = (0, TimelineSelection_1.useTimelineSelection)();
-    const setFrame = remotion_1.Internals.useTimelineSetFrame();
-    const videoConfig = (0, remotion_1.useVideoConfig)();
     const timelinePosition = remotion_1.Internals.Timeline.useTimelinePosition();
     const sourceFrame = timelinePosition - keyframeDisplayOffset;
     const style = (0, react_1.useMemo)(() => {
@@ -314,82 +310,17 @@ const TimelineEffectPropItem = ({ field, validatedLocation, rowDepth, nodePath,
             },
         ];
     }, [canShowReset, onReset]);
-    const seekToDisplayFrame = (0, react_1.useCallback)((frame) => {
-        setFrame((current) => {
-            const next = { ...current, [videoConfig.id]: frame };
-            remotion_1.Internals.persistCurrentFrame(next);
-            return next;
-        });
-    }, [setFrame, videoConfig.id]);
     const onPropertyDoubleClick = (0, react_1.useCallback)((event) => {
-        if (propStatus === null || propStatus.status === 'computed') {
-            return;
-        }
-        const keyframeSelection = {
-            type: 'keyframe',
-            nodePathInfo,
-            frame: sourceFrame + keyframeDisplayOffset,
-        };
-        if (propStatus.status === 'static') {
-            if (!keyframable || previewServerState.type !== 'connected') {
-                return;
-            }
-            const value = remotion_1.Internals.getEffectiveVisualModeValue({
-                propStatus,
-                dragOverrideValue,
-                frame: sourceFrame,
-                defaultValue: field.fieldSchema.default,
-                shouldResortToDefaultValueIfUndefined: true,
-            });
-            event.stopPropagation();
-            (0, call_add_keyframe_1.callAddEffectKeyframe)({
-                fileName: validatedLocation.source,
-                nodePath,
-                effectIndex: field.effectIndex,
-                fieldKey: field.key,
-                sourceFrame,
-                value,
-                schema: field.effectSchema,
-                setPropStatuses,
-                clientId: previewServerState.clientId,
-            }).catch(() => undefined);
-            selectItems([keyframeSelection], { reveal: true });
-            seekToDisplayFrame(keyframeSelection.frame);
-            return;
-        }
-        const targetSelection = (0, get_animation_item_selection_for_frame_1.getAnimationItemSelectionForSourceFrame)({
-            includeEasings: (0, update_selected_easing_1.canEditEasingForInterpolationFunction)(propStatus.interpolationFunction),
-            keyframeDisplayOffset,
-            keyframes: propStatus.keyframes,
-            nodePathInfo,
-            sourceFrame,
-        });
-        if (targetSelection === null) {
+        if (!window.remotion_editorName ||
+            previewServerState.type !== 'connected') {
             return;
         }
         event.stopPropagation();
-        selectItems([targetSelection], { reveal: true });
-        if (targetSelection.type === 'keyframe') {
-            seekToDisplayFrame(targetSelection.frame);
-        }
-    }, [
-        dragOverrideValue,
-        field.effectIndex,
-        field.effectSchema,
-        field.fieldSchema.default,
-        field.key,
-        keyframeDisplayOffset,
-        keyframable,
-        nodePath,
-        nodePathInfo,
-        previewServerState,
-        propStatus,
-        seekToDisplayFrame,
-        selectItems,
-        setPropStatuses,
-        sourceFrame,
-        validatedLocation.source,
-    ]);
+        (0, open_in_editor_1.openOriginalPositionInEditorAtProperty)({
+            originalPosition: validatedLocation,
+            property: field.key,
+        }).catch(() => undefined);
+    }, [field.key, previewServerState.type, validatedLocation]);
     const row = (jsx_runtime_1.jsx(TimelineRowChrome_1.TimelineRowChrome, { depth: rowDepth, eye: jsx_runtime_1.jsx(TimelineLayerEye_1.TimelineLayerEyeSpacer, {}), keyframeControls: keyframeControls, arrow: jsx_runtime_1.jsx(TimelineExpandArrowButton_1.TimelineExpandArrowSpacer, {}), style: style, selected: selection.selected, selectable: selection.selectable, selectionItem: selection.selectionItem, onSelect: selection.onSelect, onDoubleClick: onPropertyDoubleClick, showSelectedBackground: true, containsSelection: false, outerHeight: null, children: jsx_runtime_1.jsx(TimelineFieldRowContent_1.TimelineFieldRowContent, { field: field, rowDepth: rowDepth, selected: selection.selected, children: jsx_runtime_1.jsx(exports.TimelineEffectPropValue, { field: field, nodePath: nodePath, validatedLocation: validatedLocation, sourceFrame: sourceFrame }) }) }));
     return (jsx_runtime_1.jsx(ContextMenu_1.ContextMenu, { values: contextMenuValues, onOpen: selection.selectable ? selection.onSelect : null, children: row }));
 };