@remotion/studio 4.0.216 → 4.0.218

package/.turbo/turbo-make.log

@@ -1,4 +1,4 @@
 
-> @remotion/studio@4.0.215 make /Users/jonathanburger/remotion/packages/studio
+> @remotion/studio@4.0.217 make /Users/jonathanburger/remotion/packages/studio
 > bun --env-file=../.env.bundle bundle.ts
 

package/.turbo/turbo-test.log

@@ -0,0 +1,85 @@
+
+> @remotion/studio@4.0.217 test /Users/jonathanburger/remotion/packages/studio
+> bun test src
+
+bun test v1.1.29 (6d43b366)
+
+src/test/stringify-default-props.test.ts:
+✓ Should stringify default props correctly [1.05ms]
+✓ Should stringify default props correctly [0.79ms]
+
+src/test/sequenced-timeline.test.ts:
+✓ Should calculate sequences correctly [3.04ms]
+
+src/test/create-zod-values.test.ts:
+✓ Should be able to create a string [2.51ms]
+✓ Should be able to create a number [0.12ms]
+✓ Should be able to create an object [0.10ms]
+✓ Should be able to create an array [0.08ms]
+✓ Should be able to create a union [0.09ms]
+✓ Zod literal [0.05ms]
+✓ Should be able to create a discriminated union [0.50ms]
+✓ Zod instanceof [0.11ms]
+✓ Zod intersection [0.19ms]
+✓ Zod tuples [0.11ms]
+✓ Zod record [0.10ms]
+✓ Zod map [0.09ms]
+✓ Zod lazy [0.05ms]
+✓ Zod set [0.12ms]
+✓ Zod function [0.14ms]
+✓ Zod undefined [0.05ms]
+✓ Zod null [0.10ms]
+✓ Zod enum [0.08ms]
+✓ Zod nativeEnum [0.11ms]
+✓ Zod optional [0.08ms]
+✓ Zod nullable [0.07ms]
+✓ Zod undefined [0.07ms]
+✓ Zod catch [0.07ms]
+✓ Zod promise [0.08ms]
+✓ Zod transform [0.11ms]
+✓ Zod branded [0.08ms]
+✓ Zod lazy [0.15ms]
+✓ Zod coerce [0.06ms]
+✓ Zod strict [0.08ms]
+✓ Should create a color [0.07ms]
+✓ Should create a textarea [0.04ms]
+
+src/test/folder-tree.test.ts:
+✓ Should create a good folder tree with 1 item inside and 1 item outside [0.18ms]
+✓ Should handle nested folders well [0.14ms]
+✓ Should throw if two folders with the same name [0.10ms]
+
+src/test/big-timeline.test.ts:
+✓ Should calculate timeline as expected [1.67ms]
+
+src/test/smooth-zoom.test.ts:
+✓ Smoothen zoom
+✓ Unsmoothen zoom [0.03ms]
+
+src/test/validate-gui-output-filename.test.ts:
+✓ Should catch dot after slash [2.26ms]
+✓ Should catch dot in front  [0.02ms]
+
+src/test/timeline-sequence-layout.test.ts:
+✓ Should test timeline sequence layout without max media duration [0.10ms]
+✓ Should test timeline sequence layout with max media duration [0.04ms]
+
+src/test/extract-zod-enums.test.ts:
+✓ Extract Zod enums [0.12ms]
+✓ Extract Zod enums #2 [0.40ms]
+
+src/test/color-math.test.ts:
+✓ Color math [0.23ms]
+
+src/test/format-time.test.ts:
+✓ Format time [0.02ms]
+
+src/test/timeline.test.ts:
+✓ Should calculate timeline with no sequences [0.03ms]
+✓ Should calculate a basic timeline [0.06ms]
+✓ Should follow order of nesting [0.07ms]
+
+ 51 pass
+ 0 fail
+ 67 expect() calls
+Ran 51 tests across 12 files. [68.00ms]

package/bundle.ts

@@ -30,6 +30,8 @@ const internalsModule = await build({
 		'@remotion/renderer',
 		'@remotion/player',
 		'@remotion/renderer/client',
+		'@remotion/renderer/pure',
+		'@remotion/renderer/error-handling',
 		'source-map',
 		'zod',
 		'remotion/no-react',
@@ -40,6 +42,7 @@ const [enableFile] = internalsModule.outputs;
 const internalsText = (await enableFile.text())
 	.replace(/jsxDEV/g, 'jsx')
 	.replace(/@remotion\/renderer\/client/g, '@remotion/renderer/client.js')
+	.replace(/@remotion\/renderer\/pure/g, '@remotion/renderer/pure.js')
 	.replace(/react\/jsx-dev-runtime/g, 'react/jsx-runtime');
 
 await Bun.write('dist/esm/internals.mjs', internalsText);

package/dist/components/InstallPackage.js

@@ -75,6 +75,8 @@ const InstallPackageModal = ({ packageManager }) => {
         '@remotion/three': false,
         '@remotion/transitions': false,
         '@remotion/zod-types': false,
+        '@remotion/captions': false,
+        '@remotion/openai-whisper': false,
     });
     const { previewServerState: ctx } = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx);
     const selectedPackages = Object.keys(map).filter((pkg) => map[pkg]);

