Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
I cut apart the nifty chat monitor script to make it only do inline images, and to also do them on vods.
// ==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