stream-chat-react-native-core 4.11.1-beta.4 → 4.12.0-beta.1

package/lib/commonjs/components/MessageInput/FileUploadPreview.js

@@ -29,6 +29,8 @@ var _Close = require("../../icons/Close");
 
 var _Warning = require("../../icons/Warning");
 
+var _native = require("../../native");
+
 var _utils = require("../../utils/utils");
 
 var _FileAttachment = require("../Attachment/FileAttachment");
@@ -50,8 +52,8 @@ var styles = _reactNative.StyleSheet.create({
     borderRadius: 24,
     height: 24,
     position: 'absolute',
-    right: 14,
-    top: 4,
+    right: 8,
+    top: 8,
     width: 24
   },
   fileContainer: {
@@ -61,11 +63,17 @@ var styles = _reactNative.StyleSheet.create({
     height: FILE_PREVIEW_HEIGHT,
     justifyContent: 'space-between',
     marginBottom: 8,
-    padding: 8
+    paddingLeft: 8,
+    paddingRight: 8
   },
   fileContentContainer: {
     flexDirection: 'row'
   },
+  fileIcon: {
+    alignItems: 'center',
+    alignSelf: 'center',
+    justifyContent: 'center'
+  },
   filenameText: {
     fontSize: 14,
     fontWeight: 'bold',
@@ -111,6 +119,7 @@ var UnsupportedFileTypeOrFileSizeIndicator = function UnsupportedFileTypeOrFileS
       _useTheme$theme$color = _useTheme$theme.colors,
       accent_red = _useTheme$theme$color.accent_red,
       grey = _useTheme$theme$color.grey,
+      grey_dark = _useTheme$theme$color.grey_dark,
       fileSizeText = _useTheme$theme.messageInput.fileUploadPreview.fileSizeText;
 
   var _useTranslationContex = (0, _TranslationContext.useTranslationContext)(),
@@ -121,7 +130,7 @@ var UnsupportedFileTypeOrFileSizeIndicator = function UnsupportedFileTypeOrFileS
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 97,
+      lineNumber: 104,
       columnNumber: 5
     }
   }, _react["default"].createElement(_Warning.Warning, {
@@ -132,17 +141,17 @@ var UnsupportedFileTypeOrFileSizeIndicator = function UnsupportedFileTypeOrFileS
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 98,
+      lineNumber: 105,
       columnNumber: 7
     }
   }), _react["default"].createElement(_reactNative.Text, {
     style: [styles.unsupportedFileText, {
-      color: grey
+      color: grey_dark
     }],
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 104,
+      lineNumber: 111,
       columnNumber: 7
     }
   }, t('File type not supported'))) : _react["default"].createElement(_WritingDirectionAwareText.WritingDirectionAwareText, {
@@ -152,16 +161,18 @@ var UnsupportedFileTypeOrFileSizeIndicator = function UnsupportedFileTypeOrFileS
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 109,
+      lineNumber: 116,
       columnNumber: 5
     }
   }, item.file.duration || (0, _FileAttachment.getFileSizeDisplayText)(item.file.size));
 };
 
 var FileUploadPreviewWithContext = function FileUploadPreviewWithContext(props) {
-  var FileAttachmentIcon = props.FileAttachmentIcon,
+  var AudioAttachmentUploadPreview = props.AudioAttachmentUploadPreview,
+      FileAttachmentIcon = props.FileAttachmentIcon,
       fileUploads = props.fileUploads,
       removeFile = props.removeFile,
+      setFileUploads = props.setFileUploads,
       uploadFile = props.uploadFile;
   var flatListRef = (0, _react.useRef)(null);
 
@@ -170,6 +181,46 @@ var FileUploadPreviewWithContext = function FileUploadPreviewWithContext(props)
       flatListWidth = _useState2[0],
       setFlatListWidth = _useState2[1];
 
+  var onLoad = function onLoad(index, duration) {
+    setFileUploads(function (prevFileUploads) {
+      return prevFileUploads.map(function (fileUpload) {
+        return (0, _extends2["default"])({}, fileUpload, {
+          duration: fileUpload.id === index ? duration : fileUpload.duration
+        });
+      });
+    });
+  };
+
+  var onProgress = function onProgress(index, currentTime, hasEnd) {
+    setFileUploads(function (prevFileUploads) {
+      return prevFileUploads.map(function (fileUpload) {
+        return (0, _extends2["default"])({}, fileUpload, {
+          progress: fileUpload.id === index ? hasEnd ? 1 : currentTime ? currentTime / fileUpload.duration : 0 : fileUpload.progress
+        });
+      });
+    });
+  };
+
+  var onPlayPause = function onPlayPause(index, status) {
+    if (status === false) {
+      setFileUploads(function (prevFileUploads) {
+        return prevFileUploads.map(function (fileUpload) {
+          return (0, _extends2["default"])({}, fileUpload, {
+            paused: fileUpload.id === index ? false : true
+          });
+        });
+      });
+    } else {
+      setFileUploads(function (prevFileUploads) {
+        return prevFileUploads.map(function (fileUpload) {
+          return (0, _extends2["default"])({}, fileUpload, {
+            paused: true
+          });
+        });
+      });
+    }
+  };
+
   var _useTheme2 = (0, _ThemeContext.useTheme)(),
       _useTheme2$theme = _useTheme2.theme,
       _useTheme2$theme$colo = _useTheme2$theme.colors,
@@ -178,6 +229,7 @@ var FileUploadPreviewWithContext = function FileUploadPreviewWithContext(props)
       grey_gainsboro = _useTheme2$theme$colo.grey_gainsboro,
       grey_whisper = _useTheme2$theme$colo.grey_whisper,
       _useTheme2$theme$mess = _useTheme2$theme.messageInput.fileUploadPreview,
+      audioAttachmentFileContainer = _useTheme2$theme$mess.audioAttachmentFileContainer,
       dismiss = _useTheme2$theme$mess.dismiss,
       fileContainer = _useTheme2$theme$mess.fileContainer,
       fileContentContainer = _useTheme2$theme$mess.fileContentContainer,
@@ -186,9 +238,12 @@ var FileUploadPreviewWithContext = function FileUploadPreviewWithContext(props)
       flatList = _useTheme2$theme$mess.flatList;
 
   var renderItem = function renderItem(_ref2) {
+    var _item$file$type;
+
     var index = _ref2.index,
         item = _ref2.item;
     var indicatorType = (0, _utils.getIndicatorTypeForFileState)(item.state);
+    var lastIndexOfDot = item.file.name.lastIndexOf('.');
     return _react["default"].createElement(_react["default"].Fragment, null, _react["default"].createElement(_UploadProgressIndicator.UploadProgressIndicator, {
       action: function action() {
         uploadFile({
@@ -200,10 +255,33 @@ var FileUploadPreviewWithContext = function FileUploadPreviewWithContext(props)
       __self: _this,
       __source: {
         fileName: _jsxFileName,
-        lineNumber: 154,
+        lineNumber: 219,
         columnNumber: 9
       }
-    }, _react["default"].createElement(_reactNative.View, {
+    }, (_item$file$type = item.file.type) != null && _item$file$type.startsWith('audio/') && (0, _native.isAudioPackageAvailable)() ? _react["default"].createElement(_reactNative.View, {
+      style: [{
+        marginBottom: item.state === _utils.FileState.UPLOADED ? 8 : 0
+      }, audioAttachmentFileContainer],
+      __self: _this,
+      __source: {
+        fileName: _jsxFileName,
+        lineNumber: 227,
+        columnNumber: 13
+      }
+    }, _react["default"].createElement(AudioAttachmentUploadPreview, {
+      index: index,
+      item: item,
+      onLoad: onLoad,
+      onPlayPause: onPlayPause,
+      onProgress: onProgress,
+      testID: "audio-attachment-upload-preview",
+      __self: _this,
+      __source: {
+        fileName: _jsxFileName,
+        lineNumber: 233,
+        columnNumber: 15
+      }
+    })) : _react["default"].createElement(_reactNative.View, {
       style: [styles.fileContainer, index === fileUploads.length - 1 ? {
         marginBottom: 0
       } : {}, {
@@ -213,32 +291,40 @@ var FileUploadPreviewWithContext = function FileUploadPreviewWithContext(props)
       __self: _this,
       __source: {
         fileName: _jsxFileName,
-        lineNumber: 161,
-        columnNumber: 11
+        lineNumber: 243,
+        columnNumber: 13
       }
     }, _react["default"].createElement(_reactNative.View, {
       style: [styles.fileContentContainer, fileContentContainer],
       __self: _this,
       __source: {
         fileName: _jsxFileName,
-        lineNumber: 176,
-        columnNumber: 13
+        lineNumber: 258,
+        columnNumber: 15
+      }
+    }, _react["default"].createElement(_reactNative.View, {
+      style: styles.fileIcon,
+      __self: _this,
+      __source: {
+        fileName: _jsxFileName,
+        lineNumber: 259,
+        columnNumber: 17
       }
     }, _react["default"].createElement(FileAttachmentIcon, {
       mimeType: item.file.type,
       __self: _this,
       __source: {
         fileName: _jsxFileName,
-        lineNumber: 177,
-        columnNumber: 15
+        lineNumber: 260,
+        columnNumber: 19
       }
-    }), _react["default"].createElement(_reactNative.View, {
+    })), _react["default"].createElement(_reactNative.View, {
       style: [styles.fileTextContainer, fileTextContainer],
       __self: _this,
       __source: {
         fileName: _jsxFileName,
-        lineNumber: 178,
-        columnNumber: 15
+        lineNumber: 262,
+        columnNumber: 17
       }
     }, _react["default"].createElement(_reactNative.Text, {
       numberOfLines: 1,
@@ -253,19 +339,40 @@ var FileUploadPreviewWithContext = function FileUploadPreviewWithContext(props)
       __self: _this,
       __source: {
         fileName: _jsxFileName,
-        lineNumber: 179,
-        columnNumber: 17
+        lineNumber: 263,
+        columnNumber: 19
       }
-    }, item.file.name || ''), indicatorType !== null && _react["default"].createElement(UnsupportedFileTypeOrFileSizeIndicator, {
+    }, item.file.name.slice(0, 12) + '...' + item.file.name.slice(lastIndexOfDot)), indicatorType !== null && _react["default"].createElement(UnsupportedFileTypeOrFileSizeIndicator, {
       indicatorType: indicatorType,
       item: item,
       __self: _this,
       __source: {
         fileName: _jsxFileName,
-        lineNumber: 199,
-        columnNumber: 19
+        lineNumber: 283,
+        columnNumber: 21
+      }
+    })))), _react["default"].createElement(_reactNative.TouchableOpacity, {
+      onPress: function onPress() {
+        removeFile(item.id);
+      },
+      style: [styles.dismiss, {
+        backgroundColor: grey_gainsboro
+      }, dismiss],
+      testID: "remove-file-upload-preview",
+      __self: _this,
+      __source: {
+        fileName: _jsxFileName,
+        lineNumber: 292,
+        columnNumber: 11
+      }
+    }, _react["default"].createElement(_Close.Close, {
+      __self: _this,
+      __source: {
+        fileName: _jsxFileName,
+        lineNumber: 299,
+        columnNumber: 13
       }
-    }))))), _react["default"].createElement(_reactNative.TouchableOpacity, {
+    }))), _react["default"].createElement(_reactNative.TouchableOpacity, {
       onPress: function onPress() {
         removeFile(item.id);
       },
@@ -276,7 +383,7 @@ var FileUploadPreviewWithContext = function FileUploadPreviewWithContext(props)
       __self: _this,
       __source: {
         fileName: _jsxFileName,
-        lineNumber: 208,
+        lineNumber: 302,
         columnNumber: 9
       }
     }, _react["default"].createElement(_Close.Close, {
@@ -284,7 +391,7 @@ var FileUploadPreviewWithContext = function FileUploadPreviewWithContext(props)
       __self: _this,
       __source: {
         fileName: _jsxFileName,
-        lineNumber: 215,
+        lineNumber: 309,
         columnNumber: 11
       }
     })));
@@ -310,7 +417,7 @@ var FileUploadPreviewWithContext = function FileUploadPreviewWithContext(props)
       };
     },
     keyExtractor: function keyExtractor(item) {
-      return item.id;
+      return "" + item.id;
     },
     onLayout: function onLayout(_ref3) {
       var width = _ref3.nativeEvent.layout.width;
@@ -322,7 +429,7 @@ var FileUploadPreviewWithContext = function FileUploadPreviewWithContext(props)
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 230,
+      lineNumber: 324,
       columnNumber: 5
     }
   }) : null;
