jsnbuchanan/crowd-funder-for-time-pwa
1
0
Fork 1
forked from trent_larson/crowd-funder-for-time-pwa
Code Issues Pull Requests Projects Releases Wiki Activity

update with lint-fix

Browse Source
This commit is contained in:
Trent Larson
2025-05-13 20:11:34 -06:00
parent c4a331d0e2
commit 3600e894d4
4 changed files with 66 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
src/components/QuickNav.vue
View File

@@ -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

84
src/services/QRScanner/WebInlineQRScanner.ts
View File

@@ -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);
}

8
src/views/ContactQRScanShowView.vue
View File

@@ -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";

4
src/views/ContactQRScanView.vue
View File

@@ -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.