[pull] main from remotion-dev:main

.agents/skills/install-canvas-capture-browser/scripts/install-browser.sh

@@ -6,7 +6,7 @@ expected_version="150.0.7842.0"
 expected_revision="r1631007"
 expected_sha256="86de7ffdb70d3f41714bf5b2b6fe3ef23cbf6c924eb407343418f31b9c721f7f"
 download_url="https://storage.googleapis.com/chrome-for-testing-per-commit-public/mac-arm64/r1631007/chrome-mac-arm64.zip"
-install_app="/Users/jonathanburger/Applications/Recorder Chrome.app"
+install_app="${HOME:?}/Applications/Recorder Chrome.app"
 
 usage() {
 	printf '%s\n' 'Usage: install-browser.sh [--install-app PATH]'

packages/browser-studio/e2e/browser-studio.test.ts

@@ -273,7 +273,7 @@ test('loads Browser Studio, opens external links, and can add, delete, and dupli
 			await secondQuickSwitcherInput.press('Escape');
 
 			await studio.locator('[data-compname="MyComp"]').click();
-			await studio.getByRole('button', {name: 'Render on web'}).click();
+			await studio.getByRole('button', {name: 'Render in browser'}).click();
 			await expect(
 				studio.getByText('Input Props', {exact: true}),
 			).toBeVisible();
@@ -343,9 +343,9 @@ test('loads Browser Studio, opens external links, and can add, delete, and dupli
 				'MyComp / template-blank - Remotion Studio',
 				{timeout: 5000},
 			);
-			await studio.getByRole('button', {name: 'Render on web'}).click();
+			await studio.getByRole('button', {name: 'Render in browser'}).click();
 			await expect(
-				studio.getByText('Render MyComp', {exact: true}),
+				studio.getByText('Render MyComp in the browser', {exact: true}),
 			).toBeVisible();
 			await studio.locator('body').press('Escape');
 			await expect

packages/browser-studio/src/browser-studio-operations.ts

@@ -235,6 +235,13 @@ const getCodemodTargetCompositionId = (
 		return codemod.idToMove;
 	}
 
+	if (
+		codemod.type === 'move-composition-or-folder' &&
+		codemod.source.type === 'composition'
+	) {
+		return codemod.source.compositionId;
+	}
+
 	return null;
 };
 
@@ -276,6 +283,21 @@ const resolveCodemodTargetFile = ({
 		return findProjectFile({filePath: folderFile, project});
 	}
 
+	if (
+		codemod.type === 'move-composition-or-folder' &&
+		codemod.source.type === 'folder'
+	) {
+		const folderFile = getFolderFile({
+			folderName: codemod.source.folderName,
+			project,
+		});
+		if (folderFile === null) {
+			throw new Error(`Could not find folder "${codemod.source.folderName}"`);
+		}
+
+		return findProjectFile({filePath: folderFile, project});
+	}
+
 	const rootFile = getRootFileForProject({
 		entryPoint: project.entryPoint,
 		project,

packages/bundler/src/rspack-config.ts

@@ -79,8 +79,16 @@ export const rspackConfig = async ({
 		},
 	};
 
+	const sharedBaseConfig = getBaseConfig(environment, poll);
 	const baseConfig = {
-		...getBaseConfig(environment, poll),
+		...sharedBaseConfig,
+		experiments: {
+			...sharedBaseConfig.experiments,
+			...(environment === 'development'
+				? // Makes the first HMR event faster.
+					{incremental: {buildChunkGraph: true}}
+				: {}),
+		},
 		// Remove once https://github.com/huggingface/transformers.js/issues/1759 is resolved.
 		ignoreWarnings: [
 			{

packages/canvas-capture-extension/README.public.md

@@ -0,0 +1,19 @@
+# Remotion Canvas Capture
+
+Remotion Canvas Capture records an area—or a whole webpage—as a
+high-resolution H.264 MP4 or VP9 WebM using Chromium's experimental
+HTML-in-canvas implementation.
+
+## Install
+
+Follow the [Canvas Capture installation guide](https://www.remotion.dev/docs/canvas-capture/installation).
+
+## Development
+
+This repository contains the built Chrome extension and is generated from the
+[`packages/canvas-capture-extension`](https://github.com/remotion-dev/remotion/tree/main/packages/canvas-capture-extension)
+package in the Remotion monorepo. Changes made directly in this repository will
+be overwritten by the release pipeline.
+
+Please report issues and contribute changes in the
+[`remotion-dev/remotion`](https://github.com/remotion-dev/remotion) repository.

packages/docs/docs/canvas-capture/TableOfContents.tsx

@@ -0,0 +1,16 @@
+import React from 'react';
+import {Grid} from '../../components/TableOfContents/Grid';
+import {TOCItem} from '../../components/TableOfContents/TOCItem';
+
+export const TableOfContents: React.FC = () => {
+	return (
+		<div>
+			<Grid>
+				<TOCItem link="/docs/canvas-capture/installation">
+					<strong>Installation</strong>
+					<div>Install the browser and Canvas Capture extension</div>
+				</TOCItem>
+			</Grid>
+		</div>
+	);
+};

packages/docs/docs/canvas-capture/index.mdx

@@ -0,0 +1,18 @@
+---
+image: /generated/articles-docs-canvas-capture-index.png
+title: Canvas Capture
+---
+
+import {TableOfContents} from './TableOfContents';
+
+# Canvas Capture
+
+Remotion Canvas Capture is a high-fidelity webpage recorder which leverages HTML-in-canvas.
+
+It can record content at a higher resolution than the native display resolution.
+
+Perfect for product demos showing closeups of UI.
+
+## Table of contents
+
+<TableOfContents />

packages/docs/docs/canvas-capture/installation.mdx

@@ -0,0 +1,48 @@
+---
+image: /generated/articles-docs-canvas-capture-installation.png
+title: Install Canvas Capture
+sidebar_label: Installation
+---
+
+# Install Canvas Capture
+
+> Tip: Copy the URL of this page into an agent to let it install it for you.
+
+Canvas Capture currently requires an Apple Silicon Mac.
+
+## Download the extension
+
+Clone the built extension to a durable location:
+
+```bash title="Terminal"
+git clone --depth=1 https://github.com/remotion-dev/canvas-capture.git \
+  "$HOME/Applications/Remotion Canvas Capture Extension"
+```
+
+The repository contains a production build of Canvas Capture. You do not need to clone or build Remotion.
+
+## Install Chrome for Testing
+
+Canvas Capture uses Chrome for Testing `150.0.7842.0` at revision `r1631007`. This is the exact version known to support the required HTML-in-canvas API.
+
+Install the browser using the script included with Canvas Capture:
+
+```bash title="Terminal"
+"$HOME/Applications/Remotion Canvas Capture Extension/install-browser.sh"
+```
+
+This browser does not receive security updates. Only use it with websites you trust.
+
+## Launch the browser
+
+Open Google Chrome for Testing from Launchpad.
+
+Open `chrome://flags`, search for Canvas Draw Element, set it to Enabled and select Relaunch.
+
+## Load the extension
+
+Open `chrome://extensions`, enable Developer mode and select Load unpacked.
+
+In the file picker, open your home folder, then choose Applications → Remotion Canvas Capture Extension.
+
+Open a webpage and click the Remotion Canvas Capture extension icon to start recording.

packages/docs/docs/client-side-rendering/index.mdx

@@ -61,7 +61,7 @@ const {getBlob} = await renderMediaOnWeb({
 
 ## Remotion Studio
 
-Client-side rendering is always enabled in the Remotion Studio from <AvailableFrom v="4.0.491" inline />. Use the "Render on web" button to render in the browser.
+Client-side rendering is always enabled in the Remotion Studio from <AvailableFrom v="4.0.491" inline />. Use the "Render in browser" button to start a render.
 
 ## Telemetry
 

packages/docs/docs/contributing/web-renderer.mdx

@@ -75,7 +75,7 @@ Sloppy, unfiltered AI PRs will not be processed by us.
 
 ## Studio Render Button
 
-In [`packages/example`](/docs/contributing/#testing-your-changes), and in any template, you will see a "Render on web" button.
+In [`packages/example`](/docs/contributing/#testing-your-changes), and in any template, you will see a "Render in browser" button.
 
 ## See also
 

packages/docs/sidebars.ts

@@ -1750,6 +1750,11 @@ const sidebars: SidebarsConfig = {
 			href: '/docs/recorder',
 			label: 'Recorder',
 		},
+		{
+			type: 'link',
+			href: '/docs/canvas-capture',
+			label: 'Canvas Capture',
+		},
 		{
 			type: 'html',
 			value:
@@ -1967,6 +1972,17 @@ const sidebars: SidebarsConfig = {
 			],
 		},
 	],
+	canvasCaptureSidebar: [
+		{
+			type: 'category',
+			label: 'Canvas Capture',
+			link: {
+				type: 'doc',
+				id: 'canvas-capture/index',
+			},
+			items: ['canvas-capture/installation'],
+		},
+	],
 };
 
 export default sidebars;

packages/docs/src/data/articles.ts

@@ -575,6 +575,24 @@ export const articles = [
 		noAi: false,
 		slug: 'cancel-render',
 	},
+	{
+		id: 'canvas-capture/index',
+		title: 'Canvas Capture',
+		relativePath: 'docs/canvas-capture/index.mdx',
+		compId: 'articles-docs-canvas-capture-index',
+		crumb: null,
+		noAi: false,
+		slug: 'canvas-capture/index',
+	},
+	{
+		id: 'canvas-capture/installation',
+		title: 'Install Canvas Capture',
+		relativePath: 'docs/canvas-capture/installation.mdx',
+		compId: 'articles-docs-canvas-capture-installation',
+		crumb: null,
+		noAi: false,
+		slug: 'canvas-capture/installation',
+	},
 	{
 		id: 'canvasimage',
 		title: '<CanvasImage>',

packages/docs/vercel.ts

@@ -377,6 +377,9 @@ export const config: VercelConfig = {
 			permanent: false,
 		}),
 		routes.redirect('/recorder', '/docs/recorder', {permanent: false}),
+		routes.redirect('/canvas-capture', '/docs/canvas-capture', {
+			permanent: false,
+		}),
 		routes.redirect('/install-whisper-cpp', '/docs/install-whisper-cpp', {
 			permanent: false,
 		}),