Preview first image after updating image

oursky · Aug 16, 2024 · f866ab4 · f866ab4
1 parent 96c7a4c
commit f866ab4
Show file tree

Hide file tree

Showing 3 changed files with 52 additions and 0 deletions.
diff --git a/public/scripts/models/image-upload.js b/public/scripts/models/image-upload.js
@@ -20,6 +20,8 @@ class ImageUpload {
   signedData = null;
   readState = ReadState.ReadyForRead;
   message = null;
+  id = null;
+  previewUrl = null;
 
   loadDimensionPromise = null;
 

diff --git a/public/scripts/upload.js b/public/scripts/upload.js
@@ -44,6 +44,47 @@ async function runWorker(worker) {
   );
 }
 
+function runPreviewWorker(worker, imageUpload) {
+  const imageUploadList = [imageUpload.file];
+  worker.postMessage({
+    imageUploadList: imageUploadList,
+    location: window.location.toString(),
+    deviceId: window.workerDeviceId,
+    deviceInfo: window.deviceInfo,
+  });
+  worker.addEventListener(
+    "message",
+    function (e) {
+      window.localforage
+        .setItem(`previewImage-${imageUpload.id}`, e.data[0][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[0][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);
+        });
+    },
+    false,
+  );
+}
+
 class FileListViewModel {
   maxFileSizeByte = null;
   _imageUploads = [];
@@ -88,7 +129,9 @@ class FileListViewModel {
     for (const file of files) {
       const imageUpload = new ImageUpload(file, MAX_FILE_SIZE_BYTE);
       await imageUpload.read();
+      imageUpload.id = Date.now();
       this._imageUploads.push(imageUpload);
+      window.viewModel.generatePreviewMockup(imageUpload);
     }
   }
 
@@ -109,6 +152,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 +173,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");

diff --git a/src/styles/upload.css b/src/styles/upload.css
@@ -147,6 +147,8 @@ main {
   width: 100%;
   height: 100%;
   object-fit: contain;
+  position: relative;
+  z-index: 100;
 }
 
 .upload__device-image-rect-wrapper {