Clear modal loading poster once playback starts

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