scan page layout

2 files changed, 26 insertions, 12 deletions

diff --git a/src/routes/(app)/scan/[email protected] b/src/routes/(app)/scan/[email protected]
new file mode 100644
index 00000000..16ba5888
--- /dev/null
+++ b/src/routes/(app)/scan/[email protected]
@@ -0,0 +1,3 @@
+<div class="container mt-4">
+  <slot />
+</div>
diff --git a/src/routes/(app)/scan/+page.svelte b/src/routes/(app)/scan/+page.svelte
index 150a66f4..e9bf4fd6 100644
--- a/src/routes/(app)/scan/+page.svelte
+++ b/src/routes/(app)/scan/+page.svelte
@@ -1,31 +1,42 @@
 <script>
+  import { tick } from "svelte";
   import Icon from "$comp/Icon.svelte";
   import QrScanner from "qr-scanner";
   import { onMount, onDestroy } from "svelte";
   import { back } from "$lib/utils";
   import { goto } from "$app/navigation";
 
-  let scanner, vid;
-  onMount(() => {
-    scanner = new QrScanner(
-      vid,
-      ({ data }) => scanner.stop() || goto(`/send/${encodeURI(data)}`),
-      {
-        highlightScanRegion: true,
-        highlightCodeOutline: true,
-      }
-    );
+  let scanner, vid, resizing;
+
+  let resize = () => {
+    if (resizing) clearTimeout(resizing);
+    resizing = setTimeout(initialize, 1000);
+  };
+
+  let initialize = async () => {
+    if (scanner) {
+      scanner.stop();
+      await new Promise((r) => setTimeout(r, 1000));
+    }
+
+    let options = { highlightScanRegion: true, highlightCodeOutline: true };
+    let cb = ({ data }) => scanner.stop() || goto(`/send/${encodeURI(data)}`);
+    scanner = new QrScanner(vid, cb, options);
+    await tick();
     scanner.start();
-  });
+  };
 
+  onMount(initialize);
   onDestroy(() => scanner?.stop());
 </script>
 
+<svelte:window on:resize={resize} />
+
 <div class="flex w-full mb-4 px-4">
   <div class="bg-black mx-auto rounded-3xl">
     <video
       bind:this={vid}
-      class="border-4 rounded-3xl border-black md:max-w-[600px] !max-h-[80vh] !min-w-[300px]"
+      class="border-4 rounded-3xl border-black max-h-[calc(100vh*0.7)]"
     />
   </div>
 </div>