☰

VoiceLinks

Makes RJ codes more useful.(8-bit RJCode supported.)

Verze ze dne 16. 03. 2024. Zobrazit nejnovější verzi.

  1. // ==UserScript==
  2. // @name        VoiceLinks
  3. // @namespace   Sanya
  4. // @description Makes RJ codes more useful.(8-bit RJCode supported.)
  5. // @include     *://*/*
  6. // @version     2.1.7
  7. // @grant       GM.xmlHttpRequest
  8. // @grant       GM_xmlhttpRequest
  9. // @run-at      document-start
  10. // ==/UserScript==
  11.  
  12. (function () {
  13.     'use strict';
  14.     const RJ_REGEX = new RegExp("(R[JE][0-9]{8})|(R[JE][0-9]{6})", "gi");
  15.     const RJ_REGEX_NEW = new RegExp("R[JE][0-9]{8}", "gi");
  16.     const VOICELINK_CLASS = 'voicelink';
  17.     const RJCODE_ATTRIBUTE = 'rjcode';
  18.     const css = `
  19.       .voicepopup {
  20.           min-width: 600px !important;
  21.           z-index: 50000 !important;
  22.           max-width: 80% !important;
  23.           position: fixed !important;
  24.           line-height: 1.4em;
  25.           font-size:1.1em!important;
  26.           margin-bottom: 10px;
  27.           box-shadow: 0 0 .125em 0 rgba(0,0,0,.5);
  28.           border-radius: 0.5em;
  29.           background-color:#8080C0;
  30.           color:#F6F6F6;
  31.           text-align: left;
  32.           padding: 10px;
  33.       }
  34.  
  35.       .voicepopup img {
  36.           width: 270px;
  37.           height: auto;
  38.           margin: 3px 15px 3px 3px;
  39.           max-width: fit-content;
  40.       }
  41.       
  42.       .voicepopup a {
  43.           text-decoration: none;
  44.           color: pink;
  45.       }
  46.       
  47.       .voicepopup .age-18{
  48.           color: hsl(300deg 76% 77%);
  49.       }
  50.       
  51.       .voicepopup .age-all{
  52.           color: hsl(157deg 82% 52%);
  53.       }
  54.  
  55.       .voice-title {
  56.           font-size: 1.4em;
  57.           font-weight: bold;
  58.           text-align: center;
  59.           margin: 5px 10px 0 0;
  60.           display: block;
  61.       }
  62.  
  63.       .rjcode {
  64.           text-align: center;
  65.           font-size: 1.2em;
  66.           font-style: italic;
  67.           opacity: 0.3;
  68.       }
  69.  
  70.       .error {
  71.           height: 210px;
  72.           line-height: 210px;
  73.           text-align: center;
  74.       }
  75.  
  76.       .discord-dark {
  77.           background-color: #36393f;
  78.           color: #dcddde;
  79.           font-size: 0.9375rem;
  80.       }
  81.   `
  82.  
  83.     function getAdditionalPopupClasses() {
  84.         const hostname = document.location.hostname;
  85.         switch (hostname) {
  86.             case "boards.4chan.org": return "post reply";
  87.             case "discordapp.com": return "discord-dark";
  88.             default: return null;
  89.         }
  90.     }
  91.  
  92.     function getXmlHttpRequest() {
  93.         return (typeof GM !== "undefined" && GM !== null ? GM.xmlHttpRequest : GM_xmlhttpRequest);
  94.     }
  95.  
  96.     const Parser = {
  97.         walkNodes: function (elem) {
  98.             const rjNodeTreeWalker = document.createTreeWalker(
  99.                 elem,
  100.                 NodeFilter.SHOW_TEXT,
  101.                 {
  102.                     acceptNode: function (node) {
  103.                         if (node.parentElement.classList.contains(VOICELINK_CLASS))
  104.                             return NodeFilter.FILTER_ACCEPT;
  105.                         if (node.nodeValue.match(RJ_REGEX_NEW))
  106.                             return NodeFilter.FILTER_ACCEPT;
  107.                         if (node.nodeValue.match(RJ_REGEX))
  108.                             return NodeFilter.FILTER_ACCEPT;
  109.                     }
  110.                 },
  111.                 false,
  112.             );
  113.             while (rjNodeTreeWalker.nextNode()) {
  114.                 const node = rjNodeTreeWalker.currentNode;
  115.                 if (node.parentElement.classList.contains(VOICELINK_CLASS))
  116.                     Parser.rebindEvents(node.parentElement);
  117.                 else
  118.                     Parser.linkify(node);
  119.             }
  120.         },
  121.  
  122.         wrapRJCode: function (rjCode) {
  123.             let e;
  124.             e = document.createElement("a");
  125.             e.classList = VOICELINK_CLASS;
  126.             e.href = `https://www.dlsite.com/maniax/work/=/product_id/${rjCode.toUpperCase()}.html`
  127.             e.innerHTML = rjCode;
  128.             e.target = "_blank";
  129.             e.rel = "noreferrer";
  130.             e.setAttribute(RJCODE_ATTRIBUTE, rjCode.toUpperCase());
  131.             e.addEventListener("mouseover", Popup.over);
  132.             e.addEventListener("mouseout", Popup.out);
  133.             e.addEventListener("mousemove", Popup.move);
  134.             return e;
  135.         },
  136.  
  137.         linkify: function (textNode) {
  138.             const nodeOriginalText = textNode.nodeValue;
  139.             const matches = [];
  140.  
  141.             let match;
  142.             while (match = RJ_REGEX.exec(nodeOriginalText)) {
  143.                 matches.push({
  144.                     index: match.index,
  145.                     value: match[0],
  146.                 });
  147.             }
  148.  
  149.             // Keep text in text node until first RJ code
  150.             textNode.nodeValue = nodeOriginalText.substring(0, matches[0].index);
  151.  
  152.             // Insert rest of text while linkifying RJ codes
  153.             let prevNode = null;
  154.             for (let i = 0; i < matches.length; ++i) {
  155.                 // Insert linkified RJ code
  156.                 let code = matches[i].value
  157.                 const rjLinkNode = Parser.wrapRJCode(code);
  158.                 textNode.parentNode.insertBefore(
  159.                     rjLinkNode,
  160.                     prevNode ? prevNode.nextSibling : textNode.nextSibling,
  161.                 );
  162.  
  163.                 // Insert text after if there is any
  164.                 let upper;
  165.                 if (i === matches.length - 1)
  166.                     upper = undefined;
  167.                 else
  168.                     upper = matches[i + 1].index;
  169.                 let substring;
  170.                 if (substring = nodeOriginalText.substring(matches[i].index + matches[i].value.length, upper)) {
  171.                     const subtextNode = document.createTextNode(substring);
  172.                     textNode.parentNode.insertBefore(
  173.                         subtextNode,
  174.                         rjLinkNode.nextElementSibling,
  175.                     );
  176.                     prevNode = subtextNode;
  177.                 }
  178.                 else {
  179.                     prevNode = rjLinkNode;
  180.                 }
  181.             }
  182.         },
  183.  
  184.         rebindEvents: function (elem) {
  185.             if (elem.nodeName === "A") {
  186.                 elem.addEventListener("mouseover", Popup.over);
  187.                 elem.addEventListener("mouseout", Popup.out);
  188.                 elem.addEventListener("mousemove", Popup.move);
  189.             }
  190.             else {
  191.                 const voicelinks = elem.querySelectorAll("." + VOICELINK_CLASS);
  192.                 for (var i = 0, ii = voicelinks.length; i < ii; i++) {
  193.                     const voicelink = voicelinks[i];
  194.                     voicelink.addEventListener("mouseover", Popup.over);
  195.                     voicelink.addEventListener("mouseout", Popup.out);
  196.                     voicelink.addEventListener("mousemove", Popup.move);
  197.                 }
  198.             }
  199.         },
  200.  
  201.     }
  202.  
  203.     const Popup = {
  204.         makePopup: function (e, rjCode) {
  205.             const popup = document.createElement("div");
  206.             popup.className = "voicepopup " + (getAdditionalPopupClasses() || '');
  207.             popup.id = "voice-" + rjCode;
  208.             popup.style = "display: flex";
  209.             document.body.appendChild(popup);
  210.             DLsite.request(rjCode, function (workInfo) {
  211.                 if (workInfo === null)
  212.                     popup.innerHTML = "<div class='error'>Work not found.</span>";
  213.                 else {
  214.                     const imgContainer = document.createElement("div")
  215.                     const img = document.createElement("img");
  216.                     img.src = workInfo.img;
  217.                     imgContainer.appendChild(img);
  218.  
  219.                     let html = `
  220.                       <div>
  221.                           <div class='voice-title'>${workInfo.title}</div>
  222.                           <div class='rjcode'>[${workInfo.rj}]</div>
  223.                           <br />
  224.                           Circle: <a>${workInfo.circle}</a>
  225.                           <br />
  226.                   `;
  227.                     if (workInfo.date)
  228.                         html += `Release: <a>${workInfo.date}</a> <br />`;
  229.                     else if (workInfo.dateAnnounce)
  230.                         html += `Scheduled Release: <a>${workInfo.dateAnnounce}</a> <br />`;
  231.  
  232.                     if (workInfo.update)
  233.                         html += `Update: <a>${workInfo.update}</a> <br />`;
  234.  
  235.                     let ratingClass = "age-all";
  236.                     if(workInfo.rating.includes("18")){
  237.                         ratingClass = "age-18";
  238.                     }
  239.                     html += `Age rating: <a class="${ratingClass}">${workInfo.rating}</a><br />`
  240.  
  241.                     if (workInfo.cv)
  242.                         html += `CV: <a>${workInfo.cv}</a> <br />`;
  243.  
  244.                     if (workInfo.tags){
  245.                         html += `Tags: <a>`
  246.                         workInfo.tags.forEach(tag => {
  247.                             html += tag + "\u3000";
  248.                         });
  249.                         html += "</a><br />";
  250.                     }
  251.  
  252.                     if (workInfo.filesize)
  253.                         html += `File size: ${workInfo.filesize}<br />`;
  254.  
  255.                     html += "</div>"
  256.                     popup.innerHTML = html;
  257.  
  258.                     popup.insertBefore(imgContainer, popup.childNodes[0]);
  259.                 }
  260.  
  261.                 Popup.move(e);
  262.             });
  263.         },
  264.  
  265.         over: function (e) {
  266.             const rjCode = e.target.getAttribute(RJCODE_ATTRIBUTE);
  267.             const popup = document.querySelector("div#voice-" + rjCode);
  268.             if (popup) {
  269.                 const style = popup.getAttribute("style").replace("none", "flex");
  270.                 popup.setAttribute("style", style);
  271.             }
  272.             else {
  273.                 Popup.makePopup(e, rjCode);
  274.             }
  275.         },
  276.  
  277.         out: function (e) {
  278.             const rjCode = e.target.getAttribute("rjcode");
  279.             const popup = document.querySelector("div#voice-" + rjCode);
  280.             if (popup) {
  281.  
  282.                 const style = popup.getAttribute("style").replace("flex", "none");;
  283.                 popup.setAttribute("style", style);
  284.             }
  285.         },
  286.  
  287.         move: function (e) {
  288.             const rjCode = e.target.getAttribute("rjcode");
  289.             const popup = document.querySelector("div#voice-" + rjCode);
  290.             if (popup) {
  291.                 if (popup.offsetWidth + e.clientX + 10 < window.innerWidth - 10) {
  292.                     popup.style.left = (e.clientX + 10) + "px";
  293.                 }
  294.                 else {
  295.                     popup.style.left = (window.innerWidth - popup.offsetWidth - 10) + "px";
  296.                 }
  297.  
  298.                 if (popup.offsetHeight + e.clientY + 50 > window.innerHeight) {
  299.                     popup.style.top = (e.clientY - popup.offsetHeight - 8) + "px";
  300.                 }
  301.                 else {
  302.                     popup.style.top = (e.clientY + 20) + "px";
  303.                 }
  304.             }
  305.         },
  306.     }
  307.  
  308.     const DLsite = {
  309.         parseWorkDOM: function (dom, rj) {
  310.             // workInfo: {
  311.             //     rj: any;
  312.             //     img: string;
  313.             //     title: any;
  314.             //     circle: any;
  315.             //     date: any;
  316.             //     rating: any;
  317.             //     tags: any[];
  318.             //     cv: any;
  319.             //     filesize: any;
  320.             //     dateAnnounce: any;
  321.             // }
  322.             const workInfo = {};
  323.             workInfo.rj = rj;
  324.  
  325.             let rj_group;
  326.             if (rj.slice((rj.length === 10 ? 7 : 5)) === "000")
  327.                 rj_group = rj;
  328.             else {
  329.                 rj_group = (parseInt(rj.slice(2, (rj.length === 10 ? 7 : 5))) + 1).toString() + "000";
  330.                 if(rj_group.length < rj.length - 2){
  331.                     let zero = Math.pow(10, rj.length - rj_group.length - 2).toString().slice(1)
  332.                     rj_group = zero + rj_group
  333.                 }
  334.                 rj_group = "RJ" + rj_group; //("000000" + rj_group).substring(rj_group.length);
  335.             }
  336.  
  337.             workInfo.img = "https://img.dlsite.jp/modpub/images2/work/doujin/" + rj_group + "/" + rj + "_img_main.jpg";
  338.  
  339.             let metaList = dom.getElementsByTagName("meta")
  340.             for (let i = 0; i < metaList.length; i++){
  341.                 let meta = metaList[i];
  342.                 if(meta.getAttribute("property") === 'og:image'){
  343.                     workInfo.img = meta.content;
  344.                     break;
  345.                 }
  346.             }
  347.  
  348.             workInfo.title = dom.getElementById("work_name").innerText;
  349.             workInfo.circle = dom.querySelector("span.maker_name").innerText;
  350.  
  351.             const table_outline = dom.querySelector("table#work_outline");
  352.             for (var i = 0, ii = table_outline.rows.length; i < ii; i++) {
  353.                 const row = table_outline.rows[i];
  354.                 const row_header = row.cells[0].innerText;
  355.                 const row_data = row.cells[1];
  356.                 switch (true) {
  357.                     case (row_header.includes("販売日")||row_header.includes("贩卖日")||row_header.includes("Release date")||row_header.includes("販賣日")||row_header.includes("판매일")):
  358.                         workInfo.date = row_data.innerText;
  359.                         break;
  360.                     case (row_header.includes("更新情報")||row_header.includes("更新信息")||row_header.includes("Update information")||row_header.includes("更新資訊")||row_header.includes("갱신 정보")):
  361.                         workInfo.update = row_data.firstChild.data;
  362.                         break;
  363.                     case (row_header.includes("年齢指定")||row_header.includes("年龄指定")||row_header.includes("Age")||row_header.includes("年齡指定")||row_header.includes("연령 지정")):
  364.                         workInfo.rating = row_data.innerText;
  365.                         break;
  366.                     case (row_header.includes("ジャンル")||row_header.includes("分类")||row_header.includes("Genre")||row_header.includes("分類")||row_header.includes("장르")):
  367.                         const tag_nodes = row_data.querySelectorAll("a");
  368.                         workInfo.tags = [...tag_nodes].map(a => { return a.innerText });
  369.                         break;
  370.                     case (row_header.includes("声優")||row_header.includes("声优")||row_header.includes("Voice Actor")||row_header.includes("聲優")||row_header.includes("성우")):
  371.                         workInfo.cv = row_data.innerText;
  372.                         break;
  373.                     case (row_header.includes("ファイル容量")||row_header.includes("文件容量")||row_header.includes("File size")||row_header.includes("檔案容量")||row_header.includes("파일 용량")):
  374.                         workInfo.filesize = row_data.innerText.replace("総計", "").trim();
  375.                         break;
  376.                     default:
  377.                         break;
  378.                 }
  379.             }
  380.  
  381.             const work_date_ana = dom.querySelector("strong.work_date_ana");
  382.             if (work_date_ana) {
  383.                 workInfo.dateAnnounce = work_date_ana.innerText;
  384.                 workInfo.img = "https://img.dlsite.jp/modpub/images2/ana/doujin/" + rj_group + "/" + rj + "_ana_img_main.jpg"
  385.             }
  386.  
  387.             return workInfo;
  388.         },
  389.  
  390.         request: function (rjCode, callback) {
  391.             const url = `https://www.dlsite.com/maniax/work/=/product_id/${rjCode}.html`;
  392.             getXmlHttpRequest()({
  393.                 method: "GET",
  394.                 url,
  395.                 headers: {
  396.                     "Accept": "text/xml",
  397.                     "User-Agent": "Mozilla/5.0 (Windows NT 6.1; Win64; x64; rv:67.0)"
  398.                 },
  399.                 onload: function (resp) {
  400.                     if (resp.readyState === 4 && resp.status === 200) {
  401.                         const dom = new DOMParser().parseFromString(resp.responseText, "text/html");
  402.                         const workInfo = DLsite.parseWorkDOM(dom, rjCode);
  403.                         callback(workInfo);
  404.                     }
  405.                     else if (resp.readyState === 4 && resp.status === 404)
  406.                         DLsite.requestAnnounce(rjCode, callback);
  407.                 },
  408.             });
  409.         },
  410.  
  411.         requestAnnounce: function (rjCode, callback) {
  412.             const url = `https://www.dlsite.com/maniax/announce/=/product_id/${rjCode}.html`;
  413.             getXmlHttpRequest()({
  414.                 method: "GET",
  415.                 url,
  416.                 headers: {
  417.                     "Accept": "text/xml",
  418.                     "User-Agent": "Mozilla/5.0 (Windows NT 6.1; Win64; x64; rv:67.0)"
  419.                 },
  420.                 onload: function (resp) {
  421.                     if (resp.readyState === 4 && resp.status === 200) {
  422.                         const dom = new DOMParser().parseFromString(resp.responseText, "text/html");
  423.                         const workInfo = DLsite.parseWorkDOM(dom, rjCode);
  424.                         callback(workInfo);
  425.                     }
  426.                     else if (resp.readyState === 4 && resp.status === 404)
  427.                         callback(null);
  428.                 },
  429.             });
  430.         },
  431.     }
  432.  
  433.  
  434.     document.addEventListener("DOMContentLoaded", function () {
  435.         const style = document.createElement("style");
  436.         style.innerHTML = css;
  437.         document.head.appendChild(style);
  438.  
  439.         Parser.walkNodes(document.body);
  440.  
  441.         const observer = new MutationObserver(function (m) {
  442.             for (let i = 0; i < m.length; ++i) {
  443.                 let addedNodes = m[i].addedNodes;
  444.  
  445.                 for (let j = 0; j < addedNodes.length; ++j) {
  446.                     Parser.walkNodes(addedNodes[j]);
  447.                 }
  448.             }
  449.         });
  450.  
  451.         document.addEventListener("securitypolicyviolation", function (e) {
  452.             if (e.blockedURI.includes("img.dlsite.jp")) {
  453.                 const img = document.querySelector(`img[src="${e.blockedURI}"]`);
  454.                 img.remove();
  455.             }
  456.         });
  457.  
  458.         observer.observe(document.body, { childList: true, subtree: true })
  459.     });
  460. })();