6 |
7 |
8 | 
9 |
10 |
11 | 
12 |
13 |
14 | 
15 |
16 |
4 |
5 |
9 |
10 |
11 |
18 | » 19 |
20 | 25 | Load more 26 | 27 |{t("reloadModal.description")}
9 |({t("settings.tabsDescription")})
92 |${this.props.t("readmePage.loading")}
` 40 | }; 41 | 42 | getReadmeHTML = async () => { 43 | return fetch(this.props.data.readmeURL) 44 | .then((res) => { 45 | if (!res.ok) throw Spicetify.showNotification(`${this.props.t("readmePage.errorLoading")} (HTTP ${res.status})`, true); 46 | return res.text(); 47 | }) 48 | .then((readmeText) => getMarkdownHTML(readmeText, this.props.data.user, this.props.data.repo)) 49 | .then((html) => { 50 | if (!html) Spicetify.Platform.History.goBack(); 51 | return html; 52 | }) 53 | .catch((err) => { 54 | console.error(err); 55 | Spicetify.Platform.History.goBack(); 56 | return null; 57 | }); 58 | }; 59 | 60 | componentDidMount() { 61 | // Get and set readme html once loaded 62 | this.getReadmeHTML().then((html) => { 63 | if (html == null) return; 64 | this.setState({ html }); 65 | }); 66 | } 67 | 68 | componentDidUpdate() { 69 | // Make the page scrollable 70 | const main = document.querySelector("#marketplace-readme")?.closest("main"); 71 | if (main) { 72 | const callScrollbar = setInterval(() => { 73 | if (!document.querySelector("#marketplace-readme")) { 74 | clearInterval(callScrollbar); 75 | main.style.removeProperty("overflow-y"); 76 | return; 77 | } 78 | // TODO: see if it's possible to use some load event or mutation observer to do this 79 | main.style.overflowY = "visible"; 80 | main.style.overflowY = "auto"; 81 | }, 1000); 82 | } 83 | 84 | // Add error handler in attempt to fix broken image urls 85 | // e.g. "screenshot.png" loads https://xpui.app.spotify.com/screenshot.png and breaks 86 | // so I turn it into https://raw.githubusercontent.com/theRealPadster/spicetify-hide-podcasts/main/screenshot.png 87 | // This works for urls relative to the repo readme 88 | // biome-ignore lint/complexity/noForEach: querySelectorAll returns a NodeList, not an array 89 | document.querySelectorAll("#marketplace-readme img").forEach((img) => { 90 | img.addEventListener( 91 | "error", 92 | (e) => { 93 | const element = e.target as HTMLImageElement; 94 | const originalSrc = element.getAttribute("src"); 95 | const fixedSrc = 96 | originalSrc?.charAt(0) === "/" 97 | ? `https://raw.githubusercontent.com/${this.props.data.user}/${this.props.data.repo}/${this.props.data.branch}/${originalSrc?.slice(1)}` 98 | : `${this.props.data.readmeURL.substring(0, this.props.data.readmeURL.lastIndexOf("/"))}/${originalSrc}`; 99 | element.setAttribute("src", fixedSrc); 100 | }, 101 | { once: true } 102 | ); 103 | }); 104 | } 105 | 106 | buttonContent() { 107 | if (this.props.data.type === "app") { 108 | return { 109 | icon:Loading...
" ? ( 154 | 157 | ) : ( 158 | 159 | )} 160 |