@giphy/js-util 0.0.0-canary-20230620165510

package/src/__tests__/git-util-best-rendition.test.ts

@@ -0,0 +1,304 @@
+import { setRenditionScaleUpMaxPixels } from '../bestfit'
+import { getBestRenditionUrl, getBestVideo } from '../gif-utils'
+
+const testGifLandscape: any = {
+    images: {
+        fixed_height_still: {
+            url: '/media/200_s.gif',
+            width: '355',
+            height: '200',
+        },
+        original_still: {
+            url: '/media/giphy_s.gif',
+            width: '600',
+            height: '338',
+        },
+        fixed_width: {
+            url: '/media/200x113.gif',
+            width: '200',
+            height: '113',
+            size: '77670',
+            mp4: '/media/200x113.mp4',
+            mp4_size: '11777',
+            webp: '/media/200x113.webp',
+            webp_size: '52404',
+        },
+        fixed_height_small_still: {
+            url: '/media/100_s.gif',
+            width: '178',
+            height: '100',
+        },
+        fixed_height_small: {
+            url: '/media/178x100.gif',
+            width: '178',
+            height: '100',
+            size: '169486',
+            mp4: '/media/100.mp4',
+            mp4_size: '68837',
+            webp: '/media/100.webp',
+            webp_size: '43392',
+        },
+        fixed_width_small_still: {
+            url: '/media/100w_s.gif',
+            width: '100',
+            height: '56',
+        },
+        fixed_width_still: {
+            url: '/media/200w_s.gif',
+            width: '200',
+            height: '113',
+        },
+        fixed_width_small: {
+            url: '/media/100x56.gif',
+            width: '100',
+            height: '56',
+            size: '77670',
+            mp4: '/media/100x56.mp4',
+            mp4_size: '31328',
+            webp: '/media/100x56.webp',
+            webp_size: '17910',
+        },
+        original: {
+            url: '/media/600x338.gif',
+            width: '600',
+            height: '338',
+            size: '1020165',
+            frames: '14',
+            mp4: '/media/giphy.mp4',
+            mp4_size: '41339',
+            webp: '/media/giphy.webp',
+            webp_size: '295984',
+        },
+        fixed_height: {
+            url: '/media/355x200.gif',
+            width: '355',
+            height: '200',
+            size: '169486',
+            mp4: '/media/200.mp4',
+            mp4_size: '11945',
+            webp: '/media/200.webp',
+            webp_size: '129066',
+        },
+    },
+}
+
+const testVideo = {
+    ...testGifLandscape,
+    video: {
+        assets: {
+            fixed_width: {
+                url: '/media/200x113.gif',
+                width: '200',
+                height: '113',
+                size: '77670',
+                mp4: '/media/200x113.mp4',
+                mp4_size: '11777',
+                webp: '/media/200x113.webp',
+                webp_size: '52404',
+            },
+            fixed_width_small: {
+                url: '/media/100x56.gif',
+                width: '100',
+                height: '56',
+                size: '77670',
+                mp4: '/media/100x56.mp4',
+                mp4_size: '31328',
+                webp: '/media/100x56.webp',
+                webp_size: '17910',
+            },
+            original: {
+                url: '/media/600x338.gif',
+                width: '600',
+                height: '338',
+                size: '1020165',
+                frames: '14',
+                mp4: '/media/giphy.mp4',
+                mp4_size: '41339',
+                webp: '/media/giphy.webp',
+                webp_size: '295984',
+            },
+            fixed_height: {
+                url: '/media/355x200.gif',
+                width: '355',
+                height: '200',
+                size: '169486',
+                mp4: '/media/200.mp4',
+                mp4_size: '11945',
+                webp: '/media/200.webp',
+                webp_size: '129066',
+            },
+            fixed_height_small: {
+                url: '/media/178x100.gif',
+                width: '178',
+                height: '100',
+                size: '169486',
+                mp4: '/media/100.mp4',
+                mp4_size: '68837',
+                webp: '/media/100.webp',
+                webp_size: '43392',
+            },
+        },
+    },
+}
+
+const testGifPortrait: any = {
+    images: {
+        fixed_height_still: {
+            url: '/media/200_s.gif',
+            width: '200',
+            height: '355',
+        },
+        original_still: {
+            url: '/media/giphy_s.gif',
+            width: '338',
+            height: '600',
+        },
+        fixed_width: {
+            url: '/media/113x200.gif',
+            width: '113',
+            height: '200',
+            size: '77670',
+            mp4: '/media/200x113.mp4',
+            mp4_size: '11777',
+            webp: '/media/200x113.webp',
+            webp_size: '52404',
+        },
+        fixed_height_small_still: {
+            url: '/media/100_s.gif',
+            width: '100',
+            height: '178',
+        },
+        fixed_height_small: {
+            url: '/media/100x178.gif',
+            width: '100',
+            height: '178',
+            size: '169486',
+            mp4: '/media/100.mp4',
+            mp4_size: '68837',
+            webp: '/media/100.webp',
+            webp_size: '43392',
+        },
+        fixed_width_small_still: {
+            url: '/media/100w_s.gif',
+            width: '56',
+            height: '100',
+        },
+        fixed_width_still: {
+            url: '/media/200w_s.gif',
+            width: '113',
+            height: '200',
+        },
+        fixed_width_small: {
+            url: '/media/56x100.gif',
+            width: '56',
+            height: '100',
+            size: '77670',
+            mp4: '/media/100x56.mp4',
+            mp4_size: '31328',
+            webp: '/media/100x56.webp',
+            webp_size: '17910',
+        },
+        original: {
+            url: '/media/338x600.gif',
+            width: '338',
+            height: '600',
+            size: '1020165',
+            frames: '14',
+            mp4: '/media/giphy.mp4',
+            mp4_size: '41339',
+            webp: '/media/giphy.webp',
+            webp_size: '295984',
+        },
+        fixed_height: {
+            url: '/media/200x355.gif',
+            width: '200',
+            height: '355',
+            size: '169486',
+            mp4: '/media/200.mp4',
+            mp4_size: '11945',
+            webp: '/media/200.webp',
+            webp_size: '129066',
+        },
+    },
+}
+
+const testGifVideo: any = {
+    type: 'video',
+    images: {},
+    video: { previews: testGifLandscape.images },
+}
+
+describe('gif util', () => {
+    beforeEach(() => {
+        setRenditionScaleUpMaxPixels(50)
+    })
+    test('getBestRenditionUrl ', () => {
+        expect(getBestRenditionUrl(testGifLandscape, 450, 350)).toEqual('/media/600x338.gif')
+        expect(getBestRenditionUrl(testGifLandscape, 400, 300)).toEqual('/media/600x338.gif')
+        expect(getBestRenditionUrl(testGifLandscape, 300, 200)).toEqual('/media/355x200.gif')
+        expect(getBestRenditionUrl(testGifLandscape, 200, 200)).toEqual('/media/355x200.gif')
+        expect(getBestRenditionUrl(testGifLandscape, 100, 100)).toEqual('/media/100x56.gif')
+        expect(getBestRenditionUrl(testGifLandscape, 300, 200)).toEqual('/media/355x200.gif')
+        // within the scaleup range
+        expect(getBestRenditionUrl(testGifLandscape, 200, 100)).toEqual('/media/178x100.gif')
+        expect(getBestRenditionUrl(testGifLandscape, 200, 100)).toEqual('/media/178x100.gif')
+        expect(getBestRenditionUrl(testGifLandscape, 178, 100)).toEqual('/media/178x100.gif')
+        expect(getBestRenditionUrl(testGifLandscape, 100, 100)).toEqual('/media/100x56.gif')
+        expect(getBestRenditionUrl(testGifLandscape, 1, 1)).toEqual('/media/100x56.gif')
+        expect(getBestRenditionUrl(testGifLandscape, 0, 1)).toEqual('')
+    })
+    test('getBestVideo ', () => {
+        expect(getBestVideo(testVideo.video, 450, 350)?.url).toEqual('/media/600x338.gif')
+        expect(getBestVideo(testVideo.video, 400, 300)?.url).toEqual('/media/600x338.gif')
+        expect(getBestVideo(testVideo.video, 300, 200)?.url).toEqual('/media/355x200.gif')
+        expect(getBestVideo(testVideo.video, 200, 200)?.url).toEqual('/media/355x200.gif')
+        expect(getBestVideo(testVideo.video, 100, 100)?.url).toEqual('/media/100x56.gif')
+        expect(getBestVideo(testVideo.video, 300, 200)?.url).toEqual('/media/355x200.gif')
+        // within the scaleup range
+        expect(getBestVideo(testVideo.video, 200, 100)?.url).toEqual('/media/178x100.gif')
+        expect(getBestVideo(testVideo.video, 200, 100)?.url).toEqual('/media/178x100.gif')
+        expect(getBestVideo(testVideo.video, 178, 100)?.url).toEqual('/media/178x100.gif')
+        expect(getBestVideo(testVideo.video, 100, 100)?.url).toEqual('/media/100x56.gif')
+        expect(getBestVideo(testVideo.video, 1, 1)?.url).toEqual('/media/100x56.gif')
+        // expect(getBestVideo(testVideo.video, 0, 1).u).toEqual('')
+    })
+    test('getBestRenditionUrl portrait target landscape gif ', () => {
+        expect(getBestRenditionUrl(testGifLandscape, 700, 450)).toEqual('/media/600x338.gif')
+        expect(getBestRenditionUrl(testGifLandscape, 350, 450)).toEqual('/media/600x338.gif')
+        expect(getBestRenditionUrl(testGifLandscape, 300, 400)).toEqual('/media/600x338.gif')
+        expect(getBestRenditionUrl(testGifLandscape, 200, 300)).toEqual('/media/600x338.gif')
+        expect(getBestRenditionUrl(testGifLandscape, 100, 200)).toEqual('/media/355x200.gif')
+        expect(getBestRenditionUrl(testGifLandscape, 50, 100)).toEqual('/media/100x56.gif')
+        expect(getBestRenditionUrl(testGifLandscape, 1, 1)).toEqual('/media/100x56.gif')
+        expect(getBestRenditionUrl(testGifLandscape, 0, 1)).toEqual('')
+    })
+    test('getBestRenditionUrl landscape target portrait gif ', () => {
+        expect(getBestRenditionUrl(testGifPortrait, 700, 700)).toEqual('/media/338x600.gif')
+        expect(getBestRenditionUrl(testGifPortrait, 338, 200)).toEqual('/media/338x600.gif')
+        expect(getBestRenditionUrl(testGifPortrait, 300, 200)).toEqual('/media/338x600.gif')
+        expect(getBestRenditionUrl(testGifPortrait, 200, 100)).toEqual('/media/200x355.gif')
+        expect(getBestRenditionUrl(testGifPortrait, 100, 50)).toEqual('/media/56x100.gif')
+        expect(getBestRenditionUrl(testGifPortrait, 1, 1)).toEqual('/media/56x100.gif')
+        expect(getBestRenditionUrl(testGifPortrait, 0, 1)).toEqual('')
+    })
+    test('getBestRenditionUrl type video ', () => {
+        expect(getBestRenditionUrl(testGifVideo, 450, 350)).toEqual('/media/600x338.gif')
+        expect(getBestRenditionUrl(testGifVideo, 400, 300)).toEqual('/media/600x338.gif')
+    })
+    test('getBestRenditionUrl higher quality: 20', () => {
+        setRenditionScaleUpMaxPixels(20)
+        expect(getBestRenditionUrl(testGifLandscape, 450, 350)).toEqual('/media/600x338.gif')
+        expect(getBestRenditionUrl(testGifLandscape, 400, 300)).toEqual('/media/600x338.gif')
+        expect(getBestRenditionUrl(testGifLandscape, 300, 200)).toEqual('/media/355x200.gif')
+        expect(getBestRenditionUrl(testGifLandscape, 200, 200)).toEqual('/media/355x200.gif')
+        expect(getBestRenditionUrl(testGifLandscape, 100, 100)).toEqual('/media/178x100.gif')
+        expect(getBestRenditionUrl(testGifLandscape, 300, 200)).toEqual('/media/355x200.gif')
+        // within the scaleup range
+        expect(getBestRenditionUrl(testGifLandscape, 200, 100)).toEqual('/media/200x113.gif')
+        expect(getBestRenditionUrl(testGifLandscape, 200, 100)).toEqual('/media/200x113.gif')
+        expect(getBestRenditionUrl(testGifLandscape, 178, 100)).toEqual('/media/178x100.gif')
+        expect(getBestRenditionUrl(testGifLandscape, 100, 100)).toEqual('/media/178x100.gif')
+        expect(getBestRenditionUrl(testGifLandscape, 1, 1)).toEqual('/media/100x56.gif')
+        expect(getBestRenditionUrl(testGifLandscape, 0, 1)).toEqual('')
+    })
+})

