☰

youtube twitch BIG emote preview

bigger emote preview

  1. // ==UserScript==
  2. // @name          youtube twitch BIG emote preview
  3. // @match         https://www.twitch.tv/*
  4. // @exclude-match https://www.twitch.tv/*/*
  5. // @match         https://www.youtube.com/live_chat*
  6. // @version       1.1
  7. // @license       MIT
  8. // @description   bigger emote preview
  9. // @namespace https://greasyfork.org/users/1121708
  10. // ==/UserScript==
  11.  
  12. switch(location.host){
  13.     case "www.twitch.tv":
  14.         let observer_chat= new MutationObserver( (records)=>{
  15.             records.forEach( (record)=>{
  16.                 if(record.addedNodes) record.addedNodes.forEach( (node)=>{
  17.                     if(node.nodeName != "#text") node.querySelectorAll("img").forEach( (img)=>{
  18.                         img.onmouseover= addImg;
  19.                     });
  20.                 });
  21.             });
  22.         });
  23.         let observer_element= new MutationObserver( (records)=>{
  24.             records.forEach( (record)=>{
  25.                 if(record.addedNodes) record.addedNodes.forEach( (node)=>{
  26.                     if(node.className && (node.classList.contains("support-panel-container") || node.className.match(/bttv-EmoteMenuPopover/))) node.onmouseover= addImg;
  27.                 });
  28.                 else if(record.removedNodes) record.removedNodes.forEach( (node)=>{
  29.                     if(node.className && (node.classList.contains("support-panel-container") || node.className.match(/bttv-EmoteMenuPopover/))) node.onmouseover= undefined;
  30.                 });
  31.             });
  32.         });
  33.         let observer_emote_picker= new MutationObserver( (records)=>{
  34.             records.forEach( (record)=>{
  35.                 record.addedNodes.forEach( (node)=>{
  36.                     if(node.className && (node.classList.contains("cafndC") || node.classList.contains("lpdoyl"))) node.onmouseover= addImg;
  37.                 });
  38.             });
  39.         });
  40.         var observer_root= new MutationObserver( (records)=>{
  41.             records.forEach( (record)=>{
  42.                 record.addedNodes.forEach( (node)=>{
  43.                     if(node.className && node.classList.contains("cwtKyw")){
  44.                         observer_element.observe(document.querySelector(".channel-root__player"), {childList: true}); // support-panel-container
  45.                         observer_element.observe(document.body, {childList: true});                                   // bttv-EmoteMenuPopover
  46.                         observer_emote_picker.observe(document.querySelector(".blcfev"), {childList: true});          // emote-picker
  47.                         observer_chat.observe(document.querySelector(".cNKHwD"), {childList: true, subtree: true});   // bits N points
  48.                         observer_chat.observe(document.querySelector(".dsMzFl"), {childList: true, subtree: true});   // chat input
  49.                         observer_chat.observe(document.querySelector(".chat-scrollable-area__message-container"), {childList: true, subtree: true}); // chat message
  50.                         observer_root.disconnect();
  51.                     }
  52.                 });
  53.             });
  54.         });
  55.         break;
  56.     case "www.youtube.com":
  57.         var observer_root = new MutationObserver( (records)=>{
  58.             records.forEach( (record)=>{
  59.                 record.addedNodes.forEach( (node)=>{
  60.                       if(node.tagName == 'IMG')
  61.                           if(node.classList.contains('yt-emoji-picker-upsell-category-renderer')||
  62.                              node.classList.contains('yt-emoji-picker-category-renderer')||
  63.                              node.classList.contains('yt-live-chat-text-message-renderer')||
  64.                              node.classList.contains('yt-live-chat-author-badge-renderer'))
  65.                                 node.onmouseover= addImg;
  66.                 });
  67.             });
  68.         });
  69. }
  70. observer_root.observe(document, {childList: true, subtree: true});
  71.  
  72.  
  73.  
  74.  
  75.  
  76. function addImg(event){
  77.     if(event.target.tagName == 'IMG'){
  78.         switch(location.host){
  79.             case "www.twitch.tv":
  80.                 // use url in srcset
  81.                 if(event.target.hasAttribute('srcset')){
  82.                     let url= ["",""];
  83.                     event.target.srcset.split(/,/).forEach((e)=>{
  84.                         let arr= e.trim().split(/ /);
  85.                         if(url[1] < arr[1]) url[0]= arr[0];
  86.                     });
  87.                     newImg(url[0], event);
  88.                 }
  89.                 break;
  90.             case "www.youtube.com":
  91.                 newImg(event.target.src.split(/=/)[0]+"=w128-h128-c", event);
  92.                 // w24-h24-c-k-nd
  93.                 // single w, h, s also work
  94.                 // add -c resize
  95.                 // add -k no playing frames
  96.                 // dont know what -nd doing
  97.         }
  98.     }
  99.  
  100.  
  101.     function newImg(src, event){
  102.         let img= document.createElement('IMG');
  103.         let offset= (location.host == "www.twitch.tv")? 28 : 32;
  104.  
  105.         img.onmouseleave= ()=>{ if(img) img.remove();};
  106.         img.onload= ()=>{
  107.             if(img){
  108.                 img.style.setProperty('left', (event.clientX+offset+img.width  > innerWidth ? event.clientX-offset-img.width : event.clientX+offset)+'px');
  109.                 img.style.setProperty( 'top', (event.clientY+offset+img.height > innerHeight? event.clientY-offset-img.height: event.clientY+offset)+'px');
  110.                 document.body.append(img);
  111.             }
  112.         };
  113.  
  114.         img.style.setProperty('z-index', '20250317');
  115.         img.style.setProperty('position', 'fixed');
  116.         img.src= src;
  117.         event.target.onmouseleave= ()=>{
  118.             img.remove();
  119.             if(!img.complate) img=undefined;
  120.         };
  121.     }
  122. }
  123.