stream-chat-react-native-core 5.21.0 → 5.22.0-beta.10

package/lib/module/components/AttachmentPicker/components/AttachmentSelectionBar.js

@@ -11,6 +11,7 @@ var _reactNative = require("react-native");
 var _AttachmentPickerContext = require("../../../contexts/attachmentPickerContext/AttachmentPickerContext");
 var _MessageInputContext = require("../../../contexts/messageInputContext/MessageInputContext");
 var _ThemeContext = require("../../../contexts/themeContext/ThemeContext");
+var _TranslationContext = require("../../../contexts/translationContext/TranslationContext");
 var _native = require("../../../native");
 var _this = this,
   _jsxFileName = "/home/runner/work/stream-chat-react-native/stream-chat-react-native/package/src/components/AttachmentPicker/components/AttachmentSelectionBar.tsx";
@@ -34,6 +35,8 @@ var AttachmentSelectionBar = function AttachmentSelectionBar() {
     selectedPicker = _useAttachmentPickerC.selectedPicker,
     setSelectedImages = _useAttachmentPickerC.setSelectedImages,
     setSelectedPicker = _useAttachmentPickerC.setSelectedPicker;
+  var _useTranslationContex = (0, _TranslationContext.useTranslationContext)(),
+    t = _useTranslationContex.t;
   var _useMessageInputConte = (0, _MessageInputContext.useMessageInputContext)(),
     compressImageQuality = _useMessageInputConte.compressImageQuality,
     hasFilePicker = _useMessageInputConte.hasFilePicker,
@@ -70,12 +73,24 @@ var AttachmentSelectionBar = function AttachmentSelectionBar() {
             });
           case 4:
             photo = _context.sent;
+            if (photo.askToOpenSettings) {
+              _reactNative.Alert.alert(t('Allow camera access in device settings'), t('Device camera is used to take photos or videos.'), [{
+                style: 'cancel',
+                text: t('Cancel')
+              }, {
+                onPress: function onPress() {
+                  return _reactNative.Linking.openSettings();
+                },
+                style: 'default',
+                text: t('Open Settings')
+              }]);
+            }
             if (!photo.cancelled) {
               setSelectedImages(function (images) {
                 return [].concat((0, _toConsumableArray2["default"])(images), [photo]);
               });
             }
-          case 6:
+          case 7:
           case "end":
             return _context.stop();
         }
@@ -92,7 +107,7 @@ var AttachmentSelectionBar = function AttachmentSelectionBar() {
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 66,
+      lineNumber: 78,
       columnNumber: 5
     }
   }, _react["default"].createElement(_reactNative.TouchableOpacity, {
@@ -107,7 +122,7 @@ var AttachmentSelectionBar = function AttachmentSelectionBar() {
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 67,
+      lineNumber: 79,
       columnNumber: 7
     }
   }, _react["default"].createElement(_reactNative.View, {
@@ -115,7 +130,7 @@ var AttachmentSelectionBar = function AttachmentSelectionBar() {
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 72,
+      lineNumber: 84,
       columnNumber: 9
     }
   }, _react["default"].createElement(ImageSelectorIcon, {
@@ -124,7 +139,7 @@ var AttachmentSelectionBar = function AttachmentSelectionBar() {
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 73,
+      lineNumber: 85,
       columnNumber: 11
     }
   }))), hasFilePicker && _react["default"].createElement(_reactNative.TouchableOpacity, {
@@ -137,7 +152,7 @@ var AttachmentSelectionBar = function AttachmentSelectionBar() {
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 80,
+      lineNumber: 92,
       columnNumber: 9
     }
   }, _react["default"].createElement(_reactNative.View, {
@@ -145,7 +160,7 @@ var AttachmentSelectionBar = function AttachmentSelectionBar() {
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 85,
+      lineNumber: 97,
       columnNumber: 11
     }
   }, _react["default"].createElement(FileSelectorIcon, {
@@ -154,7 +169,7 @@ var AttachmentSelectionBar = function AttachmentSelectionBar() {
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 86,
+      lineNumber: 98,
       columnNumber: 13
     }
   }))), _react["default"].createElement(_reactNative.TouchableOpacity, {
@@ -167,7 +182,7 @@ var AttachmentSelectionBar = function AttachmentSelectionBar() {
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 93,
+      lineNumber: 105,
       columnNumber: 7
     }
   }, _react["default"].createElement(_reactNative.View, {
@@ -175,7 +190,7 @@ var AttachmentSelectionBar = function AttachmentSelectionBar() {
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 98,
+      lineNumber: 110,
       columnNumber: 9
     }
   }, _react["default"].createElement(CameraSelectorIcon, {
@@ -184,7 +199,7 @@ var AttachmentSelectionBar = function AttachmentSelectionBar() {
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 99,
+      lineNumber: 111,
       columnNumber: 11
     }
   }))));

