[Hot Cards] Fix element duplication and missing homepage holo effect (#…

…383)

plugins/hotCards/hotCards.css

@@ -30,7 +30,6 @@
   --my: 50%;
   --radius: 4.55% / 3.5%;
   --space: 1%;
-  --angle: 0deg;
   --imgsize: 50%;
 
   --color1: rgb(255, 119, 115) calc(var(--space) * 1);

plugins/hotCards/hotCards.js

@@ -165,8 +165,12 @@
    */
   function handleHomeHotCards() {
     const pattern = /^\/$/;
+    let timeoutId;
+
+    overrideHistoryMethods(() => clearTimeout(timeoutId));
+
     registerPathChangeListener(pattern, () => {
-      setTimeout(() => {
+      timeoutId = setTimeout(() => {
         for (const card of Object.values(CARDS))
           if (card.enabled) handleHotCards(card, true);
       }, 3000);
@@ -640,8 +644,10 @@
     const isImageOrSceneCard = classInArray && !isStudioCard;
     const classSuffix = isImageOrSceneCard ? "preview-image" : "image";
     const imgClass = `.${cardClass}-${classSuffix}`;
-
     const targetEl = hotCardEl.querySelector(imgClass);
+
+    if (!targetEl) return;
+
     const holoEl = createElementFromHTML(`<div class="holo"></div>`);
     const shineEl = createElementFromHTML(`<div class="shine"></div>`);
     const seedX = getRandomInt(100);
@@ -670,8 +676,11 @@
     holoEl.append(shineEl);
     applyInitialStyles();
 
-    waitForImageLoad(imgClass, () => {
+    waitForImageLoad(targetEl, () => {
       const hotBorderEl = hotCardEl.querySelector(".hot-border");
+
+      if (!hotBorderEl) return;
+
       const studioCardMarginSize = 5;
       const isSceneCard = cardClass === "scene-card";
       const degreesOffset = isStudioCard ? 98 : isSceneCard ? 83 : 97;
@@ -866,11 +875,5 @@
     hotCards.length = 0;
   }
 
-  ["pushState", "replaceState"].forEach((method) => {
-    const original = history[method];
-    history[method] = function () {
-      restoreCards();
-      return original.apply(this, arguments);
-    };
-  });
+  overrideHistoryMethods(restoreCards);
 })();

plugins/hotCards/hotCards.yml

@@ -1,16 +1,16 @@
 name: Hot Cards
 description: Adds custom styling to card elements that match a Tag ID or a Rating Threshold.
-version: 1.1.8
+version: 1.1.9
 url: https://github.com/stashapp/CommunityScripts/tree/main/plugins/hotCards
 # requires: CommunityScriptsUILibrary
 ui:
   requires:
     - CommunityScriptsUILibrary
   javascript:
+    - utils/helpers.js
     - utils/fetchInterceptor.js
     - utils/stashHandler.js
     - utils/registerPathChangeListener.js
-    - utils/helpers.js
     - hotCards.js
   css:
     - hotCards.css

plugins/hotCards/utils/helpers.js

@@ -14,24 +14,65 @@ function waitForClass(className, callback) {
   const checkInterval = 100; // ms
   const maxRetries = 30; // Timeout after 3 seconds
   let retryCount = 0;
+  let intervalId;
 
-  const intervalId = setInterval(() => {
+  function checkElements() {
     const elements = document.getElementsByClassName(className);
     if (elements.length > 0) {
-      clearInterval(intervalId);
+      clearAll();
       callback();
     } else if (retryCount >= maxRetries) {
-      clearInterval(intervalId);
+      clearAll();
       console.info(
-        `Element with class ${className} not found within timeout period`
+        `Element with class "${className}" not found within timeout period`
       );
     }
     retryCount++;
-  }, checkInterval);
+  }
+
+  function clearAll() {
+    clearInterval(intervalId);
+    removeEventListeners();
+  }
+
+  function clear() {
+    console.info(
+      `Element with class "${className}" search cancelled due to page change`
+    );
+    clearAll();
+  }
+
+  function addEventListeners() {
+    document.addEventListener("visibilitychange", clear);
+    window.addEventListener("beforeunload", clear);
+    window.addEventListener("popstate", clear);
+  }
+
+  function removeEventListeners() {
+    document.removeEventListener("visibilitychange", clear);
+    window.removeEventListener("beforeunload", clear);
+    window.removeEventListener("popstate", clear);
+  }
+
+  // Start the interval and add event listeners
+  intervalId = setInterval(checkElements, checkInterval);
+  addEventListeners();
 }
 
-function waitForImageLoad(selector, callback) {
-  var imgEl = document.querySelector(selector);
-  if (imgEl?.complete) return callback(imgEl);
-  setTimeout(waitForImageLoad, 100, selector, callback);
+function waitForImageLoad(imageEl, callback) {
+  if (imageEl.complete) return callback(imageEl);
+  setTimeout(waitForImageLoad, 100, imageEl, callback);
+}
+
+/** History */
+
+function overrideHistoryMethods(callback) {
+  ["pushState", "replaceState"].forEach((method) => {
+    const original = history[method];
+    history[method] = function () {
+      const result = original.apply(this, arguments);
+      callback();
+      return result;
+    };
+  });
 }

plugins/hotCards/utils/registerPathChangeListener.js

@@ -10,14 +10,7 @@ function registerPathChangeListener(pattern, callback) {
   window.addEventListener("popstate", checkURL);
 
   // Hijack pushState and replaceState methods
-  ["pushState", "replaceState"].forEach((method) => {
-    const original = history[method];
-    history[method] = function () {
-      const result = original.apply(this, arguments);
-      checkURL();
-      return result;
-    };
-  });
+  overrideHistoryMethods(checkURL);
 
   // Initial check
   checkURL();