diff --git a/js/channelProfile.js b/js/channelProfile.js index 2930bea5..b90a2d59 100644 --- a/js/channelProfile.js +++ b/js/channelProfile.js @@ -164,9 +164,6 @@ function preloadBannerImage(url) { if ("referrerPolicy" in img && !img.referrerPolicy) { img.referrerPolicy = "no-referrer"; } - if ("crossOrigin" in img && !img.crossOrigin) { - img.crossOrigin = "anonymous"; - } img.onload = () => { resolve(url); }; @@ -207,6 +204,43 @@ function setBannerVisual(el, url) { } } +function ensureBannerFallbackHandler(bannerEl) { + if (!bannerEl) { + return; + } + + const tagName = bannerEl.tagName ? bannerEl.tagName.toLowerCase() : ""; + if (tagName !== "img") { + return; + } + + if (bannerEl.dataset.bannerFallbackAttached === "true") { + return; + } + + const handleError = () => { + const fallbackAttr = + (typeof bannerEl.dataset?.fallbackSrc === "string" + ? bannerEl.dataset.fallbackSrc.trim() + : "") || + bannerEl.getAttribute("data-fallback-src") || + ""; + const fallbackSrc = fallbackAttr || FALLBACK_CHANNEL_BANNER; + + const activeSrc = bannerEl.currentSrc || bannerEl.src || ""; + if (activeSrc) { + channelBannerImageCache.delete(activeSrc); + } + + if (fallbackSrc && bannerEl.src !== fallbackSrc) { + bannerEl.src = fallbackSrc; + } + }; + + bannerEl.addEventListener("error", handleError, { passive: true }); + bannerEl.dataset.bannerFallbackAttached = "true"; +} + function getChannelZapButton() { if (cachedZapButton && !document.body.contains(cachedZapButton)) { cachedZapButton = null; @@ -2843,6 +2877,8 @@ function applyChannelProfileMetadata({ bannerEl.setAttribute("data-fallback-src", fallbackSrc); } + ensureBannerFallbackHandler(bannerEl); + if (!normalized.banner) { setBannerVisual(bannerEl, fallbackSrc); } else { diff --git a/views/channel-profile.html b/views/channel-profile.html index ba77fd80..9856e8c8 100644 --- a/views/channel-profile.html +++ b/views/channel-profile.html @@ -9,7 +9,6 @@ alt="Banner" loading="lazy" referrerpolicy="no-referrer" - crossorigin="anonymous" data-fallback-src="assets/jpg/bitvid.jpg" />