add button on photo to switch to mirror mode

src/components/GiftedPhotoDialog.vue

@@ -43,7 +43,7 @@
           <img :src="URL.createObjectURL(blob)" class="mt-2 rounded" />
         </div>
       </div>
-      <div v-else>
+      <div v-else ref="cameraContainer">
         <!--
           Camera "resolution" doesn't change how it shows on screen but rather stretches the result, eg the following which just stretches it vertically:
           :resolution="{ width: 375, height: 812 }"
@@ -52,21 +52,31 @@
           facingMode="environment"
           autoplay
           ref="camera"
-          @started="cameraStarted"
+          @started="cameraStarted()"
         >
           <div
-            class="absolute portrait:bottom-0 portrait:left-0 portrait:right-0 landscape:right-0 landscape:top-0 landscape:bottom-0 flex landscape:flex-row justify-center items-center portrait:pb-2 landscape:pr-4"
+            class="absolute portrait:bottom-0 portrait:left-0 portrait:right-0 portrait:pb-2 landscape:right-0 landscape:top-0 landscape:bottom-0 landscape:pr-4 flex landscape:flex-row justify-center items-center"
           >
             <button
-              @click="takeImage"
+              @click="takeImage()"
               class="bg-blue-500 hover:bg-blue-700 text-white font-bold p-3 rounded-full text-2xl leading-none"
             >
               <fa icon="camera" class="w-[1em]"></fa>
             </button>
           </div>
-          <div v-if="numDevices > 1" class="absolute bottom-2 right-4">
+          <div
+            class="absolute portrait:bottom-2 portrait:right-16 landscape:right-0 landscape:bottom-16 landscape:pr-4 flex justify-center items-center"
+          >
             <button
-              @click="switchCamera"
+              @click="swapMirrorClass()"
+              class="bg-blue-500 hover:bg-blue-700 text-white font-bold p-3 rounded-full text-2xl leading-none"
+            >
+              <fa icon="left-right" class="w-[1em]"></fa>
+            </button>
+          </div>
+          <div v-if="numDevices > -1" class="absolute bottom-2 right-4">
+            <button
+              @click="switchCamera()"
               class="bg-blue-500 hover:bg-blue-700 text-white font-bold p-3 rounded-full text-2xl leading-none"
             >
               <fa icon="rotate" class="w-[1em]"></fa>
@@ -96,6 +106,7 @@ export default class GiftedPhotoDialog extends Vue {
   activeDeviceNumber = 0;
   activeDid = "";
   blob: Blob | null = null;
+  mirror = false;
   numDevices = 0;
   setImage: (arg: string) => void = () => {};
   uploading = false;
@@ -145,6 +156,7 @@ export default class GiftedPhotoDialog extends Vue {
     const cameraComponent = this.$refs.camera as InstanceType<typeof Camera>;
     if (cameraComponent) {
       this.numDevices = (await cameraComponent.devices(["videoinput"])).length;
+      this.mirror = cameraComponent.facingMode === "user";
     }
   }
 
@@ -310,6 +322,17 @@ export default class GiftedPhotoDialog extends Vue {
       this.blob = null;
     }
   }
+
+  swapMirrorClass() {
+    this.mirror = !this.mirror;
+    if (this.mirror) {
+      (this.$refs.cameraContainer as HTMLElement).classList.add("mirror-video");
+    } else {
+      (this.$refs.cameraContainer as HTMLElement).classList.remove(
+        "mirror-video",
+      );
+    }
+  }
 }
 </script>
 
@@ -334,4 +357,12 @@ export default class GiftedPhotoDialog extends Vue {
   width: 100%;
   max-width: 700px;
 }
+
+.mirror-video {
+  transform: scaleX(-1);
+  -webkit-transform: scaleX(-1); /* For Safari */
+  -moz-transform: scaleX(-1); /* For Firefox */
+  -ms-transform: scaleX(-1); /* For IE */
+  -o-transform: scaleX(-1); /* For Opera */
+}
 </style>

src/main.ts

@@ -45,6 +45,7 @@ import {
   faHand,
   faHandHoldingHeart,
   faHouseChimney,
+  faLeftRight,
   faLocationDot,
   faLongArrowAltLeft,
   faLongArrowAltRight,
@@ -105,6 +106,7 @@ library.add(
   faHand,
   faHandHoldingHeart,
   faHouseChimney,
+  faLeftRight,
   faLocationDot,
   faLongArrowAltLeft,
   faLongArrowAltRight,