trent_larson
/
crowd-funder-for-time-pwa
4
1
Fork 2
Code Pull Requests 8 Releases 5 Wiki Activity
Browse Source

fix: lint

pull/133/head
Matthew Raymer 3 weeks ago
parent
538cbef701
commit
8d2dffb012
2 changed files with 101 additions and 48 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 77
      src/components/QRScanner/QRScannerDialog.vue
  2. 64
      src/services/QRScanner/WebDialogQRScanner.ts

77
src/components/QRScanner/QRScannerDialog.vue
View File

@ -67,7 +67,8 @@
<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"
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>
@ -137,7 +138,8 @@
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"
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"
@ -163,15 +165,36 @@
</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">
<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>
<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>
@ -305,7 +328,9 @@ export default class QRScannerDialog extends Vue {
// Check for video devices
const devices = await navigator.mediaDevices.enumerateDevices();
const videoDevices = devices.filter(device => device.kind === 'videoinput');
const videoDevices = devices.filter(
(device) => device.kind === "videoinput",
);
if (videoDevices.length === 0) {
throw new Error("No camera found on this device");
@ -313,15 +338,17 @@ export default class QRScannerDialog extends Vue {
logger.log("Starting QR scanner initialization...", {
mediaDevices: !!navigator.mediaDevices,
getUserMedia: !!(navigator.mediaDevices && navigator.mediaDevices.getUserMedia),
getUserMedia: !!(
navigator.mediaDevices && navigator.mediaDevices.getUserMedia
),
videoDevices: videoDevices.length,
constraints: {
video: {
facingMode: this.preferredCamera,
facingMode: this.preferredCamera,
width: { ideal: 1280 },
height: { ideal: 720 }
}
}
height: { ideal: 720 },
},
},
});
// Explicitly request camera permission first
@ -331,8 +358,8 @@ export default class QRScannerDialog extends Vue {
video: {
facingMode: this.preferredCamera,
width: { ideal: 1280 },
height: { ideal: 720 }
}
height: { ideal: 720 },
},
});
// Stop the test stream immediately
@ -347,15 +374,24 @@ export default class QRScannerDialog extends Vue {
message: error.message,
});
if (error.name === "NotAllowedError" || error.name === "PermissionDeniedError") {
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") {
} 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") {
} 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}`);
@ -371,7 +407,8 @@ export default class QRScannerDialog extends Vue {
this.cameraStatus = "Ready";
logger.log("QR scanner initialized successfully");
} catch (error) {
const wrappedError = error instanceof Error ? error : new Error(String(error));
const wrappedError =
error instanceof Error ? error : new Error(String(error));
this.error = wrappedError.message;
this.cameraStatus = "Error";
if (this.onError) {

64
src/services/QRScanner/WebDialogQRScanner.ts
View File

@ -30,40 +30,54 @@ export class WebDialogQRScanner implements QRScannerService {
try {
// First check if we have any video devices
const devices = await navigator.mediaDevices.enumerateDevices();
const videoDevices = devices.filter(device => device.kind === 'videoinput');
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');
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',
facingMode: "environment",
width: { ideal: 1280 },
height: { ideal: 720 }
}
height: { ideal: 720 },
},
});
// Stop the test stream immediately
stream.getTracks().forEach(track => track.stop());
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:', {
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
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');
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}`);
}
@ -72,32 +86,34 @@ export class WebDialogQRScanner implements QRScannerService {
async isSupported(): Promise<boolean> {
try {
// Check for secure context first
if (!window.isSecureContext) {
logger.warn('Camera access requires HTTPS (secure context)');
// 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');
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');
const hasVideoDevices = devices.some(
(device) => device.kind === "videoinput",
);
if (!hasVideoDevices) {
logger.warn('No video devices found');
logger.warn("No video devices found");
return false;
}
return true;
} catch (error) {
logger.error('Error checking camera support:', {
logger.error("Error checking camera support:", {
error: error instanceof Error ? error.message : String(error),
stack: error instanceof Error ? error.stack : undefined
stack: error instanceof Error ? error.stack : undefined,
});
return false;
}

Write Preview
Loading…
Cancel
Save