package/lib/module/components/AttachmentPicker/components/AttachmentSelectionBar.js.map

@@ -1 +1 @@
-{"version":3,"names":["_react","_interopRequireDefault","require","_reactNative","_AttachmentPickerContext","_MessageInputContext","_ThemeContext","_native","_this","_jsxFileName","styles","StyleSheet","create","container","alignItems","flexDirection","paddingHorizontal","icon","marginHorizontal","AttachmentSelectionBar","_useAttachmentPickerC","useAttachmentPickerContext","attachmentSelectionBarHeight","CameraSelectorIcon","closePicker","FileSelectorIcon","ImageSelectorIcon","selectedPicker","setSelectedImages","setSelectedPicker","_useMessageInputConte","useMessageInputContext","compressImageQuality","hasFilePicker","imageUploads","pickFile","_useTheme","useTheme","_useTheme$theme$attac","theme","attachmentSelectionBar","setPicker","selection","undefined","openFilePicker","takeAndUploadImage","_ref","_asyncToGenerator2","_regenerator","mark","_callee","photo","wrap","_callee$","_context","prev","next","takePhoto","sent","cancelled","images","concat","_toConsumableArray2","stop","apply","arguments","createElement","View","style","height","__self","__source","fileName","lineNumber","columnNumber","TouchableOpacity","hitSlop","bottom","top","onPress","testID","numberOfImageUploads","length","exports"],"sources":["AttachmentSelectionBar.tsx"],"sourcesContent":["import React from 'react';\nimport { StyleSheet, TouchableOpacity, View } from 'react-native';\n\nimport { useAttachmentPickerContext } from '../../../contexts/attachmentPickerContext/AttachmentPickerContext';\nimport { useMessageInputContext } from '../../../contexts/messageInputContext/MessageInputContext';\nimport { useTheme } from '../../../contexts/themeContext/ThemeContext';\n\nimport { takePhoto } from '../../../native';\n\nconst styles = StyleSheet.create({\n  container: {\n    alignItems: 'center',\n    flexDirection: 'row',\n    paddingHorizontal: 6,\n  },\n  icon: {\n    marginHorizontal: 12,\n  },\n});\n\nexport const AttachmentSelectionBar: React.FC = () => {\n  const {\n    attachmentSelectionBarHeight,\n    CameraSelectorIcon,\n    closePicker,\n    FileSelectorIcon,\n    ImageSelectorIcon,\n    selectedPicker,\n    setSelectedImages,\n    setSelectedPicker,\n  } = useAttachmentPickerContext();\n\n  const { compressImageQuality, hasFilePicker, imageUploads, pickFile } = useMessageInputContext();\n\n  const {\n    theme: {\n      attachmentSelectionBar: { container, icon },\n    },\n  } = useTheme();\n\n  const setPicker = (selection: 'images') => {\n    if (selectedPicker === selection) {\n      setSelectedPicker(undefined);\n      closePicker();\n    } else {\n      setSelectedPicker(selection);\n    }\n  };\n\n  const openFilePicker = () => {\n    setSelectedPicker(undefined);\n    closePicker();\n    pickFile();\n  };\n\n  const takeAndUploadImage = async () => {\n    setSelectedPicker(undefined);\n    closePicker();\n    const photo = await takePhoto({ compressImageQuality });\n    if (!photo.cancelled) {\n      setSelectedImages((images) => [...images, photo]);\n    }\n  };\n\n  return (\n    <View style={[styles.container, container, { height: attachmentSelectionBarHeight ?? 52 }]}>\n      <TouchableOpacity\n        hitSlop={{ bottom: 15, top: 15 }}\n        onPress={() => setPicker('images')}\n        testID='upload-photo-touchable'\n      >\n        <View style={[styles.icon, icon]}>\n          <ImageSelectorIcon\n            numberOfImageUploads={imageUploads.length}\n            selectedPicker={selectedPicker}\n          />\n        </View>\n      </TouchableOpacity>\n      {hasFilePicker && (\n        <TouchableOpacity\n          hitSlop={{ bottom: 15, top: 15 }}\n          onPress={openFilePicker}\n          testID='upload-file-touchable'\n        >\n          <View style={[styles.icon, icon]}>\n            <FileSelectorIcon\n              numberOfImageUploads={imageUploads.length}\n              selectedPicker={selectedPicker}\n            />\n          </View>\n        </TouchableOpacity>\n      )}\n      <TouchableOpacity\n        hitSlop={{ bottom: 15, top: 15 }}\n        onPress={takeAndUploadImage}\n        testID='take-photo-touchable'\n      >\n        <View style={[styles.icon, icon]}>\n          <CameraSelectorIcon\n            numberOfImageUploads={imageUploads.length}\n            selectedPicker={selectedPicker}\n          />\n        </View>\n      </TouchableOpacity>\n    </View>\n  );\n};\n"],"mappings":"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"}
+{"version":3,"names":["_react","_interopRequireDefault","require","_reactNative","_AttachmentPickerContext","_MessageInputContext","_ThemeContext","_TranslationContext","_native","_this","_jsxFileName","styles","StyleSheet","create","container","alignItems","flexDirection","paddingHorizontal","icon","marginHorizontal","AttachmentSelectionBar","_useAttachmentPickerC","useAttachmentPickerContext","attachmentSelectionBarHeight","CameraSelectorIcon","closePicker","FileSelectorIcon","ImageSelectorIcon","selectedPicker","setSelectedImages","setSelectedPicker","_useTranslationContex","useTranslationContext","t","_useMessageInputConte","useMessageInputContext","compressImageQuality","hasFilePicker","imageUploads","pickFile","_useTheme","useTheme","_useTheme$theme$attac","theme","attachmentSelectionBar","setPicker","selection","undefined","openFilePicker","takeAndUploadImage","_ref","_asyncToGenerator2","_regenerator","mark","_callee","photo","wrap","_callee$","_context","prev","next","takePhoto","sent","askToOpenSettings","Alert","alert","style","text","onPress","Linking","openSettings","cancelled","images","concat","_toConsumableArray2","stop","apply","arguments","createElement","View","height","__self","__source","fileName","lineNumber","columnNumber","TouchableOpacity","hitSlop","bottom","top","testID","numberOfImageUploads","length","exports"],"sources":["AttachmentSelectionBar.tsx"],"sourcesContent":["import React from 'react';\nimport { Alert, Linking, StyleSheet, TouchableOpacity, View } from 'react-native';\n\nimport { useAttachmentPickerContext } from '../../../contexts/attachmentPickerContext/AttachmentPickerContext';\nimport { useMessageInputContext } from '../../../contexts/messageInputContext/MessageInputContext';\nimport { useTheme } from '../../../contexts/themeContext/ThemeContext';\nimport { useTranslationContext } from '../../../contexts/translationContext/TranslationContext';\n\nimport { takePhoto } from '../../../native';\n\nconst styles = StyleSheet.create({\n  container: {\n    alignItems: 'center',\n    flexDirection: 'row',\n    paddingHorizontal: 6,\n  },\n  icon: {\n    marginHorizontal: 12,\n  },\n});\n\nexport const AttachmentSelectionBar: React.FC = () => {\n  const {\n    attachmentSelectionBarHeight,\n    CameraSelectorIcon,\n    closePicker,\n    FileSelectorIcon,\n    ImageSelectorIcon,\n    selectedPicker,\n    setSelectedImages,\n    setSelectedPicker,\n  } = useAttachmentPickerContext();\n  const { t } = useTranslationContext();\n\n  const { compressImageQuality, hasFilePicker, imageUploads, pickFile } = useMessageInputContext();\n\n  const {\n    theme: {\n      attachmentSelectionBar: { container, icon },\n    },\n  } = useTheme();\n\n  const setPicker = (selection: 'images') => {\n    if (selectedPicker === selection) {\n      setSelectedPicker(undefined);\n      closePicker();\n    } else {\n      setSelectedPicker(selection);\n    }\n  };\n\n  const openFilePicker = () => {\n    setSelectedPicker(undefined);\n    closePicker();\n    pickFile();\n  };\n\n  const takeAndUploadImage = async () => {\n    setSelectedPicker(undefined);\n    closePicker();\n    const photo = await takePhoto({ compressImageQuality });\n    if (photo.askToOpenSettings) {\n      Alert.alert(\n        t('Allow camera access in device settings'),\n        t('Device camera is used to take photos or videos.'),\n        [\n          { style: 'cancel', text: t('Cancel') },\n          { onPress: () => Linking.openSettings(), style: 'default', text: t('Open Settings') },\n        ],\n      );\n    }\n    if (!photo.cancelled) {\n      setSelectedImages((images) => [...images, photo]);\n    }\n  };\n\n  return (\n    <View style={[styles.container, container, { height: attachmentSelectionBarHeight ?? 52 }]}>\n      <TouchableOpacity\n        hitSlop={{ bottom: 15, top: 15 }}\n        onPress={() => setPicker('images')}\n        testID='upload-photo-touchable'\n      >\n        <View style={[styles.icon, icon]}>\n          <ImageSelectorIcon\n            numberOfImageUploads={imageUploads.length}\n            selectedPicker={selectedPicker}\n          />\n        </View>\n      </TouchableOpacity>\n      {hasFilePicker && (\n        <TouchableOpacity\n          hitSlop={{ bottom: 15, top: 15 }}\n          onPress={openFilePicker}\n          testID='upload-file-touchable'\n        >\n          <View style={[styles.icon, icon]}>\n            <FileSelectorIcon\n              numberOfImageUploads={imageUploads.length}\n              selectedPicker={selectedPicker}\n            />\n          </View>\n        </TouchableOpacity>\n      )}\n      <TouchableOpacity\n        hitSlop={{ bottom: 15, top: 15 }}\n        onPress={takeAndUploadImage}\n        testID='take-photo-touchable'\n      >\n        <View style={[styles.icon, icon]}>\n          <CameraSelectorIcon\n            numberOfImageUploads={imageUploads.length}\n            selectedPicker={selectedPicker}\n          />\n        </View>\n      </TouchableOpacity>\n    </View>\n  );\n};\n"],"mappings":";;;;;;;;AAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,YAAA,GAAAD,OAAA;AAEA,IAAAE,wBAAA,GAAAF,OAAA;AACA,IAAAG,oBAAA,GAAAH,OAAA;AACA,IAAAI,aAAA,GAAAJ,OAAA;AACA,IAAAK,mBAAA,GAAAL,OAAA;AAEA,IAAAM,OAAA,GAAAN,OAAA;AAA4C,IAAAO,KAAA;EAAAC,YAAA;AAE5C,IAAMC,MAAM,GAAGC,uBAAU,CAACC,MAAM,CAAC;EAC/BC,SAAS,EAAE;IACTC,UAAU,EAAE,QAAQ;IACpBC,aAAa,EAAE,KAAK;IACpBC,iBAAiB,EAAE;EACrB,CAAC;EACDC,IAAI,EAAE;IACJC,gBAAgB,EAAE;EACpB;AACF,CAAC,CAAC;AAEK,IAAMC,sBAAgC,GAAG,SAAnCA,sBAAgCA,CAAA,EAAS;EACpD,IAAAC,qBAAA,GASI,IAAAC,mDAA0B,EAAC,CAAC;IAR9BC,4BAA4B,GAAAF,qBAAA,CAA5BE,4BAA4B;IAC5BC,kBAAkB,GAAAH,qBAAA,CAAlBG,kBAAkB;IAClBC,WAAW,GAAAJ,qBAAA,CAAXI,WAAW;IACXC,gBAAgB,GAAAL,qBAAA,CAAhBK,gBAAgB;IAChBC,iBAAiB,GAAAN,qBAAA,CAAjBM,iBAAiB;IACjBC,cAAc,GAAAP,qBAAA,CAAdO,cAAc;IACdC,iBAAiB,GAAAR,qBAAA,CAAjBQ,iBAAiB;IACjBC,iBAAiB,GAAAT,qBAAA,CAAjBS,iBAAiB;EAEnB,IAAAC,qBAAA,GAAc,IAAAC,yCAAqB,EAAC,CAAC;IAA7BC,CAAC,GAAAF,qBAAA,CAADE,CAAC;EAET,IAAAC,qBAAA,GAAwE,IAAAC,2CAAsB,EAAC,CAAC;IAAxFC,oBAAoB,GAAAF,qBAAA,CAApBE,oBAAoB;IAAEC,aAAa,GAAAH,qBAAA,CAAbG,aAAa;IAAEC,YAAY,GAAAJ,qBAAA,CAAZI,YAAY;IAAEC,QAAQ,GAAAL,qBAAA,CAARK,QAAQ;EAEnE,IAAAC,SAAA,GAII,IAAAC,sBAAQ,EAAC,CAAC;IAAAC,qBAAA,GAAAF,SAAA,CAHZG,KAAK,CACHC,sBAAsB;IAAI9B,SAAS,GAAA4B,qBAAA,CAAT5B,SAAS;IAAEI,IAAI,GAAAwB,qBAAA,CAAJxB,IAAI;EAI7C,IAAM2B,SAAS,GAAG,SAAZA,SAASA,CAAIC,SAAmB,EAAK;IACzC,IAAIlB,cAAc,KAAKkB,SAAS,EAAE;MAChChB,iBAAiB,CAACiB,SAAS,CAAC;MAC5BtB,WAAW,CAAC,CAAC;IACf,CAAC,MAAM;MACLK,iBAAiB,CAACgB,SAAS,CAAC;IAC9B;EACF,CAAC;EAED,IAAME,cAAc,GAAG,SAAjBA,cAAcA,CAAA,EAAS;IAC3BlB,iBAAiB,CAACiB,SAAS,CAAC;IAC5BtB,WAAW,CAAC,CAAC;IACbc,QAAQ,CAAC,CAAC;EACZ,CAAC;EAED,IAAMU,kBAAkB;IAAA,IAAAC,IAAA,OAAAC,kBAAA,aAAAC,YAAA,YAAAC,IAAA,CAAG,SAAAC,QAAA;MAAA,IAAAC,KAAA;MAAA,OAAAH,YAAA,YAAAI,IAAA,UAAAC,SAAAC,QAAA;QAAA,kBAAAA,QAAA,CAAAC,IAAA,GAAAD,QAAA,CAAAE,IAAA;UAAA;YACzB9B,iBAAiB,CAACiB,SAAS,CAAC;YAC5BtB,WAAW,CAAC,CAAC;YAACiC,QAAA,CAAAE,IAAA;YAAA,OACM,IAAAC,iBAAS,EAAC;cAAEzB,oBAAoB,EAApBA;YAAqB,CAAC,CAAC;UAAA;YAAjDmB,KAAK,GAAAG,QAAA,CAAAI,IAAA;YACX,IAAIP,KAAK,CAACQ,iBAAiB,EAAE;cAC3BC,kBAAK,CAACC,KAAK,CACThC,CAAC,CAAC,wCAAwC,CAAC,EAC3CA,CAAC,CAAC,iDAAiD,CAAC,EACpD,CACE;gBAAEiC,KAAK,EAAE,QAAQ;gBAAEC,IAAI,EAAElC,CAAC,CAAC,QAAQ;cAAE,CAAC,EACtC;gBAAEmC,OAAO,EAAE,SAAAA,QAAA;kBAAA,OAAMC,oBAAO,CAACC,YAAY,CAAC,CAAC;gBAAA;gBAAEJ,KAAK,EAAE,SAAS;gBAAEC,IAAI,EAAElC,CAAC,CAAC,eAAe;cAAE,CAAC,CAEzF,CAAC;YACH;YACA,IAAI,CAACsB,KAAK,CAACgB,SAAS,EAAE;cACpB1C,iBAAiB,CAAC,UAAC2C,MAAM;gBAAA,UAAAC,MAAA,KAAAC,mBAAA,aAASF,MAAM,IAAEjB,KAAK;cAAA,CAAC,CAAC;YACnD;UAAC;UAAA;YAAA,OAAAG,QAAA,CAAAiB,IAAA;QAAA;MAAA,GAAArB,OAAA;IAAA,CACF;IAAA,gBAjBKL,kBAAkBA,CAAA;MAAA,OAAAC,IAAA,CAAA0B,KAAA,OAAAC,SAAA;IAAA;EAAA,GAiBvB;EAED,OACE7E,MAAA,YAAA8E,aAAA,CAAC3E,YAAA,CAAA4E,IAAI;IAACb,KAAK,EAAE,CAACvD,MAAM,CAACG,SAAS,EAAEA,SAAS,EAAE;MAAEkE,MAAM,EAAEzD,4BAA4B,WAA5BA,4BAA4B,GAAI;IAAG,CAAC,CAAE;IAAA0D,MAAA,EAAAxE,KAAA;IAAAyE,QAAA;MAAAC,QAAA,EAAAzE,YAAA;MAAA0E,UAAA;MAAAC,YAAA;IAAA;EAAA,GACzFrF,MAAA,YAAA8E,aAAA,CAAC3E,YAAA,CAAAmF,gBAAgB;IACfC,OAAO,EAAE;MAAEC,MAAM,EAAE,EAAE;MAAEC,GAAG,EAAE;IAAG,CAAE;IACjCrB,OAAO,EAAE,SAAAA,QAAA;MAAA,OAAMvB,SAAS,CAAC,QAAQ,CAAC;IAAA,CAAC;IACnC6C,MAAM,EAAC,wBAAwB;IAAAT,MAAA,EAAAxE,KAAA;IAAAyE,QAAA;MAAAC,QAAA,EAAAzE,YAAA;MAAA0E,UAAA;MAAAC,YAAA;IAAA;EAAA,GAE/BrF,MAAA,YAAA8E,aAAA,CAAC3E,YAAA,CAAA4E,IAAI;IAACb,KAAK,EAAE,CAACvD,MAAM,CAACO,IAAI,EAAEA,IAAI,CAAE;IAAA+D,MAAA,EAAAxE,KAAA;IAAAyE,QAAA;MAAAC,QAAA,EAAAzE,YAAA;MAAA0E,UAAA;MAAAC,YAAA;IAAA;EAAA,GAC/BrF,MAAA,YAAA8E,aAAA,CAACnD,iBAAiB;IAChBgE,oBAAoB,EAAErD,YAAY,CAACsD,MAAO;IAC1ChE,cAAc,EAAEA,cAAe;IAAAqD,MAAA,EAAAxE,KAAA;IAAAyE,QAAA;MAAAC,QAAA,EAAAzE,YAAA;MAAA0E,UAAA;MAAAC,YAAA;IAAA;EAAA,CAChC,CACG,CACU,CAAC,EAClBhD,aAAa,IACZrC,MAAA,YAAA8E,aAAA,CAAC3E,YAAA,CAAAmF,gBAAgB;IACfC,OAAO,EAAE;MAAEC,MAAM,EAAE,EAAE;MAAEC,GAAG,EAAE;IAAG,CAAE;IACjCrB,OAAO,EAAEpB,cAAe;IACxB0C,MAAM,EAAC,uBAAuB;IAAAT,MAAA,EAAAxE,KAAA;IAAAyE,QAAA;MAAAC,QAAA,EAAAzE,YAAA;MAAA0E,UAAA;MAAAC,YAAA;IAAA;EAAA,GAE9BrF,MAAA,YAAA8E,aAAA,CAAC3E,YAAA,CAAA4E,IAAI;IAACb,KAAK,EAAE,CAACvD,MAAM,CAACO,IAAI,EAAEA,IAAI,CAAE;IAAA+D,MAAA,EAAAxE,KAAA;IAAAyE,QAAA;MAAAC,QAAA,EAAAzE,YAAA;MAAA0E,UAAA;MAAAC,YAAA;IAAA;EAAA,GAC/BrF,MAAA,YAAA8E,aAAA,CAACpD,gBAAgB;IACfiE,oBAAoB,EAAErD,YAAY,CAACsD,MAAO;IAC1ChE,cAAc,EAAEA,cAAe;IAAAqD,MAAA,EAAAxE,KAAA;IAAAyE,QAAA;MAAAC,QAAA,EAAAzE,YAAA;MAAA0E,UAAA;MAAAC,YAAA;IAAA;EAAA,CAChC,CACG,CACU,CACnB,EACDrF,MAAA,YAAA8E,aAAA,CAAC3E,YAAA,CAAAmF,gBAAgB;IACfC,OAAO,EAAE;MAAEC,MAAM,EAAE,EAAE;MAAEC,GAAG,EAAE;IAAG,CAAE;IACjCrB,OAAO,EAAEnB,kBAAmB;IAC5ByC,MAAM,EAAC,sBAAsB;IAAAT,MAAA,EAAAxE,KAAA;IAAAyE,QAAA;MAAAC,QAAA,EAAAzE,YAAA;MAAA0E,UAAA;MAAAC,YAAA;IAAA;EAAA,GAE7BrF,MAAA,YAAA8E,aAAA,CAAC3E,YAAA,CAAA4E,IAAI;IAACb,KAAK,EAAE,CAACvD,MAAM,CAACO,IAAI,EAAEA,IAAI,CAAE;IAAA+D,MAAA,EAAAxE,KAAA;IAAAyE,QAAA;MAAAC,QAAA,EAAAzE,YAAA;MAAA0E,UAAA;MAAAC,YAAA;IAAA;EAAA,GAC/BrF,MAAA,YAAA8E,aAAA,CAACtD,kBAAkB;IACjBmE,oBAAoB,EAAErD,YAAY,CAACsD,MAAO;IAC1ChE,cAAc,EAAEA,cAAe;IAAAqD,MAAA,EAAAxE,KAAA;IAAAyE,QAAA;MAAAC,QAAA,EAAAzE,YAAA;MAAA0E,UAAA;MAAAC,YAAA;IAAA;EAAA,CAChC,CACG,CACU,CACd,CAAC;AAEX,CAAC;AAACQ,OAAA,CAAAzE,sBAAA,GAAAA,sBAAA"}

