@remotion/studio 4.0.340 → 4.0.344

package/.turbo/turbo-make.log

@@ -1,6 +1,6 @@
 
 
-> @remotion/studio@4.0.340 make /Users/jonathanburger/remotion/packages/studio
+> @remotion/studio@4.0.344 make /Users/jonathanburger/remotion/packages/studio
 > tsc -d && bun --env-file=../.env.bundle bundle.ts
 
-[81.53ms] Generated.
+[87.21ms] Generated.

package/.turbo/turbo-test.log

@@ -1,83 +1,86 @@
 
 $ bun test src
-bun test v1.2.19 (aad3abea)
+bun test v1.2.21 (7c45ed97)
 
 src/test/stringify-default-props.test.ts:
-✓ Should stringify default props correctly [6.65ms]
-✓ Should stringify default props correctly [0.64ms]
+✓ Should stringify default props correctly [3.36ms]
+✓ Should stringify default props correctly [4.46ms]
 
 src/test/sequenced-timeline.test.ts:
-✓ Should calculate sequences correctly [5.13ms]
+✓ Should calculate sequences correctly [5.59ms]
 
 src/test/create-zod-values.test.ts:
-✓ Should be able to create a string [0.62ms]
-✓ Should be able to create a number
-✓ Should be able to create an object
-✓ Should be able to create an array [0.23ms]
-✓ Should be able to create a union [0.11ms]
-✓ Zod literal [0.10ms]
-✓ Should be able to create a discriminated union [0.36ms]
-✓ Zod instanceof [0.07ms]
-✓ Zod intersection [0.12ms]
-✓ Zod tuples [0.12ms]
-✓ Zod record [0.07ms]
-✓ Zod map [0.11ms]
-✓ Zod lazy [0.08ms]
-✓ Zod set [0.04ms]
-✓ Zod function [0.10ms]
-✓ Zod undefined [0.05ms]
-✓ Zod null [0.29ms]
-✓ Zod enum [1.19ms]
-✓ Zod nativeEnum [0.21ms]
-✓ Zod optional [0.16ms]
-✓ Zod nullable [0.17ms]
-✓ Zod undefined [0.17ms]
-✓ Zod catch [0.16ms]
-✓ Zod promise [0.05ms]
-✓ Zod transform [0.14ms]
+✓ Should be able to create a string [1.68ms]
+✓ Should be able to create a number [0.66ms]
+✓ Should be able to create an object [0.43ms]
+✓ Should be able to create an array [0.57ms]
+✓ Should be able to create a union [0.40ms]
+✓ Zod literal [0.21ms]
+✓ Should be able to create a discriminated union [1.38ms]
+✓ Zod instanceof [0.57ms]
+✓ Zod intersection [0.82ms]
+✓ Zod tuples [1.28ms]
+✓ Zod record [0.38ms]
+✓ Zod map [0.27ms]
+✓ Zod lazy [0.46ms]
+✓ Zod set [0.26ms]
+✓ Zod function [0.51ms]
+✓ Zod undefined [0.20ms]
+✓ Zod null [0.19ms]
+✓ Zod enum [0.17ms]
+✓ Zod nativeEnum [0.20ms]
+✓ Zod optional [0.22ms]
+✓ Zod nullable [0.24ms]
+✓ Zod undefined [0.21ms]
+✓ Zod catch [0.27ms]
+✓ Zod promise [1.59ms]
+✓ Zod transform [0.25ms]
 ✓ Zod branded [0.15ms]
-✓ Zod lazy [0.32ms]
-✓ Zod coerce [0.10ms]
-✓ Zod strict [0.09ms]
-✓ Should create a color [0.03ms]
-✓ Should create a textarea [0.10ms]
+✓ Zod lazy [0.53ms]
+✓ Zod coerce [0.18ms]
+✓ Zod strict [0.28ms]
+✓ Should create a color [0.31ms]
+✓ Should create a textarea [0.17ms]
 
 src/test/folder-tree.test.ts:
-✓ Should create a good folder tree with 1 item inside and 1 item outside [0.30ms]
-✓ Should handle nested folders well [7.47ms]
-✓ Should throw if two folders with the same name [0.20ms]
+✓ Should create a good folder tree with 1 item inside and 1 item outside [1.15ms]
+✓ Should handle nested folders well [0.52ms]
+✓ Should throw if two folders with the same name [0.83ms]
 
 src/test/big-timeline.test.ts:
-✓ Should calculate timeline as expected [9.28ms]
+✓ Should calculate timeline as expected [8.07ms]
 
 src/test/smooth-zoom.test.ts:
