@remotion/studio 4.0.489 → 4.0.491

package/dist/components/Timeline/effects-clipboard.js

@@ -0,0 +1,68 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.readClipboardTextAndEffectsEnvelope = exports.writeEffectsClipboardEnvelope = exports.parseEffectsClipboardHtml = exports.makeEffectsClipboardHtml = void 0;
+const studio_shared_1 = require("@remotion/studio-shared");
+const attribute = 'data-remotion-effects-clipboard';
+const getClipboardLabel = (effects) => effects === 1 ? 'Remotion effect' : `${effects} Remotion effects`;
+const makeEffectsClipboardHtml = (envelope) => `<span ${attribute}="${encodeURIComponent(JSON.stringify(envelope))}">${getClipboardLabel(envelope.payload.effects.length)}</span>`;
+exports.makeEffectsClipboardHtml = makeEffectsClipboardHtml;
+const parseEffectsClipboardHtml = (html) => {
+    const match = html.match(new RegExp(`${attribute}=["']([^"']+)["']`, 'i'));
+    if (!(match === null || match === void 0 ? void 0 : match[1])) {
+        return null;
+    }
+    try {
+        const candidate = JSON.parse(decodeURIComponent(match[1]));
+        if (candidate.envelopeVersion !== 1 ||
+            (candidate.sourceIdentity !== null &&
+                typeof candidate.sourceIdentity !== 'string') ||
+            !Array.isArray(candidate.originalEffectIndices) ||
+            !candidate.originalEffectIndices.every((index) => Number.isInteger(index) && index >= 0)) {
+            return null;
+        }
+        const result = (0, studio_shared_1.parseEffectClipboardDataResult)(JSON.stringify(candidate.payload));
+        if (result.status !== 'valid') {
+            return null;
+        }
+        const originalEffectIndices = candidate.originalEffectIndices;
+        const sourceIdentity = candidate.sourceIdentity;
+        if ((sourceIdentity === null && originalEffectIndices.length !== 0) ||
+            (sourceIdentity !== null &&
+                (originalEffectIndices.length !== result.data.effects.length ||
+                    new Set(originalEffectIndices).size !== originalEffectIndices.length))) {
+            return null;
+        }
+        return {
+            envelopeVersion: 1,
+            payload: result.data,
+            sourceIdentity,
+            originalEffectIndices,
+        };
+    }
+    catch (_a) {
+        return null;
+    }
+};
+exports.parseEffectsClipboardHtml = parseEffectsClipboardHtml;
+const writeEffectsClipboardEnvelope = async (envelope) => {
+    const label = getClipboardLabel(envelope.payload.effects.length);
+    await navigator.clipboard.write([
+        new ClipboardItem({
+            'text/html': new Blob([(0, exports.makeEffectsClipboardHtml)(envelope)], {
+                type: 'text/html',
+            }),
+            'text/plain': new Blob([label], { type: 'text/plain' }),
+        }),
+    ]);
+};
+exports.writeEffectsClipboardEnvelope = writeEffectsClipboardEnvelope;
+const readClipboardTextAndEffectsEnvelope = (clipboardData) => {
+    const html = clipboardData.types.includes('text/html')
+        ? clipboardData.getData('text/html')
+        : '';
+    return {
+        text: clipboardData.getData('text/plain'),
+        envelope: html === '' ? null : (0, exports.parseEffectsClipboardHtml)(html),
+    };
+};
+exports.readClipboardTextAndEffectsEnvelope = readClipboardTextAndEffectsEnvelope;

package/dist/components/Timeline/get-sequence-context-menu-items.js

@@ -21,9 +21,12 @@ const normalizeMenuDividers = (items) => {
     }
     return normalized;
 };
