bottle data processes tags in layout effect

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

Hide file tree

Showing 2 changed files with 18 additions and 18 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,14 +1,14 @@
 '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'
 import * as pingback from '../util/pingback'
 import AttributionOverlay from './attribution/overlay'
 import VerifiedBadge from './attribution/verified-badge'
-import DangerousElement from './dangerous-element'
+import BottleData from './bottle-data'
 import { PingbackContext } from './pingback-context-manager'
 import { GifOverlayProps } from './types'
 
@@ -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 }) => {
@@ -296,10 +287,7 @@ const Gif = ({
                     alt={getAltText(gif)}
                     onLoad={shouldShowMedia ? onImageLoad : () => {}}
                 />
-                {isAd &&
-                    bottleData?.tags?.map((tag: string, index: number) => (
-                        <DangerousElement markup={processTag(tag)} key={index} />
-                    ))}
+                {isAd && bottleData?.tags?.map((tag: string, index: number) => <BottleData markup={tag} key={index} />)}
             </picture>
             {Overlay && (
                 // only render the overlay on the client since it depends on shouldShowMedia