forked from trent_larson/crowd-funder-for-time-pwa
chore: updates for qr code reader rules, linting, and cleanup
This commit is contained in:
Matt Raymer
@@ -1,722 +0,0 @@
|
||||
<!-- QRScannerDialog.vue -->
|
||||
<template>
|
||||
<div
|
||||
v-if="visible && !isNativePlatform"
|
||||
class="dialog-overlay z-[60] fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center"
|
||||
>
|
||||
<div
|
||||
class="dialog relative bg-white rounded-lg shadow-xl max-w-lg w-full mx-4"
|
||||
>
|
||||
<!-- Header -->
|
||||
<div
|
||||
class="p-4 border-b border-gray-200 flex justify-between items-center"
|
||||
>
|
||||
<div>
|
||||
<h3 class="text-lg font-medium text-gray-900">Scan QR Code</h3>
|
||||
<span class="text-xs text-gray-500">v1.1.0</span>
|
||||
</div>
|
||||
<button
|
||||
class="text-gray-400 hover:text-gray-500"
|
||||
aria-label="Close dialog"
|
||||
@click="close"
|
||||
>
|
||||
<svg
|
||||
class="h-6 w-6"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke="currentColor"
|
||||
>
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2"
|
||||
d="M6 18L18 6M6 6l12 12"
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Scanner -->
|
||||
<div class="p-4">
|
||||
<div
|
||||
v-if="useQRReader && !isNativePlatform"
|
||||
class="relative aspect-square"
|
||||
>
|
||||
<!-- Status Message -->
|
||||
<div
|
||||
class="absolute top-0 left-0 right-0 bg-black bg-opacity-50 text-white text-center py-2 z-10"
|
||||
>
|
||||
<div
|
||||
v-if="isInitializing"
|
||||
class="flex items-center justify-center space-x-2"
|
||||
>
|
||||
<svg
|
||||
class="animate-spin h-5 w-5 text-white"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<circle
|
||||
class="opacity-25"
|
||||
cx="12"
|
||||
cy="12"
|
||||
r="10"
|
||||
stroke="currentColor"
|
||||
stroke-width="4"
|
||||
></circle>
|
||||
<path
|
||||
class="opacity-75"
|
||||
fill="currentColor"
|
||||
d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0
|
||||
3.042 1.135 5.824 3 7.938l3-2.647z"
|
||||
></path>
|
||||
</svg>
|
||||
<span>{{ initializationStatus }}</span>
|
||||
</div>
|
||||
<p
|
||||
v-else-if="isScanning"
|
||||
class="flex items-center justify-center space-x-2"
|
||||
>
|
||||
<span
|
||||
class="inline-block w-2 h-2 bg-green-500 rounded-full animate-pulse"
|
||||
></span>
|
||||
<span>Position QR code in the frame</span>
|
||||
</p>
|
||||
<p v-else-if="error" class="text-red-300">
|
||||
<span class="font-medium">Error:</span> {{ error }}
|
||||
</p>
|
||||
<p v-else class="flex items-center justify-center space-x-2">
|
||||
<span
|
||||
class="inline-block w-2 h-2 bg-blue-500 rounded-full"
|
||||
></span>
|
||||
<span>Ready to scan</span>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<qrcode-stream
|
||||
:camera="preferredCamera"
|
||||
@decode="onDecode"
|
||||
@init="onInit"
|
||||
@detect="onDetect"
|
||||
@error="onError"
|
||||
@camera-on="onCameraOn"
|
||||
@camera-off="onCameraOff"
|
||||
/>
|
||||
|
||||
<!-- Scanning Frame -->
|
||||
<div
|
||||
class="absolute inset-0 border-2"
|
||||
:class="{
|
||||
'border-blue-500': !error && !isScanning,
|
||||
'border-green-500 animate-pulse': isScanning,
|
||||
'border-red-500': error,
|
||||
}"
|
||||
style="opacity: 0.5; pointer-events: none"
|
||||
></div>
|
||||
|
||||
<!-- Debug Info -->
|
||||
<div
|
||||
class="absolute bottom-16 left-0 right-0 bg-black bg-opacity-50 text-white text-xs text-center py-1"
|
||||
>
|
||||
Camera: {{ preferredCamera === "user" ? "Front" : "Back" }} |
|
||||
Status: {{ cameraStatus }}
|
||||
</div>
|
||||
|
||||
<!-- Camera Switch Button -->
|
||||
<button
|
||||
class="absolute bottom-4 right-4 bg-white rounded-full p-2 shadow-lg"
|
||||
title="Switch camera"
|
||||
@click="toggleCamera"
|
||||
>
|
||||
<svg
|
||||
class="h-6 w-6 text-gray-600"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke="currentColor"
|
||||
>
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2"
|
||||
d="M3 9a2 2 0 012-2h.93a2 2 0 001.664-.89l.812-1.22A2 2 0 0110.07 4h3.86a2 2 0
|
||||
011.664.89l.812 1.22A2 2 0 0018.07 7H19a2 2 0 012 2v9a2 2 0 01-2 2H5a2 2 0 01-2-2V9z"
|
||||
/>
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2"
|
||||
d="M15 13a3 3 0 11-6 0 3 3 0 016 0z"
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
<div v-else class="text-center py-8">
|
||||
<p class="text-gray-500">
|
||||
{{
|
||||
isNativePlatform
|
||||
? "Using native camera scanner..."
|
||||
: "QR code scanning is not supported in this browser."
|
||||
}}
|
||||
</p>
|
||||
<p v-if="!isNativePlatform" class="text-sm text-gray-400 mt-2">
|
||||
Please ensure you're using a modern browser with camera access.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Error Banner -->
|
||||
<div
|
||||
v-if="error"
|
||||
class="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded relative mb-4"
|
||||
role="alert"
|
||||
>
|
||||
<strong class="font-bold">Camera Error:</strong>
|
||||
<span class="block sm:inline">{{ error }}</span>
|
||||
<ul class="mt-2 text-sm text-red-600 list-disc list-inside">
|
||||
<li v-if="error.includes('No camera found')">
|
||||
Check if your device has a camera and it is enabled.
|
||||
</li>
|
||||
<li v-if="error.includes('denied')">
|
||||
Allow camera access in your browser settings and reload the page.
|
||||
</li>
|
||||
<li v-if="error.includes('in use')">
|
||||
Close other applications that may be using the camera.
|
||||
</li>
|
||||
<li v-if="error.includes('HTTPS')">
|
||||
Ensure you are using a secure (HTTPS) connection.
|
||||
</li>
|
||||
<li
|
||||
v-if="
|
||||
!error.includes('No camera found') &&
|
||||
!error.includes('denied') &&
|
||||
!error.includes('in use') &&
|
||||
!error.includes('HTTPS')
|
||||
"
|
||||
>
|
||||
Try refreshing the page or using a different browser/device.
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<!-- Footer -->
|
||||
<div class="p-4 border-t border-gray-200">
|
||||
<div class="flex flex-col space-y-4">
|
||||
<!-- Instructions -->
|
||||
<div class="text-sm text-gray-600">
|
||||
<ul class="list-disc list-inside space-y-1">
|
||||
<li>Ensure the QR code is well-lit and in focus</li>
|
||||
<li>Hold your device steady</li>
|
||||
<li>The QR code should fit within the scanning frame</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<!-- Error Message -->
|
||||
<p v-if="error" class="text-red-500 text-sm">{{ error }}</p>
|
||||
|
||||
<!-- Actions -->
|
||||
<div class="flex justify-end space-x-2">
|
||||
<button
|
||||
v-if="error"
|
||||
class="px-4 py-2 bg-blue-500 text-white rounded-md hover:bg-blue-600"
|
||||
@click="retryScanning"
|
||||
>
|
||||
Retry
|
||||
</button>
|
||||
<button
|
||||
class="px-4 py-2 bg-gray-100 text-gray-700 rounded-md hover:bg-gray-200"
|
||||
@click="close"
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
<button
|
||||
class="px-4 py-2 bg-gray-500 text-white rounded-md hover:bg-gray-600"
|
||||
@click="copyLogs"
|
||||
>
|
||||
Copy Debug Logs
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="errorMessage" class="error-message">{{ errorMessage }}</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { Component, Prop, Vue } from "vue-facing-decorator";
|
||||
import { QrcodeStream } from "vue-qrcode-reader";
|
||||
import { QRScannerOptions } from "@/services/QRScanner/types";
|
||||
import { logger } from "@/utils/logger";
|
||||
import { Capacitor } from "@capacitor/core";
|
||||
import { logCollector } from "@/utils/LogCollector";
|
||||
|
||||
interface ScanProps {
|
||||
onScan: (result: string) => void;
|
||||
onError?: (error: Error) => void;
|
||||
options?: QRScannerOptions;
|
||||
onClose?: () => void;
|
||||
}
|
||||
|
||||
interface DetectionResult {
|
||||
content?: string;
|
||||
location?: {
|
||||
topLeft: { x: number; y: number };
|
||||
topRight: { x: number; y: number };
|
||||
bottomLeft: { x: number; y: number };
|
||||
bottomRight: { x: number; y: number };
|
||||
};
|
||||
}
|
||||
|
||||
@Component({
|
||||
components: {
|
||||
QrcodeStream,
|
||||
},
|
||||
})
|
||||
export default class QRScannerDialog extends Vue {
|
||||
@Prop({ type: Function, required: true }) onScan!: ScanProps["onScan"];
|
||||
@Prop({ type: Function }) onError?: ScanProps["onError"];
|
||||
@Prop({ type: Object }) options?: ScanProps["options"];
|
||||
@Prop({ type: Function }) onClose?: ScanProps["onClose"];
|
||||
|
||||
// Version
|
||||
readonly version = "1.1.0";
|
||||
|
||||
visible = true;
|
||||
error: string | null = null;
|
||||
useQRReader = __USE_QR_READER__;
|
||||
isNativePlatform =
|
||||
Capacitor.isNativePlatform() ||
|
||||
__IS_MOBILE__ ||
|
||||
Capacitor.getPlatform() === "android" ||
|
||||
Capacitor.getPlatform() === "ios";
|
||||
|
||||
isInitializing = true;
|
||||
isScanning = false;
|
||||
preferredCamera: "user" | "environment" = "environment";
|
||||
initializationStatus = "Checking camera access...";
|
||||
cameraStatus = "Initializing";
|
||||
errorMessage = "";
|
||||
|
||||
created() {
|
||||
logger.log("[QRScannerDialog] created");
|
||||
logger.log("[QRScannerDialog] Props received:", {
|
||||
onScan: typeof this.onScan,
|
||||
onError: typeof this.onError,
|
||||
options: this.options,
|
||||
onClose: typeof this.onClose,
|
||||
});
|
||||
logger.log("[QRScannerDialog] Initial state:", {
|
||||
visible: this.visible,
|
||||
error: this.error,
|
||||
useQRReader: this.useQRReader,
|
||||
isNativePlatform: this.isNativePlatform,
|
||||
isInitializing: this.isInitializing,
|
||||
isScanning: this.isScanning,
|
||||
preferredCamera: this.preferredCamera,
|
||||
initializationStatus: this.initializationStatus,
|
||||
cameraStatus: this.cameraStatus,
|
||||
errorMessage: this.errorMessage,
|
||||
});
|
||||
logger.log("QRScannerDialog platform detection:", {
|
||||
capacitorNative: Capacitor.isNativePlatform(),
|
||||
isMobile: __IS_MOBILE__,
|
||||
platform: Capacitor.getPlatform(),
|
||||
useQRReader: this.useQRReader,
|
||||
isNativePlatform: this.isNativePlatform,
|
||||
userAgent: navigator.userAgent,
|
||||
mediaDevices: !!navigator.mediaDevices,
|
||||
getUserMedia: !!(
|
||||
navigator.mediaDevices && navigator.mediaDevices.getUserMedia
|
||||
),
|
||||
});
|
||||
if (this.isNativePlatform) {
|
||||
logger.log("Closing QR dialog on native platform");
|
||||
this.$nextTick(() => this.close());
|
||||
}
|
||||
}
|
||||
|
||||
mounted() {
|
||||
logger.log("[QRScannerDialog] mounted");
|
||||
// Timer to warn if no QR code detected after 10 seconds
|
||||
this._scanTimeout = setTimeout(() => {
|
||||
if (!this.isScanning) {
|
||||
logger.warn("[QRScannerDialog] No QR code detected after 10 seconds");
|
||||
}
|
||||
}, 10000);
|
||||
// Periodic timer to log waiting status every 5 seconds
|
||||
this._waitingInterval = setInterval(() => {
|
||||
if (!this.isScanning && this.cameraStatus === "Active") {
|
||||
logger.log("[QRScannerDialog] Still waiting for QR code detection...");
|
||||
}
|
||||
}, 5000);
|
||||
logger.log("[QRScannerDialog] Waiting interval started");
|
||||
}
|
||||
|
||||
beforeUnmount() {
|
||||
if (this._scanTimeout) {
|
||||
clearTimeout(this._scanTimeout);
|
||||
logger.log("[QRScannerDialog] Scan timeout cleared");
|
||||
}
|
||||
if (this._waitingInterval) {
|
||||
clearInterval(this._waitingInterval);
|
||||
logger.log("[QRScannerDialog] Waiting interval cleared");
|
||||
}
|
||||
logger.log("[QRScannerDialog] beforeUnmount");
|
||||
}
|
||||
|
||||
async onInit(promise: Promise<void>): Promise<void> {
|
||||
logger.log("[QRScannerDialog] onInit called");
|
||||
if (this.isNativePlatform) {
|
||||
logger.log("Closing QR dialog on native platform");
|
||||
this.$nextTick(() => this.close());
|
||||
return;
|
||||
}
|
||||
this.isInitializing = true;
|
||||
logger.log("[QRScannerDialog] isInitializing set to", this.isInitializing);
|
||||
this.error = null;
|
||||
this.initializationStatus = "Checking camera access...";
|
||||
logger.log(
|
||||
"[QRScannerDialog] initializationStatus set to",
|
||||
this.initializationStatus,
|
||||
);
|
||||
try {
|
||||
if (!navigator.mediaDevices) {
|
||||
logger.log("[QRScannerDialog] Camera API not available");
|
||||
throw new Error(
|
||||
"Camera API not available. Please ensure you're using HTTPS.",
|
||||
);
|
||||
}
|
||||
const devices = await navigator.mediaDevices.enumerateDevices();
|
||||
const videoDevices = devices.filter(
|
||||
(device) => device.kind === "videoinput",
|
||||
);
|
||||
logger.log("[QRScannerDialog] videoDevices found:", videoDevices.length);
|
||||
if (videoDevices.length === 0) {
|
||||
throw new Error("No camera found on this device");
|
||||
}
|
||||
this.initializationStatus = "Requesting camera permission...";
|
||||
logger.log(
|
||||
"[QRScannerDialog] initializationStatus set to",
|
||||
this.initializationStatus,
|
||||
);
|
||||
try {
|
||||
const stream = await navigator.mediaDevices.getUserMedia({
|
||||
video: {
|
||||
facingMode: this.preferredCamera,
|
||||
width: { ideal: 1280 },
|
||||
height: { ideal: 720 },
|
||||
},
|
||||
});
|
||||
stream.getTracks().forEach((track) => track.stop());
|
||||
this.initializationStatus = "Camera permission granted...";
|
||||
logger.log(
|
||||
"[QRScannerDialog] initializationStatus set to",
|
||||
this.initializationStatus,
|
||||
);
|
||||
} catch (permissionError) {
|
||||
const error = permissionError as Error;
|
||||
logger.log(
|
||||
"[QRScannerDialog] Camera permission error:",
|
||||
error.name,
|
||||
error.message,
|
||||
);
|
||||
if (
|
||||
error.name === "NotAllowedError" ||
|
||||
error.name === "PermissionDeniedError"
|
||||
) {
|
||||
throw new Error(
|
||||
"Camera access denied. Please grant camera permission and try again.",
|
||||
);
|
||||
} else if (
|
||||
error.name === "NotFoundError" ||
|
||||
error.name === "DevicesNotFoundError"
|
||||
) {
|
||||
throw new Error(
|
||||
"No camera found. Please ensure your device has a camera.",
|
||||
);
|
||||
} else if (
|
||||
error.name === "NotReadableError" ||
|
||||
error.name === "TrackStartError"
|
||||
) {
|
||||
throw new Error("Camera is in use by another application.");
|
||||
} else {
|
||||
throw new Error(`Camera error: ${error.message}`);
|
||||
}
|
||||
}
|
||||
this.initializationStatus = "Starting QR scanner...";
|
||||
logger.log(
|
||||
"[QRScannerDialog] initializationStatus set to",
|
||||
this.initializationStatus,
|
||||
);
|
||||
await promise;
|
||||
this.isInitializing = false;
|
||||
this.cameraStatus = "Ready";
|
||||
logger.log("[QRScannerDialog] QR scanner initialized successfully");
|
||||
logger.log("[QRScannerDialog] cameraStatus set to", this.cameraStatus);
|
||||
} catch (error) {
|
||||
const wrappedError =
|
||||
error instanceof Error ? error : new Error(String(error));
|
||||
this.error = wrappedError.message;
|
||||
this.cameraStatus = "Error";
|
||||
logger.log(
|
||||
"[QRScannerDialog] Error initializing QR scanner:",
|
||||
wrappedError.message,
|
||||
);
|
||||
logger.log("[QRScannerDialog] cameraStatus set to", this.cameraStatus);
|
||||
if (this.onError) {
|
||||
this.onError(wrappedError);
|
||||
}
|
||||
} finally {
|
||||
this.isInitializing = false;
|
||||
logger.log(
|
||||
"[QRScannerDialog] isInitializing set to",
|
||||
this.isInitializing,
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
onCameraOn(): void {
|
||||
this.cameraStatus = "Active";
|
||||
logger.log("[QRScannerDialog] Camera turned on successfully");
|
||||
logger.log("[QRScannerDialog] cameraStatus set to", this.cameraStatus);
|
||||
}
|
||||
|
||||
onCameraOff(): void {
|
||||
this.cameraStatus = "Off";
|
||||
logger.log("[QRScannerDialog] Camera turned off");
|
||||
logger.log("[QRScannerDialog] cameraStatus set to", this.cameraStatus);
|
||||
}
|
||||
|
||||
onDetect(result: DetectionResult | Promise<DetectionResult>): void {
|
||||
const ts = new Date().toISOString();
|
||||
logger.log(`[QRScannerDialog] onDetect called at ${ts} with`, result);
|
||||
this.isScanning = true;
|
||||
this.cameraStatus = "Detecting";
|
||||
logger.log("[QRScannerDialog] isScanning set to", this.isScanning);
|
||||
logger.log("[QRScannerDialog] cameraStatus set to", this.cameraStatus);
|
||||
const processResult = (detection: DetectionResult | DetectionResult[]) => {
|
||||
try {
|
||||
logger.log(
|
||||
`[QRScannerDialog] onDetect exit at ${new Date().toISOString()} with detection:`,
|
||||
detection,
|
||||
);
|
||||
// Fallback: If detection is an array, check the first element
|
||||
let rawValue: string | undefined;
|
||||
if (
|
||||
Array.isArray(detection) &&
|
||||
detection.length > 0 &&
|
||||
"rawValue" in detection[0]
|
||||
) {
|
||||
rawValue = detection[0].rawValue;
|
||||
} else if (
|
||||
detection &&
|
||||
typeof detection === "object" &&
|
||||
"rawValue" in detection &&
|
||||
detection.rawValue
|
||||
) {
|
||||
rawValue = (detection as unknown).rawValue;
|
||||
}
|
||||
if (rawValue) {
|
||||
logger.log(
|
||||
"[QRScannerDialog] Fallback: Detected rawValue, treating as scan:",
|
||||
rawValue,
|
||||
);
|
||||
this.isInitializing = false;
|
||||
this.initializationStatus = "QR code captured!";
|
||||
this.onScan(rawValue);
|
||||
try {
|
||||
logger.log("[QRScannerDialog] About to call close() after scan");
|
||||
this.close();
|
||||
logger.log(
|
||||
"[QRScannerDialog] close() called successfully after scan",
|
||||
);
|
||||
} catch (err) {
|
||||
logger.error("[QRScannerDialog] Error calling close():", err);
|
||||
}
|
||||
}
|
||||
} catch (error) {
|
||||
this.handleError(error);
|
||||
} finally {
|
||||
this.isScanning = false;
|
||||
this.cameraStatus = "Active";
|
||||
logger.log("[QRScannerDialog] isScanning set to", this.isScanning);
|
||||
logger.log("[QRScannerDialog] cameraStatus set to", this.cameraStatus);
|
||||
}
|
||||
};
|
||||
if (result instanceof Promise) {
|
||||
result
|
||||
.then(processResult)
|
||||
.catch((error: Error) => this.handleError(error))
|
||||
.finally(() => {
|
||||
this.isScanning = false;
|
||||
this.cameraStatus = "Active";
|
||||
logger.log("[QRScannerDialog] isScanning set to", this.isScanning);
|
||||
logger.log(
|
||||
"[QRScannerDialog] cameraStatus set to",
|
||||
this.cameraStatus,
|
||||
);
|
||||
});
|
||||
} else {
|
||||
processResult(result);
|
||||
}
|
||||
}
|
||||
|
||||
private handleError(error: unknown): void {
|
||||
const wrappedError =
|
||||
error instanceof Error ? error : new Error(String(error));
|
||||
this.error = wrappedError.message;
|
||||
this.cameraStatus = "Error";
|
||||
logger.log("[QRScannerDialog] handleError:", wrappedError.message);
|
||||
logger.log("[QRScannerDialog] cameraStatus set to", this.cameraStatus);
|
||||
if (this.onError) {
|
||||
this.onError(wrappedError);
|
||||
}
|
||||
}
|
||||
|
||||
onDecode(result: string): void {
|
||||
const ts = new Date().toISOString();
|
||||
logger.log(
|
||||
`[QRScannerDialog] onDecode called at ${ts} with result:`,
|
||||
result,
|
||||
);
|
||||
try {
|
||||
this.isInitializing = false;
|
||||
this.initializationStatus = "QR code captured!";
|
||||
logger.log(
|
||||
"[QRScannerDialog] UI state updated after scan: isInitializing set to",
|
||||
this.isInitializing,
|
||||
", initializationStatus set to",
|
||||
this.initializationStatus,
|
||||
);
|
||||
this.onScan(result);
|
||||
this.close();
|
||||
logger.log(
|
||||
`[QRScannerDialog] onDecode exit at ${new Date().toISOString()}`,
|
||||
);
|
||||
} catch (error) {
|
||||
this.handleError(error);
|
||||
}
|
||||
}
|
||||
|
||||
toggleCamera(): void {
|
||||
const prevCamera = this.preferredCamera;
|
||||
this.preferredCamera =
|
||||
this.preferredCamera === "user" ? "environment" : "user";
|
||||
logger.log(
|
||||
"[QRScannerDialog] toggleCamera from",
|
||||
prevCamera,
|
||||
"to",
|
||||
this.preferredCamera,
|
||||
);
|
||||
logger.log(
|
||||
"[QRScannerDialog] preferredCamera set to",
|
||||
this.preferredCamera,
|
||||
);
|
||||
}
|
||||
|
||||
retryScanning(): void {
|
||||
logger.log("[QRScannerDialog] retryScanning called");
|
||||
this.error = null;
|
||||
this.isInitializing = true;
|
||||
logger.log("[QRScannerDialog] isInitializing set to", this.isInitializing);
|
||||
logger.log("[QRScannerDialog] Scanning re-initialized");
|
||||
}
|
||||
|
||||
close = async (): Promise<void> => {
|
||||
logger.log("[QRScannerDialog] close called");
|
||||
this.visible = false;
|
||||
logger.log("[QRScannerDialog] visible set to", this.visible);
|
||||
// Notify parent/service
|
||||
if (typeof this.onClose === "function") {
|
||||
logger.log("[QRScannerDialog] Calling onClose prop");
|
||||
this.onClose();
|
||||
}
|
||||
await this.$nextTick();
|
||||
if (this.$el && this.$el.parentNode) {
|
||||
this.$el.parentNode.removeChild(this.$el);
|
||||
logger.log("[QRScannerDialog] Dialog element removed from DOM");
|
||||
} else {
|
||||
logger.log("[QRScannerDialog] Dialog element NOT removed from DOM");
|
||||
}
|
||||
};
|
||||
|
||||
onScanDetect(promisedResult) {
|
||||
const ts = new Date().toISOString();
|
||||
logger.log(
|
||||
`[QRScannerDialog] onScanDetect called at ${ts} with`,
|
||||
promisedResult,
|
||||
);
|
||||
promisedResult
|
||||
.then((result) => {
|
||||
logger.log(
|
||||
`[QRScannerDialog] onScanDetect exit at ${new Date().toISOString()} with result:`,
|
||||
result,
|
||||
);
|
||||
this.onScan(result);
|
||||
})
|
||||
.catch((error) => {
|
||||
logger.error(
|
||||
`[QRScannerDialog] onScanDetect error at ${new Date().toISOString()}:`,
|
||||
error,
|
||||
);
|
||||
this.errorMessage = error.message || "Scan error";
|
||||
if (this.onError) this.onError(error);
|
||||
});
|
||||
}
|
||||
|
||||
onScanError(error) {
|
||||
const ts = new Date().toISOString();
|
||||
logger.error(`[QRScannerDialog] onScanError called at ${ts}:`, error);
|
||||
this.errorMessage = error.message || "Camera error";
|
||||
if (this.onError) this.onError(error);
|
||||
}
|
||||
|
||||
async startMobileScan() {
|
||||
try {
|
||||
logger.log("[QRScannerDialog] startMobileScan called");
|
||||
const scanner = QRScannerFactory.getInstance();
|
||||
await scanner.startScan();
|
||||
} catch (error) {
|
||||
logger.error("[QRScannerDialog] Error starting mobile scan:", error);
|
||||
if (this.onError) this.onError(error);
|
||||
}
|
||||
}
|
||||
|
||||
async copyLogs() {
|
||||
logger.log("[QRScannerDialog] copyLogs called");
|
||||
try {
|
||||
await navigator.clipboard.writeText(logCollector.getLogs());
|
||||
alert("Logs copied to clipboard!");
|
||||
} catch (e) {
|
||||
alert("Failed to copy logs: " + (e instanceof Error ? e.message : e));
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.dialog-overlay {
|
||||
backdrop-filter: blur(4px);
|
||||
}
|
||||
|
||||
.qrcode-stream {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
@keyframes pulse {
|
||||
0% {
|
||||
opacity: 0.5;
|
||||
}
|
||||
50% {
|
||||
opacity: 0.75;
|
||||
}
|
||||
100% {
|
||||
opacity: 0.5;
|
||||
}
|
||||
}
|
||||
|
||||
.animate-pulse {
|
||||
animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
|
||||
}
|
||||
</style>
|
||||
@@ -1,15 +0,0 @@
|
||||
export interface QRScannerListener {
|
||||
onScan: (result: string) => void;
|
||||
onError: (error: Error) => void;
|
||||
}
|
||||
|
||||
export interface QRScannerService {
|
||||
checkPermissions(): Promise<boolean>;
|
||||
requestPermissions(): Promise<boolean>;
|
||||
isSupported(): Promise<boolean>;
|
||||
startScan(): Promise<void>;
|
||||
stopScan(): Promise<void>;
|
||||
addListener(listener: QRScannerListener): void;
|
||||
cleanup(): Promise<void>;
|
||||
onStream(callback: (stream: MediaStream | null) => void): void;
|
||||
}
|
||||
@@ -1,263 +0,0 @@
|
||||
import { createApp, App } from "vue";
|
||||
import { QRScannerService, ScanListener, QRScannerOptions } from "./types";
|
||||
import QRScannerDialog from "@/components/QRScanner/QRScannerDialog.vue";
|
||||
import { logger } from "@/utils/logger";
|
||||
|
||||
export class WebDialogQRScanner implements QRScannerService {
|
||||
private dialogInstance: App | null = null;
|
||||
private dialogComponent: InstanceType<typeof QRScannerDialog> | null = null;
|
||||
private scanListener: ScanListener | null = null;
|
||||
private isScanning = false;
|
||||
private container: HTMLElement | null = null;
|
||||
private sessionId: number | null = null;
|
||||
private failsafeTimeout: unknown = null;
|
||||
|
||||
constructor(private options?: QRScannerOptions) {}
|
||||
|
||||
async checkPermissions(): Promise<boolean> {
|
||||
try {
|
||||
logger.log("[QRScanner] Checking camera permissions...");
|
||||
const permissions = await navigator.permissions.query({
|
||||
name: "camera" as PermissionName,
|
||||
});
|
||||
logger.log("[QRScanner] Permission state:", permissions.state);
|
||||
return permissions.state === "granted";
|
||||
} catch (error) {
|
||||
logger.error("[QRScanner] Error checking camera permissions:", error);
|
||||
return false;
|
||||
}
|
||||
}
|
||||
|
||||
async requestPermissions(): Promise<boolean> {
|
||||
try {
|
||||
// First check if we have any video devices
|
||||
const devices = await navigator.mediaDevices.enumerateDevices();
|
||||
const videoDevices = devices.filter(
|
||||
(device) => device.kind === "videoinput",
|
||||
);
|
||||
|
||||
if (videoDevices.length === 0) {
|
||||
logger.error("No video devices found");
|
||||
throw new Error("No camera found on this device");
|
||||
}
|
||||
|
||||
// Try to get a stream with specific constraints
|
||||
const stream = await navigator.mediaDevices.getUserMedia({
|
||||
video: {
|
||||
facingMode: "environment",
|
||||
width: { ideal: 1280 },
|
||||
height: { ideal: 720 },
|
||||
},
|
||||
});
|
||||
|
||||
// Stop the test stream immediately
|
||||
stream.getTracks().forEach((track) => track.stop());
|
||||
return true;
|
||||
} catch (error) {
|
||||
const wrappedError =
|
||||
error instanceof Error ? error : new Error(String(error));
|
||||
logger.error("Error requesting camera permissions:", {
|
||||
error: wrappedError.message,
|
||||
stack: wrappedError.stack,
|
||||
name: wrappedError.name,
|
||||
});
|
||||
|
||||
// Provide more specific error messages
|
||||
if (
|
||||
wrappedError.name === "NotFoundError" ||
|
||||
wrappedError.name === "DevicesNotFoundError"
|
||||
) {
|
||||
throw new Error("No camera found on this device");
|
||||
} else if (
|
||||
wrappedError.name === "NotAllowedError" ||
|
||||
wrappedError.name === "PermissionDeniedError"
|
||||
) {
|
||||
throw new Error(
|
||||
"Camera access denied. Please grant camera permission and try again",
|
||||
);
|
||||
} else if (
|
||||
wrappedError.name === "NotReadableError" ||
|
||||
wrappedError.name === "TrackStartError"
|
||||
) {
|
||||
throw new Error("Camera is in use by another application");
|
||||
} else {
|
||||
throw new Error(`Camera error: ${wrappedError.message}`);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
async isSupported(): Promise<boolean> {
|
||||
try {
|
||||
// Check for secure context first
|
||||
if (!window.isSecureContext) {
|
||||
logger.warn("Camera access requires HTTPS (secure context)");
|
||||
return false;
|
||||
}
|
||||
|
||||
// Check for camera API support
|
||||
if (!navigator.mediaDevices || !navigator.mediaDevices.getUserMedia) {
|
||||
logger.warn("Camera API not supported in this browser");
|
||||
return false;
|
||||
}
|
||||
|
||||
// Check if we have any video devices
|
||||
const devices = await navigator.mediaDevices.enumerateDevices();
|
||||
const hasVideoDevices = devices.some(
|
||||
(device) => device.kind === "videoinput",
|
||||
);
|
||||
|
||||
if (!hasVideoDevices) {
|
||||
logger.warn("No video devices found");
|
||||
return false;
|
||||
}
|
||||
|
||||
return true;
|
||||
} catch (error) {
|
||||
logger.error("Error checking camera support:", {
|
||||
error: error instanceof Error ? error.message : String(error),
|
||||
stack: error instanceof Error ? error.stack : undefined,
|
||||
});
|
||||
return false;
|
||||
}
|
||||
}
|
||||
|
||||
async startScan(): Promise<void> {
|
||||
if (this.isScanning) {
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
this.isScanning = true;
|
||||
this.sessionId = Date.now();
|
||||
logger.log(
|
||||
`[WebDialogQRScanner] Opening dialog, session: ${this.sessionId}`,
|
||||
);
|
||||
|
||||
// Create and mount dialog component
|
||||
this.container = document.createElement("div");
|
||||
document.body.appendChild(this.container);
|
||||
|
||||
this.dialogInstance = createApp(QRScannerDialog, {
|
||||
onScan: (result: string) => {
|
||||
if (this.scanListener) {
|
||||
this.scanListener.onScan(result);
|
||||
}
|
||||
},
|
||||
onError: (error: Error) => {
|
||||
if (this.scanListener?.onError) {
|
||||
this.scanListener.onError(error);
|
||||
}
|
||||
},
|
||||
onClose: () => {
|
||||
logger.log(
|
||||
`[WebDialogQRScanner] onClose received from dialog, session: ${this.sessionId}`,
|
||||
);
|
||||
this.stopScan("dialog onClose");
|
||||
},
|
||||
options: this.options,
|
||||
sessionId: this.sessionId,
|
||||
});
|
||||
|
||||
this.dialogComponent = this.dialogInstance.mount(
|
||||
this.container,
|
||||
) as InstanceType<typeof QRScannerDialog>;
|
||||
|
||||
// Failsafe: force cleanup after 60s if dialog is still open
|
||||
this.failsafeTimeout = setTimeout(() => {
|
||||
if (this.isScanning) {
|
||||
logger.warn(
|
||||
`[WebDialogQRScanner] Failsafe triggered, forcing cleanup for session: ${this.sessionId}`,
|
||||
);
|
||||
this.stopScan("failsafe timeout");
|
||||
}
|
||||
}, 60000);
|
||||
logger.log(
|
||||
`[WebDialogQRScanner] Failsafe timeout set for session: ${this.sessionId}`,
|
||||
);
|
||||
} catch (error) {
|
||||
this.isScanning = false;
|
||||
const wrappedError =
|
||||
error instanceof Error ? error : new Error(String(error));
|
||||
if (this.scanListener?.onError) {
|
||||
this.scanListener.onError(wrappedError);
|
||||
}
|
||||
logger.error("Error starting scan:", wrappedError);
|
||||
this.cleanupContainer();
|
||||
throw wrappedError;
|
||||
}
|
||||
}
|
||||
|
||||
async stopScan(reason: string = "manual"): Promise<void> {
|
||||
if (!this.isScanning) {
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
logger.log(
|
||||
`[WebDialogQRScanner] stopScan called, reason: ${reason}, session: ${this.sessionId}`,
|
||||
);
|
||||
if (this.dialogComponent) {
|
||||
await this.dialogComponent.close();
|
||||
logger.log(
|
||||
`[WebDialogQRScanner] dialogComponent.close() called, session: ${this.sessionId}`,
|
||||
);
|
||||
}
|
||||
if (this.dialogInstance) {
|
||||
this.dialogInstance.unmount();
|
||||
logger.log(
|
||||
`[WebDialogQRScanner] dialogInstance.unmount() called, session: ${this.sessionId}`,
|
||||
);
|
||||
}
|
||||
} catch (error) {
|
||||
const wrappedError =
|
||||
error instanceof Error ? error : new Error(String(error));
|
||||
logger.error("Error stopping scan:", wrappedError);
|
||||
throw wrappedError;
|
||||
} finally {
|
||||
this.isScanning = false;
|
||||
if (this.failsafeTimeout) {
|
||||
clearTimeout(this.failsafeTimeout);
|
||||
this.failsafeTimeout = null;
|
||||
logger.log(
|
||||
`[WebDialogQRScanner] Failsafe timeout cleared, session: ${this.sessionId}`,
|
||||
);
|
||||
}
|
||||
this.cleanupContainer();
|
||||
}
|
||||
}
|
||||
|
||||
addListener(listener: ScanListener): void {
|
||||
this.scanListener = listener;
|
||||
}
|
||||
|
||||
private cleanupContainer(): void {
|
||||
if (this.container && this.container.parentNode) {
|
||||
this.container.parentNode.removeChild(this.container);
|
||||
logger.log(
|
||||
`[WebDialogQRScanner] Dialog container removed from DOM, session: ${this.sessionId}`,
|
||||
);
|
||||
} else {
|
||||
logger.log(
|
||||
`[WebDialogQRScanner] Dialog container NOT removed from DOM, session: ${this.sessionId}`,
|
||||
);
|
||||
}
|
||||
this.container = null;
|
||||
}
|
||||
|
||||
async cleanup(): Promise<void> {
|
||||
try {
|
||||
await this.stopScan("cleanup");
|
||||
} catch (error) {
|
||||
const wrappedError =
|
||||
error instanceof Error ? error : new Error(String(error));
|
||||
logger.error("Error during cleanup:", wrappedError);
|
||||
throw wrappedError;
|
||||
} finally {
|
||||
this.dialogComponent = null;
|
||||
this.dialogInstance = null;
|
||||
this.scanListener = null;
|
||||
this.cleanupContainer();
|
||||
this.sessionId = null;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -75,8 +75,13 @@
|
||||
</div>
|
||||
|
||||
<div class="text-center">
|
||||
<h2 class="text-2xl text-center font-semibold mt-6 mb-2">Scan Contact Info</h2>
|
||||
<div v-if="isScanning" class="relative aspect-square rounded-xl overflow-hidden bg-slate-800 w-[67vw] max-w-[33vh] mx-auto">
|
||||
<h2 class="text-2xl text-center font-semibold mt-6 mb-2">
|
||||
Scan Contact Info
|
||||
</h2>
|
||||
<div
|
||||
v-if="isScanning"
|
||||
class="relative aspect-square rounded-xl overflow-hidden bg-slate-800 w-[67vw] max-w-[33vh] mx-auto"
|
||||
>
|
||||
<!-- Status Message -->
|
||||
<div
|
||||
class="absolute top-0 left-0 right-0 bg-black bg-opacity-50 text-white text-sm text-center py-2 z-10"
|
||||
@@ -117,9 +122,7 @@
|
||||
></span>
|
||||
<span>Position QR code in the frame</span>
|
||||
</p>
|
||||
<p v-else-if="error" class="text-red-400">
|
||||
Error: {{ error }}
|
||||
</p>
|
||||
<p v-else-if="error" class="text-red-400">Error: {{ error }}</p>
|
||||
<p v-else class="flex items-center justify-center space-x-2">
|
||||
<span class="inline-block w-2 h-2 bg-blue-500 rounded-full"></span>
|
||||
<span>Ready to scan</span>
|
||||
@@ -157,7 +160,7 @@
|
||||
<font-awesome icon="camera-rotate" class="size-6 text-gray-600" />
|
||||
</button>
|
||||
</div>
|
||||
<div class="mt-4" v-else>
|
||||
<div v-else class="mt-4">
|
||||
<button
|
||||
v-if="isNativePlatform"
|
||||
class="bg-blue-500 text-white px-4 py-2 rounded-md"
|
||||
|
||||
Reference in New Issue
Block a user