@remotion/studio 4.0.487 → 4.0.489

package/dist/components/Timeline/TimelineSequenceItem.js

@@ -40,6 +40,8 @@ const remotion_1 = require("remotion");
 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 interactivity_enabled_1 = require("../../helpers/interactivity-enabled");
+const studio_runtime_config_1 = require("../../helpers/studio-runtime-config");
 const timeline_layout_1 = require("../../helpers/timeline-layout");
 const use_keybinding_1 = require("../../helpers/use-keybinding");
 const modals_1 = require("../../state/modals");
@@ -158,6 +160,7 @@ const TimelineSequenceItem = ({ nestedDepth, sequence, nodePathInfo, keyframeDis
     const nodePath = (_d = nodePathInfo === null || nodePathInfo === void 0 ? void 0 : nodePathInfo.sequenceSubscriptionKey) !== null && _d !== void 0 ? _d : null;
     const { previewServerState } = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx);
     const previewConnected = previewServerState.type === 'connected';
+    const previewInteractive = previewConnected && interactivity_enabled_1.studioInteractivityEnabled;
     const { getIsExpanded } = (0, react_1.useContext)(ExpandedTracksProvider_1.ExpandedTracksGetterContext);
     const { toggleTrack } = (0, react_1.useContext)(ExpandedTracksProvider_1.ExpandedTracksSetterContext);
     const { setPropStatuses } = (0, react_1.useContext)(remotion_1.Internals.VisualModeSettersContext);
@@ -191,7 +194,7 @@ const TimelineSequenceItem = ({ nestedDepth, sequence, nodePathInfo, keyframeDis
         };
     }, [originalLocation]);
     const { canRename: canRenameThisSequence, displayName, fallbackDisplayName, propStatusesForOverride, saveName, } = (0, use_rename_sequence_1.useRenameSequence)({
-        clientId: previewServerState.type === 'connected'
+        clientId: previewInteractive && previewServerState.type === 'connected'
             ? previewServerState.clientId
             : null,
         nodePathInfo,
@@ -201,25 +204,25 @@ const TimelineSequenceItem = ({ nestedDepth, sequence, nodePathInfo, keyframeDis
     const canDeleteFromSource = Boolean(nodePath && (validatedLocation === null || validatedLocation === void 0 ? void 0 : validatedLocation.source));
     const nodePathKey = (0, react_1.useMemo)(() => nodePath ? remotion_1.Internals.makeSequencePropsSubscriptionKey(nodePath) : null, [nodePath]);
     const parentId = (_e = sequence.parent) !== null && _e !== void 0 ? _e : null;
-    const canReorderSequence = previewConnected &&
+    const canReorderSequence = previewInteractive &&
         Boolean(nodePath && nodePathKey && (validatedLocation === null || validatedLocation === void 0 ? void 0 : validatedLocation.source)) &&
         (nodePathInfo === null || nodePathInfo === void 0 ? void 0 : nodePathInfo.numberOfSequencesWithThisNodePath) === 1;
-    const canHandleSequenceDrag = previewConnected;
+    const canHandleSequenceDrag = previewInteractive;
     const confirm = (0, ConfirmationDialog_1.useConfirmationDialog)();
-    const deleteDisabled = (0, react_1.useMemo)(() => !previewConnected || !sequence.controls || !canDeleteFromSource, [previewConnected, sequence.controls, canDeleteFromSource]);
+    const deleteDisabled = (0, react_1.useMemo)(() => !previewInteractive || !sequence.controls || !canDeleteFromSource, [previewInteractive, sequence.controls, canDeleteFromSource]);
     const duplicateDisabled = deleteDisabled;
-    const disableInteractivityDisabled = !previewConnected ||
+    const disableInteractivityDisabled = !previewInteractive ||
         !sequence.showInTimeline ||
         !nodePath ||
         !(validatedLocation === null || validatedLocation === void 0 ? void 0 : validatedLocation.source);
     const onDuplicateSequenceFromSource = (0, react_1.useCallback)(() => {
-        if (!(validatedLocation === null || validatedLocation === void 0 ? void 0 : validatedLocation.source) || !nodePathInfo) {
+        if (duplicateDisabled || !(validatedLocation === null || validatedLocation === void 0 ? void 0 : validatedLocation.source) || !nodePathInfo) {
             return;
         }
         (0, duplicate_selected_timeline_item_1.duplicateSequencesFromSource)([nodePathInfo], confirm).catch(() => undefined);
-    }, [confirm, nodePathInfo, validatedLocation === null || validatedLocation === void 0 ? void 0 : validatedLocation.source]);
+    }, [confirm, duplicateDisabled, nodePathInfo, validatedLocation === null || validatedLocation === void 0 ? void 0 : validatedLocation.source]);
     const onDeleteSequenceFromSource = (0, react_1.useCallback)(async () => {
-        if (!(validatedLocation === null || validatedLocation === void 0 ? void 0 : validatedLocation.source) || !nodePath) {
+        if (deleteDisabled || !(validatedLocation === null || validatedLocation === void 0 ? void 0 : validatedLocation.source) || !nodePath) {
             return;
         }
         if (nodePathInfo && nodePathInfo.numberOfSequencesWithThisNodePath > 1) {
@@ -253,7 +256,13 @@ const TimelineSequenceItem = ({ nestedDepth, sequence, nodePathInfo, keyframeDis
         catch (err) {
             (0, NotificationCenter_1.showNotification)(err.message, 4000);
         }
-    }, [confirm, nodePath, validatedLocation === null || validatedLocation === void 0 ? void 0 : validatedLocation.source, nodePathInfo]);
+    }, [
+        confirm,
+        deleteDisabled,
+        nodePath,
+        validatedLocation === null || validatedLocation === void 0 ? void 0 : validatedLocation.source,
+        nodePathInfo,
+    ]);
     const onDisableSequenceInteractivity = (0, react_1.useCallback)(() => {
         if (disableInteractivityDisabled ||
             !nodePath ||
@@ -517,8 +526,9 @@ const TimelineSequenceItem = ({ nestedDepth, sequence, nodePathInfo, keyframeDis
             }
             : inner;
     }, [effectDropHovered, inner]);
-    const hasExpandableContent = Boolean(sequence.controls) || sequence.effects.length > 0;
-    const canToggleVisibility = previewConnected &&
+    const hasExpandableContent = interactivity_enabled_1.studioInteractivityEnabled &&
+        (Boolean(sequence.controls) || sequence.effects.length > 0);
+    const canToggleVisibility = previewInteractive &&
         Boolean(sequence.controls) &&
         nodePath !== null &&
         validatedLocation !== null &&
@@ -549,7 +559,7 @@ const TimelineSequenceItem = ({ nestedDepth, sequence, nodePathInfo, keyframeDis
         await saveName(name);
     }, [saveName]);
     react_1.default.useEffect(() => {
-        if (!canRenameSelectedSequence || !process.env.KEYBOARD_SHORTCUTS_ENABLED) {
+        if (!canRenameSelectedSequence || !(0, studio_runtime_config_1.getStudioKeyboardShortcutsEnabled)()) {
             setIsRenaming(false);
             return;
         }
@@ -583,7 +593,7 @@ const TimelineSequenceItem = ({ nestedDepth, sequence, nodePathInfo, keyframeDis
         setIsRenaming(true);
     }, [canRenameThisSequence]);
     const freezeFrameMenuItem = (0, use_sequence_freeze_frame_menu_item_1.useSequenceFreezeFrameMenuItem)({
-        clientId: previewServerState.type === 'connected'
+        clientId: previewInteractive && previewServerState.type === 'connected'
             ? previewServerState.clientId
             : null,
         nodePath,
@@ -595,7 +605,7 @@ const TimelineSequenceItem = ({ nestedDepth, sequence, nodePathInfo, keyframeDis
         validatedSource: (_f = validatedLocation === null || validatedLocation === void 0 ? void 0 : validatedLocation.source) !== null && _f !== void 0 ? _f : null,
     });
     const canAddEffect = (nodePathInfo === null || nodePathInfo === void 0 ? void 0 : nodePathInfo.supportsEffects) === true &&
-        previewServerState.type === 'connected' &&
+        previewInteractive &&
         Boolean(validatedLocation === null || validatedLocation === void 0 ? void 0 : validatedLocation.source);
     const onAddEffect = (0, react_1.useCallback)(() => {
         if (!canAddEffect ||
@@ -628,7 +638,7 @@ const TimelineSequenceItem = ({ nestedDepth, sequence, nodePathInfo, keyframeDis
             disableInteractivityDisabled,
             duplicateDisabled,
             fileLocation,
-            includeSourceEditItems: true,
+            includeSourceEditItems: interactivity_enabled_1.studioInteractivityEnabled,
             onDeleteSequenceFromSource,
             onDisableSequenceInteractivity,
             onDuplicateSequenceFromSource,
@@ -636,43 +646,45 @@ const TimelineSequenceItem = ({ nestedDepth, sequence, nodePathInfo, keyframeDis
             originalLocation,
             selectAsset,
             sequence,
-            sourceActions: [
-                ...((nodePathInfo === null || nodePathInfo === void 0 ? void 0 : nodePathInfo.supportsEffects)
-                    ? [
-                        {
-                            type: 'item',
-                            id: 'add-effect',
-                            keyHint: null,
-                            label: 'Add effect...',
-                            leftItem: null,
-                            disabled: !canAddEffect,
-                            onClick: onAddEffect,
-                            quickSwitcherLabel: null,
-                            subMenu: null,
-                            value: 'add-effect',
-                        },
-                        {
-                            type: 'divider',
-                            id: 'add-effect-divider',
+            sourceActions: interactivity_enabled_1.studioInteractivityEnabled
+                ? [
+                    ...((nodePathInfo === null || nodePathInfo === void 0 ? void 0 : nodePathInfo.supportsEffects)
+                        ? [
+                            {
+                                type: 'item',
+                                id: 'add-effect',
+                                keyHint: null,
+                                label: 'Add effect...',
+                                leftItem: null,
+                                disabled: !canAddEffect,
+                                onClick: onAddEffect,
+                                quickSwitcherLabel: null,
+                                subMenu: null,
+                                value: 'add-effect',
+                            },
+                            {
+                                type: 'divider',
+                                id: 'add-effect-divider',
+                            },
+                        ]
+                        : []),
+                    {
+                        type: 'item',
+                        id: 'rename-sequence',
+                        keyHint: null,
+                        label: 'Rename...',
+                        leftItem: null,
+                        disabled: !canRenameThisSequence,
+                        onClick: () => {
+                            onRenameSequence();
                         },
-                    ]
-                    : []),
-                {
-                    type: 'item',
-                    id: 'rename-sequence',
-                    keyHint: null,
-                    label: 'Rename...',
-                    leftItem: null,
-                    disabled: !canRenameThisSequence,
-                    onClick: () => {
-                        onRenameSequence();
+                        quickSwitcherLabel: null,
+                        subMenu: null,
+                        value: 'rename-sequence',
                     },
-                    quickSwitcherLabel: null,
-                    subMenu: null,
-                    value: 'rename-sequence',
-                },
-                ...(freezeFrameMenuItem ? [freezeFrameMenuItem] : []),
-            ],
+                    ...(freezeFrameMenuItem ? [freezeFrameMenuItem] : []),
+                ]
+                : [],
         });
     }, [
         assetLinkInfo,
@@ -696,7 +708,7 @@ const TimelineSequenceItem = ({ nestedDepth, sequence, nodePathInfo, keyframeDis
         selectAsset,
         sequence,
     ]);
-    const canDropEffect = previewServerState.type === 'connected' &&
+    const canDropEffect = previewInteractive &&
         nodePath !== null &&
         validatedLocation !== null &&
         ((_c = sequence.controls) === null || _c === void 0 ? void 0 : _c.supportsEffects) === true;
@@ -754,7 +766,7 @@ const TimelineSequenceItem = ({ nestedDepth, sequence, nodePathInfo, keyframeDis
             clientId: previewServerState.clientId,
         });
     }, [canDropEffect, nodePath, previewServerState, validatedLocation]);
-    const trackRow = (jsx_runtime_1.jsx(TimelineRowChrome_1.TimelineRowChrome, { depth: nestedDepth, eye: canToggleVisibility ? (jsx_runtime_1.jsx(TimelineLayerEye_1.TimelineLayerEye, { type: sequence.type === 'audio' ? 'speaker' : 'eye', hidden: isItemHidden, onInvoked: onToggleVisibility })) : (jsx_runtime_1.jsx(TimelineLayerEye_1.TimelineLayerEyeSpacer, {})), arrow: hasExpandableContent && nodePathInfo !== null ? (jsx_runtime_1.jsx(TimelineSequenceExpandArrow, { disabled: !previewConnected, isExpanded: isExpanded, nodePathInfo: nodePathInfo, onToggleExpand: onToggleExpand, sequence: sequence })) : (jsx_runtime_1.jsx(TimelineExpandArrowButton_1.TimelineExpandArrowSpacer, {})), style: rowStyle, selected: selected, selectable: selectable, selectionItem: selectionItem, onSelect: onSelect, showSelectedBackground: true, containsSelection: containsSelection, outerHeight: outerHeight, onDragLeave: canDropEffect ? onEffectDragLeave : undefined, onDragOver: canDropEffect ? onEffectDragOver : undefined, onDrop: canDropEffect ? onEffectDrop : undefined, onDoubleClick: canRenameThisSequence || canOpenInEditor
+    const trackRow = (jsx_runtime_1.jsx(TimelineRowChrome_1.TimelineRowChrome, { depth: nestedDepth, eye: canToggleVisibility ? (jsx_runtime_1.jsx(TimelineLayerEye_1.TimelineLayerEye, { type: sequence.type === 'audio' ? 'speaker' : 'eye', hidden: isItemHidden, onInvoked: onToggleVisibility })) : (jsx_runtime_1.jsx(TimelineLayerEye_1.TimelineLayerEyeSpacer, {})), arrow: hasExpandableContent && nodePathInfo !== null ? (jsx_runtime_1.jsx(TimelineSequenceExpandArrow, { disabled: !previewInteractive, isExpanded: isExpanded, nodePathInfo: nodePathInfo, onToggleExpand: onToggleExpand, sequence: sequence })) : (jsx_runtime_1.jsx(TimelineExpandArrowButton_1.TimelineExpandArrowSpacer, {})), style: rowStyle, selected: selected, selectable: selectable, selectionItem: selectionItem, onSelect: onSelect, showSelectedBackground: true, containsSelection: containsSelection, outerHeight: outerHeight, onDragLeave: canDropEffect ? onEffectDragLeave : undefined, onDragOver: canDropEffect ? onEffectDragOver : undefined, onDrop: canDropEffect ? onEffectDrop : undefined, onDoubleClick: canRenameThisSequence || canOpenInEditor
             ? onSequenceDoubleClick
             : undefined, children: jsx_runtime_1.jsxs("div", { style: labelContainerStyle, children: [
                 jsx_runtime_1.jsx(TimelineSequenceName_1.TimelineSequenceName, { displayName: displayName, fallbackDisplayName: fallbackDisplayName, selected: selected, containsSelection: containsSelection, editing: isRenaming, onCancelEditing: onCancelRenaming, onSaveName: onSaveName }), mediaSrc ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
@@ -764,6 +776,7 @@ const TimelineSequenceItem = ({ nestedDepth, sequence, nodePathInfo, keyframeDis
                     ] })) : null] }) }));
     const draggableTrackRow = canHandleSequenceDrag ? (jsx_runtime_1.jsxs("div", { draggable: canReorderSequence, onDragStart: onSequenceDragStart, onDragEnd: onSequenceDragEnd, onDragOver: onSequenceDragOver, onDragLeave: onSequenceDragLeave, onDrop: onSequenceDrop, style: sequenceReorderWrapper, children: [sequenceReorderLineStyle ? (jsx_runtime_1.jsx("div", { style: sequenceReorderLineStyle })) : null, sequenceDropRejection ? (jsx_runtime_1.jsx("div", { style: sequenceReorderRejectionStyle, children: sequenceDropRejection })) : null, trackRow] })) : (trackRow);
     return (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [previewConnected ? (jsx_runtime_1.jsx(ContextMenu_1.ContextMenu, { values: contextMenuValues, onOpen: selectable ? onSelect : null, children: draggableTrackRow })) : (draggableTrackRow), previewConnected &&
+                interactivity_enabled_1.studioInteractivityEnabled &&
                 isExpanded &&
                 hasExpandableContent &&
                 nodePathInfo &&