From 5e92104beaa287e677c5c973fd27741811977e45 Mon Sep 17 00:00:00 2001
From: Gianni Ferullo <giannif@gmail.com>
Date: Thu, 31 Oct 2024 10:48:26 -0400
Subject: [PATCH] bottle data tags are urls

---
 packages/react-components/src/components/bottle-data.tsx | 8 +++++---
 packages/react-components/src/components/gif.tsx         | 4 ++--
 packages/react-components/stories/gif.stories.tsx        | 9 ++-------
 3 files changed, 9 insertions(+), 12 deletions(-)

diff --git a/packages/react-components/src/components/bottle-data.tsx b/packages/react-components/src/components/bottle-data.tsx
index 3a038328..0936283e 100644
--- a/packages/react-components/src/components/bottle-data.tsx
+++ b/packages/react-components/src/components/bottle-data.tsx
@@ -15,14 +15,16 @@ function processTag(tag: string) {
  * Execute a script tag in a React component.
  * https://macarthur.me/posts/script-tags-in-react/
  */
-function BottleData({ markup }: { markup: string }) {
+function BottleData({ src }: { src: string }) {
     const elRef = useRef<HTMLDivElement>(null)
 
     useLayoutEffect(() => {
         if (!elRef.current) return
         const range = document.createRange()
         range.selectNode(elRef.current)
-        const documentFragment = range.createContextualFragment(processTag(markup))
+        const documentFragment = range.createContextualFragment(
+            `<script src="${processTag(src)}" type="text/javascript"></script>`
+        )
 
         // Inject the markup, triggering a re-run!
         elRef.current.innerHTML = ''
@@ -30,7 +32,7 @@ function BottleData({ markup }: { markup: string }) {
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [])
 
-    return <div ref={elRef} dangerouslySetInnerHTML={{ __html: markup }}></div>
+    return <div ref={elRef} dangerouslySetInnerHTML={{ __html: src }}></div>
 }
 
 export default BottleData
diff --git a/packages/react-components/src/components/gif.tsx b/packages/react-components/src/components/gif.tsx
index 23d9e4cb..01cfadc7 100644
--- a/packages/react-components/src/components/gif.tsx
+++ b/packages/react-components/src/components/gif.tsx
@@ -241,7 +241,7 @@ const Gif = ({
     const bestRendition = getBestRendition(gif.images, width, height)
     if (!bestRendition) {
         if (gif.images) {
-            console.error(`no rendition for ${gif.id}, rendition names: ${Object.keys(gif.images)}`)
+            console.error(`no rendition for ${gif.id}, rendition names: ${Object.keys(gif.images).join(', ')}`)
         } else {
             console.error(`no rendition for ${gif.id} - no images`)
         }
@@ -295,7 +295,7 @@ const Gif = ({
                     alt={getAltText(gif)}
                     onLoad={shouldShowMedia ? onImageLoad : () => {}}
                 />
-                {isAd && bottleData?.tags?.map((tag: string, index: number) => <BottleData markup={tag} key={index} />)}
+                {isAd && bottleData?.tags?.map((tag: string, index: number) => <BottleData src={tag} key={index} />)}
             </picture>
             {Overlay && (
                 // only render the overlay on the client since it depends on shouldShowMedia
diff --git a/packages/react-components/stories/gif.stories.tsx b/packages/react-components/stories/gif.stories.tsx
index bddfa77c..1af63b49 100644
--- a/packages/react-components/stories/gif.stories.tsx
+++ b/packages/react-components/stories/gif.stories.tsx
@@ -108,13 +108,8 @@ export const GifWithAd: Story = {
         bottle_data: {
             tid: '8691c382d3eed000da83ecc2ceef747b91190ab0e5bc0bc95ff5c80eeda242fa',
             tags: [
-                `<noscript class="MOAT-giphydisplay879451385633?moatClientLevel1=ff6046d1-7125-462a-809c-efa338464775&amp;moatClientLevel2=e66d47a2-1b13-4b74-a34d-23fbdc10ddb5&amp;moatClientLevel3=82&amp;moatClientLevel4=3o7WIw8TV4UJROSElW&amp;moatClientSlicer1=e26c89fe-fb01-4442-9e8f-37940600265c&amp;moatClientSlicer2=giphytrending"></noscript>
-                <script type="text/javascript">
-              console.log('cache:%%CACHEBUSTER%%')
-              console.log('timestamp:%%TIMESTAMP%%')
-              console.log('window size:%%APP_WINDOW_SIZE%%')
-              console.log('lang:%%DEVICE_LANGUAGE%%')
-            </script>`,
+                `https://www.giphy.com/test.js?cache=%%CACHEBUSTER%%&ts=%%TIMESTAMP%%&window=%%APP_WINDOW_SIZE%%&lang=%%DEVICE_LANGUAGE%%`,
+                `https://www.giphy.com/test2.js?cache=%%CACHEBUSTER%%&ts=%%TIMESTAMP%%&window=%%APP_WINDOW_SIZE%%&lang=%%DEVICE_LANGUAGE%%`,
             ],
         },
     },