@remotion/studio 4.0.477 → 4.0.479

package/dist/components/InspectorSequenceSection.js

@@ -0,0 +1,147 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.InspectorSequenceSection = exports.hasSequenceControls = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const client_id_1 = require("../helpers/client-id");
+const colors_1 = require("../helpers/colors");
+const timeline_layout_1 = require("../helpers/timeline-layout");
+const plus_1 = require("../icons/plus");
+const modals_1 = require("../state/modals");
+const InlineAction_1 = require("./InlineAction");
+const styles_1 = require("./InspectorPanel/styles");
+const TimelineExpandedRow_1 = require("./Timeline/TimelineExpandedRow");
+const use_timeline_expanded_tree_1 = require("./Timeline/use-timeline-expanded-tree");
+const container = {
+    color: 'white',
+    display: 'flex',
+    flexDirection: 'column',
+    fontFamily: 'Arial, Helvetica, sans-serif',
+    fontSize: 12,
+};
+const emptyState = {
+    color: colors_1.LIGHT_TEXT,
+    fontFamily: 'sans-serif',
+    fontSize: 12,
+    lineHeight: 1.4,
+    padding: '0 12px 8px',
+};
+const divider = {
+    backgroundColor: colors_1.LINE_COLOR,
+    flexShrink: 0,
+    height: 1,
+    margin: '4px 0',
+};
+const controlsEffectsDivider = {
+    ...divider,
+    margin: '8px 0 4px',
+};
+const effectsHeaderTitle = {
+    ...styles_1.sectionHeaderTitle,
+    flexShrink: 1,
+};
+const plusIcon = {
+    width: 15,
+    height: 15,
+};
+const isEffectsRoot = (node) => {
+    if (node.kind !== 'group' || node.effectInfo !== null) {
+        return false;
+    }
+    const { auxiliaryKeys } = node.nodePathInfo;
+    return auxiliaryKeys[auxiliaryKeys.length - 1] === 'effects';
+};
+const getInspectorExpansionKey = (nodePathInfo) => {
+    return JSON.stringify(nodePathInfo);
+};
+const hasSequenceControls = (sequence) => {
+    return sequence.controls !== null;
+};
+exports.hasSequenceControls = hasSequenceControls;
+const InspectorSequenceSection = ({ sequence, validatedLocation, nodePathInfo, keyframeDisplayOffset, renderSectionHeader, }) => {
+    const { tree } = (0, use_timeline_expanded_tree_1.useTimelineExpandedTree)({
+        sequence,
+        nodePathInfo,
+    });
+    const [collapsedKeys, setCollapsedKeys] = (0, react_1.useState)(() => new Set());
+    const { previewServerState } = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx);
+    const { setSelectedModal } = (0, react_1.useContext)(modals_1.ModalsContext);
+    const getIsExpanded = (0, react_1.useCallback)((candidate) => {
+        return !collapsedKeys.has(getInspectorExpansionKey(candidate));
+    }, [collapsedKeys]);
+    const toggleTrack = (0, react_1.useCallback)((candidate) => {
+        setCollapsedKeys((prev) => {
+            const key = getInspectorExpansionKey(candidate);
+            const next = new Set(prev);
+            if (next.has(key)) {
+                next.delete(key);
+            }
+            else {
+                next.add(key);
+            }
+            return next;
+        });
+    }, []);
+    const { controlRows, effectRows } = (0, react_1.useMemo)(() => {
+        const controlNodes = [];
+        let effectsRoot = null;
+        for (const node of tree) {
+            if (isEffectsRoot(node)) {
+                effectsRoot = node;
+            }
+            else {
+                controlNodes.push(node);
+            }
+        }
+        return {
+            controlRows: (0, timeline_layout_1.flattenVisibleTreeNodes)({
+                nodes: controlNodes,
+                getIsExpanded,
+            }),
+            effectRows: effectsRoot === null
+                ? []
+                : (0, timeline_layout_1.flattenVisibleTreeNodes)({
+                    nodes: effectsRoot.children,
+                    getIsExpanded,
+                }),
+        };
+    }, [getIsExpanded, tree]);
+    const { schema } = sequence.controls;
+    const showEffectsSection = nodePathInfo.supportsEffects || effectRows.length > 0;
+    const showControlsEffectsDivider = controlRows.length > 0 && showEffectsSection;
+    const canAddEffect = nodePathInfo.supportsEffects &&
+        previewServerState.type === 'connected' &&
+        Boolean(validatedLocation.source);
+    const onAddEffect = (0, react_1.useCallback)(() => {
+        if (!canAddEffect || previewServerState.type !== 'connected') {
+            return;
+        }
+        setSelectedModal({
+            type: 'add-effect',
+            clientId: previewServerState.clientId,
+            fileName: validatedLocation.source,
+            nodePath: nodePathInfo.sequenceSubscriptionKey,
+        });
+    }, [
+        canAddEffect,
+        nodePathInfo.sequenceSubscriptionKey,
+        previewServerState,
+        setSelectedModal,
+        validatedLocation.source,
+    ]);
+    const renderEffectsHeader = () => {
+        return renderSectionHeader(jsx_runtime_1.jsxs("div", { style: styles_1.sectionHeaderRow, children: [
+                jsx_runtime_1.jsx("div", { style: effectsHeaderTitle, children: "Effects" }), jsx_runtime_1.jsx(InlineAction_1.InlineAction, { disabled: !canAddEffect, onClick: onAddEffect, title: canAddEffect ? 'Add effect' : undefined, renderAction: (color) => jsx_runtime_1.jsx(plus_1.Plus, { color: color, style: plusIcon }) })] }));
+    };
+    const renderRow = ({ node, depth }) => {
+        return (jsx_runtime_1.jsx(TimelineExpandedRow_1.TimelineExpandedRow, { node: node, depth: depth, nestedDepth: 0, rowDepthBase: 0, getIsExpanded: getIsExpanded, toggleTrack: toggleTrack, validatedLocation: validatedLocation, nodePath: nodePathInfo.sequenceSubscriptionKey, schema: schema, keyframeDisplayOffset: keyframeDisplayOffset, keyframeControlsMode: "inspector" }, JSON.stringify(node.nodePathInfo)));
+    };
+    if (controlRows.length === 0 && !showEffectsSection) {
+        return (jsx_runtime_1.jsxs("div", { style: container, children: [
+                jsx_runtime_1.jsx("div", { style: divider }), jsx_runtime_1.jsx("div", { style: emptyState, children: "No schema" })
+            ] }));
+    }
+    return (jsx_runtime_1.jsxs("div", { style: container, children: [
+            jsx_runtime_1.jsx("div", { style: divider }), controlRows.length > 0 ? renderSectionHeader('Controls') : null, controlRows.map(renderRow), showEffectsSection ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [showControlsEffectsDivider ? (jsx_runtime_1.jsx("div", { style: controlsEffectsDivider })) : null, renderEffectsHeader(), effectRows.length === 0 ? (jsx_runtime_1.jsx("div", { style: emptyState, children: "None" })) : (effectRows.map(renderRow))] })) : null] }));
+};
+exports.InspectorSequenceSection = InspectorSequenceSection;

