Add sources, fix windows middle click bug

2 years ago · 9a5a7ef381
8 changed files with 559 additions and 359 deletions
--- a/main.meta.js
+++ b/main.meta.js
@ -1,7 +1,7 @@
 // ==UserScript==
 // @name         PNGExtraEmbed
 // @namespace    https://coom.tech/
-// @version      0.96
+// @version      0.97
 // @description  uhh
 // @author       You
 // @match        https://boards.4channel.org/*
--- a/main.user.js
+++ b/main.user.js
--- a/src/App.svelte
+++ b/src/App.svelte
@ -90,6 +90,11 @@
      <input type="checkbox" bind:checked={$settings.sh} />
      Show Minimap
    </label>
+    <label>
+      <input type="checkbox" bind:checked={$settings.ep} />
+      <!-- svelte-ignore a11y-missing-attribute -->
+      Turn off embedded file preloading<a title="You might still want to enable 'preload external files'">?</a>
+    </label>
    <label>
      <input type="checkbox" bind:checked={$settings.te} />
      Turn off third-eye.
--- a/src/Embedding.svelte
+++ b/src/Embedding.svelte
@ -119,6 +119,7 @@

  export async function bepis(ev: MouseEvent) {
    if ($appState.isCatalog) return;
+
    if (ev.button == 0) {
      contracted = !contracted
      if (hovering) hoverStop()
@ -137,15 +138,17 @@
      if (file.thumbnail && !furl) {
        // don't know how you managed to click before hovering but oh well
        unzip()
-      }    
+      }
+      ev.preventDefault();
    } else if (ev.button == 1) { // middle click
      let src = furl || url;
      if (ev.altKey && file.source) {
        src = file.source;
      }
      if (ev.shiftKey && file.page) {
-        src = file.page;
+        src = file.page.url;
      }
+      ev.preventDefault();
      if (isNotChrome) {
        window.open(src, '_blank');
      } else
@ -244,8 +247,11 @@
  <div
    class:contract={contracted}
    class="place"
-    on:click={bepis}
-    on:auxclick={bepis}
+
+    on:click={e => e.preventDefault()}
+    on:auxclick={e => e.preventDefault()}
+    on:mousedown={bepis}
+
    on:mouseover={hoverStart}
    on:mouseout={hoverStop}
    on:mousemove={hoverUpdate}
@ -253,7 +259,12 @@
    bind:this={place}
  >
    {#if isImage}
-      <img bind:this={imgElem} alt={file.filename} src={furl || url} />
+      <!-- svelte-ignore a11y-missing-attribute -->
+        <img
+          bind:this={imgElem}
+          alt={file.filename}
+          src={furl || url}
+        />
    {/if}
    {#if isAudio}
      <audio
@ -267,7 +278,8 @@
    {/if}
    {#if isVideo}
      <!-- svelte-ignore a11y-media-has-caption -->
-      <video loop={$settings.loop} bind:this={videoElem} src={furl || url} />
+      <!-- svelte-ignore a11y-missing-attribute -->
+        <video loop={$settings.loop} bind:this={videoElem} src={furl || url} />
      <!-- assoom videos will never be loaded from thumbnails -->
    {/if}
  </div>
@ -325,16 +337,16 @@
    z-index: 9;
  }

-  .contract > img,
-  .contract > video {
+  .contract img,
+  .contract video {
    max-width: 125px !important;
    max-height: 125px !important;
    width: auto;
    height: auto;
  }

-  .place:not(.contract) > video,
-  .place:not(.contract) > img,
+  .place:not(.contract) video,
+  .place:not(.contract) img,
  .hoverer > video,
  .hoverer > img {
    max-width: 100vw;
--- a/src/EyeButton.svelte
+++ b/src/EyeButton.svelte
@ -50,6 +50,22 @@ import type { EmbeddedFile } from './main';
  on:click={downloadFile}
  class="fa fa-download clickable"
 />
+{#if file.source}
+<!-- svelte-ignore a11y-missing-content -->
+<a
+  href={file.source}
+  target="_blank"
+  class="clickable"
+>Source</a>
+{/if}
+{#if file.page}
+<!-- svelte-ignore a11y-missing-content -->
+<a
+  href={file.page.url}
+  target="_blank"
+  class="clickable"
+>{file.page.title}</a>
+{/if}
 {#if isNotChrome && isVideo}
  <!-- svelte-ignore a11y-missing-attribute -->
  <a on:click={(ev) => {
--- a/src/main.ts
+++ b/src/main.ts
@ -14,8 +14,6 @@ import ScrollHighlighter from "./ScrollHighlighter.svelte";
 import SettingsButton from './SettingsButton.svelte';
 import Embedding from './Embedding.svelte';
 import EyeButton from './EyeButton.svelte';
-import { fileTypeFromBuffer } from "file-type";
-import { buf } from "crc-32";

 export interface ImageProcessor {
    skip?: true;
@ -25,7 +23,7 @@ export interface ImageProcessor {
    inject?(b: File, c: File): Buffer | Promise<Buffer>;
 }

-let csettings: any;
+export let csettings: Parameters<typeof settings['set']>[0];
 let processors: ImageProcessor[] =
    [thirdeye, png, webm, gif];

@ -67,7 +65,7 @@ async function* streamRemote(url: string, chunkSize = 16 * 1024, fetchRestOnNonC
 }

 type EmbeddedFileWithPreview = {
-    page?: string; // can be a booru page
+    page?: {title: string, url: string}; // can be a booru page
    source?: string; // can be like a twitter post this was posted in originally
    thumbnail: Buffer;
    filename: string;
--- a/src/stores.ts
+++ b/src/stores.ts
@ -1,8 +1,8 @@
 import { writable } from "svelte/store";

-const localLoad = (key: string, def: any) =>
+const localLoad = <T>(key: string, def: T) =>
    ('__pee__' + key) in localStorage
-        ? JSON.parse(localStorage.getItem('__pee__' + key)!)
+        ? JSON.parse(localStorage.getItem('__pee__' + key)!) as T
        : def;

 const localSet = (key: string, value: any) =>
@ -18,6 +18,8 @@ export const settings = writable(localLoad('settings', {
    ca: false,
    pre: false,
    prev: false,
+    sh: false,
+    ep: false,
    blacklist: ['guro', 'scat', 'ryona', 'gore'],
    sources: ['gelbooru.com',
        'yande.re',
--- a/src/thirdeye.ts
+++ b/src/thirdeye.ts
@ -3,6 +3,7 @@ import { GM_fetch } from "./requests";
 import { settings } from "./stores";

 export type Booru = {
+    name: string;
    domain: string;
    endpoint: string;
    quirks: tran;
@ -19,6 +20,15 @@ export type BooruMatch = {

 type tran = (a: any) => BooruMatch[];

+function firstThatFor<T>(promises: Promise<T>[], pred: (v: T) => boolean) {
+    Promise.any(promises.map(async p => {
+        const v = await p;
+        if (pred(v))
+            return v;
+        throw v;
+    }))
+}
+
 const gelquirk: (s: string) => tran = prefix => (a =>
    (a.post || a).map((e: any) => ({
        ext: e.image.substr(e.image.indexOf('.') + 1),
@ -31,11 +41,13 @@ const gelquirk: (s: string) => tran = prefix => (a =>

 export const boorus: Booru[] = [
    {
+        name: 'Gelbooru',
        domain: 'gelbooru.com',
        endpoint: '/index.php?page=dapi&s=post&q=index&json=1&tags=md5:',
        quirks: gelquirk("https://gelbooru.com/index.php?page=post&s=view&id=")
    },
    {
+        name: 'Yandere',
        domain: 'yande.re',
        endpoint: '/post.json?tags=md5:',
        quirks: a =>
@ -49,6 +61,7 @@ export const boorus: Booru[] = [
            } as BooruMatch))
    },
    {
+        name: 'Sankaku',
        domain: 'capi-v2.sankakucomplex.com',
        endpoint: '/posts/keyset?tags=md5:',
        quirks: a => a.data ?
@ -63,12 +76,14 @@ export const boorus: Booru[] = [
            } as BooruMatch)) : []
    },
    {
+        name: 'Rule34',
        domain: 'api.rule34.xxx',
        endpoint: '/index.php?page=dapi&s=post&q=index&json=1&tags=md5:',
        // note: rule34 do not seem to give source in their API
        quirks: gelquirk("https://rule34.xxx/index.php?page=post&s=view&id=")
    },
    {
+        name: 'Danbooru',
        domain: 'danbooru.donmai.us',
        endpoint: '/posts.json?tags=md5:',
        quirks: a =>
@ -82,6 +97,7 @@ export const boorus: Booru[] = [
            } as BooruMatch))
    },
    {
+        name: 'Lolibooru',
        domain: 'lolibooru.moe',
        endpoint: '/post.json?tags=md5:',
        quirks: a =>
@ -125,19 +141,22 @@ const findFileFrom = async (b: Booru, hex: string) => {

 const extract = async (b: Buffer, fn?: string) => {
    let result!: BooruMatch[];
+    let booru!: string;
    for (const e of Object.values(boorus)) {
        if (!sources.has(e.domain))
            continue;
        result = await findFileFrom(e, fn!.substring(0, 32));
-        if (result.length)
+        if (result.length) {
+            booru = e.name;
            break;
+        }
    }
    let cachedFile: ArrayBuffer;
    const prev = result[0].preview_url;
    const full = result[0].full_url;
    return {
        source: result[0].source,
-        page: result[0].page,
+        page: { title: booru, url: result[0].page },
        filename: fn!.substring(0, 33) + result[0].ext,
        thumbnail: (await (await GM_fetch(prev || full)).arrayBuffer()), // prefer preview
        data: async (lsn) => {