From 4d0463f7f7332dab58d6076578774fde66cf83a0 Mon Sep 17 00:00:00 2001
From: Trent Larson <trent@trentlarson.com>
Date: Tue, 13 May 2025 20:11:34 -0600
Subject: [PATCH] update with lint-fix

---
 src/components/QuickNav.vue                  |  5 +-
 src/services/QRScanner/WebInlineQRScanner.ts | 84 +++++++++++++-------
 src/views/ContactQRScanShowView.vue          |  8 +-
 src/views/ContactQRScanView.vue              |  4 +-
 4 files changed, 66 insertions(+), 35 deletions(-)

diff --git a/src/components/QuickNav.vue b/src/components/QuickNav.vue
index 64a0bef3..6a6f6168 100644
--- a/src/components/QuickNav.vue
+++ b/src/components/QuickNav.vue
@@ -1,6 +1,9 @@
 <template>
   <!-- QUICK NAV -->
-  <nav id="QuickNav" class="fixed bottom-0 left-0 right-0 bg-slate-200 z-50 pb-[env(safe-area-inset-bottom)]">
+  <nav
+    id="QuickNav"
+    class="fixed bottom-0 left-0 right-0 bg-slate-200 z-50 pb-[env(safe-area-inset-bottom)]"
+  >
     <ul class="flex text-2xl px-6 py-2 gap-1 max-w-3xl mx-auto">
       <!-- Home Feed -->
       <li
