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

Remove ContactScanView and rename ContactQRScanView to ContactQRScanFullView

Browse Source 
- Deleted ContactScanView.vue and its route from the router.
- Renamed ContactQRScanView.vue to ContactQRScanFullView.vue.
- Updated all router paths, names, and references for consistency.
- Fixed related links and imports to use the new view/component name.
This commit is contained in:
Matt Raymer
2025-05-21 05:17:25 -04:00
parent c692f4dca7
commit 10df60316a
5 changed files with 569 additions and 97 deletions
Download Patch File Download Diff File Expand all files Collapse all files

126
src/components/ImageMethodDialog.vue
View File

@@ -17,24 +17,32 @@
</div>
<!-- FEEDBACK: Show if camera preview is not visible after mounting -->
<div v-if="!showCameraPreview && !blob && isRegistered" class="bg-red-100 text-red-700 border border-red-400 rounded px-4 py-3 my-4 text-sm">
<div
v-if="!showCameraPreview && !blob && isRegistered"
class="bg-red-100 text-red-700 border border-red-400 rounded px-4 py-3 my-4 text-sm"
>
<strong>Camera preview not started.</strong>
<div v-if="cameraState === 'off'">
<span v-if="platformCapabilities.isMobile">
<b>Note:</b> This mobile browser may not support direct camera access, or the app is treating it as a native app.<br>
<b>Tip:</b> Try using a desktop browser, or check if your browser supports camera access for web apps.<br>
<b>Developer:</b> The platform detection logic may be skipping camera preview for mobile browsers. <br>
<b>Action:</b> Review <code>platformCapabilities.isMobile</code> and ensure web browsers on mobile are not treated as native apps.
<b>Note:</b> This mobile browser may not support direct camera
access, or the app is treating it as a native app.<br />
<b>Tip:</b> Try using a desktop browser, or check if your browser
supports camera access for web apps.<br />
<b>Developer:</b> The platform detection logic may be skipping
camera preview for mobile browsers. <br />
<b>Action:</b> Review <code>platformCapabilities.isMobile</code> and
ensure web browsers on mobile are not treated as native apps.
</span>
<span v-else>
<b>Tip:</b> Your browser supports camera APIs, but the preview did not start. Try refreshing the page or checking browser permissions.
<b>Tip:</b> Your browser supports camera APIs, but the preview did
not start. Try refreshing the page or checking browser permissions.
</span>
</div>
<div v-else-if="cameraState === 'error'">
<b>Error:</b> {{ error || cameraStateMessage }}
</div>
<div v-else>
<b>Status:</b> {{ cameraStateMessage || 'Unknown reason.' }}
<b>Status:</b> {{ cameraStateMessage || "Unknown reason." }}
</div>
</div>
@@ -60,27 +68,48 @@
<div class="grid grid-cols-2 gap-2">
<div>
<p><strong>Camera State:</strong> {{ cameraState }}</p>
<p><strong>State Message:</strong> {{ cameraStateMessage || 'None' }}</p>
<p><strong>Error:</strong> {{ error || 'None' }}</p>
<p><strong>Preview Active:</strong> {{ showCameraPreview ? 'Yes' : 'No' }}</p>
<p><strong>Stream Active:</strong> {{ !!cameraStream ? 'Yes' : 'No' }}</p>
<p>
<strong>State Message:</strong>
{{ cameraStateMessage || "None" }}
</p>
<p><strong>Error:</strong> {{ error || "None" }}</p>
<p>
<strong>Preview Active:</strong>
{{ showCameraPreview ? "Yes" : "No" }}
</p>
<p>
<strong>Stream Active:</strong>
{{ !!cameraStream ? "Yes" : "No" }}
</p>
</div>
<div>
<p><strong>Browser:</strong> {{ userAgent }}</p>
<p><strong>HTTPS:</strong> {{ isSecureContext ? 'Yes' : 'No' }}</p>
<p><strong>MediaDevices:</strong> {{ hasMediaDevices ? 'Yes' : 'No' }}</p>
<p><strong>GetUserMedia:</strong> {{ hasGetUserMedia ? 'Yes' : 'No' }}</p>
<p><strong>Platform:</strong> {{ platformCapabilities.isMobile ? 'Mobile' : 'Desktop' }}</p>
<p>
<strong>HTTPS:</strong>
{{ isSecureContext ? "Yes" : "No" }}
</p>
<p>
<strong>MediaDevices:</strong>
{{ hasMediaDevices ? "Yes" : "No" }}
</p>
<p>
<strong>GetUserMedia:</strong>
{{ hasGetUserMedia ? "Yes" : "No" }}
</p>
<p>
<strong>Platform:</strong>
{{ platformCapabilities.isMobile ? "Mobile" : "Desktop" }}
</p>
</div>
</div>
</div>
<!-- Toggle Diagnostics Button -->
<button
@click="toggleDiagnostics"
class="absolute top-2 right-2 bg-black/50 text-white px-2 py-1 rounded text-xs z-30"
@click="toggleDiagnostics"
>
{{ showDiagnostics ? 'Hide Diagnostics' : 'Show Diagnostics' }}
{{ showDiagnostics ? "Hide Diagnostics" : "Show Diagnostics" }}
</button>
<div class="camera-container w-full h-full relative">
<video
@@ -284,8 +313,18 @@ export default class ImageMethodDialog extends Vue {
userAgent = navigator.userAgent;
isSecureContext = window.isSecureContext;
hasMediaDevices = !!navigator.mediaDevices;
hasGetUserMedia = !!(navigator.mediaDevices && navigator.mediaDevices.getUserMedia);
cameraState: 'off' | 'initializing' | 'ready' | 'active' | 'error' | 'permission_denied' | 'not_found' | 'in_use' = 'off';
hasGetUserMedia = !!(
navigator.mediaDevices && navigator.mediaDevices.getUserMedia
);
cameraState:
| "off"
| "initializing"
| "ready"
| "active"
| "error"
| "permission_denied"
| "not_found"
| "in_use" = "off";
cameraStateMessage?: string;
error: string | null = null;
@@ -403,19 +442,21 @@ export default class ImageMethodDialog extends Vue {
if (this.platformCapabilities.isNativeApp) {
logger.debug("Using platform service for mobile device");
this.cameraState = 'initializing';
this.cameraStateMessage = 'Using platform camera service...';
this.cameraState = "initializing";
this.cameraStateMessage = "Using platform camera service...";
try {
const result = await this.platformService.takePicture();
this.blob = result.blob;
this.fileName = result.fileName;
this.cameraState = 'ready';
this.cameraStateMessage = 'Photo captured successfully';
this.cameraState = "ready";
this.cameraStateMessage = "Photo captured successfully";
} catch (error) {
logger.error("Error taking picture:", error);
this.cameraState = 'error';
this.cameraStateMessage = error instanceof Error ? error.message : 'Failed to take picture';
this.error = error instanceof Error ? error.message : 'Failed to take picture';
this.cameraState = "error";
this.cameraStateMessage =
error instanceof Error ? error.message : "Failed to take picture";
this.error =
error instanceof Error ? error.message : "Failed to take picture";
this.$notify(
{
group: "alert",
@@ -431,8 +472,8 @@ export default class ImageMethodDialog extends Vue {
logger.debug("Starting camera preview for desktop browser");
try {
this.cameraState = 'initializing';
this.cameraStateMessage = 'Requesting camera access...';
this.cameraState = "initializing";
this.cameraStateMessage = "Requesting camera access...";
this.showCameraPreview = true;
await this.$nextTick();
@@ -441,8 +482,8 @@ export default class ImageMethodDialog extends Vue {
});
logger.debug("Camera access granted");
this.cameraStream = stream;
this.cameraState = 'active';
this.cameraStateMessage = 'Camera is active';
this.cameraState = "active";
this.cameraStateMessage = "Camera is active";
await this.$nextTick();
@@ -459,13 +500,22 @@ export default class ImageMethodDialog extends Vue {
}
} catch (error) {
logger.error("Error starting camera preview:", error);
let errorMessage = error instanceof Error ? error.message : 'Failed to access camera';
if (error.name === 'NotReadableError' || error.name === 'TrackStartError') {
errorMessage = 'Camera is in use by another application. Please close any other apps or browser tabs using the camera and try again.';
} else if (error.name === 'NotAllowedError' || error.name === 'PermissionDeniedError') {
errorMessage = 'Camera access was denied. Please allow camera access in your browser settings.';
let errorMessage =
error instanceof Error ? error.message : "Failed to access camera";
if (
error.name === "NotReadableError" ||
error.name === "TrackStartError"
) {
errorMessage =
"Camera is in use by another application. Please close any other apps or browser tabs using the camera and try again.";
} else if (
error.name === "NotAllowedError" ||
error.name === "PermissionDeniedError"
) {
errorMessage =
"Camera access was denied. Please allow camera access in your browser settings.";
}
this.cameraState = 'error';
this.cameraState = "error";
this.cameraStateMessage = errorMessage;
this.error = errorMessage;
this.$notify(
@@ -487,8 +537,8 @@ export default class ImageMethodDialog extends Vue {
this.cameraStream = null;
}
this.showCameraPreview = false;
this.cameraState = 'off';
this.cameraStateMessage = 'Camera stopped';
this.cameraState = "off";
this.cameraStateMessage = "Camera stopped";
this.error = null;
}