[pull] main from remotion-dev:main

package.json

@@ -57,7 +57,7 @@
 	"dependencies": {
 		"p-limit": "7.2.0",
 		"typescript": "5.9.3",
-		"turbo": "2.8.10"
+		"turbo": "2.8.11-canary.19"
 	},
 	"packageManager": "bun@1.3.3",
 	"overrides": {

packages/cli/src/config/index.ts

@@ -94,6 +94,7 @@ const {
 	askAIOption,
 	publicLicenseKeyOption,
 	experimentalClientSideRenderingOption,
+	experimentalVisualModeOption,
 	keyboardShortcutsOption,
 	forceNewStudioOption,
 	numberOfSharedAudioTagsOption,
@@ -190,6 +191,12 @@ declare global {
 		 * @default false
 		 */
 		readonly setExperimentalRspackEnabled: (enabled: boolean) => void;
+		/**
+		 * Nothing here yet, but this is our playground for experiments.
+		 * @param enabled Boolean whether to enable experimental visual mode
+		 * @default false
+		 */
+		readonly setExperimentalVisualMode: (enabled: boolean) => void;
 		/**
 		 * Set number of shared audio tags. https://www.remotion.dev/docs/player/autoplay#using-the-numberofsharedaudiotags-prop
 		 * @param numberOfAudioTags
@@ -669,6 +676,7 @@ export const Config: FlatConfig = {
 	setExperimentalClientSideRenderingEnabled:
 		experimentalClientSideRenderingOption.setConfig,
 	setExperimentalRspackEnabled: rspackOption.setConfig,
+	setExperimentalVisualMode: experimentalVisualModeOption.setConfig,
 	setNumberOfSharedAudioTags: numberOfSharedAudioTagsOption.setConfig,
 	setWebpackPollingInMilliseconds: webpackPollOption.setConfig,
 	setShouldOpenBrowser: noOpenOption.setConfig,

packages/cli/src/parsed-cli.ts

@@ -48,6 +48,7 @@ const {
 	webpackPollOption,
 	keyboardShortcutsOption,
 	experimentalClientSideRenderingOption,
+	experimentalVisualModeOption,
 	imageSequencePatternOption,
 	scaleOption,
 	overwriteOption,
@@ -143,6 +144,9 @@ export type CommandLineOptions = {
 	[experimentalClientSideRenderingOption.cliFlag]: TypeOfOption<
 		typeof experimentalClientSideRenderingOption
 	>;
+	[experimentalVisualModeOption.cliFlag]: TypeOfOption<
+		typeof experimentalVisualModeOption
+	>;
 	[mutedOption.cliFlag]: TypeOfOption<typeof mutedOption>;
 	[overrideHeightOption.cliFlag]: TypeOfOption<typeof overrideHeightOption>;
 	[overrideWidthOption.cliFlag]: TypeOfOption<typeof overrideWidthOption>;
@@ -189,6 +193,7 @@ export const BooleanFlags = [
 	headlessOption.cliFlag,
 	keyboardShortcutsOption.cliFlag,
 	experimentalClientSideRenderingOption.cliFlag,
+	experimentalVisualModeOption.cliFlag,
 	ipv4Option.cliFlag,
 	beepOnFinishOption.cliFlag,
 	disableGitSourceOption.cliFlag,
@@ -206,6 +211,7 @@ export const parsedCli = minimist<CommandLineOptions>(process.argv.slice(2), {
 		[overwriteOption.cliFlag]: true,
 		[bundleCacheOption.cliFlag]: null,
 		[experimentalClientSideRenderingOption.cliFlag]: null,
+		[experimentalVisualModeOption.cliFlag]: null,
 		[mutedOption.cliFlag]: null,
 	},
 }) as CommandLineOptions & {

packages/cli/src/studio.ts

@@ -24,6 +24,7 @@ const {
 	enableCrossSiteIsolationOption,
 	askAIOption,
 	experimentalClientSideRenderingOption,
+	experimentalVisualModeOption,
 	keyboardShortcutsOption,
 	forceNewStudioOption,
 	numberOfSharedAudioTagsOption,
@@ -146,6 +147,14 @@ export const studioCommand = async (
 		);
 	}
 
+	const useVisualMode = experimentalVisualModeOption.getValue({
+		commandLine: parsedCli,
+	}).value;
+
+	if (useVisualMode) {
+		Log.warn({indent: false, logLevel}, 'Enabling experimental visual mode.');
+	}
+
 	const result = await StudioServerInternals.startStudio({
 		previewEntry: require.resolve('@remotion/studio/previewEntry'),
 		browserArgs: parsedCli['browser-args'],

packages/core/src/Sequence.tsx

@@ -205,6 +205,8 @@ const RegularSequenceRefForwardingFunction: React.ForwardRefRenderFunction<
 
 	const env = useRemotionEnvironment();
 
+	const inheritedStack = (other as any)?.stack ?? null;
+
 	useEffect(() => {
 		if (!env.isStudio) {
 			return;
@@ -221,7 +223,7 @@ const RegularSequenceRefForwardingFunction: React.ForwardRefRenderFunction<
 			showInTimeline,
 			nonce,
 			loopDisplay,
-			stack: stack ?? null,
+			stack: stack ?? inheritedStack,
 			premountDisplay: premountDisplay ?? null,
 			postmountDisplay: postmountDisplay ?? null,
 		});
@@ -246,6 +248,7 @@ const RegularSequenceRefForwardingFunction: React.ForwardRefRenderFunction<
 		premountDisplay,
 		postmountDisplay,
 		env.isStudio,
+		inheritedStack,
 	]);
 
 	// Ceil to support floats

packages/docs/docs/config.mdx

@@ -187,6 +187,18 @@ Config.setExperimentalRspackEnabled(true);
 
 The [command line flag](/docs/cli/studio#--experimental-rspack) `--experimental-rspack` will take precedence over this option.
 
+## `setExperimentalVisualMode()`<AvailableFrom v="4.0.428" />
+
+<Options id="experimental-visual-mode" />
+
+```ts twoslash title="remotion.config.ts"
+import {Config} from '@remotion/cli/config';
+// ---cut---
+Config.setExperimentalVisualMode(true);
+```
+
+The [command line flag](/docs/cli/studio#--experimental-visual-mode) `--experimental-visual-mode` will take precedence over this option.
+
 ## `setWebpackPollingInMilliseconds()`<AvailableFrom v="3.3.11" />
 
 <Options id="webpack-poll" />

packages/example/remotion.config.ts

@@ -10,3 +10,4 @@ Config.overrideWebpackConfig(async (config) => {
 });
 
 Config.setExperimentalClientSideRenderingEnabled(true);
+Config.setExperimentalVisualMode(true);

packages/it-tests/src/rendering/cancel-render.test.ts

@@ -3,7 +3,7 @@ import execa from 'execa';
 import fs from 'fs';
 import path from 'path';
 
-const outputPath = path.join(process.cwd(), 'packages/example/out.mp4');
+const outputPath = path.join(process.cwd(), 'packages/example/out-cancel.mp4');
 
 beforeEach(() => {
 	if (fs.existsSync(outputPath)) {

packages/it-tests/src/rendering/render-scale.test.ts

@@ -5,7 +5,7 @@ import fs from 'fs';
 import path from 'path';
 import {NoReactInternals} from 'remotion/no-react';
 
-const outputPath = path.join(process.cwd(), 'packages/example/out.mp4');
+const outputPath = path.join(process.cwd(), 'packages/example/out-scale.mp4');
 
 beforeEach(() => {
 	if (fs.existsSync(outputPath)) {

packages/light-leaks/src/LightLeak.tsx

@@ -1,6 +1,7 @@
 import React, {useCallback, useEffect, useRef, useState} from 'react';
 import {
 	AbsoluteFill,
+	Internals,
 	Sequence,
 	useCurrentFrame,
 	useDelayRender,
@@ -256,8 +257,14 @@ export const LightLeak: React.FC<LightLeakProps> = ({
 	}
 
 	return (
-		<Sequence durationInFrames={resolvedDuration} {...sequenceProps}>
+		<Sequence
+			durationInFrames={resolvedDuration}
+			name="<LightLeak>"
+			{...sequenceProps}
+		>
 			<LightLeakCanvas seed={seed} hueShift={hueShift} />
 		</Sequence>
 	);
 };
+
+Internals.addSequenceStackTraces(LightLeak);

packages/renderer/src/options/experimental-visual-mode.tsx

@@ -0,0 +1,33 @@
+import type {AnyRemotionOption} from './option';
+
+let experimentalVisualModeEnabled = false;
+
+const cliFlag = 'experimental-visual-mode' as const;
+
+export const experimentalVisualModeOption = {
+	name: 'Experimental Visual Mode',
+	cliFlag,
+	description: () => (
+		<>Nothing here yet, but this is our playground for experiments.</>
+	),
+	ssrName: null,
+	docLink: 'https://www.remotion.dev/docs/config#setexperimentalvisualmode',
+	type: false as boolean,
+	getValue: ({commandLine}) => {
+		if (commandLine[cliFlag] !== null) {
+			return {
+				value: commandLine[cliFlag] as boolean,
+				source: 'cli',
+			};
+		}
+
+		return {
+			value: experimentalVisualModeEnabled,
+			source: 'config',
+		};
+	},
+	setConfig(value) {
+		experimentalVisualModeEnabled = value;
+	},
+	id: cliFlag,
+} satisfies AnyRemotionOption<boolean>;

packages/renderer/src/options/index.tsx

@@ -26,6 +26,7 @@ import {enforceAudioOption} from './enforce-audio';
 import {envFileOption} from './env-file';
 import {everyNthFrameOption} from './every-nth-frame';
 import {experimentalClientSideRenderingOption} from './experimental-client-side-rendering';
+import {experimentalVisualModeOption} from './experimental-visual-mode';
 import {folderExpiryOption} from './folder-expiry';
 import {forSeamlessAacConcatenationOption} from './for-seamless-aac-concatenation';
 import {forceNewStudioOption} from './force-new-studio';
@@ -148,6 +149,7 @@ export const allOptions = {
 	isProductionOption,
 	askAIOption,
 	experimentalClientSideRenderingOption,
+	experimentalVisualModeOption,
 	keyboardShortcutsOption,
 	framesOption,
 	forceNewStudioOption,