@remotion/studio 4.0.374 → 4.0.376

package/dist/components/RenderModal/WebRenderModalAdvanced.js

@@ -0,0 +1,75 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.WebRenderModalAdvanced = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const Checkmark_1 = require("../../icons/Checkmark");
+const Checkbox_1 = require("../Checkbox");
+const layout_1 = require("../layout");
+const ComboBox_1 = require("../NewComposition/ComboBox");
+const layout_2 = require("./layout");
+const NumberSetting_1 = require("./NumberSetting");
+const OptionExplainerBubble_1 = require("./OptionExplainerBubble");
+const tabContainer = {
+    flex: 1,
+};
+const WebRenderModalAdvanced = ({ renderMode, delayRenderTimeout, setDelayRenderTimeout, mediaCacheSizeInBytes, setMediaCacheSizeInBytes, hardwareAcceleration, setHardwareAcceleration, }) => {
+    const toggleCustomMediaCacheSizeInBytes = (0, react_1.useCallback)(() => {
+        setMediaCacheSizeInBytes((previous) => {
+            if (previous === null) {
+                return 1000 * 1000 * 1000;
+            }
+            return null;
+        });
+    }, [setMediaCacheSizeInBytes]);
+    const changeMediaCacheSizeInBytes = (0, react_1.useCallback)((cb) => {
+        setMediaCacheSizeInBytes((prev) => {
+            if (prev === null) {
+                throw new TypeError('Expected previous value');
+            }
+            if (typeof cb === 'function') {
+                return cb(prev);
+            }
+            return cb;
+        });
+    }, [setMediaCacheSizeInBytes]);
+    const hardwareAccelerationOptions = (0, react_1.useMemo)(() => {
+        return [
+            {
+                label: 'No Preference',
+                onClick: () => setHardwareAcceleration('no-preference'),
+                leftItem: hardwareAcceleration === 'no-preference' ? (0, jsx_runtime_1.jsx)(Checkmark_1.Checkmark, {}) : null,
+                id: 'no-preference',
+                keyHint: null,
+                quickSwitcherLabel: null,
+                subMenu: null,
+                type: 'item',
+                value: 'no-preference',
+            },
+            {
+                label: 'Prefer Hardware',
+                onClick: () => setHardwareAcceleration('prefer-hardware'),
+                leftItem: hardwareAcceleration === 'prefer-hardware' ? (0, jsx_runtime_1.jsx)(Checkmark_1.Checkmark, {}) : null,
+                id: 'prefer-hardware',
+                keyHint: null,
+                quickSwitcherLabel: null,
+                subMenu: null,
+                type: 'item',
+                value: 'prefer-hardware',
+            },
+            {
+                label: 'Prefer Software',
+                onClick: () => setHardwareAcceleration('prefer-software'),
+                leftItem: hardwareAcceleration === 'prefer-software' ? (0, jsx_runtime_1.jsx)(Checkmark_1.Checkmark, {}) : null,
+                id: 'prefer-software',
+                keyHint: null,
+                quickSwitcherLabel: null,
+                subMenu: null,
+                type: 'item',
+                value: 'prefer-software',
+            },
+        ];
+    }, [hardwareAcceleration, setHardwareAcceleration]);
+    return ((0, jsx_runtime_1.jsxs)("div", { style: tabContainer, children: [(0, jsx_runtime_1.jsx)(NumberSetting_1.NumberSetting, { name: "Delay Render Timeout", formatter: (v) => `${v}ms`, min: 0, max: 1000000000, step: 1000, value: delayRenderTimeout, onValueChanged: setDelayRenderTimeout, hint: "delayRenderTimeoutInMillisecondsOption" }), (0, jsx_runtime_1.jsxs)("div", { style: layout_2.optionRow, children: [(0, jsx_runtime_1.jsxs)("div", { style: layout_2.label, children: ["Custom @remotion/media cache size ", (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 0.5 }), (0, jsx_runtime_1.jsx)(OptionExplainerBubble_1.OptionExplainerBubble, { id: "mediaCacheSizeInBytesOption" })] }), (0, jsx_runtime_1.jsx)("div", { style: layout_2.rightRow, children: (0, jsx_runtime_1.jsx)(Checkbox_1.Checkbox, { checked: mediaCacheSizeInBytes !== null, onChange: toggleCustomMediaCacheSizeInBytes, name: "media-cache-size" }) })] }), mediaCacheSizeInBytes === null ? null : ((0, 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' ? ((0, jsx_runtime_1.jsxs)("div", { style: layout_2.optionRow, children: [(0, jsx_runtime_1.jsx)("div", { style: layout_2.label, children: "Hardware Acceleration" }), (0, jsx_runtime_1.jsx)("div", { style: layout_2.rightRow, children: (0, jsx_runtime_1.jsx)(ComboBox_1.Combobox, { values: hardwareAccelerationOptions, selectedId: hardwareAcceleration, title: "Hardware Acceleration" }) })] })) : null] }));
+};
+exports.WebRenderModalAdvanced = WebRenderModalAdvanced;

package/dist/components/RenderModal/WebRenderModalBasic.d.ts

@@ -0,0 +1,29 @@
+import type { LogLevel } from '@remotion/renderer';
+import type { RenderStillImageFormat, WebRendererCodec, WebRendererContainer } from '@remotion/web-renderer';
+import type React from 'react';
+import type { VideoConfig } from 'remotion';
+import type { RenderType } from './WebRenderModal';
+type WebRenderModalBasicProps = {
+    readonly renderMode: RenderType;
+    readonly resolvedComposition: VideoConfig;
+    readonly imageFormat: RenderStillImageFormat;
+    readonly setStillFormat: (format: RenderStillImageFormat) => void;
+    readonly frame: number;
+    readonly onFrameChanged: (e: string) => void;
+    readonly onFrameSetDirectly: (newFrame: number) => void;
+    readonly container: WebRendererContainer;
+    readonly setContainerFormat: (container: WebRendererContainer) => void;
+    readonly codec: WebRendererCodec;
+    readonly setCodec: (codec: WebRendererCodec) => void;
+    readonly startFrame: number | null;
+    readonly setStartFrame: React.Dispatch<React.SetStateAction<number | null>>;
+    readonly endFrame: number | null;
+    readonly setEndFrame: React.Dispatch<React.SetStateAction<number | null>>;
+    readonly outName: string;
+    readonly onOutNameChange: React.ChangeEventHandler<HTMLInputElement>;
+    readonly validationMessage: string | null;
+    readonly logLevel: LogLevel;
+    readonly setLogLevel: (level: LogLevel) => void;
+};
+export declare const WebRenderModalBasic: React.FC<WebRenderModalBasicProps>;
+export {};

package/dist/components/RenderModal/WebRenderModalBasic.js

@@ -0,0 +1,133 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.WebRenderModalBasic = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const Checkmark_1 = require("../../icons/Checkmark");
+const Checkbox_1 = require("../Checkbox");
+const layout_1 = require("../layout");
+const ComboBox_1 = require("../NewComposition/ComboBox");
+const InputDragger_1 = require("../NewComposition/InputDragger");
+const RemInput_1 = require("../NewComposition/RemInput");
+const SegmentedControl_1 = require("../SegmentedControl");
+const FrameRangeSetting_1 = require("./FrameRangeSetting");
+const layout_2 = require("./layout");
+const OptionExplainerBubble_1 = require("./OptionExplainerBubble");
+const RenderModalOutputName_1 = require("./RenderModalOutputName");
+const tabContainer = {
+    flex: 1,
+};
+const WebRenderModalBasic = ({ renderMode, resolvedComposition, imageFormat, setStillFormat, frame, onFrameChanged, onFrameSetDirectly, container, setContainerFormat, codec, setCodec, startFrame, setStartFrame, endFrame, setEndFrame, outName, onOutNameChange, validationMessage, logLevel, setLogLevel, }) => {
+    const imageFormatOptions = (0, react_1.useMemo)(() => {
+        return [
+            {
+                label: 'PNG',
+                onClick: () => setStillFormat('png'),
+                key: 'png',
+                selected: imageFormat === 'png',
+            },
+            {
+                label: 'JPEG',
+                onClick: () => setStillFormat('jpeg'),
+                key: 'jpeg',
+                selected: imageFormat === 'jpeg',
+            },
+            {
+                label: 'WebP',
+                onClick: () => setStillFormat('webp'),
+                key: 'webp',
+                selected: imageFormat === 'webp',
+            },
+        ];
+    }, [imageFormat, setStillFormat]);
+    const containerOptions = (0, react_1.useMemo)(() => {
+        return [
+            {
+                label: 'MP4',
+                onClick: () => setContainerFormat('mp4'),
+                leftItem: container === 'mp4' ? (0, jsx_runtime_1.jsx)(Checkmark_1.Checkmark, {}) : null,
+                id: 'mp4',
+                keyHint: null,
+                quickSwitcherLabel: null,
+                subMenu: null,
+                type: 'item',
+                value: 'mp4',
+            },
+            {
+                label: 'WebM',
+                onClick: () => setContainerFormat('webm'),
+                leftItem: container === 'webm' ? (0, jsx_runtime_1.jsx)(Checkmark_1.Checkmark, {}) : null,
+                id: 'webm',
+                keyHint: null,
+                quickSwitcherLabel: null,
+                subMenu: null,
+                type: 'item',
+                value: 'webm',
+            },
+        ];
+    }, [container, setContainerFormat]);
+    const codecOptions = (0, react_1.useMemo)(() => {
+        return [
+            {
+                label: 'H.264',
+                onClick: () => setCodec('h264'),
+                leftItem: codec === 'h264' ? (0, jsx_runtime_1.jsx)(Checkmark_1.Checkmark, {}) : null,
+                id: 'h264',
+                keyHint: null,
+                quickSwitcherLabel: null,
+                subMenu: null,
+                type: 'item',
+                value: 'h264',
+            },
+            {
+                label: 'H.265',
+                onClick: () => setCodec('h265'),
+                leftItem: codec === 'h265' ? (0, jsx_runtime_1.jsx)(Checkmark_1.Checkmark, {}) : null,
+                id: 'h265',
+                keyHint: null,
+                quickSwitcherLabel: null,
+                subMenu: null,
+                type: 'item',
+                value: 'h265',
+            },
+            {
+                label: 'VP8',
+                onClick: () => setCodec('vp8'),
+                leftItem: codec === 'vp8' ? (0, jsx_runtime_1.jsx)(Checkmark_1.Checkmark, {}) : null,
+                id: 'vp8',
+                keyHint: null,
+                quickSwitcherLabel: null,
+                subMenu: null,
+                type: 'item',
+                value: 'vp8',
+            },
+            {
+                label: 'VP9',
+                onClick: () => setCodec('vp9'),
+                leftItem: codec === 'vp9' ? (0, jsx_runtime_1.jsx)(Checkmark_1.Checkmark, {}) : null,
+                id: 'vp9',
+                keyHint: null,
+                quickSwitcherLabel: null,
+                subMenu: null,
+                type: 'item',
+                value: 'vp9',
+            },
+            {
+                label: 'AV1',
+                onClick: () => setCodec('av1'),
+                leftItem: codec === 'av1' ? (0, jsx_runtime_1.jsx)(Checkmark_1.Checkmark, {}) : null,
+                id: 'av1',
+                keyHint: null,
+                quickSwitcherLabel: null,
+                subMenu: null,
+                type: 'item',
+                value: 'av1',
+            },
+        ];
+    }, [codec, setCodec]);
+    const onVerboseLoggingChanged = (0, react_1.useCallback)((e) => {
+        setLogLevel(e.target.checked ? 'verbose' : 'info');
+    }, [setLogLevel]);
+    return ((0, jsx_runtime_1.jsxs)("div", { style: tabContainer, children: [renderMode === 'still' ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("div", { style: layout_2.optionRow, children: [(0, jsx_runtime_1.jsx)("div", { style: layout_2.label, children: "Format" }), (0, jsx_runtime_1.jsx)("div", { style: layout_2.rightRow, children: (0, jsx_runtime_1.jsx)(SegmentedControl_1.SegmentedControl, { items: imageFormatOptions, needsWrapping: true }) })] }), resolvedComposition.durationInFrames > 1 ? ((0, jsx_runtime_1.jsxs)("div", { style: layout_2.optionRow, children: [(0, jsx_runtime_1.jsx)("div", { style: layout_2.label, children: "Frame" }), (0, jsx_runtime_1.jsx)("div", { style: layout_2.rightRow, children: (0, jsx_runtime_1.jsx)(RemInput_1.RightAlignInput, { children: (0, jsx_runtime_1.jsx)(InputDragger_1.InputDragger, { value: frame, onTextChange: onFrameChanged, placeholder: `0-${resolvedComposition.durationInFrames - 1}`, onValueChange: onFrameSetDirectly, name: "frame", step: 1, min: 0, status: "ok", max: resolvedComposition.durationInFrames - 1, rightAlign: true }) }) })] })) : null] })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("div", { style: layout_2.optionRow, children: [(0, jsx_runtime_1.jsx)("div", { style: layout_2.label, children: "Container" }), (0, jsx_runtime_1.jsx)("div", { style: layout_2.rightRow, children: (0, jsx_runtime_1.jsx)(ComboBox_1.Combobox, { values: containerOptions, selectedId: container, title: "Container" }) })] }), (0, jsx_runtime_1.jsxs)("div", { style: layout_2.optionRow, children: [(0, jsx_runtime_1.jsxs)("div", { style: layout_2.label, children: ["Codec", (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 0.5 }), (0, jsx_runtime_1.jsx)(OptionExplainerBubble_1.OptionExplainerBubble, { id: "videoCodecOption" })] }), (0, jsx_runtime_1.jsx)("div", { style: layout_2.rightRow, children: (0, jsx_runtime_1.jsx)(ComboBox_1.Combobox, { values: codecOptions, selectedId: codec, title: "Codec" }) })] }), (0, jsx_runtime_1.jsx)(FrameRangeSetting_1.FrameRangeSetting, { durationInFrames: resolvedComposition.durationInFrames, startFrame: startFrame !== null && startFrame !== void 0 ? startFrame : 0, endFrame: endFrame !== null && endFrame !== void 0 ? endFrame : resolvedComposition.durationInFrames - 1, setStartFrame: setStartFrame, setEndFrame: setEndFrame })] })), (0, jsx_runtime_1.jsx)(RenderModalOutputName_1.RenderModalOutputName, { existence: false, inputStyle: layout_2.input, outName: outName, onValueChange: onOutNameChange, validationMessage: validationMessage, label: "Download name" }), (0, jsx_runtime_1.jsxs)("div", { style: layout_2.optionRow, children: [(0, jsx_runtime_1.jsxs)("div", { style: layout_2.label, children: ["Verbose logging ", (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 0.5 }), (0, jsx_runtime_1.jsx)(OptionExplainerBubble_1.OptionExplainerBubble, { id: "logLevelOption" })] }), (0, jsx_runtime_1.jsx)("div", { style: layout_2.rightRow, children: (0, jsx_runtime_1.jsx)(Checkbox_1.Checkbox, { checked: logLevel === 'verbose', onChange: onVerboseLoggingChanged, name: "verbose-logging" }) })] })] }));
+};
+exports.WebRenderModalBasic = WebRenderModalBasic;

