From 313cd79e609b59e77efb95d6b4028e3aa499874b Mon Sep 17 00:00:00 2001
From: Trent Larson <trent@trentlarson.com>
Date: Wed, 20 Mar 2024 18:23:57 -0600
Subject: [PATCH] finalize the photo-taking code, adding comments and removing
 logging

---
 project.task.yaml                    |  1 +
 src/components/GiftedPhotoDialog.vue | 70 +++++++++++-----------------
 2 files changed, 27 insertions(+), 44 deletions(-)

diff --git a/project.task.yaml b/project.task.yaml
index a3167c4..f1c6025 100644
--- a/project.task.yaml
+++ b/project.task.yaml
@@ -6,6 +6,7 @@ tasks :
 - add to readme - check version, close tabs & restart phone if necessary
 - bug maybe - a new give remembers the previous project
 - alert & stop if give amount < 0
+- add warning that all data (except ID) is public
 - onboarding video
 
 - .1 on feed, don't show "to someone anonymous" if it's to a project
diff --git a/src/components/GiftedPhotoDialog.vue b/src/components/GiftedPhotoDialog.vue
index 38b4572..705018e 100644
--- a/src/components/GiftedPhotoDialog.vue
+++ b/src/components/GiftedPhotoDialog.vue
@@ -32,8 +32,6 @@
           >
             <span>Upload</span>
           </button>
-          <!-- TODO remove, this and console.logs -->
-          <!--{{ imageHeight }} {{ imageWidth }} {{ imageWarning }}-->
           <button
             @click="retryImage"
             class="bg-slate-500 hover:bg-slate-700 text-white font-bold py-2 px-4 rounded-full"
@@ -133,62 +131,45 @@ export default class GiftedPhotoDialog extends Vue {
 
   async takeImage(/* payload: MouseEvent */) {
     const cameraComponent = this.$refs.camera as InstanceType<typeof Camera>;
-    console.log(
-      "cameraComponent on snapshot",
-      cameraComponent,
-      cameraComponent.resolution,
-    );
-    this.imageHeight = cameraComponent?.resolution?.height;
-    this.imageWidth = cameraComponent?.resolution?.width;
-    const initialImageRatio = this.imageWidth / this.imageHeight;
-    console.log(
-      "initialImageRatio",
-      initialImageRatio,
-      this.imageWidth,
-      this.imageHeight,
-    );
+
+    /**
+     * This logic to set the image height & width correctly.
+     * Without it, the portrait orientation ends up with an image that is stretched horizontally.
+     * Note that it's the same with raw browser Javascript; see the "drawImage" example below.
+     * Now that I've done it, I can't explain why it works.
+     */
+    let imageHeight = cameraComponent?.resolution?.height;
+    let imageWidth = cameraComponent?.resolution?.width;
+    const initialImageRatio = imageWidth / imageHeight;
     const windowRatio = window.innerWidth / window.innerHeight;
-    console.log(
-      "windowRatio",
-      windowRatio,
-      window.innerWidth,
-      window.innerHeight,
-    );
     if (initialImageRatio > 1 && windowRatio < 1) {
       // the image is wider than it is tall, and the window is taller than it is wide
-      this.imageWarning = "?";
       // For some reason, mobile in portrait orientation renders a horizontally-stretched image.
       // We're gonna force it opposite.
-      this.imageHeight = cameraComponent?.resolution?.width;
-      this.imageWidth = cameraComponent?.resolution?.height;
+      imageHeight = cameraComponent?.resolution?.width;
+      imageWidth = cameraComponent?.resolution?.height;
     } else if (initialImageRatio < 1 && windowRatio > 1) {
       // the image is taller than it is wide, and the window is wider than it is tall
-      // Haven't seen this happen, but just in case.
-      this.imageWarning = "??";
-      this.imageHeight = cameraComponent?.resolution?.width;
-      this.imageWidth = cameraComponent?.resolution?.height;
+      // Haven't seen this happen, but we'll do it just in case.
+      imageHeight = cameraComponent?.resolution?.width;
+      imageWidth = cameraComponent?.resolution?.height;
     }
-    const newImageRatio = this.imageWidth / this.imageHeight;
-    console.log(
-      "newImageRatio",
-      newImageRatio,
-      this.imageWidth,
-      this.imageHeight,
-    );
+    const newImageRatio = imageWidth / imageHeight;
     if (newImageRatio < windowRatio) {
       // the image is a taller ratio than the window, so fit the height first
-      this.imageHeight = window.innerHeight / 2;
-      this.imageWidth = this.imageHeight * newImageRatio;
+      imageHeight = window.innerHeight / 2;
+      imageWidth = imageHeight * newImageRatio;
     } else {
       // the image is a wider ratio than the window, so fit the width first
-      this.imageWidth = window.innerWidth / 2;
-      this.imageHeight = this.imageWidth / newImageRatio;
+      imageWidth = window.innerWidth / 2;
+      imageHeight = imageWidth / newImageRatio;
     }
+
     // The resolution is only necessary because of that mobile portrait-orientation case.
-    // But setting this screws up desktop the mobile emulation.
+    // The mobile emulation in a browser shows something stretched vertically, but real devices work fine.
     this.blob = await cameraComponent?.snapshot({
-      height: this.imageHeight,
-      width: this.imageWidth,
+      height: imageHeight,
+      width: imageWidth,
     }); // png is default; if that changes, change extension in formData.append
     if (!this.blob) {
       this.$notify(
@@ -210,7 +191,8 @@ export default class GiftedPhotoDialog extends Vue {
 
   /****
 
-   Here's an approach without a library, which works similarly and looks ugly.
+   Here's an approach to photo capture without a library. It has similar quirks.
+   Now that we've fixed styling for simple-vue-camera, it's not critical to refactor. Maybe someday.
 
    <button id="start-camera" @click="cameraClicked">Start Camera</button>
    <video id="video" width="320" height="240" autoplay></video>