package/dist/components/InspectorSourceLocation.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+import type { OriginalPosition } from '../error-overlay/react-overlay/utils/get-source-map';
+export declare const InspectorSourceLocation: React.FC<{
+    readonly location: OriginalPosition | null;
+    readonly canOpen: boolean;
+    readonly onOpen: () => void;
+}>;

package/dist/components/InspectorSourceLocation.js

@@ -0,0 +1,71 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.InspectorSourceLocation = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const colors_1 = require("../helpers/colors");
+const format_file_location_1 = require("../helpers/format-file-location");
+const source_attribution_1 = require("./Timeline/TimelineStack/source-attribution");
+const sourceLocationStyle = {
+    alignSelf: 'flex-start',
+    appearance: 'none',
+    backgroundColor: colors_1.BACKGROUND,
+    border: 'none',
+    boxSizing: 'border-box',
+    display: 'block',
+    fontFamily: 'sans-serif',
+    fontSize: 12,
+    height: 18,
+    lineHeight: '18px',
+    margin: 0,
+    maxWidth: '100%',
+    overflow: 'hidden',
+    padding: 0,
+    textAlign: 'left',
+    textDecoration: 'none',
+    textOverflow: 'ellipsis',
+    whiteSpace: 'nowrap',
+    width: 'fit-content',
+};
+const InspectorSourceLocation = ({ location, canOpen, onOpen }) => {
+    const [hovered, setHovered] = (0, react_1.useState)(false);
+    const validLocation = (0, react_1.useMemo)(() => {
+        if (!(location === null || location === void 0 ? void 0 : location.source) || location.line === null) {
+            return null;
+        }
+        return location;
+    }, [location]);
+    const fileLocation = (0, react_1.useMemo)(() => {
+        if (!validLocation) {
+            return null;
+        }
+        return (0, format_file_location_1.formatFileLocation)({
+            location: validLocation,
+            root: window.remotion_cwd,
+        });
+    }, [validLocation]);
+    const label = (0, react_1.useMemo)(() => {
+        if (!validLocation) {
+            return null;
+        }
+        return (0, source_attribution_1.getOriginalSourceAttribution)(validLocation);
+    }, [validLocation]);
+    const style = (0, react_1.useMemo)(() => {
+        return {
+            ...sourceLocationStyle,
+            color: hovered ? colors_1.LIGHT_COLOR : colors_1.LIGHT_TEXT,
+            cursor: canOpen ? 'pointer' : 'default',
+        };
+    }, [canOpen, hovered]);
+    const onClick = (0, react_1.useCallback)(() => {
+        if (!canOpen) {
+            return;
+        }
+        onOpen();
+    }, [canOpen, onOpen]);
+    if (!label) {
+        return null;
+    }
+    return (jsx_runtime_1.jsx("button", { type: "button", style: style, title: fileLocation !== null && fileLocation !== void 0 ? fileLocation : undefined, onClick: onClick, onPointerEnter: () => setHovered(true), onPointerLeave: () => setHovered(false), children: label }));
+};
+exports.InspectorSourceLocation = InspectorSourceLocation;

package/dist/components/MenuToolbar.d.ts

@@ -1,4 +1,5 @@
 import React from 'react';
+export declare const MENU_TOOLBAR_HEIGHT = 30;
 export declare const MenuToolbar: React.FC<{
     readonly readOnlyStudio: boolean;
 }>;

package/dist/components/MenuToolbar.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.MenuToolbar = void 0;
+exports.MenuToolbar = exports.MENU_TOOLBAR_HEIGHT = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const colors_1 = require("../helpers/colors");
@@ -12,13 +12,16 @@ const MenuBuildIndicator_1 = require("./MenuBuildIndicator");
 const SidebarCollapserControls_1 = require("./SidebarCollapserControls");
 const UndoRedoButtons_1 = require("./UndoRedoButtons");
 const UpdateCheck_1 = require("./UpdateCheck");