package/src/bestfit.ts

@@ -0,0 +1,64 @@
+import { IRendition } from '@giphy/js-types'
+import { Logger } from './log'
+
+const closestArea = (width: number, height: number, renditions: IRendition[]) => {
+    let currentBest = Infinity
+    let result: IRendition
+    // sort the renditions so we can avoid scaling up low resolutions
+    renditions.forEach((rendition: IRendition) => {
+        const widthPercentage = rendition.width / width
+        const heightPercentage = rendition.height / height
+        // a width percentage of 1 is exact, 2 is double, .5 half etc
+        const areaPercentage = widthPercentage * heightPercentage
+        // img could be bigger or smaller
+        const testBest = Math.abs(1 - areaPercentage) // the closer to 0 the better
+        if (testBest < currentBest) {
+            currentBest = testBest
+            result = rendition
+        }
+    })
+    return result!
+}
+
+let SCALE_UP_MAX_PIXELS = 50
+export const setRenditionScaleUpMaxPixels = (pixels: number) => {
+    Logger.debug(`@giphy/js-util set rendition selection scale up max pixels to ${pixels}`)
+    SCALE_UP_MAX_PIXELS = pixels
+}
+/**
+ * Finds image rendition that best fits a given container preferring images
+ * ##### Note: all renditions are assumed to have the same aspect ratio
+ *
+ * When we have a portrait target and landscape gif, we choose a higher rendition to match
+ * the height of the portrait target, otherwise it's blurry (same applies for landscape to portrait)
+ *
+ * @name bestfit
+ * @function
+ * @param {Array.<Object>} renditions available image renditions each having a width and height property
+ * @param {Number} width
+ * @param {Number} height
+ * @param {Number} scaleUpMaxPixels the maximum pixels an asset should be scaled up
+ */
+function bestfit(
+    renditions: Array<IRendition>,
+    width: number,
+    height: number,
+    scaleUpMaxPixels: number = SCALE_UP_MAX_PIXELS
+) {
+    let [largestRendition] = renditions
+    // filter out renditions that are smaller than the target width and height by scaleUpMaxPixels value
+    const testRenditions = renditions.filter(rendition => {
+        if (rendition.width * rendition.height > largestRendition.width * largestRendition.height) {
+            largestRendition = rendition
+        }
+        return width - rendition.width <= scaleUpMaxPixels && height - rendition.height <= scaleUpMaxPixels
+    })
+    // if all are too small, use the largest we have
+    if (testRenditions.length === 0) {
+        return largestRendition
+    }
+    // find the closest area of the filtered renditions
+    return closestArea(width, height, testRenditions)
+}
+
+export default bestfit

