@giphy/js-util 4.4.2 → 5.1.0-beta.0

package/dist/index.js

@@ -1,41 +1,364 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __exportStar = (this && this.__exportStar) || function(m, exports) {
-    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.checkIfWebP = exports.getSpecificRendition = exports.getGifWidth = exports.getGifHeight = exports.getBestVideo = exports.getBestRenditionUrl = exports.getBestRendition = exports.getAltText = exports.getPingbackId = exports.getClientRect = exports.setRenditionScaleUpMaxPixels = exports.bestfit = void 0;
-var bestfit_1 = require("./bestfit");
-Object.defineProperty(exports, "bestfit", { enumerable: true, get: function () { return __importDefault(bestfit_1).default; } });
-Object.defineProperty(exports, "setRenditionScaleUpMaxPixels", { enumerable: true, get: function () { return bestfit_1.setRenditionScaleUpMaxPixels; } });
-__exportStar(require("./collections"), exports);
-var get_client_rect_from_el_1 = require("./get-client-rect-from-el");
-Object.defineProperty(exports, "getClientRect", { enumerable: true, get: function () { return __importDefault(get_client_rect_from_el_1).default; } });
-var get_pingback_id_1 = require("./get-pingback-id");
-Object.defineProperty(exports, "getPingbackId", { enumerable: true, get: function () { return __importDefault(get_pingback_id_1).default; } });
-var gif_utils_1 = require("./gif-utils");
-Object.defineProperty(exports, "getAltText", { enumerable: true, get: function () { return gif_utils_1.getAltText; } });
-Object.defineProperty(exports, "getBestRendition", { enumerable: true, get: function () { return gif_utils_1.getBestRendition; } });
-Object.defineProperty(exports, "getBestRenditionUrl", { enumerable: true, get: function () { return gif_utils_1.getBestRenditionUrl; } });
-Object.defineProperty(exports, "getBestVideo", { enumerable: true, get: function () { return gif_utils_1.getBestVideo; } });
-Object.defineProperty(exports, "getGifHeight", { enumerable: true, get: function () { return gif_utils_1.getGifHeight; } });
-Object.defineProperty(exports, "getGifWidth", { enumerable: true, get: function () { return gif_utils_1.getGifWidth; } });
-Object.defineProperty(exports, "getSpecificRendition", { enumerable: true, get: function () { return gif_utils_1.getSpecificRendition; } });
-__exportStar(require("./log"), exports);
-__exportStar(require("./sdk-headers"), exports);
-var webp_check_1 = require("./webp-check");
-Object.defineProperty(exports, "checkIfWebP", { enumerable: true, get: function () { return webp_check_1.checkIfWebP; } });
-//# sourceMappingURL=index.js.map
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+
+// src/log.ts
+var LogLevel = /* @__PURE__ */ ((LogLevel2) => {
+  LogLevel2[LogLevel2["DEBUG"] = 0] = "DEBUG";
+  LogLevel2[LogLevel2["INFO"] = 1] = "INFO";
+  LogLevel2[LogLevel2["WARN"] = 2] = "WARN";
+  LogLevel2[LogLevel2["ERROR"] = 3] = "ERROR";
+  return LogLevel2;
+})(LogLevel || {});
+var Logger = {
+  ENABLED: typeof window !== "undefined" && typeof location !== "undefined" && location.search.indexOf("giphy-debug") !== -1,
+  LEVEL: 0,
+  PREFIX: "GiphyJS",
+  debug: (...msg) => {
+    if (Logger.ENABLED && Logger.LEVEL <= 0 /* DEBUG */) {
+      console.debug(Logger.PREFIX, ...msg);
+    }
+  },
+  info: (...msg) => {
+    if (Logger.ENABLED && Logger.LEVEL <= 1 /* INFO */) {
+      console.info(Logger.PREFIX, ...msg);
+    }
+  },
+  warn: (...msg) => {
+    if (Logger.ENABLED && Logger.LEVEL <= 2 /* WARN */) {
+      console.warn(Logger.PREFIX, ...msg);
+    }
+  },
+  error: (...msg) => {
+    if (Logger.ENABLED && Logger.LEVEL <= 3 /* ERROR */) {
+      console.error(Logger.PREFIX, ...msg);
+    }
+  }
+};
+
+// src/bestfit.ts
+var closestArea = (width, height, renditions) => {
+  let currentBest = Infinity;
+  let result;
+  renditions.forEach((rendition) => {
+    const widthPercentage = rendition.width / width;
+    const heightPercentage = rendition.height / height;
+    const areaPercentage = widthPercentage * heightPercentage;
+    const testBest = Math.abs(1 - areaPercentage);
+    if (testBest < currentBest) {
+      currentBest = testBest;
+      result = rendition;
+    }
+  });
+  return result;
+};
+var SCALE_UP_MAX_PIXELS = 50;
+var setRenditionScaleUpMaxPixels = (pixels) => {
+  Logger.debug(`@giphy/js-util set rendition selection scale up max pixels to ${pixels}`);
+  SCALE_UP_MAX_PIXELS = pixels;
+};
+function bestfit(renditions, width, height, scaleUpMaxPixels = SCALE_UP_MAX_PIXELS) {
+  let [largestRendition] = renditions;
+  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 (testRenditions.length === 0) {
+    return largestRendition;
+  }
+  return closestArea(width, height, testRenditions);
+}
+var bestfit_default = bestfit;
+
+// src/collections.ts
+function mapValues(object, mapFn) {
+  if (Array.isArray(object)) {
+    throw `This map is just for objects, just use array.map for arrays`;
+  }
+  return Object.keys(object).reduce((result, key) => {
+    result[key] = mapFn(object[key], key);
+    return result;
+  }, {});
+}
+function forEach(object, mapFn) {
+  if (Array.isArray(object)) {
+    throw `This map is just for objects, just use array.forEach for arrays`;
+  }
+  return Object.keys(object).forEach((key) => {
+    mapFn(object[key], key);
+  });
+}
+function take(arr, count = 0) {
+  return arr.slice(0, count);
+}
+function without(arr, values) {
+  return arr.filter((val) => values.indexOf(val) === -1);
+}
+function pick(object, pick2) {
+  const res = {};
+  pick2.forEach((key) => {
+    if (object[key] !== void 0) {
+      res[key] = object[key];
+    }
+  });
+  return res;
+}
+
+// src/construct-moat-data.ts
+var constructMoatData = ({ tdata }) => {
+  var _a;
+  const [moatTrackerData] = ((_a = tdata == null ? void 0 : tdata.web) == null ? void 0 : _a.filter((tracker) => tracker.vendor === "Moat")) || [];
+  if (moatTrackerData == null ? void 0 : moatTrackerData.verificationParameters) {
+    const {
+      moatClientLevel1 = "_ADVERTISER_",
+      moatClientLevel2 = "_CAMPAIGN_",
+      moatClientLevel3 = "_LINE_ITEM_",
+      moatClientLevel4 = "_CREATIVE_",
+      moatClientSlicer1 = "_SITE_",
+      moatClientSlicer2 = "_PLACEMENT_",
+      zMoatPosition = "_POSITION_"
+    } = moatTrackerData.verificationParameters;
+    return {
+      moatClientLevel1,
+      moatClientLevel2,
+      moatClientLevel3,
+      moatClientLevel4,
+      moatClientSlicer1,
+      moatClientSlicer2,
+      zMoatPosition
+    };
+  }
+};
+
+// src/get-client-rect-from-el.ts
+var getClientRect = (el) => {
+  let left = 0;
+  let top = 0;
+  const width = el.offsetWidth;
+  const height = el.offsetHeight;
+  do {
+    left += el.offsetLeft;
+    top += el.offsetTop;
+    el = el.offsetParent;
+  } while (el);
+  const result = {
+    left,
+    top,
+    width,
+    height,
+    right: left + width,
+    bottom: top + height,
+    x: left,
+    y: top
+  };
+  return __spreadProps(__spreadValues({}, result), { toJSON: () => JSON.stringify(result) });
+};
+var get_client_rect_from_el_default = getClientRect;
+
+// src/get-pingback-id.ts
+import { v4 as uuid } from "uuid";
+var pingbackId = "";
+var idLength = 16;
+var 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;
+};
+var getPingbackId = () => {
+  if (!pingbackId) {
+    try {
+      pingbackId = sessionStorage.getItem("giphyPingbackId");
+    } catch (_) {
+    }
+    if (!pingbackId) {
+      const hexTime = (/* @__PURE__ */ new Date()).getTime().toString(16);
+      try {
+        pingbackId = `${hexTime}${uuid().replace(/-/g, "")}`.substring(0, idLength);
+      } catch (error) {
+        pingbackId = noUUIDRandom();
+      }
+      try {
+        sessionStorage.setItem("giphyPingbackId", pingbackId);
+      } catch (_) {
+      }
+    }
+  }
+  return pingbackId;
+};
+var get_pingback_id_default = getPingbackId;
+
+// src/webp-check.ts
+var SUPPORTS_WEBP = null;
+var checkIfWebP = new Promise((resolve) => {
+  if (typeof Image === "undefined") {
+    resolve(false);
+  }
+  const webp = new Image();
+  webp.onload = () => {
+    SUPPORTS_WEBP = true;
+    resolve(SUPPORTS_WEBP);
+  };
+  webp.onerror = () => {
+    SUPPORTS_WEBP = false;
+    resolve(SUPPORTS_WEBP);
+  };
+  webp.src = "data:image/webp;base64,UklGRjoAAABXRUJQVlA4IC4AAACyAgCdASoCAAIALmk0mk0iIiIiIgBoSygABc6WWgAA/veff/0PP8bA//LwYAAA";
+});
+
+// src/gif-utils.ts
+var getSpecificRendition = ({ images, is_sticker: isSticker }, renditionLabel, isStill = false, useVideo = false) => {
+  if (!images || !renditionLabel)
+    return "";
+  isStill = isStill && !useVideo;
+  const rendition = images[`${renditionLabel}${isStill ? "_still" : ""}`];
+  if (rendition) {
+    if (isSticker || isStill) {
+      return rendition.url;
+    }
+    const webP = SUPPORTS_WEBP && rendition.webp;
+    return useVideo ? rendition.mp4 : webP || rendition.url;
+  }
+  return "";
+};
+var getBestVideo = (video, width, height) => {
+  let assets = video == null ? void 0 : video.assets;
+  if (assets) {
+    assets = __spreadValues({}, assets);
+    delete assets.source;
+    const filteredAssets = Object.values(assets).sort((a, b) => a.width - b.width);
+    return bestfit_default(filteredAssets, width, height);
+  }
+};
+var getRenditions = (type, images, video) => type === "video" && video && video.previews && !Object.keys(images).length ? video.previews : images;
+var getBestRendition = (images, gifWidth, gifHeight, scaleUpMaxPixels) => {
+  const checkRenditions = pick(images, [
+    "original",
+    "fixed_width",
+    "fixed_height",
+    "fixed_width_small",
+    "fixed_height_small"
+  ]);
+  const testImages = Object.entries(checkRenditions).map(([renditionName, val]) => __spreadValues({
+    renditionName
+  }, val));
+  return bestfit_default(testImages, gifWidth, gifHeight, scaleUpMaxPixels);
+};
+var getBestRenditionUrl = ({ images, video, type }, gifWidth, gifHeight, options = { isStill: false, useVideo: false }) => {
+  if (!gifWidth || !gifHeight || !images)
+    return "";
+  const { useVideo, isStill, scaleUpMaxPixels } = options;
+  const renditions = getRenditions(type, images, video);
+  const { renditionName } = getBestRendition(renditions, gifWidth, gifHeight, scaleUpMaxPixels);
+  const key = `${renditionName}${isStill && !useVideo ? "_still" : ""}`;
+  const rendition = renditions[key];
+  const match = useVideo ? rendition.mp4 : SUPPORTS_WEBP && rendition.webp ? rendition.webp : rendition.url;
+  return match || "";
+};
+var getGifHeight = ({ images }, gifWidth) => {
+  const { fixed_width } = images;
+  if (fixed_width) {
+    const { width, height } = fixed_width;
+    const aspectRatio = width / height;
+    return Math.round(gifWidth / aspectRatio);
+  }
+  return 0;
+};
+var getGifWidth = ({ images }, gifHeight) => {
+  const { fixed_width } = images;
+  if (fixed_width) {
+    const { width, height } = fixed_width;
+    const aspectRatio = width / height;
+    return Math.round(gifHeight * aspectRatio);
+  }
+  return 0;
+};
+var getAltText = ({ alt_text, user, tags = [], is_sticker = false, title = "" }) => {
+  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"}`;
+};
+
+// src/sdk-headers.ts
+var gl = (typeof window !== "undefined" ? window : global) || {};
+gl._GIPHY_SDK_HEADERS_ = gl._GIPHY_SDK_HEADERS_ || (gl.Headers ? new gl.Headers({
+  "X-GIPHY-SDK-PLATFORM": "web"
+}) : void 0);
+var getGiphySDKRequestHeaders = () => gl._GIPHY_SDK_HEADERS_;
+var appendGiphySDKRequestHeader = (key, value) => {
+  var _a;
+  return (_a = getGiphySDKRequestHeaders()) == null ? void 0 : _a.set(key, value);
+};
+var appendGiphySDKRequestParam = (key, value) => {
+  var _a;
+  return (_a = getGiphySDKRequestHeaders()) == null ? void 0 : _a.set(key, value);
+};
+
+// src/tracking-pixel.ts
+import DOMPurify from "dompurify";
+var injectTrackingPixel = (tags = []) => {
+  tags.forEach((tag) => {
+    var _a;
+    const el = document.createElement("html");
+    tag = tag.replace("%%CACHEBUSTER%%", Date.now().toString());
+    el.innerHTML = DOMPurify.sanitize(tag);
+    const pixel = el.querySelector("img");
+    if (pixel) {
+      (_a = document == null ? void 0 : document.querySelector("head")) == null ? void 0 : _a.appendChild(pixel);
+    }
+  });
+};
+var tracking_pixel_default = injectTrackingPixel;
+export {
+  LogLevel,
+  Logger,
+  appendGiphySDKRequestHeader,
+  appendGiphySDKRequestParam,
+  bestfit_default as bestfit,
+  checkIfWebP,
+  constructMoatData,
+  forEach,
+  getAltText,
+  getBestRendition,
+  getBestRenditionUrl,
+  getBestVideo,
+  get_client_rect_from_el_default as getClientRect,
+  getGifHeight,
+  getGifWidth,
+  getGiphySDKRequestHeaders,
+  get_pingback_id_default as getPingbackId,
+  getSpecificRendition,
+  tracking_pixel_default as injectTrackingPixel,
+  mapValues,
+  pick,
+  setRenditionScaleUpMaxPixels,
+  take,
+  without
+};