package/dist/components/LoopToggle.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
 export declare const LoopToggle: React.FC<{
-    loop: boolean;
-    setLoop: React.Dispatch<React.SetStateAction<boolean>>;
+    readonly loop: boolean;
+    readonly setLoop: React.Dispatch<React.SetStateAction<boolean>>;
 }>;

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

@@ -12,6 +12,6 @@ export declare const getInputBorderColor: ({ status, isFocused, isHovered, }: {
     status: "error" | "warning" | "ok";
     isFocused: boolean;
     isHovered: boolean;
-}) => "#ff3232" | "hsla(0, 0%, 100%, 0.15)" | "#f1c40f" | "rgba(0, 0, 0, 0.6)" | "rgba(255, 255, 255, 0.05)";
+}) => "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<Omit<Props, "ref"> & React.RefAttributes<HTMLInputElement>>;
 export {};

package/dist/components/RenderModal/RenderModalBasic.js

@@ -3,6 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.RenderModalBasic = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const client_1 = require("@remotion/renderer/client");
+const pure_1 = require("@remotion/renderer/pure");
 const react_1 = require("react");
 const prores_labels_1 = require("../../helpers/prores-labels");
 const use_file_existence_1 = require("../../helpers/use-file-existence");
@@ -25,7 +26,7 @@ const RenderModalBasic = ({ renderMode, imageFormatOptions, outName, codec, setV
     const videoCodecOptions = (0, react_1.useMemo)(() => {
         return client_1.BrowserSafeApis.validCodecs
             .filter((c) => {
-            return client_1.BrowserSafeApis.isAudioCodec(c) === (renderMode === 'audio');
+            return pure_1.NoReactAPIs.isAudioCodec(c) === (renderMode === 'audio');
         })
             .map((codecOption) => {
             return {

package/dist/components/RenderModal/get-default-codecs.js

@@ -2,6 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.getDefaultCodecs = void 0;
 const client_1 = require("@remotion/renderer/client");
+const pure_1 = require("@remotion/renderer/pure");
 const getDefaultCodecs = ({ defaultConfigurationVideoCodec, compositionDefaultVideoCodec, renderType, defaultConfigurationAudioCodec, }) => {
     var _a;
     const userPreferredVideoCodec = (_a = compositionDefaultVideoCodec !== null && compositionDefaultVideoCodec !== void 0 ? compositionDefaultVideoCodec : defaultConfigurationVideoCodec) !== null && _a !== void 0 ? _a : 'h264';
@@ -16,14 +17,14 @@ const getDefaultCodecs = ({ defaultConfigurationVideoCodec, compositionDefaultVi
                     : defaultConfigurationAudioCodec === 'mp3'
                         ? 'mp3'
                         : 'aac';
-    const isVideoCodecAnAudioCodec = client_1.BrowserSafeApis.isAudioCodec(userPreferredVideoCodec);
+    const isVideoCodecAnAudioCodec = pure_1.NoReactAPIs.isAudioCodec(userPreferredVideoCodec);
     if (isVideoCodecAnAudioCodec) {
         return {
             initialAudioCodec: userPreferredVideoCodec,
             initialRenderType: 'audio',
             initialVideoCodec: userPreferredVideoCodec,
             initialVideoCodecForAudioTab: userPreferredVideoCodecForAudioTab,
-            initialVideoCodecForVideoTab: client_1.BrowserSafeApis.isAudioCodec(defaultConfigurationVideoCodec)
+            initialVideoCodecForVideoTab: pure_1.NoReactAPIs.isAudioCodec(defaultConfigurationVideoCodec)
                 ? 'h264'
                 : defaultConfigurationVideoCodec,
         };

package/dist/esm/internals.mjs

@@ -6727,7 +6727,7 @@ var useMenuStructure = (closeMenu, readOnlyStudio) => {
             label: "YouTube",
             onClick: () => {
               closeMenu();
-              openExternal("https://www.youtube/@remotion_dev");
+              openExternal("https://www.youtube.com/@remotion_dev");
             },
             type: "item",
             keyHint: null,
@@ -19782,7 +19782,9 @@ var InstallPackageModal = ({ packageManager }) => {
     "@remotion/tailwind": false,
     "@remotion/three": false,
     "@remotion/transitions": false,
-    "@remotion/zod-types": false
+    "@remotion/zod-types": false,
+    "@remotion/captions": false,
+    "@remotion/openai-whisper": false
   });
   const { previewServerState: ctx } = useContext67(StudioServerConnectionCtx);
   const selectedPackages = Object.keys(map).filter((pkg) => map[pkg]);
@@ -23867,6 +23869,7 @@ var RenderModalAudio = ({
 
 // src/components/RenderModal/RenderModalBasic.tsx
 import { BrowserSafeApis as BrowserSafeApis6 } from "@remotion/renderer/client.js";
+import { NoReactAPIs } from "@remotion/renderer/pure.js";
 import { useCallback as useCallback112, useMemo as useMemo114 } from "react";
 
 // src/helpers/prores-labels.ts
@@ -24086,7 +24089,7 @@ var RenderModalBasic = ({
   const existence = useFileExistence(outName);
   const videoCodecOptions = useMemo114(() => {
     return BrowserSafeApis6.validCodecs.filter((c) => {
-      return BrowserSafeApis6.isAudioCodec(c) === (renderMode === "audio");
+      return NoReactAPIs.isAudioCodec(c) === (renderMode === "audio");
     }).map((codecOption) => {
       return {
         label: humanReadableCodec(codecOption),
@@ -24694,6 +24697,7 @@ var RenderModalPicture = ({
 
 // src/components/RenderModal/get-default-codecs.ts
 import { BrowserSafeApis as BrowserSafeApis8 } from "@remotion/renderer/client.js";
+import { NoReactAPIs as NoReactAPIs2 } from "@remotion/renderer/pure.js";
 var getDefaultCodecs = ({
   defaultConfigurationVideoCodec,
   compositionDefaultVideoCodec,
@@ -24702,14 +24706,14 @@ var getDefaultCodecs = ({
 }) => {
   const userPreferredVideoCodec = compositionDefaultVideoCodec ?? defaultConfigurationVideoCodec ?? "h264";
   const userPreferredVideoCodecForAudioTab = userPreferredVideoCodec === "aac" ? "aac" : userPreferredVideoCodec === "mp3" ? "mp3" : userPreferredVideoCodec === "wav" ? "wav" : defaultConfigurationAudioCodec === "pcm-16" ? "wav" : defaultConfigurationAudioCodec === "mp3" ? "mp3" : "aac";
-  const isVideoCodecAnAudioCodec = BrowserSafeApis8.isAudioCodec(userPreferredVideoCodec);
+  const isVideoCodecAnAudioCodec = NoReactAPIs2.isAudioCodec(userPreferredVideoCodec);
   if (isVideoCodecAnAudioCodec) {
     return {
       initialAudioCodec: userPreferredVideoCodec,
       initialRenderType: "audio",
       initialVideoCodec: userPreferredVideoCodec,
       initialVideoCodecForAudioTab: userPreferredVideoCodecForAudioTab,
-      initialVideoCodecForVideoTab: BrowserSafeApis8.isAudioCodec(defaultConfigurationVideoCodec) ? "h264" : defaultConfigurationVideoCodec
+      initialVideoCodecForVideoTab: NoReactAPIs2.isAudioCodec(defaultConfigurationVideoCodec) ? "h264" : defaultConfigurationVideoCodec
     };
   }
   const suitableAudioCodecForVideoCodec = BrowserSafeApis8.defaultAudioCodecs[userPreferredVideoCodec].compressed;

package/dist/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/helpers/colors.d.ts

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

package/dist/helpers/presets-labels.d.ts

@@ -1,2 +1,2 @@
 import type { X264Preset } from '@remotion/renderer';
-export declare const labelx264Preset: (profile: X264Preset) => "ultrafast" | "superfast" | "veryfast" | "faster" | "fast" | "medium" | "slow" | "slower" | "veryslow" | "placebo";
+export declare const labelx264Preset: (profile: X264Preset) => "medium" | "ultrafast" | "superfast" | "veryfast" | "faster" | "fast" | "slow" | "slower" | "veryslow" | "placebo";

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

@@ -707,7 +707,7 @@ const useMenuStructure = (closeMenu, readOnlyStudio) => {
                         label: 'YouTube',
                         onClick: () => {
                             closeMenu();
-                            openExternal('https://www.youtube/@remotion_dev');
+                            openExternal('https://www.youtube.com/@remotion_dev');
                         },
                         type: 'item',
                         keyHint: null,

package/package.json

@@ -3,7 +3,7 @@
     "url": "https://github.com/remotion-dev/remotion/tree/main/packages/studio"
   },
   "name": "@remotion/studio",
-  "version": "4.0.216",
+  "version": "4.0.218",
   "description": "APIs for interacting with the Remotion Studio",
   "main": "dist",
   "sideEffects": false,
@@ -18,18 +18,18 @@
     "memfs": "3.4.3",
     "source-map": "0.7.3",
     "open": "^8.4.2",
-    "remotion": "4.0.216",
-    "@remotion/player": "4.0.216",
-    "@remotion/media-utils": "4.0.216",
-    "@remotion/renderer": "4.0.216",
-    "@remotion/studio-shared": "4.0.216"
+    "remotion": "4.0.218",
+    "@remotion/player": "4.0.218",
+    "@remotion/renderer": "4.0.218",
+    "@remotion/studio-shared": "4.0.218",
+    "@remotion/media-utils": "4.0.218"
   },
   "devDependencies": {
     "react": "18.3.1",
     "react-dom": "18.3.1",
     "@types/semver": "^7.3.4",
     "zod": "3.22.3",
-    "@remotion/zod-types": "4.0.216"
+    "@remotion/zod-types": "4.0.218"
   },
   "publishConfig": {
     "access": "public"