@remotion/cli 4.0.42 → 4.0.43

package/dist/config/index.d.ts

@@ -295,7 +295,7 @@ export declare const ConfigInternals: {
     getOutputCodecOrUndefined: () => CodecOrUndefined;
     getBrowser: () => null;
     getPixelFormat: () => "yuv420p" | "yuva420p" | "yuv422p" | "yuv444p" | "yuv420p10le" | "yuv422p10le" | "yuv444p10le" | "yuva444p10le";
-    getProResProfile: () => "4444-xq" | "4444" | "hq" | "standard" | "light" | "proxy" | undefined;
+    getProResProfile: () => "light" | "4444-xq" | "4444" | "hq" | "standard" | "proxy" | undefined;
     getPresetProfile: () => "medium" | "ultrafast" | "superfast" | "veryfast" | "faster" | "fast" | "slow" | "slower" | "veryslow" | "placebo" | undefined;
     getShouldOverwrite: ({ defaultValue, }: {
         defaultValue: boolean;

package/dist/config/log.d.ts

@@ -1 +1 @@
-export declare const getLogLevel: () => "verbose" | "info" | "warn" | "error", setLogLevel: (newLogLevel: "verbose" | "info" | "warn" | "error") => void;
+export declare const getLogLevel: () => "error" | "verbose" | "info" | "warn", setLogLevel: (newLogLevel: "error" | "verbose" | "info" | "warn") => void;

package/dist/config/presets-profile.d.ts

@@ -0,0 +1,3 @@
+import type { x264Preset } from '@remotion/renderer';
+export declare const getPresetProfile: () => x264Preset | undefined;
+export declare const setPresetProfile: (profile: x264Preset | undefined) => void;

package/dist/config/presets-profile.js

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.setPresetProfile = exports.getPresetProfile = void 0;
+let preset;
+const getPresetProfile = () => {
+    return preset;
+};
+exports.getPresetProfile = getPresetProfile;
+const setPresetProfile = (profile) => {
+    preset = profile;
+};
+exports.setPresetProfile = setPresetProfile;

package/dist/editor/components/CopyButton.js

@@ -38,6 +38,6 @@ const CopyButton = ({ textToCopy, label, labelWhenCopied }) => {
         const to = setTimeout(() => setCopied(false), 2000);
         return () => clearTimeout(to);
     }, [copied]);
-    return ((0, jsx_runtime_1.jsxs)(Button_1.Button, { onClick: onClick, style: {}, buttonContainerStyle: buttonContainerStyle, children: [copyIcon, (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 1.5 }), ' ', (0, jsx_runtime_1.jsx)("span", { style: labelStyle, children: copied ? labelWhenCopied : label })] }));
+    return ((0, jsx_runtime_1.jsxs)(Button_1.Button, { onClick: onClick, buttonContainerStyle: buttonContainerStyle, children: [copyIcon, (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 1.5 }), ' ', (0, jsx_runtime_1.jsx)("span", { style: labelStyle, children: copied ? labelWhenCopied : label })] }));
 };
 exports.CopyButton = CopyButton;

package/dist/editor/components/JSONViewer.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+export declare const JSONViewer: React.FC<{
+    src: string;
+}>;

package/dist/editor/components/JSONViewer.js

@@ -0,0 +1,26 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.JSONViewer = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const RemTextarea_1 = require("./NewComposition/RemTextarea");
+const jsonStyle = {
+    marginTop: 14,
+    marginBottom: 14,
+    fontFamily: 'monospace',
+    flex: 1,
+};
+const JSONViewer = ({ src }) => {
+    const [json, setJson] = (0, react_1.useState)(null);
+    (0, react_1.useEffect)(() => {
+        fetch(src)
+            .then((res) => res.json())
+            .then((jsonRes) => {
+            setJson(JSON.stringify(jsonRes, null, 2));
+        });
+    }, [src]);
+    return ((0, jsx_runtime_1.jsx)(RemTextarea_1.RemTextarea, { value: json !== null && json !== void 0 ? json : undefined, status: "ok", onChange: () => {
+            return null;
+        }, style: jsonStyle }));
+};
+exports.JSONViewer = JSONViewer;

package/dist/editor/components/KnownBugs.js

@@ -8,9 +8,13 @@ const container = {
     flexDirection: 'row',
     alignItems: 'center',
 };
+const text = {
+    fontSize: 14,
+    flex: 1,
+};
 const KnownBugs = ({ bugs }) => {
     const bugElements = bugs.map((bug) => {
-        return ((0, jsx_runtime_1.jsxs)("div", { style: container, children: [(0, jsx_runtime_1.jsxs)("div", { children: ["\uD83E\uDEB2 ", bug.title] }), (0, jsx_runtime_1.jsx)(OpenIssueButton_1.OpenIssueButton, { link: bug.link })] }, bug.description + bug.link));
+        return ((0, jsx_runtime_1.jsxs)("div", { style: container, children: [(0, jsx_runtime_1.jsxs)("div", { style: text, children: ["\uD83E\uDEB2 ", bug.title] }), (0, jsx_runtime_1.jsx)(OpenIssueButton_1.OpenIssueButton, { link: bug.link })] }, bug.description + bug.link));
     });
     return (0, jsx_runtime_1.jsx)("div", { children: bugElements });
 };

