@remotion/studio 4.0.506 → 4.0.507

package/dist/components/NewComposition/MenuContent.js

@@ -8,7 +8,9 @@ const mobile_layout_1 = require("../../helpers/mobile-layout");
 const studio_runtime_config_1 = require("../../helpers/studio-runtime-config");
 const use_keybinding_1 = require("../../helpers/use-keybinding");
 const is_menu_item_1 = require("../Menu/is-menu-item");
+const menu_tree_context_1 = require("../Menu/menu-tree-context");
 const MenuDivider_1 = require("../Menu/MenuDivider");
+const MenuSectionHeader_1 = require("../Menu/MenuSectionHeader");
 const MenuSubItem_1 = require("../Menu/MenuSubItem");
 const styles_1 = require("../Menu/styles");
 const menu_typeahead_1 = require("./menu-typeahead");
@@ -27,6 +29,9 @@ const container = {
 const MenuContent = ({ onHide, values, preselectIndex, onNextMenu, onPreviousMenu, leaveLeftSpace, topItemCanBeUnselected, fixedHeight, }) => {
     const keybindings = (0, use_keybinding_1.useKeybinding)();
     const containerRef = (0, react_1.useRef)(null);
+    const inheritedMenuTreeId = (0, react_1.useContext)(menu_tree_context_1.MenuTreeContext);
+    const localMenuTreeId = (0, react_1.useRef)((0, menu_tree_context_1.getNextMenuTreeId)());
+    const menuTreeId = inheritedMenuTreeId !== null && inheritedMenuTreeId !== void 0 ? inheritedMenuTreeId : localMenuTreeId.current;
     const isMobileLayout = (0, mobile_layout_1.useMobileLayout)();
     const [subMenuActivated, setSubMenuActivated] = (0, react_1.useState)(false);
     const typeaheadQueryRef = (0, react_1.useRef)('');
@@ -51,7 +56,7 @@ const MenuContent = ({ onHide, values, preselectIndex, onNextMenu, onPreviousMen
         }
     }, []);
     const isItemSelectable = (0, react_1.useCallback)((v) => {
-        return v.type !== 'divider' && !v.disabled;
+        return v.type === 'item' && !v.disabled;
     }, []);
     const onArrowUp = (0, react_1.useCallback)(() => {
         setSelectedItem((prevItem) => {
@@ -98,8 +103,8 @@ const MenuContent = ({ onHide, values, preselectIndex, onNextMenu, onPreviousMen
         if (!item) {
             throw new Error('cannot find item');
         }
-        if (item.type === 'divider') {
-            throw new Error('cannot find divider');
+        if (item.type !== 'item') {
+            throw new Error('cannot select non-interactive menu item');
         }
         if (item.disabled) {
             return;
@@ -118,8 +123,8 @@ const MenuContent = ({ onHide, values, preselectIndex, onNextMenu, onPreviousMen
         if (!item) {
             throw new Error('cannot find item');
         }
-        if (item.type === 'divider') {
-            throw new Error('cannot find divider');
+        if (item.type !== 'item') {
+            throw new Error('cannot select non-interactive menu item');
         }
         if (!item.subMenu) {
             return onNextMenu();
@@ -282,8 +287,8 @@ const MenuContent = ({ onHide, values, preselectIndex, onNextMenu, onPreviousMen
             // Can happen if resizing the window
             return;
         }
-        if (item.type === 'divider') {
-            throw new Error('should not select divider');
+        if (item.type !== 'item') {
+            throw new Error('should not select non-interactive menu item');
         }
         if (!item.subMenu && subMenuActivated) {
             setSubMenuActivated(false);
@@ -303,18 +308,21 @@ const MenuContent = ({ onHide, values, preselectIndex, onNextMenu, onPreviousMen
         current.addEventListener('pointerleave', onPointerLeave);
         return () => current.removeEventListener('pointerleave', onPointerLeave);
     }, [onHide, subMenuActivated]);
-    return (jsx_runtime_1.jsx("div", { ref: containerRef, style: containerWithHeight, className: is_menu_item_1.VERTICAL_SCROLLBAR_CLASSNAME, children: values.map((item) => {
-            if (item.type === 'divider') {
-                return jsx_runtime_1.jsx(MenuDivider_1.MenuDivider, {}, item.id);
-            }
-            const onClick = (id, e) => {
-                item.onClick(id, e);
-                if (item.subMenu) {
-                    return null;
+    return (jsx_runtime_1.jsx(menu_tree_context_1.MenuTreeContext.Provider, { value: menuTreeId, children: jsx_runtime_1.jsx("div", { ref: containerRef, "data-remotion-menu-tree-id": menuTreeId, style: containerWithHeight, className: is_menu_item_1.VERTICAL_SCROLLBAR_CLASSNAME, children: values.map((item) => {
+                if (item.type === 'divider') {
+                    return jsx_runtime_1.jsx(MenuDivider_1.MenuDivider, {}, item.id);
+                }
+                if (item.type === 'section-header') {
+                    return (jsx_runtime_1.jsx(MenuSectionHeader_1.MenuSectionHeader, { children: item.label }, item.id));
                 }
-                onHide();
-            };
-            return (jsx_runtime_1.jsx(MenuSubItem_1.MenuSubItem, { selected: item.id === selectedItem, onActionChosen: onClick, onItemSelected: onItemSelected, label: item.label, id: item.id, keyHint: item.keyHint, leaveLeftSpace: leaveLeftSpace, leftItem: item.leftItem, subMenu: item.subMenu, onQuitMenu: onHide, onNextMenu: onNextMenu, subMenuActivated: subMenuActivated, setSubMenuActivated: setSubMenuActivated, disabled: item.disabled }, item.id));
-        }) }));
+                const onClick = (id, e) => {
+                    item.onClick(id, e);
+                    if (item.subMenu) {
+                        return null;
+                    }
+                    onHide();
+                };
+                return (jsx_runtime_1.jsx(MenuSubItem_1.MenuSubItem, { selected: item.id === selectedItem, onActionChosen: onClick, onItemSelected: onItemSelected, label: item.label, id: item.id, keyHint: item.keyHint, leaveLeftSpace: leaveLeftSpace, leftItem: item.leftItem, subMenu: item.subMenu, onQuitMenu: onHide, onNextMenu: onNextMenu, subMenuActivated: subMenuActivated, setSubMenuActivated: setSubMenuActivated, disabled: item.disabled }, item.id));
+            }) }) }));
 };
 exports.MenuContent = MenuContent;

package/dist/components/NewComposition/menu-typeahead.js

@@ -2,7 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.findTypeaheadMenuItem = void 0;
 const getLabelToMatch = (value) => {
-    if (value.type === 'divider' || value.disabled) {
+    if (value.type !== 'item' || value.disabled) {
         return null;
     }
     if (typeof value.label === 'string') {
@@ -19,7 +19,7 @@ const findTypeaheadMenuItem = ({ query, values, }) => {
         const label = getLabelToMatch(value);
         return label ? label.toLowerCase().startsWith(normalizedQuery) : false;
     });
-    if (!matched || matched.type === 'divider') {
+    if (!matched || matched.type !== 'item') {
         return null;
     }
     return matched.id;

package/dist/components/Preview.js

@@ -69,6 +69,24 @@ const VideoPreview = ({ canvasSize, contentDimensions, canvasContent, assetMetad
 exports.VideoPreview = VideoPreview;
 const CompWhenItHasDimensions = ({ contentDimensions, canvasSize, canvasContent, assetMetadata }) => {
     const { size: previewSize } = (0, react_1.useContext)(remotion_1.Internals.PreviewSizeContext);
+    const [canvasHovered, setCanvasHovered] = (0, react_1.useState)(false);
+    const compositionContainerRef = (0, react_1.useRef)(null);
+    (0, react_1.useEffect)(() => {
+        const compositionContainer = compositionContainerRef.current;
+        if (compositionContainer === null) {
+            setCanvasHovered(false);
+            return;
+        }
+        const onPointerEnter = () => setCanvasHovered(true);
+        const onPointerLeave = () => setCanvasHovered(false);
+        setCanvasHovered(compositionContainer.matches(':hover'));
+        compositionContainer.addEventListener('pointerenter', onPointerEnter);
+        compositionContainer.addEventListener('pointerleave', onPointerLeave);
+        return () => {
+            compositionContainer.removeEventListener('pointerenter', onPointerEnter);
+            compositionContainer.removeEventListener('pointerleave', onPointerLeave);
+        };
+    }, [canvasContent.type]);
     const { centerX, centerY, yCorrection, xCorrection, scale } = (0, react_1.useMemo)(() => {
         if (contentDimensions === 'none') {
             return {
@@ -129,8 +147,8 @@ const CompWhenItHasDimensions = ({ contentDimensions, canvasSize, canvasContent,
     if (canvasContent.type === 'output-blob') {
         return (jsx_runtime_1.jsx("div", { style: outer, children: jsx_runtime_1.jsx(RenderPreview_1.RenderPreview, { path: canvasContent.displayName, assetMetadata: assetMetadata, getBlob: canvasContent.getBlob }) }));
     }
-    return (jsx_runtime_1.jsxs("div", { className: "remotion-studio-composition-container", style: outer, children: [
-            jsx_runtime_1.jsx(PortalContainer, { contentDimensions: contentDimensions, scale: scale, xCorrection: xCorrection, yCorrection: yCorrection }), jsx_runtime_1.jsx(SelectedOutlineOverlay_1.SelectedOutlineOverlay, { compositionHeight: contentDimensions.height, compositionWidth: contentDimensions.width, scale: scale, translationX: previewSize.translation.x, translationY: previewSize.translation.y })
+    return (jsx_runtime_1.jsxs("div", { ref: compositionContainerRef, className: "remotion-studio-composition-container", style: outer, children: [
+            jsx_runtime_1.jsx(PortalContainer, { contentDimensions: contentDimensions, scale: scale, xCorrection: xCorrection, yCorrection: yCorrection }), jsx_runtime_1.jsx(SelectedOutlineOverlay_1.SelectedOutlineOverlay, { canvasHovered: canvasHovered, compositionHeight: contentDimensions.height, compositionWidth: contentDimensions.width, scale: scale, translationX: previewSize.translation.x, translationY: previewSize.translation.y })
         ] }));
 };
 const PortalContainer = ({ scale, xCorrection, yCorrection, contentDimensions }) => {
@@ -154,13 +172,20 @@ const PortalContainer = ({ scale, xCorrection, yCorrection, contentDimensions })
         xCorrection,
         yCorrection,
     ]);
-    (0, react_1.useEffect)(() => {
+    (0, react_1.useLayoutEffect)(() => {
         const { current } = portalContainer;
         current === null || current === void 0 ? void 0 : current.appendChild(remotion_1.Internals.portalNode());
         return () => {
-            current === null || current === void 0 ? void 0 : current.removeChild(remotion_1.Internals.portalNode());
+            const portalNode = remotion_1.Internals.portalNode();
+            if (current && portalNode.parentNode === current) {
+                current.removeChild(portalNode);
+                remotion_1.Internals.setPortalNodeCurrentScale(1);
+            }
         };
     }, []);
+    (0, react_1.useLayoutEffect)(() => {
+        remotion_1.Internals.setPortalNodeCurrentScale(scale);
+    }, [scale]);
     const onPointerDown = (0, react_1.useCallback)((event) => {
         if (!(0, should_clear_selection_on_pointer_down_1.shouldClearSelectionOnPointerDown)(event)) {
             return;

package/dist/components/RenderModal/SchemaEditor/ZodEnumEditor.d.ts

@@ -8,4 +8,5 @@ export declare const ZodEnumEditor: React.FC<{
     readonly value: string;
     readonly setValue: UpdaterFunction<string>;
     readonly onRemove: null | (() => void);
+    readonly mayPad: boolean;
 }>;

package/dist/components/RenderModal/SchemaEditor/ZodEnumEditor.js

@@ -14,7 +14,7 @@ const ZodFieldValidation_1 = require("./ZodFieldValidation");
 const container = {
     width: '100%',
 };
-const ZodEnumEditor = ({ schema, jsonPath, setValue, value, onRemove }) => {
+const ZodEnumEditor = ({ schema, jsonPath, setValue, value, onRemove, mayPad }) => {
     const onChange = (0, react_2.useCallback)((updater, { shouldSave }) => {
         setValue(updater, { shouldSave });
     }, [setValue]);
@@ -38,7 +38,7 @@ const ZodEnumEditor = ({ schema, jsonPath, setValue, value, onRemove }) => {
         });
     }, [enumValues, onChange, value]);
     const zodValidation = (0, react_1.useMemo)(() => (0, zod_schema_type_1.zodSafeParse)(schema, value), [schema, value]);
-    return (jsx_runtime_1.jsxs(Fieldset_1.Fieldset, { shouldPad: true, children: [
+    return (jsx_runtime_1.jsxs(Fieldset_1.Fieldset, { shouldPad: mayPad, children: [
             jsx_runtime_1.jsx(SchemaLabel_1.SchemaLabel, { handleClick: null, jsonPath: jsonPath, onRemove: onRemove, valid: zodValidation.success, suffix: null }), jsx_runtime_1.jsx("div", { style: isRoot ? undefined : container, children: jsx_runtime_1.jsx(ComboBox_1.Combobox, { values: comboBoxValues, selectedId: value, title: value, size: "small" }) }), jsx_runtime_1.jsx(ZodFieldValidation_1.ZodFieldValidation, { path: jsonPath, zodValidation: zodValidation })
         ] }));
 };

package/dist/components/RenderModal/SchemaEditor/ZodOrNullishEditor.js

@@ -14,7 +14,7 @@ const SchemaLabel_1 = require("./SchemaLabel");
 const zod_schema_type_1 = require("./zod-schema-type");
 const ZodSwitch_1 = require("./ZodSwitch");
 const labelStyle = {
-    fontFamily: 'sans-serif',
+    fontFamily: 'monospace',
     fontSize: 12,
     color: colors_1.LIGHT_TEXT,
 };
@@ -38,8 +38,8 @@ const ZodOrNullishEditor = ({ jsonPath, schema, setValue, value, onRemove, nulli
             : (0, create_zod_values_1.createZodValues)(innerSchema, z, zodTypes);
         setValue(() => val, { shouldSave: true });
     }, [innerSchema, nullishValue, setValue, z, zodTypes]);
-    return (jsx_runtime_1.jsxs(Fieldset_1.Fieldset, { shouldPad: mayPad, children: [value === nullishValue ? (jsx_runtime_1.jsx(SchemaLabel_1.SchemaLabel, { handleClick: null, jsonPath: jsonPath, onRemove: onRemove, valid: zodValidation.success, suffix: null })) : (jsx_runtime_1.jsx(ZodSwitch_1.ZodSwitch, { value: value, setValue: setValue, jsonPath: jsonPath, schema: innerSchema, onRemove: onRemove, mayPad: false })), jsx_runtime_1.jsxs("div", { style: checkBoxWrapper, children: [
-                    jsx_runtime_1.jsx(Checkbox_1.Checkbox, { checked: isChecked, onChange: onCheckBoxChange, disabled: false, name: jsonPath.join('.') }), jsx_runtime_1.jsx(layout_1.Spacing, { x: 1 }), jsx_runtime_1.jsx("div", { style: labelStyle, children: String(nullishValue) })
+    return (jsx_runtime_1.jsxs(Fieldset_1.Fieldset, { shouldPad: mayPad, children: [value === nullishValue ? (jsx_runtime_1.jsx(SchemaLabel_1.SchemaLabel, { handleClick: null, jsonPath: jsonPath, onRemove: onRemove, valid: zodValidation.success, suffix: null })) : (jsx_runtime_1.jsx(ZodSwitch_1.ZodSwitch, { value: value, setValue: setValue, jsonPath: jsonPath, schema: innerSchema, onRemove: onRemove, mayPad: false })), jsx_runtime_1.jsxs("label", { style: checkBoxWrapper, children: [
+                    jsx_runtime_1.jsx(Checkbox_1.Checkbox, { checked: isChecked, onChange: onCheckBoxChange, disabled: false, name: jsonPath.join('.') }), jsx_runtime_1.jsx(layout_1.Spacing, { x: 1 }), jsx_runtime_1.jsxs("code", { style: labelStyle, children: ["<", String(nullishValue), ">"] })
                 ] })
         ] }));
 };

package/dist/components/RenderModal/SchemaEditor/ZodSwitch.js

@@ -78,7 +78,7 @@ const ZodSwitch = ({ schema, jsonPath, value, setValue, onRemove, mayPad }) => {
         return (jsx_runtime_1.jsx(ZodArrayEditor_1.ZodArrayEditor, { setValue: setValue, value: value, jsonPath: jsonPath, schema: schema, onRemove: onRemove, mayPad: mayPad }));
     }
     if (typeName === 'enum') {
-        return (jsx_runtime_1.jsx(ZodEnumEditor_1.ZodEnumEditor, { setValue: setValue, value: value, jsonPath: jsonPath, schema: schema, onRemove: onRemove }));
+        return (jsx_runtime_1.jsx(ZodEnumEditor_1.ZodEnumEditor, { setValue: setValue, value: value, jsonPath: jsonPath, schema: schema, onRemove: onRemove, mayPad: mayPad }));
     }
     // In v3, effects wrap schemas (e.g. .refine(), .transform()).
     // In v4, refine/transform are embedded as checks, so this only applies to v3.

package/dist/components/RenderModal/ServerRenderModal.js

@@ -388,6 +388,7 @@ const RenderModal = ({ readOnlyStudio, initialFrame, initialVideoImageFormat, in
             chromeMode,
             offthreadVideoThreads,
             mediaCacheSizeInBytes,
+            licenseKey: renderDefaults.publicLicenseKey,
         })
             .then(() => {
             dispatchIfMounted({ type: 'succeed' });
@@ -418,6 +419,7 @@ const RenderModal = ({ readOnlyStudio, initialFrame, initialVideoImageFormat, in
         chromeMode,
         offthreadVideoThreads,
         mediaCacheSizeInBytes,
+        renderDefaults.publicLicenseKey,
     ]);
     const [everyNthFrameSetting, setEveryNthFrameSetting] = (0, react_1.useState)(() => initialEveryNthFrame);
     const everyNthFrame = (0, react_1.useMemo)(() => {
@@ -489,6 +491,7 @@ const RenderModal = ({ readOnlyStudio, initialFrame, initialVideoImageFormat, in
             offthreadVideoThreads,
             mediaCacheSizeInBytes,
             sampleRate,
+            licenseKey: renderDefaults.publicLicenseKey,
         })
             .then(() => {
             dispatchIfMounted({ type: 'succeed' });
@@ -545,6 +548,7 @@ const RenderModal = ({ readOnlyStudio, initialFrame, initialVideoImageFormat, in
         offthreadVideoThreads,
         mediaCacheSizeInBytes,
         sampleRate,
+        renderDefaults.publicLicenseKey,
     ]);
     const onClickSequence = (0, react_1.useCallback)(() => {
         var _a;

package/dist/components/RenderQueue/RenderQueueItem.js

@@ -21,12 +21,17 @@ const RenderQueueProgressMessage_1 = require("./RenderQueueProgressMessage");
 const RenderQueueRemoveItem_1 = require("./RenderQueueRemoveItem");
 const RenderQueueRepeat_1 = require("./RenderQueueRepeat");
 const RenderQueueSavingMessage_1 = require("./RenderQueueSavingMessage");
+const use_render_output_file_drag_1 = require("./use-render-output-file-drag");
 const container = {
     padding: 12,
     display: 'flex',
     flexDirection: 'row',
     paddingBottom: 10,
     paddingRight: 4,
+    marginBottom: 1,
+    marginLeft: 4,
+    borderRadius: 4,
+    width: 'calc(100% - 4px)',
 };
 const title = {
     fontSize: 13,
@@ -49,6 +54,7 @@ const RenderQueueItem = ({ job, selected }) => {
     const [hovered, setHovered] = (0, react_1.useState)(false);
     const { setCanvasContent } = (0, react_1.useContext)(remotion_1.Internals.CompositionSetters);
     const isClientJob = (0, context_1.isClientRenderJob)(job);
+    const { canDrag, isDragging, onDragEnd, onDragStart } = (0, use_render_output_file_drag_1.useRenderOutputFileDrag)(job);
     const onPointerEnter = (0, react_1.useCallback)(() => {
         setHovered(true);
     }, []);
@@ -138,9 +144,9 @@ const RenderQueueItem = ({ job, selected }) => {
         job.status === 'failed' ||
         job.status === 'cancelled') &&
         !((0, context_1.isClientRenderJob)(job) && (0, client_side_render_types_1.isRestoredClientJob)(job));
-    return (jsx_runtime_1.jsxs(layout_1.Row, { onPointerEnter: onPointerEnter, onPointerLeave: onPointerLeave, style: containerStyle, align: "center", onClick: onClick, className: selected ? SELECTED_CLASSNAME : undefined, children: [
+    return (jsx_runtime_1.jsxs(layout_1.Row, { "data-render-queue-item": job.id, onPointerEnter: onPointerEnter, onPointerLeave: onPointerLeave, style: containerStyle, align: "center", onClick: onClick, draggable: canDrag, onDragStart: onDragStart, onDragEnd: onDragEnd, className: selected ? SELECTED_CLASSNAME : undefined, children: [
             jsx_runtime_1.jsx(RenderQueueItemStatus_1.RenderQueueItemStatus, { job: job }), jsx_runtime_1.jsx(layout_1.Spacing, { x: 1 }), jsx_runtime_1.jsxs("div", { style: right, children: [
                     jsx_runtime_1.jsx("div", { style: title, children: job.compositionId }), jsx_runtime_1.jsx("div", { style: subtitle, children: job.status === 'done' ? (jsx_runtime_1.jsx(RenderQueueOutputName_1.RenderQueueOutputName, { job: job })) : job.status === 'failed' ? (jsx_runtime_1.jsx(RenderQueueError_1.RenderQueueError, { job: job })) : job.status === 'running' ? (jsx_runtime_1.jsx(RenderQueueProgressMessage_1.RenderQueueProgressMessage, { job: job })) : job.status === 'saving' ? (jsx_runtime_1.jsx(RenderQueueSavingMessage_1.RenderQueueSavingMessage, {})) : job.status === 'cancelled' ? (jsx_runtime_1.jsx(RenderQueueCancelledMessage_1.RenderQueueCancelledMessage, {})) : null })
-                ] }), jsx_runtime_1.jsx(layout_1.Spacing, { x: 1 }), canCopyToClipboard ? (jsx_runtime_1.jsx(RenderQueueCopyToClipboard_1.RenderQueueCopyToClipboard, { job: job })) : null, canRepeat ? jsx_runtime_1.jsx(RenderQueueRepeat_1.RenderQueueRepeatItem, { job: job }) : null, job.status === 'running' ? (jsx_runtime_1.jsx(RenderQueueItemCancelButton_1.RenderQueueCancelButton, { job: job })) : (jsx_runtime_1.jsx(RenderQueueRemoveItem_1.RenderQueueRemoveItem, { job: job })), job.status === 'done' ? (clientBlobInfo ? (jsx_runtime_1.jsx(RenderQueueDownloadItem_1.RenderQueueDownloadItem, { job: job })) : (jsx_runtime_1.jsx(RenderQueueOpenInFolder_1.RenderQueueOpenInFinderItem, { job: job }))) : null] }));
+                ] }), jsx_runtime_1.jsx(layout_1.Spacing, { x: 1 }), !isDragging ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [canCopyToClipboard ? (jsx_runtime_1.jsx(RenderQueueCopyToClipboard_1.RenderQueueCopyToClipboard, { job: job })) : null, canRepeat ? jsx_runtime_1.jsx(RenderQueueRepeat_1.RenderQueueRepeatItem, { job: job }) : null, job.status === 'running' ? (jsx_runtime_1.jsx(RenderQueueItemCancelButton_1.RenderQueueCancelButton, { job: job })) : (jsx_runtime_1.jsx(RenderQueueRemoveItem_1.RenderQueueRemoveItem, { job: job })), job.status === 'done' ? (clientBlobInfo ? (jsx_runtime_1.jsx(RenderQueueDownloadItem_1.RenderQueueDownloadItem, { job: job })) : (jsx_runtime_1.jsx(RenderQueueOpenInFolder_1.RenderQueueOpenInFinderItem, { job: job }))) : null] })) : null] }));
 };
 exports.RenderQueueItem = RenderQueueItem;

package/dist/components/RenderQueue/actions.d.ts

@@ -1,5 +1,5 @@
 import type { EnumPath, RecastCodemod, RenderJob, VisualControlChange } from '@remotion/studio-shared';
-export declare const addStillRenderJob: ({ compositionId, outName, imageFormat, jpegQuality, frame, scale, logLevel, chromiumOptions, delayRenderTimeout, envVariables, inputProps, offthreadVideoCacheSizeInBytes, offthreadVideoThreads, multiProcessOnLinux, beepOnFinish, metadata, chromeMode, mediaCacheSizeInBytes, }: {
+export declare const addStillRenderJob: ({ compositionId, outName, imageFormat, jpegQuality, frame, scale, logLevel, chromiumOptions, delayRenderTimeout, envVariables, inputProps, offthreadVideoCacheSizeInBytes, offthreadVideoThreads, multiProcessOnLinux, beepOnFinish, metadata, chromeMode, mediaCacheSizeInBytes, licenseKey, }: {
     compositionId: string;
     outName: string;
     imageFormat: "jpeg" | "pdf" | "png" | "webp";
@@ -18,6 +18,7 @@ export declare const addStillRenderJob: ({ compositionId, outName, imageFormat,
     metadata: Record<string, string> | null;
     chromeMode: "chrome-for-testing" | "headless-shell";
     mediaCacheSizeInBytes: number | null;
+    licenseKey: string | null;
 }) => Promise<undefined>;
 export declare const addSequenceRenderJob: ({ compositionId, outName, imageFormat, startFrame, endFrame, scale, logLevel, chromiumOptions, delayRenderTimeout, envVariables, inputProps, concurrency, offthreadVideoCacheSizeInBytes, offthreadVideoThreads, jpegQuality, disallowParallelEncoding, multiProcessOnLinux, beepOnFinish, repro, metadata, chromeMode, mediaCacheSizeInBytes, }: {
     compositionId: string;
@@ -43,7 +44,7 @@ export declare const addSequenceRenderJob: ({ compositionId, outName, imageForma
     chromeMode: "chrome-for-testing" | "headless-shell";
     mediaCacheSizeInBytes: number | null;
 }) => Promise<undefined>;
-export declare const addVideoRenderJob: ({ compositionId, outName, imageFormat, jpegQuality, scale, logLevel, codec, concurrency, crf, gopSize, startFrame, endFrame, muted, enforceAudioTrack, proResProfile, x264Preset, pixelFormat, audioBitrate, videoBitrate, everyNthFrame, numberOfGifLoops, delayRenderTimeout, audioCodec, disallowParallelEncoding, chromiumOptions, envVariables, inputProps, offthreadVideoCacheSizeInBytes, offthreadVideoThreads, colorSpace, multiProcessOnLinux, encodingMaxRate, encodingBufferSize, beepOnFinish, repro, forSeamlessAacConcatenation, separateAudioTo, metadata, hardwareAcceleration, chromeMode, mediaCacheSizeInBytes, sampleRate, }: {
+export declare const addVideoRenderJob: ({ compositionId, outName, imageFormat, jpegQuality, scale, logLevel, codec, concurrency, crf, gopSize, startFrame, endFrame, muted, enforceAudioTrack, proResProfile, x264Preset, pixelFormat, audioBitrate, videoBitrate, everyNthFrame, numberOfGifLoops, delayRenderTimeout, audioCodec, disallowParallelEncoding, chromiumOptions, envVariables, inputProps, offthreadVideoCacheSizeInBytes, offthreadVideoThreads, colorSpace, multiProcessOnLinux, encodingMaxRate, encodingBufferSize, beepOnFinish, repro, forSeamlessAacConcatenation, separateAudioTo, metadata, hardwareAcceleration, chromeMode, mediaCacheSizeInBytes, sampleRate, licenseKey, }: {
     compositionId: string;
     outName: string;
     imageFormat: "jpeg" | "none" | "png";
@@ -86,6 +87,7 @@ export declare const addVideoRenderJob: ({ compositionId, outName, imageFormat,
     chromeMode: "chrome-for-testing" | "headless-shell";
     mediaCacheSizeInBytes: number | null;
     sampleRate: number;
+    licenseKey: string | null;
 }) => Promise<undefined>;
 export declare const unsubscribeFromFileExistenceWatcher: ({ file, clientId, }: {
     file: string;

package/dist/components/RenderQueue/actions.js

@@ -3,7 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.applyVisualControlChange = exports.callUpdateDefaultPropsApi = exports.getProjectInfo = exports.updateAvailable = exports.cancelRenderJob = exports.removeRenderJob = exports.applyCodemod = exports.openInFileExplorer = exports.subscribeToFileExistenceWatcher = exports.unsubscribeFromFileExistenceWatcher = exports.addVideoRenderJob = exports.addSequenceRenderJob = exports.addStillRenderJob = void 0;
 const no_react_1 = require("remotion/no-react");
 const call_api_1 = require("../call-api");
-const addStillRenderJob = ({ compositionId, outName, imageFormat, jpegQuality, frame, scale, logLevel, chromiumOptions, delayRenderTimeout, envVariables, inputProps, offthreadVideoCacheSizeInBytes, offthreadVideoThreads, multiProcessOnLinux, beepOnFinish, metadata, chromeMode, mediaCacheSizeInBytes, }) => {
+const addStillRenderJob = ({ compositionId, outName, imageFormat, jpegQuality, frame, scale, logLevel, chromiumOptions, delayRenderTimeout, envVariables, inputProps, offthreadVideoCacheSizeInBytes, offthreadVideoThreads, multiProcessOnLinux, beepOnFinish, metadata, chromeMode, mediaCacheSizeInBytes, licenseKey, }) => {
     return (0, call_api_1.callApi)('/api/render', {
         compositionId,
         type: 'still',
@@ -28,6 +28,7 @@ const addStillRenderJob = ({ compositionId, outName, imageFormat, jpegQuality, f
         metadata,
         chromeMode,
         mediaCacheSizeInBytes,
+        licenseKey,
     });
 };
 exports.addStillRenderJob = addStillRenderJob;
@@ -63,7 +64,7 @@ const addSequenceRenderJob = ({ compositionId, outName, imageFormat, startFrame,
     });
 };
 exports.addSequenceRenderJob = addSequenceRenderJob;
-const addVideoRenderJob = ({ compositionId, outName, imageFormat, jpegQuality, scale, logLevel, codec, concurrency, crf, gopSize, startFrame, endFrame, muted, enforceAudioTrack, proResProfile, x264Preset, pixelFormat, audioBitrate, videoBitrate, everyNthFrame, numberOfGifLoops, delayRenderTimeout, audioCodec, disallowParallelEncoding, chromiumOptions, envVariables, inputProps, offthreadVideoCacheSizeInBytes, offthreadVideoThreads, colorSpace, multiProcessOnLinux, encodingMaxRate, encodingBufferSize, beepOnFinish, repro, forSeamlessAacConcatenation, separateAudioTo, metadata, hardwareAcceleration, chromeMode, mediaCacheSizeInBytes, sampleRate, }) => {
+const addVideoRenderJob = ({ compositionId, outName, imageFormat, jpegQuality, scale, logLevel, codec, concurrency, crf, gopSize, startFrame, endFrame, muted, enforceAudioTrack, proResProfile, x264Preset, pixelFormat, audioBitrate, videoBitrate, everyNthFrame, numberOfGifLoops, delayRenderTimeout, audioCodec, disallowParallelEncoding, chromiumOptions, envVariables, inputProps, offthreadVideoCacheSizeInBytes, offthreadVideoThreads, colorSpace, multiProcessOnLinux, encodingMaxRate, encodingBufferSize, beepOnFinish, repro, forSeamlessAacConcatenation, separateAudioTo, metadata, hardwareAcceleration, chromeMode, mediaCacheSizeInBytes, sampleRate, licenseKey, }) => {
     return (0, call_api_1.callApi)('/api/render', {
         compositionId,
         type: 'video',
@@ -112,6 +113,7 @@ const addVideoRenderJob = ({ compositionId, outName, imageFormat, jpegQuality, s
         chromeMode,
         mediaCacheSizeInBytes,
         sampleRate,
+        licenseKey,
     });
 };
 exports.addVideoRenderJob = addVideoRenderJob;

package/dist/components/RenderQueue/index.js

@@ -42,9 +42,6 @@ const layout_1 = require("../layout");
 const is_menu_item_1 = require("../Menu/is-menu-item");
 const context_1 = require("./context");
 const RenderQueueItem_1 = require("./RenderQueueItem");
-const separatorStyle = {
-    borderBottom: `1px solid ${colors_1.BLACK_HEX}`,
-};
 const errorExplanation = {
     fontSize: 14,
     color: colors_1.LIGHT_TEXT,
@@ -65,6 +62,8 @@ const renderQueue = {
     background: colors_1.BACKGROUND,
     flex: 1,
     overflowY: 'auto',
+    paddingTop: 4,
+    paddingBottom: 4,
 };
 const RenderQueue = () => {
     const { jobs } = (0, react_1.useContext)(context_1.RenderQueueContext);
@@ -105,7 +104,7 @@ const RenderQueue = () => {
             ] }));
     }
     return (jsx_runtime_1.jsx("div", { ref: divRef, style: renderQueue, className: ['css-reset', is_menu_item_1.VERTICAL_SCROLLBAR_CLASSNAME].join(' '), children: jobs.map((j, index) => {
-            return (jsx_runtime_1.jsx("div", { style: index === jobs.length - 1 ? undefined : separatorStyle, children: jsx_runtime_1.jsx(RenderQueueItem_1.RenderQueueItem, { selected: selectedJob === index, job: j }) }, j.id));
+            return (jsx_runtime_1.jsx(RenderQueueItem_1.RenderQueueItem, { selected: selectedJob === index, job: j }, j.id));
         }) }));
 };
 exports.RenderQueue = RenderQueue;

package/dist/components/RenderQueue/use-render-output-file-drag.d.ts

@@ -0,0 +1,8 @@
+import type { DragEventHandler } from 'react';
+import type { AnyRenderJob } from './context';
+export declare const useRenderOutputFileDrag: (job: AnyRenderJob) => {
+    canDrag: boolean;
+    isDragging: boolean;
+    onDragEnd: () => void;
+    onDragStart: DragEventHandler<HTMLDivElement>;
+};

package/dist/components/RenderQueue/use-render-output-file-drag.js

@@ -0,0 +1,121 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useRenderOutputFileDrag = void 0;
+const studio_protocol_1 = require("@remotion/studio-protocol");
+const react_1 = require("react");
+const get_asset_metadata_1 = require("../../helpers/get-asset-metadata");
+const context_1 = require("./context");
+const MAXIMUM_SAFE_FILE_DRAG_SIZE = 500 * 1024 * 1024;
+const getFilename = (outName) => {
+    var _a;
+    return (_a = outName.split(/[/\\]/).at(-1)) !== null && _a !== void 0 ? _a : outName;
+};
+const isChrome = () => {
+    return (/Chrome\/\d/.test(navigator.userAgent) &&
+        !/(Edg|OPR|SamsungBrowser|YaBrowser)\//.test(navigator.userAgent));
+};
+const useRenderOutputFileDrag = (job) => {
+    const deletedOutputLocation = 'deletedOutputLocation' in job && job.deletedOutputLocation;
+    const [isDragging, setIsDragging] = (0, react_1.useState)(false);
+    const [clientFile, setClientFile] = (0, react_1.useState)(null);
+    const clientBlobInfo = (0, react_1.useMemo)(() => {
+        if (!(0, context_1.isClientRenderJob)(job) ||
+            job.status !== 'done' ||
+            job.getBlob === undefined) {
+            return null;
+        }
+        return {
+            getBlob: job.getBlob,
+            sizeInBytes: job.metadata.sizeInBytes,
+        };
+    }, [job]);
+    const clientJobWithBlob = clientBlobInfo !== null;
+    (0, react_1.useEffect)(() => {
+        if (!clientBlobInfo ||
+            clientBlobInfo.sizeInBytes <= 0 ||
+            clientBlobInfo.sizeInBytes > MAXIMUM_SAFE_FILE_DRAG_SIZE ||
+            typeof File === 'undefined' ||
+            typeof URL.createObjectURL !== 'function') {
+            setClientFile(null);
+            return;
+        }
+        let cancelled = false;
+        let objectUrl = null;
+        const filename = getFilename(job.outName);
+        clientBlobInfo
+            .getBlob()
+            .then((blob) => {
+            if (cancelled) {
+                return;
+            }
+            const file = new File([blob], filename, {
+                lastModified: blob instanceof File ? blob.lastModified : Date.now(),
+                type: blob.type,
+            });
+            objectUrl = URL.createObjectURL(file);
+            setClientFile({ file, objectUrl });
+        })
+            .catch(() => {
+            if (!cancelled) {
+                setClientFile(null);
+            }
+        });
+        return () => {
+            cancelled = true;
+            if (objectUrl) {
+                URL.revokeObjectURL(objectUrl);
+            }
+        };
+    }, [clientBlobInfo, job.outName]);
+    const canUseFileDrag = typeof DataTransfer !== 'undefined' &&
+        typeof window !== 'undefined' &&
+        typeof window.matchMedia === 'function' &&
+        window.matchMedia('(any-pointer: fine)').matches &&
+        navigator.maxTouchPoints === 0 &&
+        isChrome();
+    const canDrag = canUseFileDrag &&
+        job.status === 'done' &&
+        job.type !== 'sequence' &&
+        !deletedOutputLocation &&
+        (clientJobWithBlob ? clientFile !== null : true);
+    const onDragStart = (0, react_1.useCallback)((event) => {
+        if (!canDrag) {
+            event.preventDefault();
+            return;
+        }
+        try {
+            const filename = getFilename(job.outName);
+            const source = clientFile
+                ? clientFile.objectUrl
+                : new URL(`${get_asset_metadata_1.remotion_outputsBase}/${job.outName}`, window.location.href).href;
+            const mimeType = (clientFile === null || clientFile === void 0 ? void 0 : clientFile.file.type) || 'application/octet-stream';
+            event.dataTransfer.clearData();
+            event.dataTransfer.effectAllowed = 'copy';
+            if (clientFile) {
+                const item = event.dataTransfer.items.add(clientFile.file);
+                if (item === null) {
+                    event.preventDefault();
+                    return;
+                }
+            }
+            else {
+                const dragData = studio_protocol_1.StudioProtocolInternals.makeDragData({
+                    type: 'render-output',
+                    outputPath: job.outName,
+                    fileName: filename,
+                });
+                event.dataTransfer.setData(dragData.mimeType, dragData.payload);
+            }
+            event.dataTransfer.setData('DownloadURL', `${mimeType}:${filename}:${source}`);
+            setIsDragging(true);
+        }
+        catch (_a) {
+            event.preventDefault();
+        }
+    }, [canDrag, clientFile, job.outName]);
+    const onDragEnd = (0, react_1.useCallback)(() => {
+        setIsDragging(false);
+    }, []);
+    return { canDrag, isDragging, onDragEnd, onDragStart };
+};
+exports.useRenderOutputFileDrag = useRenderOutputFileDrag;

package/dist/components/SegmentedControl.js

@@ -18,7 +18,6 @@ const item = {
     display: 'flex',
     fontSize: 15,
     padding: '4px 12px',
-    cursor: 'pointer',
     appearance: 'none',
     border: 'none',
     flex: 1,

package/dist/components/SelectedOutlineElement.d.ts

@@ -1,26 +1,23 @@
 import React from 'react';
 import type { SelectedOutline } from './selected-outline-geometry';
-import { type SelectedOutlineSnapPoint, type SelectedOutlineSnapTarget } from './selected-outline-snap';
-import { type SelectedOutlineDragTarget, type SelectedOutlineRotationDragTarget, type SelectedOutlineScaleDragTarget, type SelectedOutlineTarget } from './selected-outline-types';
+import { type SelectedOutlineSnapPoint } from './selected-outline-snap';
+import { type SelectedOutlineDragTarget, type SelectedOutlineLayoutTarget, type SelectedOutlineRotationDragTarget, type SelectedOutlineScaleDragTarget, type SelectedOutlineTarget } from './selected-outline-types';
 import type { TimelineSelection, TimelineSelectionInteraction } from './Timeline/TimelineSelection';
-export declare const SelectedOutlineTransformOriginHandle: React.FC<{
-    readonly outline: SelectedOutline;
-    readonly onDraggingChange: (dragging: boolean) => void;
-    readonly target: SelectedOutlineTarget | undefined;
-}>;
-export declare const SelectedOutlineElement: React.FC<{
-    readonly allDragTargets: readonly SelectedOutlineDragTarget[];
-    readonly allDragOutlines: readonly SelectedOutline[];
-    readonly allRotationDragTargets: readonly SelectedOutlineRotationDragTarget[];
-    readonly allScaleDragTargets: readonly SelectedOutlineScaleDragTarget[];
+type SelectedOutlineElementProps = {
+    readonly compositionHeight: number;
+    readonly compositionWidth: number;
     readonly dragging: boolean;
-    readonly hovered: boolean;
+    readonly getAllDragOutlines: () => readonly SelectedOutline[];
+    readonly getAllDragTargets: () => readonly SelectedOutlineDragTarget[];
+    readonly getAllRotationDragTargets: () => readonly SelectedOutlineRotationDragTarget[];
+    readonly getAllScaleDragTargets: () => readonly SelectedOutlineScaleDragTarget[];
+    readonly getLatestTargetByKey: (key: string) => SelectedOutlineTarget | undefined;
+    readonly layoutTarget: SelectedOutlineLayoutTarget | undefined;
     readonly outline: SelectedOutline;
     readonly onDraggingChange: (dragging: boolean) => void;
-    readonly onHoverChange: (key: string | null) => void;
     readonly onSnapPointsChange: (snapPoints: readonly SelectedOutlineSnapPoint[]) => void;
     readonly onSelect: (item: TimelineSelection, interaction: TimelineSelectionInteraction) => void;
     readonly scale: number;
-    readonly snapTargets: readonly SelectedOutlineSnapTarget[];
-    readonly target: SelectedOutlineTarget | undefined;
-}>;
+};
+export declare const SelectedOutlineElement: React.NamedExoticComponent<SelectedOutlineElementProps>;
+export {};