Browse Source

De-coupled web and mobile scanners

qrcode-reboot
Jose Olarte III 3 days ago
parent
commit
8c8fb6fe7d
  1. 40
      src/views/ContactQRScanShowView.vue

40
src/views/ContactQRScanShowView.vue

@ -83,12 +83,20 @@
></div>
</div>
<div v-else>
<router-link
:to="{ name: 'contact-qr-scan' }"
<button
v-if="isNativePlatform"
@click="$router.push({ name: 'contact-qr-scan' })"
class="bg-blue-500 text-white px-4 py-2 rounded-md mt-4"
>
Start Scanning
</router-link>
</button>
<button
v-else
@click="startScanning"
class="bg-blue-500 text-white px-4 py-2 rounded-md mt-4"
>
Start Scanning
</button>
</div>
<span v-if="error" class="text-red-500 block mt-2">{{ error }}</span>
<span v-else class="block mt-2">
@ -96,6 +104,14 @@
permissions.
</span>
</div>
<!-- QR Scanner Dialog for Web -->
<QRScannerDialog
v-if="showScannerDialog"
:on-scan="onScanDetect"
:on-error="onScanError"
:on-close="closeScannerDialog"
/>
</section>
</template>
@ -104,9 +120,11 @@ import { AxiosError } from "axios";
import QRCodeVue3 from "qr-code-generator-vue3";
import { Component, Vue } from "vue-facing-decorator";
import { useClipboard } from "@vueuse/core";
import { Capacitor } from "@capacitor/core";
import QuickNav from "../components/QuickNav.vue";
import UserNameDialog from "../components/UserNameDialog.vue";
import QRScannerDialog from "../components/QRScanner/QRScannerDialog.vue";
import { NotificationIface } from "../constants/app";
import { db, retrieveSettingsForActiveAccount } from "../db/index";
import { Contact } from "../db/tables/contacts";
@ -137,6 +155,7 @@ interface IUserNameDialog {
QRCodeVue3,
QuickNav,
UserNameDialog,
QRScannerDialog,
},
})
export default class ContactQRScanShow extends Vue {
@ -151,6 +170,8 @@ export default class ContactQRScanShow extends Vue {
qrValue = "";
isScanning = false;
error: string | null = null;
showScannerDialog = false;
isNativePlatform = Capacitor.isNativePlatform();
ETHR_DID_PREFIX = ETHR_DID_PREFIX;
@ -251,7 +272,13 @@ export default class ContactQRScanShow extends Vue {
}
}
// Add scan listener
// Show the scanner dialog for web
if (!this.isNativePlatform) {
this.showScannerDialog = true;
return;
}
// For native platforms, use the scanner service
scanner.addListener({
onScan: this.onScanDetect,
onError: this.onScanError,
@ -574,6 +601,11 @@ export default class ContactQRScanShow extends Vue {
});
}
closeScannerDialog() {
this.showScannerDialog = false;
this.isScanning = false;
}
// Lifecycle hooks
mounted() {
this.isMounted = true;

Loading…
Cancel
Save