package/src/collections.ts

@@ -0,0 +1,36 @@
+export function mapValues(object: any, mapFn: (val: any, key: string) => any): any {
+    if (Array.isArray(object)) {
+        throw `This map is just for objects, just use array.map for arrays`
+    }
+    return Object.keys(object).reduce((result: any, key: string) => {
+        result[key] = mapFn(object[key], key)
+        return result
+    }, {})
+}
+
+export function forEach(object: any, mapFn: (val: any, key: any) => void): void {
+    if (Array.isArray(object)) {
+        throw `This map is just for objects, just use array.forEach for arrays`
+    }
+    return Object.keys(object).forEach((key: string) => {
+        mapFn(object[key], key)
+    })
+}
+
+export function take<T>(arr: T[], count = 0): T[] {
+    return arr.slice(0, count)
+}
+
+export function without<T>(arr: T[], values: T[]): T[] {
+    return arr.filter(val => values.indexOf(val) === -1)
+}
+
+export function pick<T extends object, U extends keyof T>(object: T, pick: Array<U>): Pick<T, U> {
+    const res: Partial<T> = {}
+    pick.forEach((key: U) => {
+        if (object[key] !== undefined) {
+            res[key] = object[key]
+        }
+    })
+    return res as Pick<T, U>
+}

package/src/get-client-rect-from-el.ts

