@remotion/studio 4.0.527 → 4.0.529

package/dist/components/RenderModal/InfoBubble.js

@@ -23,7 +23,7 @@ const container = {
     fontSize: 14,
     verticalAlign: 'text-bottom',
 };
-const InfoBubble = ({ title, children, horizontalAlignment = 'left' }) => {
+const InfoBubble = ({ 'aria-label': ariaLabel, children, horizontalAlignment = 'left' }) => {
     const [hovered, setIsHovered] = (0, react_1.useState)(false);
     const [opened, setOpened] = (0, react_1.useState)(false);
     const ref = (0, react_1.useRef)(null);
@@ -113,7 +113,7 @@ const InfoBubble = ({ title, children, horizontalAlignment = 'left' }) => {
         };
     }, []);
     return (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
-            jsx_runtime_1.jsx("button", { ref: ref, tabIndex: tabIndex, style: style, title: title, type: "button", children: jsx_runtime_1.jsx("svg", { style: icon, viewBox: "0 0 512 512", children: jsx_runtime_1.jsx("path", { fill: hovered ? colors_1.WHITE : colors_1.LIGHT_TEXT, d: "M256 48a208 208 0 1 1 0 416 208 208 0 1 1 0-416zm0 464A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM216 336c-13.3 0-24 10.7-24 24s10.7 24 24 24h80c13.3 0 24-10.7 24-24s-10.7-24-24-24h-8V248c0-13.3-10.7-24-24-24H216c-13.3 0-24 10.7-24 24s10.7 24 24 24h24v64H216zm40-144a32 32 0 1 0 0-64 32 32 0 1 0 0 64z" }) }) }), portalStyle
+            jsx_runtime_1.jsx("button", { ref: ref, tabIndex: tabIndex, style: style, "aria-label": ariaLabel, type: "button", children: jsx_runtime_1.jsx("svg", { style: icon, viewBox: "0 0 512 512", children: jsx_runtime_1.jsx("path", { fill: hovered ? colors_1.WHITE : colors_1.LIGHT_TEXT, d: "M256 48a208 208 0 1 1 0 416 208 208 0 1 1 0-416zm0 464A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM216 336c-13.3 0-24 10.7-24 24s10.7 24 24 24h80c13.3 0 24-10.7 24-24s-10.7-24-24-24h-8V248c0-13.3-10.7-24-24-24H216c-13.3 0-24 10.7-24 24s10.7 24 24 24h24v64H216zm40-144a32 32 0 1 0 0-64 32 32 0 1 0 0 64z" }) }) }), portalStyle
                 ? react_dom_1.default.createPortal(jsx_runtime_1.jsx("div", { style: styles_1.outerPortal, className: "css-reset", children: jsx_runtime_1.jsx(z_index_1.HigherZIndex, { onOutsideClick: onHide, onEscape: onHide, children: jsx_runtime_1.jsx("div", { style: portalStyle, children: jsx_runtime_1.jsx(InfoTooltip_1.InfoTooltip, { backgroundColor: colors_1.INPUT_BACKGROUND, arrowDirection: layout, horizontalAlignment: horizontalAlignment, children: children }) }) }) }), (0, portals_1.getPortal)(currentZIndex))
                 : null] }));
 };

package/dist/components/RenderModal/NumberSetting.js

@@ -24,7 +24,7 @@ const NumberSetting = ({ name, value, step, hint, onValueChanged, max, min, form
     }, [onValueChanged]);
     return (jsx_runtime_1.jsxs("div", { style: layout_2.optionRow, children: [
             jsx_runtime_1.jsxs("div", { style: layout_2.label, children: [name, hint ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
-                            jsx_runtime_1.jsx(layout_1.Spacing, { x: 0.5 }), typeof hint === 'string' ? (jsx_runtime_1.jsx(OptionExplainerBubble_1.OptionExplainerBubble, { id: hint })) : (jsx_runtime_1.jsx(InfoBubble_1.InfoBubble, { title: hint.title, children: hint.content }))] })) : null] }), 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: value, name: name.toLowerCase(), "aria-label": `${name}: ${formatter ? formatter(value) : value}`, onTextChange: onTextChanged, onValueChange: onValueChange, step: step, placeholder: [min, max]
+                            jsx_runtime_1.jsx(layout_1.Spacing, { x: 0.5 }), typeof hint === 'string' ? (jsx_runtime_1.jsx(OptionExplainerBubble_1.OptionExplainerBubble, { id: hint })) : (jsx_runtime_1.jsx(InfoBubble_1.InfoBubble, { "aria-label": hint.title, children: hint.content }))] })) : null] }), 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: value, name: name.toLowerCase(), "aria-label": `${name}: ${formatter ? formatter(value) : value}`, onTextChange: onTextChanged, onValueChange: onValueChange, step: step, placeholder: [min, max]
                             .map((f) => (f !== null && f !== undefined ? f : ''))
                             .join('-'), min: min, max: max, formatter: formatter, status: "ok", rightAlign: true }) }) })
         ] }));

package/dist/components/RenderModal/OptionExplainerBubble.js

