diff --git a/CHANGELOG.md b/CHANGELOG.md index 33022be..e170206 100644 --- a/CHANGELOG.md +++ b/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 diff --git a/chat/preview/ImagePreview.vue b/chat/preview/ImagePreview.vue index f857e7b..0805b65 100644 --- a/chat/preview/ImagePreview.vue +++ b/chat/preview/ImagePreview.vue @@ -127,7 +127,7 @@ @Hook('mounted') - onMounted(): void { + async onMounted(): Promise { 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); diff --git a/chat/preview/image-url-mutator.ts b/chat/preview/image-url-mutator.ts index a844a10..807e75b 100644 --- a/chat/preview/image-url-mutator.ts +++ b/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; }