feat: Improvements

Author: Aleksander Grygier

apps/web/src/lib/components/RecordingTile.svelte

@@ -5,15 +5,15 @@
 	import { browser } from '$app/environment';
 	import transcribeRecording from '$lib/methods/transcribe-recording';
 	import LoadingSpinner from './LoadingSpinner.svelte';
+	import type { Transcription } from '$lib/types';
 
 	interface RecordingTileProps {
 		blob: Blob;
 		deleteRecording: () => void;
 		id: string;
 		name: string;
 		savedRecordings?: any[];
-		transcription?: string;
-		url: string;
+		transcription?: Transcription;
 	}
 
 	let {
@@ -22,11 +22,13 @@
 		id,
 		name,
 		savedRecordings = $bindable([]),
-		transcription,
-		url
+		transcription
 	}: RecordingTileProps = $props();
 	let isPlaying = $state(false);
 	let isTranscribing = $state(false);
+
+	const recordingUrl = URL.createObjectURL(blob);
+
 	let waveformContainer: HTMLElement;
 	let wavesurfer: WaveSurfer;
 	let progressColor = $state(
@@ -53,7 +55,7 @@
 			backend: 'MediaElement' // Ensures browser-native audio handling
 		});
 
-		wavesurfer.load(url);
+		wavesurfer.load(recordingUrl);
 
 		wavesurfer.on('play', () => {
 			isPlaying = true;
@@ -66,7 +68,7 @@
 		wavesurfer.on('finish', () => {
 			isPlaying = false;
 
-			wavesurfer.load(url);
+			wavesurfer.load(recordingUrl);
 		});
 	}
 
@@ -83,7 +85,7 @@
 	{#if transcription}
 		<div class="transcription">
 			<div class="inner">
-				{transcription}
+				{transcription.text}
 			</div>
 		</div>
 	{:else}
@@ -105,9 +107,7 @@
 
 						isTranscribing = true;
 
-						const transcriptionResult = await transcribeRecording(blob);
-
-						transcription = transcriptionResult ? transcriptionResult.text : '';
+						const transcription = await transcribeRecording(blob);
 
 						isTranscribing = false;
 
@@ -140,7 +140,7 @@
 			label="Stop"
 		/>
 
-		<Button kind="secondary" download={name} href={url} label="Download"></Button>
+		<Button kind="secondary" download={name} href={recordingUrl} label="Download"></Button>
 
 		<Button kind="danger" onclick={async () => await deleteRecording()} label="Delete" />
 	</div>

apps/web/src/lib/methods/create-recording.ts

@@ -0,0 +1,21 @@
+import type { Transcription } from '$lib/types';
+import blobToBase64 from '$lib/utils/blob-to-base64';
+
+export default async function createRecording(recordingUrl: string): Promise<{
+	id: string;
+	name: string;
+	data: string;
+	transcription: Transcription | undefined;
+}> {
+	const response = await fetch(recordingUrl);
+
+	const recordingBlob = await response.blob();
+	const recordingId = crypto.randomUUID();
+
+	return {
+		id: recordingId,
+		name: `${new Date().toISOString()}-${recordingId}.webm`,
+		data: await blobToBase64(recordingBlob),
+		transcription: undefined
+	};
+}

apps/web/src/lib/types/index.ts

@@ -0,0 +1,3 @@
+import type { Transcription } from './transcription';
+
+export type { Transcription };

apps/web/src/lib/types/transcription.ts

@@ -0,0 +1,6 @@
+export interface Transcription {
+	text: string;
+	vtt: string;
+	word_count: number;
+	words: { word: string; start: number; end: number }[];
+}

apps/web/src/routes/+page.svelte

@@ -3,88 +3,32 @@
 	import RecordingTile from '$lib/components/RecordingTile.svelte';
 	import { onMount } from 'svelte';
 	import base64ToBlob from '$lib/utils/base64-to-blob';
-	import blobToBase64 from '$lib/utils/blob-to-base64';
+	import type { Transcription } from '$lib/types';
+	import createRecording from '$lib/methods/create-recording';
 
-	let recordingBlob: Blob | MediaSource | undefined = $state();
-	let recordingFileName = $state('');
 	let recordingUrl = $state('');
 
 	let savedRecordings: {
+		data: string;
 		id: string;
 		name: string;
-		url: string;
-		transcription?: string;
-		data: string;
+		transcription?: Transcription;
 	}[] = $state.raw([]);
 
-	async function discardRecording() {
-		if (!recordingUrl) return alert('No recording to delete');
-
-		URL.revokeObjectURL(recordingUrl);
-		recordingUrl = '';
-	}
-
-	async function saveRecording() {
-		if (!recordingUrl) return alert('No recording to save');
-
-		const response = await fetch(recordingUrl);
-		recordingBlob = await response.blob();
-		recordingFileName = `${new Date().toISOString()}-${crypto.randomUUID()}.webm`;
-		recordingUrl = '';
-
-		const base64Data = await blobToBase64(recordingBlob);
-
-		savedRecordings = [
-			{
-				id: recordingFileName,
-				name: recordingFileName,
-				data: base64Data,
-				transcription: '',
-				url: URL.createObjectURL(recordingBlob)
-			},
-			...savedRecordings
-		];
-	}
-
-	function deleteRecording(id: string) {
-		if (confirm('Are you sure you want to delete this recording?')) {
-			savedRecordings = savedRecordings.filter((rec) => rec.id !== id);
-		}
-	}
-
 	onMount(() => {
 		if (localStorage.getItem('savedRecordings')) {
-			savedRecordings = JSON.parse(`${localStorage.getItem('savedRecordings')}`).map(
-				(rec: { id: string; name: string; data: string; transcription?: string }) => {
-					const blob = base64ToBlob(rec.data);
-					const url = URL.createObjectURL(blob);
-					return {
-						id: rec.id,
-						name: rec.name,
-						data: rec.data,
-						transcription: rec.transcription,
-						url
-					};
-				}
-			);
+			savedRecordings = JSON.parse(`${localStorage.getItem('savedRecordings')}`);
 		}
 	});
 
 	$effect(() => {
 		if (savedRecordings) {
-			console.log('savedRecordings:', savedRecordings);
-
-			localStorage.setItem(
+			console.log(
 				'savedRecordings',
-				JSON.stringify(
-					savedRecordings.map(({ id, name, data, transcription }) => ({
-						id,
-						name,
-						data,
-						transcription
-					}))
-				)
+				savedRecordings.map((x) => x.transcription)
 			);
+
+			localStorage.setItem('savedRecordings', JSON.stringify(savedRecordings));
 		}
 	});
 </script>
@@ -106,26 +50,40 @@
 				<br />
 				<strong>It's that simple.</strong>
 			</h1>
-
-			<!-- <p>
-				The easiest way to instantly get your ideas, interviews and conversations to Google Docs.
-			</p> -->
 		</div>
 
-		<Recorder {discardRecording} bind:recordingUrl {saveRecording} />
+		<Recorder
+			discardRecording={() => {
+				URL.revokeObjectURL(recordingUrl);
+				recordingUrl = '';
+			}}
+			saveRecording={async () => {
+				if (!recordingUrl) return alert('No recording to save');
+
+				const newRecording = await createRecording(recordingUrl);
+
+				recordingUrl = '';
+
+				savedRecordings = [newRecording, ...savedRecordings];
+			}}
+			bind:recordingUrl
+		/>
 
 		{#if savedRecordings.length > 0}
 			<section class="recordings">
 				<ul>
-					{#each savedRecordings as recording (recording.id)}
+					{#each savedRecordings as recording ((recording.id, recording.transcription))}
 						<li>
 							<RecordingTile
 								blob={base64ToBlob(recording.data)}
+								deleteRecording={() => {
+									if (confirm('Are you sure you want to delete this recording?')) {
+										savedRecordings = savedRecordings.filter((r) => r.id !== recording.id);
+									}
+								}}
 								id={recording.id}
 								name={recording.name}
-								url={recording.url}
 								transcription={recording.transcription}
-								deleteRecording={() => deleteRecording(recording.id)}
 								bind:savedRecordings
 							/>
 						</li>
@@ -161,11 +119,6 @@
 		}
 	}
 
-	.hero p {
-		font-size: 1.125rem;
-		line-height: 1.5;
-	}
-
 	h1 {
 		font-size: 1.875rem;
 		line-height: 1.5;