package/dist/editor/components/Modals.js

@@ -18,6 +18,6 @@ const Modals = () => {
     const canRender = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx).type === 'connected';
     return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [modalContextType && modalContextType.type === 'new-comp' && ((0, jsx_runtime_1.jsx)(NewComposition_1.default, { initialCompType: modalContextType.compType })), modalContextType && canRender && modalContextType.type === 'render' && ((0, jsx_runtime_1.jsx)(RenderModal_1.RenderModalWithLoader, { initialFrame: modalContextType.initialFrame, compositionId: modalContextType.compositionId, initialVideoImageFormat: modalContextType.initialVideoImageFormat, initialJpegQuality: modalContextType.initialJpegQuality, initialOutName: modalContextType.initialOutName, initialScale: modalContextType.initialScale, initialVerbose: modalContextType.initialVerbose, initialRenderType: modalContextType.initialRenderType, initialOffthreadVideoCacheSizeInBytes: modalContextType.initialOffthreadVideoCacheSizeInBytes, initialVideoCodecForAudioTab: modalContextType.initialVideoCodecForAudioTab, initialVideoCodecForVideoTab: modalContextType.initialVideoCodecForVideoTab, initialConcurrency: modalContextType.initialConcurrency, maxConcurrency: modalContextType.maxConcurrency, minConcurrency: modalContextType.minConcurrency, initialStillImageFormat: modalContextType.initialStillImageFormat, initialMuted: modalContextType.initialMuted, initialEnforceAudioTrack: modalContextType.initialEnforceAudioTrack, initialProResProfile: modalContextType.initialProResProfile, initialx264Preset: modalContextType.initialx264Preset, initialPixelFormat: modalContextType.initialPixelFormat, initialAudioBitrate: modalContextType.initialAudioBitrate, initialVideoBitrate: modalContextType.initialVideoBitrate, initialEveryNthFrame: modalContextType.initialEveryNthFrame, initialNumberOfGifLoops: modalContextType.initialNumberOfGifLoops, initialDelayRenderTimeout: modalContextType.initialDelayRenderTimeout, initialAudioCodec: modalContextType.initialAudioCodec, initialEnvVariables: modalContextType.initialEnvVariables, initialDisableWebSecurity: modalContextType.initialDisableWebSecurity, initialGl: modalContextType.initialOpenGlRenderer, initialHeadless: modalContextType.initialHeadless, initialIgnoreCertificateErrors: modalContextType.initialIgnoreCertificateErrors, defaultProps: modalContextType.defaultProps, inFrameMark: modalContextType.inFrameMark, outFrameMark: modalContextType.outFrameMark, initialColorSpace: modalContextType.initialColorSpace, initialMultiProcessOnLinux: modalContextType.initialMultiProcessOnLinux })), modalContextType &&
                 canRender &&
-                modalContextType.type === 'render-progress' && ((0, jsx_runtime_1.jsx)(RenderStatusModal_1.RenderStatusModal, { jobId: modalContextType.jobId })), modalContextType && modalContextType.type === 'update' && ((0, jsx_runtime_1.jsx)(UpdateModal_1.UpdateModal, { info: modalContextType.info })), modalContextType && modalContextType.type === 'quick-switcher' && ((0, jsx_runtime_1.jsx)(QuickSwitcher_1.default, { invocationTimestamp: modalContextType.invocationTimestamp, initialMode: modalContextType.mode }))] }));
+                modalContextType.type === 'render-progress' && ((0, jsx_runtime_1.jsx)(RenderStatusModal_1.RenderStatusModal, { jobId: modalContextType.jobId })), modalContextType && modalContextType.type === 'update' && ((0, jsx_runtime_1.jsx)(UpdateModal_1.UpdateModal, { info: modalContextType.info, knownBugs: modalContextType.knownBugs })), modalContextType && modalContextType.type === 'quick-switcher' && ((0, jsx_runtime_1.jsx)(QuickSwitcher_1.default, { invocationTimestamp: modalContextType.invocationTimestamp, initialMode: modalContextType.mode }))] }));
 };
 exports.Modals = Modals;

package/dist/editor/components/NewComposition/RemInput.d.ts

@@ -12,6 +12,6 @@ export declare const getInputBorderColor: ({ status, isFocused, isHovered, }: {
     status: 'error' | 'warning' | 'ok';
     isFocused: boolean;
     isHovered: boolean;
-}) => "hsla(0, 0%, 100%, 0.15)" | "rgba(0, 0, 0, 0.6)" | "rgba(255, 255, 255, 0.05)" | "#ff3232" | "#f1c40f";
-export declare const RemotionInput: React.ForwardRefExoticComponent<Pick<Props, "key" | keyof React.InputHTMLAttributes<HTMLInputElement> | "status" | "rightAlign"> & React.RefAttributes<HTMLInputElement>>;
+}) => "hsla(0, 0%, 100%, 0.15)" | "#ff3232" | "#f1c40f" | "rgba(255, 255, 255, 0.05)" | "rgba(0, 0, 0, 0.6)";
+export declare const RemotionInput: React.ForwardRefExoticComponent<Pick<Props, "status" | "key" | "rightAlign" | keyof React.InputHTMLAttributes<HTMLInputElement>> & React.RefAttributes<HTMLInputElement>>;
 export {};

