Support heic files

.prettierignore

@@ -3,3 +3,4 @@ src/components.d.ts
 .github
 tsconfig.json
 tslint.json
+public/

src/components/app-root/app-root.tsx

@@ -10,6 +10,7 @@ import { PizzaApi } from "../../api";
 declare global {
   interface Window {
     ga: any;
+    heic2any: any;
   }
 }
 

src/components/form-report/form-report.tsx

@@ -1,6 +1,7 @@
 import { Component, h, Host, Prop, State } from "@stencil/core";
 
 import { ApiError, PizzaApi, ReportPostResults } from "../../api";
+import handleHeic from "../../util/handleHeic";
 import shaFile from "../../util/shaFile";
 
 // Shared with pizzabase
@@ -76,21 +77,23 @@ export class FormReport {
 
     const handlePhotoChange = async (e?: Event) => {
       const target = e?.target as HTMLInputElement;
-      const file = (target.files as FileList)[0];
+      const targetFile = (target.files as FileList)[0];
       const imagePreview = document.getElementById("photo-preview");
 
       // Prevent submit before photo finishes processing
       this.photoIsProcessing = true;
       this.isDisabled = true;
 
       // If no files
-      if (!file) {
-        this.removePhoto();
+      if (!targetFile) {
         // Reset
+        this.removePhoto();
         this.photoIsProcessing = false;
         this.isDisabled = false;
         return false;
       }
+      const file = await handleHeic(targetFile);
+
       this.submitError = {};
       this.hasPhoto = true;
       this.photoUrl = window.URL.createObjectURL(file);
@@ -449,7 +452,7 @@ export class FormReport {
                     class={"file button-large " + (this.photoIsProcessing ? "is-loading is-disabled " : "") + ("photo" in this.submitError ? "is-teal" : "is-teal")}
                   >
                     <label class="file-label">
-                      <input class="file-input" type="file" name="photo" id="photo" accept="image/*" onChange={handlePhotoChange} disabled={this.photoIsProcessing} />
+                      <input class="file-input" type="file" name="photo" id="photo" accept="image/*,.heic,.heif" onChange={handlePhotoChange} disabled={this.photoIsProcessing} />
                       <span class="file-cta">
                         <span class="file-label">{this.hasPhoto ? "Change photo" : "Add a photo of the line"}</span>
                       </span>

src/util/handleHeic.ts

@@ -0,0 +1,37 @@
+const isHEIC = (file: File): Boolean => {
+  const x = file.type ? file.type.split("image/").pop() : `${file.name.split(".").pop()}`.toLowerCase();
+  return x === "heic" || x === "heif";
+};
+
+const loadScript = async (url: string) => {
+  const script = document.createElement("script");
+  script.type = "text/javascript";
+
+  document.getElementsByTagName("head")[0].appendChild(script);
+
+  return new Promise(resolve => {
+    script.src = url;
+
+    const resolveOnLoadChange = (_event: Event) => {
+      script.removeEventListener("load", resolveOnLoadChange);
+      resolve();
+    };
+    script.addEventListener("load", resolveOnLoadChange);
+  });
+};
+
+const handleHeic = async (file: File): Promise<File> => {
+  if (!isHEIC(file)) {
+    return file;
+  }
+
+  await loadScript(`${process.ENV.ROOT_URL}/heic2any.min.js`);
+
+  const heicFile = await window.heic2any({ blob: file });
+
+  heicFile.name = file.name.substring(0, file.name.lastIndexOf(".")) + ".png";
+
+  return heicFile;
+};
+
+export default handleHeic;