@remotion/studio 4.0.499 → 4.0.501

package/dist/components/InspectorPanel/inspector-section-collapse.js

@@ -0,0 +1,165 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getInspectorSectionActivity = exports.isInspectorSectionEffectivelyInactive = exports.isSmartCollapsibleInspectorGroup = void 0;
+const remotion_1 = require("remotion");
+const color_conversion_1 = require("../../helpers/color-conversion");
+const BORDER_KEYS = [
+    'style.borderWidth',
+    'style.borderStyle',
+    'style.borderColor',
+];
+const BORDER_RADIUS_SHORTHAND_KEY = 'style.borderRadius';
+const BORDER_RADIUS_LONGHAND_KEYS = [
+    'style.borderTopLeftRadius',
+    'style.borderTopRightRadius',
+    'style.borderBottomRightRadius',
+    'style.borderBottomLeftRadius',
+];
+const CROP_KEYS = ['cropLeft', 'cropRight', 'cropTop', 'cropBottom'];
+const LAYOUT_KEYS = ['layout', 'premountFor'];
+const BACKGROUND_COLOR_KEY = 'style.backgroundColor';
+const isSmartCollapsibleInspectorGroup = (group) => {
+    return (group === 'background' ||
+        group === 'border' ||
+        group === 'border-radius' ||
+        group === 'crop' ||
+        group === 'layout');
+};
+exports.isSmartCollapsibleInspectorGroup = isSmartCollapsibleInspectorGroup;
+const getStaticValue = ({ key, propStatuses, }) => {
+    const status = propStatuses === null || propStatuses === void 0 ? void 0 : propStatuses[key];
+    if ((status === null || status === void 0 ? void 0 : status.status) !== 'static') {
+        return { found: false };
+    }
+    return { found: true, value: status.codeValue };
+};
+const isZeroOrUndefined = (value) => {
+    return value === undefined || value === 0;
+};
+const isTransparentOrUndefined = (value) => {
+    if (value === undefined) {
+        return true;
+    }
+    if (typeof value !== 'string') {
+        return false;
+    }
+    return (0, color_conversion_1.parseAnyColor)(value).a === 0;
+};
+const hasOnlyStaticZeroValues = ({ keys, propStatuses, }) => {
+    for (const key of keys) {
+        const result = getStaticValue({ key, propStatuses });
+        if (!result.found || !isZeroOrUndefined(result.value)) {
+            return false;
+        }
+    }
+    return true;
+};
+const isBorderInactive = (propStatuses) => {
+    const [width, style, color] = BORDER_KEYS.map((key) => getStaticValue({ key, propStatuses }));
+    if (!width.found || !style.found || !color.found) {
+        return false;
+    }
+    if (style.value === undefined ||
+        style.value === 'none' ||
+        style.value === 'hidden') {
+        return true;
+    }
+    if (width.value === 0) {
+        return true;
+    }
+    return isTransparentOrUndefined(color.value) && color.value !== undefined;
+};
+const isBorderRadiusInactive = (propStatuses) => {
+    const shorthandStatus = propStatuses === null || propStatuses === void 0 ? void 0 : propStatuses[BORDER_RADIUS_SHORTHAND_KEY];
+    if (shorthandStatus && shorthandStatus.status !== 'static') {
+        return false;
+    }
+    if ((shorthandStatus === null || shorthandStatus === void 0 ? void 0 : shorthandStatus.codeValue) !== undefined) {
+        return shorthandStatus.codeValue === 0;
+    }
+    return hasOnlyStaticZeroValues({
+        keys: BORDER_RADIUS_LONGHAND_KEYS,
+        propStatuses,
+    });
+};
+const isLayoutInactive = ({ propStatuses, schema, }) => {
+    if (!schema) {
+        return false;
+    }
+    const flatSchema = remotion_1.Internals.getFlatSchemaWithAllKeys(schema);
+    const layoutKeys = LAYOUT_KEYS.filter((key) => flatSchema[key] !== undefined);
+    if (layoutKeys.length === 0) {
+        return false;
+    }
+    return layoutKeys.every((key) => {
+        const result = getStaticValue({ key, propStatuses });
+        const field = flatSchema[key];
+        if (!result.found || !field || field.type === 'hidden') {
+            return false;
+        }
+        const effectiveValue = result.value === undefined ? field.default : result.value;
+        return Object.is(effectiveValue, field.default);
+    });
+};
+const isInspectorSectionEffectivelyInactive = ({ group, propStatuses, schema, }) => {
+    if (group === 'layout') {
+        return isLayoutInactive({ propStatuses, schema });
+    }
+    if (group === 'border') {
+        return isBorderInactive(propStatuses);
+    }
+    if (group === 'border-radius') {
+        return isBorderRadiusInactive(propStatuses);
+    }
+    if (group === 'crop') {
+        return hasOnlyStaticZeroValues({ keys: CROP_KEYS, propStatuses });
+    }
+    const backgroundColor = getStaticValue({
+        key: BACKGROUND_COLOR_KEY,
+        propStatuses,
+    });
+    return (backgroundColor.found && isTransparentOrUndefined(backgroundColor.value));
+};
+exports.isInspectorSectionEffectivelyInactive = isInspectorSectionEffectivelyInactive;
+const hasOwnStatus = ({ key, propStatuses, }) => {
+    return (propStatuses !== undefined &&
+        Object.prototype.hasOwnProperty.call(propStatuses, key));
+};
+const hasEveryStatus = ({ keys, propStatuses, }) => {
+    return keys.every((key) => hasOwnStatus({ key, propStatuses }));
+};
+const getInspectorSectionActivity = ({ group, propStatuses, schema, }) => {
+    let resolved = false;
+    if (group === 'border') {
+        resolved = hasEveryStatus({ keys: BORDER_KEYS, propStatuses });
+    }
+    else if (group === 'border-radius') {
+        const shorthandStatus = propStatuses === null || propStatuses === void 0 ? void 0 : propStatuses[BORDER_RADIUS_SHORTHAND_KEY];
+        resolved =
+            (shorthandStatus !== undefined &&
+                (shorthandStatus.status !== 'static' ||
+                    shorthandStatus.codeValue !== undefined)) ||
+                hasEveryStatus({ keys: BORDER_RADIUS_LONGHAND_KEYS, propStatuses });
+    }
+    else if (group === 'crop') {
+        resolved = hasEveryStatus({ keys: CROP_KEYS, propStatuses });
+    }
+    else if (group === 'layout') {
+        const flatSchema = schema
+            ? remotion_1.Internals.getFlatSchemaWithAllKeys(schema)
+            : undefined;
+        const layoutKeys = LAYOUT_KEYS.filter((key) => (flatSchema === null || flatSchema === void 0 ? void 0 : flatSchema[key]) !== undefined);
+        resolved =
+            layoutKeys.length > 0 && hasEveryStatus({ keys: layoutKeys, propStatuses });
+    }
+    else {
+        resolved = hasOwnStatus({ key: BACKGROUND_COLOR_KEY, propStatuses });
+    }
+    if (!resolved) {
+        return 'unknown';
+    }
+    return (0, exports.isInspectorSectionEffectivelyInactive)({ group, propStatuses, schema })
+        ? 'inactive'
+        : 'active';
+};
+exports.getInspectorSectionActivity = getInspectorSectionActivity;

