|
@ -33,7 +33,10 @@ |
|
|
|
|
|
|
|
|
<!-- Scanner --> |
|
|
<!-- Scanner --> |
|
|
<div class="p-4"> |
|
|
<div class="p-4"> |
|
|
<div v-if="useQRReader && !isNativePlatform" class="relative aspect-square"> |
|
|
<div |
|
|
|
|
|
v-if="useQRReader && !isNativePlatform" |
|
|
|
|
|
class="relative aspect-square" |
|
|
|
|
|
> |
|
|
<qrcode-stream |
|
|
<qrcode-stream |
|
|
:camera="options?.camera === 'front' ? 'user' : 'environment'" |
|
|
:camera="options?.camera === 'front' ? 'user' : 'environment'" |
|
|
@decode="onDecode" |
|
|
@decode="onDecode" |
|
@ -45,7 +48,11 @@ |
|
|
</div> |
|
|
</div> |
|
|
<div v-else class="text-center py-8"> |
|
|
<div v-else class="text-center py-8"> |
|
|
<p class="text-gray-500"> |
|
|
<p class="text-gray-500"> |
|
|
{{ isNativePlatform ? 'Using native camera scanner...' : 'QR code scanning is not supported in this browser.' }} |
|
|
{{ |
|
|
|
|
|
isNativePlatform |
|
|
|
|
|
? "Using native camera scanner..." |
|
|
|
|
|
: "QR code scanning is not supported in this browser." |
|
|
|
|
|
}} |
|
|
</p> |
|
|
</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
@ -86,20 +93,24 @@ export default class QRScannerDialog extends Vue { |
|
|
visible = true; |
|
|
visible = true; |
|
|
error: string | null = null; |
|
|
error: string | null = null; |
|
|
useQRReader = __USE_QR_READER__; |
|
|
useQRReader = __USE_QR_READER__; |
|
|
isNativePlatform = Capacitor.isNativePlatform() || __IS_MOBILE__ || Capacitor.getPlatform() === 'android' || Capacitor.getPlatform() === 'ios'; |
|
|
isNativePlatform = |
|
|
|
|
|
Capacitor.isNativePlatform() || |
|
|
|
|
|
__IS_MOBILE__ || |
|
|
|
|
|
Capacitor.getPlatform() === "android" || |
|
|
|
|
|
Capacitor.getPlatform() === "ios"; |
|
|
|
|
|
|
|
|
created() { |
|
|
created() { |
|
|
logger.log('QRScannerDialog platform detection:', { |
|
|
logger.log("QRScannerDialog platform detection:", { |
|
|
capacitorNative: Capacitor.isNativePlatform(), |
|
|
capacitorNative: Capacitor.isNativePlatform(), |
|
|
isMobile: __IS_MOBILE__, |
|
|
isMobile: __IS_MOBILE__, |
|
|
platform: Capacitor.getPlatform(), |
|
|
platform: Capacitor.getPlatform(), |
|
|
useQRReader: this.useQRReader, |
|
|
useQRReader: this.useQRReader, |
|
|
isNativePlatform: this.isNativePlatform |
|
|
isNativePlatform: this.isNativePlatform, |
|
|
}); |
|
|
}); |
|
|
|
|
|
|
|
|
// If on native platform, close immediately and don't initialize web scanner |
|
|
// If on native platform, close immediately and don't initialize web scanner |
|
|
if (this.isNativePlatform) { |
|
|
if (this.isNativePlatform) { |
|
|
logger.log('Closing QR dialog on native platform'); |
|
|
logger.log("Closing QR dialog on native platform"); |
|
|
this.$nextTick(() => this.close()); |
|
|
this.$nextTick(() => this.close()); |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
@ -107,7 +118,7 @@ export default class QRScannerDialog extends Vue { |
|
|
async onInit(promise: Promise<void>): Promise<void> { |
|
|
async onInit(promise: Promise<void>): Promise<void> { |
|
|
// Don't initialize on mobile platforms |
|
|
// Don't initialize on mobile platforms |
|
|
if (this.isNativePlatform) { |
|
|
if (this.isNativePlatform) { |
|
|
logger.log('Skipping web scanner initialization on native platform'); |
|
|
logger.log("Skipping web scanner initialization on native platform"); |
|
|
return; |
|
|
return; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|