feat: Use IndexedDB for storing the recordings data

Author: Aleksander Grygier

apps/web/package.json

@@ -27,6 +27,7 @@
 		"eslint-config-prettier": "^9.1.0",
 		"eslint-plugin-svelte": "^2.36.0",
 		"globals": "^15.0.0",
+		"idb": "^8.0.0",
 		"openai": "^4.67.3",
 		"prettier": "^3.1.1",
 		"prettier-plugin-svelte": "^3.1.2",

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

@@ -82,7 +82,7 @@
 
 	<div bind:this={waveformContainer}></div>
 
-	{#if transcription}
+	{#if transcription?.text && transcription.text !== `Empty ${id}`}
 		<div class="transcription">
 			<div class="inner">
 				{transcription.text}
@@ -142,7 +142,7 @@
 
 		<Button kind="secondary" download={name} href={recordingUrl} label="Download"></Button>
 
-		<Button kind="danger" onclick={async () => await deleteRecording()} label="Delete" />
+		<Button kind="danger" onclick={() => deleteRecording()} label="Delete" />
 	</div>
 </div>
 

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

@@ -5,7 +5,7 @@ export default async function createRecording(recordingUrl: string): Promise<{
 	id: string;
 	name: string;
 	data: string;
-	transcription: Transcription | undefined;
+	transcription: Transcription;
 }> {
 	const response = await fetch(recordingUrl);
 
@@ -16,6 +16,11 @@ export default async function createRecording(recordingUrl: string): Promise<{
 		id: recordingId,
 		name: `${new Date().toISOString()}-${recordingId}.webm`,
 		data: await blobToBase64(recordingBlob),
-		transcription: undefined
+		transcription: {
+			text: `Empty ${recordingId}`,
+			vtt: '',
+			word_count: 0,
+			words: []
+		}
 	};
 }

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

@@ -4,6 +4,7 @@ export default async function transcribeRecording(
 	try {
 		const formData = new FormData();
 		const newBlob = new Blob([audioBlob], { type: 'audio/webm' });
+
 		formData.append('audio', newBlob, 'audio.webm');
 
 		const response = await fetch('/api/transcribe', {

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

@@ -5,6 +5,9 @@
 	import base64ToBlob from '$lib/utils/base64-to-blob';
 	import type { Transcription } from '$lib/types';
 	import createRecording from '$lib/methods/create-recording';
+	import { openDB } from 'idb';
+
+	let db: any;
 
 	let recordingUrl = $state('');
 
@@ -15,20 +18,37 @@
 		transcription?: Transcription;
 	}[] = $state.raw([]);
 
-	onMount(() => {
-		if (localStorage.getItem('savedRecordings')) {
-			savedRecordings = JSON.parse(`${localStorage.getItem('savedRecordings')}`);
-		}
+	async function deleteRecordingFromDB(id: string) {
+		const tx = db.transaction('recordings', 'readwrite');
+		const store = tx.objectStore('recordings');
+
+		await store.delete(id);
+	}
+
+	onMount(async () => {
+		db = await openDB('MemvoDB', 1, {
+			upgrade(db) {
+				if (!db.objectStoreNames.contains('recordings')) {
+					db.createObjectStore('recordings', {
+						keyPath: 'id'
+					});
+				}
+			}
+		});
+
+		const allRecordings = await db.getAll('recordings');
+
+		savedRecordings = allRecordings || [];
 	});
 
 	$effect(() => {
 		if (savedRecordings) {
-			console.log(
-				'savedRecordings',
-				savedRecordings.map((x) => x.transcription)
-			);
+			const tx = db?.transaction('recordings', 'readwrite');
+			const store = tx?.objectStore('recordings');
 
-			localStorage.setItem('savedRecordings', JSON.stringify(savedRecordings));
+			for (const recording of savedRecordings) {
+				store.put(recording);
+			}
 		}
 	});
 </script>
@@ -76,9 +96,11 @@
 						<li>
 							<RecordingTile
 								blob={base64ToBlob(recording.data)}
-								deleteRecording={() => {
+								deleteRecording={async () => {
 									if (confirm('Are you sure you want to delete this recording?')) {
 										savedRecordings = savedRecordings.filter((r) => r.id !== recording.id);
+
+										await deleteRecordingFromDB(recording.id);
 									}
 								}}
 								id={recording.id}