package/dist/components/InspectorPanel/styles.js

@@ -39,9 +39,11 @@ exports.sequenceHeaderDivider = {
 };
 exports.sectionHeader = {
     color: colors_1.LIGHT_TEXT,
+    fontFamily: 'sans-serif',
     fontSize: 12,
     fontWeight: 'bold',
-    padding: `8px ${InspectorPanelLayout_1.INSPECTOR_PANEL_HORIZONTAL_PADDING}px`,
+    lineHeight: '24px',
+    padding: `4px ${InspectorPanelLayout_1.INSPECTOR_PANEL_HORIZONTAL_PADDING}px`,
     userSelect: 'none',
 };
 exports.inspectorSectionBody = {
@@ -76,11 +78,15 @@ exports.sectionHeaderRow = {
     minWidth: 0,
 };
 exports.sectionHeaderTitle = {
+    alignItems: 'center',
     color: colors_1.LIGHT_TEXT,
+    display: 'flex',
     flexShrink: 0,
+    fontFamily: 'sans-serif',
     fontSize: 12,
     fontWeight: 'bold',
     lineHeight: '16px',
+    minHeight: 24,
     minWidth: 0,
     overflow: 'hidden',
     textOverflow: 'ellipsis',

package/dist/components/InspectorPanel/use-composition-actions.d.ts

@@ -1,8 +1,11 @@
 export declare const useCompositionActions: () => {
     canInsertAsset: boolean;
+    canInsertComposition: boolean;
     canInsertSolid: boolean;
     canShowInsertAsset: boolean;
+    canShowInsertComposition: boolean;
     canShowInsertSolid: boolean;
     insertAsset: () => Promise<void>;
+    insertComposition: () => void;
     insertSolid: () => Promise<void>;
 };

package/dist/components/InspectorPanel/use-composition-actions.js

@@ -1,14 +1,18 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useCompositionActions = void 0;
+const drag_and_drop_1 = require("@remotion/drag-and-drop");
 const react_1 = require("react");
 const remotion_1 = require("remotion");
+const browser_studio_operations_1 = require("../../helpers/browser-studio-operations");
 const client_id_1 = require("../../helpers/client-id");
 const interactivity_enabled_1 = require("../../helpers/interactivity-enabled");
 const open_in_editor_1 = require("../../helpers/open-in-editor");
+const modals_1 = require("../../state/modals");
 const call_api_1 = require("../call-api");
 const import_assets_1 = require("../import-assets");
 const NotificationCenter_1 = require("../Notifications/NotificationCenter");
+const get_stack_1 = require("../Timeline/TimelineStack/get-stack");
 const use_resolved_stack_1 = require("../Timeline/use-resolved-stack");
 const useCompositionActions = () => {
     var _a, _b;
@@ -16,9 +20,13 @@ const useCompositionActions = () => {
     const videoConfig = remotion_1.Internals.useUnsafeVideoConfig();
     const [isAddingSolid, setIsAddingSolid] = (0, react_1.useState)(false);
     const [isAddingAsset, setIsAddingAsset] = (0, react_1.useState)(false);
+    const [isAddingComposition, setIsAddingComposition] = (0, react_1.useState)(false);
+    const { setSelectedModal } = (0, react_1.useContext)(modals_1.ModalsContext);
     const { previewServerState } = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx);
     const previewConnected = previewServerState.type === 'connected';
     const previewInteractive = previewConnected && (0, interactivity_enabled_1.isStudioInteractivityEnabled)();
+    const browserStudioOperations = (0, browser_studio_operations_1.getBrowserStudioOperations)();
+    const browserStudioCanInsertSolid = browserStudioOperations !== null;
     const currentCompositionId = (canvasContent === null || canvasContent === void 0 ? void 0 : canvasContent.type) === 'composition' ? canvasContent.compositionId : null;
     const currentComposition = (0, react_1.useMemo)(() => {
         var _a;
@@ -28,12 +36,15 @@ const useCompositionActions = () => {
         return ((_a = compositions.find((composition) => composition.id === currentCompositionId)) !== null && _a !== void 0 ? _a : null);
     }, [compositions, currentCompositionId]);
     const resolvedCompositionLocation = (0, use_resolved_stack_1.useResolvedStack)((_a = currentComposition === null || currentComposition === void 0 ? void 0 : currentComposition.stack) !== null && _a !== void 0 ? _a : null);
-    const compositionFile = (_b = resolvedCompositionLocation === null || resolvedCompositionLocation === void 0 ? void 0 : resolvedCompositionLocation.source) !== null && _b !== void 0 ? _b : null;
+    const compositionFile = (_b = resolvedCompositionLocation === null || resolvedCompositionLocation === void 0 ? void 0 : resolvedCompositionLocation.source) !== null && _b !== void 0 ? _b : (currentCompositionId && browserStudioOperations
+        ? browserStudioOperations.getCompositionFile(currentCompositionId)
+        : null);
     const compositionComponentInfo = (0, open_in_editor_1.useCachedCompositionComponentInfo)({
         compositionFile,
         compositionId: currentCompositionId,
     });
-    const canShowInsertSolid = previewInteractive &&
+    const canShowInsertSolid = (previewInteractive || browserStudioCanInsertSolid) &&
+        (!window.remotion_isReadOnlyStudio || browserStudioCanInsertSolid) &&
         (compositionComponentInfo === null || compositionComponentInfo === void 0 ? void 0 : compositionComponentInfo.canAddSequence) === true &&
         currentCompositionId !== null &&
         compositionFile !== null &&
@@ -45,6 +56,8 @@ const useCompositionActions = () => {
         currentCompositionId !== null &&
         compositionFile !== null;
     const canInsertAsset = canShowInsertAsset && !isAddingAsset;
+    const canShowInsertComposition = canShowInsertAsset;
+    const canInsertComposition = canShowInsertComposition && !isAddingComposition;
     const insertSolid = (0, react_1.useCallback)(async () => {
         if (!canInsertSolid ||
             currentCompositionId === null ||
@@ -54,7 +67,7 @@ const useCompositionActions = () => {
         }
         setIsAddingSolid(true);
         try {
-            const result = await (0, call_api_1.callApi)('/api/insert-jsx-element', {
+            const request = {
                 compositionFile,
                 compositionId: currentCompositionId,
                 from: null,
@@ -64,7 +77,10 @@ const useCompositionActions = () => {
                     height: videoConfig.height,
                     position: null,
                 },
-            });
+            };
+            const result = browserStudioOperations
+                ? await browserStudioOperations.insertSolid(request)
+                : await (0, call_api_1.callApi)('/api/insert-jsx-element', request);
             if (result.success) {
                 (0, NotificationCenter_1.showNotification)('Added <Solid> to source file', 2000);
                 return;
@@ -77,7 +93,13 @@ const useCompositionActions = () => {
         finally {
             setIsAddingSolid(false);
         }
-    }, [canInsertSolid, compositionFile, currentCompositionId, videoConfig]);
+    }, [
+        browserStudioOperations,
+        canInsertSolid,
+        compositionFile,
+        currentCompositionId,
+        videoConfig,
+    ]);
     const insertAsset = (0, react_1.useCallback)(async () => {
         if (!canInsertAsset ||
             currentCompositionId === null ||
@@ -106,12 +128,76 @@ const useCompositionActions = () => {
             setIsAddingAsset(false);
         }
     }, [canInsertAsset, compositionFile, currentCompositionId, videoConfig]);
+    const onCompositionSelected = (0, react_1.useCallback)(async (composition) => {
+        var _a, _b, _c, _d, _e;
+        if (!canInsertComposition ||
+            currentCompositionId === null ||
+            compositionFile === null) {
+            return;
+        }
+        setIsAddingComposition(true);
+        try {
+            const resolvedLocation = composition.stack
+                ? await (0, get_stack_1.getOriginalLocationFromStack)(composition.stack, 'sequence')
+                : null;
+            const selectedCompositionFile = (_b = (_a = resolvedLocation === null || resolvedLocation === void 0 ? void 0 : resolvedLocation.source) !== null && _a !== void 0 ? _a : browserStudioOperations === null || browserStudioOperations === void 0 ? void 0 : browserStudioOperations.getCompositionFile(composition.id)) !== null && _b !== void 0 ? _b : null;
+            const compositionDragData = drag_and_drop_1.DragAndDropInternals.makeDragData({
+                type: 'composition',
+                compositionFile: selectedCompositionFile,
+                compositionId: composition.id,
+                width: (_c = composition.width) !== null && _c !== void 0 ? _c : null,
+                height: (_d = composition.height) !== null && _d !== void 0 ? _d : null,
+                durationInFrames: (_e = composition.durationInFrames) !== null && _e !== void 0 ? _e : null,
+            }).data;
+            await (0, import_assets_1.insertComposition)({
+                composition: compositionDragData,
+                compositionFile,
+                compositionId: currentCompositionId,
+                dropPosition: null,
+                from: null,
+            });
+        }
+        catch (error) {
+            (0, NotificationCenter_1.showNotification)(`Could not add composition: ${error instanceof Error ? error.message : String(error)}`, 4000);
+        }
+        finally {
+            setIsAddingComposition(false);
+        }
+    }, [
+        browserStudioOperations,
+        canInsertComposition,
+        compositionFile,
+        currentCompositionId,
+    ]);
+    const insertComposition = (0, react_1.useCallback)(() => {
+        if (!canInsertComposition) {
+            return;
+        }
+        setSelectedModal({
+            type: 'quick-switcher',
+            mode: 'compositions',
+            invocationTimestamp: Date.now(),
+            assetSelection: null,
+            compositionSelection: {
+                excludeCompositionId: currentCompositionId,
+                onSelected: onCompositionSelected,
+            },
+        });
+    }, [
+        canInsertComposition,
+        currentCompositionId,
+        onCompositionSelected,
+        setSelectedModal,
+    ]);
     return {
         canInsertAsset,
+        canInsertComposition,
         canInsertSolid,
         canShowInsertAsset,
+        canShowInsertComposition,
         canShowInsertSolid,
         insertAsset,
+        insertComposition,
         insertSolid,
     };
 };

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

@@ -26,10 +26,10 @@ const InspectorPanel = ({ composition, currentDefaultProps, readOnlyStudio, setD
     }
     if (selectedItems.length > 1) {
         if (sameSequenceInspectorSelection) {
-            return (jsx_runtime_1.jsx("div", { style: styles_1.container, children: jsx_runtime_1.jsx(SelectedInspector_1.SelectedInspector, { selection: sameSequenceInspectorSelection }) }));
+            return (jsx_runtime_1.jsx("div", { style: styles_1.container, children: jsx_runtime_1.jsx(SelectedInspector_1.SelectedInspector, { selection: sameSequenceInspectorSelection, readOnlyStudio: readOnlyStudio }) }));
         }
         return (jsx_runtime_1.jsx("div", { style: styles_1.container, children: jsx_runtime_1.jsxs(common_1.InspectorMessage, { children: [selectedItems.length, " items selected"] }) }));
     }
-    return (jsx_runtime_1.jsx("div", { style: styles_1.container, children: jsx_runtime_1.jsx(SelectedInspector_1.SelectedInspector, { selection: selectedItems[0] }) }));
+    return (jsx_runtime_1.jsx("div", { style: styles_1.container, children: jsx_runtime_1.jsx(SelectedInspector_1.SelectedInspector, { selection: selectedItems[0], readOnlyStudio: readOnlyStudio }) }));
 };
 exports.InspectorPanel = InspectorPanel;

package/dist/components/InspectorSequenceSection.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import type { TSequence } from 'remotion';
+import { type TSequence } from 'remotion';
 import type { CodePosition } from '../error-overlay/react-overlay/utils/get-source-map';
 import type { SequenceNodePathInfo } from '../helpers/get-timeline-sequence-sort-key';
 import { type FlatTreeRow } from '../helpers/timeline-layout';
@@ -11,6 +11,7 @@ export declare const getInspectorSelectableItems: (rows: readonly FlatTreeRow[])
 export declare const hasSequenceControls: (sequence: TSequence) => sequence is SequenceWithControls;
 export declare const InspectorSequenceSection: React.FC<{
     readonly sequence: SequenceWithControls;
+    readonly readOnlyStudio: boolean;
     readonly validatedLocation: CodePosition;
     readonly nodePathInfo: SequenceNodePathInfo;
     readonly keyframeDisplayOffset: number;