From 9a45ef47f7c0753e9c99aeffd7ab6122490465c4 Mon Sep 17 00:00:00 2001
From: Nick Santaniello <nicksantan@giphy.com>
Date: Thu, 2 May 2024 13:49:13 -0400
Subject: [PATCH] restored vanilla js gif component to original state

---
 packages/components/src/components/gif.tsx | 54 +---------------------
 1 file changed, 2 insertions(+), 52 deletions(-)

diff --git a/packages/components/src/components/gif.tsx b/packages/components/src/components/gif.tsx
index f55382d3..f4ff018c 100644
--- a/packages/components/src/components/gif.tsx
+++ b/packages/components/src/components/gif.tsx
@@ -1,14 +1,6 @@
 import { giphyBlue, giphyGreen, giphyPurple, giphyRed, giphyYellow } from '@giphy/js-brand'
 import { IGif, ImageAllTypes, IUser } from '@giphy/js-types'
-import {
-    getAltText,
-    getBestRendition,
-    getGifHeight,
-    Logger,
-    constructMoatData,
-    injectTrackingPixel,
-} from '@giphy/js-util'
-import moat from '@giphy/moat-loader'
+import { getAltText, getBestRendition, getGifHeight, Logger } from '@giphy/js-util'
 import { css, cx } from '@emotion/css'
 import { h } from 'preact'
 import { useContext, useEffect, useRef, useState } from 'preact/hooks'
@@ -17,7 +9,6 @@ import AttributionOverlay from './attribution/overlay'
 import VerifiedBadge from './attribution/verified-badge'
 import { PingbackContext } from './pingback-context-manager'
 
-const moatLoader = moat.loadMoatTag('giphydisplay879451385633', 'https://giphyscripts.s3.amazonaws.com/moat/moatad.js')
 const gifCss = css`
     display: block;
     &:focus {
@@ -86,7 +77,6 @@ const noop = () => {}
 
 const Gif = ({
     gif,
-    gif: { bottle_data: bottleData = {} },
     width,
     height: forcedHeight,
     onGifRightClick = noop,
@@ -122,10 +112,6 @@ const Gif = ({
     const hoverTimeout = useMutableRef<number>()
     // fire onseen ref (changes per gif, so need a ref)
     const sendOnSeen = useRef<(_: IntersectionObserverEntry) => void>(noop)
-    // moat ad number
-    const moatAdNumber = useMutableRef<number>()
-    // are we displaying an ad
-    const isAd = Object.keys(bottleData).length > 0
     // custom pingback
     const { attributes } = useContext(PingbackContext)
 
@@ -166,19 +152,7 @@ const Gif = ({
             fullGifObserver.current.disconnect()
         }
     }
-    const trackWithMoat = async () => {
-        if (shouldShowMedia && container.current) {
-            const { bottle_data, response_id } = gif
-            const moatCompatibleData = constructMoatData(bottle_data as any)
-            if (moatCompatibleData) {
-                moatCompatibleData.zMoatSession = response_id
-                await moatLoader
-                if (container.current) {
-                    moatAdNumber.current = moat.startTracking(container.current, moatCompatibleData)
-                }
-            }
-        }
-    }
+
     const onImageLoad = (e: Event) => {
         if (!fullGifObserver.current) {
             fullGifObserver.current = new IntersectionObserver(
@@ -194,12 +168,6 @@ const Gif = ({
             // observe img for full gif view
             fullGifObserver.current.observe(container.current)
         }
-        if (isAd) {
-            if (moatAdNumber.current === undefined) {
-                trackWithMoat()
-            }
-            injectTrackingPixel(bottleData.tags)
-        }
         onGifVisible(gif, e) // gif is visible, perhaps just partially
         setLoadedClassName(Gif.imgLoadedClassName)
     }
@@ -211,23 +179,6 @@ const Gif = ({
         setHasFiredSeen(false)
     }, [gif.id])
 
-    const stopTracking = () => {
-        // if we have a moat ad number
-        if (moatAdNumber.current !== undefined) {
-            // stop tracking
-            moat.stopTracking(moatAdNumber.current)
-            // remove the moat ad number
-            moatAdNumber.current = undefined
-        }
-    }
-
-    // if this component goes from showing an ad to not an ad
-    useEffect(() => {
-        if (!shouldShowMedia) {
-            return () => stopTracking()
-        }
-    }, [shouldShowMedia])
-
     useEffect(() => {
         showGifObserver.current = new IntersectionObserver(([entry]: IntersectionObserverEntry[]) => {
             const { isIntersecting } = entry
@@ -244,7 +195,6 @@ const Gif = ({
             if (showGifObserver.current) showGifObserver.current.disconnect()
             if (fullGifObserver.current) fullGifObserver.current.disconnect()
             if (hoverTimeout.current) clearTimeout(hoverTimeout.current)
-            stopTracking()
         }
     }, [])
     const height = forcedHeight || getGifHeight(gif, width)