API tools faq
paste
Advertisement
Guest User

MadTC

a guest
Mar 17th, 2018
96
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 32.66 KB | None | 0 0
raw download clone embed print report
  1. // ==UserScript==
  2. // @name         Mad Edit
  3. // @namespace
  4. // @version      1.0.c
  5. // @description  Fixes gift crash and speeds chat up
  6. // @author       Mad_Hatter
  7. // @match        https://tinychat.com/room/*
  8. // @exclude      https://tinychat.com/room/*?1
  9. // @grant        GM_setValue
  10. // @grant        GM_getValue
  11. // @grant        GM_listValues
  12.  
  13. // ==/MostlyWroteby==
  14. /* jshint -W097 */
  15.  
  16. var initInterval = setInterval(waitForInit, 500);
  17. function waitForInit(){
  18.     if (document.querySelector("tinychat-webrtc-app").shadowRoot) {
  19.         clearInterval(initInterval);
  20.         (function() {
  21.  
  22. // Actual userscript starts here //
  23.  
  24. browserFirefox = (navigator.userAgent.includes("Firefox/") ? true : false);
  25.  
  26. var bodyElem = document.querySelector("body");
  27.  
  28. var webappElem = document.querySelector("tinychat-webrtc-app").shadowRoot;
  29. var chatlogElem = webappElem.querySelector("tinychat-chatlog").shadowRoot;
  30. var titleElem = webappElem.querySelector("tinychat-title").shadowRoot;
  31. var sidemenuElem = webappElem.querySelector("tinychat-sidemenu").shadowRoot;
  32. var videomoderationElem = sidemenuElem.querySelector("tc-video-moderation").shadowRoot;
  33. var videolistElem = webappElem.querySelector("tinychat-videolist").shadowRoot;
  34.  
  35. var chatlistElem = sidemenuElem.querySelector("tinychat-chatlist").shadowRoot;
  36. var userlistElem = sidemenuElem.querySelector("tinychat-userlist").shadowRoot;
  37. var userContextmenuElem = userlistElem.querySelector("tinychat-user-contextmenu").shadowRoot;
  38.  
  39. var chatlogCSS = chatlogElem.querySelector("#chat-wrapper");
  40. var sidemenuCSS = sidemenuElem.querySelector("#sidemenu");
  41. var videomoderationCSS = videomoderationElem.querySelector("#moderatorlist");
  42. var webappCSS = webappElem.querySelector("#toast");
  43. var chatlistCSS = chatlistElem.querySelector("#header");
  44. var userlistCSS = userlistElem.querySelector("#header");
  45. var userContextmenuCSS = userContextmenuElem.querySelector("#main");
  46. var titleCSS = titleElem.querySelector("#room-header");
  47. var videolistCSS = videolistElem.querySelector("#videolist");
  48. var bodyCSS = document.querySelector("body");
  49.  
  50. var resourceDirectory = document.querySelector('link[rel="manifest"]').getAttribute("href").split("manifest")[0]; // \/([\d\.\-])+\/
  51.  
  52. var audioPop = new Audio(resourceDirectory + 'sound/pop.mp3');
  53. var settingMentions = [];
  54. var giftsElemWidth = 0;
  55.  
  56. var urlAddress = new URL(window.location.href);
  57. var urlPars = urlAddress.searchParams;
  58.  
  59. var roomName = document.querySelector("tinychat-webrtc-app").getAttribute("roomname");
  60. document.title = roomName + " - Tinychat";
  61.  
  62. var userinfoCont = sidemenuElem.querySelector("#user-info > div");
  63. if (userinfoCont.hasAttribute("title")) {
  64.     bodyCSS.classList.add("logged-in");
  65.     sidemenuElem.querySelector("#sidemenu").classList.add("logged-in");
  66. }
  67.  
  68.  
  69. var settingsQuick = {
  70.     "Autoscroll" : (GM_getValue("tes-Autoscroll") == "true" || GM_getValue("tes-Autoscroll") == undefined),
  71.     "MentionsMonitor" : (GM_getValue("tes-MentionsMonitor") == "true" || GM_getValue("tes-MentionsMonitor") == undefined),
  72.     "NotificationsOff" : (GM_getValue("tes-NotificationsOff") == "true"),
  73.     "ChangeFont" : (GM_getValue("tes-ChangeFont") == "true" || GM_getValue("tes-ChangeFont") == undefined)
  74. };
  75. if (settingsQuick["ChangeFont"]) bodyElem.classList.add("tes-changefont");
  76. if (browserFirefox) {
  77.     titleElem.querySelector("#room-header-info").insertAdjacentHTML("afterend", `
  78.     <div id="tes-firefoxwarning" class="style-scope tinychat-title"
  79.     style="font-size: .75em; background: white; color: grey; width: 200px; padding: 5px; line-height: 13px;vertical-align: middle;border: #ddd 1px solid;border-width: 0px 1px 0px 1px;">
  80.         <div class="style-scope tinychat-title" style="display: table;height: 100%;">
  81.             <span style="display: table-cell; vertical-align: middle;top: 16%;" class="style-scope tinychat-title">
  82.             Tinychat Enhancement Suite only supports Chrome. Support for Firefox is coming, but for now it only has autoscrolling.
  83.             </span>
  84.         </div>
  85.     </div>
  86.     `);
  87. }
  88.  
  89. function waitForSettings() {
  90.     if (browserFirefox) {
  91.         clearInterval(settingsWaitInterval);
  92.         return;
  93.     }
  94.     settingsVisible = false;
  95.     if (titleElem.querySelector("#room-header-gifts") != null) {
  96.         clearInterval(settingsWaitInterval);
  97.  
  98.         giftsElemWidth = titleElem.querySelector("#room-header-gifts").offsetWidth;
  99.         if (titleElem.querySelector("#room-header-gifts-items") == null) {
  100.             giftsElemWidth1000 = giftsElemWidth + 0;
  101.         }
  102.         else { giftsElemWidth1000 = giftsElemWidth; }
  103.         if (titleCSS.querySelector("#titleCSS")) {
  104.             titleCSS.querySelector("#titleCSS").innerHTML += `
  105.                 #tes-settings {
  106.                     right: ` + giftsElemWidth + `px;
  107.                 }
  108.             `;
  109.         }
  110.  
  111.         settingsElem = titleElem.querySelector("#room-header-gifts").insertAdjacentHTML("beforebegin", `
  112.         <div id="tes-settings">
  113.             <div id="tes-settingsBox" class="hidden">
  114.                 <p id="title"><a href="https://greasyfork.org/en/scripts/32964-tinychat-enhancement-suite" target="_blank">Tinychat Enhancement Suite</a></p>
  115.                 <div id="tes-settings-mentions" class="tes-setting-container">
  116.                     <input type="checkbox">
  117.                     <span class="label">
  118.                         Alert phrases
  119.                         <span class="info" data-title='A comma-separated list of phrases to alert/highlight for. Example of 3 phrases: "hello,Google Chrome,sky"'>?</span>
  120.                     </span>
  121.                     <div class="inputcontainer">
  122.                         <input class="text"><button class="save blue-button">save</button>
  123.                     </div>
  124.                 </div>
  125.                 <div id="tes-settings-autoscroll" class="tes-setting-container">
  126.                     <input type="checkbox">
  127.                     <span class="label">
  128.                         Autoscroll
  129.                     </span>
  130.                 </div>
  131.                 <div id="tes-settings-notifications" class="tes-setting-container">
  132.                     <input type="checkbox">
  133.                     <span class="label">
  134.                         Hide notifications
  135.                     </span>
  136.                 </div>
  137.                 <div id="tes-settings-changefont" class="tes-setting-container">
  138.                     <input type="checkbox">
  139.                     <span class="label">
  140.                         Improve font
  141.                         <span class="info" data-title='The default font is too thin in some browsers'>?</span>
  142.                     </span>
  143.                 </div>
  144.                 <!--
  145.                     <div id="tes-settings-messageanim" class="tes-setting-container">
  146.                         <input type="checkbox">
  147.                         <span class="label">
  148.                             Disable message animation
  149.                         </span>
  150.                     </div>
  151.                 -->
  152.             </div>
  153.             <div id="tes-settingsGear" title="Tinychat Enhancement Suite settings"><span>✱</span></div>
  154.         </div>
  155.         `);
  156.  
  157.         titleElem.getElementById("tes-settingsGear").addEventListener("click", toggleSettingsDisplay);
  158.         titleElem.querySelector("#tes-settings #tes-settings-mentions button.save").addEventListener("click", function(){mentionsManager("save");} );
  159.         !browserFirefox ? mentionsManager("load") : void(0);
  160.  
  161.         settingsCheckboxUpdate();
  162.         titleElem.querySelector("#tes-settings-autoscroll input").addEventListener("click", function(){settingsCheckboxUpdate("tes-settings-autoscroll");});
  163.         titleElem.querySelector("#tes-settings-mentions input:first-of-type").addEventListener("click", function(){settingsCheckboxUpdate("tes-settings-mentions");});
  164.         titleElem.querySelector("#tes-settings-notifications input:first-of-type").addEventListener("click", function(){settingsCheckboxUpdate("tes-settings-notifications");});
  165.         titleElem.querySelector("#tes-settings-changefont input").addEventListener("click", function(){settingsCheckboxUpdate("tes-settings-changefont");});
  166.  
  167.         notificationHider();
  168.     }
  169. }
  170.  
  171. function toggleSettingsDisplay() {
  172.     if (settingsVisible == true) {
  173.         titleElem.getElementById("tes-settingsBox").classList.add("hidden");
  174.         titleElem.getElementById("tes-settings").classList.remove("tes-open");
  175.         settingsVisible = false;
  176.     }
  177.  
  178.     else {
  179.         titleElem.getElementById("tes-settingsBox").classList.remove("hidden");
  180.         titleElem.getElementById("tes-settings").classList.add("tes-open");
  181.         settingsVisible = true;
  182.     }
  183.  
  184. }
  185.  
  186. function settingsCheckboxUpdate(settingName=null, value=null) {
  187.     if (settingName == null && value == null) {
  188.         titleElem.getElementById("tes-settings-autoscroll").querySelector("input").checked = settingsQuick["Autoscroll"];
  189.         titleElem.getElementById("tes-settings-mentions").querySelector("input").checked = settingsQuick["MentionsMonitor"];
  190.         titleElem.getElementById("tes-settings-notifications").querySelector("input").checked = settingsQuick["NotificationsOff"];
  191.         titleElem.getElementById("tes-settings-changefont").querySelector("input").checked = settingsQuick["ChangeFont"];
  192.  
  193.         return;
  194.     }
  195.     if (settingName == "tes-settings-autoscroll") {
  196.         if (value == null) {
  197.             var newValue = titleElem.getElementById("tes-settings-autoscroll").querySelector("input").checked;
  198.             settingsQuick["Autoscroll"] = newValue;
  199.             GM_setValue("tes-Autoscroll", newValue.toString());
  200.         }
  201.     }
  202.     if (settingName == "tes-settings-mentions") {
  203.         if (value == null) {
  204.             var newValue = titleElem.getElementById("tes-settings-mentions").querySelector("input:first-of-type").checked;
  205.             // if (newValue) {
  206.                 // titleElem.getElementById("tes-settings-mentions").getAttribute("class").includes("setting-disabled");
  207.             // }
  208.             settingsQuick["MentionsMonitor"] = newValue;
  209.             GM_setValue("tes-MentionsMonitor", newValue.toString());
  210.         }
  211.     }
  212.     if (settingName == "tes-settings-notifications") {
  213.         if (value == null) {
  214.             var newValue = titleElem.getElementById("tes-settings-notifications").querySelector("input").checked;
  215.             settingsQuick["NotificationsOff"] = newValue;
  216.             GM_setValue("tes-NotificationsOff", newValue.toString());
  217.             notificationHider();
  218.         }
  219.     }
  220.     if (settingName == "tes-settings-changefont") {
  221.         if (value == null) {
  222.             var newValue = titleElem.getElementById("tes-settings-changefont").querySelector("input").checked;
  223.             settingsQuick["ChangeFont"] = newValue;
  224.             GM_setValue("tes-ChangeFont", newValue.toString());
  225.             fontToggle(newValue);
  226.         }
  227.     }
  228. }
  229.  
  230.  
  231. var settingsWaitInterval = setInterval(waitForSettings,1000);
  232.  
  233. function fontToggle(arg) {
  234.     arg ? bodyElem.classList.add("tes-changefont") : bodyElem.classList.remove("tes-changefont");
  235. }
  236. function notificationHider() {
  237.     chatlogContainer = chatlogElem.querySelector("#chat-content");
  238.     settingsQuick["NotificationsOff"] ? chatlogContainer.classList.add("tes-notif-off") : chatlogContainer.classList.remove("tes-notif-off");
  239. }
  240.  
  241. function mentionsManager(mode) {
  242.     var inputElem = titleElem.querySelector("#tes-settings #tes-settings-mentions input.text");
  243.     // phrases = inputElem.value.split(",");
  244.     var phrase = inputElem.value;
  245.     if (phrase.endsWith(",")) { phrase = phrase.slice(0, -1); }
  246.     if (phrase.startsWith(",")) { phrase = phrase.slice(1); }
  247.  
  248.     if (mode == "save") {
  249.         GM_setValue("tes-Mentions", phrase);
  250.         settingMentions = phrase.split(",");
  251.         inputElem.value = phrase;
  252.     }
  253.     if (mode == "load") {
  254.         var loadedMentions = GM_getValue("tes-Mentions");
  255.         if (loadedMentions != undefined) {
  256.             inputElem.value = loadedMentions;
  257.             settingMentions = loadedMentions.split(",");
  258.         }
  259.     }
  260.                          return;
  261.  
  262.     var phrase = phrase.toString();
  263.     if (mode == "save") {
  264.         settingMentions.push(phrases);
  265.         GM_setValue("tes-Mentions", JSON.stringify(setting_Mentions));
  266.         console.log("Mention add:" + phrases);
  267.     }
  268.     if (mode == "load") {
  269.         var mentions = JSON.parse(GM_getValue("tes-Mentions"));
  270.         console.log("Mention load:" + mentions);
  271.         settingMentions = mentions;
  272.         inputElem.value = settingMentions.join();
  273.     }
  274. }
  275.  
  276. !browserFirefox ? injectCSS() : void(0);
  277. function injectCSS(cssName=null) {
  278.     // Indenting is purposely wrong, for readability
  279.     var insertPosition = "beforeend";
  280.     if (browserFirefox) {
  281.         headElem = document.querySelector("head");
  282.         titleCSS = videolistCSS = chatlistCSS = userlistCSS = userContextmenuCSS = bodyCSS = chatlogCSS = sidemenuCSS = videomoderationCSS = webappCSS = headElem;
  283.         headElem.querySelector('[scope="tinychat-title"]').innerHTML += `         #room-header {     min-height: 10%;     max-height: 10%; }      `;
  284.     }
  285.  
  286.     if (cssName == "titleCSS" || cssName == null) {
  287.     titleCSShtml = `
  288.     <style id="titleCSS" scope="tinychat-title">
  289.         @keyframes ease-to-left {
  290.             0% {right: -50px; opacity: 0;}
  291.             100% {right: 0; opacity: 1;}
  292.         }
  293.         @keyframes ease-to-right {
  294.             0% {right:auto;}
  295.             100% {right:0;}
  296.         }
  297.         @keyframes ease-to-bottom-21px {
  298.             0% {top:-300px; opacity: 0;}
  299.             100% {top:0; opacity: 1;}
  300.         }
  301.         #tes-header-grabber {
  302.             position: absolute;
  303.             top: 88px;
  304.             right: 50%;
  305.             background: white;
  306.             width: 60px;
  307.             height: 20px;
  308.             border: #ddd 1px solid;
  309.             border-radius: 19px;
  310.             text-align: center;
  311.             color: #b4c1c5;
  312.             cursor: pointer;
  313.             transition: all .4s ease-in-out;
  314.         }
  315.         .tes-headerCollapsed #tes-header-grabber {
  316.             top: 9px;
  317.             background: #f6f6f6;
  318.             border-top: 0;
  319.             z-index: 9;
  320.             border-radius: 11px;
  321.             line-height: 11px;
  322.             border-top-left-radius: 0;
  323.             border-top-right-radius: 0;
  324.             height: 12px;
  325.         }
  326.         .tes-headerCollapsed:hover #tes-header-grabber {
  327.             height: 29px;
  328.             line-height: 43px;
  329.         }
  330.         input {
  331.             border: 1px solid #c4d4dc;
  332.             line-height: 16px;
  333.             padding-left: 3px;
  334.         }
  335.         .label ~ input {
  336.             border-bottom-left-radius: 6px;
  337.             border-top-left-radius: 6px;
  338.         }
  339.         input ~ button {
  340.             border-bottom-right-radius: 6px;
  341.             border-top-right-radius: 6px;
  342.         }
  343.         input[type="button"], button {
  344.             display: inline;
  345.             padding: 0 15px;
  346.             border: 0;
  347.             box-sizing: border-box;
  348.             letter-spacing: 1px;
  349.             font-size: 12px;
  350.             font-weight: bold;
  351.             line-height: 20px;
  352.             text-align: center;
  353.             transition: .2s;
  354.             outline: none;
  355.         }
  356.         .blue-button {
  357.             color: #000000;
  358.             background-color: #721010;
  359.         }
  360.         .blue-button:hover {
  361.             background-color: #721010;
  362.         }
  363.         .blue-button:active {
  364.             background-color: #721010;
  365.         }
  366.         .tes-setting-container {
  367.             line-height: initial;
  368.         }
  369.         #tes-settings > div {
  370.             /*animation: ease-to-bottom-21px .2s ease 0s 1;*/
  371.             position: relative;
  372.             top: 0;
  373.             height: 100px;
  374.         }
  375.         @media screen and (max-width: 1000px) {
  376.             #tes-settings > div {
  377.                 height: 92px;
  378.             }
  379.         }
  380.         #tes-settings .hidden { display: none; }
  381.         #tes-settings #title { font-weight: bold; }
  382.         #tes-settings {
  383.             transition: all .4s ease-in-out;
  384.             animation: ease-to-bottom-21px .2s ease 0s 1;
  385.             /*max-height: 10%;*/
  386.             font-size: 11px;
  387.             flex: none;
  388.             overflow: hidden;
  389.             z-index: 9;
  390.             position: absolute;
  391.             top: -2px;
  392.             right: ` + (giftsElemWidth + 10).toString() + `px;
  393.         }
  394.         @media screen and (max-width: 1000px) {
  395.             #tes-settings {
  396.                 right: 37px!important;
  397.                 top: -20px;
  398.             }
  399.             #tes-settings.tes-open {
  400.                 top: 6px;
  401.             }
  402.             #tes-settingsGear {
  403.                 font-size: 30px!important;
  404.             }
  405.             #room-header-gifts-buttons > #give-gift {
  406.                 width: 5px;
  407.             }
  408.         }
  409.         @media screen and (max-width: 600px) {
  410.             #tes-settings {
  411.                 right: -4px!important;
  412.                 top: 19px;
  413.             }
  414.         }
  415.         #tes-settings:hover {
  416.             overflow: visible;
  417.         }
  418.         #tes-settings-mentions .inputcontainer {
  419.             float: right;
  420.             position: relative;
  421.             top: -3px;
  422.         }
  423.         #tes-settingsGear {
  424.             font-size: 70px;
  425.             color: #721010;
  426.             color: #721010;
  427.             float: right;
  428.         }
  429.         #tes-settingsGear:hover {
  430.             cursor: pointer;
  431.             color: #721010;
  432.         }
  433.         .tes-open #tes-settingsGear {
  434.             background: red;
  435.             border-bottom-right-radius: 15px;
  436.             border-top-right-radius: 15px;
  437.             border: #721010 1px solid;
  438.             border-left: 0;
  439.             /*transition: all .2s linear;*/
  440.             }
  441.  
  442.         #tes-settingsGear span {
  443.             display: block;
  444.             transition: transform 0.4s ease-in-out;
  445.         }
  446.         .tes-open #tes-settingsGear span {
  447.             transform: rotate(-90deg);
  448.         }
  449.         #tes-settingsBox {
  450.             background: white;
  451.             padding: 0px 10px 0px 10px;
  452.             float: left;
  453.             border: #53b6ef 1px solid;
  454.             border-top-left-radius: 12px;
  455.             border-bottom-left-radius: 12px;
  456.             animation: ease-to-left .2s ease 0s 1;
  457.             right: 0;
  458.         }
  459.         #tes-settingsBox.hidden {
  460.             animation: ease-to-right .2s ease 0s 1;
  461.             display: visible;
  462.             /*position: relative; right: -1000px;*/
  463.         }
  464.  
  465.         /*** Inline with header ***/
  466.         #tes-settingsBox {
  467.             border-bottom-width: 0;
  468.             border-top-left-radius: 0px;
  469.             border-bottom-left-radius: 0px;
  470.         }
  471.         #tes-settingsGear {
  472.             display: table;
  473.         }
  474.         #tes-settingsGear span {
  475.             display: table-cell;
  476.             vertical-align: middle;
  477.         }
  478.         /*** *************   ***/
  479.  
  480.         #tes-settings .tes-setting-container input[type=checkbox] {
  481.             margin: 0;
  482.             margin-right: 1px;
  483.             float: left;
  484.             position: absolute;
  485.             left: 8px;
  486.         }
  487.         #tes-settings .label{
  488.             margin-right: 4px;
  489.             margin-left: 16px;
  490.         }
  491.         #tes-settings .info{
  492.             margin-left: 3px;
  493.             color: #0d94e3;
  494.             font-weight: bold;
  495.             font-family: Arial;
  496.             border: #0d94e3 1px solid;
  497.             border-radius: 16px;
  498.             height: 1em;
  499.             width: 1em;
  500.             text-align: center;
  501.             display: inline-block;
  502.         }
  503.         #tes-settings .info:hover:after{
  504.             font-weight: normal;
  505.             padding: 4px 7px 4px 7px;
  506.             border-radius: 7px;
  507.             color: white;
  508.             background: #61787f;
  509.             content: attr(data-title);
  510.             display: inline-block;
  511.             position: absolute;
  512.             top: 52px;
  513.             left: 0;
  514.             z-index: 9;
  515.         }
  516.         /*#tes-settings .label:hover:before{
  517.             border: solid;
  518.             border-color: #61787f transparent;
  519.             border-width: 0px 6px 6px 6px;
  520.             top: 10px;
  521.             content: "";
  522.             left: 8%;
  523.             position: relative;
  524.             display: inline-block;
  525.         }*/
  526.  
  527.         #tes-settings a:visited, #tes-settings a:link {
  528.             text-decoration: none;
  529.             color: inherit;
  530.         }
  531.         #tes-settings a:hover {
  532.             color: #53b6ef;
  533.         }
  534.  
  535.         #room-header {
  536.             height: 100px;
  537.             max-height: unset;
  538.             min-height: unset;
  539.             transition: all .4s ease-in-out;
  540.         }
  541.         #room-header.tes-headerCollapsed {
  542.             height: 10px;
  543.         }
  544.         #room-header.tes-headerCollapsed:hover {
  545.             height: 27px;
  546.         }
  547.         @media screen and (max-width: 600px) {
  548.             #room-header {
  549.                 min-height: inherit;
  550.                 max-height: inherit;
  551.             }
  552.         }
  553.         #room-header-info {
  554.             padding: 0;
  555.         }
  556.         #room-header-info-text {
  557.             height: auto;
  558.         }
  559.         @media screen and (max-width: 600px) {
  560.             #room-header-info-text {
  561.                 height: inherit;
  562.             }
  563.         }
  564.         #room-header-avatar {
  565.             margin: 2px 5px 0 15px;
  566.             height: 25px;
  567.             min-width: 25px;
  568.             max-width: 25px;
  569.             transition: all .5s linear;
  570.         }
  571.         #room-header-avatar:hover {
  572.             border-radius: unset;
  573.         }
  574.         .tes-headerCollapsed:hover #room-header-avatar:hover {
  575.             z-index: 9;
  576.         }
  577.         #room-header-gifts {
  578.             padding: 5px 5px;
  579.         }
  580.  
  581.         .tes-headerCollapsed #tes-settingsGear {
  582.             font-size: 33px;
  583.         }
  584.         .tes-headerCollapsed #tes-settings > div {
  585.             height: fit-content;
  586.         }
  587.         .tes-headerCollapsed #tes-settingsBox {
  588.             border-width: 1px;
  589.             border-radius: 7px;
  590.             border-top-right-radius: 0;
  591.             padding-bottom: 7px;
  592.         }
  593.         .tes-headerCollapsed #tes-settings {
  594.             top: 13px;
  595.             right: 0;
  596.         }
  597.     </style>
  598.     `;
  599.     titleCSS.insertAdjacentHTML(insertPosition, titleCSShtml);
  600.     }
  601.  
  602.     if (cssName == "videolistCSS" || cssName == null) {
  603.     videolistCSShtml = `
  604.     <style id="videolistCSS" scope="tinychat-videolist">
  605.         #videos-header {
  606.             height: 10px;
  607.             min-height: 10px;
  608.         }
  609.         #Fvideolist * {
  610.             width: 75%!important;
  611.             display: contents;
  612.             float: right;
  613.             flex-direction: column;
  614.         }
  615.         #Fvideos {
  616.             flex-direction: unset;
  617.             flex-wrap: unset;
  618.         }
  619.         #videos-header > span {
  620.             line-height: initial;
  621.             position: relative;
  622.             top: 1px;
  623.             background: none;
  624.         }
  625.         #videos-header > span > svg {
  626.             height: 12px;
  627.             padding: 0;
  628.         }
  629.     </style>
  630.     `;
  631.     videolistCSS.insertAdjacentHTML(insertPosition, videolistCSShtml);
  632.     }
  633.  
  634.     if (cssName == "chatlistCSS" || cssName == null) {
  635.     chatlistCSShtml = `
  636.     <style id="chatlistCSS" scope="tinychat-chatlist">
  637.         #chatlist > div > span {
  638.             padding-left: 1px;
  639.         }
  640.         #chatlist > #header {
  641.             top: 0px;
  642.             height: auto;
  643.         }
  644.  
  645.         /*** --- this block is in chatlistCSS & userlistCSS --- ***/
  646.             .list-item > span > img {
  647.                 right: 0px;
  648.                 left: auto;
  649.             }
  650.             .list-item > span[data-status]:before {
  651.                 left: auto;
  652.                 right: 0;
  653.             }
  654.             .list-item > span > span {
  655.                 background: none!important;
  656.                 box-shadow: none!important;
  657.             }
  658.         /*** ---                                        --- ***/
  659.  
  660.         .close-instant > path {
  661.             fill: white;
  662.         }
  663.         .list-item > span > span { /* gift and close buttons */
  664.             right: 0px;
  665.         }
  666.         .list-item > span:hover > span { /* gift and close buttons */
  667.             right: 16px;
  668.             background: #2d373a!important;
  669.         }
  670.  
  671.     </style>
  672.     `;
  673.     chatlistCSS.insertAdjacentHTML(insertPosition, chatlistCSShtml);
  674.     }
  675.  
  676.     if (cssName == "userlistCSS" || cssName == null) {
  677.     userlistCSShtml = `
  678.     <style id="userlistCSS" scope="tinychat-userlist">
  679.         #userlist > div > span {
  680.             padding-left: 1px;
  681.         }
  682.         .list-item > span > span {
  683.             right: auto;
  684.             padding: 0 5px;
  685.         }
  686.         .list-item > span > .nickname {
  687.             padding-right: 3px;
  688.         }
  689.  
  690.         /*** --- this block is in chatlistCSS & userlistCSS --- ***/
  691.             .list-item > span > img {
  692.                 right: 13px;
  693.                 left: auto;
  694.             }
  695.             .list-item > span[data-status]:before {
  696.                 left: auto;
  697.                 right: 0;
  698.             }
  699.             .list-item > span > span {
  700.                 background: none;
  701.                 box-shadow: none;
  702.             }
  703.         /*** ---                                        --- ***/
  704.  
  705.         .list-item > span > span[data-moderator="1"]:before {
  706.             filter: hue-rotate(226deg) saturate(4000%);
  707.         }
  708.         #userlist > #header {
  709.             top: auto;
  710.             height: auto;
  711.         }
  712.         #button-banlist {
  713.             padding: 0 6px;
  714.         }
  715.     </style>
  716.     `;
  717.     userlistCSS.insertAdjacentHTML(insertPosition, userlistCSShtml);
  718.     }
  719.  
  720.     if (cssName == "userContextmenuCSS" || cssName == null) {
  721.     userContextmenuCSShtml = `
  722.     <style id="userContextmenuCSS" scope="tinychat-user-contextmenu">
  723.         #main {
  724.             border: 1px solid rgba(142, 15, 15, .1);
  725.         }
  726.     </style>
  727.     `;
  728.     userContextmenuCSS.insertAdjacentHTML(insertPosition, userContextmenuCSShtml);
  729.     }
  730.  
  731.     if (cssName == "bodyCSS" || cssName == null) {
  732.     bodyCSShtml = `
  733.     <style id="bodyCSS">
  734.         #nav-static-wrapper {
  735.             width: 2px;
  736.             opacity: .7;
  737.         }
  738.         @media screen and (max-width: 1000px) {
  739.             #nav-static-wrapper {
  740.                 width: 82px;
  741.                 opacity: 1;
  742.             }
  743.         }
  744.        #content {
  745.            padding: 0;
  746.        }
  747.         body.tes-changefont {
  748.           font-family: sans-serif;
  749.         }
  750.         #header-user {
  751.             left: 62px;
  752.         }
  753.         @media screen and (max-width: 1000px) {
  754.             #header-user {
  755.                 left: 21px;
  756.             }
  757.         }
  758.         @media screen and (max-width: 600px) {
  759.             #header-user {
  760.                 left: auto;
  761.                 right: 54px;
  762.             }
  763.         }
  764.         @media screen and (min-width: 1000px) {
  765.             #menu-icon:hover { opacity: 1; }
  766.             #menu-icon {
  767.                 top: 4px;
  768.                 left: 19px;
  769.                 height: 12px;
  770.                 width: 109px;
  771.                 font-size: 10px;
  772.                 background: #04caff;
  773.                 border-radius: 6px;
  774.                 opacity: .8;
  775.             }
  776.             #menu-icon:after {
  777.                 position: absolute;
  778.                 top: 3px;
  779.                 left: 51px;
  780.                 content: "";
  781.                 height: 7px;
  782.                 width: 7px;
  783.                 border-width: 2px 2px 0px 0px;
  784.                 border-style: solid;
  785.                 border-color: #fff;
  786.                 box-sizing: border-box;
  787.                 transform: rotate(45deg);
  788.                 transition: .2s;
  789.             }
  790.             #menu-icon:hover:after {
  791.                 border-width: 0px 0px 2px 2px;
  792.             }
  793.             #menu-icon > svg {
  794.                 opacity: 0;
  795.             }
  796.         }
  797.     </style>
  798.     `;
  799.     bodyCSS.insertAdjacentHTML(insertPosition, bodyCSShtml);
  800.     }
  801.  
  802.     messageCSS = `
  803.         .tes-mention-message { color: red; }
  804.     `;
  805.  
  806.     if (cssName == "chatlogCSS" || cssName == null) {
  807.     chatlogCSShtml = `
  808.     <style id="chatlogCSS" scope="tinychat-chatlog">
  809.  
  810.         #chat-content > .message {
  811.             padding-bottom: 0;
  812.             padding-top: 0!important;
  813.             margin-bottom: 0;
  814.             min-height: 0px!important;
  815.         }
  816.         /*
  817.         #chat-content > .message:hover {
  818.             background: rgba(114,16,16);
  819.         }
  820.         */
  821.         #chat-content > .message.common {
  822.             margin-bottom: 5px;
  823.         }
  824.         #chat-content > .message.system {
  825.             padding: 0;
  826.         }
  827.         #chat-content.tes-notif-off > .message.system {
  828.             display: none;
  829.         }
  830.         #chat-content.tes-notif-off > .message.system.dontHide {
  831.             display: initial;
  832.         }
  833.         #chat-instant > a:first-child,
  834.         #chat-content > .message > a:first-child {
  835.             top: auto;
  836.          }
  837.         #chat-position #input:before {
  838.             background: none;
  839.         }
  840.         #chat-instant > a > .avatar,
  841.         #chat-content > .message > a > .avatar {
  842.             border-radius: margin: 1px 1px 0 1px;
  843.             height: 1px;
  844.             min-width: 1px;
  845.             max-width: 1px;
  846.             transition: all .5s linear;;
  847.         }
  848.         #timestamp {
  849.             font-size: 11px;
  850.             color: silver;
  851.             /* float: right; */
  852.             position: absolute;
  853.             right: 0;
  854.             padding-top: 3px;
  855.         }
  856.         #chat-content > .message > .nickname {
  857.             overflow: initial;
  858.             line-height: initial;
  859.         }
  860.         #chat-content div.message.common:last-of-type {
  861.             margin-bottom: 10px;
  862.         }
  863.     </style>
  864.     `;
  865.     chatlogCSS.insertAdjacentHTML(insertPosition, chatlogCSShtml);
  866.     }
  867.  
  868.     if (cssName == "sidemenuCSS" || cssName == null) {
  869.     sidemenuCSShtml = `
  870.     <style id="sidemenuCSS" scope="tinychat-sidemenu">
  871.         #sidemenu {
  872.             min-width: 162px;
  873.             max-width: 10%;
  874.             left: auto;
  875.         }
  876.         @media screen and (max-width: 1000px) {
  877.             #sidemenu {
  878.                 left: -188px;
  879.             }
  880.         }
  881.         #sidemenu-content {
  882.             padding-left: 2px;
  883.         }
  884.         #live-directory-wrapper {
  885.             padding: 0;
  886.         }
  887.         #top-buttons-wrapper {
  888.             padding: 0;
  889.         }
  890.         .logged-in #user-info {
  891.             padding: 0;
  892.             height: auto;
  893.             text-align: center;
  894.         }
  895.         #user-info button { opacity: .8; }
  896.         #user-info:hover button { opacity: 1; }
  897.         .logged-in #user-info > a { display: none; }
  898.         @media screen and (min-width: 1000px) {
  899.             #live-directory, #upgrade {
  900.                 height: 1px;
  901.                 line-height: 1px;
  902.                 font-size: 1px;
  903.                 opacity: .1;
  904.             }
  905.             #live-directory:before {
  906.                 height: 1px;
  907.                 width: 1px;
  908.                 top: 0px;
  909.             }
  910.             #upgrade {
  911.                 margin-top: 1px;
  912.             }
  913.             #live-directory:hover, #upgrade:hover {
  914.                 opacity: 1;
  915.             }
  916.         }
  917.     </style>
  918.     `;
  919.     sidemenuCSS.insertAdjacentHTML(insertPosition, sidemenuCSShtml);
  920.     }
  921.  
  922.     if (cssName == "videomoderationCSS" || cssName == null) {
  923.     videomoderationCSShtml = `
  924.     <style id="videomoderationCSS" scope="tc-video-moderation">
  925.         #moderatorlist {
  926.             padding-left: 0;
  927.         }
  928.         #moderatorlist:hover {
  929.             position: absolute;
  930.             background: white;
  931.             z-index: 1000;
  932.             width: 300px;
  933.             min-height: 155px;
  934.             flex-direction: column;
  935.             position: absolute;
  936.             background: rgba(45, 55, 58, 0.8);
  937.             z-index: 1000;
  938.             width: 350px;
  939.             max-height: fit-content!important;
  940.             left: 15px;
  941.             border-radius: 13px;
  942.             border: #8e0f0f 1px solid;
  943.         }
  944.         #moderatorlist:after {
  945.             top: 47px;
  946.         }
  947.     </style>
  948.     `;
  949.     videomoderationCSS.insertAdjacentHTML(insertPosition, videomoderationCSShtml);
  950.     }
  951.  
  952.     if (cssName == "webappCSS" || cssName == null) {
  953.     webappCSShtml = `
  954.     <style id="webappCSS" scope="tinychat-webrtc-app">
  955.         #room {
  956.             padding: 0;
  957.             padding-left: 142px;
  958.         }
  959.         @media screen and (max-width: 1000px) {
  960.             :host > #room {
  961.                 padding-left: 82px;
  962.             }
  963.         }
  964.         @media screen and (max-width: 600px) {
  965.             :host > #room {
  966.                 padding-left: 0;
  967.             }
  968.         }
  969.     </style>
  970.     `;
  971.     webappCSS.insertAdjacentHTML(insertPosition, webappCSShtml);
  972.     }
  973. }
  974.  
  975. function injectElements() {
  976.     headerGrabberParElem = titleElem.querySelector("#room-header");
  977.     headerGrabberParElem.insertAdjacentHTML("beforeend", `<div id="tes-header-grabber">▲</div>`);
  978.     headerGrabberElem = headerGrabberParElem.querySelector("#tes-header-grabber");
  979.     headerGrabberElem.addEventListener("click", headerGrabber);
  980. }
  981.  
  982. function headerGrabber() {
  983.     headerGrabberParElem.classList.toggle("tes-headerCollapsed");
  984.     headerGrabberParElem.classList.contains("tes-headerCollapsed") ? headerGrabberElem.innerHTML = "▼" : headerGrabberElem.innerHTML = "▲";
  985. }
  986.  
  987. !browserFirefox ? injectElements() : void(0);
  988.  
  989. var scrollbox = chatlogElem.querySelector("#chat");
  990. var unreadbubble = chatlogElem.querySelector("#input-unread");
  991. var autoScrollStatus = true;
  992.  
  993. function updateScroll() {
  994.     scrollbox.scrollTop = scrollbox.scrollHeight;
  995.     scrollbox.scrollTop = scrollbox.scrollTop + 5;
  996. }
  997.  
  998. function userHasScrolled(e) {
  999.     var scrollwheelAmount = e.deltaY;
  1000.  
  1001.     if (scrollwheelAmount < 0) {
  1002.         autoScrollStatus = false;
  1003.     }
  1004.     if (autoScrollStatus === false && scrollbox.scrollHeight - scrollbox.scrollTop == scrollbox.offsetHeight) {
  1005.         autoScrollStatus = true;
  1006.     }
  1007. }
  1008.  
  1009. function newMessageAdded() {
  1010.     if (autoScrollStatus === true && settingsQuick["Autoscroll"]) { updateScroll(); }
  1011.     timestampAdd();
  1012.     messageParser();
  1013. }
  1014.  
  1015. function userContextmenuUpdated() {
  1016.     var elemBottom = 0;
  1017.     var topPos = userContextmenuCSS.getBoundingClientRect().top;
  1018.     var elemBottom = topPos + userContextmenuCSS.offsetHeight;
  1019.     if (elemBottom > (window.innerHeight - 82)) {
  1020.         // userContextmenuCSS.style.top = (userContextmenuCSS.style.top - userlistElem.querySelector("#userlist").scrollTop - 200) + "px";
  1021.         // userContextmenuCSS.style.top = (userlistElem.querySelector("#userlist").scrollTop - window.innerHeight) + "px";
  1022.         userContextmenuCSS.style.top = (window.innerHeight - 82 - userContextmenuCSS.offsetHeight - 15) + "px";
  1023.         // console.log("Change: " + userContextmenuCSS.style.top);
  1024.     }
  1025.  
  1026.     // console.log("elemBottom: " + elemBottom + ". Max: " + (window.innerHeight - 82) + ". offsetHeight: " + userContextmenuCSS.offsetHeight + ". New top: " + (window.innerHeight - 82 - userContextmenuCSS.offsetHeight));
  1027. }
  1028.  
  1029. messageCount = 0;
  1030. function messageParser() {
  1031.  
  1032.     latestMessageElem = chatlogElem.querySelector("#chat-content div.message:last-of-type");
  1033.  
  1034.     var typeSystem = false;
  1035.  
  1036.     if (latestMessageElem != null) {
  1037.         if (latestMessageElem.classList.contains("system")) typeSystem =  true;
  1038.         latestMessageElem.setAttribute("id", "msg-"+messageCount);
  1039.         messageCount++;
  1040.  
  1041.         tcMessageHtmlElem = latestMessageElem.querySelector("tc-message-html").shadowRoot;
  1042.         latestMessageContentElem = tcMessageHtmlElem.querySelector("#html");
  1043.  
  1044.         if (!browserFirefox) {
  1045.             var node = document.createElement("style");
  1046.             var textnode = document.createTextNode(messageCSS);
  1047.             node.appendChild(textnode);
  1048.             tcMessageHtmlElem.appendChild(node);
  1049.         }
  1050.  
  1051.  
  1052.         latestMessageContent = latestMessageContentElem.innerHTML;
  1053.  
  1054.         latestMessageContent.includes(" banned ") || latestMessageContent.includes(" kicked ") ? latestMessageElem.classList.add("dontHide") : void(0);
  1055.  
  1056.         if (!browserFirefox && settingsQuick["MentionsMonitor"]) {
  1057.             for (i=0; i < settingMentions.length; i++) {
  1058.                 if (latestMessageContent.toLowerCase().includes(settingMentions[i].toLowerCase())) {
  1059.                     latestMessageContentElem.classList.add("tes-mention-message");
  1060.                     audioPop.play();
  1061.                     break;
  1062.                 }
  1063.             }
  1064.         }
  1065.     }
  1066. }
  1067.  
  1068.  
  1069.  
  1070. var x = new MutationObserver(function (e) {
  1071.  if (e[0].addedNodes) newMessageAdded();
  1072. });
  1073. x.observe(chatlogElem.querySelector("#chat-content"), { childList: true });
  1074.  
  1075.  
  1076. var x = new MutationObserver(function (e) {
  1077.  if (e[0].addedNodes) newCamAdded();
  1078. });
  1079. x.observe(videolistElem.querySelector(".videos-items:last-child"), { childList: true });
  1080.  
  1081. var x = new MutationObserver(function (e) {
  1082.  if (e[0].addedNodes) userContextmenuUpdated();
  1083. });
  1084. x.observe(userContextmenuCSS, { attributes: true });
  1085.  
  1086.  
  1087. // var x = new MutationObserver(function (e) {
  1088.  // if (e[0].addedNodes) newUserAdded();
  1089. // });
  1090. // x.observe(userlistElem.querySelector("#userlist"), { childList: true });
  1091.  
  1092.  
  1093. // function newUserAdded() {
  1094.     // var latestUser = userlistElem.querySelector("#userlist .list-item:last-of-type");
  1095.     // latestUser.querySelector(".nickname").innerHTML
  1096.  
  1097. var scrollboxEvent = scrollbox.addEventListener("wheel", userHasScrolled);
  1098. var unreadbubble = unreadbubble.addEventListener("click", function(){autoScrollStatus = true;} );
  1099.  
  1100. function timestampAdd() {
  1101.     var queryString = "#chat-content div.message.common:last-of-type .nickname";
  1102.  
  1103.     var SHOW_SECONDS = true;
  1104.  
  1105.     var date = new Date();
  1106.     var hours = date.getHours();
  1107.     var minutes = date.getMinutes().toString();
  1108.     var secs = date.getSeconds().toString();
  1109.  
  1110.     if (hours > 11) {
  1111.         hours = (hours % 12 || 12);
  1112.         var period = "pm";
  1113.     }
  1114.     else { var period = "am"; }
  1115.  
  1116.     if (hours == "0") { hours = "12"; }
  1117.     if (minutes == "0") { minutes = "00"; }
  1118.     if (minutes.length == 1) { minutes = "0" + minutes; }
  1119.     if (secs.length == 1) { secs = "0" + secs; }
  1120.  
  1121.     if (SHOW_SECONDS == true) {
  1122.         var timestamp = hours + ":" + minutes + ":" + secs + "" + period;
  1123.     }
  1124.     else {
  1125.         var timestamp = hours + ":" + minutes + period;
  1126.     }
  1127.  
  1128.     if (chatlogElem.querySelector(queryString) != null) {
  1129.         var recentMsgNickname = chatlogElem.querySelector(queryString);
  1130.         recentMsgNickname.insertAdjacentHTML("afterend", "<span id='timestamp'> " + timestamp + "</span>");
  1131.     }
  1132. }
  1133.  
  1134. function newCamAdded() {
  1135.     // return;
  1136.     var queryString = ".videos-items:last-child > .js-video";
  1137.     if (videolistElem.querySelector(queryString) != null) {
  1138.         var camElems = videolistElem.querySelectorAll(queryString);
  1139.         // console.log("found");
  1140.     }
  1141.     else {
  1142.         return;
  1143.     }
  1144.     for (i=0; i < camElems.length; i++) {
  1145.         if ( camElems[i].hasAttribute("id") == true ) { continue; }
  1146.  
  1147.         var camItem = camElems[i].querySelector("tc-video-item").shadowRoot;
  1148.         var camName = camItem.querySelector(".nickname").getAttribute("title");
  1149.         camElems[i].setAttribute("id", "camUser-"+camName);
  1150.         console.log("Cam: " + camName);
  1151.  
  1152.         if (settingsQuick["HideAllCams"] == "true" || urlPars.get("hideallcams") == "") {
  1153.             camItem.querySelector("button.icon-visibility").click();
  1154.             console.log("Cam hide: " + camName);
  1155.         }
  1156.     }
  1157. }
  1158.  
  1159. // Userscript ends here //
  1160.         })();
  1161.     }
  1162.     else { console.log("Waiting for init..."); }
  1163. }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!