package/dist/editor/components/NewComposition/RemInputTypeColor.d.ts

@@ -4,5 +4,5 @@ type Props = React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>
     status: RemInputStatus;
     name: string;
 };
-export declare const RemInputTypeColor: React.ForwardRefExoticComponent<Pick<Props, "key" | keyof React.InputHTMLAttributes<HTMLInputElement> | "status"> & React.RefAttributes<HTMLInputElement>>;
+export declare const RemInputTypeColor: React.ForwardRefExoticComponent<Pick<Props, "status" | "key" | keyof React.InputHTMLAttributes<HTMLInputElement>> & React.RefAttributes<HTMLInputElement>>;
 export {};

package/dist/editor/components/NewComposition/RemTextarea.d.ts

@@ -3,5 +3,5 @@ type Props = React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLTextAreaEleme
     status: 'error' | 'warning' | 'ok';
 };
 export declare const inputBaseStyle: React.CSSProperties;
-export declare const RemTextarea: React.ForwardRefExoticComponent<Pick<Props, "key" | "status" | keyof React.InputHTMLAttributes<HTMLTextAreaElement>> & React.RefAttributes<HTMLTextAreaElement>>;
+export declare const RemTextarea: React.ForwardRefExoticComponent<Pick<Props, "status" | "key" | keyof React.InputHTMLAttributes<HTMLTextAreaElement>> & React.RefAttributes<HTMLTextAreaElement>>;
 export {};

package/dist/editor/components/RenderQueue/index.js

@@ -1,8 +1,31 @@
 "use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.RenderQueue = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
+const react_1 = __importStar(require("react"));
 const client_id_1 = require("../../helpers/client-id");
 const colors_1 = require("../../helpers/colors");
 const layout_1 = require("../layout");
