From 3454750ad309c061903d2aa3395debbae7444df2 Mon Sep 17 00:00:00 2001
From: Suzanne Aitchison <suzanne@forem.com>
Date: Thu, 3 Feb 2022 15:44:44 +0000
Subject: [PATCH] Place gifs correctly regardless of center tag (#16404)

* place gifs correctly regardless of center tag

* typo

* make sure the same gif src can be used twice in a post

* approach in css
---
 app/assets/stylesheets/article-show.scss        |  6 ++++++
 app/javascript/utilities/animatedImageUtils.jsx | 10 +++++++---
 2 files changed, 13 insertions(+), 3 deletions(-)

diff --git a/app/assets/stylesheets/article-show.scss b/app/assets/stylesheets/article-show.scss
index b2afa07a2..f0855863d 100644
--- a/app/assets/stylesheets/article-show.scss
+++ b/app/assets/stylesheets/article-show.scss
@@ -622,3 +622,9 @@ article {
     }
   }
 }
+
+// When a user has wrapped their gif in a <center> we don't want to manipulate the position
+center .ff-container {
+  left: unset;
+  transform: none;
+}
diff --git a/app/javascript/utilities/animatedImageUtils.jsx b/app/javascript/utilities/animatedImageUtils.jsx
index f7bb8540c..978a8d54d 100644
--- a/app/javascript/utilities/animatedImageUtils.jsx
+++ b/app/javascript/utilities/animatedImageUtils.jsx
@@ -16,13 +16,17 @@ export const initializePausableAnimatedImages = (animatedImages = []) => {
   if (animatedImages.length > 0) {
     const freezeframes = [];
 
-    // Remove the surrounding links for the image, so it can be clicked to play/pause
-    for (const image of animatedImages) {
+    for (let i = 0; i < animatedImages.length; i++) {
+      const image = animatedImages[i];
+      // Give the image an ID so that we can uniquely target it in freezeframe
+      image.setAttribute('id', `animated-${i}`);
+
+      // Remove the surrounding links for the image, so it can be clicked to play/pause
       image.closest('a').outerHTML = image.outerHTML;
 
       freezeframes.push(
         new Freezeframe({
-          selector: `img[src="${image.getAttribute('src')}"]`,
+          selector: `img[id='animated-${i}']`,
           responsive: false,
           trigger: 'click',
         }),