crowd-funder-for-time-pwa/src/components/GiftedPhotoDialog.vue

<template>
  <div v-if="visible" class="dialog-overlay z-[60]">
    <!-- Breadcrumb -->
    <div class="dialog">
      <!-- Back -->
      <div class="text-lg text-center font-light relative z-50">
        <!-- Heading -->
        <h1
          id="ViewHeading"
          class="text-center font-bold absolute top-0 left-0 right-0 px-4 py-2 bg-black/50 text-white leading-none"
        >
          <span v-if="uploading"> Uploading... </span>
          <span v-else-if="blob"> Look Good? </span>
          <span v-else> Say "Cheese"! </span>
        </h1>

        <div
          class="text-lg text-center p-2 leading-none absolute right-0 top-0 text-white"
          @click="close()"
        >
          <fa icon="xmark" class="w-[1em]"></fa>
        </div>
      </div>

      <div v-if="uploading" class="flex justify-center">
        <fa icon="spinner" class="fa-spin fa-3x text-center block" />
      </div>
      <div v-else-if="blob">
        <div class="flex justify-around">
          <button
            @click="uploadImage"
            class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-2 rounded-full"
          >
            <span>Upload</span>
          </button>
          <button
            @click="retryImage"
            class="bg-slate-500 hover:bg-slate-700 text-white font-bold py-2 px-2 rounded-full"
          >
            <span>Retry</span>
          </button>
        </div>
        <img :src="URL.createObjectURL(blob)" class="mt-2 w-full" />
      </div>
      <div v-else>
        <!--
          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 }"
        -->
        <camera facingMode="environment" autoplay ref="camera">
          <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"
          >
            <!-- Button -->
            <button
              @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>
        </camera>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import axios from "axios";
import Camera from "simple-vue-camera";
import { Component, Vue } from "vue-facing-decorator";

import { DEFAULT_IMAGE_API_SERVER, NotificationIface } from "@/constants/app";
import { getIdentity } from "@/libs/util";
import { db } from "@/db/index";
import { MASTER_SETTINGS_KEY, Settings } from "@/db/tables/settings";
import { accessToken } from "@/libs/crypto";

@Component({ components: { Camera } })
export default class GiftedPhotoDialog extends Vue {
  $notify!: (notification: NotificationIface, timeout?: number) => void;

  activeDid = "";
  blob: Blob | null = null;
  setImage: (arg: string) => void = () => {};
  uploading = false;
  visible = false;

  URL = window.URL || window.webkitURL;

  async mounted() {
    try {
      await db.open();
      const settings = (await db.settings.get(MASTER_SETTINGS_KEY)) as Settings;
      this.activeDid = settings?.activeDid || "";
      // eslint-disable-next-line @typescript-eslint/no-explicit-any
    } catch (err: any) {
      console.error("Error retrieving settings from database:", err);
      this.$notify(
        {
          group: "alert",
          type: "danger",
          title: "Error",
          text: err.message || "There was an error retrieving your settings.",
        },
        -1,
      );
    }
  }

  open(setImageFn: (arg: string) => void) {
    this.visible = true;
    this.setImage = setImageFn;
  }

  close() {
    this.visible = false;
    this.blob = null;
  }

  async takeImage(/* payload: MouseEvent */) {
    const cameraComponent = this.$refs.camera as InstanceType<typeof Camera>;
    this.blob = await cameraComponent?.snapshot(); // png is default; if that changes, change extension in formData.append
    if (!this.blob) {
      this.$notify(
        {
          group: "alert",
          type: "danger",
          title: "Error",
          text: "There was an error taking the picture. Please try again.",
        },
        5000,
      );
      return;
    }
  }

  async retryImage() {
    this.blob = null;
  }

  async uploadImage() {
    this.uploading = true;
    const identifier = await getIdentity(this.activeDid);
    const token = await accessToken(identifier);
    const headers = {
      Authorization: "Bearer " + token,
    };
    const formData = new FormData();
    if (!this.blob) {
      // yeah, this should never happen, but it helps with subsequent type checking
      this.$notify(
        {
          group: "alert",
          type: "danger",
          title: "Error",
          text: "There was an error finding the picture. Please try again.",
        },
        5000,
      );
      this.uploading = false;
      return;
    }
    formData.append("image", this.blob, "snapshot.png"); // png is set in snapshot()
    formData.append("claimType", "GiveAction");
    try {
      const response = await axios.post(
        DEFAULT_IMAGE_API_SERVER + "/image",
        formData,
        { headers },
      );
      this.uploading = false;

      this.visible = false;
      this.blob = null;
      this.setImage(response.data.url as string);
    } catch (error) {
      console.error("Error uploading the image", error);
      this.$notify(
        {
          group: "alert",
          type: "danger",
          title: "Error",
          text: "There was an error saving the picture. Please try again.",
        },
        5000,
      );
      this.uploading = false;
      this.blob = null;
    }
  }
}
</script>

<style>
.dialog-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 1.5rem;
}

.dialog {
  background-color: white;
  padding: 1rem;
  border-radius: 0.5rem;
  width: 100%;
  max-width: 700px;
}
</style>