Fixes to image previews

CHANGELOG.md

@@ -2,7 +2,7 @@
 
 ## Canary
 *   Moved database queries to a web worker to gain more responsive UI
-*   Fixed Gelbooru, Instagram, and Twitter previews
+*   Fixed Gelbooru, Gfycat, Instagram, Twitter, and Vimeo 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

chat/preview/assets/browser.pre.js

@@ -131,3 +131,11 @@ const previewInitiationTime = Date.now();
     }
 })();
 
+
+try {
+    if (!!window.location.toString().match(/__x-suppress__/)) {
+        document.write("<script type='application/x-suppress'>");
+    }
+} catch(err) {
+    console.error('X-Suppress', err);
+}

chat/preview/assets/browser.processor.raw.js

@@ -23,7 +23,8 @@ class FListImagePreviewDomMutator {
             debug: true,
             skipElementRemove: false,
             safeTags: [],
-            injectStyle: false
+            injectStyle: false,
+            delayPreprocess: false
         };
         /* ## SETTINGS_END ## */
 
@@ -32,6 +33,7 @@ class FListImagePreviewDomMutator {
         this.selectors = this.settings.selectors;
         this.skipElementRemove = this.settings.skipElementRemove;
         this.safeTags = this.settings.safeTags;
+        this.delayPreprocess = this.settings.delayPreprocess;
 
         this.body = document.querySelector('body');
         this.html = document.querySelector('html');
@@ -42,7 +44,9 @@ class FListImagePreviewDomMutator {
                 : (...args) => (this.debug('MOCK.ipc.sendToHost', ...args))
         };
 
+        if (!this.delayPreprocess) {
             this.preprocess();
+        }
 
         this.img = this.detectImage(this.selectors, this.body);
         this.wrapper = this.createWrapperElement();
@@ -84,6 +88,10 @@ class FListImagePreviewDomMutator {
             return;
         }
 
+        if (this.delayPreprocess) {
+            this.preprocess();
+        }
+
         this.updateImgSize(this.img, 'pre');
 
         this.attachImgToWrapper(this.img, this.wrapper);
@@ -186,7 +194,7 @@ class FListImagePreviewDomMutator {
                 (img.play)
                 && (
                     (lessStrict)
-                    || ((!lessStrict) && (!img.paused) && (!img.ended) && (!(img.currentTime > 0)))
+                    || ((!lessStrict) && (!img.ended) && (!(img.currentTime > 0)))
                 )
             )
             {

chat/preview/image-dom-mutator.ts

@@ -146,13 +146,13 @@ export class ImageDomMutator {
         this.add('gyazo.com', this.getBaseJsMutatorScript(['.image-view video', '.image-view img']));
         this.add('chan.sankakucomplex.com', this.getBaseJsMutatorScript(['video', '#image']));
         this.add('danbooru.donmai.us', this.getBaseJsMutatorScript(['video', '#image']));
-        this.add('gfycat.com', this.getBaseJsMutatorScript(['video']) /*, undefined, 'dom-ready' */);
+        this.add('gfycat.com', this.getBaseJsMutatorScript(['video'], true, [], true));
-        this.add('gfycatporn.com', this.getBaseJsMutatorScript(['video']) /*, undefined, 'dom-ready'*/);
+        this.add('gfycatporn.com', this.getBaseJsMutatorScript(['video'], true, [], true));
         this.add('youtube.com', this.getBaseJsMutatorScript(['video']), undefined, 'dom-ready');
         this.add('instantfap.com', this.getBaseJsMutatorScript(['#post video', '#post img']));
         this.add('webmshare.com', this.getBaseJsMutatorScript(['video']));
         this.add('vimeo.com', this.getBaseJsMutatorScript(['#video, video', '#image, img']));
-        this.add('sex.com', this.getBaseJsMutatorScript(['.image_frame video', '.image_frame img']));
+        this.add('sex.com', this.getBaseJsMutatorScript(['.image_frame video', '.image_frame img']), undefined, 'dom-ready');
         // this.add('redirect.media.tumblr.com', this.getBaseJsMutatorScript(['picture video', 'picture img']));
         this.add(/^[a-zA-Z0-9-]+\.media\.tumblr\.com$/, this.getBaseJsMutatorScript(['.photoset video', '.photoset img', 'img:not([role="img"]):not([alt="Avatar"])', '#base-container video', '#base-container img', 'picture video', 'picture img', 'video', 'img']), undefined, 'dom-ready');
         this.add(/^[a-zA-Z0-9-]+\.tumblr\.com$/, this.getBaseJsMutatorScript(['.photoset iframe', '.photoset video', '.photoset img', 'img:not([role="img"]):not([alt="Avatar"])', 'picture video', 'picture img', 'video', 'img']), undefined, 'dom-ready');
@@ -316,12 +316,13 @@ export class ImageDomMutator {
     }
 
 
-    protected getBaseJsMutatorScript(elSelector: string[], skipElementRemove: boolean = false, safeTags: string[] = []): string {
+    protected getBaseJsMutatorScript(elSelector: string[], skipElementRemove: boolean = false, safeTags: string[] = [], delayPreprocess = false): string {
         const js = this.scripts.processor; // ./assets/browser.processor.raw.js
 
         const settings = {
             skipElementRemove,
             safeTags,
+            delayPreprocess,
             selectors: elSelector,
             debug: this.debug
         };

chat/preview/image-url-mutator.ts

@@ -1,5 +1,6 @@
 import * as _ from 'lodash';
 import Axios from 'axios';
+import { domain } from '../../bbcode/core';
 
 export type UrlSolverCallback = (url: string, match: RegExpMatchArray) => Promise<string>;
 
@@ -19,6 +20,11 @@ export class ImageUrlMutator {
 
     private debug: boolean;
 
+    private static SUPPRESSOR_DOMAINS = [
+      'vimeo.com',
+      'gfycat.com'
+    ];
+
 
     constructor(debug: boolean) {
         this.debug = debug;
@@ -191,7 +197,7 @@ export class ImageUrlMutator {
                     if (this.debug)
                         console.log('Imgur image', url, imageUrl);
 
-                    return imageUrl as string;
+                    return this.getOptimizedImgurUrlFromUrl(imageUrl as string);
                 } catch (err) {
                     console.error('Imgur Image Failure', url, err);
                     return url;
@@ -239,11 +245,28 @@ export class ImageUrlMutator {
     async resolve(url: string): Promise<string> {
         const match = _.find(this.solvers, (s: UrlSolver) => url.match(s.matcher)) as (UrlSolver | undefined);
 
-        if (!match) {
+        return this.attachSuppressor(
+          match
+          ? await match.solver(url, url.match(match.matcher) as RegExpMatchArray)
+          : url
+        );
+
+        // return this.attachSuppressor(await match.solver(url, url.match(match.matcher) as RegExpMatchArray));
+    }
+
+
+    attachSuppressor(url: string): string {
+      const host = domain(url);
+
+      if (_.indexOf(ImageUrlMutator.SUPPRESSOR_DOMAINS, host) < 0) {
         return url;
       }
 
-        return match.solver(url, url.match(match.matcher) as RegExpMatchArray);
+      const u = new URL(url);
+
+      u.searchParams.set('__x-suppress__', '1');
+
+      return u.toString();
     }
 }
 

chat/preview/test-urls.txt

@@ -25,9 +25,9 @@
 
     [url=https://www.pornhub.com/gif/28316052]Pornhub gif[/url]
 
-    [url=https://www.pornhub.com/photo/524286042]Pornhub photo[/url]
+    [url=https://www.pornhub.com/photo/315839211]Pornhub photo[/url]
 
-    [url=https://www.pornhub.com/photo/402223321]Pornhub photo gif[/url]
+    [url=https://www.pornhub.com/photo/371605071]Pornhub photo gif[/url]
 
     [url=https://chan.sankakucomplex.com/post/show/6163997]Test[/url]
 
@@ -49,13 +49,17 @@
 
     [url=https://www.sex.com/pin/57537179-cock-slapping-hungry-tongue/]Test[/url]
 
-    [url=http://gfycatporn.com/deepthroat.php?img=56]Test[/url]
+    [url=http://gfycatporn.com/deepthroat.php?img=56]Gfycatporn category[/url]
+
+    [url=https://thumbs.gfycat.com/FluidSmugHyracotherium-mobile.mp4]Gfycatporn thumb[/url]
+
+    [url=https://gfycat.com/welllitsilentchicken]Gfycat video[/url]
 
     [url=https://www.youtube.com/watch?v=_52zdiltkRM]Test[/url]
 
     [url=https://rule34.xxx/index.php?page=post&s=view&id=3213191]Test[/url]
 
-    [url=https://hypnohub.net/post/show/93283/3d-auxtasy-aware-brain_drain-d-va-dark_skin-female]Test[/url]
+    [url=https://hypnohub.net/post/show/11075/arashidrgn_-manipper-bimbofication-brain_drain-bre]Test[/url]
 
     [url=https://www.derpibooru.org/images/2234687?q=video]Derpibooru video[/url]
 
@@ -113,6 +117,3 @@
 
     [url=https://twitter.com/kittykushman2/status/1351824713094483970]Twitter single sensitive marked image[/url]
 
-
-Broken
-https://vimeo.com/265884960