Merge pull request #4635 from remotion-dev/new-audiogram-template

packages/create-video/src/templates.ts

@@ -305,7 +305,7 @@ export const FEATURED_TEMPLATES: Template[] = [
 		type: 'video' as const,
 		defaultBranch: 'main',
 		featuredOnHomePage: null,
-		previewURL: null,
+		previewURL: 'https://template-audiogram-1nrh.vercel.app',
 		templateInMonorepo: 'template-audiogram',
 		allowEnableTailwind: true,
 	},

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

@@ -28,39 +28,43 @@ afterEach(() => {
 	}
 });
 
-test('Should fail to render if cancelRender() was being used', async () => {
-	const task = await execa(
-		'pnpm',
-		[
-			'exec',
-			'remotion',
-			'render',
-			'build',
-			'cancel-render',
-			'--frames=2-10',
-			outputPath,
-		],
-		{
-			cwd: path.join(process.cwd(), '..', 'example'),
-			reject: false,
-		},
-	);
+test(
+	'Should fail to render if cancelRender() was being used',
+	async () => {
+		const task = await execa(
+			'pnpm',
+			[
+				'exec',
+				'remotion',
+				'render',
+				'build',
+				'cancel-render',
+				'--frames=2-10',
+				outputPath,
+			],
+			{
+				cwd: path.join(process.cwd(), '..', 'example'),
+				reject: false,
+			},
+		);
 
-	expect(task.exitCode).toBe(1);
-	if (!task.stderr.includes('CancelledError')) {
-		console.log(task.stderr);
-	}
-	expect(task.stderr).toContain('CancelledError');
-	expect(task.stderr).toContain('This should be the error message');
+		expect(task.exitCode).toBe(1);
+		if (!task.stderr.includes('CancelledError')) {
+			console.log(task.stderr);
+		}
+		expect(task.stderr).toContain('CancelledError');
+		expect(task.stderr).toContain('This should be the error message');
 
-	// Should symbolicate stacktrace
-	// Do not search for strings that depend on color support
-	expect(task.stdout).toContain('src/CancelRender/index.tsx:18');
-	expect(task.stdout).toContain(
-		'Worst case: Inside a promise without a catch handler',
-	);
-	expect(task.stdout).toContain('and with a timeout running');
-	expect(task.stdout).toContain(
-		"cancelRender(new Error('This should be the error message'));",
-	);
-});
+		// Should symbolicate stacktrace
+		// Do not search for strings that depend on color support
+		expect(task.stdout).toContain('src/CancelRender/index.tsx:18');
+		expect(task.stdout).toContain(
+			'Worst case: Inside a promise without a catch handler',
+		);
+		expect(task.stdout).toContain('and with a timeout running');
+		expect(task.stdout).toContain(
+			"cancelRender(new Error('This should be the error message'));",
+		);
+	},
+	{timeout: 15000},
+);

packages/template-audiogram/README.md

@@ -10,9 +10,9 @@ This template is for creating "audiograms". In other words, video clips from pod
 
 Start changing things like this:
 
-- Adjust size and length in `src/Video.tsx`
-- Replacing audio, cover and subtitles in the `src/assets` folder
-- Tweak `src/Composition.tsx`
+- Adjust size and length in `src/Root.tsx`
+- Replacing audio, cover and subtitles in the `public` folder
+- Tweak `src/Audioframe.tsx`
 
 ## How do I render my video?
 
@@ -24,16 +24,22 @@ npx remotion render
 
 Or check out the [Remotion docs](/docs/render/). There are lots of ways to render.
 
-## Where to get a transcript (SRT file)?
+## Where to get a transcript?
 
-There are a few places:
+You can supply a .srt file or a .json file that follows the [`@remotion/captions`](https://remotion.dev/docs/captions/caption) format. Examples for both are included.
+
+**Generate them:**
+
+- Use [`@remotion/install-whisper-cpp`](https://www.remotion.dev/docs/install-whisper-cpp/) to use Whisper locally
+- Use [`@remotion/openai-whisper`](https://www.remotion.dev/docs/openai-whisper/openai-whisper-api-to-captions) to get captions from OpenAI Whisper into the right shape.
+
+**Get it from a provider:**
 
 - Your podcasting host might provide them for you.
 - Descript makes transcription really easy.
 - There are tons of other, paid solutions, like [Otter.ai](https://otter.ai), [Scriptme.io](https://scriptme.io) and [ListenRobo.com](https://listenrobo.com).
-- And open-source solutions available, like [Subs AI](https://github.com/abdeladim-s/subsai)
 
-For the purposes of this repo, make sure to export subtitles that are segmented by word (rather than sentence).
+If you supply a .srt, make sure to export subtitles that are segmented by word rather than by sentence.
 
 ## Commands
 

packages/template-audiogram/package.json

@@ -8,13 +8,15 @@
     "upgrade": "remotion upgrade",
     "lint": "eslint src --ext ts,tsx,js,jsx && tsc"
   },
+  "author": "Marcus Stenbeck, Jonny Burger, Alex Fernandez",
   "repository": {},
   "license": "UNLICENSED",
   "dependencies": {
     "@remotion/cli": "workspace:*",
     "@remotion/media-utils": "workspace:*",
+    "@remotion/captions": "workspace:*",
     "@remotion/zod-types": "workspace:*",
-    "parse-srt": "1.0.0-alpha",
+    "@remotion/google-fonts": "workspace:*",
     "react": "19.0.0",
     "react-dom": "19.0.0",
     "remotion": "workspace:*",