@@ -0,0 +1,29 @@
+/**
+ * @param el HTMLElement
+ * @returns calculated properties of DOMReact
+ */
+const getClientRect = (el: HTMLElement): DOMRectReadOnly => {
+    let left = 0
+    let top = 0
+    const width = el.offsetWidth
+    const height = el.offsetHeight
+    // no layout thrash
+    do {
+        left += el.offsetLeft
+        top += el.offsetTop
+        el = el.offsetParent as HTMLElement
+    } while (el)
+    const result = {
+        left,
+        top,
+        width,
+        height,
+        right: left + width,
+        bottom: top + height,
+        x: left,
+        y: top,
+    }
+    return { ...result, toJSON: () => JSON.stringify(result) }
+}
+
+export default getClientRect

package/src/get-pingback-id.ts

@@ -0,0 +1,42 @@
+import { v4 as uuid } from 'uuid'
+let pingbackId = ''
+
+const idLength = 16
+
+/* istanbul ignore next */
+const noUUIDRandom = () => {
+    let result = ''
+    const characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789'
+    const charactersLength = characters.length
+    for (let i = 0; i < idLength; i++) {
+        result += characters.charAt(Math.floor(Math.random() * charactersLength))
+    }
+    return result
+}
+const getPingbackId = () => {
+    // it exists in memory
+    if (!pingbackId) {
+        try {
+            // it exists in storage
+            pingbackId = sessionStorage.getItem('giphyPingbackId') as string
+        } catch (_) {}
+        if (!pingbackId) {
+            // we need to create it
+            const hexTime = new Date().getTime().toString(16) // was told to mimic what we had
+            try {
+                // React Native doesn't support uuid without a polyfill
+                pingbackId = `${hexTime}${uuid().replace(/-/g, '')}`.substring(0, idLength) // 16 character max
+            } catch (error) {
+                /* istanbul ignore next */
+                pingbackId = noUUIDRandom()
+            }
+            try {
+                // save in storage
+                sessionStorage.setItem('giphyPingbackId', pingbackId)
+            } catch (_) {}
+        }
+    }
+    return pingbackId
+}
+
+export default getPingbackId

