Raw Source Toggle Dropdown

• Minified Source

bearingg / Display Chatroom images

// ==UserScript==
// @name         Display Chatroom images
// @version      0.17
// @description  Replace upload.cc path into clickable image in sklive chatroom
// @author       bearingg
// @include      *://*.twitch.tv/*
// @include      https://live.sk-knower.com/chat/?channel=*
// @grant        none
// @downloadURL https://openuserjs.org/install/bearingg/Display_Chatroom_images.user.js
// @updateURL https://openuserjs.org/install/bearingg/Display_Chatroom_images.user.js
// @license MIT
// @copyright 2018, bearingg (https://openuserjs.org//users/bearingg)
// ==/UserScript==

function addJsFiddle() {
    var s = document.createElement('script');
    s.type = 'text/javascript';
    // var code = ` function opennav2(){ console.log('bbb'); if($("ul.navigation2 ul").css('display')=='block'){$("ul.navigation2 ul").css({'display':'none',})}else{$("ul.navigation2 ul").css({'display':'block',})}; }`;
    var code = ` function opennav2(){ if($("ul.navigation2 ul").css('display')=='block'){$("ul.navigation2 ul").css({'display':'none',})}else{$("ul.navigation2 ul").css({'display':'block',}); $("ul.navigation3 ul").css({'display':'none',}); }; }`;
    try {
        s.appendChild(document.createTextNode(code));
        document.body.appendChild(s);
    }
    catch (e) {
        s.text = code;
        document.body.appendChild(s);
    }
    let button = document.createElement('div');
    // button.innerHTML = `<ul class="navigation" style="float:right;"><li style="background: #9C9C9C;"><a style="right:0px; cursor: pointer;text-align:center;" onclick="opennav()">神器<div class="arrow-bottom"></div></a><ul style="display: none;"><li><a style="cursor: pointer;" onclick="openmodicon()">MOD 管理圖示</a></li><li><a style="cursor: pointer;" onclick="clearchat()">MOD 清空聊天室</a></li><li><a style="cursor: pointer;" onclick="darkmode()">Darkmode</a></li><li><a style="cursor: pointer;" onclick="backtotwitch()">回Twitch聊天室</a></li><li><a style="cursor: pointer;" onclick="someerror()">登出聊天室</a></li></ul></li></ul>`
    button.innerHTML = `<ul class="navigation2" style="float: right; height: 44px; width: 70px; display: block;"> <li style="background: #9C9C9C; height: 44px; text-align: center; line-height: 44px;" onclick="opennav2()"><a style="right:0px; cursor: pointer;text-align:center; height: 100%; width: 100%;">神器</a> <ul style="display: none; z-index: 999;"> <div id="jsfiddle" style="right: 0; top: 45px; border: 0px none; height: 375px; position: fixed; width: 320px; overflow: hidden; z-index: 1;"> <div style="overflow: hidden;"> </div> <div style="height: 50px; background-color: #20262E; width: 320px; position: fixed; top: 45px; right: 0;"></div>  <div style="height: 17px; background-color: #9C9C9C; width: 70px; position: fixed; top: 45px; right: 0;"></div> <iframe src="https://jsfiddle.net/2twm0gpc/show/" scrolling="no" style="height: 100%; border: 0px none; width: 100%;"> </iframe> </div> </div> </ul> </li> </ul> `
    let btn = button.firstChild;
    document.body.prepend(btn);
}

