* Added camera QR scanner

package.json

@@ -40,6 +40,7 @@
 	"type": "module",
 	"dependencies": {
 		"@tauri-apps/api": "^1.5.6",
+		"qr-scanner": "^1.4.2",
 		"qrcode": "^1.5.3"
 	}
 }

src-tauri/src/main.rs

@@ -209,3 +209,11 @@ fn open_file(file: PathBuf) -> Result<(), InvokeError> {
     open::that(file)
         .map_err(|e| InvokeError::from_anyhow(anyhow::anyhow!("failed to open file: {}", e)))
 }
+
+#[tauri::command]
+fn is_valid_ticket(ticket: String) -> Result<bool, InvokeError> {
+    let ticket = BlobTicket::from_str(&ticket)
+        .map_err(|e| InvokeError::from_anyhow(anyhow::anyhow!("failed to parse ticket: {}", e)))?;
+
+    Ok(ticket.format() == BlobFormat::HashSeq)
+}

src/routes/transfers/recieve/+page.svelte

@@ -1,36 +1,68 @@
 <script lang="ts">
 	import { goto } from '$app/navigation';
-	import Button from '$lib/components/Button.svelte';
 	import ChevronLeft from '$lib/components/icons/ChevronLeft.svelte';
+	import { onMount } from 'svelte';
+	import QrScanner from 'qr-scanner';
 
-	let hashCode: string | undefined;
+	let videoSource: HTMLVideoElement | null = null;
+	let loading = false;
+	let qrScanner: QrScanner | null = null;
+
+	onMount(() => {
+		navigator.permissions.query({ name: 'camera' as PermissionName }).then((permission) => {
+			if (permission.state === 'denied') {
+				goto('/transfers');
+			}
+
+			loading = true;
+
+			navigator.mediaDevices
+				.getUserMedia({
+					audio: false,
+					video: true
+				})
+				.then((stream) => {
+					if (!videoSource) return;
+
+					videoSource.srcObject = stream;
+					videoSource.play();
+					loading = false;
+
+					qrScanner = new QrScanner(
+						videoSource,
+						(result) => {
+							goto('/transfers/recieve/confirm?hash=' + result);
+						},
+						{
+							highlightCodeOutline: true,
+							highlightScanRegion: true
+						}
+					);
+
+					qrScanner.start();
+				});
+		});
+
+		return () => {
+			if (qrScanner) {
+				qrScanner.stop();
+			}
+		};
+	});
 </script>
 
-<header class="my-2 flex flex-row justify-between px-4 py-2">
+<header class="absolute top-0 z-50 my-2 flex flex-row justify-between px-4 py-2">
 	<button
 		on:click={() => {
 			goto('/transfers');
 		}}
 		class="flex flex-row items-center gap-5"
 	>
-		<ChevronLeft class="h-6 w-6 stroke-black" />
-		<span class="text-lg font-medium">Back</span>
+		<ChevronLeft class="h-6 w-6 stroke-white" />
+		<span class="text-lg font-medium text-white">Back</span>
 	</button>
 </header>
 
-<h2 class="w-full text-center text-gray-modern-200">Temporary Page</h2>
-
-<div class="mx-12 my-48 flex flex-col items-center justify-center gap-2">
-	<span class="w-full text-xs text-gray-modern-600">Enter Hash Code</span>
-	<input
-		bind:value={hashCode}
-		class="w-full rounded-lg border-2 border-gray-modern-200 p-2"
-		type="text"
-	/>
-	<Button
-		on:click={() => {
-			goto('/transfers/recieve/confirm?hash=' + hashCode);
-		}}
-		class="w-full ">Connect</Button
-	>
-</div>
+<video class="absolute inset-0 z-0 h-full bg-black object-contain" bind:this={videoSource}>
+	<track kind="captions" />
+</video>

src/routes/transfers/recieve/confirm/+page.svelte

@@ -6,6 +6,12 @@
 
 	export let data;
 
+	let isValidHash = invoke('is_valid_ticket', { ticket: data.hash });
+
+	if (!isValidHash) {
+		goto('/transfers');
+	}
+
 	let codes = [data.confirmationCode];
 
 	while (codes.length < 3) {

src/routes/transfers/transferring/+page.svelte

@@ -31,7 +31,6 @@
 		responseData = await invoke('recieve_files', {
 			ticket: data.ticket
 		});
-		console.log(responseData);
 		time_complete = Date.now() - time;
 		done = true;
 	});