Preview first image after updating image

public/scripts/models/image-upload.js

@@ -20,6 +20,8 @@ class ImageUpload {
   signedData = null;
   readState = ReadState.ReadyForRead;
   message = null;
+  ulid = null;
+  previewUrl = null;
 
   loadDimensionPromise = null;
 

public/scripts/upload.js

@@ -36,6 +36,48 @@ async function runWorker(worker) {
         .then(function (pictureArray) {
           window.location.href = "/download/?deviceId=" + window.workerDeviceId;
         })
+        .catch(function (err) {
+          // TODO: Handle preview error in widget
+          console.error("Get error while storing images to localforage:", err);
+        });
+    },
+    false,
+  );
+}
+
+function runPreviewWorker(worker, imageUpload) {
+  const imageUploadFile = imageUpload.file;
+  worker.postMessage({
+    imageUpload: imageUploadFile,
+    location: window.location.toString(),
+    deviceId: window.workerDeviceId,
+    deviceInfo: window.deviceInfo,
+  });
+  worker.addEventListener(
+    "message",
+    function (e) {
+      window.localforage
+        .setItem(`previewImage-${imageUpload.ulid}`, e.data[1])
+        .then(function () {
+          const imageContainer = document.querySelector(
+            ".upload__device-image-rect",
+          );
+
+          /* Put first generated mockup to preview area */
+          if (!imageContainer.style.backgroundImage) {
+            imageContainer.style.backgroundImage = `url(${e.data[1]})`;
+            imageContainer.style.backgroundSize = "cover";
+            imageContainer.style.backgroundPosition = "center";
+
+            const imageUploadHints = document.querySelectorAll(
+              ".upload__device-hint",
+            );
+            imageUploadHints.forEach((imageUploadHint) => {
+              imageUploadHint.innerHTML = "";
+              imageUploadHint.style.background = "transparent";
+            });
+          }
+        })
         .catch(function (err) {
           console.error("Get error while storing images to localforage:", err);
         });
@@ -88,7 +130,9 @@ class FileListViewModel {
     for (const file of files) {
       const imageUpload = new ImageUpload(file, MAX_FILE_SIZE_BYTE);
       await imageUpload.read();
+      imageUpload.ulid = ULID.ulid();
       this._imageUploads.push(imageUpload);
+      window.viewModel.generatePreviewMockup(imageUpload);
     }
   }
 
@@ -109,6 +153,7 @@ class RootViewModel {
   _socket = null;
   _redirectTimer = null;
   worker = new Worker("/scripts/web_worker.js");
+  previewWorker = new Worker("/scripts/preview_worker.js");
   selectedColorId = null;
 
   constructor(maxMockupWaitSec, fileListViewModel, selectedColorId) {
@@ -129,6 +174,10 @@ class RootViewModel {
     return this._isGeneratingMockup;
   }
 
+  async generatePreviewMockup(imageUpload) {
+    runPreviewWorker(this.previewWorker, imageUpload);
+  }
+
   async generateMockup() {
     if (!this.fileList.isReadyForMockup) {
       console.warn("Cannot generate mockup at this moment");

src/pages/model/[model].astro

@@ -158,6 +158,7 @@ if (deviceDetail.imagePath != null && deviceDetail.imagePath.length >= 1) {
   <script type="text/javascript" src="/scripts/utils/scroll.js"></script>
   <script type="text/javascript" src="/scripts/models/image-upload.js"></script>
   <script type="text/javascript" src="/scripts/upload.js"></script>
+  <script type="text/javascript" src="/scripts/ulid.min.js"></script>
   <script src="https://cdn.jsdelivr.net/pyodide/v0.23.4/full/pyodide.js"
   ></script>
   <div class="mockup-content">

src/styles/upload.css

@@ -147,6 +147,10 @@ main {
   width: 100%;
   height: 100%;
   object-fit: contain;
+
+  /* Overlay the preview image with the color device image */
+  position: relative;
+  z-index: 1;
 }
 
 .upload__device-image-rect-wrapper {
@@ -160,10 +164,6 @@ main {
   justify-content: center;
 }
 
-.upload__device-image-rect {
-  position: relative;
-}
-
 .upload__device-image-rect__screen-rect {
   position: absolute;
 }