kamikoto00 / HAnime imgs adv

// ==UserScript==
// @name         HAnime imgs adv
// @namespace    http://hanime.tv/
// @version      0.5
// @description  Shows images resolution
// @author       kamikoto00
// @copyright    2019, kamikoto00 (https://openuserjs.org/users/kamikoto00)
// @require      https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js
// @match        https://members.hanime.tv/browse/images
// @match        https://members.hanime.tv/browse/images?*
// @match        https://members.hanime.tv/browse/images/*?*
// @match        https://hanime.tv/browse/images
// @match        https://hanime.tv/browse/images?*
// @match        https://hanime.tv/browse/images/*
// @match        https://hanime.tv/browse/images/*?*
// @license      MIT
// @grant        none
// @updateURL    https://openuserjs.org/meta/kamikoto00/HAnime_imgs_adv.meta.js
// ==/UserScript==

// ==OpenUserJS==
// @author       kamikoto00
// ==/OpenUserJS==

(async function () {
  'use strict';
  const $ = window.jQuery;

  const sizeGetter = $('<img style="">').appendTo(document.body);

  (await waitForE(".images_channel__item")).click(async () => {
    $(".cuc").first().append('<div id="wait_for_reload_check">');
    await waitFor(() => $("#wait_for_reload_check"), null, p => !p.length);
    onChange();
  });

  const imgC = window.debug = $(".cuc_container");

  onChange();

  async function onChange() {
    const imgsContainer = await waitForE(".cuc.grows");

    for (let e of imgsContainer) {
      e = $(e);
      sizeGetter.attr("src", e.attr("href"));
      let sg;
      try {
        sg = await waitFor(() => sizeGetter[0], sg => sg, sg => sg.naturalWidth && sg.naturalHeight, 0, 3000);
      }
      catch (e) {
        console.log(sg = await waitFor(() => sizeGetter, sg => ({
          naturalWidth: sg.width(),
          naturalHeight: sg.height()
        }), sg => sg.width() && sg.height(), 0));
      }
      //await new Promise(r => sizeGetter.one("load", r));
      const img = $(`<div style="position: absolute; top: 0; width: 100%; color: white; transition: all 280ms; background: linear-gradient(0deg, rgba(23, 24, 26, 0), rgba(23, 24, 26, .85))">${sg.naturalWidth}x${sg.naturalHeight}</div>`).appendTo(e).hide();
      e.on("mouseenter", () => {
        img.show(75);
      });
      e.on("mouseleave", () => {
        img.hide(50);
      });
    }

    sizeGetter.attr("src", "");
  }

  async function waitForE(selector, delay = 100, timeout = 10000) {
    return waitFor(() => window.jQuery(selector), p => p, p => p.length, delay, timeout, selector);
  }

  async function waitFor(gF, returnF, checkF, delay = 100, timeout = 10000, timeouterr) {
    return new Promise(async (resolve, reject) => {
      let tow;
      const waiter = setInterval(() => {
        try {
          const r = (typeof gF === "function" ? gF() : gF);
          if (typeof checkF === "function" ? checkF(r) : checkF) {
            clearInterval(waiter);
            clearTimeout(tow);
            resolve(typeof returnF === "function" ? returnF(r) : returnF);
          }
        }
        catch (e) {
          clearTimeout(tow);
          clearIntrerval(waiter);
          reject(e);
        }
      }, delay);
      tow = setTimeout(() => {
        clearInterval(waiter);
        reject(new Error(`Waiting for (${timeouterr || (`function ${gF} with check ${checkF}`)}) was too long (${timeout} ms)`));
      }, timeout);
    });
  }
})();