+const interactiveSvgComponentIdentity = 'dev.remotion.remotion.Interactive.Svg';
 const getSequenceContextMenuItems = ({ assetLinkInfo, canOpenInEditor, deleteDisabled, disableInteractivityDisabled, duplicateDisabled, fileLocation, includeSourceEditItems, onDeleteSequenceFromSource, onDisableSequenceInteractivity, onDuplicateSequenceFromSource, openInEditor, originalLocation, selectAsset, sequence, sourceActions = [], }) => {
+    var _a, _b;
     const editorName = window.remotion_editorName;
     const { documentationLink } = sequence;
+    const isInteractiveSvg = ((_a = sequence.controls) === null || _a === void 0 ? void 0 : _a.componentIdentity) === interactiveSvgComponentIdentity;
     const items = [
         editorName
             ? {
@@ -101,6 +104,40 @@ const getSequenceContextMenuItems = ({ assetLinkInfo, canOpenInEditor, deleteDis
                 id: 'sequence-link-divider',
             }
             : null,
+        isInteractiveSvg
+            ? {
+                type: 'item',
+                id: 'copy-svg',
+                keyHint: null,
+                label: 'Copy SVG',
+                leftItem: null,
+                disabled: !((_b = sequence.refForOutline) === null || _b === void 0 ? void 0 : _b.current),
+                onClick: () => {
+                    var _a;
+                    const svg = (_a = sequence.refForOutline) === null || _a === void 0 ? void 0 : _a.current;
+                    if (!svg) {
+                        return;
+                    }
+                    navigator.clipboard
+                        .writeText(svg.outerHTML)
+                        .then(() => {
+                        (0, NotificationCenter_1.showNotification)('Copied SVG to clipboard', 1000);
+                    })
+                        .catch((err) => {
+                        (0, NotificationCenter_1.showNotification)(`Could not copy to clipboard: ${err.message}`, 1000);
+                    });
+                },
+                quickSwitcherLabel: null,
+                subMenu: null,
+                value: 'copy-svg',
+            }
+            : null,
+        isInteractiveSvg
+            ? {
+                type: 'divider',
+                id: 'copy-svg-divider',
+            }
+            : null,
         sourceActions.length > 0
             ? {
                 type: 'divider',

package/dist/components/Timeline/get-timeline-media-start-frame.d.ts

@@ -0,0 +1,6 @@
+export declare const getTimelineMediaStartFrame: ({ startMediaFrom, mediaFrameAtSequenceZero, sequenceFrameOffset, playbackRate, }: {
+    startMediaFrom: number;
+    mediaFrameAtSequenceZero: number | null;
+    sequenceFrameOffset: number;
+    playbackRate: number;
+}) => number;

package/dist/components/Timeline/get-timeline-media-start-frame.js

@@ -0,0 +1,15 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getTimelineMediaStartFrame = void 0;
+const no_react_1 = require("remotion/no-react");
+const getTimelineMediaStartFrame = ({ startMediaFrom, mediaFrameAtSequenceZero, sequenceFrameOffset, playbackRate, }) => {
+    if (mediaFrameAtSequenceZero !== null) {
+        return mediaFrameAtSequenceZero + sequenceFrameOffset * playbackRate;
+    }
+    return no_react_1.NoReactInternals.getExpectedMediaFrameUncorrected({
+        frame: sequenceFrameOffset,
+        startFrom: startMediaFrom,
+        playbackRate,
+    });
+};
+exports.getTimelineMediaStartFrame = getTimelineMediaStartFrame;

package/dist/components/Timeline/sequence-props-subscription-store.d.ts

@@ -1,8 +1,8 @@
-import type { SequenceNodePath, InteractivitySchema } from 'remotion';
+import type { SequenceNodePath, InteractivitySchema, VideoConfigValues } from 'remotion';
 import { callApi } from '../call-api';
 type SubscribeResult = Awaited<ReturnType<typeof callApi<'/api/subscribe-to-sequence-props'>>>;
 type ApplyResult = (result: SubscribeResult) => void;
-export declare const acquireSequencePropsSubscription: ({ fileName, line, column, schema, componentIdentity, effects, nodePath, clientId, applyOnce, applyEach, }: {
+export declare const acquireSequencePropsSubscription: ({ fileName, line, column, schema, componentIdentity, effects, nodePath, clientId, applyOnce, applyEach, videoConfigValues, }: {
     fileName: string;
     line: number;
     column: number;
@@ -13,6 +13,7 @@ export declare const acquireSequencePropsSubscription: ({ fileName, line, column
     clientId: string;
     applyOnce: ApplyResult;
     applyEach: ApplyResult;
+    videoConfigValues: VideoConfigValues;
 }) => {
     release: () => void;
 };

package/dist/components/Timeline/sequence-props-subscription-store.js

@@ -4,9 +4,9 @@ exports.acquireSequencePropsSubscription = void 0;
 const studio_shared_1 = require("@remotion/studio-shared");
 const remotion_1 = require("remotion");
 const call_api_1 = require("../call-api");
-const makeKey = ({ fileName, line, column, componentIdentity, sequenceKeys, effectKeys, }) => `${fileName}\0${line}\0${column}\0${componentIdentity !== null && componentIdentity !== void 0 ? componentIdentity : ''}\0${sequenceKeys.join('\0')}\0${effectKeys.map((keys) => keys.join('\0')).join('\0\0')}`;
+const makeKey = ({ fileName, line, column, componentIdentity, sequenceKeys, effectKeys, videoConfigValues, }) => `${fileName}\0${line}\0${column}\0${componentIdentity !== null && componentIdentity !== void 0 ? componentIdentity : ''}\0${sequenceKeys.join('\0')}\0${effectKeys.map((keys) => keys.join('\0')).join('\0\0')}\0${JSON.stringify(videoConfigValues)}`;
 const entries = new Map();
-const acquireSequencePropsSubscription = ({ fileName, line, column, schema, componentIdentity, effects, nodePath, clientId, applyOnce, applyEach, }) => {
+const acquireSequencePropsSubscription = ({ fileName, line, column, schema, componentIdentity, effects, nodePath, clientId, applyOnce, applyEach, videoConfigValues, }) => {
     const sequenceKeys = (0, studio_shared_1.getAllSchemaKeys)(schema);
     const effectKeys = effects.map((effect) => (0, studio_shared_1.getAllSchemaKeys)(effect));
     const key = makeKey({
@@ -16,6 +16,7 @@ const acquireSequencePropsSubscription = ({ fileName, line, column, schema, comp
         componentIdentity,
         sequenceKeys,
         effectKeys,
+        videoConfigValues,
     });
     let entry = entries.get(key);
     if (!entry) {
@@ -28,6 +29,7 @@ const acquireSequencePropsSubscription = ({ fileName, line, column, schema, comp
             keys: (0, studio_shared_1.getAllSchemaKeys)(schema),
             effects: effectKeys,
             clientId,
+            videoConfigValues,
         });
         const created = {
             refCount: 0,

package/dist/components/Timeline/timeline-field-row-layout.d.ts

@@ -1,3 +1,4 @@
 import type React from 'react';
 export declare const getTimelineFieldLabelRowStyle: (depth: number) => React.CSSProperties;
 export declare const timelineFieldValueColumnStyle: React.CSSProperties;
+export declare const timelineStackedFieldContentStyle: React.CSSProperties;

package/dist/components/Timeline/timeline-field-row-layout.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.timelineFieldValueColumnStyle = exports.getTimelineFieldLabelRowStyle = void 0;
+exports.timelineStackedFieldContentStyle = exports.timelineFieldValueColumnStyle = exports.getTimelineFieldLabelRowStyle = void 0;
 const timeline_layout_1 = require("../../helpers/timeline-layout");
 const timeline_row_layout_1 = require("./timeline-row-layout");
 const getTimelineFieldLabelRowStyle = (depth) => {
@@ -22,3 +22,10 @@ exports.timelineFieldValueColumnStyle = {
     minWidth: 0,
     paddingRight: timeline_layout_1.EXPANDED_SECTION_PADDING_RIGHT,
 };
+exports.timelineStackedFieldContentStyle = {
+    alignSelf: 'stretch',
+    display: 'flex',
+    flex: 1,
+    flexDirection: 'column',
+    minWidth: 0,
+};

package/dist/components/Timeline/timeline-row-layout.d.ts

@@ -1,4 +1,4 @@
-export declare const TIMELINE_ROW_BASE_PADDING = 5;
+export declare const TIMELINE_ROW_BASE_PADDING = 10;
 export declare const TIMELINE_EYE_COLUMN_WIDTH = 22;
 export declare const TIMELINE_ARROW_COLUMN_WIDTH = 16;
 export declare const TIMELINE_KEYFRAME_CONTROLS_WIDTH = 38;

package/dist/components/Timeline/timeline-row-layout.js

@@ -2,7 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.getExpandedRowDepth = exports.getTimelineFieldLabelFlexBasis = exports.getTimelineRowLeftChromeWidth = exports.getTimelineRowIndentWidth = exports.TIMELINE_FIELD_LABEL_EXTRA_WIDTH = exports.TIMELINE_KEYFRAME_CONTROLS_WIDTH = exports.TIMELINE_ARROW_COLUMN_WIDTH = exports.TIMELINE_EYE_COLUMN_WIDTH = exports.TIMELINE_ROW_BASE_PADDING = void 0;
 const timeline_indent_1 = require("./timeline-indent");
-exports.TIMELINE_ROW_BASE_PADDING = 5;
+exports.TIMELINE_ROW_BASE_PADDING = 10;
 exports.TIMELINE_EYE_COLUMN_WIDTH = 22;
 exports.TIMELINE_ARROW_COLUMN_WIDTH = 16;
 exports.TIMELINE_KEYFRAME_CONTROLS_WIDTH = 38;

package/dist/components/Timeline/use-sequence-props-subscription.js

@@ -18,6 +18,7 @@ const useSequencePropsSubscription = ({ originalLocation, overrideId, componentI
     const overrideIdToNodePathMappingsRef = (0, react_1.useRef)(overrideIdToNodePathMappings);
     overrideIdToNodePathMappingsRef.current = overrideIdToNodePathMappings;
     const clientId = state.type === 'connected' ? state.clientId : undefined;
+    const videoConfig = remotion_1.Internals.useUnsafeVideoConfig();
     const effectsSignature = (0, react_1.useMemo)(() => effects.map((effect) => (0, studio_shared_1.getAllSchemaKeys)(effect).join('\0')).join('\0\0'), [effects]);
     const validatedLocation = (0, react_1.useMemo)(() => {
         var _a;
@@ -41,7 +42,8 @@ const useSequencePropsSubscription = ({ originalLocation, overrideId, componentI
             !locationSource ||
             !locationLine ||
             locationColumn === null ||
-            !schema) {
+            !schema ||
+            videoConfig === null) {
             return;
         }
         const nodePathAtResubscribe = (_a = overrideIdToNodePathMappingsRef.current[overrideId]) !== null && _a !== void 0 ? _a : null;
@@ -54,6 +56,12 @@ const useSequencePropsSubscription = ({ originalLocation, overrideId, componentI
             effects,
             nodePath: (_b = nodePathAtResubscribe === null || nodePathAtResubscribe === void 0 ? void 0 : nodePathAtResubscribe.nodePath) !== null && _b !== void 0 ? _b : null,
             clientId,
+            videoConfigValues: {
+                durationInFrames: videoConfig.durationInFrames,
+                fps: videoConfig.fps,
+                height: videoConfig.height,
+                width: videoConfig.width,
+            },
             applyOnce: (result) => {
                 if (!result.success) {
                     return;
@@ -97,6 +105,7 @@ const useSequencePropsSubscription = ({ originalLocation, overrideId, componentI
         schema,
         setPropStatuses,
         setOverrideIdToNodePath,
+        videoConfig,
     ]);
 };
 exports.useSequencePropsSubscription = useSequencePropsSubscription;

package/dist/components/import-assets.d.ts

@@ -29,6 +29,10 @@ export declare const getAssetElementFromPath: (assetPath: string) => {
     } | null;
     position: InsertableCompositionElementPosition | null;
 } | null;
+export declare const getElementPositionForDrop: ({ dimensions, dropPosition, }: {
+    dimensions: Dimensions | null;
+    dropPosition: InsertElementDropPosition | null;
+}) => InsertableCompositionElementPosition | null;
 export declare const getComponentDimensions: (component: {
     componentName: string;
     dimensions?: import("@remotion/studio-shared").ComponentDimensions | undefined;
@@ -83,6 +87,7 @@ export declare const insertElement: ({ compositionFile, compositionId, dropPosit
     compositionId: string;
     dropPosition: InsertElementDropPosition | null;
     element: {
+        dependencies: string[];
         slug: string;
         displayName: string;
         sourceCode: string;

package/dist/components/import-assets.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.insertElement = exports.insertComposition = exports.insertComponent = exports.insertExistingAssets = exports.insertRemoteAudio = exports.importRemoteAsset = exports.importAssets = exports.pickFilesToImport = exports.getComponentDimensions = exports.getAssetElementFromPath = exports.getAssetElement = void 0;
+exports.insertElement = exports.insertComposition = exports.insertComponent = exports.insertExistingAssets = exports.insertRemoteAudio = exports.importRemoteAsset = exports.importAssets = exports.pickFilesToImport = exports.getComponentDimensions = exports.getElementPositionForDrop = exports.getAssetElementFromPath = exports.getAssetElement = void 0;
 const media_utils_1 = require("@remotion/media-utils");
 const studio_shared_1 = require("@remotion/studio-shared");
 const remotion_1 = require("remotion");
@@ -174,6 +174,13 @@ const getCenteredPosition = ({ dimensions, dropPosition, }) => {
         y: dropPosition.centerY - dimensions.height / 2,
     };
 };
+const getElementPositionForDrop = ({ dimensions, dropPosition, }) => {
+    if (dimensions === null) {
+        return null;
+    }
+    return getCenteredPosition({ dimensions, dropPosition });
+};
+exports.getElementPositionForDrop = getElementPositionForDrop;
 const getComponentPropNumber = (props, name) => {
     const prop = props.find((p) => p.name === name);
     return typeof (prop === null || prop === void 0 ? void 0 : prop.value) === 'number' ? prop.value : null;
@@ -625,11 +632,12 @@ const insertComposition = async ({ composition, compositionFile, compositionId,
 exports.insertComposition = insertComposition;
 const insertElement = async ({ compositionFile, compositionId, dropPosition, element, }) => {
     try {
+        await (0, install_required_package_1.installRequiredPackages)(element.dependencies);
         const response = await (0, call_api_1.callApi)('/api/insert-element', {
             compositionFile,
             compositionId,
             element,
-            position: getCenteredPosition({
+            position: (0, exports.getElementPositionForDrop)({
                 dimensions: element.dimensions,
                 dropPosition,
             }),

package/dist/components/selected-outline-measurement.d.ts

@@ -48,6 +48,10 @@ export declare const getOutlineSelectionInteraction: ({ shiftKey, metaKey, ctrlK
     readonly metaKey: boolean;
     readonly ctrlKey: boolean;
 }) => TimelineSelectionInteraction;
+export declare const getOutlineDoubleClickAction: ({ button, canOpenInEditor, }: {
+    readonly button: number;
+    readonly canOpenInEditor: boolean;
+}) => "open-in-editor" | null;
 type SelectedEffectFields = {
     allFields: boolean;
     fieldKeys: Set<string>;

package/dist/components/selected-outline-measurement.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.outlinesAreEqual = exports.measureOutlines = exports.getSequencesWithSelectableOutlines = exports.getSelectedTransformOriginInfo = exports.getSelectedEffectFieldsBySequenceKey = exports.getOutlineSelectionInteraction = exports.getSequenceKeysContainingSelection = exports.getSelectedSequenceKeys = exports.getTransformedSvgViewportPoints = exports.getSelectedOutlineRotationPivot = exports.getSelectedOutlineRotationCornerInfo = exports.getRotationCursor = exports.getSelectedOutlineRotationDeltaDegrees = exports.getAngleDegrees = exports.vectorBetween = exports.vectorLength = exports.dot = exports.getOutlineCenter = exports.midpoint = exports.pointToString = void 0;
+exports.outlinesAreEqual = exports.measureOutlines = exports.getSequencesWithSelectableOutlines = exports.getSelectedTransformOriginInfo = exports.getSelectedEffectFieldsBySequenceKey = exports.getOutlineDoubleClickAction = exports.getOutlineSelectionInteraction = exports.getSequenceKeysContainingSelection = exports.getSelectedSequenceKeys = exports.getTransformedSvgViewportPoints = exports.getSelectedOutlineRotationPivot = exports.getSelectedOutlineRotationCornerInfo = exports.getRotationCursor = exports.getSelectedOutlineRotationDeltaDegrees = exports.getAngleDegrees = exports.vectorBetween = exports.vectorLength = exports.dot = exports.getOutlineCenter = exports.midpoint = exports.pointToString = void 0;
 const calculate_timeline_1 = require("../helpers/calculate-timeline");
 const colors_1 = require("../helpers/colors");
 const get_box_quads_ponyfill_1 = require("../helpers/get-box-quads-ponyfill");
@@ -220,6 +220,8 @@ const getOutlineSelectionInteraction = ({ shiftKey, metaKey, ctrlKey, }) => ({
     toggleKey: metaKey || ctrlKey,
 });
 exports.getOutlineSelectionInteraction = getOutlineSelectionInteraction;
+const getOutlineDoubleClickAction = ({ button, canOpenInEditor, }) => button === 0 && canOpenInEditor ? 'open-in-editor' : null;
+exports.getOutlineDoubleClickAction = getOutlineDoubleClickAction;
 const getKeyframeOrEasingField = (item) => {
     if (item.type !== 'keyframe' && item.type !== 'easing') {
         return null;

package/dist/components/selected-outline-types.d.ts

@@ -1,4 +1,4 @@
-import type { CanUpdateSequencePropStatus, CanUpdateSequencePropStatusKeyframed, CanUpdateSequencePropStatusStatic, InteractivitySchema, InteractivitySchemaField, SequencePropsSubscriptionKey, TSequence } from 'remotion';
+import type { CanUpdateSequencePropStatusKeyframed, CanUpdateSequencePropStatusStatic, InteractivitySchema, InteractivitySchemaField, SequencePropsSubscriptionKey, TSequence } from 'remotion';
 import type { SequenceNodePathInfo } from '../helpers/get-timeline-sequence-sort-key';
 import type { ComboboxValue } from './NewComposition/ComboBox';
 import type { SelectedOutlineUvHandle } from './selected-outline-uv';
@@ -18,7 +18,6 @@ export type SelectedOutlineTarget = {
     readonly scaleDrag: SelectedOutlineScaleDragTarget | null;
     readonly rotationDrag: SelectedOutlineRotationDragTarget | null;
     readonly transformOriginDrag: SelectedOutlineTransformOriginDragTarget | null;
-    readonly textEdit: SelectedOutlineTextEditTarget | null;
     readonly uvHandles: readonly SelectedOutlineUvHandle[];
 };
 export type SelectedOutlineEffectDropTarget = {
@@ -26,10 +25,6 @@ export type SelectedOutlineEffectDropTarget = {
     readonly fileName: string;
     readonly nodePath: SequencePropsSubscriptionKey;
 };
-export type SelectedOutlineTextEditTarget = {
-    readonly nodePath: SequencePropsSubscriptionKey;
-    readonly propStatus: CanUpdateSequencePropStatus;
-};
 export type SelectedOutlineDragTarget = {
     readonly propStatus: CanUpdateSequencePropStatusStatic | CanUpdateSequencePropStatusKeyframed;
     readonly clientId: string;