trent_larson/crowd-funder-for-time-pwa
4
1
Fork 2
Code Issues Pull Requests 24 Releases 5 Wiki Activity

style: improve code formatting and readability

Browse Source 
- Format Vue template attributes and event handlers for better readability
- Reorganize component props and event bindings
- Improve error handling and state management in QR scanner
- Add proper aria labels and accessibility attributes
- Refactor camera state handling in WebInlineQRScanner
- Clean up promise handling in WebPlatformService
- Standardize string quotes to double quotes
- Improve component structure and indentation

No functional changes, purely code style and maintainability improvements.
This commit is contained in:
Matt Raymer
2025-05-20 01:15:47 -04:00
parent 788d162b1c
commit a86e577127
7 changed files with 341 additions and 224 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,4 +1,10 @@
import { QRScannerService, ScanListener, QRScannerOptions, CameraState, CameraStateListener } from "./types";
import {
QRScannerService,
ScanListener,
QRScannerOptions,
CameraState,
CameraStateListener,
} from "./types";
import { logger } from "@/utils/logger";
import { EventEmitter } from "events";
import jsQR from "jsqr";
@@ -22,7 +28,7 @@ export class WebInlineQRScanner implements QRScannerService {
private readonly FRAME_INTERVAL = 1000 / 15; // ~67ms between frames
private lastFrameTime = 0;
private cameraStateListeners: Set<CameraStateListener> = new Set();
private currentState: CameraState = 'off';
private currentState: CameraState = "off";
private currentStateMessage?: string;
constructor(private options?: QRScannerOptions) {
@@ -49,15 +55,21 @@ export class WebInlineQRScanner implements QRScannerService {
private updateCameraState(state: CameraState, message?: string) {
this.currentState = state;
this.currentStateMessage = message;
this.cameraStateListeners.forEach(listener => {
this.cameraStateListeners.forEach((listener) => {
try {
listener.onStateChange(state, message);
logger.info(`[WebInlineQRScanner:${this.id}] Camera state changed to: ${state}`, {
state,
message,
});
logger.info(
`[WebInlineQRScanner:${this.id}] Camera state changed to: ${state}`,
{
state,
message,
},
);
} catch (error) {
logger.error(`[WebInlineQRScanner:${this.id}] Error in camera state listener:`, error);
logger.error(
`[WebInlineQRScanner:${this.id}] Error in camera state listener:`,
error,
);
}
});
}
@@ -74,7 +86,7 @@ export class WebInlineQRScanner implements QRScannerService {
async checkPermissions(): Promise<boolean> {
try {
this.updateCameraState('initializing', 'Checking camera permissions...');
this.updateCameraState("initializing", "Checking camera permissions...");
logger.error(
`[WebInlineQRScanner:${this.id}] Checking camera permissions...`,
);
@@ -86,7 +98,7 @@ export class WebInlineQRScanner implements QRScannerService {
permissions.state,
);
const granted = permissions.state === "granted";
this.updateCameraState(granted ? 'ready' : 'permission_denied');
this.updateCameraState(granted ? "ready" : "permission_denied");
return granted;
} catch (error) {
logger.error(
@@ -96,14 +108,17 @@ export class WebInlineQRScanner implements QRScannerService {
stack: error instanceof Error ? error.stack : undefined,
},
);
this.updateCameraState('error', 'Error checking camera permissions');
this.updateCameraState("error", "Error checking camera permissions");
return false;
}
}
async requestPermissions(): Promise<boolean> {
try {
this.updateCameraState('initializing', 'Requesting camera permissions...');
this.updateCameraState(
"initializing",
"Requesting camera permissions...",
);
logger.error(
`[WebInlineQRScanner:${this.id}] Requesting camera permissions...`,
);
@@ -141,8 +156,8 @@ export class WebInlineQRScanner implements QRScannerService {
},
});
this.updateCameraState('ready', 'Camera permissions granted');
this.updateCameraState("ready", "Camera permissions granted");
// Stop the test stream immediately
stream.getTracks().forEach((track) => {
logger.error(`[WebInlineQRScanner:${this.id}] Stopping test track:`, {
@@ -154,20 +169,35 @@ export class WebInlineQRScanner implements QRScannerService {
});
return true;
} catch (error) {
const wrappedError = error instanceof Error ? error : new Error(String(error));
const wrappedError =
error instanceof Error ? error : new Error(String(error));
// Update state based on error type
if (wrappedError.name === "NotFoundError" || wrappedError.name === "DevicesNotFoundError") {
this.updateCameraState('not_found', 'No camera found on this device');
if (
wrappedError.name === "NotFoundError" ||
wrappedError.name === "DevicesNotFoundError"
) {
this.updateCameraState("not_found", "No camera found on this device");
throw new Error("No camera found on this device");
} else if (wrappedError.name === "NotAllowedError" || wrappedError.name === "PermissionDeniedError") {
this.updateCameraState('permission_denied', 'Camera access denied');
throw new Error("Camera access denied. Please grant camera permission and try again");
} else if (wrappedError.name === "NotReadableError" || wrappedError.name === "TrackStartError") {
this.updateCameraState('in_use', 'Camera is in use by another application');
} else if (
wrappedError.name === "NotAllowedError" ||
wrappedError.name === "PermissionDeniedError"
) {
this.updateCameraState("permission_denied", "Camera access denied");
throw new Error(
"Camera access denied. Please grant camera permission and try again",
);
} else if (
wrappedError.name === "NotReadableError" ||
wrappedError.name === "TrackStartError"
) {
this.updateCameraState(
"in_use",
"Camera is in use by another application",
);
throw new Error("Camera is in use by another application");
} else {
this.updateCameraState('error', wrappedError.message);
this.updateCameraState("error", wrappedError.message);
throw new Error(`Camera error: ${wrappedError.message}`);
}
}
@@ -406,7 +436,7 @@ export class WebInlineQRScanner implements QRScannerService {
this.isScanning = true;
this.scanAttempts = 0;
this.lastScanTime = Date.now();
this.updateCameraState('initializing', 'Starting camera...');
this.updateCameraState("initializing", "Starting camera...");
logger.error(`[WebInlineQRScanner:${this.id}] Starting scan`);
// Get camera stream
@@ -421,8 +451,8 @@ export class WebInlineQRScanner implements QRScannerService {
},
});
this.updateCameraState('active', 'Camera is active');
this.updateCameraState("active", "Camera is active");
logger.error(`[WebInlineQRScanner:${this.id}] Camera stream obtained:`, {
tracks: this.stream.getTracks().map((t) => ({
kind: t.kind,
@@ -448,15 +478,22 @@ export class WebInlineQRScanner implements QRScannerService {
this.scanQRCode();
} catch (error) {
this.isScanning = false;
const wrappedError = error instanceof Error ? error : new Error(String(error));
const wrappedError =
error instanceof Error ? error : new Error(String(error));
// Update state based on error type
if (wrappedError.name === "NotReadableError" || wrappedError.name === "TrackStartError") {
this.updateCameraState('in_use', 'Camera is in use by another application');
if (
wrappedError.name === "NotReadableError" ||
wrappedError.name === "TrackStartError"
) {
this.updateCameraState(
"in_use",
"Camera is in use by another application",
);
} else {
this.updateCameraState('error', wrappedError.message);
this.updateCameraState("error", wrappedError.message);
}
if (this.scanListener?.onError) {
this.scanListener.onError(wrappedError);
}
@@ -513,8 +550,11 @@ export class WebInlineQRScanner implements QRScannerService {
`[WebInlineQRScanner:${this.id}] Stream stopped event emitted`,
);
} catch (error) {
logger.error(`[WebInlineQRScanner:${this.id}] Error stopping scan:`, error);
this.updateCameraState('error', 'Error stopping camera');
logger.error(
`[WebInlineQRScanner:${this.id}] Error stopping scan:`,
error,
);
this.updateCameraState("error", "Error stopping camera");
throw error;
} finally {
this.isScanning = false;
@@ -557,8 +597,11 @@ export class WebInlineQRScanner implements QRScannerService {
`[WebInlineQRScanner:${this.id}] Cleanup completed successfully`,
);
} catch (error) {
logger.error(`[WebInlineQRScanner:${this.id}] Error during cleanup:`, error);
this.updateCameraState('error', 'Error during cleanup');
logger.error(
`[WebInlineQRScanner:${this.id}] Error during cleanup:`,
error,
);
this.updateCameraState("error", "Error during cleanup");
throw error;
}
}

18
src/services/QRScanner/types.ts
View File

@@ -22,15 +22,15 @@ export interface QRScannerOptions {
playSound?: boolean;
}
export type CameraState =
| 'initializing' // Camera is being initialized
| 'ready' // Camera is ready to use
| 'active' // Camera is actively streaming
| 'in_use' // Camera is in use by another application
| 'permission_denied' // Camera permission was denied
| 'not_found' // No camera found on device
| 'error' // Generic error state
| 'off'; // Camera is off/stopped
export type CameraState =
| "initializing" // Camera is being initialized
| "ready" // Camera is ready to use
| "active" // Camera is actively streaming
| "in_use" // Camera is in use by another application
| "permission_denied" // Camera permission was denied
| "not_found" // No camera found on device
| "error" // Generic error state
| "off"; // Camera is off/stopped
export interface CameraStateListener {
onStateChange: (state: CameraState, message?: string) => void;

189
src/services/platforms/WebPlatformService.ts
View File

@@ -80,7 +80,9 @@ export class WebPlatformService implements PlatformService {
*/
async takePicture(): Promise<ImageResult> {
const isMobile = /iPhone|iPad|iPod|Android/i.test(navigator.userAgent);
const hasGetUserMedia = !!(navigator.mediaDevices && navigator.mediaDevices.getUserMedia);
const hasGetUserMedia = !!(
navigator.mediaDevices && navigator.mediaDevices.getUserMedia
);
// If on mobile, use file input with capture attribute (existing behavior)
if (isMobile || !hasGetUserMedia) {
@@ -113,107 +115,120 @@ export class WebPlatformService implements PlatformService {
}
// Desktop: Use getUserMedia for webcam capture
return new Promise(async (resolve, reject) => {
return new Promise((resolve, reject) => {
let stream: MediaStream | null = null;
let video: HTMLVideoElement | null = null;
let captureButton: HTMLButtonElement | null = null;
let overlay: HTMLDivElement | null = null;
let cleanup = () => {
const cleanup = () => {
if (stream) {
stream.getTracks().forEach((track) => track.stop());
}
if (video && video.parentNode) video.parentNode.removeChild(video);
if (captureButton && captureButton.parentNode) captureButton.parentNode.removeChild(captureButton);
if (overlay && overlay.parentNode) overlay.parentNode.removeChild(overlay);
if (captureButton && captureButton.parentNode)
captureButton.parentNode.removeChild(captureButton);
if (overlay && overlay.parentNode)
overlay.parentNode.removeChild(overlay);
};
try {
stream = await navigator.mediaDevices.getUserMedia({ video: { facingMode: "user" } });
// Create overlay for video and button
overlay = document.createElement("div");
overlay.style.position = "fixed";
overlay.style.top = "0";
overlay.style.left = "0";
overlay.style.width = "100vw";
overlay.style.height = "100vh";
overlay.style.background = "rgba(0,0,0,0.8)";
overlay.style.display = "flex";
overlay.style.flexDirection = "column";
overlay.style.justifyContent = "center";
overlay.style.alignItems = "center";
overlay.style.zIndex = "9999";
video = document.createElement("video");
video.autoplay = true;
video.playsInline = true;
video.style.maxWidth = "90vw";
video.style.maxHeight = "70vh";
video.srcObject = stream;
overlay.appendChild(video);
// Move async operations inside Promise body
navigator.mediaDevices.getUserMedia({
video: { facingMode: "user" },
})
.then((mediaStream) => {
stream = mediaStream;
// Create overlay for video and button
overlay = document.createElement("div");
overlay.style.position = "fixed";
overlay.style.top = "0";
overlay.style.left = "0";
overlay.style.width = "100vw";
overlay.style.height = "100vh";
overlay.style.background = "rgba(0,0,0,0.8)";
overlay.style.display = "flex";
overlay.style.flexDirection = "column";
overlay.style.justifyContent = "center";
overlay.style.alignItems = "center";
overlay.style.zIndex = "9999";
captureButton = document.createElement("button");
captureButton.textContent = "Capture Photo";
captureButton.style.marginTop = "2rem";
captureButton.style.padding = "1rem 2rem";
captureButton.style.fontSize = "1.2rem";
captureButton.style.background = "#2563eb";
captureButton.style.color = "white";
captureButton.style.border = "none";
captureButton.style.borderRadius = "0.5rem";
captureButton.style.cursor = "pointer";
overlay.appendChild(captureButton);
video = document.createElement("video");
video.autoplay = true;
video.playsInline = true;
video.style.maxWidth = "90vw";
video.style.maxHeight = "70vh";
video.srcObject = stream;
overlay.appendChild(video);
document.body.appendChild(overlay);
captureButton = document.createElement("button");
captureButton.textContent = "Capture Photo";
captureButton.style.marginTop = "2rem";
captureButton.style.padding = "1rem 2rem";
captureButton.style.fontSize = "1.2rem";
captureButton.style.background = "#2563eb";
captureButton.style.color = "white";
captureButton.style.border = "none";
captureButton.style.borderRadius = "0.5rem";
captureButton.style.cursor = "pointer";
overlay.appendChild(captureButton);
captureButton.onclick = async () => {
try {
// Create a canvas to capture the frame
const canvas = document.createElement("canvas");
canvas.width = video!.videoWidth;
canvas.height = video!.videoHeight;
const ctx = canvas.getContext("2d");
ctx?.drawImage(video!, 0, 0, canvas.width, canvas.height);
canvas.toBlob((blob) => {
cleanup();
if (blob) {
resolve({
blob,
fileName: `photo_${Date.now()}.jpg`,
});
} else {
reject(new Error("Failed to capture image from webcam"));
}
}, "image/jpeg", 0.95);
} catch (err) {
cleanup();
reject(err);
}
};
} catch (error) {
cleanup();
logger.error("Error accessing webcam:", error);
// Fallback to file input
const input = document.createElement("input");
input.type = "file";
input.accept = "image/*";
input.onchange = async (e) => {
const file = (e.target as HTMLInputElement).files?.[0];
if (file) {
document.body.appendChild(overlay);
captureButton.onclick = () => {
try {
const blob = await this.processImageFile(file);
resolve({
blob,
fileName: file.name || "photo.jpg",
});
} catch (error) {
logger.error("Error processing fallback image:", error);
reject(new Error("Failed to process fallback image"));
// Create a canvas to capture the frame
const canvas = document.createElement("canvas");
canvas.width = video!.videoWidth;
canvas.height = video!.videoHeight;
const ctx = canvas.getContext("2d");
ctx?.drawImage(video!, 0, 0, canvas.width, canvas.height);
canvas.toBlob(
(blob) => {
cleanup();
if (blob) {
resolve({
blob,
fileName: `photo_${Date.now()}.jpg`,
});
} else {
reject(new Error("Failed to capture image from webcam"));
}
},
"image/jpeg",
0.95,
);
} catch (err) {
cleanup();
reject(err);
}
} else {
reject(new Error("No image selected"));
}
};
input.click();
}
};
})
.catch((error) => {
cleanup();
logger.error("Error accessing webcam:", error);
// Fallback to file input
const input = document.createElement("input");
input.type = "file";
input.accept = "image/*";
input.onchange = (e) => {
const file = (e.target as HTMLInputElement).files?.[0];
if (file) {
this.processImageFile(file)
.then((blob) => {
resolve({
blob,
fileName: file.name || "photo.jpg",
});
})
.catch((error) => {
logger.error("Error processing fallback image:", error);
reject(new Error("Failed to process fallback image"));
});
} else {
reject(new Error("No image selected"));
}
};
input.click();
});
});
}