@@ -7,7 +7,7 @@ const InfoBubble_1 = require("./InfoBubble");
 const OptionExplainer_1 = require("./OptionExplainer");
 const OptionExplainerBubble = ({ id, extraInfoRows, showApiOption, showCliFlag }) => {
     const option = client_1.BrowserSafeApis.options[id];
-    return (jsx_runtime_1.jsx(InfoBubble_1.InfoBubble, { title: "Learn more about this option", children: jsx_runtime_1.jsx(OptionExplainer_1.OptionExplainer, { extraInfoRows: extraInfoRows, option: option, showApiOption: showApiOption, showCliFlag: showCliFlag }) }));
+    return (jsx_runtime_1.jsx(InfoBubble_1.InfoBubble, { "aria-label": "Learn more about this option", children: jsx_runtime_1.jsx(OptionExplainer_1.OptionExplainer, { extraInfoRows: extraInfoRows, option: option, showApiOption: showApiOption, showCliFlag: showCliFlag }) }));
 };
 exports.OptionExplainerBubble = OptionExplainerBubble;
 const WebRendererOptionExplainerBubble = ({ id, apiName }) => {
@@ -21,6 +21,6 @@ const WebRendererCustomOptionExplainerBubble = ({ apiName, description, docLink,
         name,
         ssrName: null,
     };
-    return (jsx_runtime_1.jsx(InfoBubble_1.InfoBubble, { title: "Learn more about this option", children: jsx_runtime_1.jsx(OptionExplainer_1.OptionExplainer, { extraInfoRows: [{ label: 'API option', value: apiName }], option: option, showApiOption: false, showCliFlag: false }) }));
+    return (jsx_runtime_1.jsx(InfoBubble_1.InfoBubble, { "aria-label": "Learn more about this option", children: jsx_runtime_1.jsx(OptionExplainer_1.OptionExplainer, { extraInfoRows: [{ label: 'API option', value: apiName }], option: option, showApiOption: false, showCliFlag: false }) }));
 };
 exports.WebRendererCustomOptionExplainerBubble = WebRendererCustomOptionExplainerBubble;

package/dist/components/RenderModal/RenderModalAdvanced.js

@@ -179,11 +179,11 @@ const RenderModalAdvanced = ({ renderMode, maxConcurrency, minConcurrency, setCo
                 ] }), jsx_runtime_1.jsxs("div", { style: layout_2.optionRow, children: [
                     jsx_runtime_1.jsxs("div", { style: layout_2.label, children: ["Chrome Mode ",
                             jsx_runtime_1.jsx(layout_1.Spacing, { x: 0.5 }), jsx_runtime_1.jsx(OptionExplainerBubble_1.OptionExplainerBubble, { id: "chromeModeOption" })
-                        ] }), jsx_runtime_1.jsx("div", { style: layout_2.rightRow, children: jsx_runtime_1.jsx(ComboBox_1.Combobox, { values: chromeModeOptions, selectedId: chromeModeOption, title: "Chrome mode" }) })
+                        ] }), jsx_runtime_1.jsx("div", { style: layout_2.rightRow, children: jsx_runtime_1.jsx(ComboBox_1.Combobox, { values: chromeModeOptions, selectedId: chromeModeOption, "aria-label": "Chrome mode" }) })
                 ] }), jsx_runtime_1.jsxs("div", { style: layout_2.optionRow, children: [
                     jsx_runtime_1.jsxs("div", { style: layout_2.label, children: ["OpenGL render backend ",
                             jsx_runtime_1.jsx(layout_1.Spacing, { x: 0.5 }), jsx_runtime_1.jsx(OptionExplainerBubble_1.OptionExplainerBubble, { id: "glOption" })
-                        ] }), jsx_runtime_1.jsx("div", { style: layout_2.rightRow, children: jsx_runtime_1.jsx(ComboBox_1.Combobox, { values: openGlOptions, selectedId: openGlOption, title: "OpenGl option" }) })
+                        ] }), jsx_runtime_1.jsx("div", { style: layout_2.rightRow, children: jsx_runtime_1.jsx(ComboBox_1.Combobox, { values: openGlOptions, selectedId: openGlOption, "aria-label": "OpenGl option" }) })
                 ] }), jsx_runtime_1.jsxs("div", { style: layout_2.optionRow, children: [
                     jsx_runtime_1.jsxs("div", { style: layout_2.label, children: ["Multi-process Chrome on Linux",
                             jsx_runtime_1.jsx(layout_1.Spacing, { x: 0.5 }), jsx_runtime_1.jsx(OptionExplainerBubble_1.OptionExplainerBubble, { id: "enableMultiprocessOnLinuxOption" })

package/dist/components/RenderModal/RenderModalAudio.js

@@ -69,7 +69,7 @@ const RenderModalAudio = ({ muted, setMuted, renderMode, enforceAudioTrack, setE
                 !muted ? (jsx_runtime_1.jsxs("div", { style: layout_2.optionRow, children: [
                     jsx_runtime_1.jsxs("div", { style: layout_2.label, children: ["Audio Codec ",
                             jsx_runtime_1.jsx(layout_1.Spacing, { x: 0.5 }), jsx_runtime_1.jsx(OptionExplainerBubble_1.OptionExplainerBubble, { id: "audioCodecOption" })
-                        ] }), jsx_runtime_1.jsx("div", { style: layout_2.rightRow, children: jsx_runtime_1.jsx(ComboBox_1.Combobox, { values: audioCodecOptions(codec), selectedId: audioCodec, title: "AudioCodec" }) })
+                        ] }), jsx_runtime_1.jsx("div", { style: layout_2.rightRow, children: jsx_runtime_1.jsx(ComboBox_1.Combobox, { values: audioCodecOptions(codec), selectedId: audioCodec, "aria-label": "AudioCodec" }) })
                 ] })) : null, (renderMode === 'video' || renderMode === 'audio') && !muted && (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
                     jsx_runtime_1.jsx(EnforceAudioTrackSetting_1.EnforceAudioTrackSetting, { muted: muted, enforceAudioTrack: enforceAudioTrack, setEnforceAudioTrack: setEnforceAudioTrackState }), jsx_runtime_1.jsx(RenderModalHr_1.RenderModalHr, {})
                 ] })), renderMode === 'video' && !muted ? (jsx_runtime_1.jsx(SeparateAudioOption_1.SeparateAudioOption, { separateAudioTo: separateAudioTo, setSeparateAudioTo: setSeparateAudioTo, audioCodec: audioCodec, outName: outName })) : null, audioCodec === 'aac' && !muted ? (jsx_runtime_1.jsxs("div", { style: layout_2.optionRow, children: [
@@ -86,7 +86,7 @@ const RenderModalAudio = ({ muted, setMuted, renderMode, enforceAudioTrack, setE
                 ] })) : null, renderMode !== 'still' && !muted ? (jsx_runtime_1.jsxs("div", { style: layout_2.optionRow, children: [
                     jsx_runtime_1.jsxs("div", { style: layout_2.label, children: ["Sample Rate ",
                             jsx_runtime_1.jsx(layout_1.Spacing, { x: 0.5 }), jsx_runtime_1.jsx(OptionExplainerBubble_1.OptionExplainerBubble, { id: "sampleRateOption" })
-                        ] }), jsx_runtime_1.jsx("div", { style: layout_2.rightRow, children: jsx_runtime_1.jsx(ComboBox_1.Combobox, { values: sampleRateOptions, selectedId: String(sampleRate), title: "Sample Rate" }) })
+                        ] }), jsx_runtime_1.jsx("div", { style: layout_2.rightRow, children: jsx_runtime_1.jsx(ComboBox_1.Combobox, { values: sampleRateOptions, selectedId: String(sampleRate), "aria-label": "Sample Rate" }) })
                 ] })) : null] }));
 };
 exports.RenderModalAudio = RenderModalAudio;

package/dist/components/RenderModal/RenderModalBasic.js

@@ -96,15 +96,15 @@ const RenderModalBasic = ({ renderMode, imageFormatOptions, outName, codec, setV
                 ] })) : (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: videoCodecOptions, selectedId: codec, title: "Codec" }) })
+                        ] }), jsx_runtime_1.jsx("div", { style: layout_2.rightRow, children: jsx_runtime_1.jsx(ComboBox_1.Combobox, { values: videoCodecOptions, selectedId: codec, "aria-label": "Codec" }) })
                 ] })), renderMode === 'still' && 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, renderMode === 'video' && codec === 'prores' ? (jsx_runtime_1.jsxs("div", { style: layout_2.optionRow, children: [
-                    jsx_runtime_1.jsx("div", { style: layout_2.label, children: "ProRes profile" }), jsx_runtime_1.jsx("div", { style: layout_2.rightRow, children: jsx_runtime_1.jsx(ComboBox_1.Combobox, { title: 'proResProfile', selectedId: proResProfile, values: proResProfileOptions }) })
+                    jsx_runtime_1.jsx("div", { style: layout_2.label, children: "ProRes profile" }), jsx_runtime_1.jsx("div", { style: layout_2.rightRow, children: jsx_runtime_1.jsx(ComboBox_1.Combobox, { "aria-label": 'proResProfile', selectedId: proResProfile, values: proResProfileOptions }) })
                 ] })) : null, renderMode === 'still' ? null : (jsx_runtime_1.jsx(FrameRangeSetting_1.FrameRangeSetting, { durationInFrames: resolvedComposition.durationInFrames, endFrame: endFrame, setEndFrame: setEndFrame, setStartFrame: setStartFrame, startFrame: startFrame })), showOutputName ? (jsx_runtime_1.jsx(RenderModalOutputName_1.RenderModalOutputName, { ariaLabel: null, existingOutputPath: null, existence: existence, inputStyle: layout_2.input, outName: outName, onValueChange: onValueChange, validationMessage: validationMessage, label: renderMode === 'sequence' ? 'Folder name' : 'Output name' })) : null, 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" }) })
