TEST: platform- and camera-specific mirroring

src/views/ContactQRScanShowView.vue

@@ -234,6 +234,7 @@ export default class ContactQRScanShow extends Vue {
 
   // Add property to track if we're on desktop
   private isDesktop = false;
+  private isFrontCamera = false;
 
   async created() {
     try {
@@ -699,16 +700,6 @@ export default class ContactQRScanShow extends Vue {
     document.addEventListener("resume", this.handleAppResume);
     // Start scanning automatically when view is loaded
     this.startScanning();
-
-    // Apply mirroring after a short delay to ensure video element is ready
-    setTimeout(() => {
-      const videoElement = document.querySelector(
-        ".qr-scanner video",
-      ) as HTMLVideoElement;
-      if (videoElement) {
-        videoElement.style.transform = "scaleX(-1)";
-      }
-    }, 1000);
   }
 
   beforeDestroy() {
@@ -855,6 +846,8 @@ export default class ContactQRScanShow extends Vue {
   onCameraOn(): void {
     this.cameraState = "active";
     this.isInitializing = false;
+    this.isFrontCamera = this.preferredCamera === "user";
+    this.applyCameraMirroring();
   }
 
   onCameraOff(): void {
@@ -900,6 +893,8 @@ export default class ContactQRScanShow extends Vue {
   toggleCamera(): void {
     this.preferredCamera =
       this.preferredCamera === "user" ? "environment" : "user";
+    this.isFrontCamera = this.preferredCamera === "user";
+    this.applyCameraMirroring();
   }
 
   private handleError(error: unknown): void {
@@ -926,14 +921,16 @@ export default class ContactQRScanShow extends Vue {
     );
   }
 
-  // Update the computed property for camera mirroring
-  get shouldMirrorCamera(): boolean {
-    // On desktop, always mirror the webcam
-    if (this.isDesktop) {
-      return true;
+  // Add method to apply camera mirroring
+  private applyCameraMirroring(): void {
+    const videoElement = document.querySelector(
+      ".qr-scanner video",
+    ) as HTMLVideoElement;
+    if (videoElement) {
+      // Mirror if it's desktop or front camera on mobile
+      const shouldMirror = this.isDesktop || (this.isFrontCamera && !this.isDesktop);
+      videoElement.style.transform = shouldMirror ? "scaleX(-1)" : "none";
     }
-    // On mobile, mirror only for front-facing camera
-    return this.preferredCamera === "user";
   }
 }
 </script>
@@ -948,8 +945,9 @@ export default class ContactQRScanShow extends Vue {
   position: relative;
 }
 
+/* Remove the default mirroring from CSS since we're handling it in JavaScript */
 :deep(.qr-scanner video) {
-  transform: scaleX(-1);
+  transform: none;
 }
 
 /* Ensure the canvas for QR detection is not mirrored */