package/package.json

@@ -1,32 +1,32 @@
 {
     "scripts": {
-        "clean": "rm -rf ./dist ./esm",
+        "lint": "run -T eslint . --ext .ts,.tsx",
+        "clean": "rm -rf ./dist",
         "dev": "tsc --watch",
-        "build": "tsc && npm run build:esm",
-        "build:esm": "tsc -p ./tsconfig-esm.json",
+        "build": "run -T tsup src/index.ts --format cjs,esm --dts && run -T publint",
         "prepublish": "npm run clean && npm run build",
         "test": "run -T jest --config ./jestconfig.js",
         "test:watch": "run -T jest --config ./jestconfig.js --watchAll"
     },
     "name": "@giphy/js-util",
-    "version": "4.4.2",
-    "main": "dist/index.js",
+    "version": "5.1.0-beta.0",
     "description": "Shared giphy js utils",
     "homepage": "https://github.com/Giphy/giphy-js/tree/master/packages/util",
+    "main": "dist/index.cjs",
     "types": "dist/index.d.ts",
-    "module": "esm/index.js",
+    "module": "dist/index.js",
+    "type": "module",
     "sideEffects": false,
     "exports": {
         ".": {
             "types": "./dist/index.d.ts",
-            "import": "./esm/index.js",
-            "require": "./dist/index.js"
+            "import": "./dist/index.js",
+            "require": "./dist/index.cjs"
         },
         "./package.json": "./package.json"
     },
     "files": [
         "dist/",
-        "esm/",
         "src/**/*"
     ],
     "license": "MIT",
@@ -34,8 +34,8 @@
         "access": "public"
     },
     "dependencies": {
-        "@giphy/js-types": "*",
-        "dompurify": "^2.2.2",
+        "@giphy/js-types": "5.1.0-beta.0",
+        "dompurify": "3.1.0",
         "uuid": "^9.0.0"
     },
     "devDependencies": {

package/src/__tests__/gif-utils.test.ts

@@ -3,12 +3,7 @@ import { forEach, mapValues, pick, take, without } from '../collections'
 import getPingbackId from '../get-pingback-id'
 import { getAltText, getBestRenditionUrl, getGifHeight, getGifWidth, getSpecificRendition } from '../gif-utils'
 
-jest.mock('../webp-check')
-
 describe('response parsing', () => {
-    afterEach(() => {
-        require('../webp-check').__setWebP(false)
-    })
     test('getGifHeight getGifWidth', () => {
         const gif = {
             images: {
@@ -73,9 +68,8 @@ describe('response parsing', () => {
         expect(getBestRenditionUrl(dummyGif as IGif, 10, 10)).toBe(fixedWidth.url)
         expect(getBestRenditionUrl(dummyGif as IGif, 10, 10, { isStill: true })).toBe(fixedWidthStill.url)
         expect(getBestRenditionUrl(dummyGif as IGif, 10, 10, { useVideo: true })).toBe(fixedWidth.mp4)
-        require('../webp-check').__setWebP(true)
-        expect(getBestRenditionUrl(dummyGif as IGif, 10, 10)).toBe(fixedWidth.webp)
-        expect(getBestRenditionUrl(dummyGif as IGif, 10, 10, { isStill: true })).toBe(fixedWidthStill.webp)
+        expect(getBestRenditionUrl(dummyGif as IGif, 10, 10)).toBe(fixedWidth.url)
+        expect(getBestRenditionUrl(dummyGif as IGif, 10, 10, { isStill: true })).toBe(fixedWidthStill.url)
     })
 
     test('getSpecificRendition', () => {
@@ -104,8 +98,7 @@ describe('response parsing', () => {
         expect(getSpecificRendition(dummyGif as IGif, 'fixed_width', true)).toBe(fixedWidthStill.url)
         expect(getSpecificRendition(dummyGif as IGif, 'fixed_width', true, true)).toBe(fixedWidth.mp4)
         expect(getSpecificRendition(dummyGif as IGif, 'fixed_width_still', true, true)).toBe(fixedWidthStill.mp4)
-        require('../webp-check').__setWebP(true)
-        expect(getSpecificRendition(dummyGif as IGif, 'fixed_width')).toBe(fixedWidth.webp)
+        expect(getSpecificRendition(dummyGif as IGif, 'fixed_width')).toBe(fixedWidth.url)
         expect(getSpecificRendition(dummyGif as IGif, 'dsakfjslkj')).toBe('')
         expect(getSpecificRendition({} as IGif, 'fixed_width')).toBe('')
     })

package/src/construct-moat-data.ts

@@ -0,0 +1,44 @@
+type MoatData = {
+    moatClientLevel1: string
+    moatClientLevel2: string
+    moatClientLevel3: string
+    moatClientLevel4: string
+    moatClientSlicer1: string
+    moatClientSlicer2: string
+    zMoatPosition: string
+    zMoatSession?: string
+}
+
+type Tracker = {
+    vendor: string
+    verificationParameters: any
+}
+
+type TData = {
+    web?: Tracker[]
+}
+
+export const constructMoatData = ({ tdata }: { tdata: TData }): MoatData | undefined => {
+    const [moatTrackerData] = tdata?.web?.filter((tracker) => tracker.vendor === 'Moat') || []
+    if (moatTrackerData?.verificationParameters) {
+        const {
+            moatClientLevel1 = '_ADVERTISER_',
+            moatClientLevel2 = '_CAMPAIGN_',
+            moatClientLevel3 = '_LINE_ITEM_',
+            moatClientLevel4 = '_CREATIVE_',
+            moatClientSlicer1 = '_SITE_',
+            moatClientSlicer2 = '_PLACEMENT_',
+            zMoatPosition = '_POSITION_',
+        } = moatTrackerData.verificationParameters
+
+        return {
+            moatClientLevel1,
+            moatClientLevel2,
+            moatClientLevel3,
+            moatClientLevel4,
+            moatClientSlicer1,
+            moatClientSlicer2,
+            zMoatPosition,
+        }
+    }
+}

package/src/index.ts

@@ -1,5 +1,6 @@
 export { default as bestfit, setRenditionScaleUpMaxPixels } from './bestfit'
 export * from './collections'
+export * from './construct-moat-data'
 export { default as getClientRect } from './get-client-rect-from-el'
 export { default as getPingbackId } from './get-pingback-id'
 export {
@@ -13,4 +14,5 @@ export {
 } from './gif-utils'
 export * from './log'
 export * from './sdk-headers'
+export { default as injectTrackingPixel } from './tracking-pixel'
 export { checkIfWebP } from './webp-check'

package/src/tracking-pixel.ts

@@ -0,0 +1,15 @@
+import DOMPurify from 'dompurify'
+
+const injectTrackingPixel = (tags: string[] = []) => {
+    tags.forEach((tag) => {
+        const el = document.createElement('html')
+        tag = tag.replace('%%CACHEBUSTER%%', Date.now().toString())
+        el.innerHTML = DOMPurify.sanitize(tag)
+        const pixel = el.querySelector('img')
+        if (pixel) {
+            document?.querySelector('head')?.appendChild(pixel)
+        }
+    })
+}
+
+export default injectTrackingPixel

package/esm/bestfit.d.ts

@@ -1,18 +0,0 @@
-import { IRendition } from '@giphy/js-types';
-export declare const setRenditionScaleUpMaxPixels: (pixels: number) => void;
-/**
- * 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
- */
-declare function bestfit(renditions: Array<IRendition>, width: number, height: number, scaleUpMaxPixels?: number): IRendition;
-export default bestfit;

package/esm/bestfit.js

@@ -1,57 +0,0 @@
-import { Logger } from './log';
-var closestArea = function (width, height, renditions) {
-    var currentBest = Infinity;
-    var result;
-    // sort the renditions so we can avoid scaling up low resolutions
-    renditions.forEach(function (rendition) {
-        var widthPercentage = rendition.width / width;
-        var heightPercentage = rendition.height / height;
-        // a width percentage of 1 is exact, 2 is double, .5 half etc
-        var areaPercentage = widthPercentage * heightPercentage;
-        // img could be bigger or smaller
-        var testBest = Math.abs(1 - areaPercentage); // the closer to 0 the better
-        if (testBest < currentBest) {
-            currentBest = testBest;
-            result = rendition;
-        }
-    });
-    return result;
-};
-var SCALE_UP_MAX_PIXELS = 50;
-export var setRenditionScaleUpMaxPixels = function (pixels) {
-    Logger.debug("@giphy/js-util set rendition selection scale up max pixels to ".concat(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, width, height, scaleUpMaxPixels) {
-    if (scaleUpMaxPixels === void 0) { scaleUpMaxPixels = SCALE_UP_MAX_PIXELS; }
-    var largestRendition = renditions[0];
-    // filter out renditions that are smaller than the target width and height by scaleUpMaxPixels value
-    var testRenditions = renditions.filter(function (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;
-//# sourceMappingURL=bestfit.js.map

package/esm/bestfit.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"bestfit.js","sourceRoot":"","sources":["../src/bestfit.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,MAAM,EAAE,MAAM,OAAO,CAAA;AAE9B,IAAM,WAAW,GAAG,UAAC,KAAa,EAAE,MAAc,EAAE,UAAwB;IACxE,IAAI,WAAW,GAAG,QAAQ,CAAA;IAC1B,IAAI,MAAkB,CAAA;IACtB,iEAAiE;IACjE,UAAU,CAAC,OAAO,CAAC,UAAC,SAAqB;QACrC,IAAM,eAAe,GAAG,SAAS,CAAC,KAAK,GAAG,KAAK,CAAA;QAC/C,IAAM,gBAAgB,GAAG,SAAS,CAAC,MAAM,GAAG,MAAM,CAAA;QAClD,6DAA6D;QAC7D,IAAM,cAAc,GAAG,eAAe,GAAG,gBAAgB,CAAA;QACzD,iCAAiC;QACjC,IAAM,QAAQ,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,GAAG,cAAc,CAAC,CAAA,CAAC,6BAA6B;QAC3E,IAAI,QAAQ,GAAG,WAAW,EAAE;YACxB,WAAW,GAAG,QAAQ,CAAA;YACtB,MAAM,GAAG,SAAS,CAAA;SACrB;IACL,CAAC,CAAC,CAAA;IACF,OAAO,MAAO,CAAA;AAClB,CAAC,CAAA;AAED,IAAI,mBAAmB,GAAG,EAAE,CAAA;AAC5B,MAAM,CAAC,IAAM,4BAA4B,GAAG,UAAC,MAAc;IACvD,MAAM,CAAC,KAAK,CAAC,wEAAiE,MAAM,CAAE,CAAC,CAAA;IACvF,mBAAmB,GAAG,MAAM,CAAA;AAChC,CAAC,CAAA;AACD;;;;;;;;;;;;;GAaG;AACH,SAAS,OAAO,CACZ,UAA6B,EAC7B,KAAa,EACb,MAAc,EACd,gBAA8C;IAA9C,iCAAA,EAAA,sCAA8C;IAEzC,IAAA,gBAAgB,GAAI,UAAU,GAAd,CAAc;IACnC,oGAAoG;IACpG,IAAM,cAAc,GAAG,UAAU,CAAC,MAAM,CAAC,UAAA,SAAS;QAC9C,IAAI,SAAS,CAAC,KAAK,GAAG,SAAS,CAAC,MAAM,GAAG,gBAAgB,CAAC,KAAK,GAAG,gBAAgB,CAAC,MAAM,EAAE;YACvF,gBAAgB,GAAG,SAAS,CAAA;SAC/B;QACD,OAAO,KAAK,GAAG,SAAS,CAAC,KAAK,IAAI,gBAAgB,IAAI,MAAM,GAAG,SAAS,CAAC,MAAM,IAAI,gBAAgB,CAAA;IACvG,CAAC,CAAC,CAAA;IACF,gDAAgD;IAChD,IAAI,cAAc,CAAC,MAAM,KAAK,CAAC,EAAE;QAC7B,OAAO,gBAAgB,CAAA;KAC1B;IACD,mDAAmD;IACnD,OAAO,WAAW,CAAC,KAAK,EAAE,MAAM,EAAE,cAAc,CAAC,CAAA;AACrD,CAAC;AAED,eAAe,OAAO,CAAA"}

package/esm/collections.d.ts

@@ -1,5 +0,0 @@
-export declare function mapValues(object: any, mapFn: (val: any, key: string) => any): any;
-export declare function forEach(object: any, mapFn: (val: any, key: any) => void): void;
-export declare function take<T>(arr: T[], count?: number): T[];
-export declare function without<T>(arr: T[], values: T[]): T[];
-export declare function pick<T extends object, U extends keyof T>(object: T, pick: Array<U>): Pick<T, U>;