+                        ] }), jsx_runtime_1.jsx("div", { style: layout_2.rightRow, children: jsx_runtime_1.jsx(ComboBox_1.Combobox, { values: logLevelOptions, selectedId: logLevel, "aria-label": "Log Level" }) })
                 ] })
         ] }));
 };

package/dist/components/RenderModal/RenderModalEncoding.js

@@ -139,15 +139,15 @@ const RenderModalEncoding = ({ renderMode, codec, qualityControlType, setQuality
                         ] }), encodingMaxRate === null ? null : (jsx_runtime_1.jsxs("div", { style: layout_2.optionRow, children: [
                             jsx_runtime_1.jsx("div", { style: layout_2.label, children: "-maxrate value" }), jsx_runtime_1.jsx("div", { style: layout_2.rightRow, children: jsx_runtime_1.jsx("div", { children: jsx_runtime_1.jsx(RemInput_1.RemotionInput, { style: layout_2.input, value: encodingMaxRate, onChange: onEncodingMaxRateChanged, status: "ok", rightAlign: true }) }) })
                         ] })), jsx_runtime_1.jsx(RenderModalHr_1.RenderModalHr, {}), jsx_runtime_1.jsxs("div", { style: layout_2.optionRow, children: [
-                            jsx_runtime_1.jsx("div", { style: layout_2.label, children: "Pixel format" }), jsx_runtime_1.jsx("div", { style: layout_2.rightRow, children: jsx_runtime_1.jsx(ComboBox_1.Combobox, { values: pixelFormatOptions, selectedId: pixelFormat, title: "Pixel Format" }) })
+                            jsx_runtime_1.jsx("div", { style: layout_2.label, children: "Pixel format" }), jsx_runtime_1.jsx("div", { style: layout_2.rightRow, children: jsx_runtime_1.jsx(ComboBox_1.Combobox, { values: pixelFormatOptions, selectedId: pixelFormat, "aria-label": "Pixel Format" }) })
                         ] }), jsx_runtime_1.jsxs("div", { style: layout_2.optionRow, children: [
                             jsx_runtime_1.jsxs("div", { style: layout_2.label, children: ["Color space",
                                     jsx_runtime_1.jsx(layout_1.Spacing, { x: 0.5 }), jsx_runtime_1.jsx(OptionExplainerBubble_1.OptionExplainerBubble, { id: "colorSpaceOption" })
-                                ] }), jsx_runtime_1.jsx("div", { style: layout_2.rightRow, children: jsx_runtime_1.jsx(ComboBox_1.Combobox, { values: colorSpaceOptions, selectedId: colorSpace, title: "Color Space" }) })
+                                ] }), jsx_runtime_1.jsx("div", { style: layout_2.rightRow, children: jsx_runtime_1.jsx(ComboBox_1.Combobox, { values: colorSpaceOptions, selectedId: colorSpace, "aria-label": "Color Space" }) })
                         ] }), jsx_runtime_1.jsx(RenderModalHr_1.RenderModalHr, {}), codec === 'h264' ? (jsx_runtime_1.jsxs("div", { style: layout_2.optionRow, children: [
                             jsx_runtime_1.jsxs("div", { style: layout_2.label, children: ["x264 Preset",
                                     jsx_runtime_1.jsx(layout_1.Spacing, { x: 0.5 }), jsx_runtime_1.jsx(OptionExplainerBubble_1.OptionExplainerBubble, { id: "x264Option" })
-                                ] }), jsx_runtime_1.jsx("div", { style: layout_2.rightRow, children: jsx_runtime_1.jsx(ComboBox_1.Combobox, { title: x264Preset, selectedId: x264Preset, values: x264PresetOptions }) })
+                                ] }), jsx_runtime_1.jsx("div", { style: layout_2.rightRow, children: jsx_runtime_1.jsx(ComboBox_1.Combobox, { "aria-label": x264Preset, selectedId: x264Preset, values: x264PresetOptions }) })
                         ] })) : null, codec !== 'gif' ? (jsx_runtime_1.jsxs("div", { style: layout_2.optionRow, children: [
                             jsx_runtime_1.jsxs("div", { style: layout_2.label, children: ["Custom GOP size",
                                     jsx_runtime_1.jsx(layout_1.Spacing, { x: 0.5 }), jsx_runtime_1.jsx(OptionExplainerBubble_1.OptionExplainerBubble, { id: "gopSizeOption" })
@@ -155,7 +155,7 @@ const RenderModalEncoding = ({ renderMode, codec, qualityControlType, setQuality
                         ] })) : null, codec !== 'gif' && gopSize !== null ? (jsx_runtime_1.jsx(NumberSetting_1.NumberSetting, { min: 1, max: 10000, step: 1, name: "GOP size", formatter: (value) => `${value} frames`, onValueChanged: changeGopSize, value: gopSize })) : null, jsx_runtime_1.jsxs("div", { style: layout_2.optionRow, children: [
                             jsx_runtime_1.jsxs("div", { style: layout_2.label, children: ["Hardware acceleration",
                                     jsx_runtime_1.jsx(layout_1.Spacing, { x: 0.5 }), jsx_runtime_1.jsx(OptionExplainerBubble_1.OptionExplainerBubble, { id: "hardwareAccelerationOption" })
-                                ] }), jsx_runtime_1.jsx("div", { style: layout_2.rightRow, children: jsx_runtime_1.jsx(ComboBox_1.Combobox, { title: hardwareAcceleration, selectedId: hardwareAcceleration, values: hardwareAccelerationValues }) })
+                                ] }), jsx_runtime_1.jsx("div", { style: layout_2.rightRow, children: jsx_runtime_1.jsx(ComboBox_1.Combobox, { "aria-label": hardwareAcceleration, selectedId: hardwareAcceleration, values: hardwareAccelerationValues }) })
                         ] })
                 ] })) : null, renderMode === 'still' ? null : (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [renderMode === 'video' ? jsx_runtime_1.jsx(RenderModalHr_1.RenderModalHr, {}) : null, jsx_runtime_1.jsxs("div", { style: layout_2.optionRow, children: [
                             jsx_runtime_1.jsx("div", { style: layout_2.label, children: "No parallel encoding" }), jsx_runtime_1.jsx("div", { style: layout_2.rightRow, children: jsx_runtime_1.jsx(Checkbox_1.Checkbox, { checked: disallowParallelEncoding, onChange: onDisallowParallelEncodingChanged, name: "disallow-parallel-encoding" }) })

package/dist/components/RenderModal/RenderModalOutputName.js

@@ -54,7 +54,7 @@ const RenderModalOutputName = ({ ariaLabel, existingOutputPath, existence, input
                         jsx_runtime_1.jsx(RemInput_1.RemotionInput, { "aria-label": ariaLabel !== null && ariaLabel !== void 0 ? ariaLabel : undefined, status: validationMessage ? 'error' : existence ? 'warning' : 'ok', style: inputStyle, type: "text", value: outName, onChange: onValueChange, rightAlign: true }), validationMessage ? (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, { align: "flex-end", message: validationMessage, type: 'error' })
                             ] })) : existence ? (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, { align: "flex-end", message: jsx_runtime_1.jsxs("span", { style: existsMessageStyle, children: [isBrowserStudio ? null : (jsx_runtime_1.jsx(InlineAction_1.InlineAction, { variant: null, onClick: openExistingOutput, renderAction: renderOpenIcon, title: `Open in ${fileManagerName}` })), "Exists, will be overwritten"] }), type: 'warning' })
+                                jsx_runtime_1.jsx(layout_1.Spacing, { y: 1, block: true }), jsx_runtime_1.jsx(ValidationMessage_1.ValidationMessage, { align: "flex-end", message: jsx_runtime_1.jsxs("span", { style: existsMessageStyle, children: [isBrowserStudio ? null : (jsx_runtime_1.jsx(InlineAction_1.InlineAction, { variant: null, onClick: openExistingOutput, renderAction: renderOpenIcon, "aria-label": `Open in ${fileManagerName}` })), "Exists, will be overwritten"] }), type: 'warning' })
                             ] })) : null] }) })
         ] }));
 };

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

