fix: dir preloading and support none-exif file

Author: huibizhang

main.js

@@ -14,7 +14,7 @@ const { LocalFileData } = require("get-file-object-from-local-path");
 const exec = require("child_process").exec;
 const { default: axios } = require("axios");
 
-let readinPath = "";
+let readinPath = undefined;
 
 function createWindow() {
   // 創建瀏覽器窗口
@@ -81,7 +81,10 @@ function createWindow() {
 
       // console.log(appPath);
 
-      const d = readinPath ? readinPath : appPath;
+      console.log(`readinPath = ${readinPath}`);
+      console.log(`appPath = ${appPath}`);
+
+      const d = readinPath ?? appPath;
       const fileList = fs.readdirSync(d);
       const files = [];
 
@@ -183,8 +186,10 @@ function createWindow() {
 }
 
 app.on("ready", function () {
+  // console.log(" ==================== ready ====================");
   if (process.argv.length > 1) {
     const temp = process.argv[1];
+    // const temp = "C:\\Users\\narut\\Desktop\\test2";
 
     if (fs.existsSync(temp) && fs.lstatSync(temp).isDirectory()) {
       readinPath = temp;
@@ -197,6 +202,14 @@ app.on("ready", function () {
 // 部分 API 在 ready 事件觸發後才能使用。
 
 app.whenReady().then(() => {
+  // if (process.argv.length > 1) {
+  //   const temp = process.argv[1];
+
+  //   if (fs.existsSync(temp) && fs.lstatSync(temp).isDirectory()) {
+  //     readinPath = temp;
+  //   }
+  // }
+
   createWindow();
 
   app.on("activate", function () {

package.json

@@ -1,17 +1,18 @@
 {
   "name": "photolisting",
-  "version": "0.2.0",
+  "version": "0.2.1",
   "main": "main.js",
   "scripts": {
-    "dev": "cross-env NODE_ENV=dev vite",
+    "vite-dev": "cross-env NODE_ENV=dev vite",
     "build": "cross-env NODE_ENV=production vite build",
     "github:build": "cross-env NODE_ENV=github vite build --mode github",
     "serve": "vite preview",
     "electron:serve": "cross-env NODE_ENV=dev electron .",
     "pack": "electron-builder --dir",
     "pack-dist": "electron-builder",
     "full-build": "npm-run-all -s build pack-dist",
-    "github-full-build": "npm-run-all -s github:build pack-dist"
+    "github-full-build": "npm-run-all -s github:build pack-dist",
+    "dev": "npm-run-all -p vite-dev electron:serve"
   },
   "dependencies": {
     "axios": "^1.4.0",

preload.js

@@ -15,7 +15,7 @@ contextBridge.exposeInMainWorld("electronAPI", {
     }
     return [
       data.map((f) => {
-        console.log(f);
+        // console.log(f);
         return constructFileFromLocalFileData(f);
       }),
       // data,

src/App.vue

@@ -206,7 +206,7 @@ export default {
     this.menuSize.width = contextMenu?.offsetWidth;
     this.menuSize.height = contextMenu?.offsetHeight;
     // this.processForm = true;
-    // this.preloadDirectory();
+    this.preloadDirectory();
 
     // window.addEventListener("keydown", this.handelKeypress);
   },
@@ -216,15 +216,21 @@ export default {
       console.log(checkPath);
       if (checkPath) {
         this.fileListScreen = true;
-        this.processForm = true;
+        // this.processForm = true;
         this.preloadDirectory();
       }
     },
     imgOnLoad(e, index) {
-      this.files[index].width = e.target.naturalWidth;
-      this.files[index].height = e.target.naturalHeight;
-      if (!Number.isInteger(this.files[index].rating)) {
-        this.files[index].rating = this.files[index].exif?.Rating;
+      const f = this.files[index];
+
+      f.width = e.target.naturalWidth;
+      f.height = e.target.naturalHeight;
+
+      console.log(f.rating);
+
+      if (!Number.isInteger(f.rating)) {
+        console.log(f.exif?.Rating);
+        f.rating = f.exif?.Rating ?? 5;
       }
     },
     getFilesByRating(rating) {
@@ -290,25 +296,26 @@ export default {
       }
     },
     async preloadDirectory() {
+      this.processForm = true;
       this.files = [];
 
       const [files, dir] = await window.electronAPI.preloadDirectory();
 
       this.savePath = dir;
 
-      if (!files.length) {
+      if (!files?.length) {
         this.fileListScreen = false;
         this.processForm = false;
+        return;
       } else {
         this.fileTotalCount = files.length;
       }
 
-      const fileLoadPromise = [];
-
       for (let i = 0; i < files.length; i++) {
         this.files.push(await this.createFile(files[i], i));
       }
 
+      this.fileListScreen = true;
       this.processForm = false;
     },
     changeRating(nextRating) {
@@ -319,17 +326,25 @@ export default {
     async createFile(file, index) {
       // console.log(file);
 
-      return {
+      // console.log(file.name, await exifr.thumbnailUrl(file));
+
+      const item = {
         index: index,
         name: file.name,
-        url: await exifr.thumbnailUrl(file),
+        url:
+          (await exifr.thumbnailUrl(file)) ??
+          (await this.fileToBase64WithResize(file)),
         exif: await exifr.parse(file, true),
         width: 1,
         height: 1,
         checked: false,
-        rating: undefined,
+        rating: (await exifr.parse(file, true)?.rating) ?? 5,
         raw: file,
       };
+
+      console.log(item);
+
+      return item;
     },
     listingConfirm() {
       const finalList = this.files
@@ -346,6 +361,8 @@ export default {
     },
     checkUpdate() {
       window.electronAPI.checkUpdate((evt, arg) => {
+        if (!arg) return;
+
         this.updateInfo = arg;
         this.updateForm = arg.currentVersion < arg.targetVersion;
         // console.log(this.updateForm);
@@ -383,6 +400,55 @@ export default {
     handelKeypress(event) {
       console.log(event);
     },
+    fileToBase64WithResize(file, maxSize = 640) {
+      return new Promise((resolve, reject) => {
+        const reader = new FileReader();
+
+        reader.onload = () => {
+          const img = new Image();
+          img.onload = () => {
+            const canvas = document.createElement("canvas");
+            let width = img.width;
+            let height = img.height;
+
+            if (width > maxSize || height > maxSize) {
+              const aspectRatio = width / height;
+              if (height >= width) {
+                width = maxSize;
+                height = width / aspectRatio;
+              }
+              if (width > height) {
+                height = maxSize;
+                width = height * aspectRatio;
+              }
+            }
+
+            canvas.width = width;
+            canvas.height = height;
+
+            const ctx = canvas.getContext("2d");
+            ctx.drawImage(img, 0, 0, width, height);
+
+            ctx.canvas.toBlob((blob) => {
+              const url = URL.createObjectURL(blob);
+              resolve(url);
+            }, file.type);
+          };
+
+          img.onerror = (error) => {
+            reject(undefined);
+          };
+
+          img.src = reader.result;
+        };
+
+        reader.onerror = (error) => {
+          reject(undefined);
+        };
+
+        reader.readAsDataURL(file);
+      });
+    },
   },
   watch: {
     menuOpened(value) {

src/components/Lightbox.vue

@@ -139,7 +139,7 @@ export default {
           if (scaledWidth > screen.width) {
             const maxMove = (scaledWidth - screen.width) / 2 + 16;
 
-            this.movement.x += movementX;
+            this.movement.x += movementX / 2;
 
             if (movementX > 0 && this.movement.x > maxMove) {
               this.movement.x = maxMove;
@@ -154,7 +154,7 @@ export default {
           if (scaledHeight > screen.height) {
             const maxMove = (scaledHeight - screen.height) / 2 + 16;
 
-            this.movement.y += movementY;
+            this.movement.y += movementY / 2;
 
             if (movementY > 0 && this.movement.y > maxMove) {
               this.movement.y = maxMove;