@remotion/studio 4.0.404 → 4.0.406

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (10) hide show
  1. package/dist/components/RenderModal/WebRenderModal.js +6 -1
  2. package/dist/components/RenderModal/WebRenderModalLicense.js +1 -1
  3. package/dist/components/RenderModal/WebRenderModalPicture.d.ts +4 -0
  4. package/dist/components/RenderModal/WebRenderModalPicture.js +3 -5
  5. package/dist/esm/{chunk-5yga8730.js → chunk-b3crgnb3.js} +77 -57
  6. package/dist/esm/internals.mjs +77 -57
  7. package/dist/esm/previewEntry.mjs +77 -57
  8. package/dist/esm/renderEntry.mjs +1 -1
  9. package/dist/helpers/use-menu-structure.js +2 -2
  10. package/package.json +9 -9
package/dist/components/RenderModal/WebRenderModal.js CHANGED
@@ -111,6 +111,7 @@ const WebRenderModal = ({ initialFrame, defaultProps, inFrameMark, outFrameMark,
111
111
  const [renderProgress, setRenderProgress] = (0, react_1.useState)(null);
112
112
  const [transparent, setTransparent] = (0, react_1.useState)(false);
113
113
  const [muted, setMuted] = (0, react_1.useState)(false);
114
+ const [scale, setScale] = (0, react_1.useState)(1);
114
115
  const [licenseKey, setLicenseKey] = (0, react_1.useState)(initialLicenseKey);
115
116
  const encodableAudioCodecs = (0, use_encodable_audio_codecs_1.useEncodableAudioCodecs)(container);
116
117
  const encodableVideoCodecs = (0, use_encodable_video_codecs_1.useEncodableVideoCodecs)(container);
@@ -291,6 +292,7 @@ const WebRenderModal = ({ initialFrame, defaultProps, inFrameMark, outFrameMark,
291
292
  mediaCacheSizeInBytes,
292
293
  logLevel,
293
294
  licenseKey: licenseKey !== null && licenseKey !== void 0 ? licenseKey : undefined,
295
+ scale,
294
296
  });
295
297
  const url = URL.createObjectURL(blob);
296
298
  const a = document.createElement('a');
@@ -319,6 +321,7 @@ const WebRenderModal = ({ initialFrame, defaultProps, inFrameMark, outFrameMark,
319
321
  unresolvedComposition.calculateMetadata,
320
322
  resolvedComposition.id,
321
323
  licenseKey,
324
+ scale,
322
325
  ]);
323
326
  const onRenderVideo = (0, react_1.useCallback)(async () => {
324
327
  setRenderProgress({ renderedFrames: 0, encodedFrames: 0 });
@@ -352,6 +355,7 @@ const WebRenderModal = ({ initialFrame, defaultProps, inFrameMark, outFrameMark,
352
355
  muted,
353
356
  outputTarget: 'web-fs',
354
357
  licenseKey: licenseKey !== null && licenseKey !== void 0 ? licenseKey : undefined,
358
+ scale,
355
359
  });
356
360
  setRenderProgress(null);
357
361
  const blob = await getBlob();
@@ -390,6 +394,7 @@ const WebRenderModal = ({ initialFrame, defaultProps, inFrameMark, outFrameMark,
390
394
  resolvedComposition.id,
391
395
  unresolvedComposition.calculateMetadata,
392
396
  licenseKey,
397
+ scale,
393
398
  ]);
394
399
  const onRender = (0, react_1.useCallback)(async () => {
395
400
  if (renderMode === 'still') {
@@ -401,7 +406,7 @@ const WebRenderModal = ({ initialFrame, defaultProps, inFrameMark, outFrameMark,
401
406
  }, [renderMode, onRenderStill, onRenderVideo]);
402
407
  return ((0, jsx_runtime_1.jsxs)("div", { style: render_modals_1.outerModalStyle, children: [(0, jsx_runtime_1.jsx)(ModalHeader_1.ModalHeader, { title: `Render ${resolvedComposition.id}` }), (0, jsx_runtime_1.jsxs)("div", { style: render_modals_1.container, children: [(0, jsx_runtime_1.jsx)(SegmentedControl_1.SegmentedControl, { items: renderTabOptions, needsWrapping: false }), (0, jsx_runtime_1.jsx)("div", { style: render_modals_1.flexer }), (0, jsx_runtime_1.jsxs)(Button_1.Button, { autoFocus: true, onClick: onRender, style: render_modals_1.buttonStyle, disabled: !outnameValidation.valid, children: [renderProgress
403
408
  ? `Rendering... ${renderProgress.renderedFrames}/${finalEndFrame}`
404
- : `Render ${renderMode}`, (0, jsx_runtime_1.jsx)(ShortcutHint_1.ShortcutHint, { keyToPress: "\u21B5", cmdOrCtrl: true })] })] }), (0, jsx_runtime_1.jsx)("div", { style: render_modals_1.container, children: (0, jsx_runtime_1.jsx)(WebRendererExperimentalBadge_1.WebRendererExperimentalBadge, {}) }), (0, jsx_runtime_1.jsxs)("div", { style: render_modals_1.horizontalLayout, children: [(0, jsx_runtime_1.jsxs)("div", { style: render_modals_1.leftSidebar, children: [(0, jsx_runtime_1.jsxs)(vertical_1.VerticalTab, { style: render_modals_1.horizontalTab, selected: tab === 'general', onClick: () => setTab('general'), children: [(0, jsx_runtime_1.jsx)("div", { style: render_modals_1.iconContainer, children: (0, jsx_runtime_1.jsx)(file_1.FileIcon, { style: render_modals_1.icon }) }), "General"] }), (0, jsx_runtime_1.jsxs)(vertical_1.VerticalTab, { style: render_modals_1.horizontalTab, selected: tab === 'data', onClick: () => setTab('data'), children: [(0, jsx_runtime_1.jsx)("div", { style: render_modals_1.iconContainer, children: (0, jsx_runtime_1.jsx)(data_1.DataIcon, { style: render_modals_1.icon }) }), "Input Props"] }), renderMode === 'video' ? ((0, jsx_runtime_1.jsxs)(vertical_1.VerticalTab, { style: render_modals_1.horizontalTab, selected: tab === 'picture', onClick: () => setTab('picture'), children: [(0, jsx_runtime_1.jsx)("div", { style: render_modals_1.iconContainer, children: (0, jsx_runtime_1.jsx)(frame_1.PicIcon, { style: render_modals_1.icon }) }), "Picture"] })) : null, renderMode === 'video' ? ((0, jsx_runtime_1.jsxs)(vertical_1.VerticalTab, { style: render_modals_1.horizontalTab, selected: tab === 'audio', onClick: () => setTab('audio'), children: [(0, jsx_runtime_1.jsx)("div", { style: render_modals_1.iconContainer, children: (0, jsx_runtime_1.jsx)(audio_1.AudioIcon, { style: render_modals_1.icon }) }), "Audio"] })) : null, (0, jsx_runtime_1.jsxs)(vertical_1.VerticalTab, { style: render_modals_1.horizontalTab, selected: tab === 'advanced', onClick: () => setTab('advanced'), children: [(0, jsx_runtime_1.jsx)("div", { style: render_modals_1.iconContainer, children: (0, jsx_runtime_1.jsx)(gear_1.GearIcon, { style: render_modals_1.icon }) }), "Other"] }), (0, jsx_runtime_1.jsxs)(vertical_1.VerticalTab, { style: render_modals_1.horizontalTab, selected: tab === 'license', onClick: () => setTab('license'), children: [(0, jsx_runtime_1.jsx)("div", { style: render_modals_1.iconContainer, children: (0, jsx_runtime_1.jsx)(certificate_1.CertificateIcon, { style: render_modals_1.icon }) }), "License"] })] }), (0, jsx_runtime_1.jsx)("div", { style: render_modals_1.optionsPanel, className: is_menu_item_1.VERTICAL_SCROLLBAR_CLASSNAME, children: tab === 'general' ? ((0, 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: setCodec, 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' ? ((0, jsx_runtime_1.jsx)(DataEditor_1.DataEditor, { defaultProps: inputProps, setDefaultProps: setInputProps, unresolvedComposition: unresolvedComposition, mayShowSaveButton: false, propsEditType: "input-props", saving: saving, setSaving: setSaving, readOnlyStudio: false })) : tab === 'picture' ? ((0, jsx_runtime_1.jsx)(WebRenderModalPicture_1.WebRenderModalPicture, { renderMode: renderMode, videoBitrate: videoBitrate, setVideoBitrate: setVideoBitrate, keyframeIntervalInSeconds: keyframeIntervalInSeconds, setKeyframeIntervalInSeconds: setKeyframeIntervalInSeconds, transparent: transparent, setTransparent: setTransparent })) : tab === 'audio' ? ((0, jsx_runtime_1.jsx)(WebRenderModalAudio_1.WebRenderModalAudio, { muted: muted, setMuted: setMuted, audioCodec: audioCodec, setAudioCodec: setAudioCodec, audioBitrate: audioBitrate, setAudioBitrate: setAudioBitrate, container: container, encodableCodecs: encodableAudioCodecs, effectiveAudioCodec: effectiveAudioCodec })) : tab === 'advanced' ? ((0, jsx_runtime_1.jsx)(WebRenderModalAdvanced_1.WebRenderModalAdvanced, { renderMode: renderMode, delayRenderTimeout: delayRenderTimeout, setDelayRenderTimeout: setDelayRenderTimeout, mediaCacheSizeInBytes: mediaCacheSizeInBytes, setMediaCacheSizeInBytes: setMediaCacheSizeInBytes, hardwareAcceleration: hardwareAcceleration, setHardwareAcceleration: setHardwareAcceleration })) : ((0, jsx_runtime_1.jsx)(WebRenderModalLicense_1.WebRenderModalLicense, { licenseKey: licenseKey, setLicenseKey: setLicenseKey, initialPublicLicenseKey: initialLicenseKey })) })] })] }));
409
+ : `Render ${renderMode}`, (0, jsx_runtime_1.jsx)(ShortcutHint_1.ShortcutHint, { keyToPress: "\u21B5", cmdOrCtrl: true })] })] }), (0, jsx_runtime_1.jsx)("div", { style: render_modals_1.container, children: (0, jsx_runtime_1.jsx)(WebRendererExperimentalBadge_1.WebRendererExperimentalBadge, {}) }), (0, jsx_runtime_1.jsxs)("div", { style: render_modals_1.horizontalLayout, children: [(0, jsx_runtime_1.jsxs)("div", { style: render_modals_1.leftSidebar, children: [(0, jsx_runtime_1.jsxs)(vertical_1.VerticalTab, { style: render_modals_1.horizontalTab, selected: tab === 'general', onClick: () => setTab('general'), children: [(0, jsx_runtime_1.jsx)("div", { style: render_modals_1.iconContainer, children: (0, jsx_runtime_1.jsx)(file_1.FileIcon, { style: render_modals_1.icon }) }), "General"] }), (0, jsx_runtime_1.jsxs)(vertical_1.VerticalTab, { style: render_modals_1.horizontalTab, selected: tab === 'data', onClick: () => setTab('data'), children: [(0, jsx_runtime_1.jsx)("div", { style: render_modals_1.iconContainer, children: (0, jsx_runtime_1.jsx)(data_1.DataIcon, { style: render_modals_1.icon }) }), "Input Props"] }), (0, jsx_runtime_1.jsxs)(vertical_1.VerticalTab, { style: render_modals_1.horizontalTab, selected: tab === 'picture', onClick: () => setTab('picture'), children: [(0, jsx_runtime_1.jsx)("div", { style: render_modals_1.iconContainer, children: (0, jsx_runtime_1.jsx)(frame_1.PicIcon, { style: render_modals_1.icon }) }), "Picture"] }), renderMode === 'video' ? ((0, jsx_runtime_1.jsxs)(vertical_1.VerticalTab, { style: render_modals_1.horizontalTab, selected: tab === 'audio', onClick: () => setTab('audio'), children: [(0, jsx_runtime_1.jsx)("div", { style: render_modals_1.iconContainer, children: (0, jsx_runtime_1.jsx)(audio_1.AudioIcon, { style: render_modals_1.icon }) }), "Audio"] })) : null, (0, jsx_runtime_1.jsxs)(vertical_1.VerticalTab, { style: render_modals_1.horizontalTab, selected: tab === 'advanced', onClick: () => setTab('advanced'), children: [(0, jsx_runtime_1.jsx)("div", { style: render_modals_1.iconContainer, children: (0, jsx_runtime_1.jsx)(gear_1.GearIcon, { style: render_modals_1.icon }) }), "Other"] }), (0, jsx_runtime_1.jsxs)(vertical_1.VerticalTab, { style: render_modals_1.horizontalTab, selected: tab === 'license', onClick: () => setTab('license'), children: [(0, jsx_runtime_1.jsx)("div", { style: render_modals_1.iconContainer, children: (0, jsx_runtime_1.jsx)(certificate_1.CertificateIcon, { style: render_modals_1.icon }) }), "License"] })] }), (0, jsx_runtime_1.jsx)("div", { style: render_modals_1.optionsPanel, className: is_menu_item_1.VERTICAL_SCROLLBAR_CLASSNAME, children: tab === 'general' ? ((0, 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: setCodec, 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' ? ((0, jsx_runtime_1.jsx)(DataEditor_1.DataEditor, { defaultProps: inputProps, setDefaultProps: setInputProps, unresolvedComposition: unresolvedComposition, mayShowSaveButton: false, propsEditType: "input-props", saving: saving, setSaving: setSaving, readOnlyStudio: false })) : tab === 'picture' ? ((0, jsx_runtime_1.jsx)(WebRenderModalPicture_1.WebRenderModalPicture, { renderMode: renderMode, videoBitrate: videoBitrate, setVideoBitrate: setVideoBitrate, keyframeIntervalInSeconds: keyframeIntervalInSeconds, setKeyframeIntervalInSeconds: setKeyframeIntervalInSeconds, transparent: transparent, setTransparent: setTransparent, scale: scale, setScale: setScale, compositionWidth: resolvedComposition.width, compositionHeight: resolvedComposition.height })) : tab === 'audio' ? ((0, jsx_runtime_1.jsx)(WebRenderModalAudio_1.WebRenderModalAudio, { muted: muted, setMuted: setMuted, audioCodec: audioCodec, setAudioCodec: setAudioCodec, audioBitrate: audioBitrate, setAudioBitrate: setAudioBitrate, container: container, encodableCodecs: encodableAudioCodecs, effectiveAudioCodec: effectiveAudioCodec })) : tab === 'advanced' ? ((0, jsx_runtime_1.jsx)(WebRenderModalAdvanced_1.WebRenderModalAdvanced, { renderMode: renderMode, delayRenderTimeout: delayRenderTimeout, setDelayRenderTimeout: setDelayRenderTimeout, mediaCacheSizeInBytes: mediaCacheSizeInBytes, setMediaCacheSizeInBytes: setMediaCacheSizeInBytes, hardwareAcceleration: hardwareAcceleration, setHardwareAcceleration: setHardwareAcceleration })) : ((0, jsx_runtime_1.jsx)(WebRenderModalLicense_1.WebRenderModalLicense, { licenseKey: licenseKey, setLicenseKey: setLicenseKey, initialPublicLicenseKey: initialLicenseKey })) })] })] }));
405
410
  };
406
411
  const WebRenderModalWithLoader = (props) => {
407
412
  return ((0, jsx_runtime_1.jsx)(DismissableModal_1.DismissableModal, { children: (0, jsx_runtime_1.jsx)(ResolveCompositionBeforeModal_1.ResolveCompositionBeforeModal, { compositionId: props.compositionId, children: (0, jsx_runtime_1.jsx)(WebRenderModal, { ...props }) }) }));
package/dist/components/RenderModal/WebRenderModalLicense.js CHANGED
@@ -160,7 +160,7 @@ const WebRenderModalLicense = ({ licenseKey, setLicenseKey, initialPublicLicense
160
160
  const onLicenseKeyChange = (0, react_1.useCallback)((e) => {
161
161
  setLicenseKey(e.target.value);
162
162
  }, [setLicenseKey]);
163
- 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 from", ' ', (0, jsx_runtime_1.jsx)("a", { href: "https://remotion.pro/dashboard", target: "_blank", style: descriptionLink, children: "remotion.pro" }), ' ', "key 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
163
+ 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
164
164
  ? 'ok'
165
165
  : '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] }));
166
166
  };
package/dist/components/RenderModal/WebRenderModalPicture.d.ts CHANGED
@@ -9,6 +9,10 @@ type WebRenderModalPictureProps = {
9
9
  readonly setKeyframeIntervalInSeconds: React.Dispatch<React.SetStateAction<number>>;
10
10
  readonly transparent: boolean;
11
11
  readonly setTransparent: React.Dispatch<React.SetStateAction<boolean>>;
12
+ readonly scale: number;
13
+ readonly setScale: React.Dispatch<React.SetStateAction<number>>;
14
+ readonly compositionWidth: number;
15
+ readonly compositionHeight: number;
12
16
  };
13
17
  export declare const WebRenderModalPicture: React.FC<WebRenderModalPictureProps>;
14
18
  export {};
package/dist/components/RenderModal/WebRenderModalPicture.js CHANGED
@@ -8,17 +8,15 @@ const ComboBox_1 = require("../NewComposition/ComboBox");
8
8
  const layout_1 = require("./layout");
9
9
  const NumberSetting_1 = require("./NumberSetting");
10
10
  const quality_options_1 = require("./quality-options");
11
+ const ScaleSetting_1 = require("./ScaleSetting");
11
12
  const tabContainer = {
12
13
  flex: 1,
13
14
  };
14
- const WebRenderModalPicture = ({ renderMode, videoBitrate, setVideoBitrate, keyframeIntervalInSeconds, setKeyframeIntervalInSeconds, transparent, setTransparent, }) => {
15
+ const WebRenderModalPicture = ({ renderMode, videoBitrate, setVideoBitrate, keyframeIntervalInSeconds, setKeyframeIntervalInSeconds, transparent, setTransparent, scale, setScale, compositionWidth, compositionHeight, }) => {
15
16
  const qualityOptions = (0, react_1.useMemo)(() => (0, quality_options_1.getQualityOptions)(videoBitrate, setVideoBitrate), [videoBitrate, setVideoBitrate]);
16
17
  const onTransparentChanged = (0, react_1.useCallback)((e) => {
17
18
  setTransparent(e.target.checked);
18
19
  }, [setTransparent]);
19
- if (renderMode !== 'video') {
20
- return null;
21
- }
22
- return ((0, jsx_runtime_1.jsxs)("div", { style: tabContainer, 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" }) })] })] }));
20
+ 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" }) })] })] }))] }));
23
21
  };
24
22
  exports.WebRenderModalPicture = WebRenderModalPicture;
package/dist/esm/{chunk-5yga8730.js → chunk-b3crgnb3.js} RENAMED
@@ -6721,10 +6721,10 @@ var useMenuStructure = (closeMenu, readOnlyStudio) => {
6721
6721
  {
6722
6722
  id: "spring-editor",
6723
6723
  value: "spring-editor",
6724
- label: "spring() Editor",
6724
+ label: "Timing Editor",
6725
6725
  onClick: () => {
6726
6726
  closeMenu();
6727
- window.open("https://springs.remotion.dev", "_blank");
6727
+ window.open("https://www.remotion.dev/timing-editor", "_blank");
6728
6728
  },
6729
6729
  leftItem: null,
6730
6730
  keyHint: null,
@@ -43367,7 +43367,7 @@ var WebRenderModalLicense = ({
43367
43367
  licenseKey !== "free-license" && licenseKey !== null ? /* @__PURE__ */ jsxs140("div", {
43368
43368
  style: paddedDescriptionStyle,
43369
43369
  children: [
43370
- "Add your public license from",
43370
+ "Add your public license key from",
43371
43371
  " ",
43372
43372
  /* @__PURE__ */ jsx264("a", {
43373
43373
  href: "https://remotion.pro/dashboard",
@@ -43376,7 +43376,7 @@ var WebRenderModalLicense = ({
43376
43376
  children: "remotion.pro"
43377
43377
  }),
43378
43378
  " ",
43379
- "key below.",
43379
+ "below.",
43380
43380
  /* @__PURE__ */ jsx264(Spacing, {
43381
43381
  y: 1,
43382
43382
  block: true
@@ -43464,7 +43464,7 @@ var WebRenderModalLicense = ({
43464
43464
 
43465
43465
  // src/components/RenderModal/WebRenderModalPicture.tsx
43466
43466
  import { useCallback as useCallback129, useMemo as useMemo132 } from "react";
43467
- import { jsx as jsx265, jsxs as jsxs141 } from "react/jsx-runtime";
43467
+ import { jsx as jsx265, jsxs as jsxs141, Fragment as Fragment48 } from "react/jsx-runtime";
43468
43468
  var tabContainer4 = {
43469
43469
  flex: 1
43470
43470
  };
@@ -43475,58 +43475,69 @@ var WebRenderModalPicture = ({
43475
43475
  keyframeIntervalInSeconds,
43476
43476
  setKeyframeIntervalInSeconds,
43477
43477
  transparent,
43478
- setTransparent
43478
+ setTransparent,
43479
+ scale,
43480
+ setScale,
43481
+ compositionWidth,
43482
+ compositionHeight
43479
43483
  }) => {
43480
43484
  const qualityOptions = useMemo132(() => getQualityOptions(videoBitrate, setVideoBitrate), [videoBitrate, setVideoBitrate]);
43481
43485
  const onTransparentChanged = useCallback129((e) => {
43482
43486
  setTransparent(e.target.checked);
43483
43487
  }, [setTransparent]);
43484
- if (renderMode !== "video") {
43485
- return null;
43486
- }
43487
43488
  return /* @__PURE__ */ jsxs141("div", {
43488
43489
  style: tabContainer4,
43489
43490
  children: [
43490
- /* @__PURE__ */ jsxs141("div", {
43491
- style: optionRow,
43492
- children: [
43493
- /* @__PURE__ */ jsx265("div", {
43494
- style: label5,
43495
- children: "Quality"
43496
- }),
43497
- /* @__PURE__ */ jsx265("div", {
43498
- style: rightRow,
43499
- children: /* @__PURE__ */ jsx265(Combobox, {
43500
- values: qualityOptions,
43501
- selectedId: videoBitrate,
43502
- title: "Quality"
43503
- })
43504
- })
43505
- ]
43506
- }),
43507
- /* @__PURE__ */ jsx265(NumberSetting, {
43508
- name: "Keyframe Interval",
43509
- formatter: (v) => `${v}s`,
43510
- min: 1,
43511
- max: 300,
43512
- step: 1,
43513
- value: keyframeIntervalInSeconds,
43514
- onValueChanged: setKeyframeIntervalInSeconds
43491
+ /* @__PURE__ */ jsx265(ScaleSetting, {
43492
+ scale,
43493
+ setScale,
43494
+ compositionWidth,
43495
+ compositionHeight
43515
43496
  }),
43516
- /* @__PURE__ */ jsxs141("div", {
43517
- style: optionRow,
43497
+ renderMode !== "video" ? null : /* @__PURE__ */ jsxs141(Fragment48, {
43518
43498
  children: [
43519
- /* @__PURE__ */ jsx265("div", {
43520
- style: label5,
43521
- children: "Transparent"
43499
+ /* @__PURE__ */ jsxs141("div", {
43500
+ style: optionRow,
43501
+ children: [
43502
+ /* @__PURE__ */ jsx265("div", {
43503
+ style: label5,
43504
+ children: "Quality"
43505
+ }),
43506
+ /* @__PURE__ */ jsx265("div", {
43507
+ style: rightRow,
43508
+ children: /* @__PURE__ */ jsx265(Combobox, {
43509
+ values: qualityOptions,
43510
+ selectedId: videoBitrate,
43511
+ title: "Quality"
43512
+ })
43513
+ })
43514
+ ]
43522
43515
  }),
43523
- /* @__PURE__ */ jsx265("div", {
43524
- style: rightRow,
43525
- children: /* @__PURE__ */ jsx265(Checkbox, {
43526
- checked: transparent,
43527
- onChange: onTransparentChanged,
43528
- name: "transparent"
43529
- })
43516
+ /* @__PURE__ */ jsx265(NumberSetting, {
43517
+ name: "Keyframe Interval",
43518
+ formatter: (v) => `${v}s`,
43519
+ min: 1,
43520
+ max: 300,
43521
+ step: 1,
43522
+ value: keyframeIntervalInSeconds,
43523
+ onValueChanged: setKeyframeIntervalInSeconds
43524
+ }),
43525
+ /* @__PURE__ */ jsxs141("div", {
43526
+ style: optionRow,
43527
+ children: [
43528
+ /* @__PURE__ */ jsx265("div", {
43529
+ style: label5,
43530
+ children: "Transparent"
43531
+ }),
43532
+ /* @__PURE__ */ jsx265("div", {
43533
+ style: rightRow,
43534
+ children: /* @__PURE__ */ jsx265(Checkbox, {
43535
+ checked: transparent,
43536
+ onChange: onTransparentChanged,
43537
+ name: "transparent"
43538
+ })
43539
+ })
43540
+ ]
43530
43541
  })
43531
43542
  ]
43532
43543
  })
@@ -43619,6 +43630,7 @@ var WebRenderModal = ({
43619
43630
  const [renderProgress, setRenderProgress] = useState84(null);
43620
43631
  const [transparent, setTransparent] = useState84(false);
43621
43632
  const [muted, setMuted] = useState84(false);
43633
+ const [scale, setScale] = useState84(1);
43622
43634
  const [licenseKey, setLicenseKey] = useState84(initialLicenseKey);
43623
43635
  const encodableAudioCodecs = useEncodableAudioCodecs(container61);
43624
43636
  const encodableVideoCodecs = useEncodableVideoCodecs(container61);
@@ -43786,7 +43798,8 @@ var WebRenderModal = ({
43786
43798
  delayRenderTimeoutInMilliseconds: delayRenderTimeout,
43787
43799
  mediaCacheSizeInBytes,
43788
43800
  logLevel,
43789
- licenseKey: licenseKey ?? undefined
43801
+ licenseKey: licenseKey ?? undefined,
43802
+ scale
43790
43803
  });
43791
43804
  const url = URL.createObjectURL(blob);
43792
43805
  const a = document.createElement("a");
@@ -43811,7 +43824,8 @@ var WebRenderModal = ({
43811
43824
  resolvedComposition.defaultProps,
43812
43825
  unresolvedComposition.calculateMetadata,
43813
43826
  resolvedComposition.id,
43814
- licenseKey
43827
+ licenseKey,
43828
+ scale
43815
43829
  ]);
43816
43830
  const onRenderVideo = useCallback130(async () => {
43817
43831
  setRenderProgress({ renderedFrames: 0, encodedFrames: 0 });
@@ -43844,7 +43858,8 @@ var WebRenderModal = ({
43844
43858
  transparent,
43845
43859
  muted,
43846
43860
  outputTarget: "web-fs",
43847
- licenseKey: licenseKey ?? undefined
43861
+ licenseKey: licenseKey ?? undefined,
43862
+ scale
43848
43863
  });
43849
43864
  setRenderProgress(null);
43850
43865
  const blob = await getBlob();
@@ -43879,7 +43894,8 @@ var WebRenderModal = ({
43879
43894
  resolvedComposition.defaultProps,
43880
43895
  resolvedComposition.id,
43881
43896
  unresolvedComposition.calculateMetadata,
43882
- licenseKey
43897
+ licenseKey,
43898
+ scale
43883
43899
  ]);
43884
43900
  const onRender = useCallback130(async () => {
43885
43901
  if (renderMode === "still") {
@@ -43957,7 +43973,7 @@ var WebRenderModal = ({
43957
43973
  "Input Props"
43958
43974
  ]
43959
43975
  }),
43960
- renderMode === "video" ? /* @__PURE__ */ jsxs142(VerticalTab, {
43976
+ /* @__PURE__ */ jsxs142(VerticalTab, {
43961
43977
  style: horizontalTab,
43962
43978
  selected: tab === "picture",
43963
43979
  onClick: () => setTab("picture"),
@@ -43970,7 +43986,7 @@ var WebRenderModal = ({
43970
43986
  }),
43971
43987
  "Picture"
43972
43988
  ]
43973
- }) : null,
43989
+ }),
43974
43990
  renderMode === "video" ? /* @__PURE__ */ jsxs142(VerticalTab, {
43975
43991
  style: horizontalTab,
43976
43992
  selected: tab === "audio",
@@ -44056,7 +44072,11 @@ var WebRenderModal = ({
44056
44072
  keyframeIntervalInSeconds,
44057
44073
  setKeyframeIntervalInSeconds,
44058
44074
  transparent,
44059
- setTransparent
44075
+ setTransparent,
44076
+ scale,
44077
+ setScale,
44078
+ compositionWidth: resolvedComposition.width,
44079
+ compositionHeight: resolvedComposition.height
44060
44080
  }) : tab === "audio" ? /* @__PURE__ */ jsx266(WebRenderModalAudio, {
44061
44081
  muted,
44062
44082
  setMuted,
@@ -44247,7 +44267,7 @@ var KnownBugs = ({ bugs }) => {
44247
44267
  };
44248
44268
 
44249
44269
  // src/components/UpdateModal/UpdateModal.tsx
44250
- import { jsx as jsx270, jsxs as jsxs145, Fragment as Fragment48 } from "react/jsx-runtime";
44270
+ import { jsx as jsx270, jsxs as jsxs145, Fragment as Fragment49 } from "react/jsx-runtime";
44251
44271
  var container62 = {
44252
44272
  padding: 20,
44253
44273
  paddingTop: 0
@@ -44298,7 +44318,7 @@ var UpdateModal = ({ info, knownBugs }) => {
44298
44318
  /* @__PURE__ */ jsxs145("div", {
44299
44319
  style: container62,
44300
44320
  children: [
44301
- hasKnownBugs ? /* @__PURE__ */ jsxs145(Fragment48, {
44321
+ hasKnownBugs ? /* @__PURE__ */ jsxs145(Fragment49, {
44302
44322
  children: [
44303
44323
  /* @__PURE__ */ jsxs145("div", {
44304
44324
  style: title7,
@@ -44378,11 +44398,11 @@ var UpdateModal = ({ info, knownBugs }) => {
44378
44398
  };
44379
44399
 
44380
44400
  // src/components/Modals.tsx
44381
- import { jsx as jsx271, jsxs as jsxs146, Fragment as Fragment49 } from "react/jsx-runtime";
44401
+ import { jsx as jsx271, jsxs as jsxs146, Fragment as Fragment50 } from "react/jsx-runtime";
44382
44402
  var Modals = ({ readOnlyStudio }) => {
44383
44403
  const { selectedModal: modalContextType } = useContext83(ModalsContext);
44384
44404
  const canRender = useContext83(StudioServerConnectionCtx).previewServerState.type === "connected";
44385
- return /* @__PURE__ */ jsxs146(Fragment49, {
44405
+ return /* @__PURE__ */ jsxs146(Fragment50, {
44386
44406
  children: [
44387
44407
  modalContextType && modalContextType.type === "duplicate-comp" && /* @__PURE__ */ jsx271(DuplicateComposition, {
44388
44408
  compositionType: modalContextType.compositionType,
package/dist/esm/internals.mjs CHANGED
@@ -6740,10 +6740,10 @@ var useMenuStructure = (closeMenu, readOnlyStudio) => {
6740
6740
  {
6741
6741
  id: "spring-editor",
6742
6742
  value: "spring-editor",
6743
- label: "spring() Editor",
6743
+ label: "Timing Editor",
6744
6744
  onClick: () => {
6745
6745
  closeMenu();
6746
- window.open("https://springs.remotion.dev", "_blank");
6746
+ window.open("https://www.remotion.dev/timing-editor", "_blank");
6747
6747
  },
6748
6748
  leftItem: null,
6749
6749
  keyHint: null,
@@ -43386,7 +43386,7 @@ var WebRenderModalLicense = ({
43386
43386
  licenseKey !== "free-license" && licenseKey !== null ? /* @__PURE__ */ jsxs140("div", {
43387
43387
  style: paddedDescriptionStyle,
43388
43388
  children: [
43389
- "Add your public license from",
43389
+ "Add your public license key from",
43390
43390
  " ",
43391
43391
  /* @__PURE__ */ jsx264("a", {
43392
43392
  href: "https://remotion.pro/dashboard",
@@ -43395,7 +43395,7 @@ var WebRenderModalLicense = ({
43395
43395
  children: "remotion.pro"
43396
43396
  }),
43397
43397
  " ",
43398
- "key below.",
43398
+ "below.",
43399
43399
  /* @__PURE__ */ jsx264(Spacing, {
43400
43400
  y: 1,
43401
43401
  block: true
@@ -43483,7 +43483,7 @@ var WebRenderModalLicense = ({
43483
43483
 
43484
43484
  // src/components/RenderModal/WebRenderModalPicture.tsx
43485
43485
  import { useCallback as useCallback129, useMemo as useMemo132 } from "react";
43486
- import { jsx as jsx265, jsxs as jsxs141 } from "react/jsx-runtime";
43486
+ import { jsx as jsx265, jsxs as jsxs141, Fragment as Fragment48 } from "react/jsx-runtime";
43487
43487
  var tabContainer4 = {
43488
43488
  flex: 1
43489
43489
  };
@@ -43494,58 +43494,69 @@ var WebRenderModalPicture = ({
43494
43494
  keyframeIntervalInSeconds,
43495
43495
  setKeyframeIntervalInSeconds,
43496
43496
  transparent,
43497
- setTransparent
43497
+ setTransparent,
43498
+ scale,
43499
+ setScale,
43500
+ compositionWidth,
43501
+ compositionHeight
43498
43502
  }) => {
43499
43503
  const qualityOptions = useMemo132(() => getQualityOptions(videoBitrate, setVideoBitrate), [videoBitrate, setVideoBitrate]);
43500
43504
  const onTransparentChanged = useCallback129((e) => {
43501
43505
  setTransparent(e.target.checked);
43502
43506
  }, [setTransparent]);
43503
- if (renderMode !== "video") {
43504
- return null;
43505
- }
43506
43507
  return /* @__PURE__ */ jsxs141("div", {
43507
43508
  style: tabContainer4,
43508
43509
  children: [
43509
- /* @__PURE__ */ jsxs141("div", {
43510
- style: optionRow,
43511
- children: [
43512
- /* @__PURE__ */ jsx265("div", {
43513
- style: label5,
43514
- children: "Quality"
43515
- }),
43516
- /* @__PURE__ */ jsx265("div", {
43517
- style: rightRow,
43518
- children: /* @__PURE__ */ jsx265(Combobox, {
43519
- values: qualityOptions,
43520
- selectedId: videoBitrate,
43521
- title: "Quality"
43522
- })
43523
- })
43524
- ]
43525
- }),
43526
- /* @__PURE__ */ jsx265(NumberSetting, {
43527
- name: "Keyframe Interval",
43528
- formatter: (v) => `${v}s`,
43529
- min: 1,
43530
- max: 300,
43531
- step: 1,
43532
- value: keyframeIntervalInSeconds,
43533
- onValueChanged: setKeyframeIntervalInSeconds
43510
+ /* @__PURE__ */ jsx265(ScaleSetting, {
43511
+ scale,
43512
+ setScale,
43513
+ compositionWidth,
43514
+ compositionHeight
43534
43515
  }),
43535
- /* @__PURE__ */ jsxs141("div", {
43536
- style: optionRow,
43516
+ renderMode !== "video" ? null : /* @__PURE__ */ jsxs141(Fragment48, {
43537
43517
  children: [
43538
- /* @__PURE__ */ jsx265("div", {
43539
- style: label5,
43540
- children: "Transparent"
43518
+ /* @__PURE__ */ jsxs141("div", {
43519
+ style: optionRow,
43520
+ children: [
43521
+ /* @__PURE__ */ jsx265("div", {
43522
+ style: label5,
43523
+ children: "Quality"
43524
+ }),
43525
+ /* @__PURE__ */ jsx265("div", {
43526
+ style: rightRow,
43527
+ children: /* @__PURE__ */ jsx265(Combobox, {
43528
+ values: qualityOptions,
43529
+ selectedId: videoBitrate,
43530
+ title: "Quality"
43531
+ })
43532
+ })
43533
+ ]
43541
43534
  }),
43542
- /* @__PURE__ */ jsx265("div", {
43543
- style: rightRow,
43544
- children: /* @__PURE__ */ jsx265(Checkbox, {
43545
- checked: transparent,
43546
- onChange: onTransparentChanged,
43547
- name: "transparent"
43548
- })
43535
+ /* @__PURE__ */ jsx265(NumberSetting, {
43536
+ name: "Keyframe Interval",
43537
+ formatter: (v) => `${v}s`,
43538
+ min: 1,
43539
+ max: 300,
43540
+ step: 1,
43541
+ value: keyframeIntervalInSeconds,
43542
+ onValueChanged: setKeyframeIntervalInSeconds
43543
+ }),
43544
+ /* @__PURE__ */ jsxs141("div", {
43545
+ style: optionRow,
43546
+ children: [
43547
+ /* @__PURE__ */ jsx265("div", {
43548
+ style: label5,
43549
+ children: "Transparent"
43550
+ }),
43551
+ /* @__PURE__ */ jsx265("div", {
43552
+ style: rightRow,
43553
+ children: /* @__PURE__ */ jsx265(Checkbox, {
43554
+ checked: transparent,
43555
+ onChange: onTransparentChanged,
43556
+ name: "transparent"
43557
+ })
43558
+ })
43559
+ ]
43549
43560
  })
43550
43561
  ]
43551
43562
  })
@@ -43638,6 +43649,7 @@ var WebRenderModal = ({
43638
43649
  const [renderProgress, setRenderProgress] = useState84(null);
43639
43650
  const [transparent, setTransparent] = useState84(false);
43640
43651
  const [muted, setMuted] = useState84(false);
43652
+ const [scale, setScale] = useState84(1);
43641
43653
  const [licenseKey, setLicenseKey] = useState84(initialLicenseKey);
43642
43654
  const encodableAudioCodecs = useEncodableAudioCodecs(container61);
43643
43655
  const encodableVideoCodecs = useEncodableVideoCodecs(container61);
@@ -43805,7 +43817,8 @@ var WebRenderModal = ({
43805
43817
  delayRenderTimeoutInMilliseconds: delayRenderTimeout,
43806
43818
  mediaCacheSizeInBytes,
43807
43819
  logLevel,
43808
- licenseKey: licenseKey ?? undefined
43820
+ licenseKey: licenseKey ?? undefined,
43821
+ scale
43809
43822
  });
43810
43823
  const url = URL.createObjectURL(blob);
43811
43824
  const a = document.createElement("a");
@@ -43830,7 +43843,8 @@ var WebRenderModal = ({
43830
43843
  resolvedComposition.defaultProps,
43831
43844
  unresolvedComposition.calculateMetadata,
43832
43845
  resolvedComposition.id,
43833
- licenseKey
43846
+ licenseKey,
43847
+ scale
43834
43848
  ]);
43835
43849
  const onRenderVideo = useCallback130(async () => {
43836
43850
  setRenderProgress({ renderedFrames: 0, encodedFrames: 0 });
@@ -43863,7 +43877,8 @@ var WebRenderModal = ({
43863
43877
  transparent,
43864
43878
  muted,
43865
43879
  outputTarget: "web-fs",
43866
- licenseKey: licenseKey ?? undefined
43880
+ licenseKey: licenseKey ?? undefined,
43881
+ scale
43867
43882
  });
43868
43883
  setRenderProgress(null);
43869
43884
  const blob = await getBlob();
@@ -43898,7 +43913,8 @@ var WebRenderModal = ({
43898
43913
  resolvedComposition.defaultProps,
43899
43914
  resolvedComposition.id,
43900
43915
  unresolvedComposition.calculateMetadata,
43901
- licenseKey
43916
+ licenseKey,
43917
+ scale
43902
43918
  ]);
43903
43919
  const onRender = useCallback130(async () => {
43904
43920
  if (renderMode === "still") {
@@ -43976,7 +43992,7 @@ var WebRenderModal = ({
43976
43992
  "Input Props"
43977
43993
  ]
43978
43994
  }),
43979
- renderMode === "video" ? /* @__PURE__ */ jsxs142(VerticalTab, {
43995
+ /* @__PURE__ */ jsxs142(VerticalTab, {
43980
43996
  style: horizontalTab,
43981
43997
  selected: tab === "picture",
43982
43998
  onClick: () => setTab("picture"),
@@ -43989,7 +44005,7 @@ var WebRenderModal = ({
43989
44005
  }),
43990
44006
  "Picture"
43991
44007
  ]
43992
- }) : null,
44008
+ }),
43993
44009
  renderMode === "video" ? /* @__PURE__ */ jsxs142(VerticalTab, {
43994
44010
  style: horizontalTab,
43995
44011
  selected: tab === "audio",
@@ -44075,7 +44091,11 @@ var WebRenderModal = ({
44075
44091
  keyframeIntervalInSeconds,
44076
44092
  setKeyframeIntervalInSeconds,
44077
44093
  transparent,
44078
- setTransparent
44094
+ setTransparent,
44095
+ scale,
44096
+ setScale,
44097
+ compositionWidth: resolvedComposition.width,
44098
+ compositionHeight: resolvedComposition.height
44079
44099
  }) : tab === "audio" ? /* @__PURE__ */ jsx266(WebRenderModalAudio, {
44080
44100
  muted,
44081
44101
  setMuted,
@@ -44266,7 +44286,7 @@ var KnownBugs = ({ bugs }) => {
44266
44286
  };
44267
44287
 
44268
44288
  // src/components/UpdateModal/UpdateModal.tsx
44269
- import { jsx as jsx270, jsxs as jsxs145, Fragment as Fragment48 } from "react/jsx-runtime";
44289
+ import { jsx as jsx270, jsxs as jsxs145, Fragment as Fragment49 } from "react/jsx-runtime";
44270
44290
  var container62 = {
44271
44291
  padding: 20,
44272
44292
  paddingTop: 0
@@ -44317,7 +44337,7 @@ var UpdateModal = ({ info, knownBugs }) => {
44317
44337
  /* @__PURE__ */ jsxs145("div", {
44318
44338
  style: container62,
44319
44339
  children: [
44320
- hasKnownBugs ? /* @__PURE__ */ jsxs145(Fragment48, {
44340
+ hasKnownBugs ? /* @__PURE__ */ jsxs145(Fragment49, {
44321
44341
  children: [
44322
44342
  /* @__PURE__ */ jsxs145("div", {
44323
44343
  style: title7,
@@ -44397,11 +44417,11 @@ var UpdateModal = ({ info, knownBugs }) => {
44397
44417
  };
44398
44418
 
44399
44419
  // src/components/Modals.tsx
44400
- import { jsx as jsx271, jsxs as jsxs146, Fragment as Fragment49 } from "react/jsx-runtime";
44420
+ import { jsx as jsx271, jsxs as jsxs146, Fragment as Fragment50 } from "react/jsx-runtime";
44401
44421
  var Modals = ({ readOnlyStudio }) => {
44402
44422
  const { selectedModal: modalContextType } = useContext83(ModalsContext);
44403
44423
  const canRender = useContext83(StudioServerConnectionCtx).previewServerState.type === "connected";
44404
- return /* @__PURE__ */ jsxs146(Fragment49, {
44424
+ return /* @__PURE__ */ jsxs146(Fragment50, {
44405
44425
  children: [
44406
44426
  modalContextType && modalContextType.type === "duplicate-comp" && /* @__PURE__ */ jsx271(DuplicateComposition, {
44407
44427
  compositionType: modalContextType.compositionType,
package/dist/esm/previewEntry.mjs CHANGED
@@ -6745,10 +6745,10 @@ var useMenuStructure = (closeMenu, readOnlyStudio) => {
6745
6745
  {
6746
6746
  id: "spring-editor",
6747
6747
  value: "spring-editor",
6748
- label: "spring() Editor",
6748
+ label: "Timing Editor",
6749
6749
  onClick: () => {
6750
6750
  closeMenu();
6751
- window.open("https://springs.remotion.dev", "_blank");
6751
+ window.open("https://www.remotion.dev/timing-editor", "_blank");
6752
6752
  },
6753
6753
  leftItem: null,
6754
6754
  keyHint: null,
@@ -43666,7 +43666,7 @@ var WebRenderModalLicense = ({
43666
43666
  licenseKey !== "free-license" && licenseKey !== null ? /* @__PURE__ */ jsxs140("div", {
43667
43667
  style: paddedDescriptionStyle,
43668
43668
  children: [
43669
- "Add your public license from",
43669
+ "Add your public license key from",
43670
43670
  " ",
43671
43671
  /* @__PURE__ */ jsx265("a", {
43672
43672
  href: "https://remotion.pro/dashboard",
@@ -43675,7 +43675,7 @@ var WebRenderModalLicense = ({
43675
43675
  children: "remotion.pro"
43676
43676
  }),
43677
43677
  " ",
43678
- "key below.",
43678
+ "below.",
43679
43679
  /* @__PURE__ */ jsx265(Spacing, {
43680
43680
  y: 1,
43681
43681
  block: true
@@ -43763,7 +43763,7 @@ var WebRenderModalLicense = ({
43763
43763
 
43764
43764
  // src/components/RenderModal/WebRenderModalPicture.tsx
43765
43765
  import { useCallback as useCallback130, useMemo as useMemo132 } from "react";
43766
- import { jsx as jsx266, jsxs as jsxs141 } from "react/jsx-runtime";
43766
+ import { jsx as jsx266, jsxs as jsxs141, Fragment as Fragment48 } from "react/jsx-runtime";
43767
43767
  var tabContainer4 = {
43768
43768
  flex: 1
43769
43769
  };
@@ -43774,58 +43774,69 @@ var WebRenderModalPicture = ({
43774
43774
  keyframeIntervalInSeconds,
43775
43775
  setKeyframeIntervalInSeconds,
43776
43776
  transparent,
43777
- setTransparent
43777
+ setTransparent,
43778
+ scale,
43779
+ setScale,
43780
+ compositionWidth,
43781
+ compositionHeight
43778
43782
  }) => {
43779
43783
  const qualityOptions = useMemo132(() => getQualityOptions(videoBitrate, setVideoBitrate), [videoBitrate, setVideoBitrate]);
43780
43784
  const onTransparentChanged = useCallback130((e) => {
43781
43785
  setTransparent(e.target.checked);
43782
43786
  }, [setTransparent]);
43783
- if (renderMode !== "video") {
43784
- return null;
43785
- }
43786
43787
  return /* @__PURE__ */ jsxs141("div", {
43787
43788
  style: tabContainer4,
43788
43789
  children: [
43789
- /* @__PURE__ */ jsxs141("div", {
43790
- style: optionRow,
43791
- children: [
43792
- /* @__PURE__ */ jsx266("div", {
43793
- style: label5,
43794
- children: "Quality"
43795
- }),
43796
- /* @__PURE__ */ jsx266("div", {
43797
- style: rightRow,
43798
- children: /* @__PURE__ */ jsx266(Combobox, {
43799
- values: qualityOptions,
43800
- selectedId: videoBitrate,
43801
- title: "Quality"
43802
- })
43803
- })
43804
- ]
43805
- }),
43806
- /* @__PURE__ */ jsx266(NumberSetting, {
43807
- name: "Keyframe Interval",
43808
- formatter: (v) => `${v}s`,
43809
- min: 1,
43810
- max: 300,
43811
- step: 1,
43812
- value: keyframeIntervalInSeconds,
43813
- onValueChanged: setKeyframeIntervalInSeconds
43790
+ /* @__PURE__ */ jsx266(ScaleSetting, {
43791
+ scale,
43792
+ setScale,
43793
+ compositionWidth,
43794
+ compositionHeight
43814
43795
  }),
43815
- /* @__PURE__ */ jsxs141("div", {
43816
- style: optionRow,
43796
+ renderMode !== "video" ? null : /* @__PURE__ */ jsxs141(Fragment48, {
43817
43797
  children: [
43818
- /* @__PURE__ */ jsx266("div", {
43819
- style: label5,
43820
- children: "Transparent"
43798
+ /* @__PURE__ */ jsxs141("div", {
43799
+ style: optionRow,
43800
+ children: [
43801
+ /* @__PURE__ */ jsx266("div", {
43802
+ style: label5,
43803
+ children: "Quality"
43804
+ }),
43805
+ /* @__PURE__ */ jsx266("div", {
43806
+ style: rightRow,
43807
+ children: /* @__PURE__ */ jsx266(Combobox, {
43808
+ values: qualityOptions,
43809
+ selectedId: videoBitrate,
43810
+ title: "Quality"
43811
+ })
43812
+ })
43813
+ ]
43821
43814
  }),
43822
- /* @__PURE__ */ jsx266("div", {
43823
- style: rightRow,
43824
- children: /* @__PURE__ */ jsx266(Checkbox, {
43825
- checked: transparent,
43826
- onChange: onTransparentChanged,
43827
- name: "transparent"
43828
- })
43815
+ /* @__PURE__ */ jsx266(NumberSetting, {
43816
+ name: "Keyframe Interval",
43817
+ formatter: (v) => `${v}s`,
43818
+ min: 1,
43819
+ max: 300,
43820
+ step: 1,
43821
+ value: keyframeIntervalInSeconds,
43822
+ onValueChanged: setKeyframeIntervalInSeconds
43823
+ }),
43824
+ /* @__PURE__ */ jsxs141("div", {
43825
+ style: optionRow,
43826
+ children: [
43827
+ /* @__PURE__ */ jsx266("div", {
43828
+ style: label5,
43829
+ children: "Transparent"
43830
+ }),
43831
+ /* @__PURE__ */ jsx266("div", {
43832
+ style: rightRow,
43833
+ children: /* @__PURE__ */ jsx266(Checkbox, {
43834
+ checked: transparent,
43835
+ onChange: onTransparentChanged,
43836
+ name: "transparent"
43837
+ })
43838
+ })
43839
+ ]
43829
43840
  })
43830
43841
  ]
43831
43842
  })
@@ -43918,6 +43929,7 @@ var WebRenderModal = ({
43918
43929
  const [renderProgress, setRenderProgress] = useState85(null);
43919
43930
  const [transparent, setTransparent] = useState85(false);
43920
43931
  const [muted, setMuted] = useState85(false);
43932
+ const [scale, setScale] = useState85(1);
43921
43933
  const [licenseKey, setLicenseKey] = useState85(initialLicenseKey);
43922
43934
  const encodableAudioCodecs = useEncodableAudioCodecs(container61);
43923
43935
  const encodableVideoCodecs = useEncodableVideoCodecs(container61);
@@ -44085,7 +44097,8 @@ var WebRenderModal = ({
44085
44097
  delayRenderTimeoutInMilliseconds: delayRenderTimeout,
44086
44098
  mediaCacheSizeInBytes,
44087
44099
  logLevel,
44088
- licenseKey: licenseKey ?? undefined
44100
+ licenseKey: licenseKey ?? undefined,
44101
+ scale
44089
44102
  });
44090
44103
  const url = URL.createObjectURL(blob);
44091
44104
  const a = document.createElement("a");
@@ -44110,7 +44123,8 @@ var WebRenderModal = ({
44110
44123
  resolvedComposition.defaultProps,
44111
44124
  unresolvedComposition.calculateMetadata,
44112
44125
  resolvedComposition.id,
44113
- licenseKey
44126
+ licenseKey,
44127
+ scale
44114
44128
  ]);
44115
44129
  const onRenderVideo = useCallback131(async () => {
44116
44130
  setRenderProgress({ renderedFrames: 0, encodedFrames: 0 });
@@ -44143,7 +44157,8 @@ var WebRenderModal = ({
44143
44157
  transparent,
44144
44158
  muted,
44145
44159
  outputTarget: "web-fs",
44146
- licenseKey: licenseKey ?? undefined
44160
+ licenseKey: licenseKey ?? undefined,
44161
+ scale
44147
44162
  });
44148
44163
  setRenderProgress(null);
44149
44164
  const blob = await getBlob();
@@ -44178,7 +44193,8 @@ var WebRenderModal = ({
44178
44193
  resolvedComposition.defaultProps,
44179
44194
  resolvedComposition.id,
44180
44195
  unresolvedComposition.calculateMetadata,
44181
- licenseKey
44196
+ licenseKey,
44197
+ scale
44182
44198
  ]);
44183
44199
  const onRender = useCallback131(async () => {
44184
44200
  if (renderMode === "still") {
@@ -44256,7 +44272,7 @@ var WebRenderModal = ({
44256
44272
  "Input Props"
44257
44273
  ]
44258
44274
  }),
44259
- renderMode === "video" ? /* @__PURE__ */ jsxs142(VerticalTab, {
44275
+ /* @__PURE__ */ jsxs142(VerticalTab, {
44260
44276
  style: horizontalTab,
44261
44277
  selected: tab === "picture",
44262
44278
  onClick: () => setTab("picture"),
@@ -44269,7 +44285,7 @@ var WebRenderModal = ({
44269
44285
  }),
44270
44286
  "Picture"
44271
44287
  ]
44272
- }) : null,
44288
+ }),
44273
44289
  renderMode === "video" ? /* @__PURE__ */ jsxs142(VerticalTab, {
44274
44290
  style: horizontalTab,
44275
44291
  selected: tab === "audio",
@@ -44355,7 +44371,11 @@ var WebRenderModal = ({
44355
44371
  keyframeIntervalInSeconds,
44356
44372
  setKeyframeIntervalInSeconds,
44357
44373
  transparent,
44358
- setTransparent
44374
+ setTransparent,
44375
+ scale,
44376
+ setScale,
44377
+ compositionWidth: resolvedComposition.width,
44378
+ compositionHeight: resolvedComposition.height
44359
44379
  }) : tab === "audio" ? /* @__PURE__ */ jsx267(WebRenderModalAudio, {
44360
44380
  muted,
44361
44381
  setMuted,
@@ -44546,7 +44566,7 @@ var KnownBugs = ({ bugs }) => {
44546
44566
  };
44547
44567
 
44548
44568
  // src/components/UpdateModal/UpdateModal.tsx
44549
- import { jsx as jsx271, jsxs as jsxs145, Fragment as Fragment48 } from "react/jsx-runtime";
44569
+ import { jsx as jsx271, jsxs as jsxs145, Fragment as Fragment49 } from "react/jsx-runtime";
44550
44570
  var container62 = {
44551
44571
  padding: 20,
44552
44572
  paddingTop: 0
@@ -44597,7 +44617,7 @@ var UpdateModal = ({ info, knownBugs }) => {
44597
44617
  /* @__PURE__ */ jsxs145("div", {
44598
44618
  style: container62,
44599
44619
  children: [
44600
- hasKnownBugs ? /* @__PURE__ */ jsxs145(Fragment48, {
44620
+ hasKnownBugs ? /* @__PURE__ */ jsxs145(Fragment49, {
44601
44621
  children: [
44602
44622
  /* @__PURE__ */ jsxs145("div", {
44603
44623
  style: title7,
@@ -44677,11 +44697,11 @@ var UpdateModal = ({ info, knownBugs }) => {
44677
44697
  };
44678
44698
 
44679
44699
  // src/components/Modals.tsx
44680
- import { jsx as jsx272, jsxs as jsxs146, Fragment as Fragment49 } from "react/jsx-runtime";
44700
+ import { jsx as jsx272, jsxs as jsxs146, Fragment as Fragment50 } from "react/jsx-runtime";
44681
44701
  var Modals = ({ readOnlyStudio }) => {
44682
44702
  const { selectedModal: modalContextType } = useContext83(ModalsContext);
44683
44703
  const canRender = useContext83(StudioServerConnectionCtx).previewServerState.type === "connected";
44684
- return /* @__PURE__ */ jsxs146(Fragment49, {
44704
+ return /* @__PURE__ */ jsxs146(Fragment50, {
44685
44705
  children: [
44686
44706
  modalContextType && modalContextType.type === "duplicate-comp" && /* @__PURE__ */ jsx272(DuplicateComposition, {
44687
44707
  compositionType: modalContextType.compositionType,
package/dist/esm/renderEntry.mjs CHANGED
@@ -206,7 +206,7 @@ var renderContent = (Root) => {
206
206
  renderToDOM(/* @__PURE__ */ jsx("div", {
207
207
  children: /* @__PURE__ */ jsx(DelayedSpinner, {})
208
208
  }));
209
- import("./chunk-5yga8730.js").then(({ StudioInternals }) => {
209
+ import("./chunk-b3crgnb3.js").then(({ StudioInternals }) => {
210
210
  window.remotion_isStudio = true;
211
211
  window.remotion_isReadOnlyStudio = true;
212
212
  window.remotion_inputProps = "{}";
package/dist/helpers/use-menu-structure.js CHANGED
@@ -613,10 +613,10 @@ const useMenuStructure = (closeMenu, readOnlyStudio) => {
613
613
  {
614
614
  id: 'spring-editor',
615
615
  value: 'spring-editor',
616
- label: 'spring() Editor',
616
+ label: 'Timing Editor',
617
617
  onClick: () => {
618
618
  closeMenu();
619
- window.open('https://springs.remotion.dev', '_blank');
619
+ window.open('https://www.remotion.dev/timing-editor', '_blank');
620
620
  },
621
621
  leftItem: null,
622
622
  keyHint: null,
package/package.json CHANGED
@@ -3,7 +3,7 @@
3
3
  "url": "https://github.com/remotion-dev/remotion/tree/main/packages/studio"
4
4
  },
5
5
  "name": "@remotion/studio",
6
- "version": "4.0.404",
6
+ "version": "4.0.406",
7
7
  "description": "APIs for interacting with the Remotion Studio",
8
8
  "main": "dist",
9
9
  "sideEffects": false,
@@ -25,13 +25,13 @@
25
25
  },
26
26
  "dependencies": {
27
27
  "semver": "7.5.3",
28
- "remotion": "4.0.404",
29
- "@remotion/player": "4.0.404",
30
- "@remotion/media-utils": "4.0.404",
31
- "@remotion/renderer": "4.0.404",
32
- "@remotion/web-renderer": "4.0.404",
33
- "@remotion/studio-shared": "4.0.404",
34
- "@remotion/zod-types": "4.0.404",
28
+ "remotion": "4.0.406",
29
+ "@remotion/player": "4.0.406",
30
+ "@remotion/media-utils": "4.0.406",
31
+ "@remotion/renderer": "4.0.406",
32
+ "@remotion/web-renderer": "4.0.406",
33
+ "@remotion/studio-shared": "4.0.406",
34
+ "@remotion/zod-types": "4.0.406",
35
35
  "mediabunny": "1.27.3",
36
36
  "memfs": "3.4.3",
37
37
  "source-map": "0.7.3",
@@ -42,7 +42,7 @@
42
42
  "react": "19.2.3",
43
43
  "react-dom": "19.2.3",
44
44
  "@types/semver": "^7.3.4",
45
- "@remotion/eslint-config-internal": "4.0.404",
45
+ "@remotion/eslint-config-internal": "4.0.406",
46
46
  "eslint": "9.19.0"
47
47
  },
48
48
  "publishConfig": {