@remotion/studio 4.0.499 → 4.0.501

package/dist/components/InspectorPanel/CompositionInspector.js

@@ -6,6 +6,7 @@ const react_1 = require("react");
 const interactivity_enabled_1 = require("../../helpers/interactivity-enabled");
 const frame_1 = require("../../icons/frame");
 const solid_1 = require("../../icons/solid");
+const video_1 = require("../../icons/video");
 const VisualControls_1 = require("../../visual-controls/VisualControls");
 const DefaultPropsEditor_1 = require("../DefaultPropsEditor");
 const get_zod_if_possible_1 = require("../get-zod-if-possible");
@@ -25,14 +26,15 @@ const actionIconStyle = {
     height: 18,
     width: 18,
 };
-const CompositionActions = () => {
-    const { canInsertAsset, canInsertSolid, canShowInsertAsset, canShowInsertSolid, insertAsset, insertSolid, } = (0, use_composition_actions_1.useCompositionActions)();
-    if (!canShowInsertAsset && !canShowInsertSolid) {
+const CompositionActions = ({ readOnlyStudio }) => {
+    const { canInsertAsset, canInsertComposition, canInsertSolid, canShowInsertAsset, canShowInsertComposition, canShowInsertSolid, insertAsset, insertComposition, insertSolid, } = (0, use_composition_actions_1.useCompositionActions)();
+    if ((readOnlyStudio && !canShowInsertSolid) ||
+        (!canShowInsertAsset && !canShowInsertComposition && !canShowInsertSolid)) {
         return null;
     }
-    return (jsx_runtime_1.jsxs(common_1.InspectorActionSection, { children: [canShowInsertSolid ? (jsx_runtime_1.jsx(common_1.InspectorInlineAction, { disabled: !canInsertSolid, onClick: insertSolid, renderIcon: (color) => (jsx_runtime_1.jsx(solid_1.SolidIcon, { color: color, style: actionIconStyle })), children: "Add Solid" })) : null, canShowInsertAsset ? (jsx_runtime_1.jsx(common_1.InspectorInlineAction, { disabled: !canInsertAsset, onClick: insertAsset, renderIcon: (color) => (jsx_runtime_1.jsx(frame_1.PicIcon, { color: color, style: actionIconStyle })), children: "Add asset..." })) : null] }));
+    return (jsx_runtime_1.jsxs(common_1.InspectorActionSection, { children: [canShowInsertSolid ? (jsx_runtime_1.jsx(common_1.InspectorInlineAction, { disabled: !canInsertSolid, onClick: insertSolid, renderIcon: (color) => (jsx_runtime_1.jsx(solid_1.SolidIcon, { color: color, style: actionIconStyle })), children: "Add Solid" })) : null, canShowInsertAsset ? (jsx_runtime_1.jsx(common_1.InspectorInlineAction, { disabled: !canInsertAsset, onClick: insertAsset, renderIcon: (color) => (jsx_runtime_1.jsx(frame_1.PicIcon, { color: color, style: actionIconStyle })), children: "Add asset..." })) : null, canShowInsertComposition ? (jsx_runtime_1.jsx(common_1.InspectorInlineAction, { disabled: !canInsertComposition, onClick: insertComposition, renderIcon: (color) => (jsx_runtime_1.jsx(video_1.FilmIcon, { color: color, style: actionIconStyle })), children: "Add composition..." })) : null] }));
 };
-const CompositionDefaultPropsSection = ({ composition, currentDefaultProps, setDefaultProps }) => {
+const CompositionDefaultPropsSection = ({ composition, currentDefaultProps, readOnlyStudio, setDefaultProps }) => {
     var _a;
     const z = (0, get_zod_if_possible_1.useZodIfPossible)();
     const canSaveDefaultProps = (0, react_1.useContext)(ObserveDefaultPropsContext_1.ObserveDefaultPropsContext);
@@ -79,7 +81,7 @@ const CompositionDefaultPropsSection = ({ composition, currentDefaultProps, setD
         propsEditType: 'default-props',
         showCannotSaveDefaultPropsWarning: canShowDefaultPropsSection,
     });
-    if (!canShowDefaultPropsSection) {
+    if (readOnlyStudio || !canShowDefaultPropsSection) {
         return null;
     }
     return (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
@@ -92,9 +94,10 @@ const CompositionDefaultPropsSection = ({ composition, currentDefaultProps, setD
                 ] })
         ] }));
 };
