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) => ( - + ))} {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,