From e54015618b4bc78899e29569ad08575bb7ff34dd Mon Sep 17 00:00:00 2001 From: jesus2099 Date: Tue, 1 Aug 2023 01:52:52 +0200 Subject: [PATCH] Same lame react hydrate workaround (delay) #596 #773 --- mb_FUNKEY-ILLUSTRATED-RECORDS.user.js | 166 +++++++++++++------------- mb_INLINE-STUFF.user.js | 119 +++++++++--------- 2 files changed, 146 insertions(+), 139 deletions(-) diff --git a/mb_FUNKEY-ILLUSTRATED-RECORDS.user.js b/mb_FUNKEY-ILLUSTRATED-RECORDS.user.js index f0bdbb74..54806e13 100644 --- a/mb_FUNKEY-ILLUSTRATED-RECORDS.user.js +++ b/mb_FUNKEY-ILLUSTRATED-RECORDS.user.js @@ -1,6 +1,6 @@ // ==UserScript== // @name mb. FUNKEY ILLUSTRATED RECORDS -// @version 2023.4.20 +// @version 2023.8.1 // @description musicbrainz.org: CAA front cover art archive pictures/images (release groups and releases) Big illustrated discography and/or inline everywhere possible without cluttering the pages // @namespace https://github.com/jesus2099/konami-command // @supportURL https://github.com/jesus2099/konami-command/labels/mb_FUNKEY-ILLUSTRATED-RECORDS @@ -23,7 +23,7 @@ // @exclude *.org/*/*/edit // @exclude *.org/*/*/edit?* // @exclude *.org/cdtoc/remove* -// @run-at document-end +// @run-at document-idle // ==/UserScript== "use strict"; @@ -59,93 +59,97 @@ if (caaIcons.length > 0) { loadCaaIcon(caaIcons[ci]); } } -var imgurls = []; -for (var t = 0; t < types.length; t++) { - // TODO: rglink smallpic is often broken by React, though - var as = document.querySelectorAll("tr > td a[href^='/" + types[t] + "/']:not([href$='/cover-art']), div#page.fullwidth ul:not(.tabs) > li a[href^='/" + types[t] + "/']:not([href$='/cover-art']), tr > td > span[class^='rglink'] + a[href^='/" + types[t] + "/']:not([href$='/cover-art'])"); - var istable, istablechecked, artistcol; - for (var a = 0; a < as.length; a++) { - var imgurl = as[a].getAttribute("href").match(new RegExp("^/" + types[t] + "/(" + GUID + ")$")); - if (imgurl) { - imgurl = "//coverartarchive.org/" + types[t] + "/" + imgurl[1] + "/front"; - if (!istablechecked) { - istable = getParent(as[0], "table"); - if (istable) { artistcol = document.evaluate(".//thead/tr/th[contains(./text(), 'Artist') or contains(./a/text(), 'Artist')]", istable, null, XPathResult.UNORDERED_NODE_SNAPSHOT_TYPE, null).snapshotLength == 1; } - istablechecked = true; - } -// SMALL PICS -// ---------- - if (smallpics && !self.location.pathname.match(/(open_)?edits$/) && !self.location.pathname.match(/^\/search\/edits/)) { - if (types[t] == "release-group") { - var CAALoader = new XMLHttpRequest(); - CAALoader.addEventListener("load", function(event) { - if (this.status == 200) { - var RGCAA = JSON.parse(this.responseText); - if (RGCAA.images.length > 0) { - var releaseGroupOrSpanMp = include_span_mp(this.releaseGroup); - // insert small pic after ratings - var insertPoint = releaseGroupOrSpanMp; - if ( - releaseGroupOrSpanMp.previousSibling // is not first element - && releaseGroupOrSpanMp.previousSibling.matches // is not text node - && releaseGroupOrSpanMp.previousSibling.matches("span.caa-icon") // is CAA icon - ) { - // insert before CAA icon to enable its CSS hiding - insertPoint = releaseGroupOrSpanMp.previousSibling; +// React hydrate imposes delay +var reactHydratePage = location.pathname.match(/^\/release\//); +setTimeout(function() { + var imgurls = []; + for (var t = 0; t < types.length; t++) { + // TODO: rglink smallpic is often broken by React, though + var as = document.querySelectorAll("tr > td a[href^='/" + types[t] + "/']:not([href$='/cover-art']), div#page.fullwidth ul:not(.tabs) > li a[href^='/" + types[t] + "/']:not([href$='/cover-art']), tr > td > span[class^='rglink'] + a[href^='/" + types[t] + "/']:not([href$='/cover-art'])"); + var istable, istablechecked, artistcol; + for (var a = 0; a < as.length; a++) { + var imgurl = as[a].getAttribute("href").match(new RegExp("^/" + types[t] + "/(" + GUID + ")$")); + if (imgurl) { + imgurl = "//coverartarchive.org/" + types[t] + "/" + imgurl[1] + "/front"; + if (!istablechecked) { + istable = getParent(as[0], "table"); + if (istable) { artistcol = document.evaluate(".//thead/tr/th[contains(./text(), 'Artist') or contains(./a/text(), 'Artist')]", istable, null, XPathResult.UNORDERED_NODE_SNAPSHOT_TYPE, null).snapshotLength == 1; } + istablechecked = true; + } + // SMALL PICS + // ---------- + if (smallpics && !self.location.pathname.match(/(open_)?edits$/) && !self.location.pathname.match(/^\/search\/edits/)) { + if (types[t] == "release-group") { + var CAALoader = new XMLHttpRequest(); + CAALoader.addEventListener("load", function(event) { + if (this.status == 200) { + var RGCAA = JSON.parse(this.responseText); + if (RGCAA.images.length > 0) { + var releaseGroupOrSpanMp = include_span_mp(this.releaseGroup); + // insert small pic after ratings + var insertPoint = releaseGroupOrSpanMp; + if ( + releaseGroupOrSpanMp.previousSibling // is not first element + && releaseGroupOrSpanMp.previousSibling.matches // is not text node + && releaseGroupOrSpanMp.previousSibling.matches("span.caa-icon") // is CAA icon + ) { + // insert before CAA icon to enable its CSS hiding + insertPoint = releaseGroupOrSpanMp.previousSibling; + } + loadCaaIcon(releaseGroupOrSpanMp.parentNode.insertBefore( + createTag("a", + {a: { + href: RGCAA.release + "/cover-art", + ref: this.releaseGroup.getAttribute("href"), + title: RGCAA.images.length + " image" + (RGCAA.images.length != 1 ? "s" : "") + " found in this release" + }}, + createTag("span", {a: {class: "caa-icon " + userjs}}) + ), + insertPoint).firstChild + ); } - loadCaaIcon(releaseGroupOrSpanMp.parentNode.insertBefore( - createTag("a", - {a: { - href: RGCAA.release + "/cover-art", - ref: this.releaseGroup.getAttribute("href"), - title: RGCAA.images.length + " image" + (RGCAA.images.length != 1 ? "s" : "") + " found in this release" - }}, - createTag("span", {a: {class: "caa-icon " + userjs}}) - ), - insertPoint).firstChild - ); + } else { + console.log("Error " + this.status + " (" + this.statusText + ") for " + this.releaseGroup); } - } else { + }); + CAALoader.addEventListener("error", function(event) { console.log("Error " + this.status + " (" + this.statusText + ") for " + this.releaseGroup); - } - }); - CAALoader.addEventListener("error", function(event) { - console.log("Error " + this.status + " (" + this.statusText + ") for " + this.releaseGroup); - }); - CAALoader.releaseGroup = as[a]; - CAALoader.open("GET", "https://coverartarchive.org" + as[a].getAttribute("href").match(new RegExp("/release-group/" + GUID)), true); - CAALoader.send(null); + }); + CAALoader.releaseGroup = as[a]; + CAALoader.open("GET", "https://coverartarchive.org" + as[a].getAttribute("href").match(new RegExp("/release-group/" + GUID)), true); + CAALoader.send(null); + } } - } - // TODO: I think there is no longer any UL LI, now only TABLE TR, I guess but not sure... - var box = getParent(as[a], "table") || getParent(as[a], "ul"); - box.addEventListener("mouseover", updateBig); - box.addEventListener("mouseout", updateBig); -// BIG PICS -// -------- - if (bigpics && (box = box.previousSibling && box.previousSibling.tagName == "DIV" && box.previousSibling.classList.contains(userjs + "bigbox") ? box.previousSibling : box.parentNode.insertBefore(createTag("div", {a: {class: userjs + "bigbox"}}), box))) { - if (!self.location.pathname.match(/\/recordings/) || self.location.pathname.match(/\/recordings/) && imgurls.indexOf(imgurl) < 0) { - var artisttd = artistcol && getSibling(getParent(as[a], "td"), "td"); - // textContent is faster but shows