softchatjs-react-native/dist/components/Conversations/ConversationAvatar.mjs.map

React native UI SDK for softchatjs-core. Create a free account at: https://www.softchatjs.com

{"version":3,"sources":["../../../src/components/Conversations/ConversationAvatar.tsx","../../../src/utils/index.ts","../../../src/constants/Colors.ts","../../../src/contexts/ChatProvider.tsx","../../../src/contexts/ModalProvider.tsx","../../../src/theme/colors.ts","../../../src/theme/index.ts","../../../src/contexts/MessageStateContext.tsx","../../../src/constants/defaultUser.ts"],"sourcesContent":["import {\r\n  TouchableOpacity,\r\n  View,\r\n  StyleSheet,\r\n  Text,\r\n  FlatList,\r\n} from \"react-native\";\r\nimport {\r\n  Conversation,\r\n  ConversationType,\r\n  GroupChatMeta,\r\n  ParticipantListInfo,\r\n  PrivateChatMeta,\r\n} from \"softchatjs-core\";\r\nimport React, { useMemo, useRef } from \"react\";\r\nimport {\r\n  getUserInfoWithId,\r\n} from \"../../utils\";\r\nimport { Colors } from \"../../constants/Colors\";\r\nimport { Image } from \"expo-image\";\r\nimport { useConfig } from \"../../contexts/ChatProvider\";\r\n\r\nconst avatarSize = 50;\r\n\r\nexport const ConversationAvatar = ({\r\n  type,\r\n  chatUserId,\r\n  participantList,\r\n  groupMeta,\r\n  conversationTitle,\r\n}: {\r\n  conversationTitle: string | undefined;\r\n  chatUserId: string;\r\n  type: ConversationType;\r\n  participantList: ParticipantListInfo[];\r\n  groupMeta: GroupChatMeta | null;\r\n}) => {\r\n\r\n  const { fontFamily, fontScale } = useConfig();\r\n  \r\n  const userInfo = useMemo(() => {\r\n    if (type === \"private-chat\") {\r\n      return getUserInfoWithId(chatUserId, participantList);\r\n    }\r\n    return null;\r\n  }, [chatUserId, participantList, type]);\r\n\r\n  const imageUri = type === \"private-chat\"\r\n    ? userInfo?.receivingUser?.profileUrl\r\n    : groupMeta?.groupIcon;\r\n  \r\n  const initials = conversationTitle ? conversationTitle.substring(0, 1) : \"\";\r\n  \r\n  return (\r\n    imageUri ? (\r\n      <Image source={{ uri: imageUri }} style={styles.avatar} cachePolicy=\"disk\" />\r\n    ) : (\r\n      <View style={styles.avatar}>\r\n        <Text style={{ ...styles.avatarInitials, fontSize: 30 * fontScale, fontFamily }}>{initials}</Text>\r\n      </View>\r\n    )\r\n  );\r\n};\r\n\r\nconst styles = StyleSheet.create({\r\n  main: {\r\n    height: \"100%\",\r\n    width: \"100%\",\r\n  },\r\n  conversationTitle: {\r\n    color: \"black\",\r\n    fontSize: 20,\r\n    textTransform: \"capitalize\",\r\n  },\r\n  messageText: {\r\n    color: \"black\",\r\n    fontSize: 17,\r\n  },\r\n  messageTime: {},\r\n  avatar: {\r\n    height: avatarSize,\r\n    width: avatarSize,\r\n    borderRadius: avatarSize,\r\n    backgroundColor: Colors.greyLighter,\r\n    alignItems: \"center\",\r\n    justifyContent: \"center\",\r\n    marginEnd: 10,\r\n  },\r\n  avatarInitials: {\r\n    fontSize: 30,\r\n    textTransform: \"capitalize\",\r\n    color: \"white\",\r\n  },\r\n  listItem: {\r\n    height: 80,\r\n    width: \"100%\",\r\n    paddingHorizontal: 10,\r\n    flexDirection: \"row\",\r\n    alignItems: \"center\",\r\n    justifyContent: \"space-between\",\r\n  },\r\n});\r\n","import moment from 'moment';\r\n\r\nimport { StringOrNumber, Participant } from \"../types\";\r\nimport { Conversation, Message, MessageStates, UserMeta, ParticipantListInfo } from \"softchatjs-core\";\r\n\r\nimport { GestureResponderEvent } from 'react-native';\r\n\r\nexport function generateConversationId(str1: StringOrNumber, str2: StringOrNumber) {\r\n    const sortedStrings = [str1, str2].sort();\r\n    const combinedString = sortedStrings.join('_');\r\n    const hash = hashCode(combinedString);\r\n    return hash.toString()\r\n}\r\n\r\nfunction hashCode(str: string) {\r\n  let hash = 0;\r\n  if (str.length == 0) {\r\n      return hash;\r\n  }\r\n  for (let i = 0; i < str.length; i++) {\r\n      let char = str.charCodeAt(i);\r\n      hash = ((hash << 5) - hash) + char;\r\n      hash = hash & hash; // Convert to 32bit integer\r\n  }\r\n  return hash;\r\n}\r\n\r\nexport const generateId = () => {\r\n    let uuid = '';\r\n    const characters = 'abcdef0123456789';\r\n    for (let i = 0; i < 32; i++) {\r\n      const randomNumber = Math.floor(Math.random() * characters.length);\r\n      const character = characters.charAt(randomNumber);\r\n      if (i === 8 || i === 12 || i === 16 || i === 20) {\r\n        uuid += '-';\r\n      }\r\n      uuid += character;\r\n    }\r\n    return uuid;\r\n}\r\n\r\n\r\nexport const getUserInfoWithId = (userId: string, participantList: ParticipantListInfo[]): {\r\n  presentUser: UserMeta | undefined,\r\n  receivingUser: UserMeta | undefined,\r\n} => {\r\n  let presentUser = participantList.find(participant => participant.participantId === userId);\r\n  let otherParticipants = participantList.filter(participant => participant.participantId !== userId)\r\n  return { presentUser: presentUser?.participantDetails, receivingUser: otherParticipants[0]?.participantDetails };\r\n};\r\n\r\nexport const truncate = (str: string, len: number) => {\r\n  return str.length > len ? str.substring(0, len)+'...' : str;\r\n}\r\n\r\nexport const getConversationTitle = (userId: string, converstaion: Conversation) => {\r\n  if(converstaion.conversationType !== 'group-chat'){\r\n    const userInfos = getUserInfoWithId(userId, converstaion.participantList);\r\n\r\n    const firstname = userInfos.receivingUser?.firstname\r\n    const username = userInfos.receivingUser?.username\r\n    return firstname? firstname : username\r\n  }\r\n  return converstaion.groupMeta?.groupName || 'no-groupname'\r\n}\r\n\r\nexport const getUsernameInitials = (username: string) =>{\r\n  return username.substring(0, 1)\r\n}\r\n\r\nexport function formatMessageTime(time: Date | string) {\r\n  return moment(new Date(time)).format(\"hh:mm a\");\r\n}\r\n\r\nexport function formatConversationTime(time: Date | string) {\r\n  const now = moment();\r\n  const then = moment(time);\r\n  const duration = moment.duration(now.diff(then));\r\n\r\n  // Get the largest unit\r\n  const years = Math.floor(duration.asYears());\r\n  if (years > 0) return years + 'yr';\r\n\r\n  const months = Math.floor(duration.asMonths());\r\n  if (months > 0) return months + 'mo';\r\n\r\n  const weeks = Math.floor(duration.asWeeks());\r\n  if (weeks > 0) return weeks + 'w';\r\n\r\n  const days = Math.floor(duration.asDays());\r\n  if (days > 0) return days + 'd';\r\n\r\n  const hours = Math.floor(duration.asHours());\r\n  if (hours > 0) return hours + 'h';\r\n\r\n  const minutes = Math.floor(duration.asMinutes());\r\n  if (minutes > 0) return minutes + 'm';\r\n\r\n  // If duration is less than 1 minute\r\n  return 'Just now';\r\n}\r\n\r\nexport const generateFillerTimestamps = () => {\r\n  return {\r\n    createdAt: new Date(),\r\n    updatedAt: new Date(),\r\n  }\r\n}\r\n\r\nexport const getUnreadMessageIds = (conversation: Conversation, userId: string) => {\r\n  var ids: string[] = []\r\n  conversation.messages.map(m => {\r\n    if (m.messageState === MessageStates.SENT && m.from !== userId) {\r\n      ids.push(m.messageId)\r\n    }\r\n  })\r\n  return ids\r\n}\r\n\r\nexport const getQuotedMessage = (messageId: string, messages: Message[]) => {\r\n  const message = messages.find(msg => msg.messageId === messageId)\r\n  return message\r\n}\r\n\r\nexport const stopPropagation = (event: GestureResponderEvent) => {\r\n  event.stopPropagation();\r\n};\r\n\r\nexport const getRandomColor = (): string => {\r\n  const letters = '0123456789ABCDEF';\r\n  let color = '#';\r\n  for (let i = 0; i < 6; i++) {\r\n    color += letters[Math.floor(Math.random() * 16)];\r\n  }\r\n  return color\r\n};\r\n\r\nexport const getParticipant = (uid: string, participantList: ParticipantListInfo[]) => {\r\n  return participantList.find(p => p.participantDetails.uid === uid);\r\n}\r\n\r\nexport function convertToMinutes(seconds: number) {\r\n  var _seconds = Number(seconds.toFixed(0))\r\n  const minutes = Math.floor(_seconds / 60);\r\n  const remainingSeconds = _seconds % 60;\r\n\r\n  // Pad the numbers to always have two digits\r\n  const paddedMinutes = String(minutes).padStart(2, '0');\r\n  const paddedSeconds = String(remainingSeconds).padStart(2, '0');\r\n\r\n  return `${paddedMinutes}:${paddedSeconds}`;\r\n}\r\n\r\nexport const restructureMessages = (data: Array<string | Message>) => {\r\n  const groupMessagesByDate = data.reduce((acc, item) => {\r\n    if(typeof item !== \"string\") {\r\n      var date = moment(item.createdAt).format('MMMM DD, YYYY');\r\n      if(acc[date]) {\r\n        acc[date].unshift(item)\r\n      }else{\r\n        acc[date] = [ item ]\r\n      }\r\n    }\r\n    return acc\r\n  },{} as {[key: string]: Array<Message>});\r\n\r\n  const _messages: Array<string | Message> = Object.entries(groupMessagesByDate).flatMap(\r\n    ([date, messages]) => [...messages.reverse(), date]\r\n  );\r\n  return _messages\r\n}\r\n\r\n","export const Colors = {\r\n  greyLighter: '#F0F0F0'\r\n}","import React, { createContext, useContext, useEffect } from \"react\";\r\nimport { ChatTheme, Config } from \"../types\";\r\nimport ModalProvider from \"./ModalProvider\";\r\nimport ChatClient from \"softchatjs-core\";\r\nimport defaultTheme from \"../theme\";\r\nimport { MessageStateProvider } from \"./MessageStateContext\";\r\n\r\ntype ChatProvider = {\r\n  children: JSX.Element;\r\n  theme?: ChatTheme;\r\n  fontFamily: string | undefined;\r\n   /**\r\n   * Multiplier to adjust the font size dynamically.\r\n   * A value of 1 keeps the default size, while values like 0.5 or 1.5 scale it down or up.\r\n  */\r\n   fontScale?: number\r\n};\r\n\r\nconst ConfigContext = createContext<\r\n  Omit<ChatProvider, \"children\"> & { client: ChatClient | null }\r\n>({\r\n  theme: defaultTheme,\r\n  client: null,\r\n  fontFamily: undefined,\r\n  fontScale: 1\r\n});\r\n\r\nexport function useConfig() {\r\n  return useContext(ConfigContext);\r\n}\r\n\r\nexport default function ChatProvider(\r\n  props: ChatProvider & { client: ChatClient | null }\r\n) {\r\n  const { children, client, theme = defaultTheme, fontFamily, fontScale } = props;\r\n\r\n  return (\r\n    <ConfigContext.Provider value={{ theme, client, fontFamily, fontScale }}>\r\n      <MessageStateProvider>\r\n        <ModalProvider>{children}</ModalProvider>\r\n      </MessageStateProvider>\r\n    </ConfigContext.Provider>\r\n  );\r\n}\r\n","import React, { createContext, useContext, useState } from \"react\";\r\nimport {\r\n  KeyboardAvoidingView,\r\n  Modal,\r\n  ScrollView,\r\n  StyleSheet,\r\n  TouchableWithoutFeedback,\r\n  View,\r\n  ViewStyle,\r\n  Text,\r\n} from \"react-native\";\r\nimport { Children } from \"../types\";\r\nimport { stopPropagation } from \"../utils\";\r\n\r\ntype ModalProps = {\r\n  dismissable?: boolean;\r\n  justifyContent?: ViewStyle[\"justifyContent\"];\r\n  children: Children | null;\r\n  animation?: \"none\" | \"fade\" | \"slide\" | undefined;\r\n  containerWidth?: ViewStyle[\"width\"];\r\n};\r\n\r\ntype ModalProvider = {\r\n  displayModal: (child: ModalProps) => void;\r\n  resetModal: (cb?: Function) => void;\r\n};\r\n\r\nconst initial: ModalProvider & { modalProps: ModalProps | null } = {\r\n  displayModal: () => {},\r\n  resetModal: () => {},\r\n  modalProps: {\r\n    dismissable: true,\r\n    justifyContent: \"center\",\r\n    children: null,\r\n    animation: \"slide\",\r\n    containerWidth: \"100%\",\r\n  },\r\n};\r\n\r\nconst ModalProviderContext = createContext<ModalProvider>(initial);\r\n\r\nexport const useModalProvider = () => useContext(ModalProviderContext);\r\n\r\nexport default function ModalProvider(props: { children: Children }) {\r\n  const { children } = props;\r\n\r\n  const [modal, showModal] = useState(false);\r\n  const [modalProps, setModalProps] = useState(initial.modalProps);\r\n\r\n  const displayModal = (props: ModalProps) => {\r\n    showModal(true);\r\n    setModalProps({ ...initial.modalProps, ...props });\r\n  };\r\n\r\n  const dismiss = () => {\r\n    if (modalProps?.dismissable) {\r\n      showModal(false);\r\n    }\r\n  };\r\n\r\n  const resetModal = (cb?: Function) => {\r\n    showModal(false);\r\n    cb?.();\r\n  };\r\n\r\n  return (\r\n    <ModalProviderContext.Provider\r\n      value={{\r\n        displayModal,\r\n        resetModal,\r\n      }}\r\n    >\r\n      {children}\r\n      <Modal\r\n        animationType={modalProps?.animation}\r\n        style={{ height: \"100%\", width: \"100%\" }}\r\n        visible={modal}\r\n        transparent\r\n      >\r\n        <View\r\n          style={{\r\n            flex: 1,\r\n            height: \"100%\",\r\n            width: \"100%\",\r\n            alignItems: \"center\",\r\n            justifyContent: modalProps?.justifyContent,\r\n            backgroundColor: \"rgba(0,0,0,.3)\",\r\n          }}\r\n        >\r\n          <View style={{ flex: 1, width: \"100%\", height: \"100%\" }}>\r\n            {modalProps?.children}\r\n          </View>\r\n        </View>\r\n      </Modal>\r\n    </ModalProviderContext.Provider>\r\n  );\r\n}\r\n","interface Color {\r\n  50: string;\r\n  100: string;\r\n  200: string;\r\n  300: string;\r\n  400: string;\r\n  500: string;\r\n  600: string;\r\n  700: string;\r\n  800: string;\r\n  900: string;\r\n  A100?: string;\r\n}\r\n\r\nexport const teal: Color = {\r\n  50: '#DCF2F0',\r\n  100: '#A9DFD8',\r\n  200: '#73CABE',\r\n  300: '#3AB4A4',\r\n  400: '#00A391',\r\n  500: '#00927E',\r\n  600: '#008572',\r\n  700: '#007662',\r\n  800: '#006654',\r\n  900: '#004A38',\r\n};\r\n\r\nexport const fuchsia: Color = {\r\n  50: '#FAE9F7',\r\n  100: '#F2C8ED',\r\n  200: '#EBA3E3',\r\n  300: '#E27DD7',\r\n  400: '#D95ECD',\r\n  500: '#D043C4',\r\n  600: '#C13EBD',\r\n  700: '#AE36B5',\r\n  800: '#9D31AE',\r\n  900: '#7F28A0',\r\n};\r\n\r\nexport const green: Color = {\r\n  50: '#E6F5E4',\r\n  100: '#C2E6BD',\r\n  200: '#9AD693',\r\n  300: '#6FC666',\r\n  400: '#4ABA42',\r\n  500: '#17AE13',\r\n  600: '#029F04',\r\n  700: '#008D00',\r\n  800: '#007C00',\r\n  900: '#005E00',\r\n};\r\n\r\nexport const bluishCyan: Color = {\r\n  50: '#E2F5FE',\r\n  100: '#B5E6FB',\r\n  200: '#84D6F9',\r\n  300: '#56C6F6',\r\n  400: '#36B9F5',\r\n  500: '#20AEF3',\r\n  600: '#1D9FE4',\r\n  700: '#188BD0',\r\n  800: '#167ABC',\r\n  900: '#105A9A',\r\n};\r\n\r\nexport const yellowOrange: Color = {\r\n  50: '#FEF3E2',\r\n  100: '#FDE0B6',\r\n  200: '#FDCD87',\r\n  300: '#FCB859',\r\n  400: '#FBA939',\r\n  500: '#FB9A23',\r\n  600: '#F78F21',\r\n  700: '#F07F1E',\r\n  800: '#EA701B',\r\n  900: '#E05716',\r\n};\r\n\r\nexport const pinkishRed: Color = {\r\n  50: '#FFEBF0',\r\n  100: '#FFCCD6',\r\n  200: '#FB969F',\r\n  300: '#F66B79',\r\n  400: '#FF3F56',\r\n  500: '#FF183B',\r\n  600: '#FC003C',\r\n  700: '#EA0034',\r\n  800: '#DD002C',\r\n  900: '#CF001E',\r\n};\r\n\r\nexport const grey: Color = {\r\n  50: '#F6F6FF',\r\n  100: '#F2F1FF',\r\n  200: '#EBEBF9',\r\n  300: '#CAC9D7',\r\n  400: '#ACACB9',\r\n  500: '#82818F',\r\n  600: '#6D6D7A',\r\n  700: '#4D4D59',\r\n  800: '#2B2B36',\r\n  900: '#21222D',\r\n  A100: '#1D1E26',\r\n};\r\n\r\nexport const stone: Color = {\r\n  50: '#F8F8F8',\r\n  100: '#EFEFEF',\r\n  200: '#E8E8E8',\r\n  300: '#D9D9D9',\r\n  400: '#D2D2D2',\r\n  500: '#A0A0A0',\r\n  600: '#87888C',\r\n  700: '#2C2D33',\r\n  800: '#1D1E26',\r\n  900: '#171821',\r\n};\r\n","import { ChatTheme } from \"../types\"\r\nimport { bluishCyan, fuchsia, green, grey, stone, teal } from \"./colors\"\r\n\r\nconst theme: ChatTheme = {\r\n  background: {\r\n    primary: stone[900],\r\n    secondary: grey[900],\r\n    disabled: grey[800]\r\n  },\r\n  text: {\r\n    primary: 'black',\r\n    secondary: stone[200],\r\n    disabled: stone[500],\r\n  },\r\n  action: {\r\n    primary: teal[50],\r\n    secondary: stone[300]\r\n  },\r\n  chatBubble: {\r\n    left: {\r\n      bgColor: grey[900],\r\n      messageColor: stone[200],\r\n      messageTimeColor: 'grey',\r\n      replyBorderColor: stone[200]\r\n    },\r\n    right: {\r\n      bgColor: \"#474952\",\r\n      messageColor: 'white',\r\n      messageTimeColor: 'grey',\r\n      replyBorderColor: green[900]\r\n    },\r\n  },\r\n  icon: 'white',\r\n  divider: stone[700]\r\n}\r\n\r\nexport default theme","import React, {\r\n  createContext,\r\n  useState,\r\n  useContext,\r\n} from \"react\";\r\nimport {\r\n  SetState,\r\n} from \"../types\";\r\nimport { Audio, AVPlaybackStatus } from 'expo-av';\r\nimport { Emoticon, Message, SendMessageGenerics, Media, UserMeta, Conversation, ConversationListItem } from \"softchatjs-core\";\r\nimport defaultUser from \"../constants/defaultUser\";\r\n\r\ntype MessageStateContext = {\r\n  globalTextMessage: string,\r\n  setGlobalTextMessage: SetState<string>,\r\n  stickers: Emoticon[],\r\n  setStickers: SetState<Emoticon[]>,\r\n  pendingMessages: Array<Partial<Message>>,\r\n  addNewPendingMessages: (message: Partial<Message>) => void;\r\n  removePendingMessage: (messageId: string) => void;\r\n  updatePendingMessage: (messageId: string, message: Message) => void;\r\n  playVoiceMessage: (media: Media) => void;\r\n  pauseVoiceMessage: () => void;\r\n  resumeVoiceMessage: () => void;\r\n  audioState: \"playing\" | \"paused\" | \"loading\" | null,\r\n  unload: () => void;\r\n  sound: Audio.Sound | null,\r\n  activeVoiceMessage: Media | null,\r\n  avPlayBackStatus: AVPlaybackStatus & { positionMillis: number } | null,\r\n  userMeta: UserMeta,\r\n  setUserMeta: SetState<UserMeta>,\r\n  conversationList: Array<ConversationListItem>,\r\n  setConversationList: SetState<Array<ConversationListItem>>\r\n};\r\n\r\nconst initialMessageStateContext: MessageStateContext = {\r\n  globalTextMessage: '',\r\n  setGlobalTextMessage: () => {},\r\n  stickers: [],\r\n  setStickers: () => {},\r\n  pendingMessages: [],\r\n  addNewPendingMessages: (message: Partial<Message>) => {},\r\n  removePendingMessage: (messageId: string) => {},\r\n  updatePendingMessage: (messageId: string, message: Message) => {},\r\n  playVoiceMessage: (media: Media) => {},\r\n  pauseVoiceMessage: () => {},\r\n  resumeVoiceMessage: () => {},\r\n  audioState: null,\r\n  unload: () => {},\r\n  sound: null,\r\n  activeVoiceMessage: null,\r\n  avPlayBackStatus: null,\r\n  userMeta: defaultUser,\r\n  setUserMeta: () => {},\r\n  conversationList: [],\r\n  setConversationList: () => {}\r\n}\r\n\r\nexport default initialMessageStateContext;\r\n\r\nconst MessageStateContext = createContext<MessageStateContext>(\r\n  initialMessageStateContext\r\n);\r\n\r\nexport const useMessageState = () => useContext(MessageStateContext);\r\n\r\nexport const MessageStateProvider = ({ children }: { children: JSX.Element }) => {\r\n \r\n  const [conversationList, setConversationList] = useState<Array<ConversationListItem>>([]);\r\n  const [ globalTextMessage, setGlobalTextMessage ] = useState('');\r\n  const [ stickers, setStickers ] = useState<Emoticon[]>([]);\r\n  const [ pendingMessages, setPendingMessages ] = useState<Array<Partial<Message>>>([]);\r\n  const [sound, setSound] = useState<Audio.Sound | null>(null);\r\n  const [ audioState, setAudioState ] = useState<\"playing\" | \"paused\" | \"loading\" | null>(null);\r\n  const [ activeVoiceMessage, setActiveVoiceMessage ] = useState<Media | null>(null);\r\n  const [ avPlayBackStatus, setAvPlayBackStatus ] = useState<AVPlaybackStatus & { positionMillis: number } | null>(null);\r\n  const [ userMeta, setUserMeta ] = useState<UserMeta>(defaultUser);\r\n\r\n  const addNewPendingMessages = (message: Partial<Message>) => {\r\n    setPendingMessages((prev) => {\r\n      return [ ...prev, message ]\r\n    });\r\n  }\r\n\r\n  const removePendingMessage = (messageId: string) => {\r\n    setPendingMessages((prev) => {\r\n      const filtered = prev.filter(m => m.messageId !== messageId)\r\n      return filtered\r\n    });\r\n  }\r\n\r\n  const updatePendingMessage = (messageId: string, updatedMessage: Message) => {\r\n    const clonedMessage = JSON.parse(JSON.stringify(updatedMessage));\r\n  \r\n    setPendingMessages((prev) =>\r\n      prev.map((message) =>\r\n        message.messageId === messageId ? { ...message, ...clonedMessage } : message\r\n      )\r\n    );\r\n  };\r\n  \r\n  const onPlaybackStatusUpdate = (data: AVPlaybackStatus & { didJustFinish: boolean , positionMillis: number}) => {\r\n    console.log(data)\r\n    setAvPlayBackStatus(data)\r\n    if(data?.didJustFinish){\r\n      setAudioState(null);\r\n      unload();\r\n    }\r\n  };\r\n  \r\n  const playVoiceMessage = async (media: Media) => {\r\n    if (activeVoiceMessage !== null && media.mediaId !== activeVoiceMessage?.mediaId) {\r\n      return unload()\r\n    }\r\n  \r\n    setActiveVoiceMessage(media);\r\n    setAudioState(\"loading\");\r\n  \r\n    try {\r\n      console.log('Loading Sound');\r\n      console.log(media.mediaUrl)\r\n      const { sound: avSound } = await Audio.Sound.createAsync({ uri: media.mediaUrl }, {}, onPlaybackStatusUpdate);\r\n      setSound(avSound);\r\n      console.log('Playing Sound');\r\n      setAudioState(\"playing\");\r\n      await avSound.playAsync();\r\n    } catch (error) {\r\n      console.error(\"Error loading audio: \", error);\r\n      setAudioState(null);  \r\n    }\r\n  };\r\n\r\n  const pauseVoiceMessage = async () => {\r\n    await sound?.pauseAsync();\r\n    setAudioState(\"paused\")\r\n  }\r\n\r\n  const resumeVoiceMessage = async () => {\r\n    if(audioState === \"paused\"){\r\n      await sound?.playAsync();\r\n      setAudioState(\"playing\")\r\n    }\r\n  }\r\n\r\n  const unload = () => {\r\n    console.log('Unloading Sound');\r\n    sound?.stopAsync();\r\n    sound?.unloadAsync();\r\n    setSound(null);\r\n    setActiveVoiceMessage(null);\r\n    setAudioState(null)\r\n  }\r\n\r\n  return (\r\n    <MessageStateContext.Provider\r\n      value={{\r\n        globalTextMessage,\r\n        setGlobalTextMessage,\r\n        stickers,\r\n        setStickers,\r\n        pendingMessages, \r\n        addNewPendingMessages,\r\n        removePendingMessage,\r\n        updatePendingMessage,\r\n        playVoiceMessage,\r\n        pauseVoiceMessage,\r\n        resumeVoiceMessage,\r\n        audioState,\r\n        unload,\r\n        sound,\r\n        activeVoiceMessage,\r\n        avPlayBackStatus,\r\n        userMeta,\r\n        setUserMeta,\r\n        conversationList,\r\n        setConversationList\r\n      }}\r\n    >\r\n      {children}\r\n    </MessageStateContext.Provider>\r\n  );\r\n};\r\n","export default {\r\n  id: \"\",\r\n  uid: \"\",\r\n  username: \"\",\r\n  firstname: \"\",\r\n  lastname: \"\",\r\n  profileUrl: \"\",\r\n  color: \"\",\r\n  custom: {}\r\n}\r\n"],"mappings":"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","names":["View","StyleSheet","Text","React","React","createContext","useContext","React","createContext","useState","useContext","createContext","createContext","useContext","React","View","Text","StyleSheet"]}