+exports.MENU_TOOLBAR_HEIGHT = 30;
 const row = {
     alignItems: 'center',
     flexDirection: 'row',
     display: 'flex',
     color: 'white',
     borderBottom: '1px solid black',
+    boxSizing: 'border-box',
     fontSize: 13,
+    height: exports.MENU_TOOLBAR_HEIGHT,
     paddingLeft: 6,
     paddingRight: 10,
     backgroundColor: colors_1.BACKGROUND,

package/dist/components/Modals.js

@@ -10,6 +10,7 @@ const client_id_1 = require("../helpers/client-id");
 const modals_1 = require("../state/modals");
 const AskAiModal_1 = require("./AskAiModal");
 const ConfirmationDialog_1 = require("./ConfirmationDialog");
+const EffectPickerModal_1 = require("./EffectPickerModal");
 const InstallPackage_1 = require("./InstallPackage");
 const DeleteComposition_1 = require("./NewComposition/DeleteComposition");
 const DeleteFolder_1 = require("./NewComposition/DeleteFolder");
@@ -22,7 +23,6 @@ const QuickSwitcher_1 = __importDefault(require("./QuickSwitcher/QuickSwitcher")
 const RenderStatusModal_1 = require("./RenderModal/RenderStatusModal");
 const ServerRenderModal_1 = require("./RenderModal/ServerRenderModal");
 const WebRenderModal_1 = require("./RenderModal/WebRenderModal");
-const EasingEditorModal_1 = require("./Timeline/EasingEditorModal");
 const KeyframeSettingsModal_1 = require("./Timeline/KeyframeSettingsModal");
 const UpdateModal_1 = require("./UpdateModal/UpdateModal");
 const Modals = ({ readOnlyStudio }) => {
@@ -30,8 +30,8 @@ const Modals = ({ readOnlyStudio }) => {
     const { selectedModal: modalContextType } = (0, react_1.useContext)(modals_1.ModalsContext);
     const canRender = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx).previewServerState.type ===
         'connected';
-    return (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [modalContextType && modalContextType.type === 'duplicate-comp' && (jsx_runtime_1.jsx(DuplicateComposition_1.DuplicateComposition, { compositionType: modalContextType.compositionType, compositionId: modalContextType.compositionId })), modalContextType && modalContextType.type === 'delete-comp' && (jsx_runtime_1.jsx(DeleteComposition_1.DeleteComposition, { compositionId: modalContextType.compositionId })), modalContextType && modalContextType.type === 'rename-comp' && (jsx_runtime_1.jsx(RenameComposition_1.RenameComposition, { compositionId: modalContextType.compositionId })), modalContextType && modalContextType.type === 'delete-folder' && (jsx_runtime_1.jsx(DeleteFolder_1.DeleteFolder, { folderName: modalContextType.folderName, parentName: modalContextType.parentName, stack: modalContextType.stack })), modalContextType && modalContextType.type === 'rename-folder' && (jsx_runtime_1.jsx(RenameFolder_1.RenameFolder, { folderName: modalContextType.folderName, parentName: modalContextType.parentName, stack: modalContextType.stack })), modalContextType && modalContextType.type === 'rename-static-file' && (jsx_runtime_1.jsx(RenameStaticFile_1.RenameStaticFileModal, { relativePath: modalContextType.relativePath })), modalContextType && modalContextType.type === 'input-props-override' && (jsx_runtime_1.jsx(OverrideInputProps_1.OverrideInputPropsModal, {})), modalContextType && modalContextType.type === 'keyframe-settings' && (jsx_runtime_1.jsx(KeyframeSettingsModal_1.KeyframeSettingsModal, { state: modalContextType })), modalContextType && modalContextType.type === 'easing-editor' && (jsx_runtime_1.jsx(EasingEditorModal_1.EasingEditorModal, { state: modalContextType })), modalContextType && modalContextType.type === 'web-render' && (jsx_runtime_1.jsx(WebRenderModal_1.WebRenderModalWithLoader, { ...modalContextType })), modalContextType &&
+    return (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [modalContextType && modalContextType.type === 'duplicate-comp' && (jsx_runtime_1.jsx(DuplicateComposition_1.DuplicateComposition, { compositionType: modalContextType.compositionType, compositionId: modalContextType.compositionId })), modalContextType && modalContextType.type === 'delete-comp' && (jsx_runtime_1.jsx(DeleteComposition_1.DeleteComposition, { compositionId: modalContextType.compositionId })), modalContextType && modalContextType.type === 'rename-comp' && (jsx_runtime_1.jsx(RenameComposition_1.RenameComposition, { compositionId: modalContextType.compositionId })), modalContextType && modalContextType.type === 'delete-folder' && (jsx_runtime_1.jsx(DeleteFolder_1.DeleteFolder, { folderName: modalContextType.folderName, parentName: modalContextType.parentName, stack: modalContextType.stack })), modalContextType && modalContextType.type === 'rename-folder' && (jsx_runtime_1.jsx(RenameFolder_1.RenameFolder, { folderName: modalContextType.folderName, parentName: modalContextType.parentName, stack: modalContextType.stack })), modalContextType && modalContextType.type === 'rename-static-file' && (jsx_runtime_1.jsx(RenameStaticFile_1.RenameStaticFileModal, { relativePath: modalContextType.relativePath })), modalContextType && modalContextType.type === 'input-props-override' && (jsx_runtime_1.jsx(OverrideInputProps_1.OverrideInputPropsModal, {})), modalContextType && modalContextType.type === 'keyframe-settings' && (jsx_runtime_1.jsx(KeyframeSettingsModal_1.KeyframeSettingsModal, { state: modalContextType })), modalContextType && modalContextType.type === 'web-render' && (jsx_runtime_1.jsx(WebRenderModal_1.WebRenderModalWithLoader, { ...modalContextType })), modalContextType &&
                 modalContextType.type === 'server-render' &&
-                (canRender || modalContextType.readOnlyStudio) ? (jsx_runtime_1.jsx(ServerRenderModal_1.RenderModalWithLoader, { readOnlyStudio: (_a = modalContextType.readOnlyStudio) !== null && _a !== void 0 ? _a : false, initialFrame: modalContextType.initialFrame, initialDarkMode: modalContextType.initialDarkMode, compositionId: modalContextType.compositionId, initialVideoImageFormat: modalContextType.initialVideoImageFormat, initialJpegQuality: modalContextType.initialJpegQuality, initialScale: modalContextType.initialScale, initialLogLevel: modalContextType.initialLogLevel, initialOffthreadVideoCacheSizeInBytes: modalContextType.initialOffthreadVideoCacheSizeInBytes, initialOffthreadVideoThreads: modalContextType.initialOffthreadVideoThreads, initialMediaCacheSizeInBytes: modalContextType.initialMediaCacheSizeInBytes, initialConcurrency: modalContextType.initialConcurrency, maxConcurrency: modalContextType.maxConcurrency, minConcurrency: modalContextType.minConcurrency, initialStillImageFormat: modalContextType.initialStillImageFormat, initialMuted: modalContextType.initialMuted, initialEnforceAudioTrack: modalContextType.initialEnforceAudioTrack, initialProResProfile: modalContextType.initialProResProfile, initialx264Preset: modalContextType.initialx264Preset, initialGopSize: modalContextType.initialGopSize, initialPixelFormat: modalContextType.initialPixelFormat, initialAudioBitrate: modalContextType.initialAudioBitrate, initialVideoBitrate: modalContextType.initialVideoBitrate, initialEveryNthFrame: modalContextType.initialEveryNthFrame, initialNumberOfGifLoops: modalContextType.initialNumberOfGifLoops, initialDelayRenderTimeout: modalContextType.initialDelayRenderTimeout, initialEnvVariables: modalContextType.initialEnvVariables, initialDisableWebSecurity: modalContextType.initialDisableWebSecurity, initialGl: modalContextType.initialOpenGlRenderer, initialHeadless: modalContextType.initialHeadless, initialIgnoreCertificateErrors: modalContextType.initialIgnoreCertificateErrors, initialEncodingBufferSize: modalContextType.initialEncodingBufferSize, initialEncodingMaxRate: modalContextType.initialEncodingMaxRate, initialUserAgent: modalContextType.initialUserAgent, initialColorSpace: modalContextType.initialColorSpace, initialMultiProcessOnLinux: modalContextType.initialMultiProcessOnLinux, initialRepro: modalContextType.initialRepro, initialBeep: modalContextType.initialBeep, initialForSeamlessAacConcatenation: modalContextType.initialForSeamlessAacConcatenation, defaultProps: modalContextType.defaultProps, inFrameMark: modalContextType.inFrameMark, outFrameMark: modalContextType.outFrameMark, defaultConfigurationAudioCodec: modalContextType.defaultConfigurationAudioCodec, defaultConfigurationVideoCodec: modalContextType.defaultConfigurationVideoCodec, renderTypeOfLastRender: modalContextType.renderTypeOfLastRender, defaultMetadata: modalContextType.defaulMetadata, initialHardwareAcceleration: modalContextType.initialHardwareAcceleration, initialSampleRate: modalContextType.initialSampleRate, initialChromeMode: modalContextType.initialChromeMode, renderDefaults: modalContextType.renderDefaults })) : null, modalContextType && modalContextType.type === 'render-progress' && (jsx_runtime_1.jsx(RenderStatusModal_1.RenderStatusModal, { jobId: modalContextType.jobId })), modalContextType && modalContextType.type === 'update' && (jsx_runtime_1.jsx(UpdateModal_1.UpdateModal, { info: modalContextType.info, knownBugs: modalContextType.knownBugs })), modalContextType && modalContextType.type === 'install-packages' && (jsx_runtime_1.jsx(InstallPackage_1.InstallPackageModal, { packageManager: modalContextType.packageManager })), modalContextType && modalContextType.type === 'quick-switcher' && (jsx_runtime_1.jsx(QuickSwitcher_1.default, { readOnlyStudio: readOnlyStudio, invocationTimestamp: modalContextType.invocationTimestamp, initialMode: modalContextType.mode })), modalContextType && modalContextType.type === 'confirmation-dialog' && (jsx_runtime_1.jsx(ConfirmationDialog_1.ConfirmationDialog, { state: modalContextType })), process.env.ASK_AI_ENABLED && jsx_runtime_1.jsx(AskAiModal_1.AskAiModal, {})] }));
+                (canRender || modalContextType.readOnlyStudio) ? (jsx_runtime_1.jsx(ServerRenderModal_1.RenderModalWithLoader, { readOnlyStudio: (_a = modalContextType.readOnlyStudio) !== null && _a !== void 0 ? _a : false, initialFrame: modalContextType.initialFrame, initialDarkMode: modalContextType.initialDarkMode, compositionId: modalContextType.compositionId, initialVideoImageFormat: modalContextType.initialVideoImageFormat, initialJpegQuality: modalContextType.initialJpegQuality, initialScale: modalContextType.initialScale, initialLogLevel: modalContextType.initialLogLevel, initialOffthreadVideoCacheSizeInBytes: modalContextType.initialOffthreadVideoCacheSizeInBytes, initialOffthreadVideoThreads: modalContextType.initialOffthreadVideoThreads, initialMediaCacheSizeInBytes: modalContextType.initialMediaCacheSizeInBytes, initialConcurrency: modalContextType.initialConcurrency, maxConcurrency: modalContextType.maxConcurrency, minConcurrency: modalContextType.minConcurrency, initialStillImageFormat: modalContextType.initialStillImageFormat, initialMuted: modalContextType.initialMuted, initialEnforceAudioTrack: modalContextType.initialEnforceAudioTrack, initialProResProfile: modalContextType.initialProResProfile, initialx264Preset: modalContextType.initialx264Preset, initialGopSize: modalContextType.initialGopSize, initialPixelFormat: modalContextType.initialPixelFormat, initialAudioBitrate: modalContextType.initialAudioBitrate, initialVideoBitrate: modalContextType.initialVideoBitrate, initialEveryNthFrame: modalContextType.initialEveryNthFrame, initialNumberOfGifLoops: modalContextType.initialNumberOfGifLoops, initialDelayRenderTimeout: modalContextType.initialDelayRenderTimeout, initialEnvVariables: modalContextType.initialEnvVariables, initialDisableWebSecurity: modalContextType.initialDisableWebSecurity, initialGl: modalContextType.initialOpenGlRenderer, initialHeadless: modalContextType.initialHeadless, initialIgnoreCertificateErrors: modalContextType.initialIgnoreCertificateErrors, initialEncodingBufferSize: modalContextType.initialEncodingBufferSize, initialEncodingMaxRate: modalContextType.initialEncodingMaxRate, initialUserAgent: modalContextType.initialUserAgent, initialColorSpace: modalContextType.initialColorSpace, initialMultiProcessOnLinux: modalContextType.initialMultiProcessOnLinux, initialRepro: modalContextType.initialRepro, initialBeep: modalContextType.initialBeep, initialForSeamlessAacConcatenation: modalContextType.initialForSeamlessAacConcatenation, defaultProps: modalContextType.defaultProps, inFrameMark: modalContextType.inFrameMark, outFrameMark: modalContextType.outFrameMark, defaultConfigurationAudioCodec: modalContextType.defaultConfigurationAudioCodec, defaultConfigurationVideoCodec: modalContextType.defaultConfigurationVideoCodec, renderTypeOfLastRender: modalContextType.renderTypeOfLastRender, defaultMetadata: modalContextType.defaulMetadata, initialHardwareAcceleration: modalContextType.initialHardwareAcceleration, initialSampleRate: modalContextType.initialSampleRate, initialChromeMode: modalContextType.initialChromeMode, renderDefaults: modalContextType.renderDefaults })) : null, modalContextType && modalContextType.type === 'render-progress' && (jsx_runtime_1.jsx(RenderStatusModal_1.RenderStatusModal, { jobId: modalContextType.jobId })), modalContextType && modalContextType.type === 'update' && (jsx_runtime_1.jsx(UpdateModal_1.UpdateModal, { info: modalContextType.info, knownBugs: modalContextType.knownBugs })), modalContextType && modalContextType.type === 'install-packages' && (jsx_runtime_1.jsx(InstallPackage_1.InstallPackageModal, { packageManager: modalContextType.packageManager })), modalContextType && modalContextType.type === 'quick-switcher' && (jsx_runtime_1.jsx(QuickSwitcher_1.default, { readOnlyStudio: readOnlyStudio, invocationTimestamp: modalContextType.invocationTimestamp, initialMode: modalContextType.mode })), modalContextType && modalContextType.type === 'add-effect' && (jsx_runtime_1.jsx(EffectPickerModal_1.EffectPickerModal, { state: modalContextType })), modalContextType && modalContextType.type === 'confirmation-dialog' && (jsx_runtime_1.jsx(ConfirmationDialog_1.ConfirmationDialog, { state: modalContextType })), process.env.ASK_AI_ENABLED && jsx_runtime_1.jsx(AskAiModal_1.AskAiModal, {})] }));
 };
 exports.Modals = Modals;