package/src/gif-utils.ts

@@ -0,0 +1,127 @@
+import { IGif, IImage, IImages, ImageAllTypes, IRendition } from '@giphy/js-types'
+import IVideo from '@giphy/js-types/dist/video'
+import bestfit from './bestfit'
+import { pick, take, without } from './collections'
+import { SUPPORTS_WEBP } from './webp-check'
+
+export const getSpecificRendition = (
+    { images, is_sticker: isSticker }: IGif,
+    renditionLabel: string,
+    isStill = false,
+    useVideo = false
+) => {
+    if (!images || !renditionLabel) return ''
+    isStill = isStill && !useVideo
+    // @ts-ignore come back to this
+    const rendition = images[`${renditionLabel}${isStill ? '_still' : ''}`] as ImageAllTypes
+
+    if (rendition) {
+        if (isSticker || isStill) {
+            return rendition.url
+        }
+        const webP = SUPPORTS_WEBP && rendition.webp
+        return useVideo ? rendition.mp4 : webP || rendition.url
+    }
+
+    return ''
+}
+
+interface IRenditionWithName extends IRendition {
+    renditionName: keyof IImages
+}
+
+export const getBestVideo = (video: IGif['video'], width: number, height: number) => {
+    let assets = video?.assets
+    if (assets) {
+        assets = { ...assets }
+        // @ts-ignore we don't show source according to the existing code
+        delete assets.source
+        const filteredAssets = Object.values(assets).sort((a: IRendition, b: IRendition) => a.width - b.width)
+        return bestfit(filteredAssets, width, height) as IImage
+    }
+}
+
+const getRenditions = (type: IGif['type'], images: IImages, video?: IVideo) =>
+    type === 'video' && video && video.previews && !Object.keys(images).length ? video.previews : images
+
+export const getBestRendition = (
+    images: IImages,
+    gifWidth: number,
+    gifHeight: number,
+    scaleUpMaxPixels?: number
+): IRenditionWithName => {
+    const checkRenditions = pick(images, [
+        'original',
+        'fixed_width',
+        'fixed_height',
+        'fixed_width_small',
+        'fixed_height_small',
+    ])
+    const testImages = Object.entries(checkRenditions).map(([renditionName, val]) => ({
+        renditionName,
+        ...val,
+    })) as IRenditionWithName[]
+    return bestfit(testImages, gifWidth, gifHeight, scaleUpMaxPixels) as IRenditionWithName
+}
+
+type Options = {
+    isStill?: boolean
+    useVideo?: boolean
+    scaleUpMaxPixels?: number
+}
+export const getBestRenditionUrl = (
+    { images, video, type }: IGif,
+    gifWidth: number,
+    gifHeight: number,
+    options: Options = { isStill: false, useVideo: false }
+): keyof IImages | '' => {
+    if (!gifWidth || !gifHeight || !images) return ''
+    const { useVideo, isStill, scaleUpMaxPixels } = options
+    const renditions = getRenditions(type, images, video)
+    const { renditionName } = getBestRendition(renditions, gifWidth, gifHeight, scaleUpMaxPixels)
+
+    // still, video, webp or gif
+    const key = `${renditionName}${isStill && !useVideo ? '_still' : ''}` as keyof IImages
+    const rendition = renditions[key] as ImageAllTypes
+
+    const match = useVideo ? rendition.mp4 : SUPPORTS_WEBP && rendition.webp ? rendition.webp : rendition.url
+    return (match || '') as keyof IImages
+}
+
+export const getGifHeight = ({ images }: IGif, gifWidth: number) => {
+    const { fixed_width } = images
+    if (fixed_width) {
+        const { width, height } = fixed_width
+        const aspectRatio = width / height
+        return Math.round(gifWidth / aspectRatio)
+    }
+    return 0
+}
+
+export const getGifWidth = ({ images }: IGif, gifHeight: number) => {
+    const { fixed_width } = images
+    if (fixed_width) {
+        const { width, height } = fixed_width
+        const aspectRatio = width / height
+        return Math.round(gifHeight * aspectRatio)
+    }
+    return 0
+}
+
+/**
+ * GIF Text - Alt Text: Generates alt text for
+ * GIF images based on username and tags.
+ * @prop  {Gif}
+ * @return {String} GIF alt text.
+ */
+export const getAltText = ({ alt_text, user, tags = [], is_sticker = false, title = '' }: IGif): string => {
+    if (alt_text) {
+        return alt_text
+    }
+    if (title) {
+        return title
+    }
+    const username = (user && user.username) || ''
+    const filteredTags = take(without(tags, ['transparent']), username ? 4 : 5)
+    return `${username ? `${username} ` : ``}${filteredTags.join(' ')} ${is_sticker ? 'Sticker' : 'GIF'}`
+}