@@ -36,14 +59,29 @@ const renderQueue = {
 const RenderQueue = () => {
     const connectionStatus = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx).type;
     const { jobs } = (0, react_1.useContext)(context_1.RenderQueueContext);
+    const previousJobCount = react_1.default.useRef(jobs.length);
     const jobCount = jobs.length;
+    const divRef = react_1.default.useRef(null);
+    (0, react_1.useEffect)(() => {
+        if (!divRef.current) {
+            return;
+        }
+        // Scroll down to bottom of render queue if new jobs have been added
+        if (jobCount > previousJobCount.current) {
+            divRef.current.scrollTo({
+                top: divRef.current.scrollHeight,
+                behavior: 'smooth',
+            });
+        }
+        previousJobCount.current = jobCount;
+    }, [jobCount]);
     if (connectionStatus === 'disconnected') {
         return ((0, jsx_runtime_1.jsxs)("div", { style: explainer, children: [(0, jsx_runtime_1.jsx)(layout_1.Spacing, { y: 5 }), (0, jsx_runtime_1.jsx)("div", { style: errorExplanation, children: "The studio server has disconnected." }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { y: 2, block: true })] }));
     }
     if (jobCount === 0) {
         return ((0, jsx_runtime_1.jsxs)("div", { style: explainer, children: [(0, jsx_runtime_1.jsx)(layout_1.Spacing, { y: 5 }), (0, jsx_runtime_1.jsx)("div", { style: errorExplanation, children: "No renders in the queue." }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { y: 2, block: true })] }));
     }
-    return ((0, jsx_runtime_1.jsx)("div", { style: renderQueue, className: ['css-reset', is_menu_item_1.VERTICAL_SCROLLBAR_CLASSNAME].join(' '), children: jobs.map((j, index) => {
+    return ((0, jsx_runtime_1.jsx)("div", { ref: divRef, style: renderQueue, className: ['css-reset', is_menu_item_1.VERTICAL_SCROLLBAR_CLASSNAME].join(' '), children: jobs.map((j, index) => {
             return ((0, jsx_runtime_1.jsx)("div", { style: index === jobs.length - 1 ? undefined : separatorStyle, children: (0, jsx_runtime_1.jsx)(RenderQueueItem_1.RenderQueueItem, { job: j }) }, j.id));
         }) }));
 };

package/dist/editor/components/UpdateCheck.d.ts

@@ -7,4 +7,10 @@ export type UpdateInfo = {
     timedOut: boolean;
     packageManager: PackageManager | 'unknown';
 };
+export type Bug = {
+    title: string;
+    description: string;
+    link: string;
+    versions: string[];
+};
 export declare const UpdateCheck: () => JSX.Element | null;

package/dist/editor/components/UpdateCheck.js

@@ -3,6 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.UpdateCheck = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
+const remotion_1 = require("remotion");
 const colors_1 = require("../helpers/colors");
 const modals_1 = require("../state/modals");
 const z_index_1 = require("../state/z-index");
@@ -20,6 +21,10 @@ const UpdateCheck = () => {
     const [info, setInfo] = (0, react_1.useState)(null);
     const { setSelectedModal } = (0, react_1.useContext)(modals_1.ModalsContext);
     const { tabIndex } = (0, z_index_1.useZIndex)();
+    const [knownBugs, setKnownBugs] = (0, react_1.useState)(null);
+    const hasKnownBugs = (0, react_1.useMemo)(() => {
+        return knownBugs && knownBugs.length > 0;
+    }, [knownBugs]);
     const checkForUpdates = (0, react_1.useCallback)(() => {
         const controller = new AbortController();
         (0, actions_1.updateAvailable)(controller.signal)
@@ -34,24 +39,50 @@ const UpdateCheck = () => {
         });
         return controller;
     }, []);
+    const checkForBugs = (0, react_1.useCallback)(() => {
+        const controller = new AbortController();
+        fetch(`https://bugs.remotion.dev/api/${remotion_1.VERSION}`, {
+            signal: controller.signal,
+        })
+            .then(async (res) => {
+            const body = await res.json();
+            setKnownBugs(body.bugs);
+        })
+            .catch((err) => {
+            if (err.message.includes('aborted')) {
+                return;
+            }
+            console.log('Could not check for bugs in this version', err);
+        });
+        return controller;
+    }, []);
     (0, react_1.useEffect)(() => {
-        const abortController = checkForUpdates();
+        const abortUpdate = checkForUpdates();
+        const abortBugs = checkForBugs();
         return () => {
-            abortController.abort();
+            abortUpdate.abort();
+            abortBugs.abort();
         };
-    }, [checkForUpdates]);
+    }, [checkForBugs, checkForUpdates]);
     const openModal = (0, react_1.useCallback)(() => {
         setSelectedModal({
             type: 'update',
             info: info,
+            knownBugs: knownBugs,
         });
-    }, [info, setSelectedModal]);
+    }, [info, knownBugs, setSelectedModal]);
+    const dynButtonStyle = (0, react_1.useMemo)(() => {
+        return {
+            ...buttonStyle,
+            color: hasKnownBugs ? colors_1.WARNING_COLOR : colors_1.BLUE,
+        };
+    }, [hasKnownBugs]);
     if (!info) {
         return null;
     }
     if (!info.updateAvailable) {
         return null;
     }
-    return ((0, jsx_runtime_1.jsx)("button", { tabIndex: tabIndex, style: buttonStyle, onClick: openModal, type: "button", children: "Update available!" }));
+    return ((0, jsx_runtime_1.jsx)("button", { tabIndex: tabIndex, style: dynButtonStyle, onClick: openModal, type: "button", children: hasKnownBugs ? 'Bugfixes available' : 'Update available' }));
 };
 exports.UpdateCheck = UpdateCheck;

package/dist/editor/components/UpdateModal/UpdateModal.d.ts

@@ -1,5 +1,6 @@
 import React from 'react';
-import type { UpdateInfo } from '../UpdateCheck';
+import type { Bug, UpdateInfo } from '../UpdateCheck';
 export declare const UpdateModal: React.FC<{
     info: UpdateInfo;
+    knownBugs: Bug[];
 }>;

package/dist/editor/components/UpdateModal/UpdateModal.js

@@ -7,6 +7,7 @@ const colors_1 = require("../../helpers/colors");
 const copy_text_1 = require("../../helpers/copy-text");
 const modals_1 = require("../../state/modals");
 const CopyButton_1 = require("../CopyButton");
+const KnownBugs_1 = require("../KnownBugs");
 const layout_1 = require("../layout");
 const ModalContainer_1 = require("../ModalContainer");
 const ModalHeader_1 = require("../ModalHeader");
@@ -15,33 +16,48 @@ const container = {
     padding: 20,
     paddingTop: 0,
 };
+const text = {
+    fontSize: 14,
+};
+const title = {
+    paddingTop: 12,
+    paddingBottom: 8,
+    ...text,
+};
 const code = {
     background: colors_1.SELECTED_BACKGROUND,
     padding: '12px 10px',
-    fontSize: 17,
+    fontSize: 14,
     marginTop: 10,
     marginBottom: 10,
 };
 const link = {
     fontWeight: 'bold',
-    color: 'inherit',
+    color: colors_1.BLUE,
     textDecoration: 'none',
+    ...text,
 };
 const commands = {
-    npm: 'npm run upgrade',
-    yarn: 'yarn upgrade',
-    pnpm: 'pnpm run upgrade',
-    bun: 'bun run upgrade',
-    unknown: 'npm run upgrade',
+    npm: 'npx remotion upgrade',
+    yarn: 'yarn remotion upgrade',
+    pnpm: 'pnpm exec remotion upgrade',
+    bun: 'bun remotion upgrade',
+    unknown: 'npx remotion upgrade',
 };