@@ -49,6 +49,6 @@ const SchemaLabel = ({ jsonPath, onRemove, valid, suffix, handleClick, descripti
     const labelContent = (jsx_runtime_1.jsxs("span", { style: labelStyle, children: [(0, get_schema_label_1.getSchemaLabel)(jsonPath), " ", suffix ? suffix : null] }));
     return (jsx_runtime_1.jsxs("div", { style: compactStyles, className: scroll_to_default_props_path_1.DEFAULT_PROPS_PATH_CLASSNAME, "data-json-path": jsonPath.join('.'), children: [handleClick ? (
             // Minus the padding that a button has (user agent padding-line-start)
-            jsx_runtime_1.jsx("button", { onPointerEnter: onClickablePointerEnter, onPointerLeave: onClickablePointerLeave, type: "button", onClick: handleClick, style: { border: 'none', padding: 0 }, children: labelContent })) : (labelContent), displayedDescription ? (jsx_runtime_1.jsx(InfoBubble_1.InfoBubble, { title: "Field description", horizontalAlignment: "right", children: jsx_runtime_1.jsx("div", { style: descriptionStyle, children: displayedDescription }) })) : null, jsx_runtime_1.jsx(layout_1.Flex, {}), onRemove ? jsx_runtime_1.jsx(InlineRemoveButton_1.InlineRemoveButton, { onClick: onRemove }) : null] }));
+            jsx_runtime_1.jsx("button", { onPointerEnter: onClickablePointerEnter, onPointerLeave: onClickablePointerLeave, type: "button", onClick: handleClick, style: { border: 'none', padding: 0 }, children: labelContent })) : (labelContent), displayedDescription ? (jsx_runtime_1.jsx(InfoBubble_1.InfoBubble, { "aria-label": "Field description", horizontalAlignment: "right", children: jsx_runtime_1.jsx("div", { style: descriptionStyle, children: displayedDescription }) })) : null, jsx_runtime_1.jsx(layout_1.Flex, {}), onRemove ? jsx_runtime_1.jsx(InlineRemoveButton_1.InlineRemoveButton, { onClick: onRemove }) : null] }));
 };
 exports.SchemaLabel = SchemaLabel;

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

@@ -47,7 +47,7 @@ const ZodDiscriminatedUnionEditor = ({ schema, setValue, value, mayPad, jsonPath
         return {
             discriminator,
             markup: (jsx_runtime_1.jsxs(Fieldset_1.Fieldset, { shouldPad: mayPad, children: [
-                    jsx_runtime_1.jsx(SchemaLabel_1.SchemaLabel, { handleClick: null, jsonPath: [...jsonPath, discriminator], onRemove: onRemove, suffix: null, description: (0, zod_schema_type_1.getUserFacingDescription)(schema), valid: zodValidation.success }), jsx_runtime_1.jsx(ComboBox_1.Combobox, { title: "Select type", values: comboBoxValues, selectedId: value[discriminator], size: "small" })
+                    jsx_runtime_1.jsx(SchemaLabel_1.SchemaLabel, { handleClick: null, jsonPath: [...jsonPath, discriminator], onRemove: onRemove, suffix: null, description: (0, zod_schema_type_1.getUserFacingDescription)(schema), valid: zodValidation.success }), jsx_runtime_1.jsx(ComboBox_1.Combobox, { "aria-label": "Select type", values: comboBoxValues, selectedId: value[discriminator], size: "small" })
                 ] }, 'replacement')),
         };
     }, [

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

@@ -39,7 +39,7 @@ const ZodEnumEditor = ({ schema, jsonPath, setValue, value, onRemove, mayPad })
     }, [enumValues, onChange, value]);
     const zodValidation = (0, react_1.useMemo)(() => (0, zod_schema_type_1.zodSafeParse)(schema, value), [schema, value]);
     return (jsx_runtime_1.jsxs(Fieldset_1.Fieldset, { shouldPad: mayPad, children: [
-            jsx_runtime_1.jsx(SchemaLabel_1.SchemaLabel, { handleClick: null, jsonPath: jsonPath, onRemove: onRemove, valid: zodValidation.success, suffix: null, description: (0, zod_schema_type_1.getUserFacingDescription)(schema) }), jsx_runtime_1.jsx("div", { style: isRoot ? undefined : container, children: jsx_runtime_1.jsx(ComboBox_1.Combobox, { values: comboBoxValues, selectedId: value, title: value, size: "small" }) }), jsx_runtime_1.jsx(ZodFieldValidation_1.ZodFieldValidation, { path: jsonPath, zodValidation: zodValidation })
+            jsx_runtime_1.jsx(SchemaLabel_1.SchemaLabel, { handleClick: null, jsonPath: jsonPath, onRemove: onRemove, valid: zodValidation.success, suffix: null, description: (0, zod_schema_type_1.getUserFacingDescription)(schema) }), jsx_runtime_1.jsx("div", { style: isRoot ? undefined : container, children: jsx_runtime_1.jsx(ComboBox_1.Combobox, { values: comboBoxValues, selectedId: value, "aria-label": value, size: "small" }) }), jsx_runtime_1.jsx(ZodFieldValidation_1.ZodFieldValidation, { path: jsonPath, zodValidation: zodValidation })
         ] }));
 };
 exports.ZodEnumEditor = ZodEnumEditor;

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

