From b0d66b4b2fd66954df5c8ce0bbc69a0960f993ec Mon Sep 17 00:00:00 2001 From: Penar Musaraj Date: Wed, 12 May 2021 09:49:04 -0400 Subject: [PATCH] FIX: Support pausing inline animated images (#13033) --- .../app/initializers/animated-images.js | 17 ++++++++++++----- 1 file changed, 12 insertions(+), 5 deletions(-) diff --git a/app/assets/javascripts/discourse/app/initializers/animated-images.js b/app/assets/javascripts/discourse/app/initializers/animated-images.js index b4fab0be9df..d19331b2559 100644 --- a/app/assets/javascripts/discourse/app/initializers/animated-images.js +++ b/app/assets/javascripts/discourse/app/initializers/animated-images.js @@ -20,8 +20,10 @@ function _pauseAnimation(img, opts = {}) { } function _resumeAnimation(img) { - img.previousSibling.remove(); - img.parentNode.classList.remove("paused-animated-image", "manually-paused"); + if (img.previousSibling && img.previousSibling.nodeName === "CANVAS") { + img.previousSibling.remove(); + } + img.parentNode.classList.remove("paused-animated-image"); } function animatedImgs() { @@ -83,13 +85,18 @@ export default { img.addEventListener("load", _handleEvent, false); } - img.parentNode.classList.add("pausable-animated-image"); - const overlay = document.createElement("div"); + const wrapper = document.createElement("div"), + overlay = document.createElement("div"); + + img.parentNode.insertBefore(wrapper, img); + wrapper.classList.add("pausable-animated-image"); + wrapper.appendChild(img); + overlay.classList.add("animated-image-overlay"); overlay.setAttribute("aria-hidden", "true"); overlay.setAttribute("role", "presentation"); overlay.innerHTML = `${iconHTML("pause")}${iconHTML("play")}`; - img.parentNode.appendChild(overlay); + wrapper.appendChild(overlay); }); }