@remotion/studio 4.0.498 → 4.0.500

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/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.js

@@ -131,22 +131,22 @@ 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, 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 track = (0, use_track_for_selection_1.useTrackForSelection)(selection);

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/use-composition-actions.js

@@ -34,6 +34,7 @@ const useCompositionActions = () => {
         compositionId: currentCompositionId,
     });
     const canShowInsertSolid = previewInteractive &&
+        !window.remotion_isReadOnlyStudio &&
         (compositionComponentInfo === null || compositionComponentInfo === void 0 ? void 0 : compositionComponentInfo.canAddSequence) === true &&
         currentCompositionId !== null &&
         compositionFile !== null &&

package/dist/components/InspectorPanel/use-track-for-selection.d.ts

@@ -1,2 +1,2 @@
 import type { TimelineSelection } from '../Timeline/TimelineSelection';
-export declare const useTrackForSelection: (selection: TimelineSelection) => import("../../helpers/get-timeline-sequence-sort-key").TrackWithHash | null;
+export declare const useTrackForSelection: (selection: TimelineSelection) => import("../../helpers/get-timeline-sequence-sort-key").TimelineTrackData | null;

package/dist/components/InspectorSequenceSection.js

@@ -6,6 +6,7 @@ const react_1 = require("react");
 const client_id_1 = require("../helpers/client-id");
 const colors_1 = require("../helpers/colors");
 const get_preview_file_type_1 = require("../helpers/get-preview-file-type");
+const interactivity_enabled_1 = require("../helpers/interactivity-enabled");
 const timeline_layout_1 = require("../helpers/timeline-layout");
 const plus_1 = require("../icons/plus");
 const modals_1 = require("../state/modals");
@@ -13,8 +14,9 @@ const AssetFileIcon_1 = require("./AssetFileIcon");
 const InlineAction_1 = require("./InlineAction");
 const common_1 = require("./InspectorPanel/common");
 const styles_1 = require("./InspectorPanel/styles");
-const InspectorPanelLayout_1 = require("./InspectorPanelLayout");
+const asset_search_1 = require("./QuickSwitcher/asset-search");
 const timeline_asset_link_1 = require("./Timeline/timeline-asset-link");
+const TimelineAssetField_1 = require("./Timeline/TimelineAssetField");
 const TimelineExpandedRow_1 = require("./Timeline/TimelineExpandedRow");
 const TimelineRowLayoutContext_1 = require("./Timeline/TimelineRowLayoutContext");
 const TimelineSelection_1 = require("./Timeline/TimelineSelection");
@@ -47,15 +49,14 @@ const assetSelectorIcon = {
     height: 18,
     width: 18,
 };