@@ -21,7 +21,7 @@ const ZodFieldValidation = ({ zodValidation, path }) => {
         return null;
     }
     return (jsx_runtime_1.jsxs("div", { style: legend, children: [
-            jsx_runtime_1.jsx(ValidationMessage_1.ValidationMessage, { align: "flex-start", message: zodValidation.error.format()._errors[0], type: "error", size: "compact" }), jsx_runtime_1.jsx(layout_1.Spacing, { x: 0.5 }), jsx_runtime_1.jsx(InfoBubble_1.InfoBubble, { title: "Zod validation failure", children: jsx_runtime_1.jsxs("div", { style: stackTrace, children: [
+            jsx_runtime_1.jsx(ValidationMessage_1.ValidationMessage, { align: "flex-start", message: zodValidation.error.format()._errors[0], type: "error", size: "compact" }), jsx_runtime_1.jsx(layout_1.Spacing, { x: 0.5 }), jsx_runtime_1.jsx(InfoBubble_1.InfoBubble, { "aria-label": "Zod validation failure", children: jsx_runtime_1.jsxs("div", { style: stackTrace, children: [
                         jsx_runtime_1.jsx("div", { style: stackTraceLabel, children: "Zod Validation has failed:" }), zodValidation.error.issues.map((error, index) => (
                         // eslint-disable-next-line react/no-array-index-key
                         jsx_runtime_1.jsxs("div", { style: stackTraceLabel, children: ["Type: ", error.code, " ",

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

@@ -38,7 +38,7 @@ const ZodStaticFileEditor = ({ schema, jsonPath, setValue, value, onRemove, mayP
         });
     }, [onChange, staticFiles, value]);
     return (jsx_runtime_1.jsxs(Fieldset_1.Fieldset, { shouldPad: mayPad, children: [
-            jsx_runtime_1.jsx(SchemaLabel_1.SchemaLabel, { handleClick: null, jsonPath: jsonPath, onRemove: onRemove, valid: zodValidation.success, suffix: null, description: (0, zod_schema_type_1.getUserFacingDescription)(schema) }), jsx_runtime_1.jsx("div", { style: isRoot ? undefined : container, children: jsx_runtime_1.jsx(ComboBox_1.Combobox, { values: comboBoxValues, selectedId: value, title: value, size: "small" }) }), jsx_runtime_1.jsx(ZodFieldValidation_1.ZodFieldValidation, { path: jsonPath, zodValidation: zodValidation })
+            jsx_runtime_1.jsx(SchemaLabel_1.SchemaLabel, { handleClick: null, jsonPath: jsonPath, onRemove: onRemove, valid: zodValidation.success, suffix: null, description: (0, zod_schema_type_1.getUserFacingDescription)(schema) }), jsx_runtime_1.jsx("div", { style: isRoot ? undefined : container, children: jsx_runtime_1.jsx(ComboBox_1.Combobox, { values: comboBoxValues, selectedId: value, "aria-label": value, size: "small" }) }), jsx_runtime_1.jsx(ZodFieldValidation_1.ZodFieldValidation, { path: jsonPath, zodValidation: zodValidation })
         ] }));
 };
 exports.ZodStaticFileEditor = ZodStaticFileEditor;

package/dist/components/RenderModal/SchemaEditor/create-zod-values.js

@@ -1,7 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.createZodValues = void 0;
-const colors_1 = require("../../../helpers/colors");
 const zod_schema_type_1 = require("./zod-schema-type");
 const createZodValues = (schema, zodRuntime, zodTypes) => {
     var _a;
@@ -14,7 +13,7 @@ const createZodValues = (schema, zodRuntime, zodTypes) => {
     const description = (0, zod_schema_type_1.getZodSchemaDescription)(schema);
     if (zodTypes) {
         if (description === zodTypes.ZodZypesInternals.REMOTION_COLOR_BRAND) {
-            return colors_1.WHITE_FULL_HEX;
+            return '#ffffff';
         }
         if (description === zodTypes.ZodZypesInternals.REMOTION_TEXTAREA_BRAND) {
             return '';

package/dist/components/RenderModal/WebRenderModalAdvanced.js

@@ -162,7 +162,7 @@ const WebRenderModalAdvanced = ({ renderMode, delayRenderTimeout, setDelayRender
                             jsx_runtime_1.jsx(layout_1.Spacing, { x: 0.5 }), jsx_runtime_1.jsx(OptionExplainerBubble_1.WebRendererOptionExplainerBubble, { apiName: "mediaCacheSizeInBytes", id: "mediaCacheSizeInBytesOption" })
                         ] }), jsx_runtime_1.jsx("div", { style: layout_2.rightRow, children: jsx_runtime_1.jsx(Checkbox_1.Checkbox, { checked: mediaCacheSizeInBytes !== null, onChange: toggleCustomMediaCacheSizeInBytes, name: "media-cache-size" }) })
                 ] }), mediaCacheSizeInBytes === null ? null : (jsx_runtime_1.jsx(NumberSetting_1.NumberSetting, { name: "@remotion/media cache size", formatter: (w) => `${w} bytes`, min: 0, max: 10000000000, step: 10 * 1024 * 1024, value: mediaCacheSizeInBytes, onValueChanged: changeMediaCacheSizeInBytes })), renderMode === 'video' ? (jsx_runtime_1.jsxs("div", { style: layout_2.optionRow, children: [
-                    jsx_runtime_1.jsx("div", { style: layout_2.label, children: "Hardware Acceleration" }), jsx_runtime_1.jsx("div", { style: layout_2.rightRow, children: jsx_runtime_1.jsx(ComboBox_1.Combobox, { values: hardwareAccelerationOptions, selectedId: hardwareAcceleration, title: "Hardware Acceleration" }) })
+                    jsx_runtime_1.jsx("div", { style: layout_2.label, children: "Hardware Acceleration" }), jsx_runtime_1.jsx("div", { style: layout_2.rightRow, children: jsx_runtime_1.jsx(ComboBox_1.Combobox, { values: hardwareAccelerationOptions, selectedId: hardwareAcceleration, "aria-label": "Hardware Acceleration" }) })
                 ] })) : null, jsx_runtime_1.jsxs("div", { style: layout_2.optionRow, children: [
                     jsx_runtime_1.jsxs("div", { style: layout_2.label, children: ["Allow HTML-in-canvas ",
                             jsx_runtime_1.jsx(layout_1.Spacing, { x: 0.5 }), jsx_runtime_1.jsx(OptionExplainerBubble_1.WebRendererOptionExplainerBubble, { apiName: "allowHtmlInCanvas", id: "allowHtmlInCanvasOption" })
@@ -171,7 +171,7 @@ const WebRenderModalAdvanced = ({ renderMode, delayRenderTimeout, setDelayRender
                     jsx_runtime_1.jsxs("div", { style: layout_2.optionRow, children: [
                             jsx_runtime_1.jsxs("div", { style: layout_2.label, children: ["Page Responsiveness ",
                                     jsx_runtime_1.jsx(layout_1.Spacing, { x: 0.5 }), jsx_runtime_1.jsx(OptionExplainerBubble_1.WebRendererCustomOptionExplainerBubble, { apiName: "pageResponsiveness", description: jsx_runtime_1.jsx(PageResponsivenessDescription, {}), docLink: "https://www.remotion.dev/docs/client-side-rendering/page-responsiveness", name: "Page responsiveness" })
-                                ] }), jsx_runtime_1.jsx("div", { style: layout_2.rightRow, children: jsx_runtime_1.jsx(ComboBox_1.Combobox, { values: pageResponsivenessOptions, selectedId: selectedPageResponsiveness, title: "Page Responsiveness" }) })
+                                ] }), jsx_runtime_1.jsx("div", { style: layout_2.rightRow, children: jsx_runtime_1.jsx(ComboBox_1.Combobox, { values: pageResponsivenessOptions, selectedId: selectedPageResponsiveness, "aria-label": "Page Responsiveness" }) })
                         ] }), typeof pageResponsiveness === 'number' ? (jsx_runtime_1.jsx(NumberSetting_1.NumberSetting, { name: "Responsiveness Interval", formatter: (v) => `${v}ms`, min: 1, max: 1000000000, step: 1, value: pageResponsiveness, onValueChanged: setCustomPageResponsiveness })) : null] }))] }));
 };
 exports.WebRenderModalAdvanced = WebRenderModalAdvanced;

package/dist/components/RenderModal/WebRenderModalAudio.js

@@ -73,11 +73,11 @@ const WebRenderModalAudio = ({ renderMode, muted, setMuted, audioCodec, setAudio
     return (jsx_runtime_1.jsxs("div", { style: container, className: is_menu_item_1.VERTICAL_SCROLLBAR_CLASSNAME, children: [isAudioOnly ? null : (jsx_runtime_1.jsx(MutedSetting_1.MutedSetting, { enforceAudioTrack: false, muted: muted, setMuted: setMuted })), showAudioSettings ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [isAudioOnly ? null : jsx_runtime_1.jsx(RenderModalHr_1.RenderModalHr, {}), jsx_runtime_1.jsxs("div", { style: layout_2.optionRow, children: [
                             jsx_runtime_1.jsxs("div", { style: layout_2.label, children: ["Audio Quality",
                                     jsx_runtime_1.jsx(layout_1.Spacing, { x: 0.5 })
-                                ] }), jsx_runtime_1.jsx("div", { style: layout_2.rightRow, children: jsx_runtime_1.jsx(ComboBox_1.Combobox, { values: audioBitrateOptions, selectedId: audioBitrate, title: "Audio Quality" }) })
+                                ] }), jsx_runtime_1.jsx("div", { style: layout_2.rightRow, children: jsx_runtime_1.jsx(ComboBox_1.Combobox, { values: audioBitrateOptions, selectedId: audioBitrate, "aria-label": "Audio Quality" }) })
                         ] }), showAudioCodecSetting ? (jsx_runtime_1.jsxs("div", { style: layout_2.optionRow, children: [
                             jsx_runtime_1.jsxs("div", { style: layout_2.label, children: ["Audio Codec",
                                     jsx_runtime_1.jsx(layout_1.Spacing, { x: 0.5 })
-                                ] }), jsx_runtime_1.jsx("div", { style: layout_2.rightRow, children: jsx_runtime_1.jsx(ComboBox_1.Combobox, { values: audioCodecOptions, selectedId: audioCodec, title: "Audio Codec" }) })
+                                ] }), jsx_runtime_1.jsx("div", { style: layout_2.rightRow, children: jsx_runtime_1.jsx(ComboBox_1.Combobox, { values: audioCodecOptions, selectedId: audioCodec, "aria-label": "Audio Codec" }) })
                         ] })) : null, showAudioCodecSetting && effectiveAudioCodec !== audioCodec ? (jsx_runtime_1.jsxs("div", { style: fallbackNoticeStyle, children: [humanReadableWebAudioCodec(audioCodec), " is not available in this browser. Using ", humanReadableWebAudioCodec(effectiveAudioCodec), ' ', "instead."] })) : null] })) : null] }));
 };
 exports.WebRenderModalAudio = WebRenderModalAudio;

package/dist/components/RenderModal/WebRenderModalBasic.js

@@ -115,16 +115,16 @@ const WebRenderModalBasic = ({ renderMode, resolvedComposition, imageFormat, set
                             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.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, "aria-label": "Container" }) })
                         ] }), renderMode === 'video' ? (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.WebRendererOptionExplainerBubble, { apiName: "codec", 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("div", { style: layout_2.rightRow, children: jsx_runtime_1.jsx(ComboBox_1.Combobox, { values: codecOptions, selectedId: effectiveVideoCodec, "aria-label": "Codec" }) })
                         ] })) : null, 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, { ariaLabel: window.remotion_isReadOnlyStudio ? 'Download name' : 'Output name', existingOutputPath: null, 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.WebRendererOptionExplainerBubble, { apiName: "logLevel", 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" }) })
+                        ] }), jsx_runtime_1.jsx("div", { style: layout_2.rightRow, children: jsx_runtime_1.jsx(ComboBox_1.Combobox, { values: logLevelOptions, selectedId: logLevel, "aria-label": "Log Level" }) })
                 ] })
         ] }));
 };

