bigger emote preview
// ==UserScript==
// @name youtube twitch BIG emote preview
// @match https://www.twitch.tv/*
// @match https://www.youtube.com/live_chat*
// @version 1.0
// @license MIT
// @description bigger emote preview
// @namespace https://greasyfork.org/users/1121708
// ==/UserScript==
addEventListener("mouseover", (event)=>{
if(event.target.tagName == 'IMG'){
switch(location.host){
case "www.twitch.tv":
// use url in srcset
if(event.target.hasAttribute('srcset')){
let url= ["",""];
event.target.srcset.split(/,/).forEach((e)=>{
let arr= e.trim().split(/ /);
if(url[1] < arr[1])url[0]= arr[0];
});
addImg(url[0], event);
}
break;
case "www.youtube.com":
if(event.target.classList.contains('yt-emoji-picker-upsell-category-renderer')||
event.target.classList.contains('yt-emoji-picker-category-renderer')||
event.target.classList.contains('yt-live-chat-text-message-renderer')||
event.target.classList.contains('yt-live-chat-author-badge-renderer')){
addImg(event.target.src.split(/=/)[0]+"=w128-h128-c", event);
// w24-h24-c-k-nd
// single w, h, s also work
// add -c can be resize
// add -k no playing frame
// dont know -nd doing
}
}
}
});
function addImg(src, event){
let img= document.createElement('IMG');
let offset= (location.host == "www.twitch.tv")? 28 : 32;
img.onmouseleave= ()=>{img.remove();};
img.onload= ()=>{
if(img){
img.style.setProperty('left', (event.clientX+offset+img.width > innerWidth ? event.clientX-offset-img.width : event.clientX+offset)+'px');
img.style.setProperty( 'top', (event.clientY+offset+img.height > innerHeight? event.clientY-offset-img.height: event.clientY+offset)+'px');
document.body.append(img);
}
};
img.style.setProperty('z-index', '20250304');
img.style.setProperty('position', 'fixed');
img.src= src;
event.target.onmouseleave= ()=>{
img.remove();
if(!img.complate)img=undefined;
};
}