@remotion/studio 4.0.422 → 4.0.424

package/dist/components/RenderModal/WebRenderModalBasic.js

@@ -45,7 +45,7 @@ const WebRenderModalBasic = ({ renderMode, resolvedComposition, imageFormat, set
             return {
                 label: (0, human_readable_loglevel_1.humanReadableLogLevel)(level),
                 onClick: () => setLogLevel(level),
-                leftItem: logLevel === level ? (0, jsx_runtime_1.jsx)(Checkmark_1.Checkmark, {}) : null,
+                leftItem: logLevel === level ? jsx_runtime_1.jsx(Checkmark_1.Checkmark, {}) : null,
                 id: level,
                 keyHint: null,
                 quickSwitcherLabel: null,
@@ -60,7 +60,7 @@ const WebRenderModalBasic = ({ renderMode, resolvedComposition, imageFormat, set
             {
                 label: 'MP4',
                 onClick: () => setContainerFormat('mp4'),
-                leftItem: container === 'mp4' ? (0, jsx_runtime_1.jsx)(Checkmark_1.Checkmark, {}) : null,
+                leftItem: container === 'mp4' ? jsx_runtime_1.jsx(Checkmark_1.Checkmark, {}) : null,
                 id: 'mp4',
                 keyHint: null,
                 quickSwitcherLabel: null,
@@ -71,7 +71,7 @@ const WebRenderModalBasic = ({ renderMode, resolvedComposition, imageFormat, set
             {
                 label: 'WebM',
                 onClick: () => setContainerFormat('webm'),
-                leftItem: container === 'webm' ? (0, jsx_runtime_1.jsx)(Checkmark_1.Checkmark, {}) : null,
+                leftItem: container === 'webm' ? jsx_runtime_1.jsx(Checkmark_1.Checkmark, {}) : null,
                 id: 'webm',
                 keyHint: null,
                 quickSwitcherLabel: null,
@@ -92,7 +92,7 @@ const WebRenderModalBasic = ({ renderMode, resolvedComposition, imageFormat, set
         return encodableVideoCodecs.map((c) => ({
             label: codecLabels[c],
             onClick: () => setCodec(c),
-            leftItem: effectiveVideoCodec === c ? (0, jsx_runtime_1.jsx)(Checkmark_1.Checkmark, {}) : null,
+            leftItem: effectiveVideoCodec === c ? jsx_runtime_1.jsx(Checkmark_1.Checkmark, {}) : null,
             id: c,
             keyHint: null,
             quickSwitcherLabel: null,
@@ -101,6 +101,24 @@ const WebRenderModalBasic = ({ renderMode, resolvedComposition, imageFormat, set
             value: c,
         }));
     }, [encodableVideoCodecs, effectiveVideoCodec, setCodec, codecLabels]);
-    return ((0, jsx_runtime_1.jsxs)("div", { style: tabContainer, children: [renderMode === 'still' ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("div", { style: layout_2.optionRow, children: [(0, jsx_runtime_1.jsx)("div", { style: layout_2.label, children: "Format" }), (0, jsx_runtime_1.jsx)("div", { style: layout_2.rightRow, children: (0, jsx_runtime_1.jsx)(SegmentedControl_1.SegmentedControl, { items: imageFormatOptions, needsWrapping: true }) })] }), resolvedComposition.durationInFrames > 1 ? ((0, jsx_runtime_1.jsxs)("div", { style: layout_2.optionRow, children: [(0, jsx_runtime_1.jsx)("div", { style: layout_2.label, children: "Frame" }), (0, jsx_runtime_1.jsx)("div", { style: layout_2.rightRow, children: (0, jsx_runtime_1.jsx)(RemInput_1.RightAlignInput, { children: (0, jsx_runtime_1.jsx)(InputDragger_1.InputDragger, { value: frame, onTextChange: onFrameChanged, placeholder: `0-${resolvedComposition.durationInFrames - 1}`, onValueChange: onFrameSetDirectly, name: "frame", step: 1, min: 0, status: "ok", max: resolvedComposition.durationInFrames - 1, rightAlign: true }) }) })] })) : null] })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("div", { style: layout_2.optionRow, children: [(0, jsx_runtime_1.jsx)("div", { style: layout_2.label, children: "Container" }), (0, jsx_runtime_1.jsx)("div", { style: layout_2.rightRow, children: (0, jsx_runtime_1.jsx)(ComboBox_1.Combobox, { values: containerOptions, selectedId: container, title: "Container" }) })] }), (0, jsx_runtime_1.jsxs)("div", { style: layout_2.optionRow, children: [(0, jsx_runtime_1.jsxs)("div", { style: layout_2.label, children: ["Codec", (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 0.5 }), (0, jsx_runtime_1.jsx)(OptionExplainerBubble_1.OptionExplainerBubble, { id: "videoCodecOption" })] }), (0, jsx_runtime_1.jsx)("div", { style: layout_2.rightRow, children: (0, jsx_runtime_1.jsx)(ComboBox_1.Combobox, { values: codecOptions, selectedId: effectiveVideoCodec, title: "Codec" }) })] }), (0, jsx_runtime_1.jsx)(FrameRangeSetting_1.FrameRangeSetting, { durationInFrames: resolvedComposition.durationInFrames, startFrame: startFrame !== null && startFrame !== void 0 ? startFrame : 0, endFrame: endFrame !== null && endFrame !== void 0 ? endFrame : resolvedComposition.durationInFrames - 1, setStartFrame: setStartFrame, setEndFrame: setEndFrame })] })), (0, jsx_runtime_1.jsx)(RenderModalOutputName_1.RenderModalOutputName, { existence: false, inputStyle: layout_2.input, outName: outName, onValueChange: onOutNameChange, validationMessage: validationMessage, label: "Download name" }), (0, jsx_runtime_1.jsxs)("div", { style: layout_2.optionRow, children: [(0, jsx_runtime_1.jsxs)("div", { style: layout_2.label, children: ["Log Level ", (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 0.5 }), (0, jsx_runtime_1.jsx)(OptionExplainerBubble_1.OptionExplainerBubble, { id: "logLevelOption" })] }), (0, jsx_runtime_1.jsx)("div", { style: layout_2.rightRow, children: (0, jsx_runtime_1.jsx)(ComboBox_1.Combobox, { values: logLevelOptions, selectedId: logLevel, title: "Log Level" }) })] })] }));
+    return (jsx_runtime_1.jsxs("div", { style: tabContainer, children: [renderMode === 'still' ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
+                    jsx_runtime_1.jsxs("div", { style: layout_2.optionRow, children: [
+                            jsx_runtime_1.jsx("div", { style: layout_2.label, children: "Format" }), jsx_runtime_1.jsx("div", { style: layout_2.rightRow, children: jsx_runtime_1.jsx(SegmentedControl_1.SegmentedControl, { items: imageFormatOptions, needsWrapping: true }) })
+                        ] }), resolvedComposition.durationInFrames > 1 ? (jsx_runtime_1.jsxs("div", { style: layout_2.optionRow, children: [
+                            jsx_runtime_1.jsx("div", { style: layout_2.label, children: "Frame" }), jsx_runtime_1.jsx("div", { style: layout_2.rightRow, children: jsx_runtime_1.jsx(RemInput_1.RightAlignInput, { children: jsx_runtime_1.jsx(InputDragger_1.InputDragger, { value: frame, onTextChange: onFrameChanged, placeholder: `0-${resolvedComposition.durationInFrames - 1}`, onValueChange: onFrameSetDirectly, name: "frame", step: 1, min: 0, status: "ok", max: resolvedComposition.durationInFrames - 1, rightAlign: true }) }) })
+                        ] })) : null] })) : (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
+                    jsx_runtime_1.jsxs("div", { style: layout_2.optionRow, children: [
+                            jsx_runtime_1.jsx("div", { style: layout_2.label, children: "Container" }), jsx_runtime_1.jsx("div", { style: layout_2.rightRow, children: jsx_runtime_1.jsx(ComboBox_1.Combobox, { values: containerOptions, selectedId: container, title: "Container" }) })
+                        ] }), jsx_runtime_1.jsxs("div", { style: layout_2.optionRow, children: [
+                            jsx_runtime_1.jsxs("div", { style: layout_2.label, children: ["Codec",
+                                    jsx_runtime_1.jsx(layout_1.Spacing, { x: 0.5 }), jsx_runtime_1.jsx(OptionExplainerBubble_1.OptionExplainerBubble, { id: "videoCodecOption" })
+                                ] }), jsx_runtime_1.jsx("div", { style: layout_2.rightRow, children: jsx_runtime_1.jsx(ComboBox_1.Combobox, { values: codecOptions, selectedId: effectiveVideoCodec, title: "Codec" }) })
+                        ] }), jsx_runtime_1.jsx(FrameRangeSetting_1.FrameRangeSetting, { durationInFrames: resolvedComposition.durationInFrames, startFrame: startFrame !== null && startFrame !== void 0 ? startFrame : 0, endFrame: endFrame !== null && endFrame !== void 0 ? endFrame : resolvedComposition.durationInFrames - 1, setStartFrame: setStartFrame, setEndFrame: setEndFrame })
+                ] })), jsx_runtime_1.jsx(RenderModalOutputName_1.RenderModalOutputName, { existence: false, inputStyle: layout_2.input, outName: outName, onValueChange: onOutNameChange, validationMessage: validationMessage, label: window.remotion_isReadOnlyStudio ? 'Download name' : 'Output name' }), jsx_runtime_1.jsxs("div", { style: layout_2.optionRow, children: [
+                    jsx_runtime_1.jsxs("div", { style: layout_2.label, children: ["Log Level ",
+                            jsx_runtime_1.jsx(layout_1.Spacing, { x: 0.5 }), jsx_runtime_1.jsx(OptionExplainerBubble_1.OptionExplainerBubble, { id: "logLevelOption" })
+                        ] }), jsx_runtime_1.jsx("div", { style: layout_2.rightRow, children: jsx_runtime_1.jsx(ComboBox_1.Combobox, { values: logLevelOptions, selectedId: logLevel, title: "Log Level" }) })
+                ] })
+        ] }));
 };
 exports.WebRenderModalBasic = WebRenderModalBasic;

