Faster loading IMGUR previews; slightly slower triggering preview popup

CHANGELOG.md

@@ -4,6 +4,8 @@
 *   Moved database queries to a web worker to gain more responsive UI
 *   Fixed Gelbooru, Instagram, and Twitter previews
 *   Fixed green names not showing up when 'show friends/bookmarks in a different colour' is selected
+*   Sped up Imgur previews
+*   Minor UI design adjustments for user names and badges
 
 
 ## 1.9.0

chat/preview/ImagePreview.vue

@@ -127,7 +127,7 @@
 
 
         @Hook('mounted')
-        onMounted(): void {
+        async onMounted(): Promise<void> {
             console.info('Mounted ImagePreview');
 
             // tslint:disable-next-line:no-floating-promises
@@ -176,6 +176,12 @@
 
             const webview = this.getWebview();
 
+            // clear preview cache, particularly cookies
+            // setInterval(
+            //     () => remote.webContents.fromId(webview.getWebContentsId()).session.clearStorageData({storages: ['cookies', 'indexdb']}),
+            //     5000
+            // );
+
             webview.addEventListener(
                 'update-target-url', // 'did-navigate', // 'dom-ready',
                 (event: EventBusEvent) => {
@@ -447,7 +453,7 @@
 
             this.debugLog('ImagePreview: show.exec', url);
 
-            const due = ((url === this.exitUrl) && (this.exitInterval)) ? 0 : 100;
+            const due = ((url === this.exitUrl) && (this.exitInterval)) ? 0 : 200;
 
             this.url = url;
             this.domain = domain(url);

chat/preview/image-url-mutator.ts

@@ -13,7 +13,9 @@ export class ImageUrlMutator {
 
     private solvers: UrlSolver[] = [];
 
-    private static IMGUR_CLIENT_ID = 'd60e27140a73b2e';
+    private static readonly IMGUR_CLIENT_ID = 'd60e27140a73b2e';
+
+    private static readonly IMGUR_IMAGE_URL_REGEX = /^https?:\/\/i.imgur.com\/([a-zA-Z0-9]+)(\.[a-z0-9A-Z]+)(.*)$/;
 
     private debug: boolean;
 
@@ -122,7 +124,7 @@ export class ImageUrlMutator {
                     if (this.debug)
                         console.log('Imgur gallery', url, imageUrl, imageCount);
 
-                    return `${imageUrl}?flist_gallery_image_count=${imageCount}`;
+                    return this.getOptimizedImgurUrlFromUrl(`${imageUrl}?flist_gallery_image_count=${imageCount}`);
 
                 } catch (err) {
                     console.error('Imgur Gallery Failure', url, err);
@@ -158,7 +160,7 @@ export class ImageUrlMutator {
                     if (this.debug)
                         console.log('Imgur album', url, imageUrl, imageCount);
 
-                    return `${imageUrl}?flist_gallery_image_count=${imageCount}`;
+                    return this.getOptimizedImgurUrlFromUrl(`${imageUrl}?flist_gallery_image_count=${imageCount}`);
 
                 } catch (err) {
                     console.error('Imgur Album Failure', url, err);
@@ -197,7 +199,30 @@ export class ImageUrlMutator {
             }
         );
 
+        // Load large thumbnail instead of the full size picture when possible
+        this.add(ImageUrlMutator.IMGUR_IMAGE_URL_REGEX,
+            async(_url: string, match: RegExpMatchArray) => this.getOptimizedImgUrlFromMatch(match)
+        );
+    }
 
+
+    getOptimizedImgUrlFromMatch(match: RegExpMatchArray): string {
+        const imageId = match[1];
+        const ext = match[2];
+        const rest = match[3];
+
+        const finalExt = ((ext === '.gif') || (ext === '.gifv'))
+          ? '.mp4'
+          : ext;
+
+        return `https://i.imgur.com/${imageId}${((imageId.length <= 7) && (finalExt !== '.mp4')) ? 'l' : ''}${finalExt}${rest}`;
+    }
+
+
+    getOptimizedImgurUrlFromUrl(url: string): string {
+      const m = url.match(ImageUrlMutator.IMGUR_IMAGE_URL_REGEX);
+
+      return m ? this.getOptimizedImgUrlFromMatch(m) : url;
     }