@remotion/cli 3.3.78 → 3.3.80

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

@@ -8,10 +8,12 @@ const actions_1 = require("./actions");
 const item_style_1 = require("./item-style");
 const RenderQueueOutputName = ({ job }) => {
     const onClick = (0, react_1.useCallback)(() => {
+        if (job.deletedOutputLocation)
+            return;
         (0, actions_1.openInFileExplorer)({ directory: job.outName }).catch((err) => {
-            (0, NotificationCenter_1.sendErrorNotification)(`Could not open file: ${err.message}`);
+            (0, NotificationCenter_1.sendErrorNotification)(err.message);
         });
-    }, [job.outName]);
+    }, [job]);
     const style = (0, react_1.useMemo)(() => {
         return {
             ...item_style_1.renderQueueItemSubtitleStyle,

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

@@ -16,12 +16,11 @@ const RenderQueueProgressMessage = ({ job }) => {
     const { setSelectedModal } = (0, react_1.useContext)(modals_1.ModalsContext);
     const { tabIndex } = (0, z_index_1.useZIndex)();
     const onClick = (0, react_1.useCallback)(() => {
-        // TODO: Show progress instead
         setSelectedModal({
-            type: 'render-error',
-            job,
+            type: 'render-progress',
+            jobId: job.id,
         });
     }, [job, setSelectedModal]);
-    return ((0, jsx_runtime_1.jsx)("button", { onClick: onClick, type: "button", style: outputLocation, tabIndex: tabIndex, title: job.message, children: job.message }));
+    return ((0, jsx_runtime_1.jsx)("button", { onClick: onClick, type: "button", style: outputLocation, tabIndex: tabIndex, title: job.progress.message, children: job.progress.message }));
 };
 exports.RenderQueueProgressMessage = RenderQueueProgressMessage;

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

@@ -8,7 +8,17 @@ const NotificationCenter_1 = require("../Notifications/NotificationCenter");
 const actions_1 = require("./actions");
 const RenderQueueRemoveItem = ({ job }) => {
     const onClick = (0, react_1.useCallback)(() => {
-        (0, actions_1.removeRenderJob)(job).catch((err) => {
+        (0, actions_1.removeRenderJob)(job)
+            .then(() => {
+            var _a;
+            (_a = NotificationCenter_1.notificationCenter.current) === null || _a === void 0 ? void 0 : _a.addNotification({
+                content: 'Removed job',
+                duration: 2000,
+                created: Date.now(),
+                id: String(Math.random()).replace('0.', ''),
+            });
+        })
+            .catch((err) => {
             (0, NotificationCenter_1.sendErrorNotification)(`Could not remove item: ${err.message}`);
             console.log(err);
         });

package/dist/editor/components/RenderQueue/SuccessIcon.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const SuccessIcon: React.FC;

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

@@ -0,0 +1,14 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SuccessIcon = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const colors_1 = require("../../helpers/colors");
+const CircularProgress_1 = require("./CircularProgress");
+const iconStyle = {
+    height: CircularProgress_1.RENDER_STATUS_INDICATOR_SIZE,
+    width: CircularProgress_1.RENDER_STATUS_INDICATOR_SIZE,
+};
+const SuccessIcon = () => {
+    return ((0, jsx_runtime_1.jsx)("svg", { style: iconStyle, viewBox: "0 0 512 512", children: (0, jsx_runtime_1.jsx)("path", { fill: colors_1.LIGHT_TEXT, d: "M256 512c141.4 0 256-114.6 256-256S397.4 0 256 0S0 114.6 0 256S114.6 512 256 512zM369 209L241 337l-17 17-17-17-64-64-17-17L160 222.1l17 17 47 47L335 175l17-17L385.9 192l-17 17z" }) }));
+};
+exports.SuccessIcon = SuccessIcon;

package/dist/editor/components/RenderQueue/actions.d.ts

@@ -1,8 +1,9 @@
 import type { AudioCodec, Codec, PixelFormat, ProResProfile, StillImageFormat, VideoImageFormat } from '@remotion/renderer';
 import type { ApiRoutes } from '../../../preview-server/api-types';
 import type { RenderJob } from '../../../preview-server/render-queue/job';
+import type { RequiredChromiumOptions } from '../../../required-chromium-options';
 export declare const callApi: <Endpoint extends keyof ApiRoutes>(endpoint: Endpoint, body: ApiRoutes[Endpoint]["Request"]) => Promise<ApiRoutes[Endpoint]["Response"]>;
-export declare const addStillRenderJob: ({ compositionId, outName, imageFormat, quality, frame, scale, verbose, }: {
+export declare const addStillRenderJob: ({ compositionId, outName, imageFormat, quality, frame, scale, verbose, chromiumOptions, delayRenderTimeout, envVariables, inputProps, }: {
     compositionId: string;
     outName: string;
     imageFormat: StillImageFormat;
@@ -10,8 +11,12 @@ export declare const addStillRenderJob: ({ compositionId, outName, imageFormat,
     frame: number;
     scale: number;
     verbose: boolean;
+    chromiumOptions: RequiredChromiumOptions;
+    delayRenderTimeout: number;
+    envVariables: Record<string, string>;
+    inputProps: unknown;
 }) => Promise<undefined>;
-export declare const addVideoRenderJob: ({ compositionId, outName, imageFormat, quality, scale, verbose, codec, concurrency, crf, startFrame, endFrame, muted, enforceAudioTrack, proResProfile, pixelFormat, audioBitrate, videoBitrate, everyNthFrame, numberOfGifLoops, delayRenderTimeout, audioCodec, disallowParallelEncoding, }: {
+export declare const addVideoRenderJob: ({ compositionId, outName, imageFormat, quality, scale, verbose, codec, concurrency, crf, startFrame, endFrame, muted, enforceAudioTrack, proResProfile, pixelFormat, audioBitrate, videoBitrate, everyNthFrame, numberOfGifLoops, delayRenderTimeout, audioCodec, disallowParallelEncoding, chromiumOptions, envVariables, inputProps, }: {
     compositionId: string;
     outName: string;
     imageFormat: VideoImageFormat;
@@ -34,6 +39,9 @@ export declare const addVideoRenderJob: ({ compositionId, outName, imageFormat,
     delayRenderTimeout: number;
     audioCodec: AudioCodec;
     disallowParallelEncoding: boolean;
+    chromiumOptions: RequiredChromiumOptions;
+    envVariables: Record<string, string>;
+    inputProps: unknown;
 }) => Promise<undefined>;
 export declare const unsubscribeFromFileExistenceWatcher: ({ file, clientId, }: {
     file: string;
@@ -48,3 +56,4 @@ export declare const openInFileExplorer: ({ directory }: {
 }) => Promise<void>;
 export declare const removeRenderJob: (job: RenderJob) => Promise<undefined>;
 export declare const cancelRenderJob: (job: RenderJob) => Promise<import("../../../preview-server/render-queue/job").CancelRenderResponse>;
+export declare const updateDefaultProps: (compositionId: string, defaultProps: unknown) => Promise<void>;

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

@@ -1,6 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.cancelRenderJob = exports.removeRenderJob = exports.openInFileExplorer = exports.subscribeToFileExistenceWatcher = exports.unsubscribeFromFileExistenceWatcher = exports.addVideoRenderJob = exports.addStillRenderJob = exports.callApi = void 0;
+exports.updateDefaultProps = exports.cancelRenderJob = exports.removeRenderJob = exports.openInFileExplorer = exports.subscribeToFileExistenceWatcher = exports.unsubscribeFromFileExistenceWatcher = exports.addVideoRenderJob = exports.addStillRenderJob = exports.callApi = void 0;
+const date_serialization_1 = require("../RenderModal/SchemaEditor/date-serialization");
 const callApi = (endpoint, body) => {
     return new Promise((resolve, reject) => {
         fetch(endpoint, {
@@ -25,7 +26,7 @@ const callApi = (endpoint, body) => {
     });
 };
 exports.callApi = callApi;
-const addStillRenderJob = ({ compositionId, outName, imageFormat, quality, frame, scale, verbose, }) => {
+const addStillRenderJob = ({ compositionId, outName, imageFormat, quality, frame, scale, verbose, chromiumOptions, delayRenderTimeout, envVariables, inputProps, }) => {
     return (0, exports.callApi)('/api/render', {
         compositionId,
         type: 'still',
@@ -35,10 +36,14 @@ const addStillRenderJob = ({ compositionId, outName, imageFormat, quality, frame
         frame,
         scale,
         verbose,
+        chromiumOptions,
+        delayRenderTimeout,
+        envVariables,
+        inputProps,
     });
 };
 exports.addStillRenderJob = addStillRenderJob;
-const addVideoRenderJob = ({ compositionId, outName, imageFormat, quality, scale, verbose, codec, concurrency, crf, startFrame, endFrame, muted, enforceAudioTrack, proResProfile, pixelFormat, audioBitrate, videoBitrate, everyNthFrame, numberOfGifLoops, delayRenderTimeout, audioCodec, disallowParallelEncoding, }) => {
+const addVideoRenderJob = ({ compositionId, outName, imageFormat, quality, scale, verbose, codec, concurrency, crf, startFrame, endFrame, muted, enforceAudioTrack, proResProfile, pixelFormat, audioBitrate, videoBitrate, everyNthFrame, numberOfGifLoops, delayRenderTimeout, audioCodec, disallowParallelEncoding, chromiumOptions, envVariables, inputProps, }) => {
     return (0, exports.callApi)('/api/render', {
         compositionId,
         type: 'video',
@@ -63,6 +68,9 @@ const addVideoRenderJob = ({ compositionId, outName, imageFormat, quality, scale
         delayRenderTimeout,
         audioCodec,
         disallowParallelEncoding,
+        chromiumOptions,
+        envVariables,
+        inputProps,
     });
 };
 exports.addVideoRenderJob = addVideoRenderJob;
@@ -97,3 +105,10 @@ const cancelRenderJob = (job) => {
     });
 };
 exports.cancelRenderJob = cancelRenderJob;
+const updateDefaultProps = (compositionId, defaultProps) => {
+    return (0, exports.callApi)('/api/update-default-props', {
+        compositionId,
+        defaultProps: (0, date_serialization_1.serializeJSONWithDate)(defaultProps, undefined),
+    });
+};
+exports.updateDefaultProps = updateDefaultProps;

package/dist/editor/components/RenderToolbarIcon.js

@@ -69,6 +69,11 @@ const RenderStillButton = () => {
             initialNumberOfGifLoops: defaults.numberOfGifLoops,
             initialDelayRenderTimeout: defaults.delayRenderTimeout,
             initialAudioCodec: defaults.audioCodec,
+            initialEnvVariables: window.process.env,
+            initialDisableWebSecurity: defaults.disableWebSecurity,
+            initialOpenGlRenderer: defaults.openGlRenderer,
+            initialHeadless: defaults.headless,
+            initialIgnoreCertificateErrors: defaults.ignoreCertificateErrors,
         });
     }, [video, frame, setSelectedModal]);
     if (!video) {

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

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const RightPanel: React.FC<{}>;

package/dist/editor/components/RightPanel.js

@@ -0,0 +1,43 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.RightPanel = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const remotion_1 = require("remotion");
+const RenderModalData_1 = require("./RenderModal/RenderModalData");
+const container = {
+    height: '100%',
+    width: '100%',
+    position: 'absolute',
+    overflow: 'auto',
+};
+const PropsEditor = ({ composition }) => {
+    var _a;
+    const { props, updateProps } = (0, react_1.useContext)(remotion_1.Internals.EditorPropsContext);
+    // TODO: Warn if inputProps were specified to the CLI, then
+    // they take priority over defaultProps
+    const setInputProps = (0, react_1.useCallback)((newProps) => {
+        updateProps({
+            id: composition.id,
+            defaultProps: composition.defaultProps,
+            newProps: newProps,
+        });
+    }, [composition.defaultProps, composition.id, updateProps]);
+    return ((0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)(RenderModalData_1.RenderModalData, { composition: composition, inputProps: (_a = props[composition.id]) !== null && _a !== void 0 ? _a : composition.defaultProps, setInputProps: setInputProps, compact: true, updateButton: true, showSaveButton: true }) }));
+};
+const RightPanel = () => {
+    const { compositions, currentComposition } = (0, react_1.useContext)(remotion_1.Internals.CompositionManager);
+    const composition = (0, react_1.useMemo)(() => {
+        for (const comp of compositions) {
+            if (comp.id === currentComposition) {
+                return comp;
+            }
+        }
+        return null;
+    }, [compositions, currentComposition]);
+    if (composition === null) {
+        return null;
+    }
+    return ((0, jsx_runtime_1.jsx)("div", { style: container, children: (0, jsx_runtime_1.jsx)(PropsEditor, { composition: composition }) }));
+};
+exports.RightPanel = RightPanel;

package/dist/editor/components/SidebarContent.js

@@ -47,6 +47,7 @@ const SidebarContent = () => {
             },
         };
     }, []);
+    // TODO: It is not perfectly aligned in example
     return ((0, jsx_runtime_1.jsxs)("div", { style: container, children: [shouldRender ? ((0, jsx_runtime_1.jsx)("div", { style: tabsContainer, children: (0, jsx_runtime_1.jsxs)(Tabs_1.Tabs, { children: [(0, jsx_runtime_1.jsx)(Tabs_1.Tab, { selected: panel === 'compositions', onClick: onCompositionsSelected, children: "Compositions" }), (0, jsx_runtime_1.jsx)(RendersTab_1.RendersTab, { onClick: onRendersSelected, selected: panel === 'renders' })] }) })) : null, panel === 'renders' && shouldRender ? ((0, jsx_runtime_1.jsx)(RenderQueue_1.RenderQueue, {})) : ((0, jsx_runtime_1.jsx)(CompositionSelector_1.CompositionSelector, {})), (0, jsx_runtime_1.jsx)(CurrentCompositionSideEffects_1.CurrentCompositionKeybindings, {}), (0, jsx_runtime_1.jsx)(CurrentCompositionSideEffects_1.TitleUpdater, {})] }));
 };
 exports.SidebarContent = SidebarContent;

package/dist/editor/helpers/convert-env-variables.d.ts

@@ -0,0 +1,2 @@
+export declare const envVariablesObjectToArray: (envVariables: Record<string, string>) => [string, string][];
+export declare const envVariablesArrayToObject: (envVariables: [string, string][]) => Record<string, string>;

package/dist/editor/helpers/convert-env-variables.js

@@ -0,0 +1,20 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.envVariablesArrayToObject = exports.envVariablesObjectToArray = void 0;
+const envVariablesObjectToArray = (envVariables) => {
+    return Object.entries(envVariables).map(([key, one]) => [
+        key.trim(),
+        one.trim(),
+    ]);
+};
+exports.envVariablesObjectToArray = envVariablesObjectToArray;
+const envVariablesArrayToObject = (envVariables) => {
+    return envVariables
+        .map(([key, val]) => [key.trim(), val.trim()])
+        .filter(([key, val]) => key && val)
+        .reduce((acc, [key, value]) => {
+        acc[key] = value;
+        return acc;
+    }, {});
+};
+exports.envVariablesArrayToObject = envVariablesArrayToObject;

package/dist/editor/helpers/get-timeline-sequence-layout.js

@@ -13,8 +13,8 @@ const getWidthOfTrack = ({ durationInFrames, lastFrame, windowWidth, spatialDura
 const getTimelineSequenceLayout = ({ durationInFrames, startFrom, maxMediaDuration, startFromMedia, video, windowWidth, }) => {
     var _a;
     const maxMediaSequenceDuration = (maxMediaDuration !== null && maxMediaDuration !== void 0 ? maxMediaDuration : Infinity) - startFromMedia;
-    let spatialDuration = Math.min(maxMediaSequenceDuration, durationInFrames - 1);
     const lastFrame = ((_a = video.durationInFrames) !== null && _a !== void 0 ? _a : 1) - 1;
+    let spatialDuration = Math.min(maxMediaSequenceDuration, durationInFrames - 1, lastFrame - startFrom);
     const shouldAddHalfAFrameAtEnd = startFrom + durationInFrames < lastFrame;
     const shouldAddHalfAFrameAtStart = startFrom > 0;
     if (shouldAddHalfAFrameAtEnd) {

package/dist/editor/helpers/render-modal-sections.d.ts

@@ -1,7 +1,7 @@
 /// <reference types="react" />
 import type { Codec } from '@remotion/renderer';
 import type { RenderType } from '../components/RenderModal/RenderModalAdvanced';
-declare type Section = 'general' | 'picture' | 'advanced' | 'gif' | 'audio';
+declare type Section = 'general' | 'picture' | 'advanced' | 'data' | 'gif' | 'audio';
 export declare const useRenderModalSections: (renderMode: RenderType, codec: Codec) => {
     tab: Section;
     setTab: import("react").Dispatch<import("react").SetStateAction<Section>>;

package/dist/editor/helpers/render-modal-sections.js

@@ -6,16 +6,16 @@ const useRenderModalSections = (renderMode, codec) => {
     const [selectedTab, setTab] = (0, react_1.useState)('general');
     const shownTabs = (0, react_1.useMemo)(() => {
         if (renderMode === 'audio') {
-            return ['general', 'audio', 'advanced'];
+            return ['general', 'data', 'audio', 'advanced'];
         }
         if (renderMode === 'still') {
-            return ['general', 'picture', 'advanced'];
+            return ['general', 'data', 'picture', 'advanced'];
         }
         if (renderMode === 'video') {
             if (codec === 'gif') {
-                return ['general', 'picture', 'gif', 'advanced'];
+                return ['general', 'data', 'picture', 'gif', 'advanced'];
             }
-            return ['general', 'picture', 'audio', 'advanced'];
+            return ['general', 'data', 'picture', 'audio', 'advanced'];
         }
         throw new TypeError('Unknown render mode');
     }, [codec, renderMode]);

package/dist/editor/icons/data.d.ts

@@ -0,0 +1,2 @@
+import type { SVGProps } from 'react';
+export declare const DataIcon: (props: SVGProps<SVGSVGElement>) => JSX.Element;

package/dist/editor/icons/data.js

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DataIcon = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const DataIcon = (props) => {
+    return ((0, jsx_runtime_1.jsx)("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 448 512", ...props, children: (0, jsx_runtime_1.jsx)("path", { fill: "currentcolor", d: "M224 512C100.3 512 0 476.2 0 432V80C0 35.82 100.3 0 224 0C347.7 0 448 35.82 448 80V432C448 476.2 347.7 512 224 512zM416 80.45C415.7 79.69 414.4 77.27 409.8 73.31C402.4 67.11 389.9 60.09 371.6 53.57C335.4 40.62 283.2 32 224 32C164.8 32 112.6 40.62 76.37 53.57C58.1 60.09 45.59 67.11 38.25 73.31C33.55 77.27 32.29 79.69 32 80.45V182.1C46.47 192.7 69.9 202.8 100.9 210.4C135.5 218.9 177.1 224 224 224C270 224 312.5 218.9 347.1 210.4C378.1 202.8 401.5 192.7 416 182.1V80.45zM416 219.5C398.8 228.4 377.9 235.8 354.8 241.5C317.3 250.7 272.2 256 224 256C175.8 256 130.7 250.7 93.22 241.5C70.11 235.8 49.18 228.4 32 219.5V310.1C46.47 320.7 69.9 330.8 100.9 338.4C135.5 346.9 177.1 352 224 352C270 352 312.5 346.9 347.1 338.4C378.1 330.8 401.5 320.7 416 310.1V219.5zM38.25 438.7C45.59 444.9 58.1 451.9 76.37 458.4C112.6 471.4 164.8 480 224 480C283.2 480 335.4 471.4 371.6 458.4C389.9 451.9 402.4 444.9 409.8 438.7C414.4 434.7 415.7 432.3 416 431.6V347.5C398.8 356.4 377.9 363.8 354.8 369.5C317.3 378.7 272.2 384 224 384C175.8 384 130.7 378.7 93.22 369.5C70.11 363.8 49.18 356.4 32 347.5V431.6C32.29 432.3 33.55 434.7 38.25 438.7zM416 431.4C416.1 431.3 416.1 431.3 416.1 431.3L416 431.4zM31.96 431.4C31.94 431.3 31.93 431.3 31.92 431.3L31.96 431.4zM31.96 80.56C31.93 80.65 31.92 80.7 31.92 80.7L31.96 80.56zM416.1 80.7C416.1 80.7 416.1 80.65 416 80.56z" }) }));
+};
+exports.DataIcon = DataIcon;

package/dist/editor/icons/save.d.ts

@@ -0,0 +1,2 @@
+import type { SVGProps } from 'react';
+export declare const Save: (props: SVGProps<SVGSVGElement>) => JSX.Element;

package/dist/editor/icons/save.js

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Save = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const Save = (props) => {
+    return ((0, jsx_runtime_1.jsx)("svg", { viewBox: "0 0 448 512", ...props, children: (0, jsx_runtime_1.jsx)("path", { fill: "currentcolor", d: "M64 32C28.7 32 0 60.7 0 96V416c0 35.3 28.7 64 64 64H384c35.3 0 64-28.7 64-64V173.3c0-17-6.7-33.3-18.7-45.3L352 50.7C340 38.7 323.7 32 306.7 32H64zm0 96c0-17.7 14.3-32 32-32H288c17.7 0 32 14.3 32 32v64c0 17.7-14.3 32-32 32H96c-17.7 0-32-14.3-32-32V128zM224 288a64 64 0 1 1 0 128 64 64 0 1 1 0-128z" }) }));
+};
+exports.Save = Save;

package/dist/handle-common-errors.js

@@ -4,7 +4,9 @@ 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) => {
+    var _a;
     await (0, print_error_1.printError)(err);
     if (err.message.includes('Could not play video with')) {
         log_1.Log.info();
@@ -32,5 +34,19 @@ const handleCommonError = async (err) => {
         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.');
+    }
 };
 exports.handleCommonError = handleCommonError;

package/dist/parse-command-line.d.ts

@@ -48,6 +48,8 @@ export declare type CommandLineOptions = {
     ['package-manager']: string;
     ['webpack-poll']: number;
     ['no-open']: boolean;
+    ['browser']: string;
+    ['browser-args']: string;
 };
 export declare const BooleanFlags: string[];
 export declare const parsedCli: CommandLineOptions & {

package/dist/preview-server/api-routes.js

@@ -7,6 +7,7 @@ const open_in_file_explorer_1 = require("./routes/open-in-file-explorer");
 const remove_render_1 = require("./routes/remove-render");
 const subscribe_to_file_existence_1 = require("./routes/subscribe-to-file-existence");
 const unsubscribe_from_file_existence_1 = require("./routes/unsubscribe-from-file-existence");
+const update_default_props_1 = require("./routes/update-default-props");
 exports.allApiRoutes = {
     '/api/cancel': cancel_render_1.handleCancelRender,
     '/api/render': add_render_1.handleAddRender,
@@ -14,4 +15,5 @@ exports.allApiRoutes = {
     '/api/subscribe-to-file-existence': subscribe_to_file_existence_1.subscribeToFileExistence,
     '/api/remove-render': remove_render_1.handleRemoveRender,
     '/api/open-in-file-explorer': open_in_file_explorer_1.handleOpenInFileExplorer,
+    '/api/update-default-props': update_default_props_1.updateDefaultPropsHandler,
 };

package/dist/preview-server/api-types.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="node" />
 import type { IncomingMessage, ServerResponse } from 'http';
-import type { AddRenderRequest, CancelRenderRequest, CancelRenderResponse, OpenInFileExplorerRequest, RemoveRenderRequest, SubscribeToFileExistenceRequest, SubscribeToFileExistenceResponse, UnsubscribeFromFileExistenceRequest } from './render-queue/job';
+import type { AddRenderRequest, CancelRenderRequest, CancelRenderResponse, OpenInFileExplorerRequest, RemoveRenderRequest, SubscribeToFileExistenceRequest, SubscribeToFileExistenceResponse, UnsubscribeFromFileExistenceRequest, UpdateDefaultPropsRequest } from './render-queue/job';
 export declare type ApiHandler<ReqData, ResData> = (params: {
     input: ReqData;
     entryPoint: string;
@@ -23,5 +23,6 @@ export declare type ApiRoutes = {
     '/api/subscribe-to-file-existence': ReqAndRes<SubscribeToFileExistenceRequest, SubscribeToFileExistenceResponse>;
     '/api/remove-render': ReqAndRes<RemoveRenderRequest, undefined>;
     '/api/open-in-file-explorer': ReqAndRes<OpenInFileExplorerRequest, void>;
+    '/api/update-default-props': ReqAndRes<UpdateDefaultPropsRequest, void>;
 };
 export {};

package/dist/preview-server/render-queue/job.d.ts

@@ -1,10 +1,16 @@
 import type { AudioCodec, Codec, makeCancelSignal, PixelFormat, ProResProfile, StillImageFormat, VideoImageFormat } from '@remotion/renderer';
+import type { AggregateRenderProgress } from '../../progress-types';
+import type { RequiredChromiumOptions } from '../../required-chromium-options';
+export declare type BaseRenderProgress = {
+    message: string;
+    value: number;
+};
 declare type RenderJobDynamicStatus = {
     status: 'done';
+    progress: BaseRenderProgress & AggregateRenderProgress;
 } | {
     status: 'running';
-    progress: number;
-    message: string;
+    progress: BaseRenderProgress & AggregateRenderProgress;
 } | {
     status: 'idle';
 } | {
@@ -14,17 +20,14 @@ declare type RenderJobDynamicStatus = {
         stack: string | undefined;
     };
 };
-export declare type JobProgressCallback = (options: {
-    progress: number;
-    message: string;
-}) => void;
-declare type RenderJobDynamicFields = {
+export declare type JobProgressCallback = (options: BaseRenderProgress & AggregateRenderProgress) => void;
+declare type RenderJobDynamicFields = ({
     type: 'still';
     imageFormat: StillImageFormat;
     quality: number | null;
     frame: number;
     scale: number;
-} | {
+} & RenderJobDynamicStatus) | ({
     type: 'video';
     imageFormat: VideoImageFormat;
     quality: number | null;
@@ -43,9 +46,8 @@ declare type RenderJobDynamicFields = {
     videoBitrate: string | null;
     everyNthFrame: number;
     numberOfGifLoops: number | null;
-    delayRenderTimeout: number;
     disallowParallelEncoding: boolean;
-};
+} & RenderJobDynamicStatus);
 export declare type RenderJob = {
     startedAt: number;
     compositionId: string;
@@ -53,8 +55,12 @@ export declare type RenderJob = {
     outName: string;
     deletedOutputLocation: boolean;
     verbose: boolean;
+    delayRenderTimeout: number;
     cancelToken: ReturnType<typeof makeCancelSignal>;
-} & RenderJobDynamicStatus & RenderJobDynamicFields;
+    chromiumOptions: RequiredChromiumOptions;
+    envVariables: Record<string, string>;
+    inputProps: unknown;
+} & RenderJobDynamicFields;
 export declare type RenderJobWithCleanup = RenderJob & {
     cleanup: (() => void)[];
 };
@@ -85,7 +91,6 @@ declare type AddRenderRequestDynamicFields = {
     videoBitrate: string | null;
     everyNthFrame: number;
     numberOfGifLoops: number | null;
-    delayRenderTimeout: number;
     disallowParallelEncoding: boolean;
 };
 export declare type CancelRenderRequest = {
@@ -95,6 +100,10 @@ export declare type CancelRenderResponse = {};
 export declare type AddRenderRequest = {
     compositionId: string;
     outName: string;
+    chromiumOptions: RequiredChromiumOptions;
+    delayRenderTimeout: number;
+    envVariables: Record<string, string>;
+    inputProps: unknown;
 } & AddRenderRequestDynamicFields;
 export declare type RemoveRenderRequest = {
     jobId: string;
@@ -113,4 +122,8 @@ export declare type UnsubscribeFromFileExistenceRequest = {
     file: string;
     clientId: string;
 };
+export declare type UpdateDefaultPropsRequest = {
+    compositionId: string;
+    defaultProps: string;
+};
 export {};

package/dist/preview-server/render-queue/make-retry-payload.js

@@ -37,8 +37,13 @@ const makeRetryPayload = (job) => {
             initialVideoBitrate: defaults.videoBitrate,
             initialEveryNthFrame: defaults.everyNthFrame,
             initialNumberOfGifLoops: defaults.numberOfGifLoops,
-            initialDelayRenderTimeout: defaults.delayRenderTimeout,
+            initialDelayRenderTimeout: job.delayRenderTimeout,
             initialAudioCodec: defaults.audioCodec,
+            initialEnvVariables: job.envVariables,
+            initialDisableWebSecurity: job.chromiumOptions.disableWebSecurity,
+            initialOpenGlRenderer: job.chromiumOptions.gl,
+            initialHeadless: job.chromiumOptions.headless,
+            initialIgnoreCertificateErrors: job.chromiumOptions.ignoreCertificateErrors,
         };
     }
     if (job.type === 'video') {
@@ -72,6 +77,11 @@ const makeRetryPayload = (job) => {
             initialNumberOfGifLoops: job.numberOfGifLoops,
             initialDelayRenderTimeout: job.delayRenderTimeout,
             initialAudioCodec: job.audioCodec,
+            initialEnvVariables: job.envVariables,
+            initialDisableWebSecurity: job.chromiumOptions.disableWebSecurity,
+            initialOpenGlRenderer: job.chromiumOptions.gl,
+            initialHeadless: job.chromiumOptions.headless,
+            initialIgnoreCertificateErrors: job.chromiumOptions.ignoreCertificateErrors,
         };
     }
     throw new Error(`Job ${JSON.stringify(job)} Not implemented`);

package/dist/preview-server/render-queue/open-directory-in-finder.d.ts

@@ -1 +1 @@
-export declare const openDirectoryInFinder: (dirToOpen: string) => Promise<void>;
+export declare const openDirectoryInFinder: (dirToOpen: string, allowedDirectory: string) => Promise<void>;

package/dist/preview-server/render-queue/open-directory-in-finder.js

@@ -1,10 +1,19 @@
 "use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.openDirectoryInFinder = void 0;
 const child_process_1 = require("child_process");
 const os_1 = require("os");
+const path_1 = __importDefault(require("path"));
 const truthy_1 = require("../../truthy");
-const openDirectoryInFinder = (dirToOpen) => {
+const openDirectoryInFinder = (dirToOpen, allowedDirectory) => {
+    const resolved = path_1.default.resolve(allowedDirectory, dirToOpen);
+    const relativeToProcessCwd = path_1.default.relative(allowedDirectory, resolved);
+    if (relativeToProcessCwd.startsWith('..')) {
+        throw new Error(`Not allowed to open ${relativeToProcessCwd}`);
+    }
     const command = (0, os_1.platform)() === 'darwin'
         ? 'open'
         : (0, os_1.platform)() === 'linux'

package/dist/preview-server/render-queue/process-still.js

@@ -9,13 +9,7 @@ const processStill = async ({ job, remotionRoot, entryPoint, onProgress, addClea
     if (job.type !== 'still') {
         throw new Error('Expected still job');
     }
-    const { publicDir, browserExecutable, 
-    // TODO: Accept chromium options from UI
-    chromiumOptions, 
-    // TODO: Accept env variables from UI
-    envVariables, 
-    // TODO: Accept input props from UI
-    inputProps, port, browser, puppeteerTimeout, } = await (0, get_cli_options_1.getCliOptions)({
+    const { publicDir, browserExecutable, port, browser, puppeteerTimeout } = await (0, get_cli_options_1.getCliOptions)({
         isLambda: false,
         type: 'still',
         remotionRoot,
@@ -25,12 +19,12 @@ const processStill = async ({ job, remotionRoot, entryPoint, onProgress, addClea
         remotionRoot,
         browser,
         browserExecutable,
-        chromiumOptions,
+        chromiumOptions: job.chromiumOptions,
         entryPointReason: 'same as preview',
-        envVariables,
+        envVariables: job.envVariables,
         height: null,
         fullEntryPoint,
-        inputProps,
+        inputProps: job.inputProps,
         overwrite: true,
         port,
         publicDir,

package/dist/preview-server/render-queue/process-video.js

@@ -9,13 +9,7 @@ const processVideoJob = async ({ job, remotionRoot, entryPoint, onProgress, addC
     if (job.type !== 'video') {
         throw new Error('Expected video job');
     }
-    const { publicDir, browserExecutable, 
-    // TODO: Accept chromium options from UI
-    chromiumOptions, 
-    // TODO: Accept env variables from UI
-    envVariables, 
-    // TODO: Accept input props from UI
-    inputProps, port, browser, ffmpegOverride, } = await (0, get_cli_options_1.getCliOptions)({
+    const { publicDir, browserExecutable, port, browser, ffmpegOverride } = await (0, get_cli_options_1.getCliOptions)({
         isLambda: false,
         type: 'still',
         remotionRoot,
@@ -25,12 +19,12 @@ const processVideoJob = async ({ job, remotionRoot, entryPoint, onProgress, addC
         remotionRoot,
         browser,
         browserExecutable,
-        chromiumOptions,
+        chromiumOptions: job.chromiumOptions,
         entryPointReason: 'same as preview',
-        envVariables,
+        envVariables: job.envVariables,
         height: null,
         fullEntryPoint,
-        inputProps,
+        inputProps: job.inputProps,
         overwrite: true,
         port,
         publicDir,