fix: revoke generated object URLs

src/lib/components/functional/VertdErrorDetails.svelte

@@ -2,6 +2,7 @@
 	import { m } from "$lib/paraglide/messages";
 	import type { DialogProps } from "$lib/store/DialogProvider";
 	import { link, sanitize } from "$lib/store/index.svelte";
+	import { onMount } from "svelte";
 
 	interface VertdErrorDetailsProps {
 		jobId: string;
@@ -13,6 +14,19 @@
 	type Props = DialogProps<VertdErrorDetailsProps>;
 
 	let { additional }: Props = $props();
+	let errorMessageUrl = $state("#");
+
+	onMount(() => {
+		const url = URL.createObjectURL(
+			new Blob([additional.errorMessage], {
+				type: "text/plain",
+			}),
+		);
+
+		errorMessageUrl = url;
+
+		return () => URL.revokeObjectURL(url);
+	});
 </script>
 
 <div class="flex flex-col gap-2">
@@ -41,13 +55,7 @@
 			{@html sanitize(link(
 				["view_link"],
 				m["convert.errors.vertd_details_error_message"](),
-				[
+				[errorMessageUrl],
-					URL.createObjectURL(
-						new Blob([additional.errorMessage], {
-							type: "text/plain",
-						}),
-					),
-				],
 				[true],
 				["text-blue-500 font-normal"],
 			))}

src/lib/store/index.svelte.ts

@@ -90,8 +90,10 @@ class Files {
 		const mediaElement = isVideo
 			? document.createElement("video")
 			: new Image();
-		mediaElement.src = URL.createObjectURL(file);
+		const mediaUrl = URL.createObjectURL(file);
+		mediaElement.src = mediaUrl;
 
+		try {
 			await new Promise((resolve, reject) => {
 				if (isVideo) {
 					const video = mediaElement as HTMLVideoElement;
@@ -125,10 +127,17 @@ class Files {
 			ctx.drawImage(mediaElement, 0, 0, canvas.width, canvas.height);
 
 			// check if completely transparent
-		const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
+			const imageData = ctx.getImageData(
-		const isTransparent = Array.from(imageData.data).every((value, index) => {
+				0,
+				0,
+				canvas.width,
+				canvas.height,
+			);
+			const isTransparent = Array.from(imageData.data).every(
+				(value, index) => {
 					return (index + 1) % 4 !== 0 || value === 0;
-		});
+				},
+			);
 			if (isTransparent) {
 				canvas.remove();
 				return undefined;
@@ -137,6 +146,11 @@ class Files {
 			const url = canvas.toDataURL();
 			canvas.remove();
 			return url;
+		} finally {
+			URL.revokeObjectURL(mediaUrl);
+			mediaElement.removeAttribute("src");
+			if (isVideo) (mediaElement as HTMLVideoElement).load();
+		}
 	}
 
 	private async _handleZipFile(file: File): Promise<void> {