Hentai Foundry mutator; better preview loading logic

chat/ImagePreview.vue

@@ -8,7 +8,8 @@
             <a @click="toggleStickyMode()" :class="{toggled: sticky}" title="Toggle Stickyness"><i class="fa fa-thumbtack"></i></a>
         </div>
 
-        <webview webpreferences="allowRunningInsecureContent, autoplayPolicy=no-user-gesture-required" id="image-preview-ext" ref="imagePreviewExt" class="image-preview-external" :src="externalUrl" :style="{display: externalUrlVisible ? 'flex' : 'none'}"></webview>
+        <webview src="about:blank" webpreferences="allowRunningInsecureContent, autoplayPolicy=no-user-gesture-required" id="image-preview-ext" ref="imagePreviewExt" class="image-preview-external" :style="{display: externalUrlVisible ? 'flex' : 'none'}"></webview>
+
         <div
             class="image-preview-local"
             :style="{backgroundImage: `url(${internalUrl})`, display: internalUrlVisible ? 'block' : 'none'}"
@@ -93,7 +94,9 @@
             EventBus.$on(
                 'imagepreview-toggle-stickyness',
                 (eventData: EventBusEvent) => {
-                    if ((this.url === (eventData.url as string)) && (this.visible))
+                    const eventUrl = this.jsMutator.mutateUrl(eventData.url as string);
+
+                    if ((this.url === eventUrl) && (this.visible))
                         this.sticky = !this.sticky;
                 }
             );
@@ -227,7 +230,9 @@
             this.sticky = false;
         }
 
-        dismiss(url: string, force: boolean = false): void {
+        dismiss(initialUrl: string, force: boolean = false): void {
+            const url = this.jsMutator.mutateUrl(initialUrl);
+
             if (this.debug) {
                 console.log('ImagePreview: dismiss', url);
             }
@@ -269,7 +274,9 @@
             ) as Timer;
         }
 