function addUploadCC() {
    var s = document.createElement('script');
    s.type = 'text/javascript';
    var code = ` function opennav3(){ if($("ul.navigation3 ul").css('display')=='block'){$("ul.navigation3 ul").css({'display':'none',})}else{$("ul.navigation3 ul").css({'display':'block',}); $("ul.navigation2 ul").css({'display':'none',}); }; }`;
    try {
        s.appendChild(document.createTextNode(code));
        document.body.appendChild(s);
    }
    catch (e) {
        s.text = code;
        document.body.appendChild(s);
    }
    let button = document.createElement('div');
    button.innerHTML = `<ul class="navigation3" style="float: right; height: 44px; width: 70px; display: block; border-right: solid; border-right-color: black; border-right-width: 1px;"> <li style="background: #9C9C9C; height: 44px; text-align: center; line-height: 44px;" onclick="opennav3()"><a style="right:0px; cursor: pointer;text-align:center; height: 100%; width: 100%;">UP圖</a> <ul style="display: none; z-index: 999;"> <div id="jsfiddle" style="right: 0; top: 45px; border: 0px none; height: 375px; position: fixed; width: 320px; overflow: hidden; z-index: 1;"> <div style="overflow: hidden;"> </div> <div style="height: 17px; background-color: #9C9C9C; width: 70px; position: fixed; top: 45px; right: 0;"></div> <iframe src="https://upload.cc/" scrolling="no" style="height: 100%; border: 0px none; width: 100%;"> </iframe> </div> </div> </ul> </li> </ul> `
    let btn = button.firstChild;
    document.body.prepend(btn);
}

function addJsFiddle_T() {
    var s = document.createElement('script');
    s.type = 'text/javascript';
    // var code = ` function opennav2(){ console.log('bbb'); if($("ul.navigation2 ul").css('display')=='block'){$("ul.navigation2 ul").css({'display':'none',})}else{$("ul.navigation2 ul").css({'display':'block',})}; }`;
    var code = ` function opennav2(){ if($("ul.navigation2 ul").css('display')=='block'){$("ul.navigation2 ul").css({'display':'none',})}else{$("ul.navigation2 ul").css({'display':'block',}); $("ul.navigation3 ul").css({'display':'none',}); }; }`;
    try {
        s.appendChild(document.createTextNode(code));
        document.body.appendChild(s);
    }
    catch (e) {
        s.text = code;
        document.body.appendChild(s);
    }
    let button = document.createElement('div');
    // button.innerHTML = `<ul class="navigation" style="float:right;"><li style="background: #9C9C9C;"><a style="right:0px; cursor: pointer;text-align:center;" onclick="opennav()">神器<div class="arrow-bottom"></div></a><ul style="display: none;"><li><a style="cursor: pointer;" onclick="openmodicon()">MOD 管理圖示</a></li><li><a style="cursor: pointer;" onclick="clearchat()">MOD 清空聊天室</a></li><li><a style="cursor: pointer;" onclick="darkmode()">Darkmode</a></li><li><a style="cursor: pointer;" onclick="backtotwitch()">回Twitch聊天室</a></li><li><a style="cursor: pointer;" onclick="someerror()">登出聊天室</a></li></ul></li></ul>`
    button.innerHTML = `<ul class="navigation2" style="position: fixed; bottom: 1rem; right: 96px; z-index: 100; height: 30px; width: 30px; display: block;"> <li style="border: 1px solid transparent; border-radius: 4px; background: #6441a4; height: 30px; text-align: center; line-height: 30px;" onclick="opennav2()"><a style="color: white; right:0px; cursor: pointer;text-align:center; height: 100%; width: 100%;">神</a> <ul style="display: none; z-index: 999;"> <div id="jsfiddle" style="right: 0; bottom: 108px; border: 0px none; height: 375px; position: fixed; width: 320px; overflow: hidden; z-index: 1;"> <div style="overflow: hidden;"> </div> <div style="height: 50px; background-color: #20262E; width: 320px; position: fixed; bottom: 433px; right: 0;"></div>  <div style="height: 17px; background-color: #9C9C9C; width: 70px; position: fixed; top: 45px; right: 0;"></div> <iframe src="https://jsfiddle.net/2twm0gpc/show/" scrolling="no" style="height: 100%; border: 0px none; width: 100%;"> </iframe> </div> </div> </ul> </li> </ul> `
    let btn = button.firstChild;
    document.body.prepend(btn);
}

