4 files changed, 69 insertions, 0 deletions
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
new file mode 100644
index 0000000..8c56a3c
--- /dev/null
+++ b/src/routes/+layout.svelte
@@ -0,0 +1,12 @@
+<script lang="ts">
+	import '../app.css';
+	import favicon from '$lib/assets/favicon.svg';
+
+	let { children } = $props();
+</script>
+
+<svelte:head>
+	<link rel="icon" href={favicon} />
+</svelte:head>
+
+{@render children?.()}
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
new file mode 100644
index 0000000..8d09da5
--- /dev/null
+++ b/src/routes/+page.svelte
@@ -0,0 +1,6 @@
+<script lang="ts">
+	import Editor from '$/lib/Player/Player.svelte';
+	import Video from '$/user';
+</script>
+
+<Editor {Video} />
diff --git a/src/routes/ffmpeg-test/+page.svelte b/src/routes/ffmpeg-test/+page.svelte
new file mode 100644
index 0000000..226fc3c
--- /dev/null
+++ b/src/routes/ffmpeg-test/+page.svelte
@@ -0,0 +1,45 @@
+<script lang="ts">
+	import { FFmpeg } from '@ffmpeg/ffmpeg';
+	// @ts-ignore
+	import type { LogEvent } from '@ffmpeg/ffmpeg/dist/esm/types';
+	import { fetchFile, toBlobURL } from '@ffmpeg/util';
+
+	let videoEl: HTMLVideoElement;
+
+	const baseURL = 'https://unpkg.com/@ffmpeg/core-mt@0.12.6/dist/esm';
+	const videoURL = 'https://raw.githubusercontent.com/ffmpegwasm/testdata/master/video-15s.avi';
+
+	let message = $state('Click Start to Transcode');
+
+	const transcode = async () => {
+		const ffmpeg = new FFmpeg();
+		message = 'Loading ffmpeg-core.js';
+		ffmpeg.on('log', ({ message: msg }: LogEvent) => {
+			message = msg;
+			console.log(message);
+		});
+		await ffmpeg.load({
+			coreURL: await toBlobURL(`${baseURL}/ffmpeg-core.js`, 'text/javascript'),
+			wasmURL: await toBlobURL(`${baseURL}/ffmpeg-core.wasm`, 'application/wasm'),
+			workerURL: await toBlobURL(`${baseURL}/ffmpeg-core.worker.js`, 'text/javascript')
+		});
+		message = 'Start transcoding';
+		await ffmpeg.writeFile('test.avi', await fetchFile(videoURL));
+		await ffmpeg.exec(['-i', 'test.avi', 'test.mp4']);
+		message = 'Complete transcoding';
+		const data = await ffmpeg.readFile('test.mp4');
+		console.log('done');
+		videoEl.src = URL.createObjectURL(
+			// @ts-ignore bufferlike is good enuf
+			new Blob([(data as Uint8Array).buffer], { type: 'video/mp4' })
+		);
+	};
+</script>
+
+<div>
+	<!-- svelte-ignore a11y_media_has_caption -->
+	<video bind:this={videoEl} controls></video>
+	<br />
+	<button onclick={transcode}>Start</button>
+	<p>{message}</p>
+</div>
diff --git a/src/routes/render/+page.svelte b/src/routes/render/+page.svelte
new file mode 100644
index 0000000..e9ecd91
--- /dev/null
+++ b/src/routes/render/+page.svelte
@@ -0,0 +1,6 @@
+<script lang="ts">
+	import Renderer from '$/lib/Renderer/Renderer.svelte';
+	import Video from '$/user';
+</script>
+
+<Renderer {Video} />