package/dist/components/RenderModal/WebRenderModalLicense.js

@@ -160,8 +160,30 @@ const WebRenderModalLicense = ({ licenseKey, setLicenseKey, initialPublicLicense
     const onLicenseKeyChange = (0, react_1.useCallback)((e) => {
         setLicenseKey(e.target.value);
     }, [setLicenseKey]);
-    return ((0, jsx_runtime_1.jsxs)("div", { style: tabContainer, children: [(0, jsx_runtime_1.jsxs)("div", { style: descriptionStyle, children: ["Remotion is free if you are an individual or company with a headcount of 3 or less. See", ' ', (0, jsx_runtime_1.jsx)("a", { style: descriptionLink, href: "https://remotion.dev/license", children: "LICENSE.md" }), "."] }), (0, jsx_runtime_1.jsx)("div", { style: exports.row, children: (0, jsx_runtime_1.jsxs)("div", { style: justifyCenter, children: [(0, jsx_runtime_1.jsx)(Checkbox_1.Checkbox, { checked: licenseKey === 'free-license', onChange: onFreeLicenseChange, name: "free-license", rounded: true }), (0, jsx_runtime_1.jsxs)("div", { style: checkboxLabel, onClick: onFreeLicenseChange, children: ["I am eligible for the Free License, ", "don't", " print a warning"] })] }) }), licenseKey === 'free-license' ? ((0, jsx_runtime_1.jsxs)("div", { style: paddedDescriptionStyle, children: ["Enjoy Remotion! Add the following to", ' ', (0, jsx_runtime_1.jsx)("code", { style: codeStyle, children: "remotion.config.ts" }), " to persist this setting:", (0, jsx_runtime_1.jsx)("div", { style: codeLine, children: "Config.setPublicLicenseKey('free-license');" })] })) : null, (0, jsx_runtime_1.jsx)("div", { style: exports.row, children: (0, jsx_runtime_1.jsxs)("div", { style: justifyCenter, children: [(0, jsx_runtime_1.jsx)(Checkbox_1.Checkbox, { checked: licenseKey !== 'free-license' && licenseKey !== null, onChange: onCompanyLicenseChange, name: "company-license", rounded: true }), (0, jsx_runtime_1.jsx)("div", { style: checkboxLabel, onClick: onCompanyLicenseChange, children: "I have a Company License" })] }) }), licenseKey !== 'free-license' && licenseKey !== null ? ((0, jsx_runtime_1.jsxs)("div", { style: paddedDescriptionStyle, children: ["Add your public license key from", ' ', (0, jsx_runtime_1.jsx)("a", { href: "https://remotion.pro/dashboard", target: "_blank", style: descriptionLink, children: "remotion.pro" }), ' ', "below.", (0, jsx_runtime_1.jsx)(layout_1.Spacing, { y: 1, block: true }), (0, jsx_runtime_1.jsx)(RemInput_1.RemotionInput, { value: licenseKey, onChange: onLicenseKeyChange, placeholder: "remotion.pro public license key (starts with rm_pub_)", status: licenseValidation.valid || licenseKey.length === 0
+    return (jsx_runtime_1.jsxs("div", { style: tabContainer, children: [
+            jsx_runtime_1.jsxs("div", { style: descriptionStyle, children: ["Remotion is free if you are an individual or company with a headcount of 3 or less. See", ' ', jsx_runtime_1.jsx("a", { style: descriptionLink, href: "https://remotion.dev/license", children: "LICENSE.md" }),
+                    "."] }), jsx_runtime_1.jsx("div", { style: exports.row, children: jsx_runtime_1.jsxs("div", { style: justifyCenter, children: [
+                        jsx_runtime_1.jsx(Checkbox_1.Checkbox, { checked: licenseKey === 'free-license', onChange: onFreeLicenseChange, name: "free-license", rounded: true }), jsx_runtime_1.jsxs("div", { style: checkboxLabel, onClick: onFreeLicenseChange, children: ["I am eligible for the Free License, ", "don't", " print a warning"] })
+                    ] }) }), licenseKey === 'free-license' ? (jsx_runtime_1.jsxs("div", { style: paddedDescriptionStyle, children: ["Enjoy Remotion! Add the following to", ' ', jsx_runtime_1.jsx("code", { style: codeStyle, children: "remotion.config.ts" }),
+                    " to persist this setting:",
+                    jsx_runtime_1.jsx("div", { style: codeLine, children: "Config.setPublicLicenseKey('free-license');" })
+                ] })) : null, jsx_runtime_1.jsx("div", { style: exports.row, children: jsx_runtime_1.jsxs("div", { style: justifyCenter, children: [
+                        jsx_runtime_1.jsx(Checkbox_1.Checkbox, { checked: licenseKey !== 'free-license' && licenseKey !== null, onChange: onCompanyLicenseChange, name: "company-license", rounded: true }), jsx_runtime_1.jsx("div", { style: checkboxLabel, onClick: onCompanyLicenseChange, children: "I have a Company License" })
+                    ] }) }), licenseKey !== 'free-license' && licenseKey !== null ? (jsx_runtime_1.jsxs("div", { style: paddedDescriptionStyle, children: ["Add your public license key from", ' ', jsx_runtime_1.jsx("a", { href: "https://remotion.pro/dashboard", target: "_blank", style: descriptionLink, children: "remotion.pro" }), ' ', "below.",
+                    jsx_runtime_1.jsx(layout_1.Spacing, { y: 1, block: true }), jsx_runtime_1.jsx(RemInput_1.RemotionInput, { value: licenseKey, onChange: onLicenseKeyChange, placeholder: "remotion.pro public license key (starts with rm_pub_)", status: licenseValidation.valid || licenseKey.length === 0
                             ? 'ok'
-                            : 'error', rightAlign: false, style: inputStyle, autoFocus: true }), licenseValidation.message ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(layout_1.Spacing, { y: 1, block: true }), (0, jsx_runtime_1.jsx)(ValidationMessage_1.ValidationMessage, { message: licenseValidation.message, align: "flex-start", type: "error" })] })) : null, licenseValidation.valid && licenseKey.length > 0 ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(layout_1.Spacing, { y: 1, block: true }), "Add the following to", ' ', (0, jsx_runtime_1.jsx)("code", { style: codeStyle, children: "remotion.config.ts" }), " to persist this setting:", (0, jsx_runtime_1.jsx)("div", { style: codeLineSmall, children: "Config.setPublicLicenseKey('" + licenseKey + "');" })] })) : null, isLoading && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(layout_1.Spacing, { y: 1, block: true }), "Loading license key details..."] })), licenseValidation.details && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(layout_1.Spacing, { y: 1, block: true }), (0, jsx_runtime_1.jsx)(WebRenderModalLicenseKeyDetails_1.WebRenderModalLicenseKeyDetails, { details: licenseValidation.details })] }))] })) : null, licenseKey === null ? ((0, jsx_runtime_1.jsxs)("div", { style: descriptionStyle, children: ["If you are not eligible for the free license, you need to obtain a", ' ', (0, jsx_runtime_1.jsx)("a", { style: descriptionLink, target: "_blank", href: "https://remotion.pro/license", children: "Company License" }), "."] })) : null] }));
+                            : 'error', rightAlign: false, style: inputStyle, autoFocus: true }), licenseValidation.message ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
+                            jsx_runtime_1.jsx(layout_1.Spacing, { y: 1, block: true }), jsx_runtime_1.jsx(ValidationMessage_1.ValidationMessage, { message: licenseValidation.message, align: "flex-start", type: "error" })
+                        ] })) : null, licenseValidation.valid && licenseKey.length > 0 ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
+                            jsx_runtime_1.jsx(layout_1.Spacing, { y: 1, block: true }),
+                            "Add the following to", ' ', jsx_runtime_1.jsx("code", { style: codeStyle, children: "remotion.config.ts" }),
+                            " to persist this setting:",
+                            jsx_runtime_1.jsx("div", { style: codeLineSmall, children: "Config.setPublicLicenseKey('" + licenseKey + "');" })
+                        ] })) : null, isLoading && (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
+                            jsx_runtime_1.jsx(layout_1.Spacing, { y: 1, block: true }),
+                            "Loading license key details..."] })), licenseValidation.details && (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
+                            jsx_runtime_1.jsx(layout_1.Spacing, { y: 1, block: true }), jsx_runtime_1.jsx(WebRenderModalLicenseKeyDetails_1.WebRenderModalLicenseKeyDetails, { details: licenseValidation.details })
+                        ] }))] })) : null, licenseKey === null ? (jsx_runtime_1.jsxs("div", { style: descriptionStyle, children: ["If you are not eligible for the free license, you need to obtain a", ' ', jsx_runtime_1.jsx("a", { style: descriptionLink, target: "_blank", href: "https://remotion.pro/license", children: "Company License" }),
+                    "."] })) : null] }));
 };
 exports.WebRenderModalLicense = WebRenderModalLicense;

