@remotion/studio 4.0.505 → 4.0.507

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

@@ -67,7 +67,7 @@ const reducer = (state, action) => {
     return state;
 };
 const RenderModal = ({ readOnlyStudio, initialFrame, initialVideoImageFormat, initialStillImageFormat, initialJpegQuality, initialScale, initialLogLevel, initialConcurrency, maxConcurrency, minConcurrency, initialMuted, initialEnforceAudioTrack, initialProResProfile, initialx264Preset, initialGopSize, initialPixelFormat, initialVideoBitrate, initialAudioBitrate, initialEveryNthFrame, initialNumberOfGifLoops, initialDelayRenderTimeout, initialOffthreadVideoCacheSizeInBytes, initialEnvVariables, initialDisableWebSecurity, initialGl, initialHeadless, initialIgnoreCertificateErrors, initialEncodingBufferSize, initialEncodingMaxRate, initialOffthreadVideoThreads, initialMediaCacheSizeInBytes, initialDarkMode, initialUserAgent, defaultProps, inFrameMark, outFrameMark, initialColorSpace, initialMultiProcessOnLinux, defaultConfigurationAudioCodec, defaultConfigurationVideoCodec, initialBeep, initialRepro, initialForSeamlessAacConcatenation, renderTypeOfLastRender, initialHardwareAcceleration, initialSampleRate, defaultMetadata, initialChromeMode, renderDefaults, }) => {
-    const { setSelectedModal } = (0, react_1.useContext)(modals_1.ModalsContext);
+    const { setSelectedModal } = (0, react_1.useContext)(modals_1.SetSelectedModalContext);
     const context = (0, react_1.useContext)(ResolveCompositionBeforeModal_1.ResolvedCompositionContext);
     if (!context) {
         throw new Error('Should not be able to render without resolving comp first');
@@ -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/RenderModal/WebRenderModal.js

@@ -82,7 +82,7 @@ const validateOutnameForStill = ({ outName, stillImageFormat, }) => {
 const WebRenderModal = ({ initialFrame, defaultProps, inFrameMark, outFrameMark, initialLogLevel, initialStillImageFormat, initialDefaultOutName, initialScale, initialDelayRenderTimeout, initialMediaCacheSizeInBytes, initialContainer, initialVideoCodec, initialAudioCodec, initialAudioBitrate, initialVideoBitrate, initialHardwareAcceleration, initialKeyframeIntervalInSeconds, initialTransparent, initialMuted, initialPageResponsiveness, }) => {
     var _a;
     const context = (0, react_1.useContext)(ResolveCompositionBeforeModal_1.ResolvedCompositionContext);
-    const { setSelectedModal } = (0, react_1.useContext)(modals_1.ModalsContext);
+    const { setSelectedModal } = (0, react_1.useContext)(modals_1.SetSelectedModalContext);
     const { setSidebarCollapsedState } = (0, react_1.useContext)(sidebar_1.SidebarContext);
     const { addClientStillJob, addClientVideoJob } = (0, react_1.useContext)(context_1.RenderQueueContext);
     if (!context) {
@@ -415,7 +415,8 @@ const WebRenderModal = ({ initialFrame, defaultProps, inFrameMark, outFrameMark,
                         ] })
                 ] }), jsx_runtime_1.jsxs("div", { style: render_modals_1.horizontalLayout, children: [
                     jsx_runtime_1.jsxs("div", { style: render_modals_1.leftSidebar, children: [jsx_runtime_1.jsx(vertical_1.VerticalTab, { style: render_modals_1.horizontalTab, selected: tab === 'general', onClick: () => setTab('general'), renderIcon: (color) => (jsx_runtime_1.jsx("div", { style: render_modals_1.iconContainer, children: jsx_runtime_1.jsx(file_1.FileIcon, { color: color, style: render_modals_1.icon }) })), children: "General" }), jsx_runtime_1.jsx(vertical_1.VerticalTab, { style: render_modals_1.horizontalTab, selected: tab === 'data', onClick: () => setTab('data'), renderIcon: (color) => (jsx_runtime_1.jsx("div", { style: render_modals_1.iconContainer, children: jsx_runtime_1.jsx(input_props_1.InputPropsIcon, { color: color, style: render_modals_1.icon }) })), children: "Input Props" }), renderMode !== 'audio' ? (jsx_runtime_1.jsx(vertical_1.VerticalTab, { style: render_modals_1.horizontalTab, selected: tab === 'picture', onClick: () => setTab('picture'), renderIcon: (color) => (jsx_runtime_1.jsx("div", { style: render_modals_1.iconContainer, children: jsx_runtime_1.jsx(frame_1.PicIcon, { color: color, style: render_modals_1.icon }) })), children: "Picture" })) : null, renderMode === 'video' || renderMode === 'audio' ? (jsx_runtime_1.jsx(vertical_1.VerticalTab, { style: render_modals_1.horizontalTab, selected: tab === 'audio', onClick: () => setTab('audio'), renderIcon: (color) => (jsx_runtime_1.jsx("div", { style: render_modals_1.iconContainer, children: jsx_runtime_1.jsx(audio_1.AudioIcon, { color: color, style: render_modals_1.icon }) })), children: "Audio" })) : null, jsx_runtime_1.jsx(vertical_1.VerticalTab, { style: render_modals_1.horizontalTab, selected: tab === 'advanced', onClick: () => setTab('advanced'), renderIcon: (color) => (jsx_runtime_1.jsx("div", { style: render_modals_1.iconContainer, children: jsx_runtime_1.jsx(gear_1.GearIcon, { color: color, style: render_modals_1.icon }) })), children: "Other" }), jsx_runtime_1.jsx(vertical_1.VerticalTab, { style: render_modals_1.horizontalTab, selected: false, onClick: () => setSelectedModal({
-                                    type: 'configure-license',
+                                    type: 'settings',
+                                    initialTab: 'license',
                                     initialPublicLicenseKey: publicLicenseKey,
                                 }), renderIcon: (color) => (jsx_runtime_1.jsx("div", { style: render_modals_1.iconContainer, children: jsx_runtime_1.jsx(certificate_1.CertificateIcon, { color: color, style: render_modals_1.icon }) })), children: "License" })] }), jsx_runtime_1.jsx("div", { style: render_modals_1.optionsPanel, className: is_menu_item_1.VERTICAL_SCROLLBAR_CLASSNAME, children: tab === 'general' ? (jsx_runtime_1.jsx(WebRenderModalBasic_1.WebRenderModalBasic, { renderMode: renderMode, resolvedComposition: resolvedComposition, imageFormat: imageFormat, setStillFormat: setStillFormat, frame: frame, onFrameChanged: onFrameChanged, onFrameSetDirectly: onFrameSetDirectly, container: container, setContainerFormat: setContainerFormat, setCodec: setCodecWithContainer, encodableVideoCodecs: encodableVideoCodecs, effectiveVideoCodec: effectiveVideoCodec, startFrame: finalStartFrame, setStartFrame: setStartFrame, endFrame: finalEndFrame, setEndFrame: setEndFrame, outName: outName, onOutNameChange: onOutNameChange, validationMessage: outnameValidation.valid ? null : outnameValidation.error.message, logLevel: logLevel, setLogLevel: setLogLevel })) : tab === 'data' ? (jsx_runtime_1.jsx(DataEditor_1.DataEditor, { defaultProps: inputProps, setDefaultProps: setInputProps, unresolvedComposition: unresolvedComposition, propsEditType: "input-props", canSaveDefaultProps: {
                                 canUpdate: false,

package/dist/components/RenderQueue/RenderQueueError.js

@@ -10,7 +10,7 @@ const outputLocation = {
     ...item_style_1.renderQueueItemSubtitleStyle,
 };
 const RenderQueueError = ({ job }) => {
-    const { setSelectedModal } = (0, react_1.useContext)(modals_1.ModalsContext);
+    const { setSelectedModal } = (0, react_1.useContext)(modals_1.SetSelectedModalContext);
     const { tabIndex } = (0, z_index_1.useZIndex)();
     const onClick = (0, react_1.useCallback)(() => {
         setSelectedModal({

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

@@ -52,7 +52,7 @@ const invisibleStyle = {
     display: 'flex',
 };
 const RenderQueueItemStatus = ({ job }) => {
-    const { setSelectedModal } = (0, react_1.useContext)(modals_1.ModalsContext);
+    const { setSelectedModal } = (0, react_1.useContext)(modals_1.SetSelectedModalContext);
     const [hovered, setHovered] = react_1.default.useState(false);
     const isClientJob = (0, context_1.isClientRenderJob)(job);
     const onPointerEnter = (0, react_1.useCallback)(() => {

package/dist/components/RenderQueue/RenderQueueProgressMessage.js

@@ -15,7 +15,7 @@ const RenderQueueProgressMessage = ({ job }) => {
     if (job.status !== 'running') {
         throw new Error('should not have rendered this component');
     }
-    const { setSelectedModal } = (0, react_1.useContext)(modals_1.ModalsContext);
+    const { setSelectedModal } = (0, react_1.useContext)(modals_1.SetSelectedModalContext);
     const { tabIndex } = (0, z_index_1.useZIndex)();
     const isClientJob = (0, context_1.isClientRenderJob)(job);
     const onClick = (0, react_1.useCallback)(() => {

package/dist/components/RenderQueue/RenderQueueRepeat.js

@@ -9,7 +9,7 @@ const modals_1 = require("../../state/modals");
 const InlineAction_1 = require("../InlineAction");
 const context_1 = require("./context");
 const RenderQueueRepeatItem = ({ job }) => {
-    const { setSelectedModal } = (0, react_1.useContext)(modals_1.ModalsContext);
+    const { setSelectedModal } = (0, react_1.useContext)(modals_1.SetSelectedModalContext);
     const isClientJob = (0, context_1.isClientRenderJob)(job);
     const onClick = (0, react_1.useCallback)((e) => {
         e.stopPropagation();

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 {};