package/dist/components/NewComposition/InputDragger.js

@@ -207,7 +207,7 @@ const InputDraggerForwardRefFn = ({ onValueChange, onValueChangeEnd, min: _min,
         });
     }, [_min, _step, snapToStep]);
     if (inputFallback) {
-        return (jsx_runtime_1.jsx(z_index_1.HigherZIndex, { onEscape: onEscape, onOutsideClick: noop_1.noop, children: jsx_runtime_1.jsx(RemInput_1.RemotionInput, { ref: fallbackRef, autoFocus: true, onKeyPress: onKeyPress, onBlur: onBlur, onChange: onInputChange, min: _min, max: _max, step: deriveStep, defaultValue: value, status: status, pattern: '[0-9]*[.]?[0-9]*', rightAlign: rightAlign, ...props, ...(small ? { style: { padding: '4px 6px', fontSize: 12 } } : {}) }) }));
+        return (jsx_runtime_1.jsx(z_index_1.HigherZIndex, { onEscape: onEscape, onOutsideClick: noop_1.noop, children: jsx_runtime_1.jsx(RemInput_1.RemotionInput, { ref: fallbackRef, autoFocus: true, onKeyPress: onKeyPress, onBlur: onBlur, onChange: onInputChange, min: _min, max: _max, step: deriveStep, defaultValue: value, status: status, pattern: '[0-9]*[.]?[0-9]*', rightAlign: rightAlign, small: small, ...props }) }));
     }
     return (jsx_runtime_1.jsx("button", { ref: ref, type: "button", className: '__remotion_input_dragger', style: style, onClick: onClick, onFocus: onFocus, onPointerDown: onPointerDown, children: jsx_runtime_1.jsx("span", { style: span, children: formatter(value) }) }));
 };