package/dist/components/RenderModal/WebRenderModalLicenseKeyDetails.js

@@ -44,6 +44,17 @@ const fetchLicenseKeyDetails = async (licenseKey) => {
 };
 exports.fetchLicenseKeyDetails = fetchLicenseKeyDetails;
 const WebRenderModalLicenseKeyDetails = ({ details }) => {
-    return ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsxs)("div", { style: bulletStyle, children: [(0, jsx_runtime_1.jsx)(check_circle_filled_1.CheckCircleFilled, { style: { ...icon, fill: colors_1.LIGHT_TEXT } }), (0, jsx_runtime_1.jsxs)("div", { style: textStyle, children: ["Belongs to\u00A0", (0, jsx_runtime_1.jsx)("a", { href: `${PRO_HOST}/projects/${details.projectSlug}`, target: "_blank", style: linkStyle, children: details.projectName }), "\u00A0-\u00A0", (0, jsx_runtime_1.jsx)("a", { href: `${PRO_HOST}/projects/${details.projectSlug}/usage#client-renders-usage`, target: "_blank", style: linkStyle, children: "View usage" })] })] }), details.hasActiveSubscription ? ((0, jsx_runtime_1.jsxs)("div", { style: bulletStyle, children: [(0, jsx_runtime_1.jsx)(check_circle_filled_1.CheckCircleFilled, { style: { ...icon, fill: colors_1.LIGHT_TEXT } }), (0, jsx_runtime_1.jsx)("div", { style: textStyle, children: "Active Company License" })] })) : ((0, jsx_runtime_1.jsxs)("div", { style: bulletStyle, children: [(0, jsx_runtime_1.jsx)(ValidationMessage_1.WarningTriangle, { type: "warning", style: { ...icon, fill: colors_1.WARNING_COLOR } }), (0, jsx_runtime_1.jsx)("div", { style: textStyle, children: "No active Company License" })] }))] }));
+    return (jsx_runtime_1.jsxs("div", { children: [
+            jsx_runtime_1.jsxs("div", { style: bulletStyle, children: [
+                    jsx_runtime_1.jsx(check_circle_filled_1.CheckCircleFilled, { style: { ...icon, fill: colors_1.LIGHT_TEXT } }), jsx_runtime_1.jsxs("div", { style: textStyle, children: ["Belongs to\u00A0",
+                            jsx_runtime_1.jsx("a", { href: `${PRO_HOST}/projects/${details.projectSlug}`, target: "_blank", style: linkStyle, children: details.projectName }),
+                            "\u00A0-\u00A0",
+                            jsx_runtime_1.jsx("a", { href: `${PRO_HOST}/projects/${details.projectSlug}/usage#client-renders-usage`, target: "_blank", style: linkStyle, children: "View usage" })
+                        ] })
+                ] }), details.hasActiveSubscription ? (jsx_runtime_1.jsxs("div", { style: bulletStyle, children: [
+                    jsx_runtime_1.jsx(check_circle_filled_1.CheckCircleFilled, { style: { ...icon, fill: colors_1.LIGHT_TEXT } }), jsx_runtime_1.jsx("div", { style: textStyle, children: "Active Company License" })
+                ] })) : (jsx_runtime_1.jsxs("div", { style: bulletStyle, children: [
+                    jsx_runtime_1.jsx(ValidationMessage_1.WarningTriangle, { type: "warning", style: { ...icon, fill: colors_1.WARNING_COLOR } }), jsx_runtime_1.jsx("div", { style: textStyle, children: "No active Company License" })
+                ] }))] }));
 };
 exports.WebRenderModalLicenseKeyDetails = WebRenderModalLicenseKeyDetails;