-const CompositionVisualControlsSection = () => {
+const CompositionVisualControlsSection = ({ readOnlyStudio }) => {
     const { handles: visualControlHandles } = (0, react_1.useContext)(VisualControls_1.VisualControlsContext);
-    const hasVisualControls = (0, interactivity_enabled_1.isStudioInteractivityEnabled)() &&
+    const hasVisualControls = !readOnlyStudio &&
+        (0, interactivity_enabled_1.isStudioInteractivityEnabled)() &&
         Object.keys(visualControlHandles).length > 0;
     if (!hasVisualControls) {
         return null;
@@ -109,7 +112,7 @@ const CompositionInspector = ({ composition, currentDefaultProps, readOnlyStudio
     return (jsx_runtime_1.jsxs("div", { style: styles_1.scrollableContainer, className: is_menu_item_1.VERTICAL_SCROLLBAR_CLASSNAME, children: [
             jsx_runtime_1.jsxs("div", { style: styles_1.inspectorOverviewSection, children: [
                     jsx_runtime_1.jsx(CompositionInspectorHeader_1.CompositionInspectorHeader, {}), jsx_runtime_1.jsx(common_1.InspectorSectionDivider, {}), jsx_runtime_1.jsx(CompositionMetadata_1.CompositionMetadata, { compositionId: composition.id, disabled: readOnlyStudio, stack: composition.stack })
-                ] }), jsx_runtime_1.jsx(CompositionDefaultPropsSection, { composition: composition, currentDefaultProps: currentDefaultProps, setDefaultProps: setDefaultProps }), jsx_runtime_1.jsx(CompositionVisualControlsSection, {}), jsx_runtime_1.jsx(CompositionActions, {})
+                ] }), jsx_runtime_1.jsx(CompositionDefaultPropsSection, { composition: composition, currentDefaultProps: currentDefaultProps, readOnlyStudio: readOnlyStudio, setDefaultProps: setDefaultProps }), jsx_runtime_1.jsx(CompositionVisualControlsSection, { readOnlyStudio: readOnlyStudio }), jsx_runtime_1.jsx(CompositionActions, { readOnlyStudio: readOnlyStudio })
         ] }));
 };
 exports.CompositionInspector = CompositionInspector;

package/dist/components/InspectorPanel/CompositionMetadata.js

@@ -7,6 +7,8 @@ const remotion_1 = require("remotion");
 const colors_1 = require("../../helpers/colors");
 const is_composition_still_1 = require("../../helpers/is-composition-still");
 const resolved_stack_to_symbolicated_1 = require("../../helpers/resolved-stack-to-symbolicated");
+const caret_1 = require("../../icons/caret");
+const InlineDropdown_1 = require("../InlineDropdown");
 const InputDragger_1 = require("../NewComposition/InputDragger");
 const NotificationCenter_1 = require("../Notifications/NotificationCenter");
 const actions_1 = require("../RenderQueue/actions");
@@ -47,7 +49,57 @@ const dimensionsControls = {
     lineHeight: '16px',
     minWidth: 0,
 };
-const CompositionMetadataValue = ({ compositionId, computed, disabled, field, onPendingValue, onPendingValueAccepted, onPendingValueFailed, pendingValue, resolvedConfig, symbolicatedStack, value, }) => {
+const presetButtonIcon = {
+    alignItems: 'center',
+    color: 'inherit',
+    display: 'flex',
+    flexShrink: 0,
+    height: 12,
+    justifyContent: 'center',
+    width: 12,
+};
+const presetDropdownContainer = {
+    display: 'flex',
+    flexShrink: 0,
+};
+const metadataLabelControls = {
+    alignItems: 'center',
+    color: 'inherit',
+    display: 'flex',
+    fontFamily: 'sans-serif',
+    fontSize: 13,
+    gap: 2,
+    lineHeight: '18px',
+    minWidth: 0,
+};
+const metadataLabelText = {
+    color: 'inherit',
+    fontFamily: 'sans-serif',
+    fontSize: 13,
+    lineHeight: '18px',
+    minWidth: 0,
+    overflow: 'hidden',
+    textOverflow: 'ellipsis',
+    whiteSpace: 'nowrap',
+};
+const dimensionPresets = [
+    { height: 1080, label: 'Full HD', width: 1920 },
+    { height: 1920, label: 'Full HD', width: 1080 },
+    { height: 720, label: 'HD', width: 1280 },
+    { height: 1280, label: 'HD', width: 720 },
+    { height: 1080, label: 'Square', width: 1080 },
+];
+const frameRatePresets = [23.976, 24, 25, 29.97, 30, 50, 60];
+const PresetDropdown = ({ disabled, title, values, visible }) => {
+    const renderAction = (0, react_1.useCallback)((color) => {
+        return (jsx_runtime_1.jsx("span", { style: presetButtonIcon, children: jsx_runtime_1.jsx(caret_1.CaretDown, { color: color, small: true }) }));
+    }, []);
+    return (jsx_runtime_1.jsx("div", { style: {
+            ...presetDropdownContainer,
+            visibility: visible ? 'visible' : 'hidden',
+        }, children: jsx_runtime_1.jsx(InlineDropdown_1.InlineDropdown, { disabled: disabled, renderAction: renderAction, title: title, values: values }) }));
+};
+const CompositionMetadataValue = ({ computed, disabled, field, onSave, pendingValue, value }) => {
     var _a;
     const [dragValue, setDragValue] = (0, react_1.useState)(null);
     const save = (0, react_1.useCallback)((newValue) => {
@@ -56,55 +108,9 @@ const CompositionMetadataValue = ({ compositionId, computed, disabled, field, on
             setDragValue(null);
             return;
         }
-        if (symbolicatedStack === null) {
-            setDragValue(null);
-            (0, NotificationCenter_1.showNotification)('Could not determine where this composition is defined', 2000);
-            return;
-        }
-        const codemod = {
-            type: 'update-composition-metadata',
-            idToUpdate: compositionId,
-            newDurationInFrames: field === 'durationInFrames' ? newValue : null,
-            newFps: field === 'fps' ? newValue : null,
-            newHeight: field === 'height' ? newValue : null,
-            newWidth: field === 'width' ? newValue : null,
-        };
-        const optimisticValue = {
-            baseline: resolvedConfig,
-            status: 'saving',
-            value: newValue,
-        };
-        onPendingValue(field, optimisticValue);
         setDragValue(null);
-        (0, actions_1.applyCodemod)({
-            codemod,
-            dryRun: false,
-            signal: new AbortController().signal,
-            symbolicatedStack,
-        })
-            .then((result) => {
-            if (!result.success) {
-                onPendingValueFailed(field, optimisticValue);
-                (0, NotificationCenter_1.showNotification)(`Could not update composition ${field}: ${result.reason}`, 2000);
-                return;
-            }
-            onPendingValueAccepted(field, optimisticValue);
-        })
-            .catch((error) => {
-            onPendingValueFailed(field, optimisticValue);
-            (0, NotificationCenter_1.showNotification)(`Could not update composition ${field}: ${error.message}`, 2000);
-        });
-    }, [
-        compositionId,
-        field,
-        onPendingValue,
-        onPendingValueAccepted,
-        onPendingValueFailed,
-        pendingValue === null || pendingValue === void 0 ? void 0 : pendingValue.value,
-        resolvedConfig,
-        symbolicatedStack,
-        value,
-    ]);
+        onSave({ [field]: newValue });
+    }, [field, onSave, pendingValue === null || pendingValue === void 0 ? void 0 : pendingValue.value, value]);
     const isFps = field === 'fps';
     const formatValue = (0, react_1.useCallback)((newValue) => {
         const numberValue = Number(newValue);
@@ -141,9 +147,6 @@ const CompositionMetadata = ({ compositionId, disabled, stack }) => {
             pending,
         }));
     }, [resolvedConfig]);
