@remotion/studio 4.0.505 → 4.0.506

package/dist/components/PreviewToolbarOverflowButton.js

@@ -18,6 +18,7 @@ const clickButton = (id) => {
     (_a = document.getElementById(id)) === null || _a === void 0 ? void 0 : _a.click();
 };
 const PreviewToolbarOverflowButton = ({ showFullscreen, showPlaybackRate, showLoop, showCompositionControls, playbackRate, setPlaybackRate, loop, setLoop, }) => {
+    const keyboardShortcutsDisabled = (0, use_keybinding_1.areKeyboardShortcutsDisabled)();
     const { checkerboard, setCheckerboard } = (0, react_1.useContext)(checkerboard_1.CheckerboardContext);
     const { editorShowOutlines, setEditorShowOutlines } = (0, react_1.useContext)(editor_outlines_1.EditorShowOutlinesContext);
     const { items: previewSizeItems, selectedId: selectedPreviewSize, zoomable, } = (0, SizeSelector_1.usePreviewSizeMenuItems)();
@@ -88,7 +89,7 @@ const PreviewToolbarOverflowButton = ({ showFullscreen, showPlaybackRate, showLo
                 label: 'Transparency as checkerboard',
                 value: 'checkerboard',
                 onClick: () => setCheckerboard((current) => !current),
-                keyHint: (0, use_keybinding_1.areKeyboardShortcutsDisabled)() ? null : 'T',
+                keyHint: keyboardShortcutsDisabled ? null : 'T',
                 leftItem: checkerboard ? jsx_runtime_1.jsx(Checkmark_1.Checkmark, {}) : null,
                 subMenu: null,
                 quickSwitcherLabel: null,
@@ -112,7 +113,7 @@ const PreviewToolbarOverflowButton = ({ showFullscreen, showPlaybackRate, showLo
                 label: 'Fullscreen',
                 value: 'fullscreen',
                 onClick: () => clickButton('fullscreen-toggle'),
-                keyHint: (0, use_keybinding_1.areKeyboardShortcutsDisabled)() ? null : 'F',
+                keyHint: keyboardShortcutsDisabled ? null : 'F',
                 leftItem: null,
                 subMenu: null,
                 quickSwitcherLabel: null,
@@ -135,6 +136,7 @@ const PreviewToolbarOverflowButton = ({ showFullscreen, showPlaybackRate, showLo
         setEditorShowOutlines,
         setLoop,
         zoomable,
+        keyboardShortcutsDisabled,
     ]);
     if (values.length === 0) {
         return null;

package/dist/components/QuickSwitcher/ExplorerQuickSwitcherTrigger.js

@@ -30,7 +30,7 @@ const shortcutLabel = {
     opacity: 0.6,
 };
 const ExplorerQuickSwitcherTrigger = ({ mode, showShortcut, tabIndex }) => {
-    const { setSelectedModal } = (0, react_1.useContext)(modals_1.ModalsContext);
+    const { setSelectedModal } = (0, react_1.useContext)(modals_1.SetSelectedModalContext);
     const openQuickSwitcher = (0, react_1.useCallback)(() => {
         setSelectedModal({
             type: 'quick-switcher',

package/dist/components/QuickSwitcher/QuickSwitcherContent.js

@@ -125,7 +125,7 @@ const QuickSwitcherContent = ({ initialMode, invocationTimestamp, readOnlyStudio
     const closeMenu = (0, react_1.useCallback)(() => undefined, []);
     const actions = (0, use_menu_structure_1.useMenuStructure)(closeMenu, readOnlyStudio);
     const [docResults, setDocResults] = (0, react_1.useState)({ type: 'initial' });
-    const { setSelectedModal } = (0, react_1.useContext)(modals_1.ModalsContext);
+    const { setSelectedModal } = (0, react_1.useContext)(modals_1.SetSelectedModalContext);
     const keybindings = (0, use_keybinding_1.useKeybinding)();
     const mode = assetSelection !== null
         ? 'assets'

package/dist/components/RenderButton.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
 export type RenderType = 'server-render' | 'client-render' | 'render-command';
-export declare const RenderButton: React.FC<{
+export declare const RenderButton: React.NamedExoticComponent<{
     readonly readOnlyStudio: boolean;
-    readonly size?: 'default' | 'compact';
-    readonly narrow?: boolean;
+    readonly size?: "compact" | "default" | undefined;
+    readonly narrow?: boolean | undefined;
 }>;

package/dist/components/RenderButton.js

@@ -1,4 +1,37 @@
 "use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
@@ -6,7 +39,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.RenderButton = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const player_1 = require("@remotion/player");
-const react_1 = require("react");
+const react_1 = __importStar(require("react"));
 const react_dom_1 = __importDefault(require("react-dom"));
 const remotion_1 = require("remotion");
 const client_id_1 = require("../helpers/client-id");
@@ -117,9 +150,9 @@ const getInitialRenderType = (readOnlyStudio) => {
     }
     return 'server-render';
 };
-const RenderButton = ({ readOnlyStudio, size: controlSize = 'default', narrow = false }) => {
+const RenderButtonInner = ({ readOnlyStudio, size: controlSize = 'default', narrow = false }) => {
     const { inFrame, outFrame } = (0, in_out_1.useTimelineInOutFramePosition)();
-    const { setSelectedModal } = (0, react_1.useContext)(modals_1.ModalsContext);
+    const { setSelectedModal } = (0, react_1.useContext)(modals_1.SetSelectedModalContext);
     const [preferredRenderType, setPreferredRenderType] = (0, react_1.useState)(() => getInitialRenderType(readOnlyStudio));
     const [dropdownOpened, setDropdownOpened] = (0, react_1.useState)(false);
     const [hovered, setHovered] = (0, react_1.useState)(false);
@@ -193,8 +226,10 @@ const RenderButton = ({ readOnlyStudio, size: controlSize = 'default', narrow =
         };
     }, [controlSize]);
     const video = remotion_1.Internals.useVideo();
-    const { getCurrentFrame } = player_1.PlayerInternals.usePlayer();
+    const { getCurrentFrame } = player_1.PlayerInternals.usePlayerMethods();
     const { props } = (0, react_1.useContext)(remotion_1.Internals.EditorPropsContext);
+    // Read the frame when the modal opens instead of subscribing this button to
+    // every timeline position update.
     const openServerRenderModal = (0, react_1.useCallback)((copyCommandOnly) => {
         var _a;
         var _b, _c;
@@ -258,7 +293,7 @@ const RenderButton = ({ readOnlyStudio, size: controlSize = 'default', narrow =
             initialMediaCacheSizeInBytes: defaults.mediaCacheSizeInBytes,
             renderDefaults: defaults,
         });
-    }, [video, setSelectedModal, getCurrentFrame, props, inFrame, outFrame]);
+    }, [video, setSelectedModal, props, inFrame, outFrame, getCurrentFrame]);
     const openClientRenderModal = (0, react_1.useCallback)(() => {
         var _a;
         if (!video) {
@@ -292,7 +327,7 @@ const RenderButton = ({ readOnlyStudio, size: controlSize = 'default', narrow =
             initialMediaCacheSizeInBytes: defaults.mediaCacheSizeInBytes,
             initialPageResponsiveness: 'medium',
         });
-    }, [video, setSelectedModal, getCurrentFrame, props, inFrame, outFrame]);
+    }, [video, setSelectedModal, props, inFrame, outFrame, getCurrentFrame]);
     const onClick = (0, react_1.useCallback)(() => {
         if (renderType === 'render-command') {
             openServerRenderModal(true);
@@ -469,4 +504,4 @@ const RenderButton = ({ readOnlyStudio, size: controlSize = 'default', narrow =
                 ? react_dom_1.default.createPortal(jsx_runtime_1.jsx("div", { style: styles_1.fullScreenOverlay, children: jsx_runtime_1.jsx("div", { style: styles_1.outerPortal, className: "css-reset", children: jsx_runtime_1.jsx(z_index_1.HigherZIndex, { onOutsideClick: onHideDropdown, onEscape: onHideDropdown, children: jsx_runtime_1.jsx("div", { style: portalStyle, onPointerDown: onMenuPointerDown, children: jsx_runtime_1.jsx(MenuContent_1.MenuContent, { onNextMenu: () => { }, onPreviousMenu: () => { }, values: dropdownValues, onHide: onHideDropdown, leaveLeftSpace: false, preselectIndex: dropdownValues.findIndex((v) => v.id === renderType), topItemCanBeUnselected: false, fixedHeight: derivedMaxHeight }) }) }) }) }), (0, portals_1.getPortal)(currentZIndex))
                 : null] }));
 };
-exports.RenderButton = RenderButton;
+exports.RenderButton = react_1.default.memo(RenderButtonInner);

package/dist/components/RenderModal/RenderStatusModal.js

@@ -41,7 +41,7 @@ const buttonRow = {
     justifyContent: 'flex-end',
 };
 const RenderStatusModal = ({ jobId, }) => {
-    const { setSelectedModal } = (0, react_1.useContext)(modals_1.ModalsContext);
+    const { setSelectedModal } = (0, react_1.useContext)(modals_1.SetSelectedModalContext);
     const { jobs, removeClientJob, cancelClientJob } = (0, react_1.useContext)(context_1.RenderQueueContext);
     const job = jobs.find((j) => j.id === jobId);
     if (!job) {

package/dist/components/RenderModal/ServerRenderModal.js

@@ -67,7 +67,7 @@ const reducer = (state, action) => {
     return state;
 };
 const RenderModal = ({ readOnlyStudio, initialFrame, initialVideoImageFormat, initialStillImageFormat, initialJpegQuality, initialScale, initialLogLevel, initialConcurrency, maxConcurrency, minConcurrency, initialMuted, initialEnforceAudioTrack, initialProResProfile, initialx264Preset, initialGopSize, initialPixelFormat, initialVideoBitrate, initialAudioBitrate, initialEveryNthFrame, initialNumberOfGifLoops, initialDelayRenderTimeout, initialOffthreadVideoCacheSizeInBytes, initialEnvVariables, initialDisableWebSecurity, initialGl, initialHeadless, initialIgnoreCertificateErrors, initialEncodingBufferSize, initialEncodingMaxRate, initialOffthreadVideoThreads, initialMediaCacheSizeInBytes, initialDarkMode, initialUserAgent, defaultProps, inFrameMark, outFrameMark, initialColorSpace, initialMultiProcessOnLinux, defaultConfigurationAudioCodec, defaultConfigurationVideoCodec, initialBeep, initialRepro, initialForSeamlessAacConcatenation, renderTypeOfLastRender, initialHardwareAcceleration, initialSampleRate, defaultMetadata, initialChromeMode, renderDefaults, }) => {
-    const { setSelectedModal } = (0, react_1.useContext)(modals_1.ModalsContext);
+    const { setSelectedModal } = (0, react_1.useContext)(modals_1.SetSelectedModalContext);
     const context = (0, react_1.useContext)(ResolveCompositionBeforeModal_1.ResolvedCompositionContext);
     if (!context) {
         throw new Error('Should not be able to render without resolving comp first');

package/dist/components/RenderModal/WebRenderModal.js

@@ -82,7 +82,7 @@ const validateOutnameForStill = ({ outName, stillImageFormat, }) => {
 const WebRenderModal = ({ initialFrame, defaultProps, inFrameMark, outFrameMark, initialLogLevel, initialStillImageFormat, initialDefaultOutName, initialScale, initialDelayRenderTimeout, initialMediaCacheSizeInBytes, initialContainer, initialVideoCodec, initialAudioCodec, initialAudioBitrate, initialVideoBitrate, initialHardwareAcceleration, initialKeyframeIntervalInSeconds, initialTransparent, initialMuted, initialPageResponsiveness, }) => {
     var _a;
     const context = (0, react_1.useContext)(ResolveCompositionBeforeModal_1.ResolvedCompositionContext);
-    const { setSelectedModal } = (0, react_1.useContext)(modals_1.ModalsContext);
+    const { setSelectedModal } = (0, react_1.useContext)(modals_1.SetSelectedModalContext);
     const { setSidebarCollapsedState } = (0, react_1.useContext)(sidebar_1.SidebarContext);
     const { addClientStillJob, addClientVideoJob } = (0, react_1.useContext)(context_1.RenderQueueContext);
     if (!context) {
@@ -415,7 +415,8 @@ const WebRenderModal = ({ initialFrame, defaultProps, inFrameMark, outFrameMark,
                         ] })
                 ] }), 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 === 'general', onClick: () => setTab('general'), renderIcon: (color) => (jsx_runtime_1.jsx("div", { style: render_modals_1.iconContainer, children: jsx_runtime_1.jsx(file_1.FileIcon, { color: color, style: render_modals_1.icon }) })), children: "General" }), jsx_runtime_1.jsx(vertical_1.VerticalTab, { style: render_modals_1.horizontalTab, selected: tab === 'data', onClick: () => setTab('data'), renderIcon: (color) => (jsx_runtime_1.jsx("div", { style: render_modals_1.iconContainer, children: jsx_runtime_1.jsx(input_props_1.InputPropsIcon, { color: color, style: render_modals_1.icon }) })), children: "Input Props" }), renderMode !== 'audio' ? (jsx_runtime_1.jsx(vertical_1.VerticalTab, { style: render_modals_1.horizontalTab, selected: tab === 'picture', onClick: () => setTab('picture'), renderIcon: (color) => (jsx_runtime_1.jsx("div", { style: render_modals_1.iconContainer, children: jsx_runtime_1.jsx(frame_1.PicIcon, { color: color, style: render_modals_1.icon }) })), children: "Picture" })) : null, renderMode === 'video' || renderMode === 'audio' ? (jsx_runtime_1.jsx(vertical_1.VerticalTab, { style: render_modals_1.horizontalTab, selected: tab === 'audio', onClick: () => setTab('audio'), renderIcon: (color) => (jsx_runtime_1.jsx("div", { style: render_modals_1.iconContainer, children: jsx_runtime_1.jsx(audio_1.AudioIcon, { color: color, style: render_modals_1.icon }) })), children: "Audio" })) : null, jsx_runtime_1.jsx(vertical_1.VerticalTab, { style: render_modals_1.horizontalTab, selected: tab === 'advanced', onClick: () => setTab('advanced'), renderIcon: (color) => (jsx_runtime_1.jsx("div", { style: render_modals_1.iconContainer, children: jsx_runtime_1.jsx(gear_1.GearIcon, { color: color, style: render_modals_1.icon }) })), children: "Other" }), jsx_runtime_1.jsx(vertical_1.VerticalTab, { style: render_modals_1.horizontalTab, selected: false, onClick: () => setSelectedModal({
-                                    type: 'configure-license',
+                                    type: 'settings',
+                                    initialTab: 'license',
                                     initialPublicLicenseKey: publicLicenseKey,
                                 }), 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" })] }), jsx_runtime_1.jsx("div", { style: render_modals_1.optionsPanel, className: is_menu_item_1.VERTICAL_SCROLLBAR_CLASSNAME, children: tab === 'general' ? (jsx_runtime_1.jsx(WebRenderModalBasic_1.WebRenderModalBasic, { renderMode: renderMode, resolvedComposition: resolvedComposition, imageFormat: imageFormat, setStillFormat: setStillFormat, frame: frame, onFrameChanged: onFrameChanged, onFrameSetDirectly: onFrameSetDirectly, container: container, setContainerFormat: setContainerFormat, setCodec: setCodecWithContainer, encodableVideoCodecs: encodableVideoCodecs, effectiveVideoCodec: effectiveVideoCodec, startFrame: finalStartFrame, setStartFrame: setStartFrame, endFrame: finalEndFrame, setEndFrame: setEndFrame, outName: outName, onOutNameChange: onOutNameChange, validationMessage: outnameValidation.valid ? null : outnameValidation.error.message, logLevel: logLevel, setLogLevel: setLogLevel })) : tab === 'data' ? (jsx_runtime_1.jsx(DataEditor_1.DataEditor, { defaultProps: inputProps, setDefaultProps: setInputProps, unresolvedComposition: unresolvedComposition, propsEditType: "input-props", canSaveDefaultProps: {
                                 canUpdate: false,

package/dist/components/RenderQueue/RenderQueueError.js

@@ -10,7 +10,7 @@ const outputLocation = {
     ...item_style_1.renderQueueItemSubtitleStyle,
 };
 const RenderQueueError = ({ job }) => {
-    const { setSelectedModal } = (0, react_1.useContext)(modals_1.ModalsContext);
+    const { setSelectedModal } = (0, react_1.useContext)(modals_1.SetSelectedModalContext);
     const { tabIndex } = (0, z_index_1.useZIndex)();
     const onClick = (0, react_1.useCallback)(() => {
         setSelectedModal({

package/dist/components/RenderQueue/RenderQueueItemStatus.js

@@ -52,7 +52,7 @@ const invisibleStyle = {
     display: 'flex',
 };
 const RenderQueueItemStatus = ({ job }) => {
-    const { setSelectedModal } = (0, react_1.useContext)(modals_1.ModalsContext);
+    const { setSelectedModal } = (0, react_1.useContext)(modals_1.SetSelectedModalContext);
     const [hovered, setHovered] = react_1.default.useState(false);
     const isClientJob = (0, context_1.isClientRenderJob)(job);
     const onPointerEnter = (0, react_1.useCallback)(() => {

package/dist/components/RenderQueue/RenderQueueProgressMessage.js

@@ -15,7 +15,7 @@ const RenderQueueProgressMessage = ({ job }) => {
     if (job.status !== 'running') {
         throw new Error('should not have rendered this component');
     }
-    const { setSelectedModal } = (0, react_1.useContext)(modals_1.ModalsContext);
+    const { setSelectedModal } = (0, react_1.useContext)(modals_1.SetSelectedModalContext);
     const { tabIndex } = (0, z_index_1.useZIndex)();
     const isClientJob = (0, context_1.isClientRenderJob)(job);
     const onClick = (0, react_1.useCallback)(() => {

package/dist/components/RenderQueue/RenderQueueRepeat.js

@@ -9,7 +9,7 @@ const modals_1 = require("../../state/modals");
 const InlineAction_1 = require("../InlineAction");
 const context_1 = require("./context");
 const RenderQueueRepeatItem = ({ job }) => {
-    const { setSelectedModal } = (0, react_1.useContext)(modals_1.ModalsContext);
+    const { setSelectedModal } = (0, react_1.useContext)(modals_1.SetSelectedModalContext);
     const isClientJob = (0, context_1.isClientRenderJob)(job);
     const onClick = (0, react_1.useCallback)((e) => {
         e.stopPropagation();

package/dist/components/SelectedOutlineElement.js

@@ -956,7 +956,7 @@ const SelectedOutlineElement = ({ allDragTargets, allDragOutlines, allRotationDr
     const selectAsset = (0, use_select_asset_1.useSelectAsset)();
     const selectComposition = (0, InitialCompositionLoader_1.useSelectComposition)();
     const { compositions } = (0, react_1.useContext)(remotion_1.Internals.CompositionManager);
-    const { setSelectedModal } = (0, react_1.useContext)(modals_1.ModalsContext);
+    const { setSelectedModal } = (0, react_1.useContext)(modals_1.SetSelectedModalContext);
     const resolveOriginalLocation = react_1.default.useCallback(async (resolveTarget) => {
         const stack = resolveTarget.sequence.getStack();
         if (!stack) {

package/dist/components/SelectedOutlineOverlay.js

@@ -43,6 +43,7 @@ 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");
@@ -99,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') {
@@ -114,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, }) => {
@@ -424,7 +425,7 @@ const SelectedOutlineOverlay = ({ compositionHeight, compositionWidth, scale, tr
     const { hoveredSequence, setHoveredSequence } = (0, react_1.useContext)(timeline_sequence_hover_1.TimelineSequenceHoverContext);
     const { editorShowGuides, guidesList } = (0, react_1.useContext)(editor_guides_1.EditorShowGuidesContext);
     const isFullscreen = (0, use_is_fullscreen_1.useIsFullscreen)();
-    const { frameBack, frameForward, getCurrentFrame, seek } = player_1.PlayerInternals.usePlayer();
+    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)([]);
@@ -458,6 +459,44 @@ 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 (isFullscreen ||
             !(0, interactivity_enabled_1.isStudioSelectionEnabled)() ||
@@ -479,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');
             }
@@ -490,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,
@@ -502,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);
@@ -550,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' &&
@@ -696,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'
@@ -713,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'
@@ -725,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
@@ -768,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/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