imageViewer - tiny fix to read file faster

Author: JasminDreasond

src/util/imageViewer.js

@@ -5,8 +5,8 @@ import PhotoSwipeLightbox from 'photoswipe';
 import ExifReader from 'exifreader';
 import { fetchFn } from '@src/client/initMatrix';
 
-import { getFileContentType } from './fileMime';
 import { btModal, toast } from './tools';
+import blobUrlManager from './libs/blobUrlManager';
 
 export default function imageViewer(data) {
   return new Promise(async (resolve, reject) => {
@@ -16,24 +16,11 @@ export default function imageViewer(data) {
       if (img) {
         // Get Mime
         let filename = data.name;
-        let tinyImgData = null;
-        if (data.readMime) {
-          try {
-            // Read Mime
-            tinyImgData = await getFileContentType({ target: img }, data.url);
-
-            // Insert Mime
-            if (
-              Array.isArray(tinyImgData.type) &&
-              tinyImgData.type.length > 1 &&
-              typeof tinyImgData.type[1] === 'string'
-            ) {
-              filename += `.${tinyImgData.type[1]}`;
-            }
-          } catch (err) {
-            console.error(err);
-            tinyImgData = null;
-          }
+
+        // Insert Mime
+        const mime = blobUrlManager.getMime(data.imgQuery.attr('src'));
+        if (Array.isArray(mime) && mime.length > 1 && typeof mime[1] === 'string') {
+          filename += `.${mime[1]}`;
         }
 
         // Prepare Data
@@ -44,9 +31,10 @@ export default function imageViewer(data) {
         }
 
         // Get Data
-        else if (tinyImgData) {
-          imgData.height = tinyImgData.height;
-          imgData.width = tinyImgData.width;
+        else {
+          const { height, width } = await blobUrlManager.forceGetImgSize(data.imgQuery.attr('src'));
+          if (typeof height === 'number') imgData.height = height;
+          if (typeof width === 'number') imgData.width = width;
         }
 
         // Create Lightbox

src/util/libs/blobUrlManager.js

@@ -2,6 +2,8 @@ import { EventEmitter } from 'events';
 import { generateApiKey } from 'generate-api-key';
 import md5 from 'md5';
 
+import { objType } from 'for-promise/utils/lib.mjs';
+
 class BlobUrlManager extends EventEmitter {
   // Constructor
   constructor() {
@@ -13,6 +15,8 @@ class BlobUrlManager extends EventEmitter {
     this.queue = {};
     this.ids = {};
     this.mime = {};
+    this.size = {};
+    this.imgSize = {};
     this.idsReverse = {};
   }
 
@@ -46,6 +50,45 @@ class BlobUrlManager extends EventEmitter {
     return null;
   }
 
+  getImgSize(blobUrl) {
+    if (objType(this.imgSize[blobUrl], 'object')) return this.imgSize[blobUrl];
+    return null;
+  }
+
+  async forceGetImgSize(blobUrl) {
+    const file = this.getImgSize(blobUrl);
+    if (objType(file, 'object')) {
+      if (typeof file.height === 'number' && typeof file.width === 'number') return file;
+      else return this.fetchImgSize(blobUrl);
+    }
+    return null;
+  }
+
+  fetchImgSize(blobUrl) {
+    if (objType(this.imgSize[blobUrl], 'object')) {
+      const tinyThis = this;
+      return new Promise((resolve, reject) => {
+        const img = new Image();
+        img.onload = () => {
+          if (objType(tinyThis.imgSize[blobUrl], 'object')) {
+            tinyThis.imgSize[blobUrl] = { height: img.height, width: img.width };
+            resolve(tinyThis.imgSize[blobUrl]);
+          } else {
+            reject(new Error('Invalid file url!'));
+          }
+        };
+        img.onerror = reject;
+        img.src = blobUrl;
+      });
+    }
+    return null;
+  }
+
+  getSize(blobUrl) {
+    if (typeof this.size[blobUrl] === 'number') return this.size[blobUrl];
+    return null;
+  }
+
   async insert(file, ops = {}) {
     // Insert using Hash
     const tinyKey = generateApiKey();
@@ -86,6 +129,12 @@ class BlobUrlManager extends EventEmitter {
         // Mime
         this.mime[tinyUrl] = typeof file.type === 'string' ? file.type.split('/') : [];
 
+        // Size
+        this.size[tinyUrl] = file.size;
+
+        // Image Size
+        this.imgSize[tinyUrl] = { height: file.height, width: file.width };
+
         // Hash
         this.urls[tinyUrl] = hash;
 
@@ -159,6 +208,8 @@ class BlobUrlManager extends EventEmitter {
         }
 
         delete this.mime[tinyUrl];
+        delete this.size[tinyUrl];
+        delete this.imgSize[tinyUrl];
         delete this.hashes[hash];
         delete this.timeout[hash];
         delete this.urls[tinyUrl];