package/dist/components/RenderModal/WebRenderModalPicture.js

@@ -17,6 +17,13 @@ const WebRenderModalPicture = ({ renderMode, videoBitrate, setVideoBitrate, keyf
     const onTransparentChanged = (0, react_1.useCallback)((e) => {
         setTransparent(e.target.checked);
     }, [setTransparent]);
-    return ((0, jsx_runtime_1.jsxs)("div", { style: tabContainer, children: [(0, jsx_runtime_1.jsx)(ScaleSetting_1.ScaleSetting, { scale: scale, setScale: setScale, compositionWidth: compositionWidth, compositionHeight: compositionHeight }), renderMode !== 'video' ? null : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("div", { style: layout_1.optionRow, children: [(0, jsx_runtime_1.jsx)("div", { style: layout_1.label, children: "Quality" }), (0, jsx_runtime_1.jsx)("div", { style: layout_1.rightRow, children: (0, jsx_runtime_1.jsx)(ComboBox_1.Combobox, { values: qualityOptions, selectedId: videoBitrate, title: "Quality" }) })] }), (0, jsx_runtime_1.jsx)(NumberSetting_1.NumberSetting, { name: "Keyframe Interval", formatter: (v) => `${v}s`, min: 1, max: 300, step: 1, value: keyframeIntervalInSeconds, onValueChanged: setKeyframeIntervalInSeconds }), (0, jsx_runtime_1.jsxs)("div", { style: layout_1.optionRow, children: [(0, jsx_runtime_1.jsx)("div", { style: layout_1.label, children: "Transparent" }), (0, jsx_runtime_1.jsx)("div", { style: layout_1.rightRow, children: (0, jsx_runtime_1.jsx)(Checkbox_1.Checkbox, { checked: transparent, onChange: onTransparentChanged, name: "transparent" }) })] })] }))] }));
+    return (jsx_runtime_1.jsxs("div", { style: tabContainer, children: [
+            jsx_runtime_1.jsx(ScaleSetting_1.ScaleSetting, { scale: scale, setScale: setScale, compositionWidth: compositionWidth, compositionHeight: compositionHeight }), renderMode !== 'video' ? null : (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
+                    jsx_runtime_1.jsxs("div", { style: layout_1.optionRow, children: [
+                            jsx_runtime_1.jsx("div", { style: layout_1.label, children: "Quality" }), jsx_runtime_1.jsx("div", { style: layout_1.rightRow, children: jsx_runtime_1.jsx(ComboBox_1.Combobox, { values: qualityOptions, selectedId: videoBitrate, title: "Quality" }) })
+                        ] }), jsx_runtime_1.jsx(NumberSetting_1.NumberSetting, { name: "Keyframe Interval", formatter: (v) => `${v}s`, min: 1, max: 300, step: 1, value: keyframeIntervalInSeconds, onValueChanged: setKeyframeIntervalInSeconds }), jsx_runtime_1.jsxs("div", { style: layout_1.optionRow, children: [
+                            jsx_runtime_1.jsx("div", { style: layout_1.label, children: "Transparent" }), jsx_runtime_1.jsx("div", { style: layout_1.rightRow, children: jsx_runtime_1.jsx(Checkbox_1.Checkbox, { checked: transparent, onChange: onTransparentChanged, name: "transparent" }) })
+                        ] })
+                ] }))] }));
 };
 exports.WebRenderModalPicture = WebRenderModalPicture;

package/dist/components/RenderModal/WebRendererExperimentalBadge.js

@@ -28,6 +28,8 @@ const link = {
     fontSize: 14,
 };
 const WebRendererExperimentalBadge = () => {
-    return ((0, jsx_runtime_1.jsxs)("div", { style: row, children: [(0, jsx_runtime_1.jsx)(ValidationMessage_1.WarningTriangle, { type: "warning", style: icon }), (0, jsx_runtime_1.jsxs)("div", { style: text, children: ["The Remotion Web Renderer is experimental.", ' ', (0, jsx_runtime_1.jsx)("a", { href: "https://github.com/remotion-dev/remotion/issues/5913", target: "_blank", rel: "noopener noreferrer", style: link, children: "Track progress on GitHub" }), ' ', "and discuss in the", ' ', (0, jsx_runtime_1.jsx)("a", { href: "https://remotion.dev/discord", target: "_blank", rel: "noopener noreferrer", style: link, children: "#web-renderer" }), ' ', "channel on Discord."] })] }));
+    return (jsx_runtime_1.jsxs("div", { style: row, children: [
+            jsx_runtime_1.jsx(ValidationMessage_1.WarningTriangle, { type: "warning", style: icon }), jsx_runtime_1.jsxs("div", { style: text, children: ["The Remotion Web Renderer is experimental.", ' ', jsx_runtime_1.jsx("a", { href: "https://github.com/remotion-dev/remotion/issues/5913", target: "_blank", rel: "noopener noreferrer", style: link, children: "Track progress on GitHub" }), ' ', "and discuss in the", ' ', jsx_runtime_1.jsx("a", { href: "https://remotion.dev/discord", target: "_blank", rel: "noopener noreferrer", style: link, children: "#web-renderer" }), ' ', "channel on Discord."] })
+        ] }));
 };
 exports.WebRendererExperimentalBadge = WebRendererExperimentalBadge;

