stream-chat-react-native-core 4.7.0-beta.5 → 4.7.0-beta.6

package/src/components/Attachment/Gallery.tsx

@@ -5,6 +5,8 @@ import { buildGallery } from './utils/buildGallery/buildGallery';
 
 import { getGalleryImageBorderRadius } from './utils/getGalleryImageBorderRadius';
 
+import { openUrlSafely } from './utils/openUrlSafely';
+
 import type { MessageType } from '../../components/MessageList/hooks/useMessageList';
 import {
   ImageGalleryContextValue,
@@ -23,6 +25,7 @@ import {
   useOverlayContext,
 } from '../../contexts/overlayContext/OverlayContext';
 import { useTheme } from '../../contexts/themeContext/ThemeContext';
+import { isVideoPackageAvailable } from '../../native';
 import type { DefaultStreamChatGenerics } from '../../types/types';
 import { getUrlWithoutParams, makeImageCompatibleUrl } from '../../utils/utils';
 
@@ -205,11 +208,11 @@ const GalleryWithContext = <
             testID={`gallery-${invertedDirections ? 'row' : 'column'}-${colIndex}`}
           >
             {rows.map(({ height, resizeMode, type, url, width }, rowIndex) => {
-              const defaultOnPress = () => {
-                // Added if-else to keep the logic readable, instead of DRY.
-                // if - legacyImageViewerSwipeBehaviour is disabled
-                // else - legacyImageViewerSwipeBehaviour is enabled
+              const openImageViewer = () => {
                 if (!legacyImageViewerSwipeBehaviour && message) {
+                  // Added if-else to keep the logic readable, instead of DRY.
+                  // if - legacyImageViewerSwipeBehaviour is disabled
+                  // else - legacyImageViewerSwipeBehaviour is enabled
                   setImages([message]);
                   setImage({ messageId: message.id, url });
                   setOverlay('gallery');
@@ -219,6 +222,16 @@ const GalleryWithContext = <
                 }
               };
 
+              const defaultOnPress = () => {
+                if (type === 'video' && !isVideoPackageAvailable()) {
+                  // This condition is kinda unreachable, since we render videos as file attachment if the video
+                  // library is not installed. But doesn't hurt to have extra safeguard, in case of some customizations.
+                  openUrlSafely(url);
+                } else {
+                  openImageViewer();
+                }
+              };
+
               const borderRadius = getGalleryImageBorderRadius({
                 alignment,
                 colIndex,

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

@@ -1,8 +1,5 @@
 import React from 'react';
 
-import { Linking } from 'react-native';
-
-import { act, renderHook } from '@testing-library/react-hooks';
 import { fireEvent, render, waitFor } from '@testing-library/react-native';
 import { v4 as uuidv4 } from 'uuid';
 
@@ -18,7 +15,6 @@ import {
 import { generateMessage } from '../../../mock-builders/generator/message';
 import { Attachment } from '../Attachment';
 import { AttachmentActions } from '../AttachmentActions';
-import { useGoToURL } from '../hooks/useGoToURL';
 
 const getAttachmentComponent = (props) => {
   const message = generateMessage();
@@ -124,39 +120,4 @@ describe('Attachment', () => {
       expect(getByTestId('card-attachment')).toBeTruthy();
     });
   });
-
-  it('should open the URL in the browser', async () => {
-    jest.spyOn(Linking, 'canOpenURL').mockImplementation(jest.fn().mockResolvedValue(true));
-
-    jest.spyOn(Linking, 'openURL').mockImplementation(jest.fn().mockResolvedValue(false));
-
-    const { result, waitFor } = renderHook(() => useGoToURL('www.google.com'));
-
-    const [error, openURL] = result.current;
-
-    await act(openURL);
-
-    await waitFor(() => {
-      expect(Linking.canOpenURL).toHaveBeenCalled();
-      expect(error).not.toBeTruthy();
-      expect(Linking.openURL).toHaveBeenCalled();
-    });
-  });
-
-  it('should open the URL in the browser when no url', async () => {
-    jest.spyOn(Linking, 'canOpenURL').mockImplementation(jest.fn().mockResolvedValue(false));
-
-    jest.spyOn(Linking, 'openURL').mockImplementation(jest.fn().mockResolvedValue(true));
-
-    const { result, waitForNextUpdate } = await renderHook(() => useGoToURL());
-    const [error, openURL] = result.current;
-
-    act(openURL);
-
-    await waitForNextUpdate(() => {
-      expect(Linking.canOpenURL).toHaveBeenCalled();
-      expect(error).toBeTruthy();
-      expect(Linking.openURL).not.toHaveBeenCalled();
-    });
-  });
 });

package/src/components/Attachment/__tests__/openUrlSafely.test.ts

@@ -0,0 +1,48 @@
+import { Linking } from 'react-native';
+
+import { waitFor } from '@testing-library/react-native';
+
+import { openUrlSafely } from '../utils/openUrlSafely';
+
+describe('openUrlSafely', () => {
+  afterEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it('should open a valid url', async () => {
+    jest.spyOn(Linking, 'canOpenURL').mockImplementation(jest.fn().mockResolvedValue(true));
+    jest.spyOn(Linking, 'openURL').mockImplementation(jest.fn());
+
+    const url = 'https://www.google.com';
+    await openUrlSafely(url);
+    await waitFor(() => {
+      expect(Linking.canOpenURL).toHaveBeenCalled();
+      expect(Linking.openURL).toHaveBeenCalled();
+    });
+  });
+
+  it('should not call openUrl if url is not supported', async () => {
+    jest.spyOn(Linking, 'canOpenURL').mockImplementation(jest.fn().mockResolvedValue(false));
+    jest.spyOn(Linking, 'openURL').mockImplementation(jest.fn());
+
+    Linking.openURL = jest.fn();
+    const url = 'basjkdbkjasbdkjabskdjabsjkdbasjkda---asdkjasjkdabsk';
+    await openUrlSafely(url);
+    await waitFor(() => {
+      expect(Linking.canOpenURL).toHaveBeenCalled();
+      expect(Linking.openURL).not.toHaveBeenCalled();
+    });
+  });
+
+  it('should append http if missing', async () => {
+    jest.spyOn(Linking, 'canOpenURL').mockImplementation(jest.fn());
+    jest.spyOn(Linking, 'openURL').mockImplementation(jest.fn());
+
+    Linking.openURL = jest.fn();
+    const url = 'google.com';
+    await openUrlSafely(url);
+    await waitFor(() => {
+      expect(Linking.canOpenURL).toHaveBeenCalledWith('http://google.com');
+    });
+  });
+});

package/src/components/Attachment/utils/openUrlSafely.ts

@@ -0,0 +1,17 @@
+import { Linking } from 'react-native';
+
+export const openUrlSafely = async (url?: string) => {
+  let finalUrl = url as string;
+  const pattern = new RegExp(/^\S+:\/\//);
+
+  if (!pattern.test(finalUrl)) {
+    finalUrl = 'http://' + url;
+  }
+  const supported = await Linking.canOpenURL(finalUrl);
+
+  if (supported) {
+    Linking.openURL(finalUrl);
+  } else {
+    console.warn(`Don't know how to open URI: ${finalUrl}`);
+  }
+};

package/src/components/AttachmentPicker/AttachmentPicker.tsx

@@ -26,7 +26,7 @@ import type { AttachmentPickerErrorProps } from './components/AttachmentPickerEr
 import { useAttachmentPickerContext } from '../../contexts/attachmentPickerContext/AttachmentPickerContext';
 import { useTheme } from '../../contexts/themeContext/ThemeContext';
 import { Recorder } from '../../icons';
-import { getPhotos } from '../../native';
+import { getLocalAssetUri, getPhotos } from '../../native';
 import type { Asset, File } from '../../types/types';
 import { vh, vw } from '../../utils/utils';
 
@@ -109,7 +109,9 @@ const AttachmentVideo: React.FC<AttachmentVideoProps> = (props) => {
 
   const size = vw(100) / (numberOfAttachmentPickerImageColumns || 3) - 2;
 
-  const onPressVideo = () => {
+  const onPressVideo = async () => {
+    // For the case of expo messaging app where you need to fetch the asset uri from asset id
+    const localAssetURI = asset.id && (await getLocalAssetUri(asset.id));
     if (selected) {
       setSelectedFiles((files) => files.filter((file) => file.uri !== asset.uri));
     } else {
@@ -125,7 +127,7 @@ const AttachmentVideo: React.FC<AttachmentVideoProps> = (props) => {
             name: asset.filename,
             size: asset.fileSize,
             type: 'video',
-            uri: asset.uri,
+            uri: localAssetURI || asset.uri,
           },
         ];
       });

package/src/components/ImageGallery/ImageGallery.tsx

@@ -55,7 +55,12 @@ import {
   useOverlayContext,
 } from '../../contexts/overlayContext/OverlayContext';
 import { useTheme } from '../../contexts/themeContext/ThemeContext';
-import type { VideoPayloadData, VideoProgressData, VideoType } from '../../native';
+import {
+  isVideoPackageAvailable,
+  VideoPayloadData,
+  VideoProgressData,
+  VideoType,
+} from '../../native';
 import type { DefaultStreamChatGenerics } from '../../types/types';
 import { getResizedImageUrl } from '../../utils/getResizedImageUrl';
 import { getUrlOfImageAttachment } from '../../utils/getUrlOfImageAttachment';
@@ -252,7 +257,6 @@ export const ImageGallery = <
    */
 
   const photos = images.reduce((acc: Photo<StreamChatGenerics>[], cur) => {
-    console.log(cur);
     const attachmentImages =
       cur.attachments?.filter(
         (attachment) =>
@@ -264,7 +268,7 @@ export const ImageGallery = <
             !attachment.title_link &&
             !attachment.og_scrape_url &&
             getUrlOfImageAttachment(attachment)) ||
-          attachment.type === 'video',
+          (isVideoPackageAvailable() && attachment.type === 'video'),
       ) || [];
 
     const attachmentPhotos = attachmentImages.map((a) => {

package/src/components/ImageGallery/components/AnimatedGalleryVideo.tsx

@@ -4,6 +4,7 @@ import type { StyleProp } from 'react-native';
 import Animated, { useAnimatedStyle } from 'react-native-reanimated';
 
 import {
+  isVideoPackageAvailable,
   PlaybackStatus,
   Video,
   VideoPayloadData,
@@ -173,19 +174,21 @@ export const AnimatedGalleryVideo: React.FC<Props> = React.memo(
           },
         ]}
       >
-        <Video
-          onBuffer={onBuffer}
-          onEnd={onEnd}
-          onLoad={onLoad}
-          onLoadStart={onLoadStart}
-          onPlaybackStatusUpdate={onPlayBackStatusUpdate}
-          onProgress={onProgress}
-          paused={paused}
-          resizeMode='cover'
-          style={style}
-          uri={source.uri}
-          videoRef={videoRef}
-        />
+        {isVideoPackageAvailable() && (
+          <Video
+            onBuffer={onBuffer}
+            onEnd={onEnd}
+            onLoad={onLoad}
+            onLoadStart={onLoadStart}
+            onPlaybackStatusUpdate={onPlayBackStatusUpdate}
+            onProgress={onProgress}
+            paused={paused}
+            resizeMode='contain'
+            style={style}
+            uri={source.uri}
+            videoRef={videoRef}
+          />
+        )}
         <Animated.View
           style={[
             styles.activityIndicator,

package/src/components/Message/Message.tsx

@@ -42,7 +42,7 @@ import {
   useTranslationContext,
 } from '../../contexts/translationContext/TranslationContext';
 
-import { triggerHaptic } from '../../native';
+import { isVideoPackageAvailable, triggerHaptic } from '../../native';
 import type { DefaultStreamChatGenerics } from '../../types/types';
 import { emojiRegex, MessageStatusTypes } from '../../utils/utils';
 
@@ -332,9 +332,12 @@ const MessageWithContext = <
             if (cur.type === 'file') {
               acc.files.push(cur);
               acc.other = []; // remove other attachments if a file exists
-            } else if (cur.type === 'video' && !cur.og_scrape_url) {
+            } else if (cur.type === 'video' && !cur.og_scrape_url && isVideoPackageAvailable()) {
               acc.videos.push({ image_url: cur.asset_url, type: 'video' });
               acc.other = [];
+            } else if (cur.type === 'video' && !cur.og_scrape_url) {
+              acc.files.push(cur);
+              acc.other = []; // remove other attachments if a file exists
             } else if (cur.type === 'image' && !cur.title_link && !cur.og_scrape_url) {
               /**
                * this next if is not combined with the above one for cases where we have

package/src/native.ts

@@ -145,7 +145,7 @@ export type VideoType = {
   style?: StyleProp<ViewStyle>;
 };
 
-export let Video: React.ComponentType<VideoType> = fail;
+export let Video: React.ComponentType<VideoType>;
 
 type Handlers = {
   compressImage?: CompressImage;
@@ -219,3 +219,5 @@ export const registerNativeHandlers = (handlers: Handlers) => {
     Video = handlers.Video;
   }
 };
+
+export const isVideoPackageAvailable = () => !!Video;

package/src/version.json

@@ -1,3 +1,3 @@
 {
-  "version": "4.7.0-beta.5"
+  "version": "4.7.0-beta.6"
 }

package/lib/commonjs/components/Attachment/hooks/useGoToURL.js

@@ -1,42 +0,0 @@
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.useGoToURL = void 0;
-
-var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
-
-var _react = require("react");
-
-var _reactNative = require("react-native");
-
-var useGoToURL = function useGoToURL(url) {
-  var _useState = (0, _react.useState)(false),
-      _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
-      error = _useState2[0],
-      setError = _useState2[1];
-
-  var finalUrl = url;
-  var pattern = new RegExp(/^\S+:\/\//);
-
-  if (!pattern.test(finalUrl)) {
-    finalUrl = 'http://' + url;
-  }
-
-  var openURL = function openURL() {
-    return _reactNative.Linking.canOpenURL(finalUrl).then(function (supported) {
-      if (supported) {
-        _reactNative.Linking.openURL(finalUrl);
-      } else {
-        setError(true);
-        console.warn("Don't know how to open URI: " + finalUrl);
-      }
-    });
-  };
-
-  return [error, openURL];
-};
-
-exports.useGoToURL = useGoToURL;
-//# sourceMappingURL=useGoToURL.js.map

package/lib/commonjs/components/Attachment/hooks/useGoToURL.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["useGoToURL.ts"],"names":["useGoToURL","url","error","setError","finalUrl","pattern","RegExp","test","openURL","Linking","canOpenURL","then","supported","console","warn"],"mappings":";;;;;;;;;AAAA;;AACA;;AAIO,IAAMA,UAA0B,GAAG,SAA7BA,UAA6B,CAACC,GAAD,EAAkB;AAC1D,kBAA0B,qBAAkB,KAAlB,CAA1B;AAAA;AAAA,MAAOC,KAAP;AAAA,MAAcC,QAAd;;AAEA,MAAIC,QAAQ,GAAGH,GAAf;AACA,MAAMI,OAAO,GAAG,IAAIC,MAAJ,CAAW,WAAX,CAAhB;;AAEA,MAAI,CAACD,OAAO,CAACE,IAAR,CAAaH,QAAb,CAAL,EAA6B;AAC3BA,IAAAA,QAAQ,GAAG,YAAYH,GAAvB;AACD;;AAED,MAAMO,OAAO,GAAG,SAAVA,OAAU;AAAA,WACdC,qBAAQC,UAAR,CAAmBN,QAAnB,EAA6BO,IAA7B,CAAkC,UAACC,SAAD,EAAe;AAC/C,UAAIA,SAAJ,EAAe;AACbH,6BAAQD,OAAR,CAAgBJ,QAAhB;AACD,OAFD,MAEO;AACLD,QAAAA,QAAQ,CAAC,IAAD,CAAR;AACAU,QAAAA,OAAO,CAACC,IAAR,kCAA4CV,QAA5C;AACD;AACF,KAPD,CADc;AAAA,GAAhB;;AAUA,SAAO,CAACF,KAAD,EAAQM,OAAR,CAAP;AACD,CArBM","sourcesContent":["import { useState } from 'react';\nimport { Linking } from 'react-native';\n\nexport type UseGoToURLType = (url?: string) => [boolean, () => Promise<void>];\n\nexport const useGoToURL: UseGoToURLType = (url?: string) => {\n  const [error, setError] = useState<boolean>(false);\n\n  let finalUrl = url as string;\n  const pattern = new RegExp(/^\\S+:\\/\\//);\n\n  if (!pattern.test(finalUrl)) {\n    finalUrl = 'http://' + url;\n  }\n\n  const openURL = () =>\n    Linking.canOpenURL(finalUrl).then((supported) => {\n      if (supported) {\n        Linking.openURL(finalUrl);\n      } else {\n        setError(true);\n        console.warn(`Don't know how to open URI: ${finalUrl}`);\n      }\n    });\n\n  return [error, openURL];\n};\n"]}

package/lib/module/components/Attachment/hooks/useGoToURL.js

@@ -1,42 +0,0 @@
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.useGoToURL = void 0;
-
-var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
-
-var _react = require("react");
-
-var _reactNative = require("react-native");
-
-var useGoToURL = function useGoToURL(url) {
-  var _useState = (0, _react.useState)(false),
-      _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
-      error = _useState2[0],
-      setError = _useState2[1];
-
-  var finalUrl = url;
-  var pattern = new RegExp(/^\S+:\/\//);
-
-  if (!pattern.test(finalUrl)) {
-    finalUrl = 'http://' + url;
-  }
-
-  var openURL = function openURL() {
-    return _reactNative.Linking.canOpenURL(finalUrl).then(function (supported) {
-      if (supported) {
-        _reactNative.Linking.openURL(finalUrl);
-      } else {
-        setError(true);
-        console.warn("Don't know how to open URI: " + finalUrl);
-      }
-    });
-  };
-
-  return [error, openURL];
-};
-
-exports.useGoToURL = useGoToURL;
-//# sourceMappingURL=useGoToURL.js.map

package/lib/module/components/Attachment/hooks/useGoToURL.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["useGoToURL.ts"],"names":["useGoToURL","url","error","setError","finalUrl","pattern","RegExp","test","openURL","Linking","canOpenURL","then","supported","console","warn"],"mappings":";;;;;;;;;AAAA;;AACA;;AAIO,IAAMA,UAA0B,GAAG,SAA7BA,UAA6B,CAACC,GAAD,EAAkB;AAC1D,kBAA0B,qBAAkB,KAAlB,CAA1B;AAAA;AAAA,MAAOC,KAAP;AAAA,MAAcC,QAAd;;AAEA,MAAIC,QAAQ,GAAGH,GAAf;AACA,MAAMI,OAAO,GAAG,IAAIC,MAAJ,CAAW,WAAX,CAAhB;;AAEA,MAAI,CAACD,OAAO,CAACE,IAAR,CAAaH,QAAb,CAAL,EAA6B;AAC3BA,IAAAA,QAAQ,GAAG,YAAYH,GAAvB;AACD;;AAED,MAAMO,OAAO,GAAG,SAAVA,OAAU;AAAA,WACdC,qBAAQC,UAAR,CAAmBN,QAAnB,EAA6BO,IAA7B,CAAkC,UAACC,SAAD,EAAe;AAC/C,UAAIA,SAAJ,EAAe;AACbH,6BAAQD,OAAR,CAAgBJ,QAAhB;AACD,OAFD,MAEO;AACLD,QAAAA,QAAQ,CAAC,IAAD,CAAR;AACAU,QAAAA,OAAO,CAACC,IAAR,kCAA4CV,QAA5C;AACD;AACF,KAPD,CADc;AAAA,GAAhB;;AAUA,SAAO,CAACF,KAAD,EAAQM,OAAR,CAAP;AACD,CArBM","sourcesContent":["import { useState } from 'react';\nimport { Linking } from 'react-native';\n\nexport type UseGoToURLType = (url?: string) => [boolean, () => Promise<void>];\n\nexport const useGoToURL: UseGoToURLType = (url?: string) => {\n  const [error, setError] = useState<boolean>(false);\n\n  let finalUrl = url as string;\n  const pattern = new RegExp(/^\\S+:\\/\\//);\n\n  if (!pattern.test(finalUrl)) {\n    finalUrl = 'http://' + url;\n  }\n\n  const openURL = () =>\n    Linking.canOpenURL(finalUrl).then((supported) => {\n      if (supported) {\n        Linking.openURL(finalUrl);\n      } else {\n        setError(true);\n        console.warn(`Don't know how to open URI: ${finalUrl}`);\n      }\n    });\n\n  return [error, openURL];\n};\n"]}

package/lib/typescript/components/Attachment/hooks/useGoToURL.d.ts

@@ -1,2 +0,0 @@
-export declare type UseGoToURLType = (url?: string) => [boolean, () => Promise<void>];
-export declare const useGoToURL: UseGoToURLType;

package/src/components/Attachment/hooks/useGoToURL.ts

@@ -1,27 +0,0 @@
-import { useState } from 'react';
-import { Linking } from 'react-native';
-
-export type UseGoToURLType = (url?: string) => [boolean, () => Promise<void>];
-
-export const useGoToURL: UseGoToURLType = (url?: string) => {
-  const [error, setError] = useState<boolean>(false);
-
-  let finalUrl = url as string;
-  const pattern = new RegExp(/^\S+:\/\//);
-
-  if (!pattern.test(finalUrl)) {
-    finalUrl = 'http://' + url;
-  }
-
-  const openURL = () =>
-    Linking.canOpenURL(finalUrl).then((supported) => {
-      if (supported) {
-        Linking.openURL(finalUrl);
-      } else {
-        setError(true);
-        console.warn(`Don't know how to open URI: ${finalUrl}`);
-      }
-    });
-
-  return [error, openURL];
-};