package/src/index.ts

@@ -0,0 +1,16 @@
+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 {
+    getAltText,
+    getBestRendition,
+    getBestRenditionUrl,
+    getBestVideo,
+    getGifHeight,
+    getGifWidth,
+    getSpecificRendition,
+} from './gif-utils'
+export * from './log'
+export * from './sdk-headers'
+export { checkIfWebP } from './webp-check'

package/src/log.ts

@@ -0,0 +1,36 @@
+/* istanbul ignore next */
+export enum LogLevel {
+    DEBUG = 0,
+    INFO = 1,
+    WARN = 2,
+    ERROR = 3,
+}
+/* istanbul ignore next */
+export const Logger = {
+    ENABLED:
+        typeof window !== 'undefined' &&
+        typeof location !== 'undefined' &&
+        location.search.indexOf('giphy-debug') !== -1,
+    LEVEL: 0,
+    PREFIX: 'GiphyJS',
+    debug: (...msg: any) => {
+        if (Logger.ENABLED && Logger.LEVEL <= LogLevel.DEBUG) {
+            console.debug(Logger.PREFIX, ...msg) // eslint-disable-line no-console
+        }
+    },
+    info: (...msg: any) => {
+        if (Logger.ENABLED && Logger.LEVEL <= LogLevel.INFO) {
+            console.info(Logger.PREFIX, ...msg) // eslint-disable-line no-console
+        }
+    },
+    warn: (...msg: any) => {
+        if (Logger.ENABLED && Logger.LEVEL <= LogLevel.WARN) {
+            console.warn(Logger.PREFIX, ...msg) // eslint-disable-line no-console
+        }
+    },
+    error: (...msg: any) => {
+        if (Logger.ENABLED && Logger.LEVEL <= LogLevel.ERROR) {
+            console.error(Logger.PREFIX, ...msg) // eslint-disable-line no-console
+        }
+    },
+}

package/src/sdk-headers.ts

@@ -0,0 +1,18 @@
+type GiphySDKRequestHeader = 'X-GIPHY-SDK-NAME' | 'X-GIPHY-SDK-VERSION' | 'X-GIPHY-SDK-PLATFORM'
+const gl = ((typeof window !== 'undefined' ? window : global) || {}) as any
+// define _GIPHY_SDK_HEADERS_ if they don't exist
+gl._GIPHY_SDK_HEADERS_ =
+    gl._GIPHY_SDK_HEADERS_ ||
+    (gl.Headers
+        ? new gl.Headers({
+              'X-GIPHY-SDK-PLATFORM': 'web',
+          })
+        : undefined)
+
+export const getGiphySDKRequestHeaders = (): Headers | undefined => gl._GIPHY_SDK_HEADERS_
+
+export const appendGiphySDKRequestHeader = (key: GiphySDKRequestHeader, value: string) =>
+    getGiphySDKRequestHeaders()?.set(key, value)
+
+export const appendGiphySDKRequestParam = (key: GiphySDKRequestHeader, value: string) =>
+    getGiphySDKRequestHeaders()?.set(key, value)