-const remoteSourceLabel = {
-    color: colors_1.LIGHT_TEXT,
+const remoteSourcePartsContainer = {
+    color: 'inherit',
     display: 'flex',
     fontFamily: 'Arial, Helvetica, sans-serif',
     fontSize: 12,
     lineHeight: '18px',
     minWidth: 0,
     overflow: 'hidden',
-    padding: `6px ${InspectorPanelLayout_1.INSPECTOR_PANEL_HORIZONTAL_PADDING}px`,
     whiteSpace: 'nowrap',
 };
 const remoteSourceLeading = {
@@ -141,7 +142,6 @@ const hasSequenceControls = (sequence) => {
 };
 exports.hasSequenceControls = hasSequenceControls;
 const InspectorSequenceSection = ({ sequence, validatedLocation, nodePathInfo, keyframeDisplayOffset, renderTransformControls, }) => {
-    var _a;
     const { tree } = (0, use_timeline_expanded_tree_1.useTimelineExpandedTree)({
         sequence,
         nodePathInfo,
@@ -153,18 +153,41 @@ const InspectorSequenceSection = ({ sequence, validatedLocation, nodePathInfo, k
     const { setSelectedModal } = (0, react_1.useContext)(modals_1.ModalsContext);
     const selectAsset = (0, use_select_asset_1.useSelectAsset)();
     const mediaSrc = (0, timeline_asset_link_1.getTimelineAssetSrcFromSchema)(sequence.controls);
-    const assetLinkInfo = (0, react_1.useMemo)(() => (mediaSrc ? (0, timeline_asset_link_1.getTimelineAssetLinkInfo)(mediaSrc) : null), [mediaSrc]);
-    const localAsset = (assetLinkInfo === null || assetLinkInfo === void 0 ? void 0 : assetLinkInfo.kind) === 'local' ? assetLinkInfo : null;
-    const remoteAsset = (assetLinkInfo === null || assetLinkInfo === void 0 ? void 0 : assetLinkInfo.kind) === 'remote' ? assetLinkInfo : null;
-    const remoteSourceParts = (0, react_1.useMemo)(() => remoteAsset ? (0, timeline_asset_link_1.splitRemoteSourceForMiddleEllipsis)(remoteAsset.href) : null, [remoteAsset]);
-    const jumpToAsset = (0, react_1.useCallback)(() => {
-        if (localAsset) {
-            (0, timeline_asset_link_1.openTimelineAssetLink)(localAsset, selectAsset);
+    const assetSelectionInitialQuery = (0, asset_search_1.getAssetSearchQueryForComponent)(sequence.controls.componentIdentity);
+    const getSourceAction = (0, react_1.useCallback)((src) => {
+        var _a;
+        const linkInfo = (0, timeline_asset_link_1.getTimelineAssetLinkInfo)(src);
+        if ((linkInfo === null || linkInfo === void 0 ? void 0 : linkInfo.kind) === 'local') {
+            const fileName = (_a = linkInfo.assetPath.split('/').pop()) !== null && _a !== void 0 ? _a : linkInfo.assetPath;
+            return {
+                children: fileName,
+                disabled: false,
+                onClick: () => (0, timeline_asset_link_1.openTimelineAssetLink)(linkInfo, selectAsset),
+                renderIcon: (color) => (jsx_runtime_1.jsx(AssetFileIcon_1.AssetFileIcon, { color: color, fileType: (0, get_preview_file_type_1.getPreviewFileType)(linkInfo.assetPath), style: assetSelectorIcon })),
+                title: linkInfo.assetPath,
+            };
+        }
+        if ((linkInfo === null || linkInfo === void 0 ? void 0 : linkInfo.kind) === 'remote') {
+            const parts = (0, timeline_asset_link_1.splitRemoteSourceForMiddleEllipsis)(linkInfo.href);
+            return {
+                children: (jsx_runtime_1.jsxs("span", { style: remoteSourcePartsContainer, children: [
+                        jsx_runtime_1.jsx("span", { style: remoteSourceLeading, children: parts.leading }), jsx_runtime_1.jsx("span", { style: remoteSourceTrailing, children: parts.trailing })
+                    ] })),
+                disabled: false,
+                onClick: null,
+                title: linkInfo.href,
+            };
         }
-    }, [localAsset, selectAsset]);
-    const localAssetFileName = localAsset
-        ? ((_a = localAsset.assetPath.split('/').pop()) !== null && _a !== void 0 ? _a : localAsset.assetPath)
-        : null;
+        return null;
+    }, [selectAsset]);
+    const sourceAction = (0, react_1.useMemo)(() => {
+        return mediaSrc ? getSourceAction(mediaSrc) : null;
+    }, [getSourceAction, mediaSrc]);
+    const assetSelectionContextValue = (0, react_1.useMemo)(() => ({
+        getSourceAction,
+        initialQuery: assetSelectionInitialQuery,
+        sourceAction,
+    }), [assetSelectionInitialQuery, getSourceAction, sourceAction]);
     const getIsExpanded = (0, react_1.useCallback)((candidate) => {
         return !collapsedKeys.has(getInspectorExpansionKey(candidate));
     }, [collapsedKeys]);
@@ -212,10 +235,13 @@ const InspectorSequenceSection = ({ sequence, validatedLocation, nodePathInfo, k
     })), [controlRows]);
     const effectSelectableItems = (0, react_1.useMemo)(() => (0, exports.getInspectorSelectableItems)(effectRows), [effectRows]);
     const controlGroups = (0, react_1.useMemo)(() => getInspectorControlGroups(controlRows), [controlRows]);
+    const layoutGroup = controlGroups.find((group) => group.id === 'layout');
+    const controlGroupsWithoutLayout = controlGroups.filter((group) => group.id !== 'layout');
     const { schema } = sequence.controls;
     const showEffectsSection = nodePathInfo.supportsEffects || effectRows.length > 0;
     const canAddEffect = nodePathInfo.supportsEffects &&
         previewServerState.type === 'connected' &&
+        (0, interactivity_enabled_1.isStudioInteractivityEnabled)() &&
         Boolean(validatedLocation.source);
     const onAddEffect = (0, react_1.useCallback)(() => {
         if (!canAddEffect || previewServerState.type !== 'connected') {
@@ -242,8 +268,6 @@ const InspectorSequenceSection = ({ sequence, validatedLocation, nodePathInfo, k
     if (controlRows.length === 0 && !showEffectsSection) {
         return (jsx_runtime_1.jsx("div", { style: container, children: jsx_runtime_1.jsx(common_1.InspectorSection, { header: "Controls", children: jsx_runtime_1.jsx("div", { style: emptyState, children: "No schema" }) }) }));
     }
-    return (jsx_runtime_1.jsxs("div", { style: container, children: [controlRows.length > 0 ? (jsx_runtime_1.jsx(TimelineSelection_1.TimelineSelectionOrderProvider, { items: controlSelectableItems, children: controlGroups.map((group) => (jsx_runtime_1.jsxs(common_1.InspectorSection, { header: group.label, children: [group.id === 'source' && localAsset ? (jsx_runtime_1.jsx(common_1.InspectorInlineAction, { disabled: false, onClick: jumpToAsset, renderIcon: (color) => (jsx_runtime_1.jsx(AssetFileIcon_1.AssetFileIcon, { color: color, fileType: (0, get_preview_file_type_1.getPreviewFileType)(localAsset.assetPath), style: assetSelectorIcon })), size: "compact", title: localAsset.assetPath, children: localAssetFileName })) : null, group.id === 'source' && remoteAsset && remoteSourceParts ? (jsx_runtime_1.jsxs("div", { style: remoteSourceLabel, title: remoteAsset.href, children: [
-                                jsx_runtime_1.jsx("span", { style: remoteSourceLeading, children: remoteSourceParts.leading }), jsx_runtime_1.jsx("span", { style: remoteSourceTrailing, children: remoteSourceParts.trailing })
-                            ] })) : null, group.id === 'transforms' ? renderTransformControls() : null, group.id === 'source' ? null : group.rows.map(renderRow)] }, group.id))) })) : null, showEffectsSection ? (jsx_runtime_1.jsx(common_1.InspectorSection, { header: effectsHeader, children: effectRows.length > 0 ? (jsx_runtime_1.jsx(TimelineSelection_1.TimelineSelectionOrderProvider, { items: effectSelectableItems, children: effectRows.map(renderRow) })) : null })) : null] }));
+    return (jsx_runtime_1.jsx(TimelineAssetField_1.AssetSelectionContext.Provider, { value: assetSelectionContextValue, children: jsx_runtime_1.jsxs("div", { style: container, children: [controlRows.length > 0 ? (jsx_runtime_1.jsx(TimelineSelection_1.TimelineSelectionOrderProvider, { items: controlSelectableItems, children: controlGroupsWithoutLayout.map((group) => (jsx_runtime_1.jsxs(common_1.InspectorSection, { header: group.label, children: [group.id === 'transforms' ? renderTransformControls() : null, group.rows.map(renderRow)] }, group.id))) })) : null, showEffectsSection ? (jsx_runtime_1.jsx(common_1.InspectorSection, { header: effectsHeader, children: effectRows.length > 0 ? (jsx_runtime_1.jsx(TimelineSelection_1.TimelineSelectionOrderProvider, { items: effectSelectableItems, children: effectRows.map(renderRow) })) : null })) : null, layoutGroup ? (jsx_runtime_1.jsx(TimelineSelection_1.TimelineSelectionOrderProvider, { items: controlSelectableItems, children: jsx_runtime_1.jsx(common_1.InspectorSection, { header: layoutGroup.label, children: layoutGroup.rows.map(renderRow) }) })) : null] }) }));
 };
 exports.InspectorSequenceSection = InspectorSequenceSection;

package/dist/components/KeyboardShortcutsExplainer.js

@@ -4,6 +4,7 @@ exports.KeyboardShortcutsExplainer = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const ShortcutHint_1 = require("../error-overlay/remotion-overlay/ShortcutHint");
 const colors_1 = require("../helpers/colors");
+const is_mac_1 = require("../helpers/is-mac");
 const studio_runtime_config_1 = require("../helpers/studio-runtime-config");
 const use_keybinding_1 = require("../helpers/use-keybinding");
 const keys_1 = require("../icons/keys");
@@ -141,8 +142,9 @@ const KeyboardShortcutsExplainer = () => {
                                         ] }), jsx_runtime_1.jsx("div", { style: right, children: "Undo" })
                                 ] }), jsx_runtime_1.jsxs(layout_1.Row, { align: "center", children: [
                                     jsx_runtime_1.jsxs("div", { style: left, children: [
-                                            jsx_runtime_1.jsx("kbd", { style: key, children: ShortcutHint_1.cmdOrCtrlCharacter }), jsx_runtime_1.jsx(layout_1.Spacing, { x: 0.3 }), jsx_runtime_1.jsx("kbd", { style: key, children: "Y" })
-                                        ] }), jsx_runtime_1.jsx("div", { style: right, children: "Redo" })
+                                            jsx_runtime_1.jsx("kbd", { style: key, children: ShortcutHint_1.cmdOrCtrlCharacter }), jsx_runtime_1.jsx(layout_1.Spacing, { x: 0.3 }), is_mac_1.isMac ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
+                                                    jsx_runtime_1.jsx("kbd", { style: key, children: "Shift" }), jsx_runtime_1.jsx(layout_1.Spacing, { x: 0.3 }), jsx_runtime_1.jsx("kbd", { style: key, children: "Z" })
+                                                ] })) : (jsx_runtime_1.jsx("kbd", { style: key, children: "Y" }))] }), jsx_runtime_1.jsx("div", { style: right, children: "Redo" })
                                 ] }), jsx_runtime_1.jsx("br", {}), jsx_runtime_1.jsx("div", { style: title, children: "Interactivity" }), jsx_runtime_1.jsxs(layout_1.Row, { align: "center", children: [
                                     jsx_runtime_1.jsx("div", { style: left, children: jsx_runtime_1.jsx("kbd", { style: key, children: "Shift" }) }), jsx_runtime_1.jsx("div", { style: right, children: "Select range / axis lock drag" })
                                 ] }), jsx_runtime_1.jsxs(layout_1.Row, { align: "center", children: [