package/dist/components/RenderModal/WebRenderModalPicture.js

@@ -3,7 +3,6 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.WebRenderModalPicture = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
-const colors_1 = require("../../helpers/colors");
 const Checkbox_1 = require("../Checkbox");
 const ComboBox_1 = require("../NewComposition/ComboBox");
 const layout_1 = require("./layout");
@@ -21,9 +20,9 @@ const WebRenderModalPicture = ({ renderMode, videoBitrate, setVideoBitrate, keyf
     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("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, "aria-label": "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: colors_1.TRANSPARENT }) })
+                            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" }) })
                         ] })
                 ] }))] }));
 };

package/dist/components/RenderQueue/CaptionQueueItem.js

@@ -12,6 +12,10 @@ const use_select_asset_1 = require("../use-select-asset");
 const CircularProgress_1 = require("./CircularProgress");
 const context_1 = require("./context");
 const item_style_1 = require("./item-style");
+const QueueJobError_1 = require("./QueueJobError");
+const RenderQueueCancelledMessage_1 = require("./RenderQueueCancelledMessage");
+const RenderQueueItemCancelButton_1 = require("./RenderQueueItemCancelButton");
+const RenderQueueRepeat_1 = require("./RenderQueueRepeat");
 const SuccessIcon_1 = require("./SuccessIcon");
 const container = {
     padding: 12,
@@ -53,13 +57,13 @@ const removeIcon = {
     color: colors_1.CURRENT_COLOR,
 };
 const CaptionJobStatus = ({ job }) => {
-    if (job.status === 'running') {
+    if (job.status === 'running' || job.status === 'saving') {
         return (jsx_runtime_1.jsx("div", { style: statusIcon, role: "progressbar", "aria-label": "Caption job progress", "aria-valuetext": job.progress.message, "aria-valuemin": 0, "aria-valuemax": 100, "aria-valuenow": Math.round(job.progress.value * 100), children: jsx_runtime_1.jsx(CircularProgress_1.CircularProgress, { progress: Math.max(0.07, job.progress.value) }) }));
     }
     if (job.status === 'done') {
         return jsx_runtime_1.jsx(SuccessIcon_1.SuccessIcon, {});
     }
-    if (job.status === 'failed') {
+    if (job.status === 'failed' || job.status === 'cancelled') {
         return (jsx_runtime_1.jsx("svg", { style: statusIcon, viewBox: "0 0 512 512", children: jsx_runtime_1.jsx("path", { fill: colors_1.FAIL_COLOR, d: "M0 160V352L160 512H352L512 352V160L352 0H160L0 160zm353.9 32l-17 17-47 47 47 47 17 17L320 353.9l-17-17-47-47-47 47-17 17L158.1 320l17-17 47-47-47-47-17-17L192 158.1l17 17 47 47 47-47 17-17L353.9 192z" }) }));
     }
     return (jsx_runtime_1.jsx("svg", { style: statusIcon, viewBox: "0 0 512 512", children: jsx_runtime_1.jsx("path", { fill: colors_1.LIGHT_TEXT, d: "M256 512C114.6 512 0 397.4 0 256S114.6 0 256 0S512 114.6 512 256s-114.6 256-256 256zM232 120V256c0 8 4 15.5 10.7 20l96 64c11 7.4 25.9 4.4 33.3-6.7s4.4-25.9-6.7-33.3L280 243.2V120c0-13.3-10.7-24-24-24s-24 10.7-24 24z" }) }));
@@ -117,9 +121,12 @@ const CaptionQueueItem = ({ job, selected }) => {
         if (job.status === 'idle') {
             return 'Queued for transcription';
         }
-        if (job.status === 'running') {
+        if (job.status === 'running' || job.status === 'saving') {
             return job.progress.message;
         }
+        if (job.status === 'cancelled') {
+            return 'Cancelled';
+        }
         if (job.status === 'failed') {
             return job.error.message;
         }
@@ -127,7 +134,9 @@ const CaptionQueueItem = ({ job, selected }) => {
     }, [job]);
     return (jsx_runtime_1.jsxs(layout_1.Row, { "data-render-queue-item": job.id, style: containerStyle, align: "center", onClick: onClick, onPointerEnter: onPointerEnter, onPointerLeave: onPointerLeave, className: selected ? item_style_1.RENDER_QUEUE_ITEM_SELECTED_CLASSNAME : undefined, children: [
             jsx_runtime_1.jsx(CaptionJobStatus, { 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.displayName }), jsx_runtime_1.jsx("div", { style: subtitleContainer, children: jsx_runtime_1.jsx("span", { style: subtitle, title: message, children: message }) })
-                ] }), jsx_runtime_1.jsx(layout_1.Spacing, { x: 1 }), job.status === 'running' ? null : (jsx_runtime_1.jsx(ActionTooltip_1.ActionTooltip, { label: "Clear", shortcut: null, delay: 800, dismissOnClick: true, children: jsx_runtime_1.jsx(InlineAction_1.InlineAction, { renderAction: renderRemoveAction, onClick: onRemove, "aria-label": "Clear", variant: null }) }))] }));
+                    jsx_runtime_1.jsx("div", { style: title, children: job.displayName }), jsx_runtime_1.jsx("div", { style: subtitleContainer, children: job.status === 'cancelled' ? (jsx_runtime_1.jsx(RenderQueueCancelledMessage_1.RenderQueueCancelledMessage, {})) : job.status === 'failed' ? (jsx_runtime_1.jsx(QueueJobError_1.QueueJobError, { error: job.error, modalTitle: "Transcription failed" })) : (jsx_runtime_1.jsx("span", { role: "group", style: subtitle, "aria-label": message, children: message })) })
+                ] }), jsx_runtime_1.jsx(layout_1.Spacing, { x: 1 }), job.status === 'done' ||
+                job.status === 'failed' ||
+                job.status === 'cancelled' ? (jsx_runtime_1.jsx(RenderQueueRepeat_1.RenderQueueRepeatItem, { job: job })) : null, job.status === 'running' ? (jsx_runtime_1.jsx(RenderQueueItemCancelButton_1.RenderQueueCancelButton, { job: job })) : job.status === 'saving' ? null : (jsx_runtime_1.jsx(ActionTooltip_1.ActionTooltip, { label: "Clear", shortcut: null, delay: 800, dismissOnClick: true, children: jsx_runtime_1.jsx(InlineAction_1.InlineAction, { renderAction: renderRemoveAction, onClick: onRemove, "aria-label": "Clear", variant: null }) }))] }));
 };
 exports.CaptionQueueItem = CaptionQueueItem;