-✓ Smoothen zoom
-✓ Unsmoothen zoom [0.05ms]
+✓ Smoothen zoom [0.15ms]
+✓ Unsmoothen zoom [0.08ms]
 
 src/test/validate-gui-output-filename.test.ts:
-✓ Should catch dot after slash [0.50ms]
-✓ Should catch dot in front  [0.04ms]
+✓ Should catch dot after slash [0.71ms]
+✓ Should catch dot in front  [0.06ms]
 
 src/test/timeline-sequence-layout.test.ts:
-✓ Should test timeline sequence layout without max media duration [0.22ms]
-✓ Should test timeline sequence layout with max media duration [0.04ms]
+✓ Should test timeline sequence layout without max media duration [0.50ms]
+✓ Should test timeline sequence layout with max media duration [0.05ms]
 
 src/test/extract-zod-enums.test.ts:
-✓ Extract Zod enums [0.38ms]
-✓ Extract Zod enums #2 [1.07ms]
+✓ Extract Zod enums [0.87ms]
+✓ Extract Zod enums #2 [2.15ms]
 
 src/test/color-math.test.ts:
-✓ Color math [0.40ms]
+✓ Color math [1.95ms]
 
 src/test/format-time.test.ts:
-✓ Format time [0.08ms]
+✓ Format time [0.10ms]
 
 src/test/timeline.test.ts:
-✓ Should calculate timeline with no sequences [0.03ms]
-✓ Should calculate a basic timeline [0.13ms]
-✓ Should follow order of nesting [0.18ms]
+✓ Should calculate timeline with no sequences
+✓ Should calculate a basic timeline [0.27ms]
+✓ Should follow order of nesting [0.17ms]
+
+src/test/disable-browser-rendering.test.ts:
+✓ should not show browser rendering [0.12ms]
 
- 51 pass
+ 52 pass
  0 fail
- 67 expect() calls
-Ran 51 tests across 12 files. [143.00ms]
+ 68 expect() calls
+Ran 52 tests across 13 files. [254.00ms]

package/LICENSE.md

