Add SvelteKit Example (#684)

* Add SvelteKit Example * package-lock.json
2024-03-07 15:08:44 +01:00
parent 0e907262e3
commit ae1cdac7db
24 changed files with 3752 additions and 36 deletions
--- a/apps/sveltekit-app/src/app.d.ts
+++ b/apps/sveltekit-app/src/app.d.ts
@@ -0,0 +1,13 @@
+// See https://kit.svelte.dev/docs/types#app
+// for information about these interfaces
+declare global {
+	namespace App {
+		// interface Error {}
+		// interface Locals {}
+		// interface PageData {}
+		// interface PageState {}
+		// interface Platform {}
+	}
+}
+
+export {};
--- a/apps/sveltekit-app/src/app.html
+++ b/apps/sveltekit-app/src/app.html
@@ -0,0 +1,12 @@
+<!doctype html>
+<html lang="en">
+	<head>
+		<meta charset="utf-8" />
+		<link rel="icon" href="%sveltekit.assets%/favicon.png" />
+		<meta name="viewport" content="width=device-width, initial-scale=1" />
+		%sveltekit.head%
+	</head>
+	<body data-sveltekit-preload-data="hover">
+		<div style="display: contents">%sveltekit.body%</div>
+	</body>
+</html>
--- a/apps/sveltekit-app/src/index.test.ts
+++ b/apps/sveltekit-app/src/index.test.ts
@@ -0,0 +1,7 @@
+import { describe, it, expect } from 'vitest';
+
+describe('sum test', () => {
+	it('adds 1 + 2 to equal 3', () => {
+		expect(1 + 2).toBe(3);
+	});
+});
--- a/apps/sveltekit-app/src/lib/FFmpegDemo.svelte
+++ b/apps/sveltekit-app/src/lib/FFmpegDemo.svelte
@@ -0,0 +1,44 @@
+<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 = 'Click Start to Transcode';
+
+	async function transcode() {
+		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(
+			new Blob([(data as Uint8Array).buffer], { type: 'video/mp4' })
+		);
+	}
+</script>
+
+<div>
+	<!-- svelte-ignore a11y-media-has-caption -->
+	<video bind:this={videoEl} controls />
+	<br />
+	<button on:click={transcode}>Start</button>
+	<p>{message}</p>
+</div>
--- a/apps/sveltekit-app/src/lib/index.ts
+++ b/apps/sveltekit-app/src/lib/index.ts
@@ -0,0 +1 @@
+// place files you want to import through the `$lib` alias in this folder.
--- a/apps/sveltekit-app/src/routes/+page.svelte
+++ b/apps/sveltekit-app/src/routes/+page.svelte
@@ -0,0 +1,7 @@
+<script lang="ts">
+	import FFmpegDemo from '../lib/FFmpegDemo.svelte';
+</script>
+
+<h1>Welcome to SvelteKit</h1>
+<p>Visit <a href="https://kit.svelte.dev">kit.svelte.dev</a> to read the documentation</p>
+<FFmpegDemo></FFmpegDemo>
				`@@ -0,0 +1 @@`
				// place files you want to import through the `$lib` alias in this folder.