From 4ca68e86f2dc2968b9b84a410348d107b3de3cac Mon Sep 17 00:00:00 2001
From: Gianni Ferullo <giannif@gmail.com>
Date: Wed, 23 Oct 2024 10:09:32 -0400
Subject: [PATCH] replace tag values

---
 packages/react-components/src/components/gif.tsx | 13 +++++++++++--
 packages/util/src/get-pingback-id.ts             |  2 +-
 packages/util/src/index.ts                       |  2 +-
 3 files changed, 13 insertions(+), 4 deletions(-)

diff --git a/packages/react-components/src/components/gif.tsx b/packages/react-components/src/components/gif.tsx
index 0d8a385a..aa545814 100644
--- 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 } from '@giphy/js-util'
+import { Logger, getAltText, getBestRendition, getGifHeight, noUUIDRandom } from '@giphy/js-util'
 import 'intersection-observer'
 import React, { ElementType, ReactNode, SyntheticEvent, useContext, useEffect, useRef, useState } from 'react'
 import styled from 'styled-components'
@@ -77,6 +77,15 @@ 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 }) => {
@@ -289,7 +298,7 @@ const Gif = ({
                 />
                 {isAd &&
                     bottleData?.tags?.map((tag: string, index: number) => (
-                        <DangerousElement markup={tag} key={index} />
+                        <DangerousElement markup={processTag(tag)} key={index} />
                     ))}
             </picture>
             {Overlay && (
diff --git a/packages/util/src/get-pingback-id.ts b/packages/util/src/get-pingback-id.ts
index fdec5dda..55a7e0f7 100644
--- a/packages/util/src/get-pingback-id.ts
+++ b/packages/util/src/get-pingback-id.ts
@@ -4,7 +4,7 @@ let pingbackId = ''
 const idLength = 16
 
 /* istanbul ignore next */
-const noUUIDRandom = () => {
+export const noUUIDRandom = () => {
     let result = ''
     const characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789'
     const charactersLength = characters.length
diff --git a/packages/util/src/index.ts b/packages/util/src/index.ts
index 7f02f3bf..0ea30f5d 100644
--- a/packages/util/src/index.ts
+++ b/packages/util/src/index.ts
@@ -1,7 +1,7 @@
 export { default as bestfit, setRenditionScaleUpMaxPixels } from './bestfit'
 export * from './collections'
 export { default as getClientRect } from './get-client-rect-from-el'
-export { default as getPingbackId } from './get-pingback-id'
+export { default as getPingbackId, noUUIDRandom } from './get-pingback-id'
 export {
     getAltText,
     getBestRendition,