package/dist/components/NewComposition/RemInput.d.ts

@@ -4,6 +4,7 @@ export type RemInputStatus = 'error' | 'warning' | 'ok';
 type Props = React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement> & {
     readonly status: RemInputStatus;
     readonly rightAlign: boolean;
+    readonly small?: boolean;
 };
 export declare const INPUT_HORIZONTAL_PADDING = 8;
 export declare const RightAlignInput: React.FC<PropsWithChildren>;

package/dist/components/NewComposition/RemInput.js

@@ -20,6 +20,11 @@ exports.inputBaseStyle = {
     borderWidth: 1,
     fontSize: 14,
 };
+const compactInputStyle = {
+    fontSize: 12,
+    lineHeight: '16px',
+    padding: '4px 6px',
+};
 const getInputBorderColor = ({ status, isFocused, isHovered, }) => status === 'warning'
     ? colors_1.WARNING_COLOR
     : status === 'error'
@@ -30,7 +35,7 @@ const getInputBorderColor = ({ status, isFocused, isHovered, }) => status === 'w
                 ? colors_1.INPUT_BORDER_COLOR_HOVERED
                 : colors_1.INPUT_BORDER_COLOR_UNHOVERED;
 exports.getInputBorderColor = getInputBorderColor;
-const RemInputForwardRef = ({ status, rightAlign, ...props }, ref) => {
+const RemInputForwardRef = ({ status, rightAlign, small = false, ...props }, ref) => {
     const [isFocused, setIsFocused] = (0, react_1.useState)(false);
     const [isHovered, setIsHovered] = (0, react_1.useState)(false);
     const inputRef = (0, react_1.useRef)(null);
@@ -40,12 +45,13 @@ const RemInputForwardRef = ({ status, rightAlign, ...props }, ref) => {
         return {
             backgroundColor: colors_1.INPUT_BACKGROUND,
             ...exports.inputBaseStyle,
+            ...(small ? compactInputStyle : null),
             width: '100%',
             borderColor: (0, exports.getInputBorderColor)({ isFocused, isHovered, status }),
             textAlign: rightAlign ? 'right' : 'left',
             ...((_a = props.style) !== null && _a !== void 0 ? _a : {}),
         };
-    }, [isFocused, isHovered, rightAlign, props.style, status]);
+    }, [isFocused, isHovered, rightAlign, props.style, small, status]);
     (0, react_1.useImperativeHandle)(ref, () => {
         return inputRef.current;
     }, []);