diff --git a/src/services/QRScanner/WebInlineQRScanner.ts b/src/services/QRScanner/WebInlineQRScanner.ts
index d7457420..e7560415 100644
--- a/src/services/QRScanner/WebInlineQRScanner.ts
+++ b/src/services/QRScanner/WebInlineQRScanner.ts
@@ -159,7 +159,9 @@ export class WebInlineQRScanner implements QRScannerService {
 
   async isSupported(): Promise<boolean> {
     try {
-      logger.error(`[WebInlineQRScanner:${this.id}] Checking browser support...`);
+      logger.error(
+        `[WebInlineQRScanner:${this.id}] Checking browser support...`,
+      );
       // Check for secure context first
       if (!window.isSecureContext) {
         logger.error(
@@ -279,51 +281,63 @@ export class WebInlineQRScanner implements QRScannerService {
 
       // Scan for QR code
       const code = jsQR(imageData.data, imageData.width, imageData.height, {
-        inversionAttempts: "attemptBoth",  // Try both normal and inverted
+        inversionAttempts: "attemptBoth", // Try both normal and inverted
       });
 
       if (code) {
         // Check if the QR code is blurry by examining the location points
-        const { topRightCorner, topLeftCorner, bottomLeftCorner } = code.location;
+        const { topRightCorner, topLeftCorner, bottomLeftCorner } =
+          code.location;
         const width = Math.sqrt(
-          Math.pow(topRightCorner.x - topLeftCorner.x, 2) + Math.pow(topRightCorner.y - topLeftCorner.y, 2)
+          Math.pow(topRightCorner.x - topLeftCorner.x, 2) +
+            Math.pow(topRightCorner.y - topLeftCorner.y, 2),
         );
         const height = Math.sqrt(
-          Math.pow(bottomLeftCorner.x - topLeftCorner.x, 2) + Math.pow(bottomLeftCorner.y - topLeftCorner.y, 2)
+          Math.pow(bottomLeftCorner.x - topLeftCorner.x, 2) +
+            Math.pow(bottomLeftCorner.y - topLeftCorner.y, 2),
         );
-        
+
         // Adjust minimum size based on canvas dimensions
         const minSize = Math.min(this.canvas.width, this.canvas.height) * 0.1; // 10% of the smaller dimension
-        const isBlurry = width < minSize || height < minSize || 
-                        !code.data || code.data.length === 0;
+        const isBlurry =
+          width < minSize ||
+          height < minSize ||
+          !code.data ||
+          code.data.length === 0;
 
         logger.error(`[WebInlineQRScanner:${this.id}] QR Code detected:`, {
           data: code.data,
           location: code.location,
           attempts: this.scanAttempts,
           isBlurry,
-          dimensions: { 
-            width, 
-            height, 
+          dimensions: {
+            width,
+            height,
             minSize,
             canvasWidth: this.canvas.width,
             canvasHeight: this.canvas.height,
             relativeWidth: width / this.canvas.width,
-            relativeHeight: height / this.canvas.height
+            relativeHeight: height / this.canvas.height,
           },
           corners: {
             topLeft: topLeftCorner,
             topRight: topRightCorner,
-            bottomLeft: bottomLeftCorner
-          }
+            bottomLeft: bottomLeftCorner,
+          },
         });
 
         if (isBlurry) {
           if (this.scanListener?.onError) {
-            this.scanListener.onError(new Error("QR code detected but too blurry to read. Please hold the camera steady and ensure the QR code is well-lit."));
+            this.scanListener.onError(
+              new Error(
+                "QR code detected but too blurry to read. Please hold the camera steady and ensure the QR code is well-lit.",
+              ),
+            );
           }
           // Continue scanning if QR code is blurry
-          this.animationFrameId = requestAnimationFrame(() => this.scanQRCode());
+          this.animationFrameId = requestAnimationFrame(() =>
+            this.scanQRCode(),
+          );
           return;
         }
 
@@ -342,17 +356,21 @@ export class WebInlineQRScanner implements QRScannerService {
         error: error instanceof Error ? error.message : String(error),
         stack: error instanceof Error ? error.stack : undefined,
         attempt: this.scanAttempts,
-        videoState: this.video ? {
-          readyState: this.video.readyState,
-          paused: this.video.paused,
-          ended: this.video.ended,
-          width: this.video.videoWidth,
-          height: this.video.videoHeight
-        } : null,
-        canvasState: this.canvas ? {
-          width: this.canvas.width,
-          height: this.canvas.height
-        } : null
+        videoState: this.video
+          ? {
+              readyState: this.video.readyState,
+              paused: this.video.paused,
+              ended: this.video.ended,
+              width: this.video.videoWidth,
+              height: this.video.videoHeight,
+            }
+          : null,
+        canvasState: this.canvas
+          ? {
+              width: this.canvas.width,
+              height: this.canvas.height,
+            }
+          : null,
       });
       if (this.scanListener?.onError) {
         this.scanListener.onError(
@@ -375,7 +393,9 @@ export class WebInlineQRScanner implements QRScannerService {
       logger.error(`[WebInlineQRScanner:${this.id}] Starting scan`);
 
       // Get camera stream
-      logger.error(`[WebInlineQRScanner:${this.id}] Requesting camera stream...`);
+      logger.error(
+        `[WebInlineQRScanner:${this.id}] Requesting camera stream...`,
+      );
       this.stream = await navigator.mediaDevices.getUserMedia({
         video: {
           facingMode: "environment",
@@ -441,7 +461,9 @@ export class WebInlineQRScanner implements QRScannerService {
       if (this.animationFrameId !== null) {
         cancelAnimationFrame(this.animationFrameId);
         this.animationFrameId = null;
-        logger.error(`[WebInlineQRScanner:${this.id}] Animation frame cancelled`);
+        logger.error(
+          `[WebInlineQRScanner:${this.id}] Animation frame cancelled`,
+        );
       }
 
       // Stop video
@@ -490,7 +512,9 @@ export class WebInlineQRScanner implements QRScannerService {
   }
 
   onStream(callback: (stream: MediaStream | null) => void): void {
-    logger.error(`[WebInlineQRScanner:${this.id}] Adding stream event listener`);
+    logger.error(
+      `[WebInlineQRScanner:${this.id}] Adding stream event listener`,
+    );
     this.events.on("stream", callback);
   }
 
diff --git a/src/views/ContactQRScanShowView.vue b/src/views/ContactQRScanShowView.vue
index 3ff8a68c..9fd6a981 100644
--- a/src/views/ContactQRScanShowView.vue
+++ b/src/views/ContactQRScanShowView.vue
@@ -141,7 +141,9 @@
           @camera-off="onCameraOff"
         />
 
-        <div class="absolute bottom-4 inset-x-0 flex justify-center items-center">
+        <div
+          class="absolute bottom-4 inset-x-0 flex justify-center items-center"
+        >
           <!-- Camera Stop Button -->
           <button
             class="text-center text-slate-600 leading-none bg-white p-2 rounded-full drop-shadow-lg"
@@ -154,7 +156,8 @@
       </div>
       <div
         v-else
-        class="flex items-center justify-center aspect-square overflow-hidden bg-slate-800 w-[90vw] max-w-[40vh] mx-auto">
+        class="flex items-center justify-center aspect-square overflow-hidden bg-slate-800 w-[90vw] max-w-[40vh] mx-auto"
+      >
         <button
           v-if="isNativePlatform"
           class="bg-gradient-to-b from-blue-400 to-blue-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white text-lg px-3 py-2 rounded-lg"
@@ -181,7 +184,6 @@ import { Component, Vue } from "vue-facing-decorator";
 import { useClipboard } from "@vueuse/core";
 import { Capacitor } from "@capacitor/core";
 import { QrcodeStream } from "vue-qrcode-reader";
-import type { RouteLocationNormalized, NavigationGuardNext } from "vue-router";
 
 import QuickNav from "../components/QuickNav.vue";
 import UserNameDialog from "../components/UserNameDialog.vue";
diff --git a/src/views/ContactQRScanView.vue b/src/views/ContactQRScanView.vue
index 7dff213c..ae90b964 100644
--- a/src/views/ContactQRScanView.vue
+++ b/src/views/ContactQRScanView.vue
@@ -1,7 +1,9 @@
 <template>
   <!-- CONTENT -->
   <section id="Content" class="relativew-[100vw] h-[100vh]">
-    <div class="absolute inset-x-0 bottom-0 bg-black/50 p-6 pb-[calc(env(safe-area-inset-bottom)+1.5rem)]">
+    <div
+      class="absolute inset-x-0 bottom-0 bg-black/50 p-6 pb-[calc(env(safe-area-inset-bottom)+1.5rem)]"
+    >
       <p class="text-center text-white mb-3">
         Point your camera at a TimeSafari contact QR code to scan it
         automatically.