convert.remotion.dev -> remotion.dev/convert

Author: JonnyBurger

packages/convert/.gitignore

@@ -3,3 +3,4 @@ node_modules
 /.cache
 build
 .env
+spa-dist

packages/convert/app/components/Main.tsx

@@ -0,0 +1,25 @@
+import React, {useState} from 'react';
+import {SAMPLE_FILE, TEST_FAST} from '~/lib/config';
+import {Source} from '~/lib/convert-state';
+import {FileAvailable} from './FileAvailable';
+import {PickFile} from './PickFile';
+
+export const Main: React.FC = () => {
+	const [src, setSrc] = useState<Source | null>(
+		TEST_FAST ? {type: 'url', url: SAMPLE_FILE} : null,
+	);
+
+	return (
+		<div className="font-sans min-h-screen bg-slate-50">
+			{src ? (
+				<FileAvailable
+					key={src.type === 'url' ? src.url : src.file.name}
+					src={src}
+					setSrc={setSrc}
+				/>
+			) : (
+				<PickFile setSrc={setSrc} />
+			)}
+		</div>
+	);
+};

packages/convert/app/routes/_index.tsx

@@ -1,35 +1,15 @@
 import type {MetaFunction} from '@remix-run/node';
-import {useState} from 'react';
-import {FileAvailable} from '~/components/FileAvailable';
-import {PickFile} from '~/components/PickFile';
-import {SAMPLE_FILE, TEST_FAST} from '~/lib/config';
-import {Source} from '~/lib/convert-state';
+import {Main} from '~/components/Main';
 
 export const meta: MetaFunction = () => {
 	return [
 		{title: 'Remotion Convert'},
-		{name: 'description', content: 'Fast video conersion in the browser.'},
+		{name: 'description', content: 'Fast video conversion in the browser.'},
 	];
 };
 
 const Index = () => {
-	const [src, setSrc] = useState<Source | null>(
-		TEST_FAST ? {type: 'url', url: SAMPLE_FILE} : null,
-	);
-
-	return (
-		<div className="font-sans min-h-screen bg-slate-50">
-			{src ? (
-				<FileAvailable
-					key={src.type === 'url' ? src.url : src.file.name}
-					src={src}
-					setSrc={setSrc}
-				/>
-			) : (
-				<PickFile setSrc={setSrc} />
-			)}
-		</div>
-	);
+	return <Main />;
 };
 
 export default Index;

packages/convert/app/routes/convert.tsx

@@ -0,0 +1,15 @@
+import type {MetaFunction} from '@remix-run/node';
+import {Main} from '~/components/Main';
+
+export const meta: MetaFunction = () => {
+	return [
+		{title: 'Remotion Convert'},
+		{name: 'description', content: 'Fast video conversion in the browser.'},
+	];
+};
+
+const Index = () => {
+	return <Main />;
+};
+
+export default Index;

packages/convert/package.json

@@ -6,6 +6,7 @@
 	"type": "module",
 	"scripts": {
 		"build-page": "remix vite:build",
+		"build-spa": "remix vite:build -c vite-spa.config.ts",
 		"dev": "remix vite:dev",
 		"typecheck": "tsc",
 		"test": "bun test test",

packages/convert/vite-spa.config.ts

@@ -0,0 +1,20 @@
+import {vitePlugin as remix} from '@remix-run/dev';
+import {installGlobals} from '@remix-run/node';
+import path from 'path';
+import {defineConfig} from 'vite';
+import tsconfigPaths from 'vite-tsconfig-paths';
+
+installGlobals();
+
+export default defineConfig({
+	plugins: [
+		remix({ssr: false, buildDirectory: path.resolve(__dirname, 'spa-dist')}),
+		tsconfigPaths(),
+	],
+	base: '/convert/',
+	resolve: {
+		alias: {
+			'@': path.resolve(__dirname, './app'),
+		},
+	},
+});

packages/docs/copy-convert.ts

@@ -0,0 +1,9 @@
+import {$} from 'bun';
+import fs from 'fs';
+import path from 'path';
+
+await $`bunx turbo "@remotion/convert#build-spa"`;
+
+const dir = path.join(__dirname, '../convert/spa-dist/client');
+
+fs.cpSync(dir, path.join(__dirname, './build/convert'), {recursive: true});

packages/docs/package.json

@@ -10,7 +10,7 @@
 		"docusaurus": "docusaurus",
 		"start": "docusaurus start --host 0.0.0.0",
 		"start-docs": "docusaurus start",
-		"build-docs": "DOCUSAURUS_IGNORE_SSG_WARNINGS=true node --max_old_space_size=16000 node_modules/@docusaurus/core/bin/docusaurus.mjs build && bun count-pages.ts",
+		"build-docs": "DOCUSAURUS_IGNORE_SSG_WARNINGS=true node --max_old_space_size=16000 node_modules/@docusaurus/core/bin/docusaurus.mjs build && bun copy-convert.ts && bun count-pages.ts",
 		"swizzle": "docusaurus swizzle",
 		"deploy": "docusaurus deploy",
 		"serve": "docusaurus serve",

turbo.json

@@ -87,8 +87,10 @@
 			"outputs": ["build", ".vercel"],
 			"outputLogs": "new-only"
 		},
-		"convert": {
-			"dependsOn": ["^@remotion/convert#build-page"]
+		"@remotion/convert#build-spa": {
+			"dependsOn": ["^@remotion/webcodecs#make"],
+			"outputs": ["spa-dist"],
+			"outputLogs": "new-only"
 		}
 	}
 }