package/dist/components/NewComposition/RemTextarea.d.ts

@@ -1,6 +1,7 @@
 import React from 'react';
 type Props = React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLTextAreaElement>, HTMLTextAreaElement> & {
     readonly status: 'error' | 'warning' | 'ok';
+    readonly small?: boolean;
 };
 export declare const RemTextarea: React.ForwardRefExoticComponent<Omit<Props, "ref"> & React.RefAttributes<HTMLTextAreaElement>>;
 export {};

package/dist/components/NewComposition/RemTextarea.js

@@ -16,7 +16,12 @@ const inputBaseStyle = {
     resize: 'none',
     overflowX: 'hidden',
 };
-const RemTextareaFRFunction = ({ status, ...props }, ref) => {
+const compactInputStyle = {
+    fontSize: 12,
+    lineHeight: '16px',
+    padding: '4px 6px',
+};
+const RemTextareaFRFunction = ({ status, small = false, ...props }, ref) => {
     const [isFocused, setIsFocused] = (0, react_1.useState)(false);
     const [isHovered, setIsHovered] = (0, react_1.useState)(false);
     const inputRef = (0, react_1.useRef)(null);
@@ -29,11 +34,12 @@ const RemTextareaFRFunction = ({ status, ...props }, ref) => {
         return {
             backgroundColor: colors_1.INPUT_BACKGROUND,
             ...inputBaseStyle,
+            ...(small ? compactInputStyle : null),
             width: '100%',
             borderColor: (0, RemInput_1.getInputBorderColor)({ isFocused, isHovered, status }),
             ...((_a = props.style) !== null && _a !== void 0 ? _a : {}),
         };
-    }, [isFocused, isHovered, props.style, status]);
+    }, [isFocused, isHovered, props.style, small, status]);
     (0, react_1.useEffect)(() => {
         if (!inputRef.current) {
             return;

package/dist/components/NewComposition/ValidationMessage.d.ts

@@ -1,9 +1,12 @@
 import type { SVGProps } from 'react';
 import React from 'react';
 export declare const WarningTriangle: React.FC<SVGProps<SVGSVGElement>>;
+type ValidationMessageSize = 'default' | 'compact';
 export declare const ValidationMessage: React.FC<{
     readonly message: string;
     readonly align: 'flex-start' | 'flex-end';
     readonly type: 'warning' | 'error';
     readonly action?: React.ReactNode;
+    readonly size?: ValidationMessageSize;
 }>;
+export {};

package/dist/components/NewComposition/ValidationMessage.js

@@ -14,6 +14,11 @@ const style = {
     height: 12,
     flexShrink: 0,
 };
+const compactStyle = {
+    ...style,
+    width: 10,
+    height: 10,
+};
 const container = {
     maxWidth: 500,
 };
@@ -22,15 +27,21 @@ const label = {
     color: 'white',
     fontFamily: 'sans-serif',
 };
-const ValidationMessage = ({ message, align, type, action }) => {
+const compactLabel = {
+    ...label,
+    fontSize: 12,
+};
+const ValidationMessage = ({ message, align, type, action, size = 'default' }) => {
+    const iconStyle = size === 'compact' ? compactStyle : style;
+    const labelStyle = size === 'compact' ? compactLabel : label;
     const finalStyle = (0, react_1.useMemo)(() => {
         return {
-            ...style,
+            ...iconStyle,
             fill: type === 'warning' ? colors_1.WARNING_COLOR : colors_1.FAIL_COLOR,
         };
-    }, [type]);
+    }, [iconStyle, type]);
     return (jsx_runtime_1.jsx("div", { style: container, children: jsx_runtime_1.jsxs(layout_1.Row, { align: "center", justify: align, children: [
-                jsx_runtime_1.jsx(exports.WarningTriangle, { style: finalStyle }), jsx_runtime_1.jsx(layout_1.Spacing, { x: 1 }), jsx_runtime_1.jsx("div", { style: label, children: message }), action ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
-                        jsx_runtime_1.jsx(layout_1.Spacing, { x: 1 }), action] })) : null] }) }));
+                jsx_runtime_1.jsx(exports.WarningTriangle, { style: finalStyle }), jsx_runtime_1.jsx(layout_1.Spacing, { x: size === 'compact' ? 0.75 : 1 }), jsx_runtime_1.jsx("div", { style: labelStyle, children: message }), action ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
+                        jsx_runtime_1.jsx(layout_1.Spacing, { x: size === 'compact' ? 0.75 : 1 }), action] })) : null] }) }));
 };
 exports.ValidationMessage = ValidationMessage;