@@ -332,7 +439,7 @@ var areEqual = function areEqual(prevProps, nextProps) {
   var prevFileUploads = prevProps.fileUploads;
   var nextFileUploads = nextProps.fileUploads;
   return prevFileUploads.length === nextFileUploads.length && prevFileUploads.every(function (prevFileUpload, index) {
-    return prevFileUpload.state === nextFileUploads[index].state;
+    return prevFileUpload.state === nextFileUploads[index].state && prevFileUpload.paused === nextFileUploads[index].paused && prevFileUpload.progress === nextFileUploads[index].progress && prevFileUpload.duration === nextFileUploads[index].duration;
   });
 };
 
@@ -340,23 +447,27 @@ var MemoizedFileUploadPreview = _react["default"].memo(FileUploadPreviewWithCont
 
 var FileUploadPreview = function FileUploadPreview(props) {
   var _useMessageInputConte = (0, _MessageInputContext.useMessageInputContext)(),
+      AudioAttachmentUploadPreview = _useMessageInputConte.AudioAttachmentUploadPreview,
       fileUploads = _useMessageInputConte.fileUploads,
       removeFile = _useMessageInputConte.removeFile,
+      setFileUploads = _useMessageInputConte.setFileUploads,
       uploadFile = _useMessageInputConte.uploadFile;
 
   var _useMessagesContext = (0, _MessagesContext.useMessagesContext)(),
       FileAttachmentIcon = _useMessagesContext.FileAttachmentIcon;
 
   return _react["default"].createElement(MemoizedFileUploadPreview, (0, _extends2["default"])({
+    AudioAttachmentUploadPreview: AudioAttachmentUploadPreview,
     FileAttachmentIcon: FileAttachmentIcon,
     fileUploads: fileUploads,
     removeFile: removeFile,
+    setFileUploads: setFileUploads,
     uploadFile: uploadFile
   }, props, {
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 290,
+      lineNumber: 388,
       columnNumber: 5
     }
   }));

package/lib/commonjs/components/MessageInput/FileUploadPreview.js.map

@@ -1 +1 @@
-{"version":3,"sources":["FileUploadPreview.tsx"],"names":["FILE_PREVIEW_HEIGHT","WARNING_ICON_SIZE","styles","StyleSheet","create","dismiss","borderRadius","height","position","right","top","width","fileContainer","borderWidth","flexDirection","justifyContent","marginBottom","padding","fileContentContainer","filenameText","fontSize","fontWeight","paddingHorizontal","fileSizeText","fileTextContainer","flatList","maxHeight","overlay","marginLeft","marginRight","unsupportedFile","paddingLeft","unsupportedFileText","marginHorizontal","warningIconStyle","marginTop","UnsupportedFileTypeOrFileSizeIndicator","indicatorType","item","theme","colors","accent_red","grey","messageInput","fileUploadPreview","t","ProgressIndicatorTypes","NOT_SUPPORTED","color","file","duration","size","FileUploadPreviewWithContext","props","FileAttachmentIcon","fileUploads","removeFile","uploadFile","flatListRef","flatListWidth","setFlatListWidth","black","grey_dark","grey_gainsboro","grey_whisper","renderItem","index","state","newFile","length","borderColor","type","I18nManager","isRTL","writingDirection","name","id","backgroundColor","fileUploadsLength","current","setTimeout","scrollToEnd","_","offset","nativeEvent","layout","areEqual","prevProps","nextProps","prevFileUploads","nextFileUploads","every","prevFileUpload","MemoizedFileUploadPreview","React","memo","FileUploadPreview","displayName"],"mappings":"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","sourcesContent":["import React, { useEffect, useRef, useState } from 'react';\nimport { FlatList, I18nManager, StyleSheet, Text, TouchableOpacity, View } from 'react-native';\n\nimport { UploadProgressIndicator } from './UploadProgressIndicator';\n\nimport {\n  FileUpload,\n  MessageInputContextValue,\n  useMessageInputContext,\n} from '../../contexts/messageInputContext/MessageInputContext';\nimport {\n  MessagesContextValue,\n  useMessagesContext,\n} from '../../contexts/messagesContext/MessagesContext';\nimport { useTheme } from '../../contexts/themeContext/ThemeContext';\nimport { useTranslationContext } from '../../contexts/translationContext/TranslationContext';\nimport { Close } from '../../icons/Close';\nimport { Warning } from '../../icons/Warning';\nimport type { DefaultStreamChatGenerics } from '../../types/types';\nimport { getIndicatorTypeForFileState, ProgressIndicatorTypes } from '../../utils/utils';\nimport { getFileSizeDisplayText } from '../Attachment/FileAttachment';\nimport { WritingDirectionAwareText } from '../RTLComponents/WritingDirectionAwareText';\n\nconst FILE_PREVIEW_HEIGHT = 60;\nconst WARNING_ICON_SIZE = 16;\n\nconst styles = StyleSheet.create({\n  dismiss: {\n    borderRadius: 24,\n    height: 24,\n    position: 'absolute',\n    right: 14,\n    top: 4,\n    width: 24,\n  },\n  fileContainer: {\n    borderRadius: 12,\n    borderWidth: 1,\n    flexDirection: 'row',\n    height: FILE_PREVIEW_HEIGHT,\n    justifyContent: 'space-between',\n    marginBottom: 8,\n    padding: 8,\n  },\n  fileContentContainer: { flexDirection: 'row' },\n  filenameText: {\n    fontSize: 14,\n    fontWeight: 'bold',\n    paddingHorizontal: 10,\n  },\n  fileSizeText: {\n    fontSize: 12,\n    paddingHorizontal: 10,\n  },\n  fileTextContainer: {\n    height: '100%',\n    justifyContent: 'space-around',\n  },\n  flatList: { marginBottom: 12, maxHeight: FILE_PREVIEW_HEIGHT * 2.5 + 16 },\n  overlay: {\n    borderRadius: 12,\n    marginLeft: 8,\n    marginRight: 8,\n  },\n  unsupportedFile: {\n    flexDirection: 'row',\n    paddingLeft: 10,\n  },\n  unsupportedFileText: {\n    fontSize: 12,\n    marginHorizontal: 4,\n  },\n  warningIconStyle: {\n    borderRadius: 24,\n    marginTop: 2,\n  },\n});\n\nconst UnsupportedFileTypeOrFileSizeIndicator = ({\n  indicatorType,\n  item,\n}: {\n  indicatorType: typeof ProgressIndicatorTypes[keyof typeof ProgressIndicatorTypes];\n  item: FileUpload;\n}) => {\n  const {\n    theme: {\n      colors: { accent_red, grey },\n      messageInput: {\n        fileUploadPreview: { fileSizeText },\n      },\n    },\n  } = useTheme();\n\n  const { t } = useTranslationContext();\n  return indicatorType === ProgressIndicatorTypes.NOT_SUPPORTED ? (\n    <View style={styles.unsupportedFile}>\n      <Warning\n        height={WARNING_ICON_SIZE}\n        pathFill={accent_red}\n        style={styles.warningIconStyle}\n        width={WARNING_ICON_SIZE}\n      />\n      <Text style={[styles.unsupportedFileText, { color: grey }]}>\n        {t('File type not supported')}\n      </Text>\n    </View>\n  ) : (\n    <WritingDirectionAwareText style={[styles.fileSizeText, { color: grey }, fileSizeText]}>\n      {item.file.duration || getFileSizeDisplayText(item.file.size)}\n    </WritingDirectionAwareText>\n  );\n};\n\ntype FileUploadPreviewPropsWithContext<\n  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,\n> = Pick<\n  MessageInputContextValue<StreamChatGenerics>,\n  'fileUploads' | 'removeFile' | 'uploadFile'\n> &\n  Pick<MessagesContextValue<StreamChatGenerics>, 'FileAttachmentIcon'>;\n\nconst FileUploadPreviewWithContext = <\n  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,\n>(\n  props: FileUploadPreviewPropsWithContext<StreamChatGenerics>,\n) => {\n  const { FileAttachmentIcon, fileUploads, removeFile, uploadFile } = props;\n\n  const flatListRef = useRef<FlatList<FileUpload> | null>(null);\n  const [flatListWidth, setFlatListWidth] = useState(0);\n\n  const {\n    theme: {\n      colors: { black, grey_dark, grey_gainsboro, grey_whisper },\n      messageInput: {\n        fileUploadPreview: {\n          dismiss,\n          fileContainer,\n          fileContentContainer,\n          filenameText,\n          fileTextContainer,\n          flatList,\n        },\n      },\n    },\n  } = useTheme();\n\n  const renderItem = ({ index, item }: { index: number; item: FileUpload }) => {\n    const indicatorType = getIndicatorTypeForFileState(item.state);\n\n    return (\n      <>\n        <UploadProgressIndicator\n          action={() => {\n            uploadFile({ newFile: item });\n          }}\n          style={styles.overlay}\n          type={indicatorType}\n        >\n          <View\n            style={[\n              styles.fileContainer,\n              index === fileUploads.length - 1\n                ? {\n                    marginBottom: 0,\n                  }\n                : {},\n              {\n                borderColor: grey_whisper,\n                width: flatListWidth - 16,\n              },\n              fileContainer,\n            ]}\n          >\n            <View style={[styles.fileContentContainer, fileContentContainer]}>\n              <FileAttachmentIcon mimeType={item.file.type} />\n              <View style={[styles.fileTextContainer, fileTextContainer]}>\n                <Text\n                  numberOfLines={1}\n                  style={[\n                    styles.filenameText,\n                    {\n                      color: black,\n                      width:\n                        flatListWidth -\n                        16 - // 16 = horizontal padding\n                        40 - // 40 = file icon size\n                        24 - // 24 = close icon size\n                        24, // 24 = internal padding\n                    },\n                    I18nManager.isRTL ? { writingDirection: 'rtl' } : { writingDirection: 'ltr' },\n                    filenameText,\n                  ]}\n                >\n                  {item.file.name || ''}\n                </Text>\n                {indicatorType !== null && (\n                  <UnsupportedFileTypeOrFileSizeIndicator\n                    indicatorType={indicatorType}\n                    item={item}\n                  />\n                )}\n              </View>\n            </View>\n          </View>\n        </UploadProgressIndicator>\n        <TouchableOpacity\n          onPress={() => {\n            removeFile(item.id);\n          }}\n          style={[styles.dismiss, { backgroundColor: grey_gainsboro }, dismiss]}\n          testID='remove-file-upload-preview'\n        >\n          <Close pathFill={grey_dark} />\n        </TouchableOpacity>\n      </>\n    );\n  };\n\n  const fileUploadsLength = fileUploads.length;\n\n  useEffect(() => {\n    if (fileUploadsLength && flatListRef.current) {\n      setTimeout(() => flatListRef.current?.scrollToEnd(), 1);\n    }\n  }, [fileUploadsLength]);\n\n  return fileUploadsLength ? (\n    <FlatList\n      data={fileUploads}\n      getItemLayout={(_, index) => ({\n        index,\n        length: FILE_PREVIEW_HEIGHT + 8,\n        offset: (FILE_PREVIEW_HEIGHT + 8) * index,\n      })}\n      keyExtractor={(item) => item.id}\n      onLayout={({\n        nativeEvent: {\n          layout: { width },\n        },\n      }) => {\n        setFlatListWidth(width);\n      }}\n      ref={flatListRef}\n      renderItem={renderItem}\n      style={[styles.flatList, flatList]}\n    />\n  ) : null;\n};\n\nconst areEqual = <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>(\n  prevProps: FileUploadPreviewPropsWithContext<StreamChatGenerics>,\n  nextProps: FileUploadPreviewPropsWithContext<StreamChatGenerics>,\n) => {\n  const { fileUploads: prevFileUploads } = prevProps;\n  const { fileUploads: nextFileUploads } = nextProps;\n\n  return (\n    prevFileUploads.length === nextFileUploads.length &&\n    prevFileUploads.every(\n      (prevFileUpload, index) => prevFileUpload.state === nextFileUploads[index].state,\n    )\n  );\n};\n\nconst MemoizedFileUploadPreview = React.memo(\n  FileUploadPreviewWithContext,\n  areEqual,\n) as typeof FileUploadPreviewWithContext;\n\nexport type FileUploadPreviewProps<\n  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,\n> = Partial<FileUploadPreviewPropsWithContext<StreamChatGenerics>>;\n\n/**\n * FileUploadPreview\n * UI Component to preview the files set for upload\n */\nexport const FileUploadPreview = <\n  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,\n>(\n  props: FileUploadPreviewProps<StreamChatGenerics>,\n) => {\n  const { fileUploads, removeFile, uploadFile } = useMessageInputContext<StreamChatGenerics>();\n\n  const { FileAttachmentIcon } = useMessagesContext<StreamChatGenerics>();\n\n  return (\n    <MemoizedFileUploadPreview\n      {...{ FileAttachmentIcon, fileUploads, removeFile, uploadFile }}\n      {...props}\n    />\n  );\n};\n\nFileUploadPreview.displayName = 'FileUploadPreview{messageInput{fileUploadPreview}}';\n"]}
+{"version":3,"sources":["FileUploadPreview.tsx"],"names":["FILE_PREVIEW_HEIGHT","WARNING_ICON_SIZE","styles","StyleSheet","create","dismiss","borderRadius","height","position","right","top","width","fileContainer","borderWidth","flexDirection","justifyContent","marginBottom","paddingLeft","paddingRight","fileContentContainer","fileIcon","alignItems","alignSelf","filenameText","fontSize","fontWeight","paddingHorizontal","fileSizeText","fileTextContainer","flatList","maxHeight","overlay","marginLeft","marginRight","unsupportedFile","unsupportedFileText","marginHorizontal","warningIconStyle","marginTop","UnsupportedFileTypeOrFileSizeIndicator","indicatorType","item","theme","colors","accent_red","grey","grey_dark","messageInput","fileUploadPreview","t","ProgressIndicatorTypes","NOT_SUPPORTED","color","file","duration","size","FileUploadPreviewWithContext","props","AudioAttachmentUploadPreview","FileAttachmentIcon","fileUploads","removeFile","setFileUploads","uploadFile","flatListRef","flatListWidth","setFlatListWidth","onLoad","index","prevFileUploads","map","fileUpload","id","onProgress","currentTime","hasEnd","progress","onPlayPause","status","paused","black","grey_gainsboro","grey_whisper","audioAttachmentFileContainer","renderItem","state","lastIndexOfDot","name","lastIndexOf","newFile","type","startsWith","FileState","UPLOADED","length","borderColor","I18nManager","isRTL","writingDirection","slice","backgroundColor","fileUploadsLength","current","setTimeout","scrollToEnd","_","offset","nativeEvent","layout","areEqual","prevProps","nextProps","nextFileUploads","every","prevFileUpload","MemoizedFileUploadPreview","React","memo","FileUploadPreview","displayName"],"mappings":"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","sourcesContent":["import React, { useEffect, useRef, useState } from 'react';\nimport { FlatList, I18nManager, StyleSheet, Text, TouchableOpacity, View } from 'react-native';\n\nimport { UploadProgressIndicator } from './UploadProgressIndicator';\n\nimport {\n  FileUpload,\n  MessageInputContextValue,\n  useMessageInputContext,\n} from '../../contexts/messageInputContext/MessageInputContext';\nimport {\n  MessagesContextValue,\n  useMessagesContext,\n} from '../../contexts/messagesContext/MessagesContext';\nimport { useTheme } from '../../contexts/themeContext/ThemeContext';\nimport { useTranslationContext } from '../../contexts/translationContext/TranslationContext';\nimport { Close } from '../../icons/Close';\nimport { Warning } from '../../icons/Warning';\nimport { isAudioPackageAvailable } from '../../native';\nimport type { DefaultStreamChatGenerics } from '../../types/types';\nimport { FileState, getIndicatorTypeForFileState, ProgressIndicatorTypes } from '../../utils/utils';\nimport { getFileSizeDisplayText } from '../Attachment/FileAttachment';\nimport { WritingDirectionAwareText } from '../RTLComponents/WritingDirectionAwareText';\n\nconst FILE_PREVIEW_HEIGHT = 60;\nconst WARNING_ICON_SIZE = 16;\n\nconst styles = StyleSheet.create({\n  dismiss: {\n    borderRadius: 24,\n    height: 24,\n    position: 'absolute',\n    right: 8,\n    top: 8,\n    width: 24,\n  },\n  fileContainer: {\n    borderRadius: 12,\n    borderWidth: 1,\n    flexDirection: 'row',\n    height: FILE_PREVIEW_HEIGHT,\n    justifyContent: 'space-between',\n    marginBottom: 8,\n    paddingLeft: 8,\n    paddingRight: 8,\n  },\n  fileContentContainer: { flexDirection: 'row' },\n  fileIcon: {\n    alignItems: 'center',\n    alignSelf: 'center',\n    justifyContent: 'center',\n  },\n  filenameText: {\n    fontSize: 14,\n    fontWeight: 'bold',\n    paddingHorizontal: 10,\n  },\n  fileSizeText: {\n    fontSize: 12,\n    paddingHorizontal: 10,\n  },\n  fileTextContainer: {\n    height: '100%',\n    justifyContent: 'space-around',\n  },\n  flatList: { marginBottom: 12, maxHeight: FILE_PREVIEW_HEIGHT * 2.5 + 16 },\n  overlay: {\n    borderRadius: 12,\n    marginLeft: 8,\n    marginRight: 8,\n  },\n  unsupportedFile: {\n    flexDirection: 'row',\n    paddingLeft: 10,\n  },\n  unsupportedFileText: {\n    fontSize: 12,\n    marginHorizontal: 4,\n  },\n  warningIconStyle: {\n    borderRadius: 24,\n    marginTop: 2,\n  },\n});\n\nconst UnsupportedFileTypeOrFileSizeIndicator = ({\n  indicatorType,\n  item,\n}: {\n  indicatorType: typeof ProgressIndicatorTypes[keyof typeof ProgressIndicatorTypes];\n  item: FileUpload;\n}) => {\n  const {\n    theme: {\n      colors: { accent_red, grey, grey_dark },\n      messageInput: {\n        fileUploadPreview: { fileSizeText },\n      },\n    },\n  } = useTheme();\n\n  const { t } = useTranslationContext();\n  return indicatorType === ProgressIndicatorTypes.NOT_SUPPORTED ? (\n    <View style={styles.unsupportedFile}>\n      <Warning\n        height={WARNING_ICON_SIZE}\n        pathFill={accent_red}\n        style={styles.warningIconStyle}\n        width={WARNING_ICON_SIZE}\n      />\n      <Text style={[styles.unsupportedFileText, { color: grey_dark }]}>\n        {t('File type not supported')}\n      </Text>\n    </View>\n  ) : (\n    <WritingDirectionAwareText style={[styles.fileSizeText, { color: grey }, fileSizeText]}>\n      {item.file.duration || getFileSizeDisplayText(item.file.size)}\n    </WritingDirectionAwareText>\n  );\n};\n\ntype FileUploadPreviewPropsWithContext<\n  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,\n> = Pick<\n  MessageInputContextValue<StreamChatGenerics>,\n  'fileUploads' | 'removeFile' | 'uploadFile' | 'setFileUploads' | 'AudioAttachmentUploadPreview'\n> &\n  Pick<MessagesContextValue<StreamChatGenerics>, 'FileAttachmentIcon'>;\n\nconst FileUploadPreviewWithContext = <\n  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,\n>(\n  props: FileUploadPreviewPropsWithContext<StreamChatGenerics>,\n) => {\n  const {\n    AudioAttachmentUploadPreview,\n    FileAttachmentIcon,\n    fileUploads,\n    removeFile,\n    setFileUploads,\n    uploadFile,\n  } = props;\n\n  const flatListRef = useRef<FlatList<FileUpload> | null>(null);\n  const [flatListWidth, setFlatListWidth] = useState(0);\n\n  // Handler triggered when an audio is loaded in the message input. The initial state is defined for the audio here and the duration is set.\n  const onLoad = (index: string, duration: number) => {\n    setFileUploads((prevFileUploads) =>\n      prevFileUploads.map((fileUpload) => ({\n        ...fileUpload,\n        duration: fileUpload.id === index ? duration : fileUpload.duration,\n      })),\n    );\n  };\n\n  // The handler which is triggered when the audio progresses/ the thumb is dragged in the progress control. The progressed duration is set here.\n  const onProgress = (index: string, currentTime?: number, hasEnd?: boolean) => {\n    setFileUploads((prevFileUploads) =>\n      prevFileUploads.map((fileUpload) => ({\n        ...fileUpload,\n        progress:\n          fileUpload.id === index\n            ? hasEnd\n              ? 1\n              : currentTime\n              ? currentTime / (fileUpload.duration as number)\n              : 0\n            : fileUpload.progress,\n      })),\n    );\n  };\n\n  // The handler which controls or sets the paused/played state of the audio.\n  const onPlayPause = (index: string, status?: boolean) => {\n    if (status === false) {\n      // If the status is false we set the audio with the index as playing and the others as paused.\n      setFileUploads((prevFileUploads) =>\n        prevFileUploads.map((fileUpload) => ({\n          ...fileUpload,\n          paused: fileUpload.id === index ? false : true,\n        })),\n      );\n    } else {\n      // If the status is true we simply set all the audio's paused state as true.\n      setFileUploads((prevFileUploads) =>\n        prevFileUploads.map((fileUpload) => ({\n          ...fileUpload,\n          paused: true,\n        })),\n      );\n    }\n  };\n\n  const {\n    theme: {\n      colors: { black, grey_dark, grey_gainsboro, grey_whisper },\n      messageInput: {\n        fileUploadPreview: {\n          audioAttachmentFileContainer,\n          dismiss,\n          fileContainer,\n          fileContentContainer,\n          filenameText,\n          fileTextContainer,\n          flatList,\n        },\n      },\n    },\n  } = useTheme();\n\n  const renderItem = ({ index, item }: { index: number; item: FileUpload }) => {\n    const indicatorType = getIndicatorTypeForFileState(item.state);\n\n    const lastIndexOfDot = item.file.name.lastIndexOf('.');\n\n    return (\n      <>\n        <UploadProgressIndicator\n          action={() => {\n            uploadFile({ newFile: item });\n          }}\n          style={styles.overlay}\n          type={indicatorType}\n        >\n          {item.file.type?.startsWith('audio/') && isAudioPackageAvailable() ? (\n            <View\n              style={[\n                { marginBottom: item.state === FileState.UPLOADED ? 8 : 0 },\n                audioAttachmentFileContainer,\n              ]}\n            >\n              <AudioAttachmentUploadPreview\n                index={index}\n                item={item}\n                onLoad={onLoad}\n                onPlayPause={onPlayPause}\n                onProgress={onProgress}\n                testID='audio-attachment-upload-preview'\n              />\n            </View>\n          ) : (\n            <View\n              style={[\n                styles.fileContainer,\n                index === fileUploads.length - 1\n                  ? {\n                      marginBottom: 0,\n                    }\n                  : {},\n                {\n                  borderColor: grey_whisper,\n                  width: flatListWidth - 16,\n                },\n                fileContainer,\n              ]}\n            >\n              <View style={[styles.fileContentContainer, fileContentContainer]}>\n                <View style={styles.fileIcon}>\n                  <FileAttachmentIcon mimeType={item.file.type} />\n                </View>\n                <View style={[styles.fileTextContainer, fileTextContainer]}>\n                  <Text\n                    numberOfLines={1}\n                    style={[\n                      styles.filenameText,\n                      {\n                        color: black,\n                        width:\n                          flatListWidth -\n                          16 - // 16 = horizontal padding\n                          40 - // 40 = file icon size\n                          24 - // 24 = close icon size\n                          24, // 24 = internal padding\n                      },\n                      I18nManager.isRTL ? { writingDirection: 'rtl' } : { writingDirection: 'ltr' },\n                      filenameText,\n                    ]}\n                  >\n                    {item.file.name.slice(0, 12) + '...' + item.file.name.slice(lastIndexOfDot)}\n                  </Text>\n                  {indicatorType !== null && (\n                    <UnsupportedFileTypeOrFileSizeIndicator\n                      indicatorType={indicatorType}\n                      item={item}\n                    />\n                  )}\n                </View>\n              </View>\n            </View>\n          )}\n          <TouchableOpacity\n            onPress={() => {\n              removeFile(item.id);\n            }}\n            style={[styles.dismiss, { backgroundColor: grey_gainsboro }, dismiss]}\n            testID='remove-file-upload-preview'\n          >\n            <Close />\n          </TouchableOpacity>\n        </UploadProgressIndicator>\n        <TouchableOpacity\n          onPress={() => {\n            removeFile(item.id);\n          }}\n          style={[styles.dismiss, { backgroundColor: grey_gainsboro }, dismiss]}\n          testID='remove-file-upload-preview'\n        >\n          <Close pathFill={grey_dark} />\n        </TouchableOpacity>\n      </>\n    );\n  };\n\n  const fileUploadsLength = fileUploads.length;\n\n  useEffect(() => {\n    if (fileUploadsLength && flatListRef.current) {\n      setTimeout(() => flatListRef.current?.scrollToEnd(), 1);\n    }\n  }, [fileUploadsLength]);\n\n  return fileUploadsLength ? (\n    <FlatList\n      data={fileUploads}\n      getItemLayout={(_, index) => ({\n        index,\n        length: FILE_PREVIEW_HEIGHT + 8,\n        offset: (FILE_PREVIEW_HEIGHT + 8) * index,\n      })}\n      keyExtractor={(item) => `${item.id}`}\n      onLayout={({\n        nativeEvent: {\n          layout: { width },\n        },\n      }) => {\n        setFlatListWidth(width);\n      }}\n      ref={flatListRef}\n      renderItem={renderItem}\n      style={[styles.flatList, flatList]}\n    />\n  ) : null;\n};\n\nconst areEqual = <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>(\n  prevProps: FileUploadPreviewPropsWithContext<StreamChatGenerics>,\n  nextProps: FileUploadPreviewPropsWithContext<StreamChatGenerics>,\n) => {\n  const { fileUploads: prevFileUploads } = prevProps;\n  const { fileUploads: nextFileUploads } = nextProps;\n\n  return (\n    prevFileUploads.length === nextFileUploads.length &&\n    prevFileUploads.every(\n      (prevFileUpload, index) =>\n        prevFileUpload.state === nextFileUploads[index].state &&\n        prevFileUpload.paused === nextFileUploads[index].paused &&\n        prevFileUpload.progress === nextFileUploads[index].progress &&\n        prevFileUpload.duration === nextFileUploads[index].duration,\n    )\n  );\n};\n\nconst MemoizedFileUploadPreview = React.memo(\n  FileUploadPreviewWithContext,\n  areEqual,\n) as typeof FileUploadPreviewWithContext;\n\nexport type FileUploadPreviewProps<\n  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,\n> = Partial<FileUploadPreviewPropsWithContext<StreamChatGenerics>>;\n\n/**\n * FileUploadPreview\n * UI Component to preview the files set for upload\n */\nexport const FileUploadPreview = <\n  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,\n>(\n  props: FileUploadPreviewProps<StreamChatGenerics>,\n) => {\n  const { AudioAttachmentUploadPreview, fileUploads, removeFile, setFileUploads, uploadFile } =\n    useMessageInputContext<StreamChatGenerics>();\n  const { FileAttachmentIcon } = useMessagesContext<StreamChatGenerics>();\n\n  return (\n    <MemoizedFileUploadPreview\n      {...{\n        AudioAttachmentUploadPreview,\n        FileAttachmentIcon,\n        fileUploads,\n        removeFile,\n        setFileUploads,\n        uploadFile,\n      }}\n      {...props}\n    />\n  );\n};\n\nFileUploadPreview.displayName = 'FileUploadPreview{messageInput{fileUploadPreview}}';\n"]}

package/lib/{module/components/ImageGallery/components → commonjs/components/ProgressControl}/ProgressControl.js

@@ -13,58 +13,69 @@ var _reactNativeGestureHandler = require("react-native-gesture-handler");
 
 var _reactNativeReanimated = _interopRequireWildcard(require("react-native-reanimated"));
 
-var _ThemeContext = require("../../../contexts/themeContext/ThemeContext");
+var _ThemeContext = require("../../contexts/themeContext/ThemeContext");
 
 var _this = this,
-    _jsxFileName = "/home/runner/work/stream-chat-react-native/stream-chat-react-native/package/src/components/ImageGallery/components/ProgressControl.tsx";
+    _jsxFileName = "/home/runner/work/stream-chat-react-native/stream-chat-react-native/package/src/components/ProgressControl/ProgressControl.tsx";
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
-var width = 180;
 var height = 2;
 
 var styles = _reactNative.StyleSheet.create({
   containerStyle: {
     borderRadius: 50,
-    height: height,
-    width: width
+    height: height
   },
   innerStyle: {
     height: height
   },
   progressControlThumbStyle: {
-    backgroundColor: '#fff',
     borderRadius: 5,
+    elevation: 6,
     height: 20,
+    shadowOffset: {
+      height: 3,
+      width: 0
+    },
+    shadowOpacity: 0.27,
+    shadowRadius: 4.65,
     top: -11,
-    width: 4
+    width: 5
   }
 });
 
 var ProgressControlThumb = function ProgressControlThumb() {
+  var _useTheme = (0, _ThemeContext.useTheme)(),
+      black = _useTheme.theme.colors.black;
+
   return _react["default"].createElement(_reactNative.View, {
-    style: styles.progressControlThumbStyle,
+    style: [styles.progressControlThumbStyle, {
+      backgroundColor: '#ffffff',
+      shadowColor: black
+    }],
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 41,
-      columnNumber: 36
+      lineNumber: 55,
+      columnNumber: 5
     }
   });
 };
 
 var ProgressControl = _react["default"].memo(function (props) {
   var duration = props.duration,
+      filledColor = props.filledColor,
       onPlayPause = props.onPlayPause,
       onProgressDrag = props.onProgressDrag,
-      progress = props.progress;
+      progress = props.progress,
+      testID = props.testID,
+      width = props.width;
 
-  var _useTheme = (0, _ThemeContext.useTheme)(),
-      _useTheme$theme$color = _useTheme.theme.colors,
-      grey_dark = _useTheme$theme$color.grey_dark,
-      white_snow = _useTheme$theme$color.white_snow;
+  var _useTheme2 = (0, _ThemeContext.useTheme)(),
+      grey_dark = _useTheme2.theme.colors.grey_dark;
 
   var state = (0, _reactNativeReanimated.useSharedValue)(0);
   var translateX = (0, _reactNativeReanimated.useSharedValue)(0);
@@ -74,7 +85,7 @@ var ProgressControl = _react["default"].memo(function (props) {
   }, [progress]);
   var animatedStyles = (0, _reactNativeReanimated.useAnimatedStyle)(function () {
     return {
-      backgroundColor: white_snow,
+      backgroundColor: filledColor,
       width: state.value
     };
   });
@@ -94,22 +105,23 @@ var ProgressControl = _react["default"].memo(function (props) {
       translateX.value = state.value;
       var dragFinishLocationInSeconds = state.value / width * duration;
       (0, _reactNativeReanimated.runOnJS)(onProgressDrag)(dragFinishLocationInSeconds);
-      (0, _reactNativeReanimated.runOnJS)(onPlayPause)();
+      (0, _reactNativeReanimated.runOnJS)(onPlayPause)(false);
     },
     onStart: function onStart() {
-      (0, _reactNativeReanimated.runOnJS)(onPlayPause)();
+      (0, _reactNativeReanimated.runOnJS)(onPlayPause)(true);
       (0, _reactNativeReanimated.cancelAnimation)(translateX);
       state.value = translateX.value;
     }
   }, [duration]);
   return _react["default"].createElement(_reactNative.View, {
     style: [styles.containerStyle, {
-      backgroundColor: grey_dark
+      backgroundColor: grey_dark,
+      width: width
     }],
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 91,
+      lineNumber: 109,
       columnNumber: 7
     }
   }, _react["default"].createElement(_reactNativeReanimated["default"].View, {
@@ -117,16 +129,17 @@ var ProgressControl = _react["default"].memo(function (props) {
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 92,
+      lineNumber: 110,
       columnNumber: 9
     }
   }), _react["default"].createElement(_reactNativeGestureHandler.PanGestureHandler, {
     maxPointers: 1,
     onGestureEvent: onGestureEvent,
+    testID: testID,
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 94,
+      lineNumber: 112,
       columnNumber: 9
     }
   }, _react["default"].createElement(_reactNativeReanimated["default"].View, {
@@ -134,14 +147,14 @@ var ProgressControl = _react["default"].memo(function (props) {
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 95,
+      lineNumber: 113,
       columnNumber: 11
     }
   }, _react["default"].createElement(ProgressControlThumb, {
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 96,
+      lineNumber: 114,
       columnNumber: 13
     }
   }))));