package/dist/components/RenderModal/get-default-codecs.d.ts

@@ -1,14 +1,13 @@
-import type { AudioCodec, Codec } from '@remotion/renderer';
 import type { RenderType } from './RenderModalAdvanced';
 export declare const getDefaultCodecs: ({ defaultConfigurationVideoCodec, compositionDefaultVideoCodec, renderType, defaultConfigurationAudioCodec, }: {
-    defaultConfigurationVideoCodec: Codec | null;
-    defaultConfigurationAudioCodec: AudioCodec | null;
-    compositionDefaultVideoCodec: Codec | null;
+    defaultConfigurationVideoCodec: "aac" | "gif" | "h264" | "h264-mkv" | "h264-ts" | "h265" | "mp3" | "prores" | "vp8" | "vp9" | "wav" | null;
+    defaultConfigurationAudioCodec: "aac" | "mp3" | "opus" | "pcm-16" | null;
+    compositionDefaultVideoCodec: "aac" | "gif" | "h264" | "h264-mkv" | "h264-ts" | "h265" | "mp3" | "prores" | "vp8" | "vp9" | "wav" | null;
     renderType: RenderType;
 }) => {
-    initialAudioCodec: AudioCodec | null;
-    initialVideoCodec: Codec;
+    initialAudioCodec: "aac" | "mp3" | "opus" | "pcm-16" | null;
+    initialVideoCodec: "aac" | "gif" | "h264" | "h264-mkv" | "h264-ts" | "h265" | "mp3" | "prores" | "vp8" | "vp9" | "wav";
     initialRenderType: RenderType;
-    initialVideoCodecForAudioTab: Codec;
-    initialVideoCodecForVideoTab: Codec;
+    initialVideoCodecForAudioTab: "aac" | "gif" | "h264" | "h264-mkv" | "h264-ts" | "h265" | "mp3" | "prores" | "vp8" | "vp9" | "wav";
+    initialVideoCodecForVideoTab: "aac" | "gif" | "h264" | "h264-mkv" | "h264-ts" | "h265" | "mp3" | "prores" | "vp8" | "vp9" | "wav";
 };

package/dist/components/RenderModal/human-readable-audio-codecs.d.ts

@@ -1,2 +1 @@
-import type { AudioCodec } from '@remotion/renderer';
-export declare const humanReadableAudioCodec: (audioCodec: AudioCodec) => "AAC" | "MP3" | "Lossless" | "Opus" | undefined;
+export declare const humanReadableAudioCodec: (audioCodec: "aac" | "mp3" | "opus" | "pcm-16") => "AAC" | "Lossless" | "MP3" | "Opus" | undefined;

package/dist/components/RenderModal/human-readable-codec.d.ts

@@ -1,2 +1 @@
-import type { Codec } from '@remotion/renderer';
-export declare const humanReadableCodec: (codec: Codec) => "AAC" | "MP3" | "GIF" | "H.264" | "H.264 (Matroska)" | "H.264 (Transport Stream)" | "H.265" | "ProRes" | "VP8" | "VP9" | "Waveform";
+export declare const humanReadableCodec: (codec: "aac" | "gif" | "h264" | "h264-mkv" | "h264-ts" | "h265" | "mp3" | "prores" | "vp8" | "vp9" | "wav") => "AAC" | "GIF" | "H.264" | "H.264 (Matroska)" | "H.264 (Transport Stream)" | "H.265" | "MP3" | "ProRes" | "VP8" | "VP9" | "Waveform";

package/dist/components/RenderModal/human-readable-loglevel.d.ts

@@ -1,2 +1 @@
-import type { LogLevel } from 'remotion';
-export declare const humanReadableLogLevel: (logLevel: LogLevel) => "Trace" | "Verbose" | "Info" | "Warn" | "Error";
+export declare const humanReadableLogLevel: (logLevel: "error" | "info" | "trace" | "verbose" | "warn") => "Error" | "Info" | "Trace" | "Verbose" | "Warn";

package/dist/components/RenderModal/out-name-checker.d.ts

