@remotion/studio 4.0.396 → 4.0.398

package/dist/esm/renderEntry.mjs

@@ -206,7 +206,7 @@ var renderContent = (Root) => {
     renderToDOM(/* @__PURE__ */ jsx("div", {
       children: /* @__PURE__ */ jsx(DelayedSpinner, {})
     }));
-    import("./chunk-khjn7st6.js").then(({ StudioInternals }) => {
+    import("./chunk-qrhc345b.js").then(({ StudioInternals }) => {
       window.remotion_isStudio = true;
       window.remotion_isReadOnlyStudio = true;
       window.remotion_inputProps = "{}";

package/dist/helpers/inject-css.js

@@ -90,7 +90,6 @@ const makeDefaultGlobalCSS = () => {
       inset -1px -1px #555,
       inset 1px -1px #555,
       inset -1px 1px #555;
-    border-radius: 0 !important;
   }
   
   input[type='color'].__remotion_color_picker::-webkit-color-swatch-wrapper {

package/dist/helpers/should-show-render-button.d.ts

@@ -0,0 +1 @@
+export declare const shouldShowRenderButton: (readOnlyStudio: boolean) => boolean;

package/dist/helpers/should-show-render-button.js

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.shouldShowRenderButton = void 0;
+const show_browser_rendering_1 = require("./show-browser-rendering");
+const shouldShowRenderButton = (readOnlyStudio) => {
+    if (readOnlyStudio) {
+        return show_browser_rendering_1.SHOW_BROWSER_RENDERING;
+    }
+    return true;
+};
+exports.shouldShowRenderButton = shouldShowRenderButton;

package/dist/helpers/use-menu-structure.js

@@ -26,6 +26,7 @@ const get_git_menu_item_1 = require("./get-git-menu-item");
 const mobile_layout_1 = require("./mobile-layout");
 const open_in_editor_1 = require("./open-in-editor");
 const pick_color_1 = require("./pick-color");
+const show_browser_rendering_1 = require("./show-browser-rendering");
 const use_keybinding_1 = require("./use-keybinding");
 const openExternal = (link) => {
     window.open(link, '_blank');
@@ -66,7 +67,7 @@ const getFileMenu = ({ readOnlyStudio, closeMenu, previewServerState, setSelecte
                         (0, NotificationCenter_1.showNotification)('Restart the studio to render', 2000);
                         return;
                     }
-                    const renderButton = document.getElementById('render-modal-button');
+                    const renderButton = document.getElementById('render-modal-button-server');
                     renderButton.click();
                 },
                 type: 'item',
@@ -75,6 +76,23 @@ const getFileMenu = ({ readOnlyStudio, closeMenu, previewServerState, setSelecte
                 subMenu: null,
                 quickSwitcherLabel: 'Render...',
             },
+        show_browser_rendering_1.SHOW_BROWSER_RENDERING && !readOnlyStudio
+            ? {
+                id: 'render-on-web',
+                value: 'render-on-web',
+                label: 'Render on web...',
+                onClick: () => {
+                    closeMenu();
+                    const renderButton = document.getElementById('render-modal-button-client');
+                    renderButton.click();
+                },
+                type: 'item',
+                keyHint: null,
+                leftItem: null,
+                subMenu: null,
+                quickSwitcherLabel: 'Render on web...',
+            }
+            : null,
         window.remotion_editorName && !readOnlyStudio
             ? {
                 type: 'divider',

package/dist/icons/certificate.d.ts

@@ -0,0 +1 @@
+export declare const CertificateIcon: (props: React.SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element;

package/dist/icons/certificate.js

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CertificateIcon = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const CertificateIcon = (props) => ((0, jsx_runtime_1.jsx)("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 576 512", ...props, children: (0, jsx_runtime_1.jsx)("path", { fill: "currentcolor", d: "M192 32l128 0 0 96c0 35.3 28.7 64 64 64l96 0 0 256c0 17.7-14.3 32-32 32l-192 0 0 32 192 0c35.3 0 64-28.7 64-64l0-261.5c0-17-6.7-33.3-18.7-45.3L370.7 18.7C358.7 6.7 342.5 0 325.5 0L192 0c-35.3 0-64 28.7-64 64l0 80c10.9 0 21.6 1 32 2.9L160 64c0-17.7 14.3-32 32-32zM352 45.3L466.7 160 384 160c-17.7 0-32-14.3-32-32l0-82.7zM32 320a96 96 0 1 1 192 0 96 96 0 1 1 -192 0zM176 438.7l0 66.3-40.1-22.9c-4.9-2.8-11-2.8-15.9 0L80 505 80 438.7c14.8 6 31 9.3 48 9.3s33.2-3.3 48-9.3zm32-18.8c29.3-23.5 48-59.5 48-99.9 0-70.7-57.3-128-128-128S0 249.3 0 320c0 40.4 18.7 76.5 48 99.9l0 101.8c0 12.3 10 22.3 22.3 22.3 3.9 0 7.7-1 11.1-2.9l46.6-26.6 46.6 26.6c3.4 1.9 7.2 2.9 11.1 2.9 12.3 0 22.3-10 22.3-22.3l0-101.8zM128 344a24 24 0 1 1 0-48 24 24 0 1 1 0 48zm0-80a56 56 0 1 0 0 112 56 56 0 1 0 0-112z" }) }));
+exports.CertificateIcon = CertificateIcon;

package/dist/icons/render.d.ts

@@ -1,8 +1,5 @@
 import type { SVGProps } from 'react';
 import React from 'react';
-export declare const RenderIcon: React.FC<{
-    readonly svgProps: SVGProps<SVGSVGElement>;
-}>;
 export declare const ThinRenderIcon: React.FC<{
     readonly svgProps: SVGProps<SVGSVGElement>;
     readonly fill: string;

package/dist/icons/render.js

@@ -1,11 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.ThinRenderIcon = exports.RenderIcon = void 0;
+exports.ThinRenderIcon = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const RenderIcon = (props) => {
-    return ((0, jsx_runtime_1.jsx)("svg", { ...props.svgProps, xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 512 512", children: (0, jsx_runtime_1.jsx)("path", { fill: 'currentColor', d: "M156.6 384.9L125.7 354c-8.5-8.5-11.5-20.8-7.7-32.2c3-8.9 7-20.5 11.8-33.8L24 288c-8.6 0-16.6-4.6-20.9-12.1s-4.2-16.7 .2-24.1l52.5-88.5c13-21.9 36.5-35.3 61.9-35.3l82.3 0c2.4-4 4.8-7.7 7.2-11.3C289.1-4.1 411.1-8.1 483.9 5.3c11.6 2.1 20.6 11.2 22.8 22.8c13.4 72.9 9.3 194.8-111.4 276.7c-3.5 2.4-7.3 4.8-11.3 7.2v82.3c0 25.4-13.4 49-35.3 61.9l-88.5 52.5c-7.4 4.4-16.6 4.5-24.1 .2s-12.1-12.2-12.1-20.9V380.8c-14.1 4.9-26.4 8.9-35.7 11.9c-11.2 3.6-23.4 .5-31.8-7.8zM384 168a40 40 0 1 0 0-80 40 40 0 1 0 0 80z" }) }));
-};
-exports.RenderIcon = RenderIcon;
 const ThinRenderIcon = (props) => {
     return ((0, jsx_runtime_1.jsx)("svg", { ...props.svgProps, xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 512 512", children: (0, jsx_runtime_1.jsx)("path", { fill: props.fill, d: "M188.9 372l-50.4-50.4c18.6-42.6 61.7-137.7 95.1-187C304.6 30.1 409 24.6 475.7 36.3c11.7 66.7 6.2 171.1-98.4 242c-49.4 33.5-145.5 75.6-188.4 93.7zm-79.9-62.8c-5.2 11.9-2.5 25.7 6.7 34.9l50.7 50.7c9.1 9.1 22.7 11.9 34.5 6.9c6.5-2.7 14.3-6 23-9.8L224 496c0 5.5 2.9 10.7 7.6 13.6s10.6 3.2 15.6 .7l101.5-50.7c21.7-10.8 35.4-33 35.4-57.2V312.1c4-2.5 7.7-4.9 11.3-7.3C516.1 222.9 520.1 100.9 506.7 28.1c-2.1-11.6-11.2-20.6-22.8-22.8C411.1-8.1 289.1-4.1 207.2 116.7c-2.4 3.6-4.9 7.3-7.3 11.3l-90.2 0c-24.2 0-46.4 13.7-57.2 35.4L1.7 264.8c-2.5 5-2.2 10.8 .7 15.6s8.1 7.6 13.6 7.6H118.5c-3.6 8-6.8 15.2-9.4 21.2zM256 470.1l0-92.5c30.3-13.7 65.4-30.3 96-47v71.7c0 12.1-6.8 23.2-17.7 28.6L256 470.1zM109.7 160h71.5c-16.9 30.7-34 65.8-48.1 96H41.9L81 177.7c5.4-10.8 16.5-17.7 28.6-17.7zM392 144a24 24 0 1 1 -48 0 24 24 0 1 1 48 0zM368 88a56 56 0 1 0 0 112 56 56 0 1 0 0-112z" }) }));
 };

package/dist/state/modals.d.ts

@@ -15,6 +15,7 @@ export type WebRenderModalState = {
     inFrameMark: number | null;
     outFrameMark: number | null;
     initialLogLevel: LogLevel;
+    initialLicenseKey: string | null;
 };
 export type RenderModalState = {
     type: 'server-render';

package/package.json

@@ -3,7 +3,7 @@
 		"url": "https://github.com/remotion-dev/remotion/tree/main/packages/studio"
 	},
 	"name": "@remotion/studio",
-	"version": "4.0.396",
+	"version": "4.0.398",
 	"description": "APIs for interacting with the Remotion Studio",
 	"main": "dist",
 	"sideEffects": false,
@@ -25,13 +25,13 @@
 	},
 	"dependencies": {
 		"semver": "7.5.3",
-		"remotion": "4.0.396",
-		"@remotion/player": "4.0.396",
-		"@remotion/media-utils": "4.0.396",
-		"@remotion/renderer": "4.0.396",
-		"@remotion/web-renderer": "4.0.396",
-		"@remotion/studio-shared": "4.0.396",
-		"@remotion/zod-types": "4.0.396",
+		"remotion": "4.0.398",
+		"@remotion/player": "4.0.398",
+		"@remotion/media-utils": "4.0.398",
+		"@remotion/renderer": "4.0.398",
+		"@remotion/web-renderer": "4.0.398",
+		"@remotion/studio-shared": "4.0.398",
+		"@remotion/zod-types": "4.0.398",
 		"mediabunny": "1.27.2",
 		"memfs": "3.4.3",
 		"source-map": "0.7.3",
@@ -42,7 +42,7 @@
 		"react": "19.2.3",
 		"react-dom": "19.2.3",
 		"@types/semver": "^7.3.4",
-		"@remotion/eslint-config-internal": "4.0.396",
+		"@remotion/eslint-config-internal": "4.0.398",
 		"eslint": "9.19.0"
 	},
 	"publishConfig": {

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

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

package/dist/components/WebRender/TriggerWebRender.js

@@ -1,56 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.TriggerWebRender = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const player_1 = require("@remotion/player");
-const react_1 = require("react");
-const remotion_1 = require("remotion");
-const in_out_1 = require("../../state/in-out");
-const modals_1 = require("../../state/modals");
-const Button_1 = require("../Button");
-const button = {
-    paddingLeft: 7,
-    paddingRight: 7,
-    paddingTop: 7,
-    paddingBottom: 7,
-};
-const label = {
-    fontSize: 14,
-};
-const TriggerWebRender = () => {
-    const video = remotion_1.Internals.useVideo();
-    const getCurrentFrame = player_1.PlayerInternals.useFrameImperative();
-    const { inFrame, outFrame } = (0, in_out_1.useTimelineInOutFramePosition)();
-    const { setSelectedModal } = (0, react_1.useContext)(modals_1.ModalsContext);
-    const onClick = (0, react_1.useCallback)(() => {
-        if (!(video === null || video === void 0 ? void 0 : video.id)) {
-            return null;
-        }
-        const defaults = window.remotion_renderDefaults;
-        if (!defaults) {
-            throw new TypeError('Expected defaults');
-        }
-        const frame = getCurrentFrame();
-        setSelectedModal({
-            type: 'web-render',
-            initialFrame: frame,
-            compositionId: video.id,
-            defaultProps: video.defaultProps,
-            inFrameMark: inFrame,
-            outFrameMark: outFrame,
-            initialLogLevel: defaults.logLevel,
-        });
-    }, [
-        getCurrentFrame,
-        inFrame,
-        outFrame,
-        setSelectedModal,
-        video === null || video === void 0 ? void 0 : video.defaultProps,
-        video === null || video === void 0 ? void 0 : video.id,
-    ]);
-    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;