@giphy/js-util - npm Package Compare versions

Comparing version 3.0.0 to 3.1.0

dist/get-pingback-id.js

@@ -6,2 +6,3 @@ "use strict";
 var idLength = 16;
+/* istanbul ignore next */
 var noUUIDRandom = function () {
@@ -32,2 +33,3 @@ var result = '';
             catch (error) {
+                /* istanbul ignore next */
                 pingbackId = noUUIDRandom();
@@ -34,0 +36,0 @@ }

dist/gif-utils.d.ts

@@ -1,2 +0,2 @@
-import { IGif, IImages, IRendition } from '@giphy/js-types';
+import { IGif, IImage, IImages, IRendition } from '@giphy/js-types';
 export declare const getSpecificRendition: ({ images, is_sticker: isSticker }: IGif, renditionLabel: string, isStill?: boolean, useVideo?: boolean) => string;
@@ -6,2 +6,3 @@ interface IRenditionWithName extends IRendition {
 }
+export declare const getBestVideo: (video: IGif['video'], width: number, height: number) => IImage | undefined;
 export declare const getBestRendition: (images: IImages, gifWidth: number, gifHeight: number, scaleUpMaxPixels?: number | undefined) => IRenditionWithName;
@@ -8,0 +9,0 @@ declare type Options = {

dist/gif-utils.js

@@ -17,3 +17,3 @@ "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.getAltText = exports.getGifWidth = exports.getGifHeight = exports.getBestRenditionUrl = exports.getBestRendition = exports.getSpecificRendition = void 0;
+exports.getAltText = exports.getGifWidth = exports.getGifHeight = exports.getBestRenditionUrl = exports.getBestRendition = exports.getBestVideo = exports.getSpecificRendition = void 0;
 var bestfit_1 = __importDefault(require("./bestfit"));
@@ -40,2 +40,12 @@ var collections_1 = require("./collections");
 };
+exports.getBestVideo = function (video, width, height) {
+    var assets = video === null || video === void 0 ? void 0 : video.assets;
+    if (assets) {
+        assets = __assign({}, assets);
+        // @ts-ignore we don't show source according to the existing code
+        delete assets.source;
+        var filteredAssets = Object.values(assets).sort(function (a, b) { return a.width - b.width; });
+        return bestfit_1.default(filteredAssets, width, height);
+    }
+};
 var getRenditions = function (type, images, video) {
@@ -42,0 +52,0 @@ return type === 'video' && video && video.previews && !Object.keys(images).length ? video.previews : images;

dist/index.d.ts

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

dist/index.js

@@ -16,3 +16,3 @@ "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.checkIfWebP = exports.injectTrackingPixel = exports.getSpecificRendition = exports.getGifWidth = exports.getGifHeight = exports.getBestRenditionUrl = exports.getBestRendition = exports.getAltText = exports.getPingbackId = exports.getClientRect = exports.setRenditionScaleUpMaxPixels = exports.bestfit = void 0;
+exports.checkIfWebP = exports.injectTrackingPixel = 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");
@@ -22,3 +22,2 @@ Object.defineProperty(exports, "bestfit", { enumerable: true, get: function () { return __importDefault(bestfit_1).default; } });
 __exportStar(require("./collections"), exports);
-__exportStar(require("./construct-moat-data"), exports);
 var get_client_rect_from_el_1 = require("./get-client-rect-from-el");
@@ -32,2 +31,3 @@ Object.defineProperty(exports, "getClientRect", { enumerable: true, get: function () { return __importDefault(get_client_rect_from_el_1).default; } });
 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; } });
@@ -34,0 +34,0 @@ Object.defineProperty(exports, "getGifWidth", { enumerable: true, get: function () { return gif_utils_1.getGifWidth; } });

package.json

@@ -11,3 +11,3 @@ {
     "name": "@giphy/js-util",
-    "version": "3.0.0",
+    "version": "3.1.0",
     "main": "dist/index.js",
@@ -34,3 +34,3 @@ "description": "Shared giphy js utils",
     },
-    "gitHead": "cceb9af1053bbb6c64ee39d0350a074a5df05d9a"
+    "gitHead": "412335a79d3a8b88d361709e6e85dae55d06adfe"
 }

README.md

@@ -11,2 +11,4 @@ # @giphy/js-util
 
+_getBestVideo_ - get the best video rendition object based on a width and height (uses bestfit)
+
 _getBestRenditionUrl_ - get the best rendition url based on a width and height, also factors in webp availability and if you're using video (uses getBestRendition)
@@ -13,0 +15,0 @@

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

 import { setRenditionScaleUpMaxPixels } from '../bestfit'
-import { getBestRenditionUrl } from '../gif-utils'
+import { getBestRenditionUrl, getBestVideo } from '../gif-utils'
 
@@ -85,2 +85,61 @@ const testGifLandscape: any = {
 
+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 = {
@@ -192,2 +251,17 @@ images: {
     })
+    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 ', () => {
@@ -194,0 +268,0 @@ expect(getBestRenditionUrl(testGifLandscape, 700, 450)).toEqual('/media/600x338.gif')

src/get-pingback-id.ts

@@ -5,2 +5,4 @@ import { v4 as uuid } from 'uuid'
 const idLength = 16
+
+/* istanbul ignore next */
 const noUUIDRandom = () => {
@@ -29,2 +31,3 @@ let result = ''
             } catch (error) {
+                /* istanbul ignore next */
                 pingbackId = noUUIDRandom()
@@ -31,0 +34,0 @@ }

src/gif-utils.ts

@@ -1,2 +0,2 @@
-import { IGif, IImages, ImageAllTypes, IRendition } from '@giphy/js-types'
+import { IGif, IImage, IImages, ImageAllTypes, IRendition } from '@giphy/js-types'
 import IVideo from '@giphy/js-types/dist/video'
@@ -33,2 +33,13 @@ import bestfit from './bestfit'
 
+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) =>
@@ -35,0 +46,0 @@ type === 'video' && video && video.previews && !Object.keys(images).length ? video.previews : images

src/index.ts

 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'
@@ -10,2 +9,3 @@ export { default as getPingbackId } from './get-pingback-id'
     getBestRenditionUrl,
+    getBestVideo,
     getGifHeight,
@@ -12,0 +12,0 @@ getGifWidth,

No alert changes

Improved metrics

Number of lines in readme file

28

7.69%

Worsened metrics

Total package byte prevSize

72139

-2.06%

Number of package files

48

-9.43%

Lines of code

1345

-3.24%

No dependency changes