Last active
May 26, 2020 19:43
-
-
Save Zazcallabah/8075e23ec172fb499ce0e8d34faf180a to your computer and use it in GitHub Desktop.
I cut apart the nifty chat monitor script to make it only do inline images, and to also do them on vods.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// ==UserScript== | |
// @name Nifty Chat Monitor | |
// @namespace http://somewhatnifty.com | |
// @description reformats twitch chat for display on a chat monitor | |
// @match https://www.twitch.tv/* | |
// @version 0.4 | |
// @require https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js | |
// @grant GM_getResourceText | |
// @grant GM_addStyle | |
// @require https://raw.githubusercontent.com/sizzlemctwizzle/GM_config/master/gm_config.js | |
// @grant GM_getValue | |
// @grant GM_setValue | |
// @grant GM_log | |
// @resource material-icons https://fonts.googleapis.com/icon?family=Material+Icons | |
// ==/UserScript== | |
function waitForKeyElements ( | |
selectorTxt, | |
actionFunction, | |
bWaitOnce, | |
iframeSelector | |
) { | |
var targetNodes, btargetsFound; | |
if (typeof iframeSelector == "undefined") | |
targetNodes = $(selectorTxt); | |
else | |
targetNodes = $(iframeSelector).contents().find(selectorTxt); | |
if (targetNodes && targetNodes.length > 0) { | |
btargetsFound = true; | |
targetNodes.each ( function () { | |
var jThis = $(this); | |
var alreadyFound = jThis.data ('alreadyFound') || false; | |
if (!alreadyFound) { | |
var cancelFound = actionFunction (jThis); | |
if (cancelFound) | |
btargetsFound = false; | |
else | |
jThis.data ('alreadyFound', true); | |
} | |
} ); | |
} | |
else { | |
btargetsFound = false; | |
} | |
//--- Get the timer-control variable for this selector. | |
var controlObj = waitForKeyElements.controlObj || {}; | |
var controlKey = selectorTxt.replace (/[^\w]/g, "_"); | |
var timeControl = controlObj [controlKey]; | |
//--- Now set or clear the timer as appropriate. | |
if (btargetsFound && bWaitOnce && timeControl) { | |
//--- The only condition where we need to clear the timer. | |
clearInterval (timeControl); | |
delete controlObj [controlKey] | |
} | |
else { | |
//--- Set a timer, if needed. | |
if ( ! timeControl) { | |
timeControl = setInterval ( function () { | |
waitForKeyElements ( selectorTxt, | |
actionFunction, | |
bWaitOnce, | |
iframeSelector | |
); | |
}, | |
3000 | |
); | |
controlObj [controlKey] = timeControl; | |
} | |
} | |
waitForKeyElements.controlObj = controlObj; | |
} | |
//text-fragment | |
var MESSAGE_CONTAINER = ".chat-list"; | |
waitForKeyElements(MESSAGE_CONTAINER, function(){loadlive(MESSAGE_CONTAINER)}); | |
var MESSAGE_CONTAINER2 = ".qa-vod-chat"; | |
waitForKeyElements(MESSAGE_CONTAINER2, function(){loadvod(MESSAGE_CONTAINER2)}); | |
function loadvod(sel) { | |
var target = document.querySelector(sel); | |
var observer = new MutationObserver(function(mutations) { | |
mutations.forEach(function(mutation) { | |
var newNodes = mutation.addedNodes; // DOM NodeList | |
if (newNodes !== null) { | |
// If there are new nodes added | |
newNodes.forEach(function(newNode) { | |
if (newNode.nodeType == Node.ELEMENT_NODE) { | |
newNode.querySelectorAll(".text-fragment").forEach(function(fragment) { | |
if( fragment.innerHTML.includes("<") ) | |
return; | |
var re = /(https?:\/\/.*(?:jpg|png|gif|jpeg))/gm; | |
fragment.innerHTML = fragment.innerHTML.replace("media.giphy.com", "media1.giphy.com").replace(re,"<img src=\"$&\"/>"); | |
var giphy_re = /https?:\/\/giphy\.com\/gifs\/(.*-)?([a-zA-Z0-9]+)/gm; | |
fragment.innerHTML = fragment.innerHTML.replace(giphy_re,"https://media1.giphy.com/media/$2/giphy.gif"); | |
}); | |
} | |
}); | |
} | |
}); | |
}); | |
observer.observe(target, {childList: true,subtree:true}); | |
} | |
function loadlive(sel) { | |
var target = document.querySelector(sel); | |
var observer = new MutationObserver(function(mutations) { | |
mutations.forEach(function(mutation) { | |
var newNodes = mutation.addedNodes; // DOM NodeList | |
if (newNodes !== null) { | |
// If there are new nodes added | |
newNodes.forEach(function(newNode) { | |
if (newNode.nodeType == Node.ELEMENT_NODE) { | |
if (!newNode.classList.contains("chat-line__message")) { | |
// Only treat chat messages | |
return; | |
} | |
newNode.querySelectorAll(".chat-line__message > a").forEach(function(link) { | |
var re = /(.*(?:jpg|png|gif|jpeg))$/gm; | |
if (re.test(link.textContent)) { | |
link.innerHTML = | |
'<img src="' + link.textContent.replace("media.giphy.com", "media1.giphy.com") + '" alt="' + link.textContent + '"/>'; | |
} | |
var match = /^https?:\/\/giphy\.com\/gifs\/(.*-)?([a-zA-Z0-9]+)$/gm.exec(link.textContent); | |
if (match) { | |
var imageUrl = "https://media1.giphy.com/media/" + match[2].split("-").pop() + "/giphy.gif"; | |
link.innerHTML = '<img src="' + imageUrl + '" alt="' + link.textContent + '"/>'; | |
} | |
match = /^https?:\/\/(www\.)?(youtu\.be\/|youtube\.com\/watch\?v=)([^&?]+).*$/gm.exec(link.textContent); | |
if (match) { | |
imageUrl = "https://img.youtube.com/vi/" + match[3] + "/mqdefault.jpg"; | |
link.innerHTML = link.textContent + '<br/><img src="' + imageUrl + '" alt="' + link.textContent + '"/>'; | |
} | |
}); | |
} | |
}); | |
} | |
}); | |
}); | |
observer.observe(target, {childList: true,subtree:true}); | |
} | |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment