// ==UserScript==
// @name         Discord: Hide Image
// @name:zh-TW   Discord 隱藏圖片
// @name:zh-CN   Discord 屏蔽图片
// @version      1.0.1
// @description  Make Discord images opacity lower.
// @description:zh-TW  使 Discord 聊天視窗的圖片較為透明
// @description:zh-CN  使 Discord 聊天视窗的图片较为透明
// @author       Hayao-Gai
// @namespace	 https://github.com/HayaoGai
// @icon         https://i.imgur.com/rE9N0R7.png
// @match        https://discord.com/channels/@me*
// @grant        none
// @downloadURL none
// ==/UserScript==

/* jshint esversion: 6 */

(function() {
    'use strict';

    let scrolling = false;

    css();
    locationChange();
    window.addEventListener("load", init);
    window.addEventListener("scroll", update, true);

    function init() {
        for (let i = 0; i < 5; i++) {
            setTimeout(getTarget, 500 * (i + 1));
        }
    }

    function getTarget() {
        // image
        document.querySelectorAll("img:not(.hide)").forEach(image => {
            image.classList.add("hide");
            image.addEventListener("mouseenter", showTarget);
            image.addEventListener("mouseleave", hideTarget);
        });
        // video
        document.querySelectorAll("video:not(.hide)").forEach(video => {
            video.classList.add("hide");
            video.addEventListener("mouseenter", showTarget);
            video.addEventListener("mouseleave", hideTarget);
        });
    }

    function showTarget() {
        this.style.opacity = 1;
    }

    function hideTarget() {
        this.style.opacity = 0.1;
    }

    function update() {
        if (scrolling) return;
        scrolling = true;
        init();
        setTimeout(() => { scrolling = false; }, 1000);
    }

    function css() {
        const style = document.createElement("style");
        style.type = "text/css";
        style.innerHTML =
            `.hide {
                 transition: opacity 0.3s;
                 opacity: 0.1;
             }`;
        document.head.appendChild(style);
    }

    function locationChange() {
        window.addEventListener('locationchange', init);
        // situation 1
        history.pushState = (f => function pushState(){
            var ret = f.apply(this, arguments);
            window.dispatchEvent(new Event('pushState'));
            window.dispatchEvent(new Event('locationchange'));
            return ret;
        })(history.pushState);
        // situation 2
        history.replaceState = (f => function replaceState(){
            var ret = f.apply(this, arguments);
            window.dispatchEvent(new Event('replaceState'));
            window.dispatchEvent(new Event('locationchange'));
            return ret;
        })(history.replaceState);
        // situation 3
        window.addEventListener('popstate', () => {
            window.dispatchEvent(new Event('locationchange'));
        });
    }

})();