package/dist/components/RenderModal/WebRenderModalPicture.d.ts

@@ -0,0 +1,14 @@
+import type { WebRendererQuality } from '@remotion/web-renderer';
+import type React from 'react';
+import type { RenderType } from './WebRenderModal';
+type WebRenderModalPictureProps = {
+    readonly renderMode: RenderType;
+    readonly videoBitrate: WebRendererQuality;
+    readonly setVideoBitrate: (quality: WebRendererQuality) => void;
+    readonly keyframeIntervalInSeconds: number;
+    readonly setKeyframeIntervalInSeconds: React.Dispatch<React.SetStateAction<number>>;
+    readonly transparent: boolean;
+    readonly setTransparent: React.Dispatch<React.SetStateAction<boolean>>;
+};
+export declare const WebRenderModalPicture: React.FC<WebRenderModalPictureProps>;
+export {};

package/dist/components/RenderModal/WebRenderModalPicture.js

@@ -0,0 +1,82 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.WebRenderModalPicture = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const Checkmark_1 = require("../../icons/Checkmark");
+const Checkbox_1 = require("../Checkbox");
+const ComboBox_1 = require("../NewComposition/ComboBox");
+const layout_1 = require("./layout");
+const NumberSetting_1 = require("./NumberSetting");
+const tabContainer = {
+    flex: 1,
+};
+const WebRenderModalPicture = ({ renderMode, videoBitrate, setVideoBitrate, keyframeIntervalInSeconds, setKeyframeIntervalInSeconds, transparent, setTransparent, }) => {
+    const qualityOptions = (0, react_1.useMemo)(() => {
+        return [
+            {
+                label: 'Very Low',
+                onClick: () => setVideoBitrate('very-low'),
+                leftItem: videoBitrate === 'very-low' ? (0, jsx_runtime_1.jsx)(Checkmark_1.Checkmark, {}) : null,
+                id: 'very-low',
+                keyHint: null,
+                quickSwitcherLabel: null,
+                subMenu: null,
+                type: 'item',
+                value: 'very-low',
+            },
+            {
+                label: 'Low',
+                onClick: () => setVideoBitrate('low'),
+                leftItem: videoBitrate === 'low' ? (0, jsx_runtime_1.jsx)(Checkmark_1.Checkmark, {}) : null,
+                id: 'low',
+                keyHint: null,
+                quickSwitcherLabel: null,
+                subMenu: null,
+                type: 'item',
+                value: 'low',
+            },
+            {
+                label: 'Medium',
+                onClick: () => setVideoBitrate('medium'),
+                leftItem: videoBitrate === 'medium' ? (0, jsx_runtime_1.jsx)(Checkmark_1.Checkmark, {}) : null,
+                id: 'medium',
+                keyHint: null,
+                quickSwitcherLabel: null,
+                subMenu: null,
+                type: 'item',
+                value: 'medium',
+            },
+            {
+                label: 'High',
+                onClick: () => setVideoBitrate('high'),
+                leftItem: videoBitrate === 'high' ? (0, jsx_runtime_1.jsx)(Checkmark_1.Checkmark, {}) : null,
+                id: 'high',
+                keyHint: null,
+                quickSwitcherLabel: null,
+                subMenu: null,
+                type: 'item',
+                value: 'high',
+            },
+            {
+                label: 'Very High',
+                onClick: () => setVideoBitrate('very-high'),
+                leftItem: videoBitrate === 'very-high' ? (0, jsx_runtime_1.jsx)(Checkmark_1.Checkmark, {}) : null,
+                id: 'very-high',
+                keyHint: null,
+                quickSwitcherLabel: null,
+                subMenu: null,
+                type: 'item',
+                value: 'very-high',
+            },
+        ];
+    }, [videoBitrate, setVideoBitrate]);
+    const onTransparentChanged = (0, react_1.useCallback)((e) => {
+        setTransparent(e.target.checked);
+    }, [setTransparent]);
+    if (renderMode !== 'video') {
+        return null;
+    }
+    return ((0, jsx_runtime_1.jsxs)("div", { style: tabContainer, children: [(0, jsx_runtime_1.jsxs)("div", { style: layout_1.optionRow, children: [(0, jsx_runtime_1.jsx)("div", { style: layout_1.label, children: "Quality" }), (0, jsx_runtime_1.jsx)("div", { style: layout_1.rightRow, children: (0, jsx_runtime_1.jsx)(ComboBox_1.Combobox, { values: qualityOptions, selectedId: videoBitrate, title: "Quality" }) })] }), (0, jsx_runtime_1.jsx)(NumberSetting_1.NumberSetting, { name: "Keyframe Interval", formatter: (v) => `${v}s`, min: 1, max: 300, step: 1, value: keyframeIntervalInSeconds, onValueChanged: setKeyframeIntervalInSeconds }), (0, jsx_runtime_1.jsxs)("div", { style: layout_1.optionRow, children: [(0, jsx_runtime_1.jsx)("div", { style: layout_1.label, children: "Transparent" }), (0, jsx_runtime_1.jsx)("div", { style: layout_1.rightRow, children: (0, jsx_runtime_1.jsx)(Checkbox_1.Checkbox, { checked: transparent, onChange: onTransparentChanged, name: "transparent" }) })] })] }));
+};
+exports.WebRenderModalPicture = WebRenderModalPicture;

