From ecce883a3ed5efa3d2ff6810602bbe82c12c0bae Mon Sep 17 00:00:00 2001 From: Core Date: Wed, 22 Oct 2025 23:11:40 +0100 Subject: [PATCH] refactor(misc-info): restructure misc info to use standard jellyifn icons, and display correctly and no longer show N/A --- slideshowpure.js | 186 ++++++++++++++++------------------------------- 1 file changed, 64 insertions(+), 122 deletions(-) diff --git a/slideshowpure.js b/slideshowpure.js index 4bb4d72..3ec7e42 100644 --- a/slideshowpure.js +++ b/slideshowpure.js @@ -888,139 +888,81 @@ const SlideCreator = { */ createRatingInfo(item) { const { - CommunityRating: rating, + CommunityRating: communityRating, CriticRating: criticRating, - OfficialRating: age, - PremiereDate: date, + OfficialRating: ageRating, + PremiereDate: premiereDate, RunTimeTicks: runtime, - ChildCount: season, + ChildCount: seasonCount, } = item; - const ratingTest = SlideUtils.createElement("div", { - className: "rating-value", + const miscInfo = SlideUtils.createElement("div", { + className: "misc-info itemMiscInfo", }); - const imdbLogo = SlideUtils.createElement("div", { - className: "imdb-logo", - innerHTML: CONFIG.IMAGE_SVG.imdbLogo, - style: { - width: "30px", - height: "30px", - }, - }); - - ratingTest.appendChild(imdbLogo); - - if (typeof rating === "number") { - const ratingSpan = document.createElement("span"); - ratingSpan.textContent = rating.toFixed(1); - ratingSpan.style.marginRight = "5px"; - ratingSpan.style.marginLeft = "5px"; - ratingTest.appendChild(ratingSpan); - } else { - const naSpan = document.createElement("span"); - naSpan.innerHTML = "N/A"; - naSpan.style.color = "#fff9"; - naSpan.style.marginRight = "5px"; - naSpan.style.marginLeft = "5px"; - ratingTest.appendChild(naSpan); + // Community Rating Section (IMDb) + if (typeof communityRating === "number") { + const container = SlideUtils.createElement("div", { + className: "star-rating-container", + innerHTML: `${communityRating.toFixed(1)}`, + }); + miscInfo.appendChild(container); + miscInfo.appendChild(SlideUtils.createSeparator()); } - ratingTest.appendChild(SlideUtils.createSeparator()); - - const tomatoRatingDiv = SlideUtils.createElement("div", { - className: "tomato-rating", - }); - - const tomatoLogo = SlideUtils.createElement("div", { - className: "tomato-logo", - innerHTML: CONFIG.IMAGE_SVG.tomatoLogo, - style: { - width: "18px", - height: "20px", - }, - }); - - let valueElement = SlideUtils.createElement("span", { - style: { - marginLeft: "5px", - marginRight: "5px", - }, - }); - + // Critic Rating Section (Rotten Tomatoes) if (typeof criticRating === "number") { - valueElement.textContent = `${criticRating}% `; - } else { - valueElement.style.color = "#fff9"; - valueElement.textContent = "N/A "; + const svgIcon = criticRating < 60 ? CONFIG.IMAGE_SVG.rottenTomato : CONFIG.IMAGE_SVG.freshTomato; + const container = SlideUtils.createElement("div", { + className: "critic-rating", + innerHTML: `${svgIcon}${criticRating.toFixed(0)}%`, + }) + miscInfo.appendChild(container); + miscInfo.appendChild(SlideUtils.createSeparator()); + }; + + // Year Section + if (typeof premiereDate === "string" && !isNaN(new Date(premiereDate))) { + const container = SlideUtils.createElement("div", { + className: "date", + innerHTML: new Date(premiereDate).getFullYear(), + }); + miscInfo.appendChild(container); + miscInfo.appendChild(SlideUtils.createSeparator()); + }; + + // Age Rating Section + if (typeof ageRating === "string") { + const container = SlideUtils.createElement("div", { + className: "age-rating mediaInfoOfficialRating", + rating: ageRating, + ariaLabel: `Content rated ${ageRating}`, + title: `Rating: ${ageRating}`, + innerHTML: ageRating, + }); + miscInfo.appendChild(container); + miscInfo.appendChild(SlideUtils.createSeparator()); + }; + + // Runtime / Seasons Section + if (seasonCount !== undefined || runtime !== undefined) { + const container = SlideUtils.createElement("div", { + className: "runTime", + }); + if (seasonCount) { + container.innerHTML = `${seasonCount} Season${seasonCount > 1 ? "s" : ""}`; + } else { + const milliseconds = runtime / 10000; + const currentTime = new Date(); + const endTime = new Date(currentTime.getTime() + milliseconds); + const options = { hour: "2-digit", minute: "2-digit", hour12: false }; + const formattedEndTime = endTime.toLocaleTimeString([], options); + container.innerText = `Ends at ${formattedEndTime}`; + } + miscInfo.appendChild(container); } - const criticLogo = SlideUtils.createElement("span", { - className: "critic-logo", - style: { - display: "flex", - width: "18", - height: "20", - }, - }); - criticLogo.innerHTML = - criticRating > 59 - ? CONFIG.IMAGE_SVG.freshTomato - : CONFIG.IMAGE_SVG.rottenTomato; - - tomatoRatingDiv.append(tomatoLogo, valueElement, criticLogo); - tomatoRatingDiv.appendChild(SlideUtils.createSeparator()); - - const ageRatingDiv = SlideUtils.createElement("div", { - className: "age-rating", - }); - const ageSpan = document.createElement("span"); - ageSpan.textContent = age || "N/A"; - ageRatingDiv.appendChild(ageSpan); - - const premiereDate = SlideUtils.createElement("div", { - className: "date", - }); - - const year = date ? new Date(date).getFullYear() : NaN; - if (isNaN(year)) { - const naSpan = SlideUtils.createElement( - "span", - { - style: { color: "#fff9" }, - }, - "N/A" - ); - premiereDate.appendChild(naSpan); - } else { - premiereDate.textContent = year; - } - - const runTimeElement = SlideUtils.createElement("div", { - className: "runTime", - }); - - if (season === undefined) { - const milliseconds = runtime / 10000; - const currentTime = new Date(); - const endTime = new Date(currentTime.getTime() + milliseconds); - const options = { hour: "2-digit", minute: "2-digit", hour12: false }; - const formattedEndTime = endTime.toLocaleTimeString([], options); - runTimeElement.textContent = `Ends at ${formattedEndTime}`; - } else { - runTimeElement.textContent = `${season} Season${season > 1 ? "s" : ""}`; - } - - ratingTest.append( - tomatoRatingDiv, - premiereDate, - SlideUtils.createSeparator(), - ageRatingDiv, - SlideUtils.createSeparator(), - runTimeElement - ); - - return ratingTest; + return miscInfo; }, /**