Skip to content

Commit

Permalink
bottle data tags are urls
Browse files Browse the repository at this point in the history
  • Loading branch information
giannif committed Oct 31, 2024
1 parent 209f5ba commit 5e92104
Show file tree
Hide file tree
Showing 3 changed files with 9 additions and 12 deletions.
8 changes: 5 additions & 3 deletions packages/react-components/src/components/bottle-data.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -15,22 +15,24 @@ 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 = ''
elRef.current.append(documentFragment)
// 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
4 changes: 2 additions & 2 deletions packages/react-components/src/components/gif.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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`)
}
Expand Down Expand Up @@ -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
Expand Down
9 changes: 2 additions & 7 deletions packages/react-components/stories/gif.stories.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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%%`,
],
},
},
Expand Down

0 comments on commit 5e92104

Please sign in to comment.