package/dist/components/RenderQueue/CaptionQueueProcessor.js

@@ -11,16 +11,19 @@ const resample_media_to_16_khz_1 = require("../Transcription/resample-media-to-1
 const context_1 = require("./context");
 const load_model_for_job_1 = require("./load-model-for-job");
 const CaptionQueueProcessor = () => {
-    const { updateCaptionJobProgress, markCaptionJobDone, markCaptionJobFailed, setProcessCaptionJobCallback, } = (0, react_1.useContext)(context_1.RenderQueueContext);
+    const { updateCaptionJobProgress, markCaptionJobDone, markCaptionJobFailed, markCaptionJobCancelled, markCaptionJobSaving, getAbortController, setProcessCaptionJobCallback, } = (0, react_1.useContext)(context_1.RenderQueueContext);
     const processJob = (0, react_1.useCallback)(async (job) => {
+        const { signal } = getAbortController(job.id);
         let captionCount = null;
         let processingError = null;
         try {
+            signal.throwIfAborted();
             updateCaptionJobProgress(job.id, {
                 message: 'Checking WebGPU support...',
                 value: 0,
             });
             const support = await (0, whisper_webgpu_1.canUseWhisperWebGpu)();
+            signal.throwIfAborted();
             if (!support.supported) {
                 throw new Error(support.detailedReason);
             }
@@ -29,15 +32,21 @@ const CaptionQueueProcessor = () => {
                 value: 0.02,
             });
             await (0, whisper_webgpu_1.clearStaleModels)();
+            signal.throwIfAborted();
             await (0, load_model_for_job_1.loadModelForJob)({
+                signal,
                 model: job.model,
                 progressStart: 0.03,
                 progressSpan: 0.27,
                 isModelCached: (model) => (0, whisper_webgpu_1.isWhisperModelCached)({ model }),
-                loadModel: (model, onProgress) => (0, whisper_webgpu_1.loadWhisperModel)({
-                    model,
-                    onProgress: (progress) => onProgress(progress.progress),
-                }),
+                loadModel: async (model, onProgress) => {
+                    await (0, whisper_webgpu_1.downloadWhisperModel)({
+                        signal,
+                        model,
+                        onProgress: (progress) => onProgress(progress.progress),
+                    });
+                    await (0, whisper_webgpu_1.loadWhisperModel)({ model, signal });
+                },
                 updateProgress: (progress) => updateCaptionJobProgress(job.id, progress),
             });
             updateCaptionJobProgress(job.id, {
@@ -45,6 +54,7 @@ const CaptionQueueProcessor = () => {
                 value: 0.3,
             });
             const channelWaveform = await (0, resample_media_to_16_khz_1.resampleMediaTo16Khz)({
+                signal,
                 src: job.src,
                 audioStreamIndex: job.audioStreamIndex,
                 requestInit: job.requestInit,
@@ -60,6 +70,7 @@ const CaptionQueueProcessor = () => {
                 value: 0.5,
             });
             const transcription = await (0, whisper_webgpu_1.transcribe)({
+                signal,
                 channelWaveform,
                 model: job.model,
                 task: job.task,
@@ -76,6 +87,8 @@ const CaptionQueueProcessor = () => {
             const { captions } = (0, whisper_webgpu_1.toCaptions)({
                 whisperWebGpuOutput: transcription,
             });
+            signal.throwIfAborted();
+            markCaptionJobSaving(job.id);
             if (job.target === null) {
                 updateCaptionJobProgress(job.id, {
                     message: `Saving ${job.outName}...`,
@@ -121,13 +134,23 @@ const CaptionQueueProcessor = () => {
             // The pipeline is removed from the in-memory registry before disposal.
             // A cleanup failure should not hide a successfully written caption file.
         }
-        if (processingError) {
+        if (signal.aborted) {
+            markCaptionJobCancelled(job.id);
+        }
+        else if (processingError) {
             markCaptionJobFailed(job.id, processingError);
         }
         else {
             markCaptionJobDone(job.id, captionCount !== null && captionCount !== void 0 ? captionCount : 0);
         }
-    }, [markCaptionJobDone, markCaptionJobFailed, updateCaptionJobProgress]);
+    }, [
+        getAbortController,
+        markCaptionJobCancelled,
+        markCaptionJobDone,
+        markCaptionJobFailed,
+        markCaptionJobSaving,
+        updateCaptionJobProgress,
+    ]);
     (0, react_1.useEffect)(() => {
         setProcessCaptionJobCallback(processJob);
         return () => setProcessCaptionJobCallback(null);

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

@@ -0,0 +1,8 @@
+import React from 'react';
+export declare const QueueJobError: React.FC<{
+    readonly error: {
+        message: string;
+        stack: string | undefined;
+    };
+    readonly modalTitle: string;
+}>;

package/dist/components/RenderQueue/QueueJobError.js

@@ -0,0 +1,24 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.QueueJobError = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const modals_1 = require("../../state/modals");
+const item_style_1 = require("./item-style");
+const errorStyle = {
+    ...item_style_1.renderQueueItemSubtitleStyle,
+};
+const QueueJobError = ({ error, modalTitle }) => {
+    const { setSelectedModal } = (0, react_1.useContext)(modals_1.SetSelectedModalContext);
+    const onClick = (0, react_1.useCallback)((event) => {
+        var _a;
+        event.stopPropagation();
+        setSelectedModal({
+            type: 'queue-job-error',
+            title: modalTitle,
+            error: { message: error.message, stack: (_a = error.stack) !== null && _a !== void 0 ? _a : null },
+        });
+    }, [error, modalTitle, setSelectedModal]);
+    return (jsx_runtime_1.jsx("button", { onClick: onClick, type: "button", style: errorStyle, "aria-label": error.message, children: error.message }));
+};
+exports.QueueJobError = QueueJobError;

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

@@ -0,0 +1,8 @@
+import React from 'react';
+export declare const QueueJobErrorModal: React.FC<{
+    readonly title: string;
+    readonly error: {
+        message: string;
+        stack: string | null;
+    };
+}>;

package/dist/components/RenderQueue/QueueJobErrorModal.js

@@ -0,0 +1,63 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.QueueJobErrorModal = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const CopyStackTrace_1 = require("../../error-overlay/remotion-overlay/CopyStackTrace");
+const colors_1 = require("../../helpers/colors");
+const modals_1 = require("../../state/modals");
+const Button_1 = require("../Button");
+const layout_1 = require("../layout");
+const is_menu_item_1 = require("../Menu/is-menu-item");
+const ModalContainer_1 = require("../ModalContainer");
+const ModalHeader_1 = require("../ModalHeader");
+const container = {
+    padding: 20,
+    maxWidth: 900,
+    paddingTop: 0,
+};
+const codeBlock = {
+    backgroundColor: colors_1.RENDER_STATUS_BACKGROUND,
+    whiteSpace: 'pre',
+    padding: 12,
+    borderRadius: 4,
+    fontFamily: 'monospace',
+    overflow: 'auto',
+    maxHeight: 300,
+};
+const description = {
+    color: colors_1.LIGHT_TEXT,
+    fontFamily: 'sans-serif',
+    fontSize: 14,
+    lineHeight: 1.5,
+    margin: 0,
+    marginBottom: 12,
+    marginTop: 16,
+};
+const spacer = {
+    height: layout_1.SPACING_UNIT,
+    width: layout_1.SPACING_UNIT,
+};
+const buttonRow = {
+    display: 'flex',
+    flexDirection: 'row',
+    justifyContent: 'flex-end',
+};
+const QueueJobErrorModal = ({ title, error }) => {
+    var _a;
+    const { setSelectedModal } = (0, react_1.useContext)(modals_1.SetSelectedModalContext);
+    const onClose = (0, react_1.useCallback)(() => {
+        setSelectedModal(null);
+    }, [setSelectedModal]);
+    const errorDetails = ((_a = error.stack) === null || _a === void 0 ? void 0 : _a.split('\n')[0].includes(error.message))
+        ? error.stack
+        : [error.message, error.stack].filter(Boolean).join('\n');
+    return (jsx_runtime_1.jsxs(ModalContainer_1.ModalContainer, { ariaLabel: title, onOutsideClick: onClose, onEscape: onClose, children: [
+            jsx_runtime_1.jsx(ModalHeader_1.ModalHeader, { title: title }), jsx_runtime_1.jsxs("div", { style: container, children: [
+                    jsx_runtime_1.jsx("p", { style: description, children: "The job failed because of the following error:" }), jsx_runtime_1.jsx("div", { className: is_menu_item_1.HORIZONTAL_SCROLLBAR_CLASSNAME, style: codeBlock, children: errorDetails }), jsx_runtime_1.jsx("div", { style: spacer }), jsx_runtime_1.jsxs("div", { style: buttonRow, children: [
+                            jsx_runtime_1.jsx(CopyStackTrace_1.CopyStackTrace, { errorText: errorDetails }), jsx_runtime_1.jsx(layout_1.Flex, {}), jsx_runtime_1.jsx(Button_1.Button, { onClick: onClose, children: "Close" })
+                        ] })
+                ] })
+        ] }));
+};
+exports.QueueJobErrorModal = QueueJobErrorModal;

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 (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, "aria-label": job.error.message, children: job.error.message }));
 };
 exports.RenderQueueError = RenderQueueError;