diff --git a/js/app.js b/js/app.js index fdc797e8..73bbd686 100644 --- a/js/app.js +++ b/js/app.js @@ -24,6 +24,7 @@ const UNSUPPORTED_BTITH_MESSAGE = "This magnet link is missing a compatible BitTorrent v1 info hash."; const FALLBACK_THUMBNAIL_SRC = "assets/jpg/video-thumbnail-fallback.jpg"; +const MODAL_LOADING_POSTER = "assets/gif/please-stand-by.gif"; /** * Basic validation for BitTorrent magnet URIs. @@ -110,12 +111,27 @@ class MediaLoader { ""; const applyFallback = () => { - if (!fallbackSrc) { + const resolvedFallback = + fallbackSrc && fallbackSrc.trim() + ? fallbackSrc.trim() + : FALLBACK_THUMBNAIL_SRC; + + if (!resolvedFallback) { return; } - if (el.src !== fallbackSrc) { - el.src = fallbackSrc; + + if (el.src !== resolvedFallback) { + el.src = resolvedFallback; } + + if (!el.dataset.fallbackSrc) { + el.dataset.fallbackSrc = resolvedFallback; + } + + if (!el.getAttribute("data-fallback-src")) { + el.setAttribute("data-fallback-src", resolvedFallback); + } + el.dataset.thumbnailFailed = "true"; }; @@ -263,6 +279,7 @@ class bitvidApp { this.creatorNpub = null; this.copyMagnetBtn = null; this.shareBtn = null; + this.modalPosterCleanup = null; // Hide/Show Subscriptions Link this.subscriptionsLink = null; @@ -562,9 +579,40 @@ class bitvidApp { this.playerModal.style.display = "flex"; this.playerModal.classList.remove("hidden"); } - if (this.modalVideo) { - this.modalVideo.poster = "assets/gif/please-stand-by.gif"; + this.applyModalLoadingPoster(); + } + + applyModalLoadingPoster() { + if (!this.modalVideo) { + return; } + + if (typeof this.modalPosterCleanup === "function") { + this.modalPosterCleanup(); + this.modalPosterCleanup = null; + } + + const videoEl = this.modalVideo; + + const clearPoster = () => { + videoEl.removeEventListener("loadeddata", clearPoster); + videoEl.removeEventListener("playing", clearPoster); + this.modalPosterCleanup = null; + videoEl.poster = ""; + if (videoEl.hasAttribute("poster")) { + videoEl.removeAttribute("poster"); + } + }; + + videoEl.addEventListener("loadeddata", clearPoster); + videoEl.addEventListener("playing", clearPoster); + + videoEl.poster = MODAL_LOADING_POSTER; + + this.modalPosterCleanup = () => { + videoEl.removeEventListener("loadeddata", clearPoster); + videoEl.removeEventListener("playing", clearPoster); + }; } /** @@ -1314,6 +1362,14 @@ class bitvidApp { this.playerModal.style.display = "none"; this.playerModal.classList.add("hidden"); } + if (typeof this.modalPosterCleanup === "function") { + this.modalPosterCleanup(); + this.modalPosterCleanup = null; + } + if (this.modalVideo) { + this.modalVideo.poster = ""; + this.modalVideo.removeAttribute("poster"); + } this.currentMagnetUri = null; // 3) Remove only `?v=` but **keep** the hash