-    const onPendingValue = (0, react_1.useCallback)((field, value) => {
-        setPendingValues((pending) => ({ ...pending, [field]: value }));
-    }, []);
     const onPendingValueAccepted = (0, react_1.useCallback)((field, value) => {
         setPendingValues((pending) => {
             if (resolvedConfigRef.current === null) {
@@ -160,6 +163,84 @@ const CompositionMetadata = ({ compositionId, disabled, stack }) => {
     const onPendingValueFailed = (0, react_1.useCallback)((field, value) => {
         setPendingValues((pending) => (0, optimistic_composition_metadata_1.failPendingCompositionMetadataValue)({ field, pending, value }));
     }, []);
+    const currentValues = (0, react_1.useMemo)(() => {
+        var _a, _b, _c, _d;
+        return ({
+            durationInFrames: (_a = video === null || video === void 0 ? void 0 : video.durationInFrames) !== null && _a !== void 0 ? _a : 0,
+            fps: (_b = video === null || video === void 0 ? void 0 : video.fps) !== null && _b !== void 0 ? _b : 0,
+            height: (_c = video === null || video === void 0 ? void 0 : video.height) !== null && _c !== void 0 ? _c : 0,
+            width: (_d = video === null || video === void 0 ? void 0 : video.width) !== null && _d !== void 0 ? _d : 0,
+        });
+    }, [video]);
+    const saveMetadata = (0, react_1.useCallback)((newValues) => {
+        var _a, _b, _c, _d;
+        if (disabled || resolvedConfig === null) {
+            return;
+        }
+        const changedFields = Object.keys(newValues).filter((field) => {
+            var _a;
+            var _b;
+            return newValues[field] !==
+                ((_b = (_a = pendingValues[field]) === null || _a === void 0 ? void 0 : _a.value) !== null && _b !== void 0 ? _b : currentValues[field]);
+        });
+        if (changedFields.length === 0) {
+            return;
+        }
+        if (symbolicatedStack === null) {
+            (0, NotificationCenter_1.showNotification)('Could not determine where this composition is defined', 2000);
+            return;
+        }
+        const optimisticValues = changedFields.reduce((values, field) => {
+            values[field] = {
+                baseline: resolvedConfig,
+                status: 'saving',
+                value: newValues[field],
+            };
+            return values;
+        }, {});
+        const codemod = {
+            type: 'update-composition-metadata',
+            idToUpdate: compositionId,
+            newDurationInFrames: (_a = newValues.durationInFrames) !== null && _a !== void 0 ? _a : null,
+            newFps: (_b = newValues.fps) !== null && _b !== void 0 ? _b : null,
+            newHeight: (_c = newValues.height) !== null && _c !== void 0 ? _c : null,
+            newWidth: (_d = newValues.width) !== null && _d !== void 0 ? _d : null,
+        };
+        setPendingValues((pending) => ({ ...pending, ...optimisticValues }));
+        (0, actions_1.applyCodemod)({
+            codemod,
+            dryRun: false,
+            signal: new AbortController().signal,
+            symbolicatedStack,
+        })
+            .then((result) => {
+            if (!result.success) {
+                for (const field of changedFields) {
+                    onPendingValueFailed(field, optimisticValues[field]);
+                }
+                (0, NotificationCenter_1.showNotification)(`Could not update composition metadata: ${result.reason}`, 2000);
+                return;
+            }
+            for (const field of changedFields) {
+                onPendingValueAccepted(field, optimisticValues[field]);
+            }
+        })
+            .catch((error) => {
+            for (const field of changedFields) {
+                onPendingValueFailed(field, optimisticValues[field]);
+            }
+            (0, NotificationCenter_1.showNotification)(`Could not update composition metadata: ${error.message}`, 2000);
+        });
+    }, [
+        compositionId,
+        currentValues,
+        disabled,
+        onPendingValueAccepted,
+        onPendingValueFailed,
+        pendingValues,
+        resolvedConfig,
+        symbolicatedStack,
+    ]);
     if (video === null || resolvedConfig === null) {
         return null;
     }
@@ -172,11 +253,43 @@ const CompositionMetadata = ({ compositionId, disabled, stack }) => {
     const fpsIsComputed = (metadataSource === null || metadataSource === void 0 ? void 0 : metadataSource.fps) === 'calculate-metadata';
     const durationIsComputed = (metadataSource === null || metadataSource === void 0 ? void 0 : metadataSource.durationInFrames) === 'calculate-metadata';
     const isStill = (0, is_composition_still_1.isCompositionStill)(video);
-    return (jsx_runtime_1.jsxs("div", { style: compositionMetadataContainer, children: [
-            jsx_runtime_1.jsx(common_1.InspectorDetailRow, { label: "Dimensions", children: jsx_runtime_1.jsxs("div", { style: dimensionsControls, children: [
-                        jsx_runtime_1.jsx(CompositionMetadataValue, { compositionId: compositionId, computed: widthIsComputed, disabled: disabled, field: "width", onPendingValue: onPendingValue, onPendingValueAccepted: onPendingValueAccepted, onPendingValueFailed: onPendingValueFailed, pendingValue: (_a = pendingValues.width) !== null && _a !== void 0 ? _a : null, resolvedConfig: resolvedConfig, symbolicatedStack: symbolicatedStack, value: video.width }), jsx_runtime_1.jsx(CompositionMetadataValue, { compositionId: compositionId, computed: heightIsComputed, disabled: disabled, field: "height", onPendingValue: onPendingValue, onPendingValueAccepted: onPendingValueAccepted, onPendingValueFailed: onPendingValueFailed, pendingValue: (_b = pendingValues.height) !== null && _b !== void 0 ? _b : null, resolvedConfig: resolvedConfig, symbolicatedStack: symbolicatedStack, value: video.height })
-                    ] }) }), isStill ? null : (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
-                    jsx_runtime_1.jsx(common_1.InspectorDetailRow, { label: "Frame rate", children: jsx_runtime_1.jsx(CompositionMetadataValue, { compositionId: compositionId, computed: fpsIsComputed, disabled: disabled, field: "fps", onPendingValue: onPendingValue, onPendingValueAccepted: onPendingValueAccepted, onPendingValueFailed: onPendingValueFailed, pendingValue: (_c = pendingValues.fps) !== null && _c !== void 0 ? _c : null, resolvedConfig: resolvedConfig, symbolicatedStack: symbolicatedStack, value: video.fps }) }), jsx_runtime_1.jsx(common_1.InspectorDetailRow, { label: "Duration", children: jsx_runtime_1.jsx(CompositionMetadataValue, { compositionId: compositionId, computed: durationIsComputed, disabled: disabled, field: "durationInFrames", onPendingValue: onPendingValue, onPendingValueAccepted: onPendingValueAccepted, onPendingValueFailed: onPendingValueFailed, pendingValue: (_d = pendingValues.durationInFrames) !== null && _d !== void 0 ? _d : null, resolvedConfig: resolvedConfig, symbolicatedStack: symbolicatedStack, value: video.durationInFrames }) })
+    const dimensionPresetValues = dimensionPresets.flatMap((preset, index) => [
+        ...(index === 2 || index === 4
+            ? [{ type: 'divider', id: `dimension-divider-${index}` }]
+            : []),
+        {
+            type: 'item',
+            id: `${preset.width}x${preset.height}`,
+            label: `${preset.width}x${preset.height} (${preset.label})`,
+            value: `${preset.width}x${preset.height}`,
+            onClick: () => {
+                saveMetadata({ height: preset.height, width: preset.width });
+            },
+            keyHint: null,
+            leftItem: null,
+            subMenu: null,
+            quickSwitcherLabel: null,
+        },
+    ]);
+    const frameRatePresetValues = frameRatePresets.map((fps) => ({
+        type: 'item',
+        id: String(fps),
+        label: `${fps} fps`,
+        value: fps,
+        onClick: () => {
+            saveMetadata({ fps });
+        },
+        keyHint: null,
+        leftItem: null,
+        subMenu: null,
+        quickSwitcherLabel: null,
+    }));
+    return (jsx_runtime_1.jsxs("div", { style: compositionMetadataContainer, children: [jsx_runtime_1.jsx(common_1.InspectorDetailRow, { label: (hovered) => (jsx_runtime_1.jsxs("div", { style: metadataLabelControls, children: [
+                        jsx_runtime_1.jsx("span", { style: metadataLabelText, children: "Dimensions" }), disabled || widthIsComputed || heightIsComputed ? null : (jsx_runtime_1.jsx(PresetDropdown, { disabled: pendingValues.width !== undefined ||
+                                pendingValues.height !== undefined, title: "Choose dimension preset", values: dimensionPresetValues, visible: hovered }))] })), children: jsx_runtime_1.jsxs("div", { style: dimensionsControls, children: [
+                        jsx_runtime_1.jsx(CompositionMetadataValue, { computed: widthIsComputed, disabled: disabled, field: "width", onSave: saveMetadata, pendingValue: (_a = pendingValues.width) !== null && _a !== void 0 ? _a : null, value: video.width }), jsx_runtime_1.jsx(CompositionMetadataValue, { computed: heightIsComputed, disabled: disabled, field: "height", onSave: saveMetadata, pendingValue: (_b = pendingValues.height) !== null && _b !== void 0 ? _b : null, value: video.height })
+                    ] }) }), isStill ? null : (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [jsx_runtime_1.jsx(common_1.InspectorDetailRow, { label: (hovered) => (jsx_runtime_1.jsxs("div", { style: metadataLabelControls, children: [
+                                jsx_runtime_1.jsx("span", { style: metadataLabelText, children: "Frame rate" }), disabled || fpsIsComputed ? null : (jsx_runtime_1.jsx(PresetDropdown, { disabled: pendingValues.fps !== undefined, title: "Choose frame rate preset", values: frameRatePresetValues, visible: hovered }))] })), children: jsx_runtime_1.jsx("div", { style: dimensionsControls, children: jsx_runtime_1.jsx(CompositionMetadataValue, { computed: fpsIsComputed, disabled: disabled, field: "fps", onSave: saveMetadata, pendingValue: (_c = pendingValues.fps) !== null && _c !== void 0 ? _c : null, value: video.fps }) }) }), jsx_runtime_1.jsx(common_1.InspectorDetailRow, { label: "Duration", children: jsx_runtime_1.jsx(CompositionMetadataValue, { computed: durationIsComputed, disabled: disabled, field: "durationInFrames", onSave: saveMetadata, pendingValue: (_d = pendingValues.durationInFrames) !== null && _d !== void 0 ? _d : null, value: video.durationInFrames }) })
                 ] }))] }));
 };
 exports.CompositionMetadata = CompositionMetadata;

package/dist/components/InspectorPanel/ConnectedCompositionsSection.d.ts

@@ -1,8 +1,8 @@
 import React from 'react';
 import type { _InternalTypes } from 'remotion';
-import type { TrackWithHash } from '../../helpers/get-timeline-sequence-sort-key';
+import type { TimelineTrackData } from '../../helpers/get-timeline-sequence-sort-key';
 export declare const useConnectedCompositions: ({ track, }: {
-    readonly track: TrackWithHash;
+    readonly track: TimelineTrackData;
 }) => import("remotion").AnyComposition[];
 export declare const ConnectedCompositionsSection: React.FC<{
     readonly connectedCompositions: readonly _InternalTypes['AnyComposition'][];

package/dist/components/InspectorPanel/SelectedInspector.d.ts

@@ -2,4 +2,5 @@ import React from 'react';
 import type { TimelineSelection } from '../Timeline/TimelineSelection';
 export declare const SelectedInspector: React.FC<{
     readonly selection: TimelineSelection;
+    readonly readOnlyStudio: boolean;
 }>;

package/dist/components/InspectorPanel/SelectedInspector.js

@@ -8,9 +8,9 @@ const GuideInspector_1 = require("./GuideInspector");
 const inspector_selection_1 = require("./inspector-selection");
 const KeyframeInspector_1 = require("./KeyframeInspector");
 const SequenceSelectionInspector_1 = require("./SequenceSelectionInspector");
-const SelectedInspector = ({ selection }) => {
+const SelectedInspector = ({ selection, readOnlyStudio }) => {
     if ((0, inspector_selection_1.isSequenceSectionSelection)(selection)) {
-        return jsx_runtime_1.jsx(SequenceSelectionInspector_1.SequenceSelectionInspector, { selection: selection });
+        return (jsx_runtime_1.jsx(SequenceSelectionInspector_1.SequenceSelectionInspector, { selection: selection, readOnlyStudio: readOnlyStudio }));
     }
     if (selection.type === 'keyframe') {
         return jsx_runtime_1.jsx(KeyframeInspector_1.KeyframeInspector, { selection: selection });

package/dist/components/InspectorPanel/SequenceInspectorHeader.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 import type { CodePosition } from '../../error-overlay/react-overlay/utils/get-source-map';
-import type { TrackWithHash } from '../../helpers/get-timeline-sequence-sort-key';
+import type { TimelineTrackData } from '../../helpers/get-timeline-sequence-sort-key';
 type SequenceInspectorSourceLocation = {
     readonly canOpenInEditor: boolean;
     readonly openFileLocation: () => void;
@@ -9,9 +9,9 @@ type SequenceInspectorSourceLocation = {
 export declare const useSequenceInspectorSourceLocation: (sequence: import("remotion").TSequence) => SequenceInspectorSourceLocation;
 export declare const SequenceInspectorHeader: React.FC<{
     readonly sourceLocation: SequenceInspectorSourceLocation;
-    readonly track: TrackWithHash;
+    readonly track: TimelineTrackData;
 }>;
 export declare const SequenceInspectorSections: React.FC<{
-    readonly track: TrackWithHash;
+    readonly track: TimelineTrackData;
 }>;
 export {};

package/dist/components/InspectorPanel/SequenceSelectionInspector.d.ts

@@ -2,4 +2,5 @@ import React from 'react';
 import type { SequenceSectionSelection } from './inspector-selection';
 export declare const SequenceSelectionInspector: React.FC<{
     readonly selection: SequenceSectionSelection;
+    readonly readOnlyStudio: boolean;
 }>;

package/dist/components/InspectorPanel/SequenceSelectionInspector.js

@@ -99,7 +99,7 @@ const SequenceSourceActions = ({ selection, track, validatedSource }) => {
     }, [confirm, selection.nodePathInfo, sourceActionsDisabled]);
     return (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [(freezeFrameMenuItem === null || freezeFrameMenuItem === void 0 ? void 0 : freezeFrameMenuItem.type) === 'item' ? (jsx_runtime_1.jsx(common_1.InspectorInlineAction, { disabled: Boolean(freezeFrameMenuItem.disabled), onClick: () => freezeFrameMenuItem.onClick(freezeFrameMenuItem.id, null), renderIcon: (color) => (jsx_runtime_1.jsx(snowflake_1.SnowflakeIcon, { style: largeActionIconStyle, color: color })), children: freezeFrameMenuItem.label })) : null, jsx_runtime_1.jsx(common_1.InspectorInlineAction, { disabled: sourceActionsDisabled, onClick: onDuplicate, renderIcon: (color) => (jsx_runtime_1.jsx(duplicate_1.DuplicateIcon, { style: largeActionIconStyle, color: color })), children: "Duplicate" }), jsx_runtime_1.jsx(common_1.InspectorInlineAction, { disabled: sourceActionsDisabled, onClick: onDelete, renderIcon: (color) => (jsx_runtime_1.jsx(trash_1.TrashIcon, { style: actionIconStyle, color: color })), children: "Delete" })] }));
 };
-const SequenceExpandedInspector = ({ track }) => {
+const SequenceExpandedInspector = ({ track, readOnlyStudio }) => {
     const { previewServerState } = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx);
     const { selectedItems, selectItems } = (0, TimelineSelection_1.useTimelineSelection)();
     const sourceLocation = (0, SequenceInspectorHeader_1.useSequenceInspectorSourceLocation)(track.sequence);
@@ -131,29 +131,29 @@ const SequenceExpandedInspector = ({ track }) => {
         }
         selectItems([sequenceSelection], { reveal: true });
     }, [selectItems, sequenceSelected, sequenceSelection]);
-    if (previewServerState.type !== 'connected') {
+    if (previewServerState.type !== 'connected' &&
+        !window.remotion_isReadOnlyStudio) {
         return jsx_runtime_1.jsx(common_1.InspectorMessage, { children: "Studio server disconnected" });
     }
     if (!track.nodePathInfo ||
         sequenceSelection === null ||
-        !(0, InspectorSequenceSection_1.hasSequenceControls)(track.sequence) ||
-        !validatedLocation) {
+        !(0, InspectorSequenceSection_1.hasSequenceControls)(track.sequence)) {
         return jsx_runtime_1.jsx(common_1.InspectorMessage, { children: "Sequence inspector unavailable" });
     }
     return (jsx_runtime_1.jsxs("div", { style: styles_1.selectedContainer, className: is_menu_item_1.VERTICAL_SCROLLBAR_CLASSNAME, onPointerDown: selectSequenceOnInspectorPointerDown, children: [
             jsx_runtime_1.jsx(SequenceInspectorHeader_1.SequenceInspectorHeader, { sourceLocation: sourceLocation, track: track }), connectedCompositions.length > 0 ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
                     jsx_runtime_1.jsx(common_1.InspectorSectionDivider, {}), jsx_runtime_1.jsx(ConnectedCompositionsSection_1.ConnectedCompositionsSection, { connectedCompositions: connectedCompositions })
-                ] })) : null, jsx_runtime_1.jsx(InspectorSequenceSection_1.InspectorSequenceSection, { sequence: track.sequence, validatedLocation: validatedLocation, nodePathInfo: track.nodePathInfo, keyframeDisplayOffset: track.keyframeDisplayOffset, renderTransformControls: () => jsx_runtime_1.jsx(AlignmentControls_1.AlignmentControls, { track: track }) }), jsx_runtime_1.jsxs(common_1.InspectorActionSection, { children: [
-                    jsx_runtime_1.jsx(SplitSequenceAction, { selection: sequenceSelection, track: track }), jsx_runtime_1.jsx(SequenceSourceActions, { selection: sequenceSelection, track: track, validatedSource: validatedLocation.source })
-                ] })
-        ] }));
+                ] })) : null, validatedLocation ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [jsx_runtime_1.jsx(InspectorSequenceSection_1.InspectorSequenceSection, { sequence: track.sequence, readOnlyStudio: readOnlyStudio, validatedLocation: validatedLocation, nodePathInfo: track.nodePathInfo, keyframeDisplayOffset: track.keyframeDisplayOffset, renderTransformControls: () => jsx_runtime_1.jsx(AlignmentControls_1.AlignmentControls, { track: track }) }), jsx_runtime_1.jsxs(common_1.InspectorActionSection, { children: [
+                            jsx_runtime_1.jsx(SplitSequenceAction, { selection: sequenceSelection, track: track }), jsx_runtime_1.jsx(SequenceSourceActions, { selection: sequenceSelection, track: track, validatedSource: validatedLocation.source })
+                        ] })
+                ] })) : (jsx_runtime_1.jsx(common_1.InspectorMessage, { children: "Source controls unavailable" }))] }));
 };