package/lib/commonjs/components/ProgressControl/ProgressControl.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["ProgressControl.tsx"],"names":["height","styles","StyleSheet","create","containerStyle","borderRadius","innerStyle","progressControlThumbStyle","elevation","shadowOffset","width","shadowOpacity","shadowRadius","top","ProgressControlThumb","black","theme","colors","backgroundColor","shadowColor","ProgressControl","React","memo","props","duration","filledColor","onPlayPause","onProgressDrag","progress","testID","grey_dark","state","translateX","value","animatedStyles","thumbStyles","transform","onGestureEvent","onActive","event","translationX","onFinish","dragFinishLocationInSeconds","onStart","prevProps","nextProps"],"mappings":"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","sourcesContent":["import React, { useEffect } from 'react';\nimport { StyleSheet, View } from 'react-native';\nimport { PanGestureHandler } from 'react-native-gesture-handler';\nimport Animated, {\n  cancelAnimation,\n  runOnJS,\n  useAnimatedGestureHandler,\n  useAnimatedStyle,\n  useSharedValue,\n} from 'react-native-reanimated';\n\nimport { useTheme } from '../../contexts/themeContext/ThemeContext';\n\nexport type ProgressControlProps = {\n  duration: number;\n  filledColor: string;\n  onPlayPause: (status?: boolean) => void;\n  onProgressDrag: (progress: number) => void;\n  progress: number;\n  testID: string;\n  width: number;\n};\n\nconst height = 2;\nconst styles = StyleSheet.create({\n  containerStyle: {\n    borderRadius: 50,\n    height,\n  },\n  innerStyle: {\n    height,\n  },\n  progressControlThumbStyle: {\n    borderRadius: 5,\n    elevation: 6,\n    height: 20,\n    shadowOffset: {\n      height: 3,\n      width: 0,\n    },\n    shadowOpacity: 0.27,\n    shadowRadius: 4.65,\n    top: -11,\n    width: 5,\n  },\n});\n\nconst ProgressControlThumb = () => {\n  const {\n    theme: {\n      colors: { black },\n    },\n  } = useTheme();\n  return (\n    <View\n      style={[styles.progressControlThumbStyle, { backgroundColor: '#ffffff', shadowColor: black }]}\n    />\n  );\n};\n\nexport const ProgressControl: React.FC<ProgressControlProps> = React.memo(\n  (props) => {\n    const { duration, filledColor, onPlayPause, onProgressDrag, progress, testID, width } = props;\n    const {\n      theme: {\n        colors: { grey_dark },\n      },\n    } = useTheme();\n\n    const state = useSharedValue(0);\n    const translateX = useSharedValue(0);\n\n    useEffect(() => {\n      state.value = progress * width;\n      translateX.value = progress * width;\n    }, [progress]);\n\n    const animatedStyles = useAnimatedStyle(() => ({\n      backgroundColor: filledColor,\n      width: state.value,\n    }));\n\n    const thumbStyles = useAnimatedStyle(() => ({\n      transform: [{ translateX: state.value }],\n    }));\n\n    const onGestureEvent = useAnimatedGestureHandler(\n      {\n        onActive: (event) => {\n          state.value = translateX.value + event.translationX;\n          if (state.value > width) state.value = width;\n          else if (state.value < 0) state.value = 0;\n        },\n        onFinish: () => {\n          translateX.value = state.value;\n          const dragFinishLocationInSeconds = (state.value / width) * duration;\n          runOnJS(onProgressDrag)(dragFinishLocationInSeconds);\n          runOnJS(onPlayPause)(false);\n        },\n        onStart: () => {\n          runOnJS(onPlayPause)(true);\n          cancelAnimation(translateX);\n          state.value = translateX.value;\n        },\n      },\n      [duration],\n    );\n    return (\n      <View style={[styles.containerStyle, { backgroundColor: grey_dark, width }]}>\n        <Animated.View style={[styles.innerStyle, animatedStyles]} />\n\n        <PanGestureHandler maxPointers={1} onGestureEvent={onGestureEvent} testID={testID}>\n          <Animated.View style={[thumbStyles]}>\n            <ProgressControlThumb />\n          </Animated.View>\n        </PanGestureHandler>\n      </View>\n    );\n  },\n  (prevProps, nextProps) => {\n    if (prevProps.duration === nextProps.duration && prevProps.progress === nextProps.progress)\n      return true;\n    else return false;\n  },\n);\n"]}