package/dist/components/OptionsPanel.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-type OptionsSidebarPanel = 'input-props' | 'renders' | 'visual-controls';
+type OptionsSidebarPanel = 'inspector' | 'renders';
 export declare const persistSelectedOptionsSidebarPanel: (panel: OptionsSidebarPanel) => void;
 export declare const optionsSidebarTabs: React.RefObject<{
     selectRendersPanel: () => void;

package/dist/components/OptionsPanel.js

@@ -7,9 +7,8 @@ const remotion_1 = require("remotion");
 const colors_1 = require("../helpers/colors");
 const mobile_layout_1 = require("../helpers/mobile-layout");
 const show_browser_rendering_1 = require("../helpers/show-browser-rendering");
-const VisualControls_1 = require("../visual-controls/VisualControls");
-const DefaultPropsEditor_1 = require("./DefaultPropsEditor");
 const get_zod_if_possible_1 = require("./get-zod-if-possible");
+const InspectorPanel_1 = require("./InspectorPanel");
 const NotificationCenter_1 = require("./Notifications/NotificationCenter");
 const deep_equal_1 = require("./RenderModal/SchemaEditor/deep-equal");
 const extract_enum_json_paths_1 = require("./RenderModal/SchemaEditor/extract-enum-json-paths");
@@ -18,20 +17,16 @@ const RenderQueue_1 = require("./RenderQueue");
 const actions_1 = require("./RenderQueue/actions");
 const RendersTab_1 = require("./RendersTab");
 const Tabs_1 = require("./Tabs");
-const VisualControlsContent_1 = require("./VisualControls/VisualControlsContent");
 const localStorageKey = 'remotion.sidebarPanel';
 const getSelectedPanel = (renderingAvailable) => {
     if (!renderingAvailable) {
-        return 'input-props';
+        return 'inspector';
     }
     const panel = localStorage.getItem(localStorageKey);
     if (panel === 'renders') {
         return 'renders';
     }
-    if (panel === 'visual-controls') {
-        return 'visual-controls';
-    }
-    return 'input-props';
+    return 'inspector';
 };
 const tabsContainer = {
     backgroundColor: colors_1.BACKGROUND,
@@ -45,7 +40,6 @@ const OptionsPanel = ({ readOnlyStudio }) => {
     const { props, updateProps } = (0, react_1.useContext)(remotion_1.Internals.EditorPropsContext);
     const renderingAvailable = !readOnlyStudio || show_browser_rendering_1.SHOW_BROWSER_RENDERING;
     const isMobileLayout = (0, mobile_layout_1.useMobileLayout)();
-    const visualControlsTabActivated = (0, react_1.useContext)(VisualControls_1.VisualControlsTabActivatedContext);
     const container = (0, react_1.useMemo)(() => ({
         height: '100%',
         width: '100%',
@@ -55,18 +49,14 @@ const OptionsPanel = ({ readOnlyStudio }) => {
         flex: 1,
     }), [isMobileLayout]);
     const [panel, setPanel] = (0, react_1.useState)(() => getSelectedPanel(renderingAvailable));
-    const onPropsSelected = (0, react_1.useCallback)(() => {
-        setPanel('input-props');
-        (0, exports.persistSelectedOptionsSidebarPanel)('input-props');
+    const onInspectorSelected = (0, react_1.useCallback)(() => {
+        setPanel('inspector');
+        (0, exports.persistSelectedOptionsSidebarPanel)('inspector');
     }, []);
     const onRendersSelected = (0, react_1.useCallback)(() => {
         setPanel('renders');
         (0, exports.persistSelectedOptionsSidebarPanel)('renders');
     }, []);
-    const onVisualControlsSelected = (0, react_1.useCallback)(() => {
-        setPanel('visual-controls');
-        (0, exports.persistSelectedOptionsSidebarPanel)('visual-controls');
-    }, []);
     (0, react_1.useImperativeHandle)(exports.optionsSidebarTabs, () => {
         return {
             selectRendersPanel: () => {
@@ -186,6 +176,7 @@ const OptionsPanel = ({ readOnlyStudio }) => {
         e.stopPropagation();
     }, []);
     return (jsx_runtime_1.jsxs("div", { style: container, className: "css-reset", onPointerDown: onPointerDown, children: [
-            jsx_runtime_1.jsx("div", { style: tabsContainer, children: jsx_runtime_1.jsxs(Tabs_1.Tabs, { children: [visualControlsTabActivated ? (jsx_runtime_1.jsx(Tabs_1.Tab, { selected: panel === 'visual-controls', onClick: onVisualControlsSelected, children: "Controls" })) : null, jsx_runtime_1.jsxs(Tabs_1.Tab, { selected: panel === 'input-props', onClick: onPropsSelected, style: { justifyContent: 'space-between' }, children: ["Props", hasLocalModifications ? (jsx_runtime_1.jsx(SchemaResetButton_1.SchemaResetButton, { onClick: resetToOriginal })) : null] }), renderingAvailable ? (jsx_runtime_1.jsx(RendersTab_1.RendersTab, { onClick: onRendersSelected, selected: panel === 'renders' })) : null] }) }), panel === 'input-props' ? (composition ? (jsx_runtime_1.jsx(DefaultPropsEditor_1.DefaultPropsEditor, { unresolvedComposition: composition, defaultProps: currentDefaultProps, setDefaultProps: setDefaultProps, propsEditType: "default-props" }, composition.id)) : null) : panel === 'visual-controls' && visualControlsTabActivated ? (jsx_runtime_1.jsx(VisualControlsContent_1.VisualControlsContent, {})) : !renderingAvailable ? null : (jsx_runtime_1.jsx(RenderQueue_1.RenderQueue, {}))] }));
+            jsx_runtime_1.jsx("div", { style: tabsContainer, children: jsx_runtime_1.jsxs(Tabs_1.Tabs, { children: [
+                        jsx_runtime_1.jsxs(Tabs_1.Tab, { selected: panel === 'inspector', onClick: onInspectorSelected, style: { justifyContent: 'space-between' }, children: ["Inspector", hasLocalModifications ? (jsx_runtime_1.jsx(SchemaResetButton_1.SchemaResetButton, { onClick: resetToOriginal })) : null] }), renderingAvailable ? (jsx_runtime_1.jsx(RendersTab_1.RendersTab, { onClick: onRendersSelected, selected: panel === 'renders' })) : null] }) }), panel === 'inspector' ? (jsx_runtime_1.jsx(InspectorPanel_1.InspectorPanel, { composition: composition, currentDefaultProps: currentDefaultProps, setDefaultProps: setDefaultProps })) : !renderingAvailable ? null : (jsx_runtime_1.jsx(RenderQueue_1.RenderQueue, {}))] }));
 };
 exports.OptionsPanel = OptionsPanel;

package/dist/components/QuickSwitcher/QuickSwitcherContent.js

@@ -19,6 +19,7 @@ const AlgoliaCredit_1 = require("./AlgoliaCredit");
 const fuzzy_search_1 = require("./fuzzy-search");
 const NoResults_1 = require("./NoResults");
 const QuickSwitcherResult_1 = require("./QuickSwitcherResult");
+const shared_1 = require("./shared");
 const input = {
     width: '100%',
 };
@@ -56,12 +57,6 @@ const content = {
     flexDirection: 'row',
     alignItems: 'center',
 };
-const loopIndex = (index, length) => {
-    if (index < 0) {
-        index += length;
-    }
-    return index % length;
-};
 const stripQuery = (query) => {
     if (query.startsWith('>') || query.startsWith('?')) {
         return query.substring(1).trim();
@@ -232,7 +227,7 @@ const QuickSwitcherContent = ({ initialMode, invocationTimestamp, readOnlyStudio
     const onTextChange = (0, react_1.useCallback)((e) => {
         setState({ query: e.target.value, selectedIndex: 0 });
     }, []);
-    const selectedIndexRounded = loopIndex(state.selectedIndex, resultsArray.length);
+    const selectedIndexRounded = (0, shared_1.loopIndex)(state.selectedIndex, resultsArray.length);
     const onActionsSelected = (0, react_1.useCallback)(() => {
         var _a;
         setState((s) => ({

package/dist/components/QuickSwitcher/QuickSwitcherResult.js

@@ -8,6 +8,7 @@ const use_keybinding_1 = require("../../helpers/use-keybinding");
 const still_1 = require("../../icons/still");
 const video_1 = require("../../icons/video");
 const layout_1 = require("../layout");
+const shared_1 = require("./shared");
 const container = {
     paddingLeft: 16,
     paddingRight: 16,
@@ -70,15 +71,7 @@ const QuickSwitcherResult = ({ result, selected }) => {
             binding.unregister();
         };
     }, [keybindings, result.onSelected, selected]);
-    (0, react_1.useEffect)(() => {
-        var _a;
-        if (selected) {
-            (_a = ref.current) === null || _a === void 0 ? void 0 : _a.scrollIntoView({
-                block: 'nearest',
-                inline: 'center',
-            });
-        }
-    }, [selected]);
+    (0, shared_1.useScrollIntoViewOnSelected)(ref, selected);
     const style = (0, react_1.useMemo)(() => {
         return {
             ...container,
@@ -96,7 +89,7 @@ const QuickSwitcherResult = ({ result, selected }) => {
                 : selected || hovered
                     ? 'white'
                     : colors_1.LIGHT_TEXT,
-            fontSize: 15,
+            fontSize: shared_1.QUICK_SWITCHER_RESULT_LABEL_FONT_SIZE,
         };
     }, [hovered, result.type, selected]);
     return (jsx_runtime_1.jsxs("div", { ref: ref, style: style, onClick: result.onSelected, children: [result.type === 'composition' ? (result.compositionType === 'still' ? (jsx_runtime_1.jsx(still_1.StillIcon, { color: selected ? 'white' : colors_1.LIGHT_TEXT, style: iconStyle })) : (jsx_runtime_1.jsx(video_1.FilmIcon, { color: selected ? 'white' : colors_1.LIGHT_TEXT, style: iconStyle }))) : null, jsx_runtime_1.jsx(layout_1.Spacing, { x: 1 }), jsx_runtime_1.jsx("div", { style: labelContainer, children: result.type === 'search-result' ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [

package/dist/components/QuickSwitcher/shared.d.ts

@@ -0,0 +1,4 @@
+import { type RefObject } from 'react';
+export declare const QUICK_SWITCHER_RESULT_LABEL_FONT_SIZE = 15;
+export declare const loopIndex: (index: number, length: number) => number;
+export declare const useScrollIntoViewOnSelected: <T extends HTMLElement>(ref: RefObject<T | null>, selected: boolean) => void;

package/dist/components/QuickSwitcher/shared.js

@@ -0,0 +1,24 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useScrollIntoViewOnSelected = exports.loopIndex = exports.QUICK_SWITCHER_RESULT_LABEL_FONT_SIZE = void 0;
+const react_1 = require("react");
+exports.QUICK_SWITCHER_RESULT_LABEL_FONT_SIZE = 15;
+const loopIndex = (index, length) => {
+    if (index < 0) {
+        index += length;
+    }
+    return index % length;
+};
+exports.loopIndex = loopIndex;
+const useScrollIntoViewOnSelected = (ref, selected) => {
+    (0, react_1.useEffect)(() => {
+        var _a;
+        if (selected) {
+            (_a = ref.current) === null || _a === void 0 ? void 0 : _a.scrollIntoView({
+                block: 'nearest',
+                inline: 'center',
+            });
+        }
+    }, [ref, selected]);
+};
+exports.useScrollIntoViewOnSelected = useScrollIntoViewOnSelected;