@remotion/studio 4.0.504 → 4.0.506

package/dist/components/SelectedOutlineOverlay.js

@@ -41,7 +41,9 @@ const remotion_1 = require("remotion");
 const no_react_1 = require("remotion/no-react");
 const client_id_1 = require("../helpers/client-id");
 const interactivity_enabled_1 = require("../helpers/interactivity-enabled");
+const use_is_fullscreen_1 = require("../helpers/use-is-fullscreen");
 const use_keybinding_1 = require("../helpers/use-keybinding");
+const use_runtime_values_1 = require("../helpers/use-runtime-values");
 const editor_guides_1 = require("../state/editor-guides");
 const editor_outlines_1 = require("../state/editor-outlines");
 const scale_lock_1 = require("../state/scale-lock");
@@ -98,7 +100,7 @@ Object.defineProperty(exports, "getSequencesWithSelectableOutlines", { enumerabl
 Object.defineProperty(exports, "getTransformedSvgViewportPoints", { enumerable: true, get: function () { return selected_outline_measurement_2.getTransformedSvgViewportPoints; } });
 const selected_outline_types_2 = require("./selected-outline-types");
 Object.defineProperty(exports, "selectedOutlineDragThresholdPx", { enumerable: true, get: function () { return selected_outline_types_2.selectedOutlineDragThresholdPx; } });
-const getEffectiveCropValue = ({ activeSchema, controls, dragOverrides, fieldKey, frame, propStatuses, }) => {
+const getEffectiveCropValue = ({ activeSchema, dragOverrides, fieldKey, frame, propStatuses, runtimeValues, }) => {
     var _a;
     const fieldSchema = activeSchema === null || activeSchema === void 0 ? void 0 : activeSchema[fieldKey];
     if ((fieldSchema === null || fieldSchema === void 0 ? void 0 : fieldSchema.type) !== 'number') {
@@ -113,7 +115,7 @@ const getEffectiveCropValue = ({ activeSchema, controls, dragOverrides, fieldKey
             frame,
             shouldResortToDefaultValueIfUndefined: true,
         })
-        : ((_a = controls === null || controls === void 0 ? void 0 : controls.currentRuntimeValueDotNotation[fieldKey]) !== null && _a !== void 0 ? _a : fieldSchema.default);
+        : ((_a = runtimeValues[fieldKey]) !== null && _a !== void 0 ? _a : fieldSchema.default);
     return typeof value === 'number' && Number.isFinite(value) ? value : 0;
 };
 const getCropDragFields = ({ activeSchema, cropValues, propStatuses, }) => {
@@ -422,7 +424,8 @@ const SelectedOutlineOverlay = ({ compositionHeight, compositionWidth, scale, tr
     const { editorShowOutlines } = (0, react_1.useContext)(editor_outlines_1.EditorShowOutlinesContext);
     const { hoveredSequence, setHoveredSequence } = (0, react_1.useContext)(timeline_sequence_hover_1.TimelineSequenceHoverContext);
     const { editorShowGuides, guidesList } = (0, react_1.useContext)(editor_guides_1.EditorShowGuidesContext);
-    const { frameBack, frameForward, getCurrentFrame, seek } = player_1.PlayerInternals.usePlayer();
+    const isFullscreen = (0, use_is_fullscreen_1.useIsFullscreen)();
+    const { frameBack, frameForward, getCurrentFrame, seek } = player_1.PlayerInternals.usePlayerMethods();
     const keybindings = (0, use_keybinding_1.useKeybinding)();
     const timelinePosition = remotion_1.Internals.Timeline.useTimelinePosition();
     const [outlines, setOutlines] = (0, react_1.useState)([]);
@@ -456,8 +459,47 @@ const SelectedOutlineOverlay = ({ compositionHeight, compositionWidth, scale, tr
     const selectOutlineItem = (0, react_1.useCallback)((item, interaction) => {
         selectItem(item, interaction, undefined, { reveal: true });
     }, [selectItem]);
+    const outlineRuntimeControls = (0, react_1.useMemo)(() => {
+        if (isFullscreen ||
+            !(0, interactivity_enabled_1.isStudioSelectionEnabled)() ||
+            !previewSelectionAvailable ||
+            !editorShowOutlines) {
+            return [];
+        }
+        const selectedSequenceKeys = (0, selected_outline_measurement_1.getSelectedSequenceKeys)(selectedItems);
+        const sequenceKeysContainingSelection = (0, selected_outline_measurement_1.getSequenceKeysContainingSelection)(selectedItems);
+        return (0, selected_outline_measurement_1.getSequencesWithSelectableOutlines)({
+            sequences,
+            overrideIdsToNodePaths: overrideIdToNodePathMappings,
+            compositions,
+            timelinePosition,
+        }).flatMap(({ key, sequence }) => {
+            if (!selectedSequenceKeys.has(key) &&
+                !sequenceKeysContainingSelection.has(key) &&
+                (hoveredSequence === null || hoveredSequence === void 0 ? void 0 : hoveredSequence.key) !== key) {
+                return [];
+            }
+            return sequence.controls ? [sequence.controls] : [];
+        });
+    }, [
+        compositions,
+        editorShowOutlines,
+        hoveredSequence === null || hoveredSequence === void 0 ? void 0 : hoveredSequence.key,
+        isFullscreen,
+        overrideIdToNodePathMappings,
+        previewSelectionAvailable,
+        selectedItems,
+        sequences,
+        timelinePosition,
+    ]);
+    const outlineRuntimeSnapshots = (0, use_runtime_values_1.useRuntimeValueSnapshots)(outlineRuntimeControls);
+    const outlineRuntimeValuesByStore = (0, react_1.useMemo)(() => new Map(outlineRuntimeControls.map((controls, index) => [
+        controls.runtimeValues,
+        outlineRuntimeSnapshots[index],
+    ])), [outlineRuntimeControls, outlineRuntimeSnapshots]);
     const outlineTargets = (0, react_1.useMemo)(() => {
-        if (!(0, interactivity_enabled_1.isStudioSelectionEnabled)() ||
+        if (isFullscreen ||
+            !(0, interactivity_enabled_1.isStudioSelectionEnabled)() ||
             !previewSelectionAvailable ||
             !editorShowOutlines) {
             return [];
@@ -476,7 +518,7 @@ const SelectedOutlineOverlay = ({ compositionHeight, compositionWidth, scale, tr
             compositions,
             timelinePosition,
         }).map(({ key, keyframeDisplayOffset, nodePathInfo, sequence }) => {
-            var _a, _b, _c, _d, _e, _f;
+            var _a, _b, _c, _d, _e, _f, _g;
             if (sequence.refForOutline === null) {
                 throw new Error('Expected sequence to have a ref for outline');
             }
@@ -487,10 +529,13 @@ const SelectedOutlineOverlay = ({ compositionHeight, compositionWidth, scale, tr
             const nodePropStatuses = remotion_1.Internals.getPropStatusesCtx(propStatuses, nodePath);
             const sourceFrame = timelinePosition - keyframeDisplayOffset;
             const dragOverrides = (_a = getDragOverrides(nodePath)) !== null && _a !== void 0 ? _a : {};
+            const runtimeValues = controls
+                ? ((_b = outlineRuntimeValuesByStore.get(controls.runtimeValues)) !== null && _b !== void 0 ? _b : controls.runtimeValues.getSnapshot())
+                : {};
             const activeSchema = controls
                 ? (0, selected_outline_drag_1.getSelectedOutlineActiveSchema)({
                     schema: controls.schema,
-                    currentRuntimeValueDotNotation: controls.currentRuntimeValueDotNotation,
+                    currentRuntimeValueDotNotation: runtimeValues,
                     dragOverrides,
                     propStatus: nodePropStatuses,
                     frame: sourceFrame,
@@ -499,35 +544,35 @@ const SelectedOutlineOverlay = ({ compositionHeight, compositionWidth, scale, tr
             const cropValues = {
                 cropLeft: getEffectiveCropValue({
                     activeSchema,
-                    controls,
                     dragOverrides,
                     fieldKey: selected_outline_types_1.cropFieldKeys.left,
                     frame: sourceFrame,
                     propStatuses: nodePropStatuses,
+                    runtimeValues,
                 }),
                 cropRight: getEffectiveCropValue({
                     activeSchema,
-                    controls,
                     dragOverrides,
                     fieldKey: selected_outline_types_1.cropFieldKeys.right,
                     frame: sourceFrame,
                     propStatuses: nodePropStatuses,
+                    runtimeValues,
                 }),
                 cropTop: getEffectiveCropValue({
                     activeSchema,
-                    controls,
                     dragOverrides,
                     fieldKey: selected_outline_types_1.cropFieldKeys.top,
                     frame: sourceFrame,
                     propStatuses: nodePropStatuses,
+                    runtimeValues,
                 }),
                 cropBottom: getEffectiveCropValue({
                     activeSchema,
-                    controls,
                     dragOverrides,
                     fieldKey: selected_outline_types_1.cropFieldKeys.bottom,
                     frame: sourceFrame,
                     propStatuses: nodePropStatuses,
+                    runtimeValues,
                 }),
             };
             const crop = remotion_1.Internals.resolveSequenceCrop(cropValues);
@@ -547,13 +592,13 @@ const SelectedOutlineOverlay = ({ compositionHeight, compositionWidth, scale, tr
             const transformOriginValueForRotation = (transformOriginFieldSchema === null || transformOriginFieldSchema === void 0 ? void 0 : transformOriginFieldSchema.type) === 'transform-origin' &&
                 ((transformOriginPropStatus === null || transformOriginPropStatus === void 0 ? void 0 : transformOriginPropStatus.status) === 'static' ||
                     (transformOriginPropStatus === null || transformOriginPropStatus === void 0 ? void 0 : transformOriginPropStatus.status) === 'keyframed')
-                ? String((_b = remotion_1.Internals.getEffectiveVisualModeValue({
+                ? String((_c = remotion_1.Internals.getEffectiveVisualModeValue({
                     propStatus: transformOriginPropStatus,
                     dragOverrideValue: dragOverrides[selected_outline_types_1.transformOriginFieldKey],
                     defaultValue: transformOriginFieldSchema.default,
                     frame: sourceFrame,
                     shouldResortToDefaultValueIfUndefined: true,
-                })) !== null && _b !== void 0 ? _b : transformOriginFieldSchema.default)
+                })) !== null && _c !== void 0 ? _c : transformOriginFieldSchema.default)
                 : '50% 50%';
             const canDragStatus = (propStatus === null || propStatus === void 0 ? void 0 : propStatus.status) === 'static' ||
                 ((propStatus === null || propStatus === void 0 ? void 0 : propStatus.status) === 'keyframed' &&
@@ -693,16 +738,16 @@ const SelectedOutlineOverlay = ({ compositionHeight, compositionWidth, scale, tr
                         nodePath,
                         originDefault: transformOriginFieldSchema.default,
                         originPropStatus: transformOriginPropStatus,
-                        originValue: String((_c = remotion_1.Internals.getEffectiveVisualModeValue({
+                        originValue: String((_d = remotion_1.Internals.getEffectiveVisualModeValue({
                             propStatus: transformOriginPropStatus,
                             dragOverrideValue: dragOverrides[selected_outline_types_1.transformOriginFieldKey],
                             defaultValue: transformOriginFieldSchema.default,
                             frame: transformOriginSourceFrame,
                             shouldResortToDefaultValueIfUndefined: true,
-                        })) !== null && _c !== void 0 ? _c : transformOriginFieldSchema.default),
+                        })) !== null && _d !== void 0 ? _d : transformOriginFieldSchema.default),
                         rotateValue: String((rotationPropStatus === null || rotationPropStatus === void 0 ? void 0 : rotationPropStatus.status) === 'static' ||
                             (rotationPropStatus === null || rotationPropStatus === void 0 ? void 0 : rotationPropStatus.status) === 'keyframed'
-                            ? ((_d = remotion_1.Internals.getEffectiveVisualModeValue({
+                            ? ((_e = remotion_1.Internals.getEffectiveVisualModeValue({
                                 propStatus: rotationPropStatus,
                                 dragOverrideValue: dragOverrides[selected_outline_types_1.rotateFieldKey],
                                 defaultValue: (rotationFieldSchema === null || rotationFieldSchema === void 0 ? void 0 : rotationFieldSchema.type) === 'rotation-css'
@@ -710,11 +755,11 @@ const SelectedOutlineOverlay = ({ compositionHeight, compositionWidth, scale, tr
                                     : '0deg',
                                 frame: transformOriginSourceFrame,
                                 shouldResortToDefaultValueIfUndefined: true,
-                            })) !== null && _d !== void 0 ? _d : '0deg')
+                            })) !== null && _e !== void 0 ? _e : '0deg')
                             : '0deg'),
                         scaleValue: (scalePropStatus === null || scalePropStatus === void 0 ? void 0 : scalePropStatus.status) === 'static' ||
                             (scalePropStatus === null || scalePropStatus === void 0 ? void 0 : scalePropStatus.status) === 'keyframed'
-                            ? String((_e = remotion_1.Internals.getEffectiveVisualModeValue({
+                            ? String((_f = remotion_1.Internals.getEffectiveVisualModeValue({
                                 propStatus: scalePropStatus,
                                 dragOverrideValue: dragOverrides[selected_outline_types_1.scaleFieldKey],
                                 defaultValue: (scaleFieldSchema === null || scaleFieldSchema === void 0 ? void 0 : scaleFieldSchema.type) === 'scale'
@@ -722,19 +767,19 @@ const SelectedOutlineOverlay = ({ compositionHeight, compositionWidth, scale, tr
                                     : 1,
                                 frame: transformOriginSourceFrame,
                                 shouldResortToDefaultValueIfUndefined: true,
-                            })) !== null && _e !== void 0 ? _e : 1)
+                            })) !== null && _f !== void 0 ? _f : 1)
                             : '1',
                         schema: controls.schema,
                         sourceFrame: transformOriginSourceFrame,
                         translateDefault: fieldSchema.default,
                         translatePropStatus: propStatus,
-                        translateValue: String((_f = remotion_1.Internals.getEffectiveVisualModeValue({
+                        translateValue: String((_g = remotion_1.Internals.getEffectiveVisualModeValue({
                             propStatus,
                             dragOverrideValue: dragOverrides[selected_outline_types_1.translateFieldKey],
                             defaultValue: fieldSchema.default,
                             frame: transformOriginSourceFrame,
                             shouldResortToDefaultValueIfUndefined: true,
-                        })) !== null && _f !== void 0 ? _f : fieldSchema.default),
+                        })) !== null && _g !== void 0 ? _g : fieldSchema.default),
                     }
                     : null,
                 uvHandles: containsSelection
@@ -756,6 +801,7 @@ const SelectedOutlineOverlay = ({ compositionHeight, compositionWidth, scale, tr
         getEffectDragOverrides,
         getScaleLockState,
         editorShowOutlines,
+        isFullscreen,
         overrideIdToNodePathMappings,
         previewInteractive,
         previewSelectionAvailable,
@@ -764,6 +810,7 @@ const SelectedOutlineOverlay = ({ compositionHeight, compositionWidth, scale, tr
         sequences,
         compositions,
         timelinePosition,
+        outlineRuntimeValuesByStore,
     ]);
     (0, react_1.useEffect)(() => {
         if ((hoveredSequence === null || hoveredSequence === void 0 ? void 0 : hoveredSequence.source) === 'canvas' &&

package/dist/components/SettingsModal.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+type SettingsTab = 'apps' | 'license';
+export declare const SettingsModal: React.FC<{
+    readonly initialTab: SettingsTab;
+    readonly initialPublicLicenseKey: string | null;
+}>;
+export {};

package/dist/components/SettingsModal.js

@@ -0,0 +1,50 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SettingsModal = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const apps_1 = require("../icons/apps");
+const certificate_1 = require("../icons/certificate");
+const modals_1 = require("../state/modals");
+const ConfigureDefaultEditorModal_1 = require("./ConfigureDefaultEditorModal");
+const ConfigureLicenseModal_1 = require("./ConfigureLicenseModal");
+const is_menu_item_1 = require("./Menu/is-menu-item");
+const ModalHeader_1 = require("./ModalHeader");
+const DismissableModal_1 = require("./NewComposition/DismissableModal");
+const render_modals_1 = require("./RenderModal/render-modals");
+const vertical_1 = require("./Tabs/vertical");
+const hiddenPanel = {
+    display: 'none',
+};
+const appsIcon = {
+    ...render_modals_1.icon,
+    height: 20,
+    width: 20,
+};
+const appsIconContainer = {
+    ...render_modals_1.iconContainer,
+    height: 20,
+    width: 20,
+};
+const SettingsModal = ({ initialPublicLicenseKey, initialTab }) => {
+    const { setSelectedModal } = (0, react_1.useContext)(modals_1.SetSelectedModalContext);
+    const [tab, setTab] = (0, react_1.useState)(initialTab);
+    const [openedTabs, setOpenedTabs] = (0, react_1.useState)([initialTab]);
+    const dismiss = (0, react_1.useCallback)(() => {
+        setSelectedModal(null);
+    }, [setSelectedModal]);
+    const selectTab = (0, react_1.useCallback)((newTab) => {
+        setTab(newTab);
+        setOpenedTabs((currentOpenedTabs) => {
+            if (currentOpenedTabs.includes(newTab)) {
+                return currentOpenedTabs;
+            }
+            return [...currentOpenedTabs, newTab];
+        });
+    }, []);
+    return (jsx_runtime_1.jsxs(DismissableModal_1.DismissableModal, { panelStyle: render_modals_1.outerModalStyle, children: [
+            jsx_runtime_1.jsx(ModalHeader_1.ModalHeader, { title: "Settings", onClose: dismiss }), jsx_runtime_1.jsxs("div", { style: render_modals_1.horizontalLayout, children: [
+                    jsx_runtime_1.jsxs("div", { style: render_modals_1.leftSidebar, children: [jsx_runtime_1.jsx(vertical_1.VerticalTab, { style: render_modals_1.horizontalTab, selected: tab === 'apps', onClick: () => selectTab('apps'), renderIcon: (color) => (jsx_runtime_1.jsx("div", { style: appsIconContainer, children: jsx_runtime_1.jsx(apps_1.AppsIcon, { color: color, style: appsIcon }) })), children: "Apps" }), jsx_runtime_1.jsx(vertical_1.VerticalTab, { style: render_modals_1.horizontalTab, selected: tab === 'license', onClick: () => selectTab('license'), renderIcon: (color) => (jsx_runtime_1.jsx("div", { style: render_modals_1.iconContainer, children: jsx_runtime_1.jsx(certificate_1.CertificateIcon, { color: color, style: render_modals_1.icon }) })), children: "License" })] }), openedTabs.includes('apps') ? (jsx_runtime_1.jsx("div", { style: tab === 'apps' ? render_modals_1.optionsPanel : hiddenPanel, className: is_menu_item_1.VERTICAL_SCROLLBAR_CLASSNAME, children: jsx_runtime_1.jsx(ConfigureDefaultEditorModal_1.DefaultEditorSettings, { onSaved: dismiss }) })) : null, openedTabs.includes('license') ? (jsx_runtime_1.jsx("div", { style: tab === 'license' ? render_modals_1.optionsPanel : hiddenPanel, className: is_menu_item_1.VERTICAL_SCROLLBAR_CLASSNAME, children: jsx_runtime_1.jsx(ConfigureLicenseModal_1.LicenseSettings, { initialPublicLicenseKey: initialPublicLicenseKey, onSaved: dismiss }) })) : null] })
+        ] }));
+};
+exports.SettingsModal = SettingsModal;

package/dist/components/SettingsModalFooter.d.ts

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

package/dist/components/SettingsModalFooter.js

@@ -0,0 +1,46 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SettingsModalFooter = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const colors_1 = require("../helpers/colors");
+const InspectorOpenInEditor_1 = require("./InspectorOpenInEditor");
+const ModalFooter_1 = require("./ModalFooter");
+const footer = {
+    flex: 'none',
+};
+const footerRow = {
+    alignItems: 'center',
+    display: 'flex',
+    justifyContent: 'space-between',
+};
+const configFileHint = {
+    alignItems: 'center',
+    color: colors_1.LIGHT_TEXT,
+    display: 'flex',
+    fontFamily: 'sans-serif',
+    fontSize: 13,
+    lineHeight: '20px',
+    whiteSpace: 'nowrap',
+};
+const configFileName = {
+    color: colors_1.BLUE,
+    fontFamily: 'inherit',
+    fontSize: 13,
+    fontWeight: 'bold',
+    lineHeight: '20px',
+};
+const SettingsModalFooter = ({ children }) => {
+    const configFileLocation = (0, react_1.useMemo)(() => {
+        return {
+            source: 'remotion.config.ts',
+            line: 1,
+            column: 1,
+        };
+    }, []);
+    return (jsx_runtime_1.jsx(ModalFooter_1.ModalFooterContainer, { style: footer, noBorder: true, children: jsx_runtime_1.jsxs("div", { style: footerRow, children: [
+                jsx_runtime_1.jsxs("div", { style: configFileHint, children: ["Changes save to",
+                        jsx_runtime_1.jsx(InspectorOpenInEditor_1.InspectorOpenInEditor, { location: configFileLocation, label: jsx_runtime_1.jsx("strong", { style: configFileName, children: "remotion.config.ts" }) })
+                    ] }), children] }) }));
+};
+exports.SettingsModalFooter = SettingsModalFooter;

package/dist/components/SidebarRenderButton.js

@@ -9,7 +9,7 @@ const render_1 = require("../icons/render");
 const modals_1 = require("../state/modals");
 const InlineAction_1 = require("./InlineAction");
 const SidebarRenderButton = ({ composition, visible }) => {
-    const { setSelectedModal } = (0, react_1.useContext)(modals_1.ModalsContext);
+    const { setSelectedModal } = (0, react_1.useContext)(modals_1.SetSelectedModalContext);
     const iconStyle = (0, react_1.useMemo)(() => {
         return {
             style: {

package/dist/components/SizeSelector.js

@@ -6,9 +6,9 @@ const react_1 = require("react");
 const remotion_1 = require("remotion");
 const colors_1 = require("../helpers/colors");
 const get_preview_file_type_1 = require("../helpers/get-preview-file-type");
+const canvas_zoom_1 = require("../icons/canvas-zoom");
 const Checkmark_1 = require("../icons/Checkmark");
-const ControlButton_1 = require("./ControlButton");
-const ComboBox_1 = require("./NewComposition/ComboBox");
+const TimelineCombobox_1 = require("./TimelineCombobox");
 const commonPreviewSizes = [
     {
         size: 'auto',
@@ -47,7 +47,6 @@ const getPreviewSizeLabel = (previewSize) => {
 };
 exports.getPreviewSizeLabel = getPreviewSizeLabel;
 const accessibilityLabel = 'Preview Size';
-const comboStyle = { width: 64 };
 const getUniqueSizes = (size) => {
     const customPreviewSizes = [size, ...commonPreviewSizes];
     const uniqueSizes = [];
@@ -116,14 +115,9 @@ const usePreviewSizeMenuItems = () => {
 exports.usePreviewSizeMenuItems = usePreviewSizeMenuItems;
 const SizeSelector = () => {
     const { items, selectedId, zoomable } = (0, exports.usePreviewSizeMenuItems)();
-    const style = (0, react_1.useMemo)(() => {
-        return {
-            padding: ControlButton_1.CONTROL_BUTTON_PADDING - 2,
-        };
-    }, []);
     if (!zoomable) {
         return null;
     }
-    return (jsx_runtime_1.jsx("div", { style: style, "aria-label": accessibilityLabel, children: jsx_runtime_1.jsx(ComboBox_1.Combobox, { size: "compact", title: accessibilityLabel, style: comboStyle, selectedId: selectedId, values: items, unhoveredIconColor: colors_1.WHITE_ALPHA_80 }) }));
+    return (jsx_runtime_1.jsx(TimelineCombobox_1.TimelineCombobox, { title: accessibilityLabel, selectedId: selectedId, values: items, renderLeftItem: (color) => selectedId === 'auto' ? (jsx_runtime_1.jsx(canvas_zoom_1.CanvasFitIcon, { color: color })) : Number(selectedId) < 1 ? (jsx_runtime_1.jsx(canvas_zoom_1.CanvasZoomOutIcon, { color: color })) : (jsx_runtime_1.jsx(canvas_zoom_1.CanvasZoomIcon, { color: color })), unhoveredIconColor: colors_1.WHITE_ALPHA_80 }));
 };
 exports.SizeSelector = SizeSelector;

package/dist/components/SvgImportDialog.js

@@ -25,7 +25,7 @@ const inlineCode = {
     color: 'inherit',
 };
 const useSvgImportDialog = () => {
-    const { setSelectedModal } = (0, react_1.useContext)(modals_1.ModalsContext);
+    const { setSelectedModal } = (0, react_1.useContext)(modals_1.SetSelectedModalContext);
     return (0, react_1.useCallback)(() => {
         return new Promise((resolve) => {
             let settled = false;
@@ -48,7 +48,7 @@ const useSvgImportDialog = () => {
 };
 exports.useSvgImportDialog = useSvgImportDialog;
 const SvgImportDialog = ({ state }) => {
-    const { setSelectedModal } = (0, react_1.useContext)(modals_1.ModalsContext);
+    const { setSelectedModal } = (0, react_1.useContext)(modals_1.SetSelectedModalContext);
     const settledRef = (0, react_1.useRef)(false);
     const closeCurrentModal = (0, react_1.useCallback)(() => {
         setSelectedModal((modal) => (modal === null || modal === void 0 ? void 0 : modal.type) === 'svg-import-dialog' && modal.id === state.id

package/dist/components/TimeValue.js

@@ -52,7 +52,7 @@ const TimeValue = () => {
     const frame = (0, remotion_1.useCurrentFrame)();
     const config = remotion_1.Internals.useUnsafeVideoConfig();
     const isStill = (0, is_current_selected_still_1.useIsStill)();
-    const { seek, play, pause, toggle } = player_1.PlayerInternals.usePlayer();
+    const { seek, play, pause, toggle } = player_1.PlayerInternals.usePlayerMethods();
     const keybindings = (0, use_keybinding_1.useKeybinding)();
     const ref = (0, react_1.useRef)(null);
     const onTextChange = (0, react_1.useCallback)((newVal) => {

package/dist/components/Timeline/Timeline.js

@@ -188,6 +188,7 @@ const TimelineContextMenuArea = ({ children }) => {
                 destinationDimensions: null,
                 dropPosition: null,
                 from: null,
+                preferCompositionStart: null,
                 svgImportMode: 'image',
             });
         }
@@ -195,7 +196,7 @@ const TimelineContextMenuArea = ({ children }) => {
             setIsAddingAsset(false);
         }
     }, [canInsertAsset, compositionFile, currentCompositionId, videoConfig]);
-    const contextMenuItems = (0, react_1.useMemo)(() => {
+    const getContextMenuItems = (0, react_1.useCallback)(() => {
         return [
             {
                 type: 'item',
@@ -223,7 +224,7 @@ const TimelineContextMenuArea = ({ 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, children: jsx_runtime_1.jsx(timeline_asset_drop_context_1.TimelineAssetDropFrameContext.Provider, { value: assetDropFrame, children: children }) }));
+    return (jsx_runtime_1.jsx(ContextMenu_1.ContextMenu, { ref: timeline_refs_1.timelineVerticalScroll, getItems: getContextMenuItems, style: container, className: 'css-reset ' + is_menu_item_1.VERTICAL_SCROLLBAR_CLASSNAME, children: jsx_runtime_1.jsx(timeline_asset_drop_context_1.TimelineAssetDropFrameContext.Provider, { value: assetDropFrame, children: children }) }));
 };
 const TimelineInner = () => {
     var _a;
@@ -267,9 +268,9 @@ const TimelineInner = () => {
                     return null;
                 }
                 return (jsx_runtime_1.jsx(SubscribeToNodePaths_1.SubscribeToNodePaths, { overrideId: sequence.controls.overrideId, componentIdentity: sequence.controls.componentIdentity, schema: sequence.controls.schema, getStack: sequence.getStack, effects: sequence.effects }, sequence.id));
-            }), (0, interactivity_enabled_1.isStudioInteractivityEnabled)() ? jsx_runtime_1.jsx(SequencePropsObserver_1.SequencePropsObserver, {}) : null, jsx_runtime_1.jsx(TimelineKeyframeTracksContext_1.TimelineKeyframeTracksProvider, { tracks: filtered, children: jsx_runtime_1.jsxs(TimelineSelection_1.TimelineSelectableItemsProvider, { timeline: shown, children: [(0, interactivity_enabled_1.isStudioInteractivityEnabled)() ? (jsx_runtime_1.jsx(TimelineSelection_1.TimelineSelectAllKeybindings, { timeline: shown })) : null, jsx_runtime_1.jsx(TimelineHeightContainer_1.TimelineHeightContainer, { shown: shown, hasBeenCut: hasBeenCut, children: isStill ? (jsx_runtime_1.jsx(TimelineList_1.TimelineList, { timeline: shown })) : (jsx_runtime_1.jsxs(TimelineWidthProvider_1.TimelineWidthProvider, { children: [
+            }), (0, interactivity_enabled_1.isStudioInteractivityEnabled)() ? jsx_runtime_1.jsx(SequencePropsObserver_1.SequencePropsObserver, {}) : null, jsx_runtime_1.jsx(TimelineKeyframeTracksContext_1.TimelineKeyframeTracksProvider, { tracks: filtered, children: jsx_runtime_1.jsxs(TimelineSelection_1.TimelineSelectableItemsProvider, { timeline: shown, children: [(0, interactivity_enabled_1.isStudioInteractivityEnabled)() ? (jsx_runtime_1.jsx(TimelineSelection_1.TimelineSelectAllKeybindings, { timeline: shown })) : null, jsx_runtime_1.jsx(TimelineHeightContainer_1.TimelineHeightContainer, { shown: shown, hasBeenCut: hasBeenCut, isStill: isStill, children: isStill ? (jsx_runtime_1.jsx(TimelineList_1.TimelineList, { timeline: shown, showTimePadding: false })) : (jsx_runtime_1.jsxs(TimelineWidthProvider_1.TimelineWidthProvider, { children: [
                                     jsx_runtime_1.jsx(TimelinePinchZoom_1.TimelinePinchZoom, {}), jsx_runtime_1.jsxs(SplitterContainer_1.SplitterContainer, { orientation: "vertical", defaultFlex: 0.2, id: "names-to-timeline", maxFlex: 0.5, minFlex: 0.15, maxFlexerSize: null, minFlexerSize: MIN_TIMELINE_LABELS_WIDTH, maxAntiFlexerSize: null, minAntiFlexerSize: null, children: [
-                                            jsx_runtime_1.jsx(SplitterElement_1.SplitterElement, { type: "flexer", sticky: jsx_runtime_1.jsx(TimelineTimeIndicators_1.TimelineTimePlaceholders, {}), children: jsx_runtime_1.jsx(TimelineList_1.TimelineList, { timeline: shown }) }), jsx_runtime_1.jsx(SplitterHandle_1.SplitterHandle, { onCollapse: noop, allowToCollapse: "none" }), jsx_runtime_1.jsx(SplitterElement_1.SplitterElement, { type: "anti-flexer", sticky: null, children: jsx_runtime_1.jsxs(TimelineScrollable_1.TimelineScrollable, { children: [
+                                            jsx_runtime_1.jsx(SplitterElement_1.SplitterElement, { type: "flexer", sticky: jsx_runtime_1.jsx(TimelineTimeIndicators_1.TimelineTimePlaceholders, {}), children: jsx_runtime_1.jsx(TimelineList_1.TimelineList, { timeline: shown, showTimePadding: true }) }), jsx_runtime_1.jsx(SplitterHandle_1.SplitterHandle, { onCollapse: noop, allowToCollapse: "none" }), jsx_runtime_1.jsx(SplitterElement_1.SplitterElement, { type: "anti-flexer", sticky: null, children: jsx_runtime_1.jsxs(TimelineScrollable_1.TimelineScrollable, { children: [
                                                         jsx_runtime_1.jsx(TimelineTracks_1.TimelineTracks, { timeline: shown, hasBeenCut: hasBeenCut }), jsx_runtime_1.jsx(TimelinePlayCursorSyncer_1.TimelinePlayCursorSyncer, {}), jsx_runtime_1.jsx(TimelineInOutPointer_1.TimelineInOutPointer, {}), jsx_runtime_1.jsx(TimelineTimeIndicators_1.TimelineTimeIndicators, {}), jsx_runtime_1.jsx(TimelineDragHandler_1.TimelineDragHandler, {}), (0, interactivity_enabled_1.isStudioInteractivityEnabled)() ? (jsx_runtime_1.jsx(TimelineInOutDragHandler_1.TimelineInOutDragHandler, {})) : null, jsx_runtime_1.jsx(TimelineSlider_1.TimelineSlider, {})
                                                     ] }) })
                                         ] })

package/dist/components/Timeline/TimelineAssetField.js

@@ -34,7 +34,7 @@ const TimelineAssetField = ({ field, effectiveValue, propStatus, onSave, onDragV
     if (field.fieldSchema.type !== 'asset') {
         throw new Error('TimelineAssetField rendered for non-asset field');
     }
-    const { setSelectedModal } = (0, react_1.useContext)(modals_1.ModalsContext);
+    const { setSelectedModal } = (0, react_1.useContext)(modals_1.SetSelectedModalContext);
     const staticFiles = (0, use_static_files_1.useStaticFiles)();
     const { getSourceAction, initialQuery, sourceAction } = (0, react_1.useContext)(exports.AssetSelectionContext);
     const inlineSourceAction = (0, react_1.useMemo)(() => {

package/dist/components/Timeline/TimelineDragHandler.js

@@ -108,7 +108,7 @@ const TimelineDragHandlerInner = () => {
     const [dragging, setDragging] = (0, react_1.useState)({
         dragging: false,
     });
-    const { playing, play, pause, seek } = player_1.PlayerInternals.usePlayer();
+    const { isPlaying, play, pause, seek } = player_1.PlayerInternals.usePlayerMethods();
     const scroller = (0, react_1.useRef)(null);
     const stopInterval = () => {
         if (scroller.current) {
@@ -140,14 +140,14 @@ const TimelineDragHandlerInner = () => {
         seek(frame);
         setDragging({
             dragging: true,
-            wasPlaying: playing,
+            wasPlaying: isPlaying(),
             button: e.button,
             pointerId: e.pointerId,
             target: e.currentTarget,
         });
         (_b = (_a = e.currentTarget).setPointerCapture) === null || _b === void 0 ? void 0 : _b.call(_a, e.pointerId);
         pause();
-    }, [isHighestContext, videoConfig, left, width, seek, playing, pause]);
+    }, [isHighestContext, videoConfig, left, width, seek, isPlaying, pause]);
     const onPointerMoveScrubbing = (0, react_1.useCallback)((e) => {
         var _a;
         if (!videoConfig) {
@@ -247,6 +247,9 @@ const TimelineDragHandlerInner = () => {
             extrapolate: 'clamp',
         });
         setFrame((c) => {
+            if (c[videoConfig.id] === frame) {
+                return c;
+            }
             const newObj = { ...c, [videoConfig.id]: frame };
             remotion_1.Internals.persistCurrentFrame(newObj);
             return newObj;

package/dist/components/Timeline/TimelineEffectItem.js

@@ -120,10 +120,13 @@ const TimelineEffectItem = ({ label, nodePathInfo, effectIndex, effectSchema, do
             (0, NotificationCenter_1.showNotification)(err.message, 4000);
         }
     }, [deleteDisabled, effectIndex, nodePath, validatedLocation.source]);
-    const contextMenuValues = (0, react_1.useMemo)(() => {
+    const getContextMenuItems = (0, react_1.useCallback)(() => {
         if (!previewConnected) {
             return [];
         }
+        if (selection.selectable) {
+            selection.onSelect({ shiftKey: false, toggleKey: false });
+        }
         const items = [];
         if (documentationLink) {
             items.push({
@@ -168,6 +171,7 @@ const TimelineEffectItem = ({ label, nodePathInfo, effectIndex, effectSchema, do
         documentationLink,
         onDeleteEffectFromSource,
         previewConnected,
+        selection,
     ]);
     const onToggle = (0, react_1.useCallback)((type) => {
         if (!canToggle || previewServerState.type !== 'connected') {
@@ -322,6 +326,6 @@ const TimelineEffectItem = ({ label, nodePathInfo, effectIndex, effectSchema, do
     }, [dropIndicator]);
     const row = (jsx_runtime_1.jsx(TimelineRowChrome_1.TimelineRowChrome, { depth: rowDepth, eye: canToggle ? (jsx_runtime_1.jsx(TimelineLayerEye_1.TimelineLayerEye, { type: "effect", hidden: isDisabled, onInvoked: onToggle })) : (jsx_runtime_1.jsx(TimelineLayerEye_1.TimelineLayerEyeSpacer, {})), arrow: jsx_runtime_1.jsx(TimelineExpandArrowButton_1.TimelineExpandArrowButton, { isExpanded: isExpanded, onClick: () => toggleTrack(nodePathInfo), label: `${label} section`, disabled: false }), style: rowStyle, selected: selection.selected, selectable: selection.selectable, selectionItem: selection.selectionItem, onSelect: selection.onSelect, showSelectedBackground: true, containsSelection: containsSelection, outerHeight: null, children: jsx_runtime_1.jsx("span", { title: label, style: labelStyle, children: label }) }));
     const draggableRow = canReorder ? (jsx_runtime_1.jsxs("div", { draggable: true, onDragStart: onDragStart, onDragEnd: onDragEnd, onDragOver: onDragOver, onDragLeave: onDragLeave, onDrop: onDrop, style: reorderWrapper, children: [reorderLineStyle ? jsx_runtime_1.jsx("div", { style: reorderLineStyle }) : null, row] })) : (row);
-    return previewConnected ? (jsx_runtime_1.jsx(ContextMenu_1.ContextMenu, { values: contextMenuValues, onOpen: selection.selectable ? selection.onSelect : null, children: draggableRow })) : (draggableRow);
+    return previewConnected ? (jsx_runtime_1.jsx(ContextMenu_1.ContextMenu, { getItems: getContextMenuItems, children: draggableRow })) : (draggableRow);
 };
 exports.TimelineEffectItem = TimelineEffectItem;

package/dist/components/Timeline/TimelineEffectPropItem.js

@@ -209,6 +209,10 @@ const TimelineEffectPropValue = ({ field, nodePath, validatedLocation, sourceFra
     return (jsx_runtime_1.jsx(TimelineSchemaField_1.TimelineFieldValue, { field: field, propStatus: propStatus, onSave: onSave, onDragValueChange: onDragValueChange, onDragEnd: onDragEnd, effectiveValue: effectiveValue, scaleLockNodePath: null }));
 };
 exports.TimelineEffectPropValue = TimelineEffectPropValue;
+const TimelineEffectPropValueAtCurrentFrame = ({ field, nodePath, validatedLocation, keyframeDisplayOffset }) => {
+    const timelinePosition = remotion_1.Internals.Timeline.useTimelinePosition();
+    return (jsx_runtime_1.jsx(exports.TimelineEffectPropValue, { field: field, nodePath: nodePath, validatedLocation: validatedLocation, sourceFrame: timelinePosition - keyframeDisplayOffset }));
+};
 const TimelineEffectPropItem = ({ field, validatedLocation, rowDepth, nodePath, nodePathInfo, keyframeDisplayOffset, keyframeControlsMode = 'timeline', }) => {
     var _a;
     var _b;
@@ -217,8 +221,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 timelinePosition = remotion_1.Internals.Timeline.useTimelinePosition();
-    const sourceFrame = timelinePosition - keyframeDisplayOffset;
     const style = (0, react_1.useMemo)(() => {
         return field.typeName === 'text-content'
             ? fieldRowBase
@@ -294,7 +296,10 @@ const TimelineEffectPropItem = ({ field, validatedLocation, rowDepth, nodePath,
         setPropStatuses,
         validatedLocation.source,
     ]);
-    const contextMenuValues = (0, react_1.useMemo)(() => {
+    const getContextMenuItems = (0, react_1.useCallback)(() => {
+        if (selection.selectable) {
+            selection.onSelect({ shiftKey: false, toggleKey: false });
+        }
         return [
             {
                 type: 'item',
@@ -309,7 +314,7 @@ const TimelineEffectPropItem = ({ field, validatedLocation, rowDepth, nodePath,
                 value: 'reset-effect-field',
             },
         ];
-    }, [canShowReset, onReset]);
+    }, [canShowReset, onReset, selection]);
     const onPropertyDoubleClick = (0, react_1.useCallback)((event) => {
         if (!window.remotion_editorName ||
             previewServerState.type !== 'connected') {
@@ -321,7 +326,7 @@ const TimelineEffectPropItem = ({ field, validatedLocation, rowDepth, nodePath,
             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 }));
+    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(TimelineEffectPropValueAtCurrentFrame, { field: field, nodePath: nodePath, validatedLocation: validatedLocation, keyframeDisplayOffset: keyframeDisplayOffset }) }) }));
+    return jsx_runtime_1.jsx(ContextMenu_1.ContextMenu, { getItems: getContextMenuItems, children: row });
 };
 exports.TimelineEffectPropItem = TimelineEffectPropItem;

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

@@ -1,12 +1,12 @@
 import React from 'react';
 import type { SequenceNodePathInfo } from '../../helpers/get-timeline-sequence-sort-key';
-export declare const TimelineExpandedKeyframeRow: React.NamedExoticComponent<{
+import type { getTimelineKeyframes } from './get-timeline-keyframes';
+type TimelineExpandedKeyframeRowProps = {
     readonly height: number;
-    readonly keyframes: {
-        frame: number;
-        value: unknown;
-    }[];
+    readonly keyframes: ReturnType<typeof getTimelineKeyframes>;
     readonly canEditEasing: boolean;
     readonly nodePathInfo: SequenceNodePathInfo;
     readonly showSeparator: boolean;
-}>;
+};
+export declare const TimelineExpandedKeyframeRow: React.NamedExoticComponent<TimelineExpandedKeyframeRowProps>;
+export {};