API tools faq
paste
Advertisement
Guest User

1

a guest
Jul 21st, 2018
74
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 57.72 KB | None | 0 0
raw download clone embed print report
  1. // ==UserScript==
  2. // @name TinyLlama : Room [Altered TES]
  3. // @namespace https://greasyfork.org/users/186041
  4. // @version 2018.32
  5. // @description Editing Overall Theme of TES/Tinychat. Install and refresh. All original code belongs to MutationObserver. https://greasyfork.org/en/scripts/32964-tinychat-enhancement-suite-tes
  6. // @author SmokeyLlama
  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. // ==/UserScript==
  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.  
  36. var chatlistElem = sidemenuElem.querySelector("tinychat-chatlist").shadowRoot;
  37. var userlistElem = sidemenuElem.querySelector("tinychat-userlist").shadowRoot;
  38. var userContextmenuElem = userlistElem.querySelector("tinychat-user-contextmenu").shadowRoot;
  39.  
  40.  
  41. var chatlogCSS = chatlogElem.querySelector("#chat-wrapper");
  42. var sidemenuCSS = sidemenuElem.querySelector("#sidemenu");
  43. var videomoderationCSS = videomoderationElem.querySelector("#moderatorlist");
  44. var webappCSS = webappElem.querySelector("#toast");
  45. var chatlistCSS = chatlistElem.querySelector("#header");
  46. var userlistCSS = userlistElem.querySelector("#header");
  47. var userContextmenuCSS = userContextmenuElem.querySelector("#main");
  48. var titleCSS = titleElem.querySelector("#room-header");
  49. var videolistCSS = videolistElem.querySelector("#videolist");
  50. var bodyCSS = document.querySelector("body");
  51.  
  52. var resourceDirectory = document.querySelector('link[rel="manifest"]').getAttribute("href").split("manifest")[0]; // \/([\d\.\-])+\/
  53.  
  54. var audioPop = new Audio(resourceDirectory + 'sound/pop.mp3');
  55. var settingMentions = [];
  56. var giftsElemWidth = 127;
  57. var freshInstall = (GM_listValues().length == 0);
  58. var isModerator = (!userlistElem.querySelector("#button-banlist").classList.contains("hidden"));
  59. var isPaidAccount = (sidemenuElem.querySelector("#sidemenu-wider"));
  60.  
  61. var urlAddress = new URL(window.location.href);
  62. var urlPars = urlAddress.searchParams;
  63.  
  64. var roomName = document.querySelector("tinychat-webrtc-app").getAttribute("roomname");
  65. document.title = roomName + " - Tinychat";
  66.  
  67. var userinfoCont = sidemenuElem.querySelector("#user-info > div");
  68. if (userinfoCont.hasAttribute("title")) {
  69. bodyCSS.classList.add("logged-in");
  70. sidemenuElem.querySelector("#sidemenu").classList.add("logged-in");
  71. }
  72.  
  73.  
  74. var settingsQuick = {
  75. "Autoscroll" : (GM_getValue("tes-Autoscroll") == "true" || GM_getValue("tes-Autoscroll") == undefined),
  76. "MentionsMonitor" : (GM_getValue("tes-MentionsMonitor") == "true" || GM_getValue("tes-MentionsMonitor") == undefined),
  77. "NotificationsOff" : (GM_getValue("tes-NotificationsOff") == "true"),
  78. "ChangeFont" : (GM_getValue("tes-ChangeFont") == "true" || GM_getValue("tes-ChangeFont") == undefined),
  79. "NightMode" : (GM_getValue("tes-NightMode") == "true")
  80. };
  81. if (settingsQuick["ChangeFont"]) bodyElem.classList.add("tes-changefont");
  82. if (settingsQuick["NightMode"]) nightmodeToggle(true);
  83. if (browserFirefox) {
  84. titleElem.querySelector("#room-header-info").insertAdjacentHTML("afterend", `
  85. <div id="tes-firefoxwarning" class="style-scope tinychat-title"
  86. 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;">
  87. <div class="style-scope tinychat-title" style="display: table;height: 100%;">
  88. <span style="display: table-cell; vertical-align: middle;top: 16%;" class="style-scope tinychat-title">
  89. Tinychat Enhancement Suite only supports Chrome. Support for Firefox is coming, but for now it only has autoscrolling.
  90. </span>
  91. </div>
  92. </div>
  93. `);
  94. }
  95.  
  96. function waitForSettings() {
  97. if (browserFirefox) {
  98. clearInterval(settingsWaitInterval);
  99. return;
  100. }
  101. settingsVisible = false;
  102. if (titleElem.querySelector("#room-header-gifts") != null) {
  103. clearInterval(settingsWaitInterval);
  104.  
  105. giftsElemWidth = titleElem.querySelector("#room-header-gifts").offsetWidth;
  106. if (titleElem.querySelector("#room-header-gifts-items") == null) {
  107. giftsElemWidth1000 = giftsElemWidth + 45;
  108. }
  109. else { giftsElemWidth1000 = giftsElemWidth; }
  110. if (titleCSS.querySelector("#titleCSS")) {
  111. titleCSS.querySelector("#titleCSS").innerHTML += `
  112. #tes-settings {
  113. right: ` + giftsElemWidth + `px;
  114. }
  115. `;
  116. }
  117.  
  118. settingsElem = titleElem.querySelector("#room-header-gifts").insertAdjacentHTML("beforebegin", `
  119. <div id="tes-settings">
  120. <div id="tes-settingsBox" class="hidden">
  121. <p id="title">Settings</a></p>
  122. <div id="tes-settings-mentions" class="tes-setting-container">
  123. <input type="checkbox">
  124. <span class="label">
  125. Alert phrases
  126. <span class="info" data-title='A comma-separated list of phrases to alert/highlight for. Example of 3 phrases: "hello,Google Chrome,sky"'>?</span>
  127. </span>
  128. <div class="inputcontainer">
  129. <input class="text"><button class="save blue-button">save</button>
  130. </div>
  131. </div>
  132. <div id="tes-settings-autoscroll" class="tes-setting-container">
  133. <input type="checkbox">
  134. <span class="label">
  135. Autoscroll
  136. </span>
  137. </div>
  138. <div id="tes-settings-notifications" class="tes-setting-container">
  139. <input type="checkbox">
  140. <span class="label">
  141. Hide notifications
  142. </span>
  143. </div>
  144. <div id="tes-settings-changefont" class="tes-setting-container">
  145. <input type="checkbox">
  146. <span class="label">
  147. Improve font
  148. <span class="info" data-title='The default font is too thin in some browsers'>?</span>
  149. </span>
  150. </div>
  151. <div id="tes-settings-nightmode" class="tes-setting-container">
  152. <input type="checkbox">
  153. <span class="label">
  154. Remove Borders
  155. </span>
  156. </div>
  157. <!--
  158. <div id="tes-settings-messageanim" class="tes-setting-container">
  159. <input type="checkbox">
  160. <span class="label">
  161. Disable message animation
  162. </span>
  163. </div>
  164. -->
  165. </div>
  166. <div id="tes-settingsGear" title="Settings"><span><img src="https://cdn1.iconfinder.com/data/icons/MetroStation-PNG/128/MB__Llama.png" width="25px"></span></div>
  167. </div>
  168. `);
  169.  
  170. titleElem.getElementById("tes-settingsGear").addEventListener("click", toggleSettingsDisplay);
  171. titleElem.querySelector("#tes-settings #tes-settings-mentions button.save").addEventListener("click", function(){mentionsManager("save");} );
  172. !browserFirefox ? mentionsManager("load") : void(0);
  173.  
  174. settingsCheckboxUpdate();
  175. titleElem.querySelector("#tes-settings-autoscroll input").addEventListener("click", function(){settingsCheckboxUpdate("tes-settings-autoscroll");});
  176. titleElem.querySelector("#tes-settings-mentions input:first-of-type").addEventListener("click", function(){settingsCheckboxUpdate("tes-settings-mentions");});
  177. titleElem.querySelector("#tes-settings-notifications input:first-of-type").addEventListener("click", function(){settingsCheckboxUpdate("tes-settings-notifications");});
  178. titleElem.querySelector("#tes-settings-changefont input").addEventListener("click", function(){settingsCheckboxUpdate("tes-settings-changefont");});
  179. titleElem.querySelector("#tes-settings-nightmode input").addEventListener("click", function(){settingsCheckboxUpdate("tes-settings-nightmode");});
  180.  
  181. notificationHider();
  182. }
  183. }
  184. function nightmodeToggle(arg) {
  185. var camQueryString = ".videos-items:last-child > .js-video";
  186. var messageQueryString = "#chat-content .message";
  187. if (arg == true) {
  188. bodyElem.classList.add("tes-nightmode");
  189. titleCSS.classList.add("tes-nightmode");
  190. videolistCSS.classList.add("tes-nightmode");
  191. chatlistCSS.classList.add("tes-nightmode");
  192. chatlogCSS.classList.add("tes-nightmode");
  193. chatlogElem.querySelector("#chat-wider").classList.add("tes-nightmode");
  194. // Messages:
  195. if (chatlogElem.querySelector(messageQueryString) != null) {
  196. var messageElems = chatlogElem.querySelectorAll(messageQueryString);
  197. for (i=0; i < messageElems.length; i++) {
  198. var messageItem = messageElems[i].querySelector("tc-message-html").shadowRoot;
  199. var messageItemCSS = messageItem.querySelector(".message");
  200. messageItemCSS.classList.add("tes-nightmode");
  201. }
  202. }
  203. // Cams:
  204. if (videolistElem.querySelector(camQueryString) != null) {
  205. var camElems = videolistElem.querySelectorAll(camQueryString);
  206. for (i=0; i < camElems.length; i++) {
  207. var camItem = camElems[i].querySelector("tc-video-item").shadowRoot;
  208. var camItemCSS = camItem.querySelector(".video");
  209. camItemCSS.classList.add("tes-nightmode");
  210.  
  211. camItemCSShtml = `
  212. <style id="camItemCSS">
  213. .tes-nightmode.video:after { border-color: #2d373a; }
  214. </style>
  215. `;
  216. if (camItemCSS.querySelector("#camItemCSS") == null) camItemCSS.insertAdjacentHTML("afterbegin", camItemCSShtml);
  217. }
  218. }
  219. }
  220. if (arg == false) {
  221. bodyElem.classList.remove("tes-nightmode");
  222. titleCSS.classList.remove("tes-nightmode");
  223. videolistCSS.classList.remove("tes-nightmode");
  224. chatlistCSS.classList.remove("tes-nightmode");
  225. chatlogCSS.classList.remove("tes-nightmode");
  226. chatlogElem.querySelector("#chat-wider").classList.remove("tes-nightmode");
  227. // Messages:
  228. if (chatlogElem.querySelector(messageQueryString) != null) {
  229. var messageElems = chatlogElem.querySelectorAll(messageQueryString);
  230. for (i=0; i < messageElems.length; i++) {
  231. var messageItem = messageElems[i].querySelector("tc-message-html").shadowRoot;
  232. var messageItemCSS = messageItem.querySelector(".message");
  233. messageItemCSS.classList.remove("tes-nightmode");
  234. }
  235. }
  236. // Cams:
  237. if (videolistElem.querySelector(camQueryString) != null) {
  238. var camElems = videolistElem.querySelectorAll(camQueryString);
  239. for (i=0; i < camElems.length; i++) {
  240. var camItem = camElems[i].querySelector("tc-video-item").shadowRoot;
  241. var camItemCSS = camItem.querySelector(".video");
  242. camItemCSS.classList.remove("tes-nightmode");
  243. }
  244. }
  245. }
  246. }
  247.  
  248. function toggleSettingsDisplay(arg) {
  249. if (arg == "updateNotifier") {
  250. titleElem.querySelector("#tes-updateNotifier").classList.remove("visible");
  251. GM_setValue("tes-updateNotifSeen", "2018.05.30v29");
  252. }
  253.  
  254. if (settingsVisible == true) {
  255. titleElem.getElementById("tes-settingsBox").classList.add("hidden");
  256. titleElem.getElementById("tes-settings").classList.remove("tes-open");
  257. settingsVisible = false;
  258. }
  259.  
  260. else {
  261. titleElem.getElementById("tes-settingsBox").classList.remove("hidden");
  262. titleElem.getElementById("tes-settings").classList.add("tes-open");
  263. settingsVisible = true;
  264. }
  265.  
  266. }
  267.  
  268. function settingsCheckboxUpdate(settingName=null, value=null) {
  269. if (settingName == null && value == null) {
  270. titleElem.getElementById("tes-settings-autoscroll").querySelector("input").checked = settingsQuick["Autoscroll"];
  271. titleElem.getElementById("tes-settings-mentions").querySelector("input").checked = settingsQuick["MentionsMonitor"];
  272. titleElem.getElementById("tes-settings-notifications").querySelector("input").checked = settingsQuick["NotificationsOff"];
  273. titleElem.getElementById("tes-settings-changefont").querySelector("input").checked = settingsQuick["ChangeFont"];
  274. titleElem.getElementById("tes-settings-nightmode").querySelector("input").checked = settingsQuick["NightMode"];
  275.  
  276. return;
  277. }
  278. if (settingName == "tes-settings-autoscroll") {
  279. if (value == null) {
  280. var newValue = titleElem.getElementById("tes-settings-autoscroll").querySelector("input").checked;
  281. settingsQuick["Autoscroll"] = newValue;
  282. GM_setValue("tes-Autoscroll", newValue.toString());
  283. }
  284. }
  285. if (settingName == "tes-settings-mentions") {
  286. if (value == null) {
  287. var newValue = titleElem.getElementById("tes-settings-mentions").querySelector("input:first-of-type").checked;
  288. // if (newValue) {
  289. // titleElem.getElementById("tes-settings-mentions").getAttribute("class").includes("setting-disabled");
  290. // }
  291. settingsQuick["MentionsMonitor"] = newValue;
  292. GM_setValue("tes-MentionsMonitor", newValue.toString());
  293. }
  294. }
  295. if (settingName == "tes-settings-notifications") {
  296. if (value == null) {
  297. var newValue = titleElem.getElementById("tes-settings-notifications").querySelector("input").checked;
  298. settingsQuick["NotificationsOff"] = newValue;
  299. GM_setValue("tes-NotificationsOff", newValue.toString());
  300. notificationHider();
  301. }
  302. }
  303. if (settingName == "tes-settings-changefont") {
  304. if (value == null) {
  305. var newValue = titleElem.getElementById("tes-settings-changefont").querySelector("input").checked;
  306. settingsQuick["ChangeFont"] = newValue;
  307. GM_setValue("tes-ChangeFont", newValue.toString());
  308. fontToggle(newValue);
  309. }
  310. }
  311. if (settingName == "tes-settings-nightmode") {
  312. if (value == null) {
  313. var newValue = titleElem.getElementById("tes-settings-nightmode").querySelector("input").checked;
  314. settingsQuick["NightMode"] = newValue;
  315. GM_setValue("tes-NightMode", newValue.toString());
  316. nightmodeToggle(newValue);
  317. }
  318. }
  319. }
  320.  
  321.  
  322. var settingsWaitInterval = setInterval(waitForSettings,1000);
  323.  
  324. function fontToggle(arg) {
  325. arg ? bodyElem.classList.add("tes-changefont") : bodyElem.classList.remove("tes-changefont");
  326. }
  327. function notificationHider() {
  328. chatlogContainer = chatlogElem.querySelector("#chat-content");
  329. settingsQuick["NotificationsOff"] ? chatlogContainer.classList.add("tes-notif-off") : chatlogContainer.classList.remove("tes-notif-off");
  330. }
  331.  
  332. function mentionsManager(mode) {
  333. var inputElem = titleElem.querySelector("#tes-settings #tes-settings-mentions input.text");
  334. // phrases = inputElem.value.split(",");
  335. var phrase = inputElem.value;
  336. if (phrase.endsWith(",")) { phrase = phrase.slice(0, -1); }
  337. if (phrase.startsWith(",")) { phrase = phrase.slice(1); }
  338.  
  339. if (mode == "save") {
  340. GM_setValue("tes-Mentions", phrase);
  341. settingMentions = phrase.split(",");
  342. inputElem.value = phrase;
  343. }
  344. if (mode == "load") {
  345. var loadedMentions = GM_getValue("tes-Mentions");
  346. if (loadedMentions != undefined) {
  347. inputElem.value = loadedMentions;
  348. settingMentions = loadedMentions.split(",");
  349. }
  350. }
  351. return;
  352.  
  353. var phrase = phrase.toString();
  354. if (mode == "save") {
  355. settingMentions.push(phrases);
  356. GM_setValue("tes-Mentions", JSON.stringify(setting_Mentions));
  357. console.log("Mention add:" + phrases);
  358. }
  359. if (mode == "load") {
  360. var mentions = JSON.parse(GM_getValue("tes-Mentions"));
  361. console.log("Mention load:" + mentions);
  362. settingMentions = mentions;
  363. inputElem.value = settingMentions.join();
  364. }
  365. }
  366.  
  367. !browserFirefox ? injectCSS() : void(0);
  368. function injectCSS(cssName=null) {
  369. // Indenting is purposely wrong, for readability
  370. var insertPosition = "beforeend";
  371.  
  372. if (browserFirefox) {
  373. headElem = document.querySelector("head");
  374. titleCSS = videolistCSS = chatlistCSS = userlistCSS = userContextmenuCSS = bodyCSS = chatlogCSS = sidemenuCSS = videomoderationCSS = webappCSS = headElem;
  375. headElem.querySelector('[scope="tinychat-title"]').innerHTML += ` #room-header { min-height: 10%; max-height: 10%; } `;
  376. }
  377.  
  378. if (cssName == "titleCSS" || cssName == null) {
  379. titleCSShtml = `
  380. <style id="titleCSS" scope="tinychat-title">
  381. @keyframes ease-to-left {
  382. 0% {right: -50px; opacity: 0;}
  383. 100% {right: 0; opacity: 1;}
  384. }
  385. @keyframes ease-to-right {
  386. 0% {right:auto;}
  387. 100% {right:0;}
  388. }
  389. @keyframes ease-to-bottom-21px {
  390. 0% {top:-300px; opacity: 0;}
  391. 100% {top:0; opacity: 1;}
  392. }
  393. #content {
  394. padding: 0px;
  395. background-color:#111111;
  396. }
  397. #room-header-gifts-buttons > #get-coins {
  398. background-color: #111111;
  399. border-color: #313131;
  400. color: #313131;
  401. }
  402. #room-header-gifts-buttons > #get-coins:hover {
  403. background-color: #313131;
  404. border-color: #111111;
  405. color: #111111;
  406. }
  407.  
  408. #room-header-gifts-buttons > a
  409. {
  410. background-color: #111111;
  411. border-color: #313131;
  412. color: #313131;
  413. }
  414. #room-header-gifts-buttons > a:hover {
  415. background-color: #313131;
  416. border-color: #111111;
  417. color: #111111;
  418. }
  419. #tes-header-grabber {
  420. position: absolute;
  421. top: 88px;
  422. right: 50%;#room-header *
  423. background: white;
  424. width: 60px;
  425. height: 20px;
  426. border: #313131 1px solid;
  427. border-radius: 19px;
  428. text-align: center;
  429. color: #b4c1c5;
  430. cursor: pointer;
  431. transition: all .4s ease-in-out;
  432. background-color:#111111;
  433. }
  434. .tes-headerCollapsed #tes-header-grabber {
  435. top: 0px;
  436. background: #111111;
  437. border-top: 0;
  438. z-index: 9;
  439. border-radius: 11px;
  440. line-height: 15px;
  441. border-top-left-radius: 0;
  442. border-top-right-radius: 0;
  443. height: 15px;
  444. }
  445. .tes-headerCollapsed:hover #tes-header-grabber {
  446. height: 29px;
  447. line-height: 43px;
  448. }
  449.  
  450. input {
  451. border: 1px solid #c4d4dc;
  452. line-height: 16px;
  453. padding-left: 3px;
  454. }
  455. .label ~ input {
  456. border-bottom-left-radius: 6px;
  457. border-top-left-radius: 6px;
  458. }
  459. input ~ button {
  460. border-bottom-right-radius: 6px;
  461. border-top-right-radius: 6px;
  462. }
  463. input[type="button"], button {
  464. display: inline;
  465. padding: 0 15px;
  466. border: 0;
  467. box-sizing: border-box;
  468. letter-spacing: 1px;
  469. font-size: 12px;
  470. font-weight: bold;
  471. line-height: 20px;
  472. text-align: center;
  473. transition: .2s;
  474. outline: none;
  475. }
  476. .blue-button {
  477. color: #fff;
  478. background-color: #333333;
  479. }
  480. .blue-button:hover {
  481. background-color: #54ccf3;
  482. }
  483. .blue-button:active {
  484. background-color: #38a8dd;
  485. }
  486. .tes-setting-container {
  487. line-height: initial;
  488. }
  489. #tes-settings > div {
  490. /*animation: ease-to-bottom-21px .2s ease 0s 1;*/
  491. position: relative;
  492. top: 0;
  493.  
  494. }
  495. @media screen and (max-width: 1000px) {
  496. #tes-settings > div {
  497. height: 92px;
  498. }
  499. }
  500. #tes-settings .hidden { display: none; }
  501. #tes-settings #title { font-weight: bold;
  502. color:#ffffff;lll
  503. text-transform:uppercase; }
  504. #tes-settings {
  505. transition: all .4s ease-in-out;
  506. animation: ease-to-bottom-21px .2s ease 0s 1;
  507. /*max-height: 10%;*/
  508. font-size: 11px;
  509. flex: none;
  510. overflow: hidden;
  511. z-index: 9;
  512. position: absolute;
  513. top: 25px;
  514. /* right: ` + (giftsElemWidth + 10).toString() + `px; */
  515.  
  516. }
  517. @media screen and (max-width: 1000px) {
  518. #tes-settings {
  519. right: 37px!important;
  520. top: -20px;
  521. }
  522. #tes-settings.tes-open {
  523. top: 6px;
  524. }
  525. #tes-settingsGear {
  526. font-size: 52px!important;
  527. }
  528.  
  529. #room-header-gifts-items {
  530. padding: 0 11px;
  531. border-radius: 12px;
  532. background-color: #2a2a2a;
  533. font-size: 0;
  534. text-align: center;
  535. white-space: nowrap;
  536. }
  537. }
  538. @media screen and (max-width: 600px) {
  539. #tes-settings {
  540. right: -4px!important;
  541. top: 19px;
  542. }
  543. }
  544. #tes-settings:hover {
  545. overflow: visible;
  546. }
  547. #tes-settings-mentions .inputcontainer {
  548. float: right;
  549. position: relative;
  550. top: -3px;
  551.  
  552. }
  553. #tes-settingsGear {
  554. font-size: 40px;
  555. color: #53b6ef;
  556. float: right;
  557.  
  558.  
  559. }
  560. #tes-settingsGear:hover {
  561. cursor: pointer;
  562. color: #7ccefe;
  563. }
  564. .tes-open #tes-settingsGear {
  565. background: #53b6ef;
  566. border-bottom-right-radius: 15px;
  567. border-top-right-radius: 15px;
  568. border: #53b6ef 1px solid;
  569. border-left: 0;}
  570. .tes-open #tes-settingsGear span img{
  571. fill: red;}
  572. /*transition: all .2s linear;*/
  573. }
  574. #tes-settingsGear span {
  575. display: block;
  576. transition: transform 0.4s ease-in-out;
  577. }
  578. .tes-open #tes-settingsGear span {
  579. transform: rotate(90deg);
  580. fill: red;
  581. }
  582. #tes-settingsBox {
  583. background: #111111;
  584. padding: 0px 10px 0px 10px;
  585. float: left;
  586. border: #53b6ef 1px solid;
  587. border-top-left-radius: 12px;
  588. border-bottom-left-radius: 12px;
  589. border-bottom-right-radius: 12px;
  590. animation: ease-to-left .2s ease 0s 1;
  591. right: 0;
  592. }
  593. #tes-settingsBox.hidden {
  594. animation: ease-to-right .2s ease 0s 1;
  595. display: visible;
  596. /*position: relative; right: -1000px;*/
  597. }
  598.  
  599. /*** Inline with header ***/
  600. #tes-settingsBox {
  601. border-bottom-left-radius: 15px;
  602. border-top-left-radius: 15px;
  603. }
  604. #tes-settingsGear {
  605. display: table;
  606. }
  607. #tes-settingsGear span {
  608. display: table-cell;
  609. vertical-align: middle;
  610. }
  611. /*** ************* ***/
  612.  
  613. #tes-settings .tes-setting-container input[type=checkbox] {
  614. margin: 0;
  615. margin-right: 1px;
  616. float: left;
  617. position: absolute;
  618. left: 8px;
  619. }
  620. #tes-settings .label{
  621. margin-right: 4px;
  622. margin-left: 16px;
  623. color:#ffffff;
  624. }
  625. #tes-settings .info{
  626. margin-left: 3px;
  627. color: #0d94e3;
  628. font-weight: bold;
  629. font-family: Arial;
  630. border: #0d94e3 1px solid;
  631. border-radius: 16px;
  632. height: 1em;
  633. width: 1em;
  634. text-align: center;
  635. display: inline-block;
  636. }
  637. #tes-settings .info:hover:after{
  638. font-weight: normal;
  639. padding: 4px 7px 4px 7px;
  640. border-radius: 7px;
  641. color: white;
  642. background: #61787f;
  643. content: attr(data-title);
  644. display: inline-block;
  645. position: absolute;
  646. top: 52px;
  647. left: 0;
  648. z-index: 9;
  649. }
  650. /*#tes-settings .label:hover:before{
  651. border: solid;
  652. border-color: #61787f transparent;
  653. border-width: 0px 6px 6px 6px;
  654. top: 10px;
  655. content: "";
  656. left: 8%;
  657. position: relative;
  658. display: inline-block;
  659. }*/
  660.  
  661. #tes-settings a:visited, #tes-settings a:link {
  662. text-decoration: none;
  663. color: inherit;
  664. }
  665. #tes-settings a:hover {
  666. color: #53b6ef;
  667. }
  668.  
  669. #room-header {
  670. height: 100px;
  671. max-height: unset;
  672. min-height: unset;
  673. transition: all .4s ease-in-out;
  674. background-color:#191919;
  675. border-bottom: 1px solid #313131;
  676.  
  677. }
  678. #room-header-gifts-items {
  679. padding: 0 11px;
  680. border-radius: 12px;
  681. background-color: transparent;
  682. font-size: 0;
  683. text-align: center;
  684. white-space: nowrap;
  685. }
  686. #room-header-gifts-items > a > img {
  687. height: 75%;
  688. width: 75%;
  689. border-radius: 50px;
  690. border: 4px solid #313131;
  691. }
  692. #room-header.tes-headerCollapsed {
  693. height: 0px;
  694. }
  695. #room-header.tes-headerCollapsed:hover {
  696. height: 25px;
  697. }
  698. @media screen and (max-width: 600px) {
  699. #room-header {
  700. min-height: inherit;
  701. max-height: inherit;
  702. }
  703. }
  704. #room-header-info {
  705. padding: 0;
  706. color: #ffffff;
  707. }
  708. #room-header-info > h1 {
  709. color: #ffffff;
  710. text-transform: uppercase;
  711. }
  712. #room-header-info > h1:after {
  713. visibility: hidden;
  714. hidden: none;
  715. }
  716. #room-header-info-text:after{
  717. visibility: hidden;
  718. hidden: none;
  719. }
  720. #room-header-info-text {
  721. height: auto;
  722. }
  723. @media screen and (max-width: 600px) {
  724. #room-header-info-text {
  725. height: inherit;
  726. }
  727. }
  728. #room-header-avatar {
  729. margin: 2px 10px 0 35px;
  730. height: 90px;
  731. min-width: 90px;
  732. max-width: 90px;
  733. transition: all .5s linear;
  734. }
  735.  
  736. .tes-headerCollapsed:hover #room-header-avatar:hover {
  737. z-index: 9;
  738. }
  739. #room-header-gifts {
  740. padding: 10px 10px;
  741. }
  742. #room-header-avatar:hover {
  743. border-radius: unset;
  744. }
  745. .tes-headerCollapsed #tes-settingsGear {
  746. font-size: 33px;
  747. }
  748. .tes-headerCollapsed #tes-settings > div {
  749. height: fit-content;
  750. }
  751. .tes-headerCollapsed #tes-settingsBox {
  752. border-width: 1px;
  753. border-radius: 7px;
  754. border-top-right-radius: 0;
  755. padding-bottom: 7px;
  756. }
  757. .tes-headerCollapsed #tes-settings {
  758. top: 13px;
  759. right: 0;
  760. }
  761.  
  762. </style>
  763. `;
  764. titleCSS.insertAdjacentHTML(insertPosition, titleCSShtml);
  765. }
  766.  
  767. if (cssName == "videolistCSS" || cssName == null) {
  768. videolistCSShtml = `
  769. <style id="videolistCSS" scope="tinychat-videolist">
  770. #videolist.tes-sidemenuCollapsed { width: 100%; }
  771. #videos-footer {
  772. display: flex;
  773. flex-direction: row;
  774. align-items: stretch;
  775. height: 0px;
  776. min-height: 0px;
  777. width: 170px;
  778. position: relative;
  779. bottom: 0;
  780. right: 150px;
  781. padding: 0 30px 0px;
  782. box-sizing: border-box;
  783. font-size: 0;
  784. z-index: 3;
  785. left: auto;
  786. background-color:#111111;
  787. }
  788. #videos-footer.tes-sidemenuCollapsed{ position: relative;
  789. bottom: 0;
  790. right: 50px;
  791. }
  792. .tes-sidemenuCollapsed#videos-footer{ position: relative;
  793. bottom: 0;
  794. right: 50px;
  795. }
  796.  
  797. .video:after {
  798. content: '';
  799. position: absolute;
  800. display: block;
  801. height: 100%;
  802. width: 100%;
  803. top: 0;
  804. left: 0;
  805. border: 0px solid #fff;
  806. border-radius: 10px;
  807. box-sizing: border-box;
  808. pointer-events: none;
  809. }
  810. #video::after
  811. {
  812.  
  813. border: 0px solid #fff;
  814.  
  815. }
  816. #video:after
  817. {
  818.  
  819. border: 0px solid #fff;
  820.  
  821. }
  822.  
  823. #videos > .video {
  824. position: relative;
  825. width: 100%;
  826. padding: 5px;
  827. box-sizing: border-box;
  828. font-size: 0;
  829. overflow: hidden;
  830. background-color: #ffffff !important;
  831. }
  832. .video > div > iframe {
  833. width:100%;
  834. }
  835.  
  836. #videos-header {
  837. height: 10px;
  838. min-height: 10px;
  839. background-color:#111111;
  840. }
  841. #videos-content {
  842. background-color:#111111;
  843. }
  844.  
  845. #videos-footer-youtube {
  846. background-color: #b20000;
  847. background-image: url('http://i63.tinypic.com/28gz12c.jpg');
  848. background-position: top center;
  849. background-position: 8px;
  850. background-size: 100px;
  851. background-repeat: no-repeat;
  852. }
  853. #videos-footer-youtube > svg, #videos-footer-soundcloud > svg {
  854. vertical-align: middle;
  855. display:none;
  856. }
  857. #videos-footer-push-to-talk > svg {
  858. vertical-align: middle;
  859. pointer-events: none;
  860. display:none;
  861. }
  862. #videos-footer-youtube, #videos-footer-soundcloud {
  863. height: 42px;
  864. width: 10px !important;
  865. min-width: 115px !important;
  866. margin-right: -63px !important;
  867. margin-top: -150px;
  868. border-radius: 11px;
  869. text-align: center;
  870. line-height: 50px;
  871. cursor: pointer;
  872. overflow: hidden;
  873. transition: .2s;
  874. }
  875.  
  876. .tes-sidemenuCollapsed #videos-footer {
  877. right:0px;
  878. }
  879.  
  880.  
  881. #videos-footer-push-to-talk {
  882. height: 55px;
  883. margin-top: -34px;
  884. background-image: url('http://www.iconsplace.com/icons/preview/white/microphone-256.png');
  885. background-position: center center;
  886. background-size: 35px 35px;
  887. background-repeat: no-repeat;
  888.  
  889. }
  890. #videos-footer-push-to-talk.tes-sidemenuCollapsed {
  891. height: 55px;
  892. margin-top: -14px;
  893.  
  894. }
  895. #videos-footer-broadcast-wrapper.tes-sidemenuCollapsed {
  896. position: relative;
  897. right: 10px;
  898. }
  899. #videos-footer-broadcast-wrapper {
  900. position: relative;
  901. right: 140px;
  902. margin-top: -105px;
  903. display: unset;
  904. flex-direction: row;
  905. align-items: unset;
  906. width: unset;
  907. padding-left: 0px !important;
  908. }
  909. #videos-footer-broadcast-wrapper > #videos-footer-submenu-button {
  910. height: 39px;
  911. padding-left: 25px;
  912. background-color: #328332;
  913. position: relative;
  914. top: -39px;
  915. left: 155px;
  916. display: block;
  917. width: 10px;
  918. min-width: 10px;
  919. border-radius: 0px 11px 11px 0px;
  920. box-sizing: border-box;
  921. cursor: pointer;
  922. transition: .2s;
  923.  
  924. }
  925. #videos-footer-submenu {
  926. position: absolute;
  927. width: 250px;
  928. bottom: 100px;
  929. left: 150px;
  930. right: 0px;
  931. padding: 7px;
  932. border-radius: 4px;
  933. background-color: #fff;
  934. font-size: 14px;
  935. color: #000;
  936. box-shadow: 0 1px 4px 0 rgba(0, 0, 0, .09);
  937. opacity: 0;
  938. visibility: hidden;
  939. z-index: 2;
  940. transition: .2s;
  941. }
  942. #videos-footer-submenu:before, #videos-footer-submenu:after {
  943. content: '';
  944. position: absolute;
  945. display: block;
  946. height: 0;
  947. width: 0;
  948. right: unset;
  949. bottom: unset;
  950. border-width: 7px 7px 0 7px;
  951. border-style: solid;
  952. border-color: rgba(0, 0, 0, .06) transparent;
  953. }
  954. #videos-footer-broadcast-wrapper > #videos-footer-submenu-button:before {
  955. content: '';
  956. position: absolute;
  957. display: block;
  958. height: 0;
  959. width: 0;
  960. top: 18px;
  961. right: 8px;
  962. border-width: 0 5px 6px;
  963. border-style: solid;
  964. border-color: #fff transparent;
  965. opacity: 1;
  966. visibility: visible;
  967. transition: .2s;
  968. }
  969. #videos-footer-broadcast {
  970. position: relative;
  971. display: block;
  972. right: 20px;
  973. height: 39px;
  974. width: 195px;
  975. padding-left: 0px;
  976. border-radius: 11px 11px 11px 11px;
  977. box-sizing: unset;
  978. background-color: #13a832;
  979. font-size: 15px;
  980. font-weight: 550;
  981. color: #fff;
  982. text-align: center;
  983. line-height: 38px;
  984. cursor: pointer;
  985. text-transform: uppercase;
  986. transition: .2s;
  987. }
  988. #videos-footer-broadcast-wrapper > .waiting {
  989. position: absolute;
  990. width: 125px;
  991. height: 55px;
  992. top: 45px;
  993. bottom: 0;
  994. left: 10px;
  995. right: 0;
  996. border-radius: 11px;
  997. background-color: #38cd57;
  998. opacity: 0;
  999. visibility: hidden;
  1000. transition: .2s;
  1001. }
  1002. #videos-footer-youtube.hidden, #videos-footer-soundcloud.hidden {
  1003. width: 0;
  1004. min-width: 0;
  1005. margin-right: 0;
  1006. visibility: hidden;
  1007. }
  1008.  
  1009. }
  1010. #Fvideolist * {
  1011. width: 75%!important;
  1012. display: contents;
  1013. float: right;
  1014. flex-direction: column;
  1015. }
  1016. #Fvideos {
  1017. flex-direction: unset;
  1018. flex-wrap: unset;
  1019. }
  1020. #videos-header > span {
  1021. line-height: initial;
  1022. position: relative;
  1023. top: 1px;
  1024. background: none;
  1025. }
  1026. #videos-header > span > svg {
  1027. height: 16px;
  1028. padding: 0;
  1029. }
  1030. .videos-header-volume {
  1031. position: absolute;
  1032. height: 128px;
  1033. width: 4px;
  1034. top: 2px;
  1035. left: 50%;
  1036. margin-left: -24px;
  1037. border-width: 50px 22px 22px;
  1038. border-style: solid;
  1039. border-color: #000;
  1040. border-radius: 24px;
  1041. box-shadow: 0 1px 4px 0 rgba(0, 0, 0, .09);
  1042. opacity: 0;
  1043. visibility: hidden;
  1044. transition: .2s;
  1045. }
  1046. </style>
  1047. `;
  1048. videolistCSS.insertAdjacentHTML(insertPosition, videolistCSShtml);
  1049. }
  1050.  
  1051. if (cssName == "chatlistCSS" || cssName == null) {
  1052. chatlistCSShtml = `
  1053. <style id="chatlistCSS" scope="tinychat-chatlist">
  1054.  
  1055.  
  1056. #chatlist > div > span {
  1057. padding-left: 10px;
  1058. }
  1059. #chatlist > #header {
  1060. top: 3px;
  1061. height: auto;
  1062. }
  1063.  
  1064. /*** --- this block is in chatlistCSS & userlistCSS --- ***/
  1065. .list-item > span > img {
  1066. right: 13px;
  1067. left: auto;
  1068. }
  1069. .list-item > span[data-status]:before {
  1070. left: auto;
  1071. right: 0;
  1072. }
  1073. .list-item > span > span {
  1074. background: none!important;
  1075. box-shadow: none!important;
  1076. }
  1077. /*** --- --- ***/
  1078.  
  1079. .close-instant > path {
  1080. fill: white;
  1081. }
  1082. .list-item > span > span { /* gift and close buttons */
  1083. right: 16px;
  1084. }
  1085. .list-item > span:hover > span { /* gift and close buttons */
  1086. right: 16px;
  1087. background: #2d373a!important;
  1088. }
  1089.  
  1090. </style>
  1091. `;
  1092. chatlistCSS.insertAdjacentHTML(insertPosition, chatlistCSShtml);
  1093. }
  1094.  
  1095. if (cssName == "userlistCSS" || cssName == null) {
  1096. userlistCSShtml = `
  1097. <style id="userlistCSS" scope="tinychat-userlist">
  1098. #userlist > div > span {
  1099. padding-left: 2px;
  1100. padding-right: 2px;
  1101. position: relative;
  1102. display: inline-block;
  1103. height: 30px;
  1104. width: 100%;
  1105. border-radius: 0 0 0 0;
  1106. box-sizing: border-box;
  1107. font-size: 14px;
  1108. color: #7b868a;
  1109. line-height: 30px;
  1110. text-align: left;
  1111. white-space: nowrap;
  1112. overflow: hidden;
  1113. transition: .2s;
  1114. }
  1115. .tes-sidemenuCollapsed #button-banlist {
  1116. left: -100px;
  1117. width: 10px;
  1118. }
  1119. #chatlist > div > span {
  1120. position: relative;
  1121. display: inline-block;
  1122. height: 30px;
  1123. width: 100%;
  1124. padding-left: 36px;
  1125. border-radius: 0 30px 30px 0;
  1126. box-sizing: border-box;
  1127. font-size: 14px;
  1128. color: #02bcff;
  1129. line-height: 30px;
  1130. text-align: left;
  1131. white-space: nowrap;
  1132. overflow: hidden;
  1133. transition: .2s;
  1134. }
  1135.  
  1136. .list-item > span > span {
  1137. right: auto;
  1138. padding: 0 5px;
  1139. }
  1140. .list-item > span > .nickname {
  1141. padding-right: 3px;
  1142. }
  1143.  
  1144. /*** --- this block is in chatlistCSS & userlistCSS --- ***/
  1145. .list-item > span > img {
  1146. right: 13px;
  1147. left: auto;
  1148. }
  1149. .list-item > span[data-status]:before {
  1150. left: auto;
  1151. right: 0;
  1152. }
  1153. .list-item > span > span {
  1154. background: none;
  1155. box-shadow: none;
  1156. }
  1157. /*** --- --- ***/
  1158.  
  1159. .list-item > span > span[data-moderator="1"]:before {
  1160. filter: hue-rotate(226deg) saturate(4000%);
  1161. }
  1162. #userlist > #header {
  1163. top: auto;
  1164. height: auto;
  1165. }
  1166. #userlist > #header > span {
  1167. display: block;
  1168. border-color: black;
  1169. background-color: #111111;
  1170. text-align: center;
  1171. top: 4px;
  1172. }
  1173. #chatlist > #header {
  1174. color: #111111;
  1175. }
  1176. #button-banlist {
  1177. padding: 0 12px;
  1178. text-indent: -9999px;
  1179. background-image: url(https://www.freeiconspng.com/uploads/red-x-png-4.png);
  1180. background-size: 15px;
  1181. background-position: center center;
  1182. background-repeat: no-repeat;
  1183. white-space: nowrap;
  1184. }
  1185. .list-item > span[data-status]:before {
  1186. left: auto;
  1187. right: 0;
  1188. border-radius:10px;
  1189. }
  1190. </style>
  1191. `;
  1192. userlistCSS.insertAdjacentHTML(insertPosition, userlistCSShtml);
  1193. }
  1194.  
  1195. if (cssName == "userContextmenuCSS" || cssName == null) {
  1196. userContextmenuCSShtml = `
  1197. <style id="userContextmenuCSS" scope="tinychat-user-contextmenu">
  1198. #main {
  1199. border: 1px solid rgba(0, 0, 0, .1);
  1200. }
  1201. </style>
  1202. `;
  1203. userContextmenuCSS.insertAdjacentHTML(insertPosition, userContextmenuCSShtml);
  1204. }
  1205.  
  1206. if (cssName == "bodyCSS" || cssName == null) {
  1207. bodyCSShtml = `
  1208. <style id="bodyCSS">
  1209. #nav-static-wrapper {
  1210. width: 2px;
  1211. opacity: .7;
  1212. }
  1213. @media screen and (max-width: 1000px) {
  1214. #nav-static-wrapper {
  1215. width: 82px;
  1216. opacity: 1;
  1217. }
  1218. }
  1219.  
  1220. #menu-icon { transition: 1s; display:none;}
  1221. .tes-sidemenuCollapsed #menu-icon {
  1222. z-index: -1;
  1223. opacity: 0;
  1224. display:none;
  1225. }
  1226. .tes-sidemenuCollapsed #header-user { display: none; }
  1227. @media screen and (max-width: 1000px) {
  1228. #header-user {
  1229. left: 21px;
  1230. }
  1231.  
  1232. #videos-footer-youtube.tes-sidemenuCollapsed{
  1233. padding: 0px;
  1234. left:100px;
  1235. background-color:#f07629;
  1236. }
  1237. body.tes-changefont {
  1238. font-family: sans-serif;
  1239. }
  1240. #header-user {
  1241. left: 62px;
  1242. }
  1243. @media screen and (max-width: 1000px) {
  1244. #header-user {
  1245. left: 21px;
  1246. }
  1247. }
  1248. @media screen and (max-width: 600px) {
  1249. #header-user {
  1250. left: auto;
  1251. right: 54px;
  1252. }
  1253. }
  1254. @media screen and (min-width: 1000px) {
  1255. #menu-icon:hover { opacity: 1; }
  1256. #menu-icon {
  1257. top: 4px;
  1258. left: 19px;
  1259. height: 12px;
  1260. width: 109px;
  1261. font-size: 10px;
  1262. background: #04caff;
  1263. border-radius: 6px;
  1264. opacity: .8;
  1265. visibility: hidden;
  1266. display:none;
  1267. }
  1268. #menu-icon:after {
  1269. position: absolute;
  1270. top: 3px;
  1271. left: 51px;
  1272. content: "";
  1273. height: 7px;
  1274. width: 7px;
  1275. border-width: 2px 2px 0px 0px;
  1276. border-style: solid;
  1277. border-color: #fff;
  1278. box-sizing: border-box;
  1279. transform: rotate(45deg);
  1280. transition: .2s;
  1281. visibility: hidden;
  1282. }
  1283. #menu-icon:hover:after {
  1284. border-width: 0px 0px 2px 2px;
  1285. visibility: hidden;
  1286. }
  1287. #menu-icon > svg {
  1288. opacity: 0;
  1289. visibility: hidden;
  1290. }
  1291. }
  1292. #menu-icon {
  1293. visibility: hidden;
  1294. display:none;}
  1295. </style>
  1296. `;
  1297. bodyCSS.insertAdjacentHTML(insertPosition, bodyCSShtml);
  1298. }
  1299.  
  1300. messageCSS = `
  1301. .message.system {
  1302. font-size: 12px;
  1303. font-weight: 600;
  1304. color: cyan;
  1305. left: 0px;
  1306.  
  1307. }
  1308. .o
  1309. .tes-mention-message { color: red; }
  1310. .on-white-scroll {
  1311. padding-left: 16px;
  1312. box-sizing: border-box;
  1313. overflow-x: hidden;
  1314. overflow-y: hidden;
  1315. }
  1316.  
  1317. .message {
  1318. font-size: 14px;
  1319. color: #ffffff;
  1320. white-space: pre-line;
  1321. word-wrap: break-word;
  1322. position: relative;
  1323. right: 12px;
  1324. top: 3px;
  1325. }
  1326. `;
  1327.  
  1328.  
  1329. if (cssName == "chatlogCSS" || cssName == null) {
  1330. chatlogCSShtml = `
  1331. <style id="chatlogCSS" scope="tinychat-chatlog">
  1332.  
  1333. /* HERE IS THE OTHER GRABBER */
  1334. #tes-chat-grabber {
  1335. position: absolute;
  1336. top: 80px;
  1337. right: 50%;tinychat-chatlog *
  1338. background: white;
  1339. width: 80x;
  1340. height: 15px;
  1341. border: #ddd 1px solid;
  1342. border-radius: 19px;
  1343. text-align: center;
  1344. color: #b4c1c5;
  1345. cursor: pointer;
  1346. transition: all .4s ease-in-out;
  1347. }
  1348. .tes-chatCollapsed #tes-chat-grabber {
  1349. top: 0px;
  1350. background: #111111;
  1351. border-top: 0;
  1352. z-index: 9;
  1353. border-radius: 11px;
  1354. line-height: 15px;
  1355. border-top-left-radius: 0;
  1356. border-top-right-radius: 0;
  1357. height: 15px;
  1358. }
  1359. .tes-chatCollapsed:hover #tes-chat-grabber {
  1360. height: 29px;
  1361. line-height: 43px;
  1362. }
  1363. /* END */
  1364.  
  1365. #chat-instant > a > .status-icon, #chat-content > .message > a > .status-icon {
  1366. position: absolute;
  1367. height: 15px;
  1368. width: 15px;
  1369. top: 0px;
  1370. left: 315px;
  1371. padding: 3px;
  1372. border-radius: 100%;
  1373. background-color: #fff;
  1374. }
  1375.  
  1376. #chat-content > .message.system > .content {
  1377. font-size: 12px;
  1378. font-weight: 600;
  1379. color: #00ff00;
  1380. margin:10px;
  1381.  
  1382. }
  1383.  
  1384. #chat-wrapper {
  1385. min-width: 350px;
  1386. border-left: 0px solid rgba(0, 0, 0, .1);
  1387. box-sizing: border-box;
  1388. background-color: #111111;
  1389. transition: .8s;
  1390. }
  1391. #chat-content > .message {
  1392. padding-bottom: 0;
  1393. padding-top: 0!important;
  1394. margin-bottom: 5px;
  1395. min-height: 0px!important;
  1396. color: #ff0000 !important;
  1397. }
  1398. /*
  1399. #chat-content > .message:hover {
  1400. background: rgba(0, 0, 0, 0.03);
  1401. color: #ffffff;
  1402. }
  1403. */
  1404. #chat-content > .message.common {
  1405. margin-bottom: 5px;
  1406. margin-right: 10px;
  1407. padding-bottom: 9px;
  1408. color: #353535 !important;
  1409. background-color: #2a2a2a;
  1410. border: 1px solid;
  1411. border-radius: 20px;
  1412. }
  1413. #chat-content > .message.system {
  1414. box-sizing: border-box;
  1415. background-color: #002f3e;
  1416. cursor: default;
  1417. border: 1px solid cyan;
  1418. color: cyan;
  1419. border-radius:24px;
  1420. padding: 0px 0px;
  1421. }
  1422. }
  1423. #chat-content.tes-notif-off > .message.system {
  1424. display: none;
  1425. }
  1426. #chat-content.tes-notif-off > .message.system.dontHide {
  1427. display: initial;
  1428. }
  1429. #chat-instant > a:first-child,
  1430. #chat-content > .message > a:first-child {
  1431. top: auto;
  1432. }
  1433. #chat-position #input:before {
  1434. background: none;
  1435. }
  1436. #input {
  1437. position: relative;
  1438. display: block;
  1439. padding-top: 10px;
  1440. margin-right: 25px;
  1441. overflow-wrap: break-word;
  1442. }
  1443. #input > textarea{
  1444. overflow-y:auto;
  1445. background-color:#111111;
  1446. border:1px solid #313131;
  1447. color:#ffffff;
  1448. }
  1449. #input:after {
  1450. content: "";
  1451. position: absolute;
  1452. display: block;
  1453. top: 10px;
  1454. left: 0;
  1455. right: 0;
  1456. bottom: 0;
  1457. border: 0px solid #cbcfcf;
  1458. border-radius: 12px;
  1459. box-sizing: border-box;
  1460. pointer-events: none;
  1461. }
  1462. #input > .waiting {
  1463. position: absolute;
  1464. width: auto;
  1465. top: 10px;
  1466. bottom: 0;
  1467. left: 0;
  1468. right: 0;
  1469. border-radius: 12px;
  1470. background-color: #e9eaea;
  1471. z-index: 1;
  1472. opacity: 0;
  1473. visibility: hidden;
  1474. transition: .2s;
  1475. }
  1476. #chat-position {
  1477. position: absolute;
  1478. display: flex;
  1479. flex-direction: column;
  1480. align-items: stretch;
  1481. top: 20px;
  1482. left: 10px;
  1483. right: -20px;
  1484. bottom: 19px;
  1485. }
  1486.  
  1487.  
  1488. #chat-wider {
  1489. position: absolute;
  1490. display: block;
  1491. height: 25px;
  1492. width: 16px;
  1493. top: 94%;
  1494. left: -10px;
  1495. margin-top: 0px;
  1496. border-radius: 16px;
  1497. font-size: 0;
  1498. background-color: transparent;
  1499. border: 1px solid #313131;
  1500. cursor: pointer;
  1501. z-index: 1;
  1502. }
  1503.  
  1504. #chat-instant > a > .avatar,
  1505. #chat-content > .message > a > .avatar {
  1506. width:75%;
  1507. height:100%;
  1508. background-color: #666666;
  1509. /* top: 0; */
  1510. /* left: 5px; */
  1511. /* float: left; */
  1512. border-top-left-radius: 100%;
  1513. border-bottom-left-radius: 100%;
  1514. border-top-right-radius: 0%;
  1515. border-bottom-right-radius: 0%;
  1516.  
  1517. overflow: hidden;
  1518. }
  1519. #abovefiller
  1520. { border-radius: unset;}
  1521. #timestamp {
  1522. font-size: 11px;
  1523. color: #999999;
  1524. float: right;
  1525. position: absolute;
  1526. right: 0;
  1527. padding-top: 3px;
  1528. padding-right: 20px;
  1529. font-weight: 600;
  1530. }
  1531. #chat-content > .message > .nickname {
  1532. overflow: initial;
  1533. line-height: initial;
  1534. position: relative;
  1535. right: 15px;
  1536. color: #000;
  1537.  
  1538. }
  1539. #chat-content div.message.common:last-of-type {
  1540. margin-bottom: 10px;
  1541. margin-right: 10px;
  1542. }
  1543.  
  1544.  
  1545.  
  1546. </style>
  1547. `;
  1548. chatlogCSS.insertAdjacentHTML(insertPosition, chatlogCSShtml);
  1549. }
  1550.  
  1551. if (cssName == "sidemenuCSS" || cssName == null) {
  1552. sidemenuCSShtml = `
  1553. <style id="sidemenuCSS" scope="tinychat-sidemenu">
  1554. #sidemenu {
  1555. min-width: 162px;
  1556. max-width: 162px;
  1557. left: 0px;
  1558. background-color: #191919;
  1559. /* background-image:url('http://i68.tinypic.com/2rp4ncm.png'); */
  1560. background-position: right top;
  1561. background-size: 100%;
  1562. border-right:1px solid #313131;
  1563. z-index:3;
  1564.  
  1565. }
  1566.  
  1567. #sidemenu-content {
  1568. height: 100%;
  1569. padding-top: 5px;
  1570. box-sizing: border-box;
  1571. padding-left: 0px;
  1572. overflow-x: hidden;
  1573. overflow-y: auto;
  1574. background-color: #191919;
  1575. /* background-image:url('http://i68.tinypic.com/2rp4ncm.png'); */
  1576. background-position: right top;
  1577. background-size: 100%;
  1578. border-right:0px solid;
  1579. }
  1580.  
  1581. #user-info {
  1582. position: absolute;
  1583. height: 80px;
  1584. width: 100%;
  1585. bottom: 0;
  1586. left: 0;
  1587. padding: 20px 30px 20px 20px;
  1588. border-top: 1px solid rgba(0, 0, 0, .1);
  1589. box-sizing: border-box;
  1590. background-color: #2a2a2a;
  1591. display: none; visibility:hidden;
  1592.  
  1593. }
  1594. @media screen and (max-width: 1000px) {
  1595. #sidemenu {
  1596. left: -188px;
  1597. }
  1598. }
  1599.  
  1600. #live-directory-wrapper {
  1601. padding: 0;
  1602. }
  1603. #top-buttons-wrapper {
  1604. padding: 0;
  1605. }
  1606. .logged-in #user-info {
  1607. padding: 0;
  1608. height: auto;
  1609. text-align: center;
  1610. visibility: hidden;
  1611. display: none;
  1612. }
  1613. #user-info button { opacity: .8; }
  1614. #user-info:hover button { opacity: 1; }
  1615. .logged-in #user-info > a { display: none; visibility:hidden;}
  1616. @media screen and (min-width: 1000px) {
  1617. #live-directory {
  1618. height: 25px;
  1619. line-height: 25px;
  1620. font-size: 13px;
  1621. opacity: .8;
  1622. margin-left:10px;
  1623. width:175px;
  1624. background-color:#111111;
  1625. border:1px solid #313131;
  1626. }
  1627. #upgrade {
  1628. height: 0px;
  1629. line-height: 0px;
  1630. font-size: 13px;
  1631. opacity: .8;
  1632. }
  1633. #live-directory:before {
  1634. height: 8px;
  1635. width: 8px;
  1636. top: 0px;
  1637. }
  1638. #upgrade {
  1639. margin-top: 0px;
  1640. visibility: hidden;
  1641. display: none;
  1642. }
  1643. #live-directory:hover, #upgrade:hover {
  1644. opacity: 1;
  1645. }
  1646. }
  1647.  
  1648. #sidemenu.tes-sidemenuCollapsed {
  1649. min-width: 1px;
  1650. max-width: 1px;
  1651. }
  1652. .tes-sidemenuCollapsed #user-info { display: none; }
  1653. .tes-sidemenuCollapsed #user-info { display: none; }
  1654. #tes-sidemenu-grabber {
  1655. position: absolute;
  1656. top: 50%;
  1657. right: 0;
  1658. background: #111111;
  1659. color: #536165;
  1660. z-index: 3;
  1661. border-radius: 10px 0 0 10px;
  1662. height: 34px;
  1663. padding-top: 19px;
  1664. width: 16px;
  1665. text-align: center;
  1666. /* background: white;
  1667. border: #dddddd 1px solid;
  1668. border-right: 0;
  1669. */ }
  1670. #tes-sidemenu-grabber:hover {
  1671. background: #434e51;
  1672. color: #67797e;
  1673. cursor: pointer;
  1674. }
  1675. .tes-sidemenuCollapsed #tes-sidemenu-grabber{
  1676. border-radius: 0 10px 10px 0;
  1677. right: -15px;
  1678. }
  1679. </style>
  1680. `;
  1681. sidemenuCSS.insertAdjacentHTML(insertPosition, sidemenuCSShtml);
  1682. }
  1683.  
  1684. if (cssName == "videomoderationCSS" || cssName == null) {
  1685. videomoderationCSShtml = `
  1686. <style id="videomoderationCSS" scope="tc-video-moderation">
  1687. #moderatorlist {
  1688. padding-left: 0;
  1689. }
  1690. #moderatorlist:hover {
  1691. position: absolute;
  1692. background: white;
  1693. z-index: 1000;
  1694. width: 300px;
  1695. min-height: 155px;
  1696. flex-direction: column;
  1697. position: absolute;
  1698. background: rgba(45, 55, 58, 0.8);
  1699. z-index: 1000;
  1700. width: 350px;
  1701. max-height: fit-content!important;
  1702. left: 15px;
  1703. border-radius: 13px;
  1704. border: #47575c 1px solid;
  1705. }
  1706. #moderatorlist:after {
  1707. top: 47px;
  1708. }
  1709. </style>
  1710. `;
  1711. videomoderationCSS.insertAdjacentHTML(insertPosition, videomoderationCSShtml);
  1712. }
  1713.  
  1714. if (cssName == "webappCSS" || cssName == null) {
  1715. webappCSShtml = `
  1716. <style id="webappCSS" scope="tinychat-webrtc-app">
  1717. .input-menu{display:none;}
  1718. #room {
  1719. padding: 0;
  1720. padding-left: 80px;
  1721. }
  1722. #room.tes-sidemenuCollapsed { margin-left: -161px;width: 110%;
  1723. }
  1724. @media screen and (max-width: 1000px) {
  1725. :host > #room {
  1726. padding-left: 82px;
  1727. }
  1728. }
  1729. @media screen and (max-width: 600px) {
  1730. :host > #room {
  1731. padding-left: 0;
  1732. }
  1733. }
  1734.  
  1735. </style>
  1736. `;
  1737. webappCSS.insertAdjacentHTML(insertPosition, webappCSShtml);
  1738. }
  1739. }
  1740.  
  1741. function injectElements() {
  1742. headerGrabberParElem = titleElem.querySelector("#room-header");
  1743. headerGrabberParElem.insertAdjacentHTML("beforeend", `<div id="tes-header-grabber">▲</div>`);
  1744. headerGrabberElem = headerGrabberParElem.querySelector("#tes-header-grabber");
  1745. headerGrabberElem.addEventListener("click", headerGrabber);
  1746.  
  1747. if (1 == 2) {
  1748. selectAllButtonHTML = `<div id="tes-selectAllbutton">I<span>select all</span></div>`;
  1749.  
  1750. selectAllButton = chatlogElem.querySelector("#chat-wrapper").insertAdjacentHTML("afterbegin", selectAllButtonHTML);
  1751. chatlogElem.querySelector("#tes-selectAllbutton").addEventListener("click", copyChatlog);
  1752. }
  1753.  
  1754. if (!isPaidAccount) {
  1755. sidemenuGrabberParElem = sidemenuElem.querySelector("#sidemenu");
  1756. sidemenuGrabberElem = document.createElement("div");
  1757. sidemenuGrabberElem.setAttribute("id", "tes-sidemenu-grabber");
  1758. sidemenuGrabberElem.innerHTML = "◀";
  1759. sidemenuGrabberElem.addEventListener("click", sidemenuGrabber);
  1760. sidemenuGrabberParElem.appendChild(sidemenuGrabberElem);
  1761. sidemenuGrabberElem = sidemenuElem.querySelector("#tes-sidemenu-grabber");
  1762. }
  1763. }
  1764.  
  1765. function sidemenuGrabber() {
  1766. sidemenuGrabberParElem.classList.toggle("tes-sidemenuCollapsed");
  1767. sidemenuGrabberParElem.classList.contains("tes-sidemenuCollapsed") ? sidemenuGrabberElem.innerHTML = "▶" : sidemenuGrabberElem.innerHTML = "◀";
  1768.  
  1769. userlistElem.querySelector("#userlist").classList.toggle("tes-sidemenuCollapsed");
  1770. videolistElem.querySelector("#videolist").classList.toggle("tes-sidemenuCollapsed");
  1771. webappElem.querySelector("#room").classList.toggle("tes-sidemenuCollapsed");
  1772. bodyElem.classList.toggle("tes-sidemenuCollapsed");
  1773. }
  1774.  
  1775. function headerGrabber() {
  1776. headerGrabberParElem.classList.toggle("tes-headerCollapsed");
  1777. headerGrabberParElem.classList.contains("tes-headerCollapsed") ? headerGrabberElem.innerHTML = "▼" : headerGrabberElem.innerHTML = "▲";
  1778. }
  1779.  
  1780.  
  1781.  
  1782. !browserFirefox ? injectElements() : void(0);
  1783.  
  1784. var scrollbox = chatlogElem.querySelector("#chat");
  1785. var unreadbubble = chatlogElem.querySelector("#input-unread");
  1786. var autoScrollStatus = true;
  1787.  
  1788. function updateScroll() {
  1789. scrollbox.scrollTop = scrollbox.scrollHeight;
  1790. scrollbox.scrollTop = scrollbox.scrollTop + 5;
  1791. }
  1792.  
  1793. function userHasScrolled(e) {
  1794. var scrollwheelAmount = e.deltaY;
  1795.  
  1796. if (scrollwheelAmount < 0) {
  1797. autoScrollStatus = false;
  1798. }
  1799. if (autoScrollStatus === false && scrollbox.scrollHeight - scrollbox.scrollTop == scrollbox.offsetHeight) {
  1800. autoScrollStatus = true;
  1801. }
  1802. }
  1803.  
  1804. function newMessageAdded() {
  1805. if (autoScrollStatus === true && settingsQuick["Autoscroll"]) { updateScroll(); }
  1806. timestampAdd();
  1807. messageParser();
  1808. }
  1809.  
  1810. function userContextmenuUpdated() {
  1811. var elemBottom = 0;
  1812. var topPos = userContextmenuCSS.getBoundingClientRect().top;
  1813. var elemBottom = topPos + userContextmenuCSS.offsetHeight;
  1814. if (elemBottom > (window.innerHeight - 82)) {
  1815. // userContextmenuCSS.style.top = (userContextmenuCSS.style.top - userlistElem.querySelector("#userlist").scrollTop - 200) + "px";
  1816. // userContextmenuCSS.style.top = (userlistElem.querySelector("#userlist").scrollTop - window.innerHeight) + "px";
  1817. userContextmenuCSS.style.top = (window.innerHeight - 82 - userContextmenuCSS.offsetHeight - 15) + "px";
  1818. // console.log("Change: " + userContextmenuCSS.style.top);
  1819. }
  1820.  
  1821. // console.log("elemBottom: " + elemBottom + ". Max: " + (window.innerHeight - 82) + ". offsetHeight: " + userContextmenuCSS.offsetHeight + ". New top: " + (window.innerHeight - 82 - userContextmenuCSS.offsetHeight));
  1822. }
  1823. function messageParserCheckCSS() {
  1824. var messages = chatlogElem.querySelectorAll("#chat-content .message")
  1825. for (i=0; i < messages.length; i++) {
  1826. var tcMessageHtmlElem = messages[i].querySelector("tc-message-html").shadowRoot;
  1827. if (!tcMessageHtmlElem.querySelector("#messageCSS")) tcMessageHtmlElem.appendChild(messageParserAddCSS());
  1828. if (settingsQuick["NightMode"]) tcMessageHtmlElem.querySelector("#html").classList.add("tes-nightmode");
  1829. }
  1830. }
  1831. function messageParserAddCSS(elem=null) {
  1832. var node = document.createElement("style");
  1833. var textnode = document.createTextNode(messageCSS);
  1834. node.appendChild(textnode);
  1835. node.setAttribute("id", "messageCSS");
  1836.  
  1837. if (elem) { elem.appendChild(node); }
  1838. else { return node; }
  1839.  
  1840. }
  1841. messageCount = 0;
  1842. function messageParser() {
  1843.  
  1844. latestMessageElem = chatlogElem.querySelector("#chat-content div.message:last-of-type");
  1845.  
  1846. var typeSystem = false;
  1847.  
  1848. if (latestMessageElem != null) {
  1849. if (latestMessageElem.classList.contains("system")) typeSystem = true;
  1850. latestMessageElem.setAttribute("id", "msg-"+messageCount);
  1851. messageCount++;
  1852.  
  1853. tcMessageHtmlElem = latestMessageElem.querySelector("tc-message-html").shadowRoot;
  1854. latestMessageContentElem = tcMessageHtmlElem.querySelector("#html");
  1855.  
  1856. if (!browserFirefox) {
  1857. if (!tcMessageHtmlElem.querySelector("#messageCSS")) {
  1858. messageParserAddCSS(tcMessageHtmlElem);
  1859. }
  1860. if (settingsQuick["NightMode"]) latestMessageContentElem.classList.add("tes-nightmode");
  1861. }
  1862.  
  1863.  
  1864. latestMessageContent = latestMessageContentElem.innerHTML;
  1865.  
  1866. latestMessageContent.includes(" banned ") || latestMessageContent.includes(" kicked ") ? latestMessageElem.classList.add("dontHide") : void(0);
  1867.  
  1868. if (!browserFirefox && settingsQuick["MentionsMonitor"]) {
  1869. for (i=0; i < settingMentions.length; i++) {
  1870. if (latestMessageContent.toLowerCase().includes(settingMentions[i].toLowerCase())) {
  1871. latestMessageContentElem.classList.add("tes-mention-message");
  1872. audioPop.play();
  1873. break;
  1874. }
  1875. }
  1876. }
  1877. }
  1878. }
  1879.  
  1880.  
  1881.  
  1882. var x = new MutationObserver(function (e) {
  1883. if (e[0].addedNodes) newMessageAdded();
  1884. });
  1885. x.observe(chatlogElem.querySelector("#chat-content"), { childList: true });
  1886.  
  1887.  
  1888. var x = new MutationObserver(function (e) {
  1889. if (e[0].addedNodes) newCamAdded();
  1890. });
  1891. x.observe(videolistElem.querySelector(".videos-items:last-child"), { childList: true });
  1892.  
  1893. var x = new MutationObserver(function (e) {
  1894. if (e[0].addedNodes) userContextmenuUpdated();
  1895. });
  1896. x.observe(userContextmenuCSS, { attributes: true });
  1897.  
  1898.  
  1899. // var x = new MutationObserver(function (e) {
  1900. // if (e[0].addedNodes) newUserAdded();
  1901. // });
  1902. // x.observe(userlistElem.querySelector("#userlist"), { childList: true });
  1903.  
  1904.  
  1905. // function newUserAdded() {
  1906. // var latestUser = userlistElem.querySelector("#userlist .list-item:last-of-type");
  1907. // latestUser.querySelector(".nickname").innerHTML
  1908.  
  1909. var scrollboxEvent = scrollbox.addEventListener("wheel", userHasScrolled);
  1910. var unreadbubble = unreadbubble.addEventListener("click", function(){autoScrollStatus = true;} );
  1911.  
  1912. function timestampAdd() {
  1913. var queryString = "#chat-content div.message.common:last-of-type .nickname";
  1914.  
  1915. var SHOW_SECONDS = true;
  1916.  
  1917. var date = new Date();
  1918. var hours = date.getHours();
  1919. var minutes = date.getMinutes().toString();
  1920. var secs = date.getSeconds().toString();
  1921.  
  1922. if (hours > 11) {
  1923. hours = (hours % 12 || 12);
  1924. var period = "pm";
  1925. }
  1926. else { var period = "am"; }
  1927.  
  1928. if (hours == "0") { hours = "12"; }
  1929. if (minutes == "0") { minutes = "00"; }
  1930. if (minutes.length == 1) { minutes = "0" + minutes; }
  1931. if (secs.length == 1) { secs = "0" + secs; }
  1932.  
  1933. if (SHOW_SECONDS == true) {
  1934. var timestamp = hours + ":" + minutes + ":" + secs + "" + period;
  1935. }
  1936. else {
  1937. var timestamp = hours + ":" + minutes + period;
  1938. }
  1939.  
  1940. if (chatlogElem.querySelector(queryString) != null) {
  1941. var recentMsgNickname = chatlogElem.querySelector(queryString);
  1942. recentMsgNickname.insertAdjacentHTML("afterend", "<span id='timestamp'> " + timestamp + "</span>");
  1943. }
  1944. }
  1945.  
  1946. camsMaxed = null;
  1947. function newCamAdded() {
  1948. var queryString = ".videos-items:last-child > .js-video";
  1949. if (videolistElem.querySelector(queryString)) var camElems = videolistElem.querySelectorAll(queryString);
  1950. else return;
  1951.  
  1952. camsCount = 0;
  1953.  
  1954. for (i=0; i < camElems.length; i++) {
  1955. camsCount = i + 1;
  1956. var camItem = camElems[i].querySelector("tc-video-item").shadowRoot;
  1957. var camItemCSS = camItem.querySelector(".video");
  1958. if (settingsQuick["NightMode"]) camItemCSS.classList.add("tes-nightmode");
  1959. else camItemCSS.classList.remove("tes-nightmode");
  1960.  
  1961. camItemCSShtml = `
  1962. <style id="camItemCSS">
  1963. .icon-resize > svg {
  1964. top: 3px;
  1965. left: 3px;
  1966. display: none;
  1967. }
  1968. .icon-tes-max {
  1969. position: absolute;
  1970. top: -40%;
  1971. right: 0;
  1972. z-index: 9;
  1973. background: none;
  1974. border: 0;
  1975. }
  1976. .icon-tes-max:hover { cursor: pointer; }
  1977. .icon-tes-max path { fill: #04caff; }
  1978.  
  1979. .video:hover .icon-tes-max {
  1980. top: 13px;
  1981. left: 48%;
  1982. transition: top .2s ease .2s,
  1983. left .2s ease .2s,
  1984. right .2s ease .2s,
  1985. opacity .2s;
  1986. }
  1987.  
  1988. .tes-nightmode.video:after { border:0px; }
  1989. </style>
  1990. `;
  1991. if (!camItem.querySelector("#camItemCSS")) camItemCSS.insertAdjacentHTML("afterbegin", camItemCSShtml);
  1992.  
  1993. var camName = camItem.querySelector(".nickname").getAttribute("title");
  1994. camElems[i].setAttribute("id", "camUser-"+camName);
  1995.  
  1996. // Cam maxing
  1997. try {
  1998. if (camItem.querySelector(".icon-tes-max")) {
  1999. var maxbutton = camItem.querySelector(".icon-tes-max");
  2000. maxbutton.parentNode.removeChild(maxbutton);
  2001. }
  2002.  
  2003. var camMaxButtonHtml = `
  2004. <button class="icon-tes-max" id="maxbutton-` + camName + `">
  2005. <svg width="18" height="18" viewBox="0 0 18 18" xmlns="http://www.w3.org/2000/svg">
  2006. <path d="M14.37 12.95l3.335 3.336a1.003 1.003 0 1 1-1.42 1.42L12.95 14.37a8.028 8.028 0 1 1 1.42-1.42zm-6.342 1.1a6.02 6.02 0 1 0 0-12.042 6.02 6.02 0 0 0 0 12.042zM6.012 9.032a.996.996 0 0 1-.994-1.004c0-.554.452-1.003.994-1.003h4.033c.55 0 .994.445.994 1.003 0 .555-.454 1.004-.995 1.004H6.012z" fill-rule="evenodd"></path>
  2007. <path d="M0 .99C0 .445.444 0 1 0a1 1 0 0 1 1 .99v4.02C2 5.555 1.556 6 1 6a1 1 0 0 1-1-.99V.99z" transform="translate(7 5)" fill-rule="evenodd"></path></svg>
  2008. </button>`;
  2009. camItem.querySelector(".icon-resize").insertAdjacentHTML("beforebegin", camMaxButtonHtml);
  2010.  
  2011. var maxCamVar = function(maxCamVarArg){ maximizeCam(maxCamVarArg); };
  2012. camItem.querySelector("#maxbutton-"+camName).addEventListener("click", maxCamVar.bind(this, camName));
  2013.  
  2014. if (camsMaxed == camName) {
  2015. camElems[i].classList.add("tes-maxedCam");
  2016. camElems[i].parentElement.classList.add("tes-max");
  2017. }
  2018. if (!videolistElem.querySelector(".tes-maxedCam")) camElems[i].parentElement.classList.remove("tes-max");
  2019.  
  2020. camMaxCSShtml = `
  2021. <style id="camMaxCSS">
  2022. .tes-max .js-video { width: 15%!important; }
  2023. .tes-max.tes-camCount2 .js-video { width: 30%!important; }
  2024. .tes-max.tes-camCount10-11 .js-video { width: 14%!important; }
  2025. .tes-max.tes-camCount12 .js-video { width: 12%!important; }
  2026.  
  2027. :not(.hidden) + .tes-max.tes-camCount12 .js-video,
  2028. :not(.hidden) + .tes-max.tes-camCount10-11 .js-video,
  2029. :not(.hidden) + .tes-max .js-video
  2030. { width: 30%!important; }
  2031. :not(.hidden) + .tes-max.tes-camCount2 .js-video { width: 60%!important; }
  2032.  
  2033. .tes-max .js-video.tes-maxedCam,
  2034. :not(.hidden) + .tes-max .js-video.tes-maxedCam { width: 70%!important; }
  2035. </style>
  2036. `;
  2037. if (videolistCSS.querySelector("#camMaxCSS")) {
  2038. var maxcss = videolistCSS.querySelector("#camMaxCSS");
  2039. maxcss.parentNode.removeChild(maxcss);
  2040. }
  2041. videolistCSS.insertAdjacentHTML("beforeend", camMaxCSShtml);
  2042.  
  2043. }
  2044. catch(e) { console.log("TES ERROR newCamAdded: " + e.message); }
  2045.  
  2046. if (settingsQuick["HideAllCams"] == "true" || urlPars.get("hideallcams") == "") {
  2047. camItem.querySelector("button.icon-visibility").click();
  2048. console.log("Cam hide: " + camName);
  2049. }
  2050.  
  2051. camCounter(camElems[i]);
  2052. }
  2053.  
  2054. // console.log("camsCount: " + camsCount);
  2055. }
  2056.  
  2057. function maximizeCam(camName) {
  2058. try {
  2059. if (camName != camsMaxed && camsMaxed != null) {
  2060. maximizeCam(camsMaxed);
  2061. maximizeCam(camName);
  2062. return;
  2063. }
  2064.  
  2065. var camElem = videolistElem.querySelector("#camUser-" + camName);
  2066. if (camElem == null) {
  2067. camsMaxed = null;
  2068. return;
  2069. }
  2070.  
  2071. if (camElem.classList.contains("tes-maxedCam")) {
  2072. camElem.classList.remove("tes-maxedCam");
  2073. camElem.parentElement.classList.remove("tes-max");
  2074. camsMaxed = null;
  2075. }
  2076. else {
  2077. camElem.classList.add("tes-maxedCam");
  2078. camElem.parentElement.classList.add("tes-max");
  2079. camsMaxed = camName;
  2080. }
  2081. camCounter(camElem);
  2082. }
  2083. catch(e) { console.log("TES ERROR maximizeCam: " + e.message); }
  2084. }
  2085.  
  2086. function camCounter(camElem) {
  2087. if (camsCount == 12) {
  2088. camElem.parentElement.classList.remove("tes-camCount10-11");
  2089. camElem.parentElement.classList.remove("tes-camCount2");
  2090.  
  2091. camElem.parentElement.classList.add("tes-camCount12");
  2092. }
  2093. else if (camsCount > 9 && camsCount < 12) {
  2094. camElem.parentElement.classList.remove("tes-camCount12");
  2095. camElem.parentElement.classList.remove("tes-camCount2");
  2096.  
  2097. camElem.parentElement.classList.add("tes-camCount10-11");
  2098. }
  2099. else if (camsCount == 2) {
  2100. camElem.parentElement.classList.remove("tes-camCount12");
  2101. camElem.parentElement.classList.remove("tes-camCount10-11");
  2102.  
  2103. camElem.parentElement.classList.add("tes-camCount2");
  2104. }
  2105. else {
  2106. camElem.parentElement.classList.remove("tes-camCount12");
  2107. camElem.parentElement.classList.remove("tes-camCount10-11");
  2108. camElem.parentElement.classList.remove("tes-camCount2");
  2109. }
  2110. }
  2111.  
  2112. // Userscript ends here //
  2113. })();
  2114. }
  2115. else { console.log("Waiting for init..."); }
  2116. }
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!