-const SequenceSelectionInspector = ({ selection }) => {
+const SequenceSelectionInspector = ({ selection, readOnlyStudio }) => {
     const track = (0, use_track_for_selection_1.useTrackForSelection)(selection);
     if (!track) {
         return jsx_runtime_1.jsx(common_1.InspectorMessage, { children: "Sequence inspector unavailable" });
     }
     const stackKey = track.sequence.getStack();
-    return (jsx_runtime_1.jsx(SequenceExpandedInspector, { track: track }, stackKey !== null && stackKey !== void 0 ? stackKey : track.sequence.id));
+    return (jsx_runtime_1.jsx(SequenceExpandedInspector, { track: track, readOnlyStudio: readOnlyStudio }, stackKey !== null && stackKey !== void 0 ? stackKey : track.sequence.id));
 };
 exports.SequenceSelectionInspector = SequenceSelectionInspector;

package/dist/components/InspectorPanel/common.d.ts

@@ -21,18 +21,31 @@ export declare const InspectorMessage: React.FC<{
     readonly children: React.ReactNode;
 }>;
 export declare const InspectorDetailRow: React.FC<{
-    readonly label: string;
+    readonly label: React.ReactNode | ((hovered: boolean) => React.ReactNode);
     readonly children: React.ReactNode;
 }>;
-export declare const InspectorInlineAction: React.FC<{
-    readonly children: React.ReactNode;
+export type InspectorInlineActionSegment = {
     readonly disabled: boolean;
     readonly onClick: React.MouseEventHandler<HTMLButtonElement>;
+    readonly renderIcon: (color: string) => React.ReactNode;
+    readonly title?: string;
+};
+export type InspectorInlineActionProps = {
+    readonly children: React.ReactNode;
+    readonly disabled: boolean;
+    readonly onClick: React.MouseEventHandler<HTMLButtonElement> | null;
     readonly renderIcon?: (color: string) => React.ReactNode;
     readonly size?: 'default' | 'compact';
     readonly style?: React.CSSProperties;
     readonly title?: string;
-}>;
+    readonly variant?: {
+        readonly type: 'single';
+    } | {
+        readonly type: 'segmented';
+        readonly trailing: InspectorInlineActionSegment;
+    };
+};
+export declare const InspectorInlineAction: React.FC<InspectorInlineActionProps>;
 export declare const InspectorDefaultPropsWarnings: React.FC<{
     readonly warnings: RenderModalWarning[];
 }>;

package/dist/components/InspectorPanel/common.js

@@ -38,9 +38,12 @@ const InspectorBackAction = ({ children, disabled, onClick, title }) => {
 exports.InspectorBackAction = InspectorBackAction;
 const InspectorMessage = ({ children }) => jsx_runtime_1.jsx("div", { style: styles_1.centeredMessage, children: children });
 exports.InspectorMessage = InspectorMessage;
-const InspectorDetailRow = ({ label, children }) => (jsx_runtime_1.jsxs("div", { style: styles_1.detailRow, children: [
-        jsx_runtime_1.jsx("div", { style: styles_1.detailLabel, children: label }), jsx_runtime_1.jsx("div", { style: styles_1.detailValue, children: children })
-    ] }));
+const InspectorDetailRow = ({ label, children }) => {
+    const [hovered, setHovered] = react_1.default.useState(false);
+    return (jsx_runtime_1.jsxs("div", { style: styles_1.detailRow, onPointerEnter: () => setHovered(true), onPointerLeave: () => setHovered(false), children: [
+            jsx_runtime_1.jsx("div", { style: styles_1.detailLabel, children: typeof label === 'function' ? label(hovered) : label }), jsx_runtime_1.jsx("div", { style: styles_1.detailValue, children: children })
+        ] }));
+};
 exports.InspectorDetailRow = InspectorDetailRow;
 const INLINE_LABEL_BUTTON_MARGIN = 4;
 const inlineLabelButton = {
@@ -89,9 +92,39 @@ const inlineLabelIcon = {
     justifyContent: 'center',
     width: 18,
 };
-const InspectorInlineAction = ({ children, disabled, onClick, renderIcon, size = 'default', style, title, }) => {
+const segmentedInlineAction = {
+    display: 'flex',
+    gap: 1,
+    margin: `0 ${INLINE_LABEL_BUTTON_MARGIN}px`,
+    width: `calc(100% - ${INLINE_LABEL_BUTTON_MARGIN * 2}px)`,
+};
+const segmentedMainAction = {
+    borderRadius: '4px 0 0 4px',
+    flex: 1,
+    margin: 0,
+    minWidth: 0,
+    width: 'auto',
+};
+const segmentedTrailingAction = {
+    alignItems: 'center',
+    appearance: 'none',
+    border: 'none',
+    borderRadius: '0 4px 4px 0',
+    display: 'flex',
+    flex: '0 0 28px',
+    justifyContent: 'center',
+    margin: 0,
+    padding: 0,
+    width: 28,
+};
+const hiddenSegmentedTrailingIcon = {
+    ...inlineLabelIcon,
+    opacity: 0,
+};
+const InspectorInlineAction = ({ children, disabled, onClick, renderIcon, size = 'default', style, title, variant = { type: 'single' }, }) => {
     const [hovered, setHovered] = react_1.default.useState(false);
     const color = hovered && !disabled ? colors_1.WHITE : colors_1.LIGHT_TEXT;
+    const isSegmented = variant.type === 'segmented';
     const buttonStyle = react_1.default.useMemo(() => ({
         ...(disabled ? inlineLabelButtonDisabled : inlineLabelButton),
         backgroundColor: (0, colors_1.getBackgroundFromHoverState)({
@@ -100,8 +133,9 @@ const InspectorInlineAction = ({ children, disabled, onClick, renderIcon, size =
         }),
         color,
         ...(size === 'compact' ? compactInlineLabelButton : null),
+        ...(isSegmented ? segmentedMainAction : null),
         ...style,
-    }), [color, disabled, hovered, size, style]);
+    }), [color, disabled, hovered, isSegmented, size, style]);
     const textStyle = react_1.default.useMemo(() => ({
         ...inlineLabelText,
         color,
@@ -112,8 +146,28 @@ const InspectorInlineAction = ({ children, disabled, onClick, renderIcon, size =
     const onPointerLeave = react_1.default.useCallback(() => {
         setHovered(false);
     }, []);
-    return (jsx_runtime_1.jsxs("button", { className: "__remotion-inspector-inline-action", type: "button", disabled: disabled, style: buttonStyle, title: title, onClick: onClick, onPointerEnter: disabled ? undefined : onPointerEnter, onPointerLeave: onPointerLeave, children: [renderIcon ? (jsx_runtime_1.jsx("span", { style: inlineLabelIcon, children: renderIcon(color) })) : null, jsx_runtime_1.jsx("span", { style: textStyle, children: children })
+    const mainContent = (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [renderIcon ? (jsx_runtime_1.jsx("span", { style: inlineLabelIcon, children: renderIcon(color) })) : null, jsx_runtime_1.jsx("span", { style: textStyle, children: children })
         ] }));
+    const mainAction = onClick ? (jsx_runtime_1.jsx("button", { className: "__remotion-inspector-inline-action", type: "button", disabled: disabled, style: buttonStyle, title: title, onClick: onClick, onPointerEnter: disabled || isSegmented ? undefined : onPointerEnter, onPointerLeave: isSegmented ? undefined : onPointerLeave, children: mainContent })) : (jsx_runtime_1.jsx("div", { style: buttonStyle, title: title, children: mainContent }));
+    if (variant.type === 'segmented') {
+        const trailingColor = hovered && !variant.trailing.disabled ? colors_1.WHITE : colors_1.LIGHT_TEXT;
+        const trailingStyle = {
+            ...segmentedTrailingAction,
+            backgroundColor: variant.trailing.disabled
+                ? colors_1.TRANSPARENT
+                : (0, colors_1.getBackgroundFromHoverState)({
+                    hovered,
+                    selected: false,
+                }),
+            height: size === 'compact'
+                ? layout_1.COMPACT_INLINE_ROW_HEIGHT
+                : layout_1.COMPACT_CONTROL_ROW_HEIGHT,
+            opacity: variant.trailing.disabled ? 0.35 : 1,
+        };
+        return (jsx_runtime_1.jsxs("div", { style: segmentedInlineAction, onPointerEnter: onPointerEnter, onPointerLeave: onPointerLeave, children: [mainAction, jsx_runtime_1.jsx("button", { type: "button", disabled: variant.trailing.disabled, style: trailingStyle, title: variant.trailing.title, onClick: variant.trailing.onClick, children: jsx_runtime_1.jsx("span", { style: hovered ? inlineLabelIcon : hiddenSegmentedTrailingIcon, children: variant.trailing.renderIcon(trailingColor) }) })
+            ] }));
+    }
+    return mainAction;
 };
 exports.InspectorInlineAction = InspectorInlineAction;
 const InspectorDefaultPropsWarnings = ({ warnings }) => {

package/dist/components/InspectorPanel/inspector-section-collapse.d.ts

@@ -0,0 +1,22 @@
+import type { SchemaFieldGroup } from '@remotion/studio-shared';
+import { type InteractivitySchema } from 'remotion';
+export type SmartCollapsibleInspectorGroup = Extract<SchemaFieldGroup, 'background' | 'border' | 'border-radius' | 'crop' | 'layout'>;
+export type InspectorSectionActivity = 'active' | 'inactive' | 'unknown';
+type InspectorSectionPropStatus = {
+    readonly status: 'static';
+    readonly codeValue: unknown;
+} | {
+    readonly status: 'computed' | 'keyframed';
+};
+export declare const isSmartCollapsibleInspectorGroup: (group: SchemaFieldGroup) => group is SmartCollapsibleInspectorGroup;
+export declare const isInspectorSectionEffectivelyInactive: ({ group, propStatuses, schema, }: {
+    readonly group: SmartCollapsibleInspectorGroup;
+    readonly propStatuses: Readonly<Record<string, InspectorSectionPropStatus>> | undefined;
+    readonly schema?: InteractivitySchema | undefined;
+}) => boolean;
+export declare const getInspectorSectionActivity: ({ group, propStatuses, schema, }: {
+    readonly group: SmartCollapsibleInspectorGroup;
+    readonly propStatuses: Readonly<Record<string, InspectorSectionPropStatus>> | undefined;
+    readonly schema?: InteractivitySchema | undefined;
+}) => InspectorSectionActivity;
+export {};