bottle data processes tags in layout effect

Giphy · Oct 23, 2024 · 76de3f3 · 76de3f3
1 parent 1125e6e
commit 76de3f3
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 14 deletions.
diff --git a/...ents/src/components/dangerous-element.tsx → ...components/src/components/bottle-data.tsx b/...ents/src/components/dangerous-element.tsx → ...components/src/components/bottle-data.tsx
@@ -1,16 +1,28 @@
+import { noUUIDRandom } from '@giphy/js-util'
 import React, { useRef, useLayoutEffect } from 'react'
+
+function processTag(tag: string) {
+    tag = tag.replace(`%%CACHEBUSTER%%`, noUUIDRandom())
+    tag = tag.replace('%%TIMESTAMP%%', `${Date.now()}`)
+    tag = tag.replace('%%APPBUNDLE%%', `web`)
+    if (typeof window !== 'undefined') {
+        tag = tag.replace('%%APP_WINDOW_SIZE%%', `${window.innerWidth},${window.innerHeight}`)
+        tag = tag.replace('%%DEVICE_LANGUAGE%%', `${navigator.language}`)
+    }
+    return tag
+}
 /**
  * Execute a script tag in a React component.
  * https://macarthur.me/posts/script-tags-in-react/
  */
-function DangrousElement({ markup }: { markup: string }) {
+function BottleData({ markup }: { markup: string }) {
     const elRef = useRef<HTMLDivElement>(null)
 
     useLayoutEffect(() => {
         if (!elRef.current) return
         const range = document.createRange()
         range.selectNode(elRef.current)
-        const documentFragment = range.createContextualFragment(markup)
+        const documentFragment = range.createContextualFragment(processTag(markup))
 
         // Inject the markup, triggering a re-run!
         elRef.current.innerHTML = ''
@@ -21,4 +33,4 @@ function DangrousElement({ markup }: { markup: string }) {
     return <div ref={elRef} dangerouslySetInnerHTML={{ __html: markup }}></div>
 }
 
-export default DangrousElement
+export default BottleData
diff --git a/packages/react-components/src/components/gif.tsx b/packages/react-components/src/components/gif.tsx
@@ -1,7 +1,7 @@
 'use client'
 import { giphyBlue, giphyGreen, giphyPurple, giphyRed, giphyYellow } from '@giphy/colors'
 import { IGif, IUser, ImageAllTypes } from '@giphy/js-types'
-import { Logger, getAltText, getBestRendition, getGifHeight, noUUIDRandom } from '@giphy/js-util'
+import { Logger, getAltText, getBestRendition, getGifHeight } from '@giphy/js-util'
 import 'intersection-observer'
 import React, { ElementType, ReactNode, SyntheticEvent, useContext, useEffect, useRef, useState } from 'react'
 import styled from 'styled-components'
@@ -77,15 +77,6 @@ const placeholder = 'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAAL
 // used to detect if we're on the server or client
 const canUseDOM = !!(typeof window !== 'undefined' && window.document && window.document.createElement)
 
-function processTag(tag: string) {
-    tag = tag.replace(`%%CACHEBUSTER%%`, noUUIDRandom())
-    tag = tag.replace('%%TIMESTAMP%%', `${Date.now()}`)
-    tag = tag.replace('%%APPBUNDLE%%', `web`)
-    tag = tag.replace('%%APP_WINDOW_SIZE%%', `${window.innerWidth},${window.innerHeight}`)
-    tag = tag.replace('%%DEVICE_LANGUAGE%%', `${navigator.language}`)
-    return tag
-}
-
 const noop = () => {}
 
 const RenderOnClient = ({ children }: { children: ReactNode }) => {
@@ -298,7 +289,7 @@ const Gif = ({
                 />
                 {isAd &&
                     bottleData?.tags?.map((tag: string, index: number) => (
-                        <DangerousElement markup={processTag(tag)} key={index} />
+                        <DangerousElement markup={tag} key={index} />
                     ))}
             </picture>
             {Overlay && (