-const UpdateModal = ({ info }) => {
+const UpdateModal = ({ info, knownBugs }) => {
     const { setSelectedModal } = (0, react_1.useContext)(modals_1.ModalsContext);
     const onQuit = (0, react_1.useCallback)(() => {
         setSelectedModal(null);
     }, [setSelectedModal]);
+    const hasKnownBugs = (0, react_1.useMemo)(() => {
+        return knownBugs && (knownBugs === null || knownBugs === void 0 ? void 0 : knownBugs.length) > 0;
+    }, [knownBugs]);
     const command = commands[info.packageManager];
-    return ((0, jsx_runtime_1.jsxs)(ModalContainer_1.ModalContainer, { onOutsideClick: onQuit, onEscape: onQuit, children: [(0, jsx_runtime_1.jsx)(ModalHeader_1.NewCompHeader, { title: "Update available" }), (0, jsx_runtime_1.jsxs)("div", { style: container, children: [(0, jsx_runtime_1.jsx)("p", { children: "A new update for Remotion is available! Run the following command:" }), (0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", children: [(0, jsx_runtime_1.jsx)(layout_1.Flex, { children: (0, jsx_runtime_1.jsx)("pre", { onClick: () => (0, copy_text_1.copyText)(command).catch((err) => {
-                                        (0, NotificationCenter_1.sendErrorNotification)(`Could not copy: ${err.message}`);
-                                    }), style: code, children: command }) }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 1 }), (0, jsx_runtime_1.jsx)(CopyButton_1.CopyButton, { textToCopy: command, label: "Copy command", labelWhenCopied: "Copied!" })] }), (0, jsx_runtime_1.jsxs)("p", { children: ["This will upgrade Remotion from ", info.currentVersion, " to", ' ', info.latestVersion, "."] }), (0, jsx_runtime_1.jsxs)("p", { children: ["Read the", ' ', (0, jsx_runtime_1.jsx)("a", { style: link, target: "_blank", href: "https://github.com/remotion-dev/remotion/releases", children: "Release notes" }), ' ', "to know what", "'s", " new in Remotion."] })] })] }));
+    const onClick = (0, react_1.useCallback)(() => {
+        (0, copy_text_1.copyText)(command).catch((err) => {
+            (0, NotificationCenter_1.sendErrorNotification)(`Could not copy: ${err.message}`);
+        });
+    }, [command]);
+    return ((0, jsx_runtime_1.jsxs)(ModalContainer_1.ModalContainer, { onOutsideClick: onQuit, onEscape: onQuit, children: [(0, jsx_runtime_1.jsx)(ModalHeader_1.NewCompHeader, { title: "Update available" }), (0, jsx_runtime_1.jsxs)("div", { style: container, children: [hasKnownBugs ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("div", { style: title, children: ["The currently installed version ", info.currentVersion, " has the following known bugs:"] }), (0, jsx_runtime_1.jsx)(KnownBugs_1.KnownBugs, { bugs: knownBugs }), (0, jsx_runtime_1.jsx)("div", { style: { height: '20px' } }), (0, jsx_runtime_1.jsx)("div", { style: text, children: "To upgrade, run the following command:" })] })) : ((0, jsx_runtime_1.jsx)("div", { style: text, children: "A new update for Remotion is available! Run the following command:" })), (0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", children: [(0, jsx_runtime_1.jsx)(layout_1.Flex, { children: (0, jsx_runtime_1.jsx)("pre", { onClick: onClick, style: code, children: command }) }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 1 }), (0, jsx_runtime_1.jsx)(CopyButton_1.CopyButton, { textToCopy: command, label: "Copy", labelWhenCopied: "Copied!" })] }), (0, jsx_runtime_1.jsxs)("div", { style: text, children: ["This will upgrade Remotion from ", info.currentVersion, " to", ' ', info.latestVersion, "."] }), (0, jsx_runtime_1.jsxs)("div", { style: text, children: ["Read the", ' ', (0, jsx_runtime_1.jsx)("a", { style: link, target: "_blank", href: "https://github.com/remotion-dev/remotion/releases", children: "Release notes" }), ' ', "to know what", "'s", " new in Remotion."] })] })] }));
 };
 exports.UpdateModal = UpdateModal;

package/dist/editor/helpers/checkerboard-background.d.ts

@@ -1,4 +1,4 @@
 export declare const getCheckerboardBackgroundSize: (size: number) => string;
 export declare const getCheckerboardBackgroundPos: (size: number) => string;
-export declare const checkerboardBackgroundColor: (checkerboard: boolean) => "black" | "white";
+export declare const checkerboardBackgroundColor: (checkerboard: boolean) => "white" | "black";
 export declare const checkerboardBackgroundImage: (checkerboard: boolean) => "\n     linear-gradient(\n        45deg,\n        rgba(0, 0, 0, 0.1) 25%,\n        transparent 25%\n      ),\n      linear-gradient(135deg, rgba(0, 0, 0, 0.1) 25%, transparent 25%),\n      linear-gradient(45deg, transparent 75%, rgba(0, 0, 0, 0.1) 75%),\n      linear-gradient(135deg, transparent 75%, rgba(0, 0, 0, 0.1) 75%)\n    " | undefined;

package/dist/editor/helpers/colors.d.ts

@@ -16,4 +16,4 @@ export declare const BLUE_DISABLED = "#284f73";
 export declare const getBackgroundFromHoverState: ({ selected, hovered, }: {
     selected: boolean;
     hovered: boolean;
-}) => "transparent" | "hsla(0, 0%, 100%, 0.15)" | "hsla(0, 0%, 100%, 0.25)" | "rgba(255, 255, 255, 0.06)";
+}) => "transparent" | "rgba(255, 255, 255, 0.06)" | "hsla(0, 0%, 100%, 0.15)" | "hsla(0, 0%, 100%, 0.25)";

package/dist/editor/state/modals.d.ts

@@ -2,7 +2,7 @@ import type { AudioCodec, Codec, ColorSpace, OpenGlRenderer, PixelFormat, ProRes
 import type React from 'react';
 import type { QuickSwitcherMode } from '../components/QuickSwitcher/NoResults';
 import type { RenderType } from '../components/RenderModal/RenderModalAdvanced';
-import type { UpdateInfo } from '../components/UpdateCheck';
+import type { Bug, UpdateInfo } from '../components/UpdateCheck';
 export type CompType = 'composition' | 'still';
 export type RenderModalState = {
     type: 'render';
@@ -52,6 +52,7 @@ export type ModalState = {
 } | {
     type: 'update';
     info: UpdateInfo;
+    knownBugs: Bug[];
 } | {
     type: 'quick-switcher';
     mode: QuickSwitcherMode;

package/dist/get-cli-options.d.ts

@@ -15,13 +15,13 @@ export declare const getCliOptions: (options: {
     browser: "chrome";
     crf: import("@remotion/renderer").Crf | null;
     pixelFormat: "yuv420p" | "yuva420p" | "yuv422p" | "yuv444p" | "yuv420p10le" | "yuv422p10le" | "yuv444p10le" | "yuva444p10le";
-    proResProfile: "4444-xq" | "4444" | "hq" | "standard" | "light" | "proxy" | undefined;
+    proResProfile: "light" | "4444-xq" | "4444" | "hq" | "standard" | "proxy" | undefined;
     x264Preset: "medium" | "ultrafast" | "superfast" | "veryfast" | "faster" | "fast" | "slow" | "slower" | "veryslow" | "placebo" | undefined;
     everyNthFrame: number;
     numberOfGifLoops: import("./config/number-of-gif-loops").Loop;
     stillFrame: number;
     browserExecutable: BrowserExecutable;
-    logLevel: "verbose" | "info" | "warn" | "error";
+    logLevel: "error" | "verbose" | "info" | "warn";
     scale: number;
     chromiumOptions: ChromiumOptions;
     overwrite: boolean;

package/dist/handle-common-errors.d.ts

@@ -0,0 +1,2 @@
+import type { LogLevel } from '@remotion/renderer';
+export declare const handleCommonError: (err: Error, logLevel: LogLevel) => Promise<void>;

package/dist/handle-common-errors.js

@@ -0,0 +1,60 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.handleCommonError = void 0;
+const chalk_1 = require("./chalk");
+const log_1 = require("./log");
+const print_error_1 = require("./print-error");
+const truthy_1 = require("./truthy");
+const handleCommonError = async (err, logLevel) => {
+    var _a;
+    await (0, print_error_1.printError)(err, logLevel);
+    if (err.message.includes('Could not play video with')) {
+        log_1.Log.info();
+        log_1.Log.info('💡 Get help for this issue at https://remotion.dev/docs/media-playback-error');
+    }
+    if (err.message.includes('A delayRender()') &&
+        err.message.includes('was called but not cleared after')) {
+        log_1.Log.info();
+        log_1.Log.info('💡 Get help for this issue at https://remotion.dev/docs/timeout');
+    }
+    if (err.message.includes('Target closed')) {
+        log_1.Log.info();
+        log_1.Log.info('💡 Get help for this issue at https://remotion.dev/docs/target-closed');
+    }
+    if (err.message.includes('ENAMETOOLONG')) {
+        log_1.Log.info();
+        log_1.Log.info('💡 Get help for this issue at https://remotion.dev/docs/enametoolong');
+    }
+    if (err.message.includes('Error creating WebGL context')) {
+        log_1.Log.info();
+        log_1.Log.warn('💡 You might need to set the OpenGL renderer to "angle" (or "swangle" if rendering on lambda). Learn why at https://www.remotion.dev/docs/three');
+        log_1.Log.warn("💡 Check how it's done at https://www.remotion.dev/docs/chromium-flags#--gl");
+    }
+    if (err.message.includes('The bucket does not allow ACLs')) {
+        log_1.Log.info();
+        log_1.Log.info(chalk_1.chalk.green('💡 Fix this issue https://remotion.dev/docs/lambda/troubleshooting/bucket-disallows-acl'));
+    }
+    if (err.message.includes('Minified React error #306')) {
+        const componentName = (_a = err.message.match(/<\w+>/)) === null || _a === void 0 ? void 0 : _a[0];
+        log_1.Log.info([
+            '💡 This error indicates that the component',
+            componentName ? `(${componentName})` : null,
+            'you are trying to render is not imported correctly.',
+        ]
+            .filter(truthy_1.truthy)
+            .join(' '));
+        log_1.Log.info();
+        log_1.Log.info('   Check the root file and ensure that the component is not undefined.');
+        log_1.Log.info('   Oftentimes, this happens if the component is missing the `export` keyword');
+        log_1.Log.info('   or if the component was renamed and the import statement not properly adjusted.');
+    }
+    if (err.message.includes('GLIBC_')) {
+        log_1.Log.info('💡 Remotion requires at least Libc 2.35.');
+        log_1.Log.info('💡 Get help for this issue: https://github.com/remotion-dev/remotion/issues/2439');
+    }
+    if (err.message.includes('EBADF')) {
+        log_1.Log.info('💡 This error might be fixed by changing your Node version:');
+        log_1.Log.info('   https://github.com/remotion-dev/remotion/issues/2452');
+    }
+};
+exports.handleCommonError = handleCommonError;

package/dist/index.d.ts

@@ -63,24 +63,24 @@ export declare const CliInternals: {
         verbose: (message?: any, ...optionalParams: any[]) => void;
         verboseAdvanced: (options: {
             indent: boolean;
-            logLevel: "verbose" | "info" | "warn" | "error";
+            logLevel: "error" | "verbose" | "info" | "warn";
         } & {
             tag?: string | undefined;
         }, message?: any, ...optionalParams: any[]) => void;
         info: (message?: any, ...optionalParams: any[]) => void;
         infoAdvanced: (options: {
             indent: boolean;
-            logLevel: "verbose" | "info" | "warn" | "error";
+            logLevel: "error" | "verbose" | "info" | "warn";
         }, message?: any, ...optionalParams: any[]) => void;
         warn: (message?: any, ...optionalParams: any[]) => void;
         warnAdvanced: (options: {
             indent: boolean;
-            logLevel: "verbose" | "info" | "warn" | "error";
+            logLevel: "error" | "verbose" | "info" | "warn";
         }, message?: any, ...optionalParams: any[]) => void;
         error: (message?: any, ...optionalParams: any[]) => void;
         errorAdvanced: (options: {
             indent: boolean;
-            logLevel: "verbose" | "info" | "warn" | "error";
+            logLevel: "error" | "verbose" | "info" | "warn";
         } & {
             tag?: string | undefined;
         }, message?: any, ...optionalParams: any[]) => void;
@@ -100,13 +100,13 @@ export declare const CliInternals: {
         browser: "chrome";
         crf: import("@remotion/renderer").Crf | null;
         pixelFormat: "yuv420p" | "yuva420p" | "yuv422p" | "yuv444p" | "yuv420p10le" | "yuv422p10le" | "yuv444p10le" | "yuva444p10le";
-        proResProfile: "4444-xq" | "4444" | "hq" | "standard" | "light" | "proxy" | undefined;
+        proResProfile: "light" | "4444-xq" | "4444" | "hq" | "standard" | "proxy" | undefined;
         x264Preset: "medium" | "ultrafast" | "superfast" | "veryfast" | "faster" | "fast" | "slow" | "slower" | "veryslow" | "placebo" | undefined;
         everyNthFrame: number;
         numberOfGifLoops: import("./config/number-of-gif-loops").Loop;
         stillFrame: number;
         browserExecutable: import("@remotion/renderer").BrowserExecutable;
-        logLevel: "verbose" | "info" | "warn" | "error";
+        logLevel: "error" | "verbose" | "info" | "warn";
         scale: number;
         chromiumOptions: import("@remotion/renderer").ChromiumOptions;
         overwrite: boolean;
@@ -132,7 +132,7 @@ export declare const CliInternals: {
         "browser-executable": import("@remotion/renderer").BrowserExecutable;
         "pixel-format": "yuv420p" | "yuva420p" | "yuv422p" | "yuv444p" | "yuv420p10le" | "yuv422p10le" | "yuv444p10le" | "yuva444p10le";
         "image-format": "none" | "png" | "jpeg" | "pdf" | "webp";
-        "prores-profile": "4444-xq" | "4444" | "hq" | "standard" | "light" | "proxy";
+        "prores-profile": "light" | "4444-xq" | "4444" | "hq" | "standard" | "proxy";
         "x264-preset": "medium" | "ultrafast" | "superfast" | "veryfast" | "faster" | "fast" | "slow" | "slower" | "veryslow" | "placebo";
         "bundle-cache": string;
         "env-file": string;
@@ -190,7 +190,7 @@ export declare const CliInternals: {
     } & {
         _: string[];
     };
-    printError: (err: Error, logLevel: "verbose" | "info" | "warn" | "error") => Promise<void>;
+    printError: (err: Error, logLevel: "error" | "verbose" | "info" | "warn") => Promise<void>;
     formatBytes: (number: number, options?: Intl.NumberFormatOptions & {
         locale: string;
         bits?: boolean | undefined;
@@ -232,7 +232,7 @@ export declare const CliInternals: {
     };
     listOfRemotionPackages: string[];
     shouldUseNonOverlayingLogger: ({ logLevel, }: {
-        logLevel: "verbose" | "info" | "warn" | "error";
+        logLevel: "error" | "verbose" | "info" | "warn";
     }) => boolean;
     getCompositionWithDimensionOverride: ({ height, width, args, compositionIdFromUi, chromiumOptions, envVariables, port, puppeteerInstance, timeoutInMilliseconds, browserExecutable, serveUrlOrWebpackUrl, indent, serializedInputPropsWithCustomSchema, logLevel, server, offthreadVideoCacheSizeInBytes, }: {
         height: number | null;
@@ -247,7 +247,7 @@ export declare const CliInternals: {
         browserExecutable: import("@remotion/renderer").BrowserExecutable;
         serveUrlOrWebpackUrl: string;
         indent: boolean;
-        logLevel: "verbose" | "info" | "warn" | "error";
+        logLevel: "error" | "verbose" | "info" | "warn";
         serializedInputPropsWithCustomSchema: string;
         server: import("@remotion/renderer").RemotionServer;
         offthreadVideoCacheSizeInBytes: number | null;

package/dist/index.js

@@ -64,7 +64,16 @@ const cli = async () => {
     }
     const isBun = typeof Bun !== 'undefined';
     if (isBun) {
-        log_1.Log.warn('You are running Remotion with Bun. Visit https://remotion.dev/bun for known bugs and status updates.');
+        const version = Bun.version.split('.');
+        if (version.length === 3) {
+            if (Number(version[0]) < 1) {
+                throw new Error('Please upgrade to at least Bun 1.0.3');
+            }
+            if (Number(version[1]) === 0 && Number(version[2]) < 3) {
+                throw new Error('Please upgrade to at least Bun 1.0.3');
+            }
+        }
+        log_1.Log.info('You are running Remotion with Bun, which is mostly supported. Visit https://remotion.dev/bun for more information.');
     }
     const isStudio = command === 'studio' || command === 'preview';
     const errorSymbolicationLock = isStudio

package/dist/log.d.ts

@@ -2,24 +2,24 @@ export declare const Log: {
     verbose: (message?: any, ...optionalParams: any[]) => void;
     verboseAdvanced: (options: {
         indent: boolean;
-        logLevel: "verbose" | "info" | "warn" | "error";
+        logLevel: "error" | "verbose" | "info" | "warn";
     } & {
         tag?: string | undefined;
     }, message?: any, ...optionalParams: any[]) => void;
     info: (message?: any, ...optionalParams: any[]) => void;
     infoAdvanced: (options: {
         indent: boolean;
-        logLevel: "verbose" | "info" | "warn" | "error";
+        logLevel: "error" | "verbose" | "info" | "warn";
     }, message?: any, ...optionalParams: any[]) => void;
     warn: (message?: any, ...optionalParams: any[]) => void;
     warnAdvanced: (options: {
         indent: boolean;
-        logLevel: "verbose" | "info" | "warn" | "error";
+        logLevel: "error" | "verbose" | "info" | "warn";
     }, message?: any, ...optionalParams: any[]) => void;
     error: (message?: any, ...optionalParams: any[]) => void;
     errorAdvanced: (options: {
         indent: boolean;
-        logLevel: "verbose" | "info" | "warn" | "error";
+        logLevel: "error" | "verbose" | "info" | "warn";
     } & {
         tag?: string | undefined;
     }, message?: any, ...optionalParams: any[]) => void;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@remotion/cli",
-  "version": "4.0.42",
+  "version": "4.0.43",
   "description": "CLI for Remotion",
   "main": "dist/index.js",
   "sideEffects": false,
@@ -35,11 +35,11 @@
     "prompts": "2.4.1",
     "semver": "7.5.3",
     "source-map": "0.6.1",
-    "@remotion/renderer": "4.0.42",
-    "remotion": "4.0.42",
-    "@remotion/bundler": "4.0.42",
-    "@remotion/media-utils": "4.0.42",
-    "@remotion/player": "4.0.42"
+    "@remotion/bundler": "4.0.43",
+    "@remotion/renderer": "4.0.43",
+    "@remotion/media-utils": "4.0.43",
+    "remotion": "4.0.43",
+    "@remotion/player": "4.0.43"
   },
   "peerDependencies": {
     "react": ">=16.8.0",
@@ -65,8 +65,8 @@
     "react-dom": "^18.0.0",
     "vitest": "0.31.1",
     "zod": "^3.21.4",
-    "@remotion/zod-types": "4.0.42",
-    "@remotion/tailwind": "4.0.42"
+    "@remotion/zod-types": "4.0.43",
+    "@remotion/tailwind": "4.0.43"
   },
   "keywords": [
     "remotion",