From 392aaa7668b22e9aa728793b5d55a35430f42e3e Mon Sep 17 00:00:00 2001
From: srijitcoder <srijitsm123@gmail.com>
Date: Fri, 17 Jan 2025 14:00:52 +0530
Subject: [PATCH] fix: add temporary backup url for github permanent url image
 availability delay

---
 .../src/helpers/render-html-string.js         | 35 +++++++++++++++----
 1 file changed, 28 insertions(+), 7 deletions(-)

diff --git a/elements/storytelling/src/helpers/render-html-string.js b/elements/storytelling/src/helpers/render-html-string.js
index ccc84b505..0ad52cc6f 100644
--- a/elements/storytelling/src/helpers/render-html-string.js
+++ b/elements/storytelling/src/helpers/render-html-string.js
@@ -184,20 +184,41 @@ function processNode(node, initDispatchFunc) {
     const lightboxElements = [];
 
     const images = node.querySelectorAll("img");
-    // Loop over each image
-    images.forEach((img) => {
+    const videos = node.querySelectorAll("video");
+
+    // Loop over each image/video
+    [...images, ...videos].forEach((media) => {
       // Check if the image is already inside a link (to avoid double wrapping)
-      const mode = img.getAttribute("mode");
+      const mode = media.getAttribute("mode");
 
-      if (img.parentNode.tagName !== "A" && mode !== "hero") {
-        img.style.cursor = "zoom-in";
-        img.addEventListener("click", () => {
+      if (media.parentNode.tagName !== "A" && mode !== "hero") {
+        media.style.cursor = "zoom-in";
+        media.addEventListener("click", () => {
           lightboxGallery.open();
         });
 
+        media.onerror = () => {
+          if (
+            document.body.contains(media) &&
+            media.title.includes("temp-backup-url=")
+          ) {
+            media.src = media.title.replace("temp-backup-url=", "");
+            media.title = "";
+          }
+        };
+
+        media.onload = () => {
+          if (
+            document.body.contains(media) &&
+            media.title.includes("temp-backup-url=")
+          ) {
+            media.title = "";
+          }
+        };
+
         lightboxElements.push({
           type: "image",
-          href: img.src,
+          href: media.src,
         });
       }
     });