@@ -6,10 +6,10 @@ In Remotion 5.0, the license will slightly change. [View the changes here](https
 
 Depending on the type of your legal entity, you are granted permission to use Remotion for your project. Individuals and small companies are allowed to use Remotion to create videos for free (even commercial), while a company license is required for for-profit organizations of a certain size. This two-tier system was designed to ensure funding for this project while still allowing the source code to be available and the program to be free for most. Read below for the exact terms of use.
 
-- [Free license](#free-license)
-- [Company license](#company-license)
+- [Free License](#free-license)
+- [Company License](#company-license)
 
-## Free license
+## Free License
 
 Copyright © 2025 [Remotion](https://www.remotion.dev)
 
@@ -24,7 +24,7 @@ You are eligible to use Remotion for free if you are:
 
 ### Allowed use cases
 
-Permission is hereby granted, free of charge, to any person eligible for the "Free license", to use the software non-commercially or commercially for the purpose of creating videos and images and to modify the software to their own liking, for the purpose of fulfilling their custom use case or to contribute bug fixes or improvements back to Remotion.
+Permission is hereby granted, free of charge, to any person eligible for the "Free License", to use the software non-commercially or commercially for the purpose of creating videos and images and to modify the software to their own liking, for the purpose of fulfilling their custom use case or to contribute bug fixes or improvements back to Remotion.
 
 ### Disallowed use cases
 
@@ -38,12 +38,12 @@ The software is provided "as is", without warranty of any kind, express or impli
 
 Support is provided on a best-we-can-do basis via GitHub Issues and Discord.
 
-## Company license
+## Company License
 
-You are required to obtain a company license to use Remotion if you are not within the group of entities eligible for a free license. This license will enable you to use Remotion for the allowed use cases specified in the free license, and give you access to prioritized support (read the [Support Policy](https://www.remotion.dev/docs/support)).
+You are required to obtain a Company License to use Remotion if you are not within the group of entities eligible for a Free License. This license will enable you to use Remotion for the allowed use cases specified in the Free License, and give you access to prioritized support (read the [Support Policy](https://www.remotion.dev/docs/support)).
 
 Visit [remotion.pro](https://www.remotion.pro/license) for pricing and to buy a license.
 
 ### FAQs
 
-Are you not sure whether you need a company license because of an edge case? Here are some [frequently asked questions](https://www.remotion.pro/faq).
+Are you not sure whether you need a Company License because of an edge case? Here are some [frequently asked questions](https://www.remotion.pro/faq).

package/dist/components/PreviewToolbar.js

@@ -8,6 +8,7 @@ const check_fullscreen_support_1 = require("../helpers/check-fullscreen-support"
 const colors_1 = require("../helpers/colors");
 const is_current_selected_still_1 = require("../helpers/is-current-selected-still");
 const mobile_layout_1 = require("../helpers/mobile-layout");
+const show_browser_rendering_1 = require("../helpers/show-browser-rendering");
 const timeline_layout_1 = require("../helpers/timeline-layout");
 const loop_1 = require("../state/loop");
 const CheckboardToggle_1 = require("./CheckboardToggle");
@@ -23,6 +24,7 @@ const RenderButton_1 = require("./RenderButton");
 const SizeSelector_1 = require("./SizeSelector");
 const TimelineZoomControls_1 = require("./Timeline/TimelineZoomControls");
 const TimelineInOutToggle_1 = require("./TimelineInOutToggle");
+const TriggerWebRender_1 = require("./WebRender/TriggerWebRender");
 const layout_1 = require("./layout");
 const container = {
     display: 'flex',
@@ -132,6 +134,6 @@ const PreviewToolbar = ({ readOnlyStudio, bufferStateDelayInMilliseconds }) => {
             };
         }
     });
-    return ((0, jsx_runtime_1.jsxs)("div", { ref: previewToolbarRef, style: isMobileLayout ? mobileContainer : container, className: "css-reset", children: [(0, jsx_runtime_1.jsx)("div", { ref: leftScrollIndicatorRef, style: scrollIndicatorLeft }), isMobileLayout ? null : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("div", { style: sideContainer, children: [(0, jsx_runtime_1.jsx)("div", { style: padding }), (0, jsx_runtime_1.jsx)(TimelineZoomControls_1.TimelineZoomControls, {})] }), (0, jsx_runtime_1.jsx)(layout_1.Flex, {}), (0, jsx_runtime_1.jsx)(SizeSelector_1.SizeSelector, {}), isStill || isVideoComposition ? ((0, jsx_runtime_1.jsx)(PlaybackRateSelector_1.PlaybackRateSelector, { setPlaybackRate: setPlaybackRate, playbackRate: playbackRate })) : null] })), isVideoComposition ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 2 }), (0, jsx_runtime_1.jsx)(PlayPause_1.PlayPause, { bufferStateDelayInMilliseconds: bufferStateDelayInMilliseconds, loop: loop, playbackRate: playbackRate }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 2 }), (0, jsx_runtime_1.jsx)(LoopToggle_1.LoopToggle, { loop: loop, setLoop: setLoop }), (0, jsx_runtime_1.jsx)(MuteToggle_1.MuteToggle, { muted: mediaMuted, setMuted: setMediaMuted }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 2 }), (0, jsx_runtime_1.jsx)(TimelineInOutToggle_1.TimelineInOutPointToggle, {}), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 2 })] })) : null, (0, jsx_runtime_1.jsx)(CheckboardToggle_1.CheckboardToggle, {}), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 1 }), isFullscreenSupported && (0, jsx_runtime_1.jsx)(FullscreenToggle_1.FullScreenToggle, {}), (0, jsx_runtime_1.jsx)(layout_1.Flex, {}), isMobileLayout && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(layout_1.Flex, {}), (0, jsx_runtime_1.jsx)(SizeSelector_1.SizeSelector, {}), isStill || isVideoComposition ? ((0, jsx_runtime_1.jsx)(PlaybackRateSelector_1.PlaybackRateSelector, { setPlaybackRate: setPlaybackRate, playbackRate: playbackRate })) : null] })), (0, jsx_runtime_1.jsxs)("div", { style: sideContainer, children: [(0, jsx_runtime_1.jsx)(layout_1.Flex, {}), !isMobileLayout && (0, jsx_runtime_1.jsx)(FpsCounter_1.FpsCounter, { playbackSpeed: playbackRate }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 2 }), readOnlyStudio ? null : (0, jsx_runtime_1.jsx)(RenderButton_1.RenderButton, {}), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 1.5 })] }), (0, jsx_runtime_1.jsx)(PlaybackKeyboardShortcutsManager_1.PlaybackKeyboardShortcutsManager, { setPlaybackRate: setPlaybackRate }), (0, jsx_runtime_1.jsx)(PlaybackRatePersistor_1.PlaybackRatePersistor, {}), (0, jsx_runtime_1.jsx)("div", { ref: rightScrollIndicatorRef, style: scrollIndicatorRight })] }));
+    return ((0, jsx_runtime_1.jsxs)("div", { ref: previewToolbarRef, style: isMobileLayout ? mobileContainer : container, className: "css-reset", children: [(0, jsx_runtime_1.jsx)("div", { ref: leftScrollIndicatorRef, style: scrollIndicatorLeft }), isMobileLayout ? null : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("div", { style: sideContainer, children: [(0, jsx_runtime_1.jsx)("div", { style: padding }), (0, jsx_runtime_1.jsx)(TimelineZoomControls_1.TimelineZoomControls, {})] }), (0, jsx_runtime_1.jsx)(layout_1.Flex, {}), (0, jsx_runtime_1.jsx)(SizeSelector_1.SizeSelector, {}), isStill || isVideoComposition ? ((0, jsx_runtime_1.jsx)(PlaybackRateSelector_1.PlaybackRateSelector, { setPlaybackRate: setPlaybackRate, playbackRate: playbackRate })) : null] })), isVideoComposition ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 2 }), (0, jsx_runtime_1.jsx)(PlayPause_1.PlayPause, { bufferStateDelayInMilliseconds: bufferStateDelayInMilliseconds, loop: loop, playbackRate: playbackRate }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 2 }), (0, jsx_runtime_1.jsx)(LoopToggle_1.LoopToggle, { loop: loop, setLoop: setLoop }), (0, jsx_runtime_1.jsx)(MuteToggle_1.MuteToggle, { muted: mediaMuted, setMuted: setMediaMuted }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 2 }), (0, jsx_runtime_1.jsx)(TimelineInOutToggle_1.TimelineInOutPointToggle, {}), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 2 })] })) : null, (0, jsx_runtime_1.jsx)(CheckboardToggle_1.CheckboardToggle, {}), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 1 }), isFullscreenSupported && (0, jsx_runtime_1.jsx)(FullscreenToggle_1.FullScreenToggle, {}), (0, jsx_runtime_1.jsx)(layout_1.Flex, {}), isMobileLayout && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(layout_1.Flex, {}), (0, jsx_runtime_1.jsx)(SizeSelector_1.SizeSelector, {}), isStill || isVideoComposition ? ((0, jsx_runtime_1.jsx)(PlaybackRateSelector_1.PlaybackRateSelector, { setPlaybackRate: setPlaybackRate, playbackRate: playbackRate })) : null] })), (0, jsx_runtime_1.jsxs)("div", { style: sideContainer, children: [(0, jsx_runtime_1.jsx)(layout_1.Flex, {}), !isMobileLayout && (0, jsx_runtime_1.jsx)(FpsCounter_1.FpsCounter, { playbackSpeed: playbackRate }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 2 }), show_browser_rendering_1.SHOW_BROWSER_RENDERING ? (0, jsx_runtime_1.jsx)(TriggerWebRender_1.TriggerWebRender, {}) : null, readOnlyStudio ? null : (0, jsx_runtime_1.jsx)(RenderButton_1.RenderButton, {}), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 1.5 })] }), (0, jsx_runtime_1.jsx)(PlaybackKeyboardShortcutsManager_1.PlaybackKeyboardShortcutsManager, { setPlaybackRate: setPlaybackRate }), (0, jsx_runtime_1.jsx)(PlaybackRatePersistor_1.PlaybackRatePersistor, {}), (0, jsx_runtime_1.jsx)("div", { ref: rightScrollIndicatorRef, style: scrollIndicatorRight })] }));
 };
 exports.PreviewToolbar = PreviewToolbar;

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

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

package/dist/components/WebRender/TriggerWebRender.js

@@ -0,0 +1,31 @@
+"use strict";
+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 react_1 = require("react");
+const remotion_1 = require("remotion");
+const Button_1 = require("../Button");
+const button = {
+    paddingLeft: 7,
+    paddingRight: 7,
+    paddingTop: 7,
+    paddingBottom: 7,
+};
+const TriggerWebRender = () => {
+    const video = remotion_1.Internals.useVideo();
+    const onClick = (0, react_1.useCallback)(() => {
+        if (!video) {
+            throw new Error('No video found');
+        }
+        (0, web_renderer_1.renderMediaOnWeb)({
+            Component: video.component,
+            width: video.width,
+            height: video.height,
+            fps: video.fps,
+            durationInFrames: video.durationInFrames,
+        });
+    }, [video]);
+    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" }) }));
+};
+exports.TriggerWebRender = TriggerWebRender;