pIcartoRC

Add an IRC chat to picarto channels

当前为 2020-07-15 提交的版本,查看 最新版本

  1. // ==UserScript==
  2. // @name pIcartoRC
  3. // @namespace https://wolvan.at/
  4. // @version 1.1.1
  5. // @description Add an IRC chat to picarto channels
  6. // @author Wolvan
  7. // @match https://picarto.tv/*
  8. // @grant none
  9. // ==/UserScript==
  10.  
  11. (function() {
  12. 'use strict';
  13.  
  14. function createElementFromHTML(htmlString) {
  15. var div = document.createElement('div');
  16. div.innerHTML = htmlString.trim();
  17.  
  18. // Change this to div.childNodes to support multiple top-level nodes
  19. return div.firstChild;
  20. }
  21.  
  22. const ircBtnStr = `
  23. <div class="headingBtns ml-1" data-marker-type="irc" title="IRC" data-i18n="[title]chat.titles.irc" data-original-title="IRC">
  24. <i class="fas fa-fw fa-hashtag headerTabBtn clickThru" id="irc-fa">
  25. <div class="marker" id="markerIRC" style="display: none;"></div>
  26. </i>
  27. </div>
  28. `;
  29.  
  30. const ircChatEmbbedStr = `
  31. <div class="scrollwrapperirc bg-dark functionsMenu ps ps--theme_default" id="irc-chat" data-perfectbar="" style="display: none;width:100%;height:100%;z-index:100">
  32. <iframe src="https://kiwiirc.com/client/irc.rizon.net/?&theme=cli#picartorc_%%CHANNEL" style="border:0; width:100%; height:100%;"></iframe>
  33. </div>
  34. `
  35.  
  36. if (!document.querySelector("#irc-fa")) {
  37. const channelName = window.location.href.match(/picarto.tv\/([a-zA-Z0-9]*)\/?/)[1];
  38. const ircChat = createElementFromHTML(ircChatEmbbedStr.replace(/%%CHANNEL/g, channelName.toLowerCase()));
  39. document.querySelector("#mainContainer").append(ircChat);
  40.  
  41. const ircBtn = createElementFromHTML(ircBtnStr);
  42. const headerBar = document.querySelector("#chatHeader > span.ml-auto.d-flex");
  43. headerBar.append(ircBtn);
  44. for (let el of headerBar.querySelectorAll(".headingBtns")) {
  45. el.addEventListener("click", function (e) {
  46. if (e.target === ircBtn) {
  47. ircBtn.querySelector(".marker").style.display = "block";
  48. ircChat.style.display = "block";
  49. } else {
  50. ircBtn.querySelector(".marker").style.display = "none";
  51. ircChat.style.display = "none";
  52. }
  53. });
  54. }
  55. }
  56. })();