package/lib/module/components/Channel/Channel.js

@@ -41,6 +41,7 @@ var _icons = require("../../icons");
 var _native = require("../../native");
 var dbApi = _interopRequireWildcard(require("../../store/apis"));
 var _addReactionToLocalState = require("../../utils/addReactionToLocalState");
+var _compressImage = require("../../utils/compressImage");
 var _DBSyncManager = require("../../utils/DBSyncManager");
 var _patchMessageTextCommand = require("../../utils/patchMessageTextCommand");
 var _removeReactionFromLocalState = require("../../utils/removeReactionFromLocalState");
@@ -445,6 +446,7 @@ var ChannelWithContext = function ChannelWithContext(props) {
   var _useTargetedMessage = (0, _useTargetedMessage2.useTargetedMessage)(),
     setTargetedMessage = _useTargetedMessage.setTargetedMessage,
     targetedMessage = _useTargetedMessage.targetedMessage;
+  var uploadAbortControllerRef = (0, _react.useRef)(new Map());
   var channelId = (channel == null ? void 0 : channel.id) || '';
   (0, _react.useEffect)(function () {
     var initChannel = function initChannel() {
@@ -1152,45 +1154,55 @@ var ChannelWithContext = function ChannelWithContext(props) {
   var uploadPendingAttachments = function () {
     var _ref16 = (0, _asyncToGenerator2["default"])(_regenerator["default"].mark(function _callee12(message) {
       var _updatedMessage$attac;
-      var updatedMessage, i, _updatedMessage$attac2, attachment, file, _file$name, filename, contentType, uploadResponse, response;
+      var updatedMessage, i, _updatedMessage$attac2, attachment, image, file, _image$name, filename, controller, compressedUri, contentType, uploadResponse, _controller, response;
       return _regenerator["default"].wrap(function _callee12$(_context12) {
         while (1) switch (_context12.prev = _context12.next) {
           case 0:
             updatedMessage = (0, _extends2["default"])({}, message);
             if (!((_updatedMessage$attac = updatedMessage.attachments) != null && _updatedMessage$attac.length)) {
-              _context12.next = 40;
+              _context12.next = 48;
               break;
             }
             i = 0;
           case 3:
             if (!(i < ((_updatedMessage$attac2 = updatedMessage.attachments) == null ? void 0 : _updatedMessage$attac2.length))) {
-              _context12.next = 40;
+              _context12.next = 48;
               break;
             }
             attachment = updatedMessage.attachments[i];
+            image = attachment.originalImage;
             file = attachment.originalFile;
-            if (!(attachment.type === 'image' && file != null && file.uri && attachment.image_url && (0, _utils.isLocalUrl)(attachment.image_url))) {
-              _context12.next = 22;
+            if (!(attachment.type === 'image' && image != null && image.uri && attachment.image_url && (0, _utils.isLocalUrl)(attachment.image_url))) {
+              _context12.next = 28;
               break;
             }
-            filename = (_file$name = file.name) != null ? _file$name : file.uri.replace(/^(file:\/\/|content:\/\/)/, '');
+            filename = (_image$name = image.name) != null ? _image$name : image.uri.replace(/^(file:\/\/|content:\/\/)/, '');
+            controller = uploadAbortControllerRef.current.get(filename);
+            if (controller) {
+              controller.abort();
+              uploadAbortControllerRef.current["delete"](filename);
+            }
+            _context12.next = 13;
+            return (0, _compressImage.compressedImageURI)(image, compressImageQuality);
+          case 13:
+            compressedUri = _context12.sent;
             contentType = (0, _mimeTypes.lookup)(filename) || 'multipart/form-data';
             if (!doImageUploadRequest) {
-              _context12.next = 15;
+              _context12.next = 21;
               break;
             }
-            _context12.next = 12;
-            return doImageUploadRequest(file, channel);
-          case 12:
-            _context12.t0 = _context12.sent;
             _context12.next = 18;
+            return doImageUploadRequest(image, channel);
+          case 18:
+            _context12.t0 = _context12.sent;
+            _context12.next = 24;
             break;
-          case 15:
-            _context12.next = 17;
-            return channel.sendImage(file.uri, filename, contentType);
-          case 17:
+          case 21:
+            _context12.next = 23;
+            return channel.sendImage(compressedUri, filename, contentType);
+          case 23:
             _context12.t0 = _context12.sent;
-          case 18:
+          case 24:
             uploadResponse = _context12.t0;
             attachment.image_url = uploadResponse.file;
             delete attachment.originalFile;
@@ -1199,27 +1211,32 @@ var ChannelWithContext = function ChannelWithContext(props) {
                 cid: channel.cid
               })
             });
-          case 22:
+          case 28:
             if (!((attachment.type === 'file' || attachment.type === 'audio' || attachment.type === 'video') && attachment.asset_url && (0, _utils.isLocalUrl)(attachment.asset_url) && file != null && file.uri)) {
-              _context12.next = 37;
+              _context12.next = 45;
               break;
             }
+            _controller = uploadAbortControllerRef.current.get(file.name);
+            if (_controller) {
+              _controller.abort();
+              uploadAbortControllerRef.current["delete"](file.name);
+            }
             if (!doDocUploadRequest) {
-              _context12.next = 29;
+              _context12.next = 37;
               break;
             }
-            _context12.next = 26;
+            _context12.next = 34;
             return doDocUploadRequest(file, channel);
-          case 26:
+          case 34:
             _context12.t1 = _context12.sent;
-            _context12.next = 32;
+            _context12.next = 40;
             break;
-          case 29:
-            _context12.next = 31;
+          case 37:
+            _context12.next = 39;
             return channel.sendFile(file.uri, file.name, file.mimeType);
-          case 31:
+          case 39:
             _context12.t1 = _context12.sent;
-          case 32:
+          case 40:
             response = _context12.t1;
             attachment.asset_url = response.file;
             if (response.thumb_url) {
@@ -1231,13 +1248,13 @@ var ChannelWithContext = function ChannelWithContext(props) {
                 cid: channel.cid
               })
             });
-          case 37:
+          case 45:
             i++;
             _context12.next = 3;
             break;
-          case 40:
+          case 48:
             return _context12.abrupt("return", updatedMessage);
-          case 41:
+          case 49:
           case "end":
             return _context12.stop();
         }
@@ -1556,11 +1573,12 @@ var ChannelWithContext = function ChannelWithContext(props) {
   var editMessage = function editMessage(updatedMessage) {
     return doUpdateMessageRequest ? doUpdateMessageRequest((channel == null ? void 0 : channel.cid) || '', updatedMessage) : client.updateMessage(updatedMessage);
   };
-  var setEditingState = function setEditingState(message) {
-    setEditing(message);
+  var setEditingState = function setEditingState(messageOrBoolean) {
+    clearQuotedMessageState();
+    setEditing(messageOrBoolean);
   };
-  var setQuotedMessageState = function setQuotedMessageState(message) {
-    setQuotedMessage(message);
+  var setQuotedMessageState = function setQuotedMessageState(messageOrBoolean) {
+    setQuotedMessage(messageOrBoolean);
   };
   var clearEditingState = function clearEditingState() {
     return setEditing(false);
@@ -1865,6 +1883,7 @@ var ChannelWithContext = function ChannelWithContext(props) {
     StickyHeader: StickyHeader,
     targetedMessage: targetedMessage,
     threadList: threadList,
+    uploadAbortControllerRef: uploadAbortControllerRef,
     watcherCount: watcherCount,
     watchers: watchers
   });
@@ -2037,7 +2056,7 @@ var ChannelWithContext = function ChannelWithContext(props) {
       __self: _this,
       __source: {
         fileName: _jsxFileName,
-        lineNumber: 2029,
+        lineNumber: 2053,
         columnNumber: 12
       }
     });
@@ -2051,7 +2070,7 @@ var ChannelWithContext = function ChannelWithContext(props) {
       __self: _this,
       __source: {
         fileName: _jsxFileName,
-        lineNumber: 2034,
+        lineNumber: 2058,
         columnNumber: 7
       }
     }, t('Please select a channel first'));
@@ -2064,7 +2083,7 @@ var ChannelWithContext = function ChannelWithContext(props) {
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 2041,
+      lineNumber: 2065,
       columnNumber: 5
     }
   }), _react["default"].createElement(_ChannelContext.ChannelProvider, {
@@ -2072,7 +2091,7 @@ var ChannelWithContext = function ChannelWithContext(props) {
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 2047,
+      lineNumber: 2071,
       columnNumber: 7
     }
   }, _react["default"].createElement(_OwnCapabilitiesContext.OwnCapabilitiesProvider, {
@@ -2080,7 +2099,7 @@ var ChannelWithContext = function ChannelWithContext(props) {
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 2048,
+      lineNumber: 2072,
       columnNumber: 9
     }
   }, _react["default"].createElement(_TypingContext.TypingProvider, {
@@ -2088,7 +2107,7 @@ var ChannelWithContext = function ChannelWithContext(props) {
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 2049,
+      lineNumber: 2073,
       columnNumber: 11
     }
   }, _react["default"].createElement(_PaginatedMessageListContext.PaginatedMessageListProvider, {
@@ -2096,7 +2115,7 @@ var ChannelWithContext = function ChannelWithContext(props) {
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 2050,
+      lineNumber: 2074,
       columnNumber: 13
     }
   }, _react["default"].createElement(_MessagesContext.MessagesProvider, {
@@ -2104,7 +2123,7 @@ var ChannelWithContext = function ChannelWithContext(props) {
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 2051,
+      lineNumber: 2075,
       columnNumber: 15
     }
   }, _react["default"].createElement(_ThreadContext.ThreadProvider, {
@@ -2112,7 +2131,7 @@ var ChannelWithContext = function ChannelWithContext(props) {
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 2052,
+      lineNumber: 2076,
       columnNumber: 17
     }
   }, _react["default"].createElement(_SuggestionsContext.SuggestionsProvider, {
@@ -2120,7 +2139,7 @@ var ChannelWithContext = function ChannelWithContext(props) {
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 2053,
+      lineNumber: 2077,
       columnNumber: 19
     }
   }, _react["default"].createElement(_MessageInputContext.MessageInputProvider, {
@@ -2128,7 +2147,7 @@ var ChannelWithContext = function ChannelWithContext(props) {
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 2054,
+      lineNumber: 2078,
       columnNumber: 21
     }
   }, _react["default"].createElement(_reactNative.View, {
@@ -2138,7 +2157,7 @@ var ChannelWithContext = function ChannelWithContext(props) {
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 2055,
+      lineNumber: 2079,
       columnNumber: 23
     }
   }, children))))))))));
@@ -2189,7 +2208,7 @@ var Channel = function Channel(props) {
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 2112,
+      lineNumber: 2136,
       columnNumber: 5
     }
   }));