@@ -1,11 +1,10 @@
-import type { AudioCodec, Codec, StillImageFormat } from '@remotion/renderer';
 import type { RenderType } from './RenderModalAdvanced';
 export declare const validateOutnameGui: ({ outName, codec, audioCodec, renderMode, stillImageFormat, separateAudioTo, }: {
     outName: string;
-    codec: Codec;
-    audioCodec: AudioCodec;
+    codec: "aac" | "gif" | "h264" | "h264-mkv" | "h264-ts" | "h265" | "mp3" | "prores" | "vp8" | "vp9" | "wav";
+    audioCodec: "aac" | "mp3" | "opus" | "pcm-16";
     renderMode: RenderType;
-    stillImageFormat: StillImageFormat | null;
+    stillImageFormat: "jpeg" | "pdf" | "png" | "webp" | null;
     separateAudioTo: string | null;
 }) => {
     valid: true;
@@ -15,5 +14,5 @@ export declare const validateOutnameGui: ({ outName, codec, audioCodec, renderMo
 };
 export declare const isValidSeparateAudioName: ({ audioCodec, separateAudioTo, }: {
     separateAudioTo: string;
-    audioCodec: AudioCodec;
+    audioCodec: "aac" | "mp3" | "opus" | "pcm-16";
 }) => void;

package/dist/components/RenderModal/quality-options.js

@@ -14,7 +14,7 @@ const getQualityOptions = (selectedQuality, setQuality) => {
     return QUALITY_OPTIONS.map(({ value, label }) => ({
         label,
         onClick: () => setQuality(value),
-        leftItem: selectedQuality === value ? (0, jsx_runtime_1.jsx)(Checkmark_1.Checkmark, {}) : null,
+        leftItem: selectedQuality === value ? jsx_runtime_1.jsx(Checkmark_1.Checkmark, {}) : null,
         id: value,
         keyHint: null,
         quickSwitcherLabel: null,

package/dist/components/RenderPreview.js

@@ -59,14 +59,14 @@ const RenderPreview = ({ path, assetMetadata, getBlob }) => {
     }, [getBlob]);
     const src = blobUrl !== null && blobUrl !== void 0 ? blobUrl : get_asset_metadata_1.remotion_outputsBase + path;
     if (connectionStatus === 'disconnected') {
-        return (0, jsx_runtime_1.jsx)("div", { style: errMsgStyle, children: "Studio server disconnected" });
+        return jsx_runtime_1.jsx("div", { style: errMsgStyle, children: "Studio server disconnected" });
     }
     if (getBlob && blobError) {
-        return ((0, jsx_runtime_1.jsxs)("div", { style: errMsgStyle, children: ["Failed to load preview: ", blobError.message] }));
+        return (jsx_runtime_1.jsxs("div", { style: errMsgStyle, children: ["Failed to load preview: ", blobError.message] }));
     }
     if (getBlob && !blobUrl) {
-        return (0, jsx_runtime_1.jsx)("div", { style: msgStyle, children: "Loading preview..." });
+        return jsx_runtime_1.jsx("div", { style: msgStyle, children: "Loading preview..." });
     }
-    return ((0, jsx_runtime_1.jsx)(FilePreview_1.FilePreview, { assetMetadata: assetMetadata, currentAsset: path, fileType: fileType, src: src }));
+    return (jsx_runtime_1.jsx(FilePreview_1.FilePreview, { assetMetadata: assetMetadata, currentAsset: path, fileType: fileType, src: src }));
 };
 exports.RenderPreview = RenderPreview;

package/dist/components/RenderQueue/CircularProgress.js

@@ -13,6 +13,6 @@ const container = {
 const CircularProgress = ({ progress }) => {
     const r = exports.RENDER_STATUS_INDICATOR_SIZE / 2 - STROKE_WIDTH;
     const circumference = r * Math.PI * 2;
-    return ((0, jsx_runtime_1.jsx)("svg", { style: container, viewBox: `0 0 ${exports.RENDER_STATUS_INDICATOR_SIZE} ${exports.RENDER_STATUS_INDICATOR_SIZE}`, children: (0, jsx_runtime_1.jsx)("circle", { r: exports.RENDER_STATUS_INDICATOR_SIZE / 2 - STROKE_WIDTH, stroke: colors_1.LIGHT_TEXT, fill: "none", strokeWidth: STROKE_WIDTH, cx: exports.RENDER_STATUS_INDICATOR_SIZE / 2, cy: exports.RENDER_STATUS_INDICATOR_SIZE / 2, strokeDasharray: `${circumference} ${circumference}`, strokeMiterlimit: 0, strokeDashoffset: (1 - progress) * circumference }) }));
+    return (jsx_runtime_1.jsx("svg", { style: container, viewBox: `0 0 ${exports.RENDER_STATUS_INDICATOR_SIZE} ${exports.RENDER_STATUS_INDICATOR_SIZE}`, children: jsx_runtime_1.jsx("circle", { r: exports.RENDER_STATUS_INDICATOR_SIZE / 2 - STROKE_WIDTH, stroke: colors_1.LIGHT_TEXT, fill: "none", strokeWidth: STROKE_WIDTH, cx: exports.RENDER_STATUS_INDICATOR_SIZE / 2, cy: exports.RENDER_STATUS_INDICATOR_SIZE / 2, strokeDasharray: `${circumference} ${circumference}`, strokeMiterlimit: 0, strokeDashoffset: (1 - progress) * circumference }) }));
 };
 exports.CircularProgress = CircularProgress;

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

@@ -1 +1,2 @@
+export declare const downloadBlob: (blob: Blob, filename: string) => void;
 export declare const ClientRenderQueueProcessor: React.FC;

package/dist/components/RenderQueue/ClientRenderQueueProcessor.js

@@ -1,8 +1,9 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.ClientRenderQueueProcessor = void 0;
+exports.ClientRenderQueueProcessor = exports.downloadBlob = void 0;
 const web_renderer_1 = require("@remotion/web-renderer");
 const react_1 = require("react");
+const save_render_output_1 = require("../../api/save-render-output");
 const context_1 = require("./context");
 const downloadBlob = (blob, filename) => {
     const url = URL.createObjectURL(blob);
@@ -15,8 +16,9 @@ const downloadBlob = (blob, filename) => {
     a.click();
     URL.revokeObjectURL(url);
 };
+exports.downloadBlob = downloadBlob;
 const ClientRenderQueueProcessor = () => {
-    const { getAbortController, getCompositionForJob, updateClientJobProgress, markClientJobDone, markClientJobFailed, markClientJobCancelled, setProcessJobCallback, } = (0, react_1.useContext)(context_1.RenderQueueContext);
+    const { getAbortController, getCompositionForJob, updateClientJobProgress, markClientJobSaving, markClientJobDone, markClientJobFailed, markClientJobCancelled, setProcessJobCallback, } = (0, react_1.useContext)(context_1.RenderQueueContext);
     const processStillJob = (0, react_1.useCallback)(async (job, signal) => {
         var _a, _b;
         const compositionRef = getCompositionForJob(job.id);
@@ -86,7 +88,6 @@ const ClientRenderQueueProcessor = () => {
             signal,
             onProgress: (progress) => {
                 onProgress(job.id, {
-                    renderedFrames: progress.renderedFrames,
                     encodedFrames: progress.encodedFrames,
                     totalFrames,
                 });
@@ -114,13 +115,40 @@ const ClientRenderQueueProcessor = () => {
                 throw new Error(`Unknown job type`);
             }
             const blob = await result.getBlob();
-            downloadBlob(blob, job.outName);
             const metadata = {
                 width: result.width,
                 height: result.height,
                 sizeInBytes: blob.size,
             };
-            markClientJobDone(job.id, result.getBlob, metadata);
+            markClientJobSaving(job.id);
+            const getBlob = () => Promise.resolve(blob);
+            const downloadAndFinish = () => {
+                (0, exports.downloadBlob)(blob, job.outName);
+                markClientJobDone(job.id, metadata, getBlob);
+            };
+            if (window.remotion_isReadOnlyStudio) {
+                downloadAndFinish();
+            }
+            else {
+                try {
+                    await (0, save_render_output_1.saveOutputFile)({ blob, filePath: job.outName });
+                    await (0, save_render_output_1.registerClientRender)({
+                        id: job.id,
+                        type: job.type,
+                        compositionId: job.compositionId,
+                        outName: job.outName,
+                        startedAt: job.startedAt,
+                        deletedOutputLocation: false,
+                        metadata,
+                    });
+                    markClientJobDone(job.id, metadata);
+                }
+                catch (err) {
+                    // eslint-disable-next-line no-console
+                    console.error('Failed to save render output, falling back to browser download.', err);
+                    downloadAndFinish();
+                }
+            }
         }
         catch (err) {
             if (abortController.signal.aborted) {
@@ -135,6 +163,7 @@ const ClientRenderQueueProcessor = () => {
         processStillJob,
         processVideoJob,
         updateClientJobProgress,
+        markClientJobSaving,
         markClientJobDone,
         markClientJobFailed,
         markClientJobCancelled,

package/dist/components/RenderQueue/RenderQueueCancelledMessage.js

@@ -10,6 +10,6 @@ const cancelledStyle = {
     cursor: 'default',
 };
 const RenderQueueCancelledMessage = () => {
-    return (0, jsx_runtime_1.jsx)("span", { style: cancelledStyle, children: "Cancelled" });
+    return jsx_runtime_1.jsx("span", { style: cancelledStyle, children: "Cancelled" });
 };
 exports.RenderQueueCancelledMessage = RenderQueueCancelledMessage;

package/dist/components/RenderQueue/RenderQueueCopyToClipboard.js

@@ -29,7 +29,7 @@ const supportsCopyingToClipboard = (job) => {
 exports.supportsCopyingToClipboard = supportsCopyingToClipboard;
 const RenderQueueCopyToClipboard = ({ job }) => {
     const renderCopyAction = (0, react_1.useCallback)((color) => {
-        return (0, jsx_runtime_1.jsx)(clipboard_1.ClipboardIcon, { style: revealIconStyle, color: color });
+        return jsx_runtime_1.jsx(clipboard_1.ClipboardIcon, { style: revealIconStyle, color: color });
     }, []);
     const onClick = (0, react_1.useCallback)(async (e) => {
         e.stopPropagation();
@@ -52,6 +52,6 @@ const RenderQueueCopyToClipboard = ({ job }) => {
             (0, NotificationCenter_1.showNotification)(`Could not copy to clipboard: ${err.message}`, 2000);
         }
     }, [job.outName]);
-    return ((0, jsx_runtime_1.jsx)(InlineAction_1.InlineAction, { title: "Copy to clipboard", renderAction: renderCopyAction, onClick: onClick }));
+    return (jsx_runtime_1.jsx(InlineAction_1.InlineAction, { title: "Copy to clipboard", renderAction: renderCopyAction, onClick: onClick }));
 };
 exports.RenderQueueCopyToClipboard = RenderQueueCopyToClipboard;

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

@@ -0,0 +1,5 @@
+import React from 'react';
+import type { ClientRenderJob } from './client-side-render-types';
+export declare const RenderQueueDownloadItem: React.FC<{
+    readonly job: ClientRenderJob;
+}>;

package/dist/components/RenderQueue/RenderQueueDownloadItem.js

@@ -0,0 +1,35 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.RenderQueueDownloadItem = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const InlineAction_1 = require("../InlineAction");
+const NotificationCenter_1 = require("../Notifications/NotificationCenter");
+const ClientRenderQueueProcessor_1 = require("./ClientRenderQueueProcessor");
+const RenderQueueDownloadItem = ({ job }) => {
+    const onClick = (0, react_1.useCallback)((e) => {
+        e.stopPropagation();
+        if (job.status !== 'done' || !job.getBlob) {
+            return;
+        }
+        job
+            .getBlob()
+            .then((blob) => {
+            (0, ClientRenderQueueProcessor_1.downloadBlob)(blob, job.outName);
+        })
+            .catch((err) => {
+            (0, NotificationCenter_1.showNotification)(`Could not download file: ${err.message}`, 2000);
+        });
+    }, [job]);
+    const icon = (0, react_1.useMemo)(() => {
+        return {
+            height: 12,
+            color: 'currentColor',
+        };
+    }, []);
+    const renderAction = (0, react_1.useCallback)((color) => {
+        return (jsx_runtime_1.jsx("svg", { style: icon, xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 512 512", children: jsx_runtime_1.jsx("path", { fill: color, d: "M288 32c0-17.7-14.3-32-32-32s-32 14.3-32 32l0 242.7-73.4-73.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l128 128c12.5 12.5 32.8 12.5 45.3 0l128-128c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L288 274.7 288 32zM64 352c-35.3 0-64 28.7-64 64l0 32c0 35.3 28.7 64 64 64l384 0c35.3 0 64-28.7 64-64l0-32c0-35.3-28.7-64-64-64l-101.5 0-45.3 45.3c-25 25-65.5 25-90.5 0L165.5 352 64 352zm368 56a24 24 0 1 1 0 48 24 24 0 1 1 0-48z" }) }));
+    }, [icon]);
+    return (jsx_runtime_1.jsx(InlineAction_1.InlineAction, { renderAction: renderAction, onClick: onClick, title: "Download" }));
+};
+exports.RenderQueueDownloadItem = RenderQueueDownloadItem;

package/dist/components/RenderQueue/RenderQueueError.js

@@ -21,6 +21,6 @@ const RenderQueueError = ({ job }) => {
     if (job.status !== 'failed') {
         throw new Error('should not have rendered this component');
     }
-    return ((0, jsx_runtime_1.jsx)("button", { onClick: onClick, type: "button", style: outputLocation, tabIndex: tabIndex, title: job.error.message, children: job.error.message }));
+    return (jsx_runtime_1.jsx("button", { onClick: onClick, type: "button", style: outputLocation, tabIndex: tabIndex, title: job.error.message, children: job.error.message }));
 };
 exports.RenderQueueError = RenderQueueError;

package/dist/components/RenderQueue/RenderQueueItem.js

@@ -7,9 +7,11 @@ const remotion_1 = require("remotion");
 const colors_1 = require("../../helpers/colors");
 const url_state_1 = require("../../helpers/url-state");
 const layout_1 = require("../layout");
+const client_side_render_types_1 = require("./client-side-render-types");
 const context_1 = require("./context");
 const RenderQueueCancelledMessage_1 = require("./RenderQueueCancelledMessage");
 const RenderQueueCopyToClipboard_1 = require("./RenderQueueCopyToClipboard");
+const RenderQueueDownloadItem_1 = require("./RenderQueueDownloadItem");
 const RenderQueueError_1 = require("./RenderQueueError");
 const RenderQueueItemCancelButton_1 = require("./RenderQueueItemCancelButton");
 const RenderQueueItemStatus_1 = require("./RenderQueueItemStatus");
@@ -18,6 +20,7 @@ const RenderQueueOutputName_1 = require("./RenderQueueOutputName");
 const RenderQueueProgressMessage_1 = require("./RenderQueueProgressMessage");
 const RenderQueueRemoveItem_1 = require("./RenderQueueRemoveItem");
 const RenderQueueRepeat_1 = require("./RenderQueueRepeat");
+const RenderQueueSavingMessage_1 = require("./RenderQueueSavingMessage");
 const container = {
     padding: 12,
     display: 'flex',
@@ -69,24 +72,41 @@ const RenderQueueItem = ({ job, selected }) => {
         (_a = document
             .querySelector(`.${SELECTED_CLASSNAME}`)) === null || _a === void 0 ? void 0 : _a.scrollIntoView({ behavior: 'smooth' });
     }, []);
+    const clientBlobInfo = (0, react_1.useMemo)(() => {
+        if (!isClientJob || job.status !== 'done' || !job.getBlob) {
+            return null;
+        }
+        return {
+            getBlob: job.getBlob,
+            width: job.metadata.width,
+            height: job.metadata.height,
+            sizeInBytes: job.metadata.sizeInBytes,
+        };
+    }, [isClientJob, job]);
     const onClick = (0, react_1.useCallback)(() => {
         if (job.status !== 'done') {
             return;
         }
-        if (isClientJob) {
-            const clientJob = job;
-            setCanvasContent({
-                type: 'output-blob',
-                displayName: job.outName,
-                getBlob: clientJob.getBlob,
-                width: clientJob.metadata.width,
-                height: clientJob.metadata.height,
-                sizeInBytes: clientJob.metadata.sizeInBytes,
-            });
+        // Cannot show folders
+        if (!isClientJob && job.type === 'sequence') {
             return;
         }
-        // Cannot show folders
-        if (job.type === 'sequence') {
+        if (clientBlobInfo) {
+            setCanvasContent((c) => {
+                const isAlreadySelected = c && c.type === 'output-blob' && c.displayName === job.outName;
+                if (isAlreadySelected && !selected) {
+                    scrollCurrentIntoView();
+                    return c;
+                }
+                return {
+                    type: 'output-blob',
+                    displayName: job.outName,
+                    getBlob: clientBlobInfo.getBlob,
+                    width: clientBlobInfo.width,
+                    height: clientBlobInfo.height,
+                    sizeInBytes: clientBlobInfo.sizeInBytes,
+                };
+            });
             return;
         }
         setCanvasContent((c) => {
@@ -98,14 +118,29 @@ const RenderQueueItem = ({ job, selected }) => {
             return { type: 'output', path: `/${job.outName}` };
         });
         (0, url_state_1.pushUrl)(`/outputs/${job.outName}`);
-    }, [job, isClientJob, scrollCurrentIntoView, selected, setCanvasContent]);
+    }, [
+        job,
+        isClientJob,
+        clientBlobInfo,
+        scrollCurrentIntoView,
+        selected,
+        setCanvasContent,
+    ]);
     (0, react_1.useEffect)(() => {
         if (selected) {
             scrollCurrentIntoView();
         }
     }, [scrollCurrentIntoView, selected]);
-    return ((0, jsx_runtime_1.jsxs)(layout_1.Row, { onPointerEnter: onPointerEnter, onPointerLeave: onPointerLeave, style: containerStyle, align: "center", onClick: onClick, className: selected ? SELECTED_CLASSNAME : undefined, children: [(0, jsx_runtime_1.jsx)(RenderQueueItemStatus_1.RenderQueueItemStatus, { job: job }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 1 }), (0, jsx_runtime_1.jsxs)("div", { style: right, children: [(0, jsx_runtime_1.jsx)("div", { style: title, children: job.compositionId }), (0, jsx_runtime_1.jsx)("div", { style: subtitle, children: job.status === 'done' ? ((0, jsx_runtime_1.jsx)(RenderQueueOutputName_1.RenderQueueOutputName, { job: job })) : job.status === 'failed' ? ((0, jsx_runtime_1.jsx)(RenderQueueError_1.RenderQueueError, { job: job })) : job.status === 'running' ? ((0, jsx_runtime_1.jsx)(RenderQueueProgressMessage_1.RenderQueueProgressMessage, { job: job })) : job.status === 'cancelled' ? ((0, jsx_runtime_1.jsx)(RenderQueueCancelledMessage_1.RenderQueueCancelledMessage, {})) : null })] }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 1 }), !isClientJob && (0, RenderQueueCopyToClipboard_1.supportsCopyingToClipboard)(job) ? ((0, jsx_runtime_1.jsx)(RenderQueueCopyToClipboard_1.RenderQueueCopyToClipboard, { job: job })) : null, job.status === 'done' ||
-                job.status === 'failed' ||
-                job.status === 'cancelled' ? ((0, jsx_runtime_1.jsx)(RenderQueueRepeat_1.RenderQueueRepeatItem, { job: job })) : null, job.status === 'running' ? ((0, jsx_runtime_1.jsx)(RenderQueueItemCancelButton_1.RenderQueueCancelButton, { job: job })) : ((0, jsx_runtime_1.jsx)(RenderQueueRemoveItem_1.RenderQueueRemoveItem, { job: job })), job.status === 'done' && !isClientJob ? ((0, jsx_runtime_1.jsx)(RenderQueueOpenInFolder_1.RenderQueueOpenInFinderItem, { job: job })) : null] }));
+    const canCopyToClipboard = job.status === 'done' &&
+        !isClientJob &&
+        (0, RenderQueueCopyToClipboard_1.supportsCopyingToClipboard)(job);
+    const canRepeat = (job.status === 'done' ||
+        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: [
+            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] }));
 };
 exports.RenderQueueItem = RenderQueueItem;

package/dist/components/RenderQueue/RenderQueueItemCancelButton.js

@@ -27,8 +27,8 @@ const RenderQueueCancelButton = ({ job }) => {
         };
     }, []);
     const renderAction = (0, react_1.useCallback)((color) => {
-        return ((0, jsx_runtime_1.jsx)("svg", { style: icon, xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 512 512", children: (0, jsx_runtime_1.jsx)("path", { fill: color, d: "M367.2 412.5L99.5 144.8C77.1 176.1 64 214.5 64 256c0 106 86 192 192 192c41.5 0 79.9-13.1 111.2-35.5zm45.3-45.3C434.9 335.9 448 297.5 448 256c0-106-86-192-192-192c-41.5 0-79.9 13.1-111.2 35.5L412.5 367.2zM512 256c0 141.4-114.6 256-256 256S0 397.4 0 256S114.6 0 256 0S512 114.6 512 256z" }) }));
+        return (jsx_runtime_1.jsx("svg", { style: icon, xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 512 512", children: jsx_runtime_1.jsx("path", { fill: color, d: "M367.2 412.5L99.5 144.8C77.1 176.1 64 214.5 64 256c0 106 86 192 192 192c41.5 0 79.9-13.1 111.2-35.5zm45.3-45.3C434.9 335.9 448 297.5 448 256c0-106-86-192-192-192c-41.5 0-79.9 13.1-111.2 35.5L412.5 367.2zM512 256c0 141.4-114.6 256-256 256S0 397.4 0 256S114.6 0 256 0S512 114.6 512 256z" }) }));
     }, [icon]);
-    return (0, jsx_runtime_1.jsx)(InlineAction_1.InlineAction, { renderAction: renderAction, onClick: onClick });
+    return jsx_runtime_1.jsx(InlineAction_1.InlineAction, { renderAction: renderAction, onClick: onClick });
 };
 exports.RenderQueueCancelButton = RenderQueueCancelButton;