-        show(url: string): void {
+        show(initialUrl: string): void {
+            const url = this.jsMutator.mutateUrl(initialUrl);
+
             if (this.debug)
                 console.log('ImagePreview: show', this.externalUrlVisible, this.internalUrlVisible,
                 this.visible, this.hasMouseMovedSince(), !!this.interval, this.sticky, url);
@@ -336,7 +343,9 @@
                                 webview.executeJavaScript(this.jsMutator.getReShowMutator());
                             } else {
                                 if (this.debug)
-                                    console.log('ImagePreview: skip re-show because urls don\'t match', this.url, webview.getURL());
+                                    console.log('ImagePreview: must load; skip re-show because urls don\'t match', this.url, webview.getURL());
+
+                                webview.loadURL(this.url as string);
                             }
 
                         } catch (err) {

chat/image-preview-mutator.ts

@@ -1,12 +1,16 @@
 /* tslint:disable:quotemark */
 
 import * as _ from 'lodash';
+import * as urlHelper from 'url';
+
 
 import { domain as extractDomain } from '../bbcode/core';
 
 export interface PreviewMutator {
     match: string | RegExp;
     injectJs: string;
+
+    urlMutator?(url: string): string;
 }
 
 export interface ImagePreviewMutatorCollection {
@@ -30,6 +34,17 @@ export class ImagePreviewMutator {
         this.debug = debug;
     }
 
+
+    mutateUrl(url: string): string {
+        const mutator = this.matchMutator(url);
+
+        if ((!mutator) || (!mutator.urlMutator))
+            return url;
+
+        return mutator.urlMutator(url);
+    }
+
+
     getMutatorJsForSite(url: string): string | undefined {
         let mutator = this.matchMutator(url);
 
@@ -62,12 +77,13 @@ export class ImagePreviewMutator {
         return `(() => { try { ${mutatorJs} } catch (err) { console.error('Mutator error', err); } })();`;
     }
 
-    protected add(domain: string | RegExp, mutatorJs: string): void {
+    protected add(domain: string | RegExp, mutatorJs: string, urlMutator?: (url: string) => string): void {
         if (domain instanceof RegExp) {
             this.regexMutators.push(
                 {
                     match: domain,
-                    injectJs: mutatorJs
+                    injectJs: mutatorJs,
+                    urlMutator
                 }
             );
 
@@ -76,7 +92,8 @@ export class ImagePreviewMutator {
 
         this.hostMutators[domain] = {
             match: domain,
-            injectJs: mutatorJs
+            injectJs: mutatorJs,
+            urlMutator
         };
     }
 
@@ -99,8 +116,6 @@ export class ImagePreviewMutator {
         this.add('postimg.cc', this.getBaseJsMutatorScript('#main-image, video'));
         this.add('gifsauce.com', this.getBaseJsMutatorScript('video'));
         this.add('motherless.com', this.getBaseJsMutatorScript('.content video, .content img'));
-        // this.add('beeg.com', this.getBaseJsMutatorScript('video'));
-
         this.add(/^media[0-9]\.giphy\.com$/, this.getBaseJsMutatorScript('video, img[alt]'));
 
         // tslint:disable max-line-length
@@ -123,6 +138,25 @@ export class ImagePreviewMutator {
                 content.remove();
             `
         );
+
+
+        this.add(
+            'hentai-foundry.com',
+            this.getBaseJsMutatorScript('main video, main img'),
+            (url: string): string => {
+                const u = urlHelper.parse(url, true);
+
+                if (!u)
+                    return url;
+
+                // tslint:disable-next-line no-any
+                (u.query as any).enterAgree = 1;
+
+                delete u.search;
+
+                return urlHelper.format(u);
+            }
+        );
     }
 
     getBaseJsMutatorScript(elSelector: string, skipElementRemove: boolean = false): string {
@@ -152,7 +186,7 @@ export class ImagePreviewMutator {
 
             body.style = 'border: 0 !important; padding: 0 !important; margin: 0 !important; overflow: hidden !important;'
                 + 'width: 100% !important; height: 100% !important; opacity: 1 !important;'
-                + 'top: 0 !important; left: 0 !important;';
+                + 'top: 0 !important; left: 0 !important; position: absolute !important';
 
             img.style = 'object-position: top left !important; object-fit: contain !important;'
                 + 'width: 100% !important; height: 100% !important; opacity: 1 !important;'

electron/chat.ts

@@ -40,6 +40,7 @@ import * as electron from 'electron';
 import * as path from 'path';
 import * as qs from 'querystring';
 import {getKey} from '../chat/common';
+import { EventBus } from '../chat/event-bus';
 import l from '../chat/localize';
 import {setupRaven} from '../chat/vue-raven';
 import {Keys} from '../keys';
@@ -133,6 +134,13 @@ webContents.on('context-menu', (_, props) => {
                     electron.clipboard.writeText(props.linkURL);
             }
         });
+        menuTemplate.push({
+            id: 'toggleStickyness',
+            label: 'Toggle Sticky Preview',
+            click(): void {
+                EventBus.$emit('imagepreview-toggle-stickyness', {url: props.linkURL});
+            }
+        });
         if(process.platform === 'win32')
             menuTemplate.push({
                 id: 'incognito',

package.json

@@ -9,6 +9,7 @@
     "@f-list/vue-ts": "^1.0.2",
     "@fortawesome/fontawesome-free": "^5.6.1",
     "@types/lodash": "^4.14.119",
+    "@types/qs": "^6.5.3",
     "@types/sortablejs": "^1.7.0",
     "@types/sqlite3": "^3.1.5",
     "@vue/devtools": "^5.1.0",

readme.md

@@ -12,7 +12,7 @@ This repository contains a modified version of the mainline F-Chat 3.0 client.
     *    Manage channel's ad settings via "Tab Settings"
     *    Automatically re-post ads every 11-18 minutes (randomized) for up to 180 minutes
     *    Rotate multiple ads on a single channel
-*   Ad Rating
+*   Ad ratings
     *    LFP ads are automatically rated and matched against your profile
 *   Link previews
     *    Hover cursor over any `[url]` to see a preview of it