package/dist/components/RenderModal/layout.js

@@ -12,7 +12,7 @@ exports.optionRow = {
     paddingBottom: 8,
 };
 exports.label = {
-    width: 260,
+    width: 290,
     fontSize: 15,
     lineHeight: '40px',
     color: colors_1.LIGHT_TEXT,

package/dist/components/RenderModal/render-modals.d.ts

@@ -0,0 +1,11 @@
+import type React from 'react';
+export declare const outerModalStyle: React.CSSProperties;
+export declare const container: React.CSSProperties;
+export declare const optionsPanel: React.CSSProperties;
+export declare const horizontalLayout: React.CSSProperties;
+export declare const leftSidebar: React.CSSProperties;
+export declare const horizontalTab: React.CSSProperties;
+export declare const iconContainer: React.CSSProperties;
+export declare const icon: React.CSSProperties;
+export declare const buttonStyle: React.CSSProperties;
+export declare const flexer: React.CSSProperties;

package/dist/components/RenderModal/render-modals.js

@@ -0,0 +1,63 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.flexer = exports.buttonStyle = exports.icon = exports.iconContainer = exports.horizontalTab = exports.leftSidebar = exports.horizontalLayout = exports.optionsPanel = exports.container = exports.outerModalStyle = void 0;
+const colors_1 = require("../../helpers/colors");
+const ModalContainer_1 = require("../ModalContainer");
+exports.outerModalStyle = {
+    width: (0, ModalContainer_1.getMaxModalWidth)(1000),
+    height: (0, ModalContainer_1.getMaxModalHeight)(640),
+    overflow: 'hidden',
+    display: 'flex',
+    flexDirection: 'column',
+};
+exports.container = {
+    display: 'flex',
+    flexDirection: 'row',
+    alignItems: 'center',
+    padding: '12px 16px',
+    borderBottom: '1px solid black',
+};
+exports.optionsPanel = {
+    display: 'flex',
+    width: '100%',
+};
+exports.horizontalLayout = {
+    display: 'flex',
+    flexDirection: 'row',
+    overflowY: 'auto',
+    flex: 1,
+};
+exports.leftSidebar = {
+    padding: 12,
+};
+exports.horizontalTab = {
+    width: 250,
+    display: 'flex',
+    flexDirection: 'row',
+    alignItems: 'center',
+    textAlign: 'left',
+    fontSize: 16,
+    fontWeight: 'bold',
+    paddingLeft: 15,
+    paddingTop: 12,
+    paddingBottom: 12,
+};
+exports.iconContainer = {
+    width: 20,
+    height: 20,
+    marginRight: 15,
+    display: 'inline-flex',
+    justifyContent: 'center',
+    alignItems: 'center',
+};
+exports.icon = {
+    color: 'currentcolor',
+    height: 20,
+};
+exports.buttonStyle = {
+    backgroundColor: colors_1.BLUE,
+    color: 'white',
+};
+exports.flexer = {
+    flex: 1,
+};

package/dist/components/SidebarRenderButton.js

@@ -32,7 +32,7 @@ const SidebarRenderButton = ({ composition, visible }) => {
         }
         e.stopPropagation();
         setSelectedModal({
-            type: 'render',
+            type: 'server-render',
             compositionId: composition.id,
             initialFrame: 0,
             initialVideoImageFormat: defaults.videoImageFormat,

package/dist/components/WebRender/TriggerWebRender.d.ts

@@ -1 +1 @@
-export declare const TriggerWebRender: () => import("react/jsx-runtime").JSX.Element;
+export declare const TriggerWebRender: () => import("react/jsx-runtime").JSX.Element | null;

package/dist/components/WebRender/TriggerWebRender.js

@@ -2,40 +2,39 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.TriggerWebRender = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const web_renderer_1 = require("@remotion/web-renderer");
+const player_1 = require("@remotion/player");
 const react_1 = require("react");
 const remotion_1 = require("remotion");
+const modals_1 = require("../../state/modals");
 const Button_1 = require("../Button");
-const imperative_state_1 = require("../Timeline/imperative-state");
 const button = {
     paddingLeft: 7,
     paddingRight: 7,
     paddingTop: 7,
     paddingBottom: 7,
 };
+const label = {
+    fontSize: 14,
+};
 const TriggerWebRender = () => {
     const video = remotion_1.Internals.useVideo();
-    const frame = (0, imperative_state_1.getCurrentFrame)();
+    const getCurrentFrame = player_1.PlayerInternals.useFrameImperative();
+    const { setSelectedModal } = (0, react_1.useContext)(modals_1.ModalsContext);
     const onClick = (0, react_1.useCallback)(() => {
-        if (!video) {
-            throw new Error('No video found');
+        if (!(video === null || video === void 0 ? void 0 : video.id)) {
+            return null;
         }
-        (0, web_renderer_1.renderStillOnWeb)({
-            Component: video.component,
-            width: video.width,
-            height: video.height,
-            fps: video.fps,
-            durationInFrames: video.durationInFrames,
-            frame,
-        }).then((blob) => {
-            const url = URL.createObjectURL(blob);
-            const a = document.createElement('a');
-            a.href = url;
-            a.download = 'composed.png';
-            a.click();
-            URL.revokeObjectURL(url);
+        const frame = getCurrentFrame();
+        setSelectedModal({
+            type: 'web-render',
+            initialFrame: frame,
+            compositionId: video.id,
+            defaultProps: video.defaultProps,
         });
-    }, [video, frame]);
-    return ((0, jsx_runtime_1.jsx)(Button_1.Button, { id: "render-modal-button", onClick: onClick, buttonContainerStyle: button, disabled: false, children: (0, jsx_runtime_1.jsx)("span", { children: "Render" }) }));
+    }, [getCurrentFrame, setSelectedModal, video === null || video === void 0 ? void 0 : video.id, video === null || video === void 0 ? void 0 : video.defaultProps]);
+    if (!video) {
+        return null;
+    }
+    return ((0, jsx_runtime_1.jsx)(Button_1.Button, { onClick: onClick, buttonContainerStyle: button, disabled: false, children: (0, jsx_runtime_1.jsx)("span", { style: label, children: "Render on web" }) }));
 };
 exports.TriggerWebRender = TriggerWebRender;