stream-chat-react-native-core 5.13.1-beta.2 → 5.14.0-beta.2

package/lib/typescript/utils/StreamChatRN.d.ts

@@ -0,0 +1,20 @@
+declare type StreamConfig = {
+    resizableCDNHosts: string[];
+};
+/**
+ * StreamChatRN - Global config for the RN Chat SDK
+ * This config is used to enable/disable features and options for the SDK.
+ */
+export declare class StreamChatRN {
+    /**
+     * Global config for StreamChatRN.
+     */
+    static config: StreamConfig;
+    /**
+     * Set global config for StreamChatRN allows you to set wished CDN hosts for resizing images.
+     * This function accepts an config object that will be merged with the default config.
+     * @example StreamChatRN.setConfig({ resizableCDNHosts: ['my-custom-cdn.com', 'my-other-cdn.com'] });
+     */
+    static setConfig(config: Partial<StreamConfig>): void;
+}
+export {};

package/lib/typescript/utils/getResizedImageUrl.d.ts

@@ -1,4 +1,4 @@
-declare type GetResizedImageUrlParams = {
+export declare type GetResizedImageUrlParams = {
     url: string;
     height?: string | number;
     resize?: 'clip' | 'crop' | 'fill' | 'scale';
@@ -17,4 +17,3 @@ declare type GetResizedImageUrlParams = {
  * @returns {string} Url of the image with given height and width.
  */
 export declare function getResizedImageUrl({ height, resize, url, width, }: GetResizedImageUrlParams): string;
-export {};

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "stream-chat-react-native-core",
   "description": "The official React Native and Expo components for Stream Chat, a service for building chat applications",
-  "version": "5.13.1-beta.2",
+  "version": "5.14.0-beta.2",
   "author": {
     "company": "Stream.io Inc",
     "name": "Stream.io Inc"

package/src/contexts/messageInputContext/MessageInputContext.tsx

@@ -487,6 +487,8 @@ export const MessageInputProvider = <
     }
 
     const imagesAndFiles = [...imageUploads, ...fileUploads];
+    if (imagesAndFiles.length === 0) return false;
+
     if (enableOfflineSupport) {
       // Allow only if none of the attachments have unsupported status
       for (const file of imagesAndFiles) {

package/src/index.ts

@@ -11,6 +11,7 @@ export * from './types/types';
 export * from './utils/patchMessageTextCommand';
 export * from './utils/Streami18n';
 export * from './utils/utils';
+export * from './utils/StreamChatRN';
 
 export { default as enTranslations } from './i18n/en.json';
 export { default as frTranslations } from './i18n/fr.json';

package/src/utils/StreamChatRN.ts

@@ -0,0 +1,25 @@
+type StreamConfig = {
+  resizableCDNHosts: string[];
+};
+const DEFAULT_GLOBAL_STREAM_CONFIG = {
+  resizableCDNHosts: ['.stream-io-cdn.com'],
+};
+
+/**
+ * StreamChatRN - Global config for the RN Chat SDK
+ * This config is used to enable/disable features and options for the SDK.
+ */
+export class StreamChatRN {
+  /**
+   * Global config for StreamChatRN.
+   */
+  static config: StreamConfig = DEFAULT_GLOBAL_STREAM_CONFIG;
+  /**
+   * Set global config for StreamChatRN allows you to set wished CDN hosts for resizing images.
+   * This function accepts an config object that will be merged with the default config.
+   * @example StreamChatRN.setConfig({ resizableCDNHosts: ['my-custom-cdn.com', 'my-other-cdn.com'] });
+   */
+  static setConfig(config: Partial<StreamConfig>) {
+    this.config = { ...this.config, ...config };
+  }
+}

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

@@ -0,0 +1,79 @@
+import { PixelRatio } from 'react-native';
+
+import { getResizedImageUrl, GetResizedImageUrlParams } from '../getResizedImageUrl';
+import { StreamChatRN } from '../StreamChatRN';
+
+const TEST_URL_1 =
+  'http://us-east.stream-io-cdn.com/blah?sig=34k23n4k23nk423&oh=300&ow=200&h=*&w=*&resize=*';
+const TEST_URL_2 = 'http://us-east.stream-io-cdn.com/blah?oh=300&ow=200&h=*&w=*&resize=*';
+const TEST_CASES: GetResizedImageUrlParams[] = [
+  { height: 100, resize: 'scale', url: TEST_URL_1, width: 100 },
+  { height: 200, resize: 'fill', url: TEST_URL_1, width: 300 },
+  { height: 1000, resize: 'clip', url: TEST_URL_1, width: 10 },
+  { height: 100, resize: 'scale', url: TEST_URL_2, width: 100 },
+  { height: 200, resize: 'fill', url: TEST_URL_2, width: 300 },
+  { height: 1000, resize: 'clip', url: TEST_URL_2, width: 10 },
+];
+describe('getResizedImageUrl (happy flow)', () => {
+  it.each(TEST_CASES)(
+    'should append given height, width and resize mode to all url sorts',
+    ({ height, resize, url, width }) => {
+      const resizedUrl = getResizedImageUrl({ height, resize, url, width });
+      const parsedUrl = new URL(resizedUrl);
+      expect(parsedUrl.searchParams.get('h')).toEqual(
+        `${PixelRatio.getPixelSizeForLayoutSize(height as number)}`,
+      );
+      expect(parsedUrl.searchParams.get('w')).toEqual(
+        `${PixelRatio.getPixelSizeForLayoutSize(width as number)}`,
+      );
+      expect(parsedUrl.searchParams.get('resize')).toEqual(resize);
+    },
+  );
+
+  it('should append all related params with resizableCDNHosts was set', () => {
+    StreamChatRN.setConfig({ resizableCDNHosts: ['my-company-cdn.com'] });
+    const resizedUrl = getResizedImageUrl({
+      height: 100,
+      url: 'http://my-company-cdn.com/cat-photo?sig=34k23n4k23nk423&oh=300&ow=200',
+      width: 100,
+    });
+    expect(resizedUrl).toEqual(
+      'http://my-company-cdn.com/cat-photo?sig=34k23n4k23nk423&oh=300&ow=200&h=200&w=200&resize=clip',
+    );
+  });
+});
+
+describe('getResizedImageUrl (sad flow)', () => {
+  afterEach(jest.restoreAllMocks);
+
+  it.each([
+    { height: 100, url: 'http://foo.com/blah_(wikipedia)#cite-1', width: 100 },
+    { url: 'http://us-east.stream-io-cdn.com/blah?oh=300' },
+    { url: 'http://us-east.stream-io-cdn.com/blah?ow=300' },
+  ])('should append given height, width and resize mode to url', ({ height, url, width }) => {
+    const resizedUrl = getResizedImageUrl({
+      height,
+      url,
+      width,
+    });
+    expect(resizedUrl).toEqual(url);
+  });
+
+  it('handles an error correctly and log warns it', () => {
+    let someError;
+    jest.spyOn(console, 'warn');
+    jest.spyOn(global, 'URL').mockImplementationOnce(() => ({
+      // @ts-ignore
+      searchParams: {
+        get: () => {
+          throw (someError = new Error('some error'));
+        },
+      },
+    }));
+    const resizedUrl = getResizedImageUrl({
+      url: TEST_URL_1,
+    });
+    expect(console.warn).toHaveBeenCalledWith(someError);
+    expect(resizedUrl).toEqual(TEST_URL_1);
+  });
+});

package/src/utils/getResizedImageUrl.ts

@@ -1,6 +1,8 @@
 import { PixelRatio } from 'react-native';
 
-type GetResizedImageUrlParams = {
+import { StreamChatRN } from './StreamChatRN';
+
+export type GetResizedImageUrlParams = {
   url: string;
   height?: string | number;
   resize?: 'clip' | 'crop' | 'fill' | 'scale';
@@ -31,10 +33,14 @@ export function getResizedImageUrl({
     const originalHeight = parsedUrl.searchParams.get('oh');
     const originalWidth = parsedUrl.searchParams.get('ow');
 
-    // If url is not from new cloudfront CDN (which offers fast image resizing), then return the url as it is.
+    // If url is not within Stream's cloudfront CDN or any other configured resizableCDNHosts (which offers fast image resizing), then return the url as it is.
     // Check for oh and ow parameters in the url, is just to differentiate between old and new CDN.
     // In case of old CDN we don't want to do any kind of resizing.
-    const isResizableUrl = url.includes('.stream-io-cdn.com') && originalHeight && originalWidth;
+
+    const isResizableUrl =
+      StreamChatRN.config.resizableCDNHosts.some((rCDNh) => url.includes(rCDNh)) &&
+      originalHeight &&
+      originalWidth;
 
     if (!isResizableUrl || (!height && !width)) return url;
 

package/src/version.json

@@ -1,3 +1,3 @@
 {
-  "version": "5.13.1-beta.2"
+  "version": "5.14.0-beta.2"
 }

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

@@ -1,57 +0,0 @@
-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?sig=34k23n4k23nk423&oh=300&ow=200&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);
-    });
-  });
-
-  it('should replace wildcards with given height, width and resize mode within url', () => {
-    const testUrl = 'http://us-east.stream-io-cdn.com/blah?oh=300&ow=200&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);
-    });
-  });
-});