function addUploadCC_T() {
    var s = document.createElement('script');
    s.type = 'text/javascript';
    var code = ` function opennav3(){ if($("ul.navigation3 ul").css('display')=='block'){$("ul.navigation3 ul").css({'display':'none',})}else{$("ul.navigation3 ul").css({'display':'block',}); $("ul.navigation2 ul").css({'display':'none',}); }; }`;
    try {
        s.appendChild(document.createTextNode(code));
        document.body.appendChild(s);
    }
    catch (e) {
        s.text = code;
        document.body.appendChild(s);
    }
    let button = document.createElement('div');
    button.innerHTML = `<ul class="navigation3" style="position: fixed; bottom: 1rem; right: 134px; z-index: 100; height: 30px; width: 30px; display: block;"> <li style="border: 1px solid transparent; border-radius: 4px; background: #6441a4; height: 30px; text-align: center; line-height: 30px;" onclick="opennav3()"><a style="color: white; right:0px; cursor: pointer;text-align:center; height: 100%; width: 100%;">UP</a> <ul style="display: none; z-index: 999;"> <div id="jsfiddle" style="right: 0; bottom: 108px; border: 0px none; height: 375px; position: fixed; width: 320px; overflow: hidden; z-index: 1;"> <div style="overflow: hidden;"> </div> <div style="height: 17px; background-color: #9C9C9C; width: 70px; position: fixed; top: 45px; right: 0;"></div> <iframe src="https://upload.cc/" scrolling="no" style="height: 100%; border: 0px none; width: 100%;"> </iframe> </div> </div> </ul> </li> </ul> `
    let btn = button.firstChild;
    document.body.prepend(btn);
}

function replaceMessage(el) {
    let regEx = /(i[0-9]\/\S+\.(jpg|jpeg|png|gif))/gi;
    let ytRegEx = /watch\?v\=\S+/i;
    let ytTrailRegEx = /&\S+/;
    if (regEx.test(el.innerText)) {
        let div = document.createElement("div");
        el.innerText.match(regEx).forEach(function (res) {
            let link = "https://upload.cc/" + res;
            let a = document.createElement("a");
            a.setAttribute("href", link);
            a.setAttribute("target", "_blank");
            let img = document.createElement("img");
            img.setAttribute("src", link);
            img.style.maxWidth = "250px";
            img.style.maxHeight = "200px";
            a.appendChild(img);
            div.appendChild(a);
            let br = document.createElement("br");
            div.appendChild(br);
        });
        el.replaceWith(div);
    } else if (ytRegEx.test(el.innerText)) {
        let fr = document.createElement("iframe");
        let res = el.innerText.match(ytRegEx)[0].replace("watch?v=", "");
        res = res.replace(res.match(ytTrailRegEx),"");
        let link = "https://www.youtube.com/embed/" + res;
        fr.setAttribute("src", link);
        fr.setAttribute("width", "304");
        fr.setAttribute("height", "171");
        fr.setAttribute("frameborder", "0");
        fr.setAttribute("allowfullscreen", "");
        el.replaceWith(fr);
    }
}

if (window.location.host === "live.sk-knower.com") {
    function displayImages() {
        Array.from(document.getElementsByClassName("skClass")).forEach(function (el) {
            replaceMessage(el);
        });
    }

    document.getElementById("messages").addEventListener('DOMSubtreeModified', displayImages, false);
    window.addEventListener('focus', displayImages);

    displayImages();
    addUploadCC();
    addJsFiddle();
}
else { // Twitch
    function displayImages() {
        Array.from(document.getElementsByClassName("text-fragment")).forEach(function (el) {
            replaceMessage(el);
        });
        Array.from(document.getElementsByClassName("link-fragment")).forEach(function (el) {
            replaceMessage(el);
        });
    }

    function registerTwitchChatroom() {
        if (document.getElementsByClassName("tw-flex-grow-1 tw-full-height tw-pd-b-1").length) {
            document.getElementsByClassName("tw-flex-grow-1 tw-full-height tw-pd-b-1")[0].addEventListener('DOMSubtreeModified', displayImages, false);
            displayImages();
            console.log("Twitch Chatroom Loaded");
        }
        else {
            setTimeout(registerTwitchChatroom, 200);
        }
    }
    window.addEventListener('focus', displayImages);

    registerTwitchChatroom();
    addUploadCC_T();
    addJsFiddle_T();
}