From 392aaa7668b22e9aa728793b5d55a35430f42e3e Mon Sep 17 00:00:00 2001 From: srijitcoder Date: Fri, 17 Jan 2025 14:00:52 +0530 Subject: [PATCH 1/5] 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, }); } }); From e78cdded14d48e3cdd7cce63f332eb9d78f88247 Mon Sep 17 00:00:00 2001 From: srijitcoder Date: Fri, 17 Jan 2025 14:29:52 +0530 Subject: [PATCH 2/5] fix: added seperate function to trigger on load for img and video to remove title --- elements/storytelling/src/helpers/render-html-string.js | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/elements/storytelling/src/helpers/render-html-string.js b/elements/storytelling/src/helpers/render-html-string.js index 0ad52cc6f..2ccf88a3a 100644 --- a/elements/storytelling/src/helpers/render-html-string.js +++ b/elements/storytelling/src/helpers/render-html-string.js @@ -207,7 +207,7 @@ function processNode(node, initDispatchFunc) { } }; - media.onload = () => { + const loadFunc = () => { if ( document.body.contains(media) && media.title.includes("temp-backup-url=") @@ -216,6 +216,9 @@ function processNode(node, initDispatchFunc) { } }; + media.onload = loadFunc; + media.onloadeddata = loadFunc; + lightboxElements.push({ type: "image", href: media.src, From c9c94ae2116bd6dc250ac4bd907f1331f95d886b Mon Sep 17 00:00:00 2001 From: srijitcoder Date: Fri, 17 Jan 2025 14:31:37 +0530 Subject: [PATCH 3/5] chores: added comment --- elements/storytelling/src/helpers/render-html-string.js | 2 ++ 1 file changed, 2 insertions(+) diff --git a/elements/storytelling/src/helpers/render-html-string.js b/elements/storytelling/src/helpers/render-html-string.js index 2ccf88a3a..3ad1b82bb 100644 --- a/elements/storytelling/src/helpers/render-html-string.js +++ b/elements/storytelling/src/helpers/render-html-string.js @@ -197,6 +197,7 @@ function processNode(node, initDispatchFunc) { lightboxGallery.open(); }); + // Handle media loading error by switching to backup URL if available media.onerror = () => { if ( document.body.contains(media) && @@ -207,6 +208,7 @@ function processNode(node, initDispatchFunc) { } }; + // Function to clear the backup URL title attribute after successful load const loadFunc = () => { if ( document.body.contains(media) && From e4c9ed947a87179bdf6299d75a6367ae441fbdaa Mon Sep 17 00:00:00 2001 From: srijitcoder Date: Wed, 22 Jan 2025 15:42:23 +0530 Subject: [PATCH 4/5] chores: requested changes --- .../storytelling/src/helpers/render-html-string.js | 12 +++++++----- 1 file changed, 7 insertions(+), 5 deletions(-) diff --git a/elements/storytelling/src/helpers/render-html-string.js b/elements/storytelling/src/helpers/render-html-string.js index 3ad1b82bb..a46267a0f 100644 --- a/elements/storytelling/src/helpers/render-html-string.js +++ b/elements/storytelling/src/helpers/render-html-string.js @@ -201,10 +201,12 @@ function processNode(node, initDispatchFunc) { media.onerror = () => { if ( document.body.contains(media) && - media.title.includes("temp-backup-url=") + media.getAttribute("data-fallback-src") ) { - media.src = media.title.replace("temp-backup-url=", ""); - media.title = ""; + media.src = media.getAttribute("data-fallback-src"); + media.removeAttribute("data-fallback-src"); + } else { + media.src = "https://placehold.co/600x400?text=Image+not+loaded"; } }; @@ -212,9 +214,9 @@ function processNode(node, initDispatchFunc) { const loadFunc = () => { if ( document.body.contains(media) && - media.title.includes("temp-backup-url=") + media.getAttribute("data-fallback-src") ) { - media.title = ""; + media.removeAttribute("data-fallback-src"); } }; From d1bc14c42ac73e532f43c99aafd6ffbe439e3105 Mon Sep 17 00:00:00 2001 From: Silvester Date: Wed, 22 Jan 2025 11:19:54 +0100 Subject: [PATCH 5/5] chore: adjust text --- elements/storytelling/src/helpers/render-html-string.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/elements/storytelling/src/helpers/render-html-string.js b/elements/storytelling/src/helpers/render-html-string.js index a46267a0f..eff0a7272 100644 --- a/elements/storytelling/src/helpers/render-html-string.js +++ b/elements/storytelling/src/helpers/render-html-string.js @@ -206,7 +206,7 @@ function processNode(node, initDispatchFunc) { media.src = media.getAttribute("data-fallback-src"); media.removeAttribute("data-fallback-src"); } else { - media.src = "https://placehold.co/600x400?text=Image+not+loaded"; + media.src = "https://placehold.co/600x400?text=Media+not+found"; } };