Merge pull request #1123 from GetStream/vishal/resize-image-url-fix

fix: fixing logic for resizing image url

Author: vishalnarkhede

package/package.json

@@ -80,6 +80,7 @@
     "path": "0.12.7",
     "react-art": "^17.0.2",
     "react-native-markdown-package": "1.8.1",
+    "react-native-url-polyfill": "^1.3.0",
     "stream-chat": "6.0.0"
   },
   "peerDependencies": {
@@ -144,4 +145,4 @@
     "uuid": "8.3.2",
     "webpack": "4.44.2"
   }
-}
+}

package/src/components/Attachment/__tests__/buildGallery.test.js

@@ -97,7 +97,7 @@ describe('buildGallery', () => {
   it('thumbnail size should be smaller than the limits set by sizeConfig', () => {
     const bigImage = generateImageAttachment({
       image_url:
-        'https://stream-io.cdn.com/23kn4k2j3n4k2n3k4n23?sig=34k23n4k23nk423&h=*&w=*&resize=*',
+        'https://us-east.stream-io-cdn.com/23kn4k2j3n4k2n3k4n23?sig=34k23n4k23nk423&h=*&w=*&resize=*',
       original_height: 1200,
       original_width: 900,
     });
@@ -107,13 +107,13 @@ describe('buildGallery', () => {
       sizeConfig: defaultSizeConfig,
     });
     const t1 = tg1[0][0];
-    expect(t1.url.includes(`h=${PixelRatio.getPixelSizeForLayoutSize(t1.height)}`)).toBe(true);
+    expect(t1.url.includes(`&h=${PixelRatio.getPixelSizeForLayoutSize(t1.height)}`)).toBe(true);
     expect(t1.url.includes(`&w=${PixelRatio.getPixelSizeForLayoutSize(t1.width)}`)).toBe(true);
     expect(t1.url.includes(`&resize=clip`)).toBe(true);
 
     const smallImage = generateImageAttachment({
       image_url:
-        'https://stream-io.cdn.com/23kn4k2j3n4k2n3k4n23?sig=34k23n4k23nk423&h=*&w=*&resize=*',
+        'https://us-east.stream-io-cdn.com/23kn4k2j3n4k2n3k4n23?sig=34k23n4k23nk423&h=*&w=*&resize=*',
       original_height: 30,
       original_width: 20,
     });
@@ -124,7 +124,7 @@ describe('buildGallery', () => {
     });
 
     const t2 = tg2[0][0];
-    expect(t2.url.includes(`h=*`)).toBe(true);
+    expect(t2.url.includes(`&h=*`)).toBe(true);
     expect(t2.url.includes(`&w=*`)).toBe(true);
     expect(t2.url.includes(`&resize=*`)).toBe(true);
   });

package/src/components/Chat/Chat.tsx

@@ -18,12 +18,15 @@ import {
   TranslationProvider,
 } from '../../contexts/translationContext/TranslationContext';
 import { useStreami18n } from '../../hooks/useStreami18n';
+import init from '../../init';
 
 import { SDK } from '../../native';
 import type { DefaultStreamChatGenerics } from '../../types/types';
 import type { Streami18n } from '../../utils/Streami18n';
 import { version } from '../../version.json';
 
+init();
+
 export type ChatProps<
   StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 > = Pick<ChatContextValue<StreamChatGenerics>, 'client'> & {

package/src/init.ts

@@ -0,0 +1,5 @@
+import { setupURLPolyfill } from 'react-native-url-polyfill';
+
+export default () => {
+  setupURLPolyfill();
+};

package/src/utils/__tests__/getResizedImageUrl.test.js

@@ -0,0 +1,56 @@
+import { PixelRatio } from 'react-native';
+
+import { getResizedImageUrl } from '../getResizedImageUrl';
+
+describe('getResizedImageUrl', () => {
+  it('should return same url if its not cloudfront cdn', () => {
+    const testUrl = 'http://foo.com/blah_(wikipedia)#cite-1';
+
+    const resizedUrl = getResizedImageUrl({ height: 100, url: testUrl, width: 100 });
+    expect(resizedUrl).toEqual(testUrl);
+  });
+
+  it('should append given height, width and resize mode to url', () => {
+    const testUrl = 'http://us-east.stream-io-cdn.com/blah';
+
+    const testConfigs = [
+      { height: 100, resize: 'scale', width: 100 },
+      { height: 200, resize: 'fill', width: 300 },
+      { height: 1000, resize: 'clip', width: 10 },
+    ];
+
+    testConfigs.forEach(({ height, resize, width }) => {
+      const resizedUrl = getResizedImageUrl({ height, resize, url: testUrl, width });
+      const parsedUrl = new URL(resizedUrl);
+      expect(parsedUrl.searchParams.get('h')).toEqual(
+        `${PixelRatio.getPixelSizeForLayoutSize(height)}`,
+      );
+      expect(parsedUrl.searchParams.get('w')).toEqual(
+        `${PixelRatio.getPixelSizeForLayoutSize(width)}`,
+      );
+      expect(parsedUrl.searchParams.get('resize')).toEqual(resize);
+    });
+  });
+
+  it('should replace wildcards with given height, width and resize mode within url', () => {
+    const testUrl = 'http://us-east.stream-io-cdn.com/blah?h=*&w=*&resize=*';
+
+    const testConfigs = [
+      { height: 100, resize: 'scale', width: 100 },
+      { height: 200, resize: 'fill', width: 300 },
+      { height: 1000, resize: 'clip', width: 10 },
+    ];
+
+    testConfigs.forEach(({ height, resize, width }) => {
+      const resizedUrl = getResizedImageUrl({ height, resize, url: testUrl, width });
+      const parsedUrl = new URL(resizedUrl);
+      expect(parsedUrl.searchParams.get('h')).toEqual(
+        `${PixelRatio.getPixelSizeForLayoutSize(height)}`,
+      );
+      expect(parsedUrl.searchParams.get('w')).toEqual(
+        `${PixelRatio.getPixelSizeForLayoutSize(width)}`,
+      );
+      expect(parsedUrl.searchParams.get('resize')).toEqual(resize);
+    });
+  });
+});

package/src/utils/getResizedImageUrl.ts

@@ -3,6 +3,7 @@ import { PixelRatio } from 'react-native';
 type GetResizedImageUrlParams = {
   url: string;
   height?: string | number;
+  resize?: 'clip' | 'crop' | 'fill' | 'scale';
   width?: string | number;
 };
 
@@ -18,26 +19,27 @@ type GetResizedImageUrlParams = {
  *
  * @returns {string} Url of the image with given height and width.
  */
-export function getResizedImageUrl({ height, url, width }: GetResizedImageUrlParams) {
-  const isResizableUrl = url.includes('&h=*') && url.includes('&w=*') && url.includes('&resize=*');
-
+export function getResizedImageUrl({
+  height,
+  resize = 'clip',
+  url,
+  width,
+}: GetResizedImageUrlParams) {
+  // Check if url belongs to cloudfront CDN
+  const isResizableUrl = url.includes('.stream-io-cdn.com');
   if (!isResizableUrl || (!height && !width)) return url;
 
-  let resizedUrl = url;
+  const parsedUrl = new URL(url);
 
   if (height) {
-    resizedUrl = resizedUrl.replace(
-      'h=*',
-      `h=${PixelRatio.getPixelSizeForLayoutSize(Number(height))}`,
-    );
+    parsedUrl.searchParams.set('h', `${PixelRatio.getPixelSizeForLayoutSize(Number(height))}`);
   }
 
   if (width) {
-    resizedUrl = resizedUrl.replace(
-      'w=*',
-      `w=${PixelRatio.getPixelSizeForLayoutSize(Number(width))}`,
-    );
+    parsedUrl.searchParams.set('w', `${PixelRatio.getPixelSizeForLayoutSize(Number(width))}`);
   }
 
-  return resizedUrl.replace('resize=*', `resize=clip`);
+  parsedUrl.searchParams.set('resize', `${resize}`);
+
+  return parsedUrl.toString();
 }