@sendbird/uikit-react-native 3.5.4 → 3.6.0

package/lib/module/components/ThreadParentMessageRenderer/ThreadParentMessage.file.voice.js

@@ -0,0 +1,87 @@
+import React, { useEffect, useState } from 'react';
+import { Box, Icon, PressBox, Text, useUIKitTheme } from '@sendbird/uikit-react-native-foundation';
+import { LoadingSpinner, ProgressBar } from '@sendbird/uikit-react-native-foundation';
+import { createStyleSheet } from '@sendbird/uikit-react-native-foundation';
+import { millsToMSS } from '@sendbird/uikit-utils';
+const ThreadParentMessageFileVoice = props => {
+  const {
+    onLongPress,
+    onToggleVoiceMessage,
+    parentMessage,
+    durationMetaArrayKey = 'KEY_VOICE_MESSAGE_DURATION',
+    onUnmount
+  } = props;
+  const fileMessage = parentMessage;
+  if (!fileMessage) return null;
+  const {
+    colors
+  } = useUIKitTheme();
+  const [state, setState] = useState(() => {
+    var _meta$value;
+    const meta = fileMessage.metaArrays.find(it => it.key === durationMetaArrayKey);
+    const value = meta === null || meta === void 0 ? void 0 : (_meta$value = meta.value) === null || _meta$value === void 0 ? void 0 : _meta$value[0];
+    const initialDuration = value ? parseInt(value, 10) : 0;
+    return {
+      status: 'paused',
+      currentTime: 0,
+      duration: initialDuration
+    };
+  });
+  useEffect(() => {
+    return () => {
+      onUnmount();
+    };
+  }, []);
+  const uiColors = colors.ui.groupChannelMessage['incoming'];
+  const remainingTime = state.duration - state.currentTime;
+  return /*#__PURE__*/React.createElement(Box, {
+    style: styles.container,
+    backgroundColor: uiColors.enabled.background
+  }, /*#__PURE__*/React.createElement(PressBox, {
+    onPress: () => onToggleVoiceMessage === null || onToggleVoiceMessage === void 0 ? void 0 : onToggleVoiceMessage(state, setState),
+    onLongPress: onLongPress
+  }, /*#__PURE__*/React.createElement(ProgressBar, {
+    current: state.currentTime,
+    total: state.duration,
+    style: {
+      minWidth: 136,
+      height: 44
+    },
+    trackColor: uiColors.enabled.voiceProgressTrack,
+    overlay: /*#__PURE__*/React.createElement(Box, {
+      flex: 1,
+      flexDirection: 'row',
+      alignItems: 'center',
+      justifyContent: 'space-between',
+      paddingHorizontal: 12
+    }, state.status === 'preparing' ? /*#__PURE__*/React.createElement(LoadingSpinner, {
+      size: 24,
+      color: uiColors.enabled.voiceSpinner
+    }) : /*#__PURE__*/React.createElement(Icon, {
+      size: 16,
+      containerStyle: {
+        backgroundColor: uiColors.enabled.voiceActionIconBackground,
+        padding: 6,
+        borderRadius: 16
+      },
+      icon: state.status === 'paused' ? 'play' : 'pause'
+    }), /*#__PURE__*/React.createElement(Text, {
+      body3: true,
+      style: {
+        lineHeight: undefined,
+        marginLeft: 6,
+        opacity: 0.88
+      },
+      color: uiColors.enabled.textVoicePlaytime
+    }, millsToMSS(state.currentTime === 0 ? state.duration : remainingTime)))
+  })));
+};
+const styles = createStyleSheet({
+  container: {
+    borderRadius: 16,
+    overflow: 'hidden',
+    maxWidth: 136
+  }
+});
+export default ThreadParentMessageFileVoice;
+//# sourceMappingURL=ThreadParentMessage.file.voice.js.map

package/lib/module/components/ThreadParentMessageRenderer/ThreadParentMessage.file.voice.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","useEffect","useState","Box","Icon","PressBox","Text","useUIKitTheme","LoadingSpinner","ProgressBar","createStyleSheet","millsToMSS","ThreadParentMessageFileVoice","props","onLongPress","onToggleVoiceMessage","parentMessage","durationMetaArrayKey","onUnmount","fileMessage","colors","state","setState","_meta$value","meta","metaArrays","find","it","key","value","initialDuration","parseInt","status","currentTime","duration","uiColors","ui","groupChannelMessage","remainingTime","createElement","style","styles","container","backgroundColor","enabled","background","onPress","current","total","minWidth","height","trackColor","voiceProgressTrack","overlay","flex","flexDirection","alignItems","justifyContent","paddingHorizontal","size","color","voiceSpinner","containerStyle","voiceActionIconBackground","padding","borderRadius","icon","body3","lineHeight","undefined","marginLeft","opacity","textVoicePlaytime","overflow","maxWidth"],"sources":["ThreadParentMessage.file.voice.tsx"],"sourcesContent":["import React, { useEffect, useState } from 'react';\n\nimport { Box, Icon, PressBox, Text, useUIKitTheme } from '@sendbird/uikit-react-native-foundation';\nimport { LoadingSpinner, ProgressBar } from '@sendbird/uikit-react-native-foundation';\nimport { createStyleSheet } from '@sendbird/uikit-react-native-foundation';\nimport { SendbirdFileMessage, millsToMSS } from '@sendbird/uikit-utils';\n\nimport { ThreadParentMessageRendererProps } from './index';\n\nexport type VoiceFileMessageState = {\n  status: 'preparing' | 'playing' | 'paused';\n  currentTime: number;\n  duration: number;\n};\n\ntype Props = ThreadParentMessageRendererProps<{\n  durationMetaArrayKey?: string;\n  onUnmount: () => void;\n}>;\n\nconst ThreadParentMessageFileVoice = (props: Props) => {\n  const {\n    onLongPress,\n    onToggleVoiceMessage,\n    parentMessage,\n    durationMetaArrayKey = 'KEY_VOICE_MESSAGE_DURATION',\n    onUnmount,\n  } = props;\n\n  const fileMessage: SendbirdFileMessage = parentMessage as SendbirdFileMessage;\n  if (!fileMessage) return null;\n\n  const { colors } = useUIKitTheme();\n\n  const [state, setState] = useState<VoiceFileMessageState>(() => {\n    const meta = fileMessage.metaArrays.find((it) => it.key === durationMetaArrayKey);\n    const value = meta?.value?.[0];\n    const initialDuration = value ? parseInt(value, 10) : 0;\n    return {\n      status: 'paused',\n      currentTime: 0,\n      duration: initialDuration,\n    };\n  });\n\n  useEffect(() => {\n    return () => {\n      onUnmount();\n    };\n  }, []);\n\n  const uiColors = colors.ui.groupChannelMessage['incoming'];\n  const remainingTime = state.duration - state.currentTime;\n\n  return (\n    <Box style={styles.container} backgroundColor={uiColors.enabled.background}>\n      <PressBox onPress={() => onToggleVoiceMessage?.(state, setState)} onLongPress={onLongPress}>\n        <ProgressBar\n          current={state.currentTime}\n          total={state.duration}\n          style={{ minWidth: 136, height: 44 }}\n          trackColor={uiColors.enabled.voiceProgressTrack}\n          overlay={\n            <Box\n              flex={1}\n              flexDirection={'row'}\n              alignItems={'center'}\n              justifyContent={'space-between'}\n              paddingHorizontal={12}\n            >\n              {state.status === 'preparing' ? (\n                <LoadingSpinner size={24} color={uiColors.enabled.voiceSpinner} />\n              ) : (\n                <Icon\n                  size={16}\n                  containerStyle={{\n                    backgroundColor: uiColors.enabled.voiceActionIconBackground,\n                    padding: 6,\n                    borderRadius: 16,\n                  }}\n                  icon={state.status === 'paused' ? 'play' : 'pause'}\n                />\n              )}\n              <Text\n                body3\n                style={{ lineHeight: undefined, marginLeft: 6, opacity: 0.88 }}\n                color={uiColors.enabled.textVoicePlaytime}\n              >\n                {millsToMSS(state.currentTime === 0 ? state.duration : remainingTime)}\n              </Text>\n            </Box>\n          }\n        />\n      </PressBox>\n    </Box>\n  );\n};\n\nconst styles = createStyleSheet({\n  container: {\n    borderRadius: 16,\n    overflow: 'hidden',\n    maxWidth: 136,\n  },\n});\n\nexport default ThreadParentMessageFileVoice;\n"],"mappings":"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"}

package/lib/module/components/ThreadParentMessageRenderer/ThreadParentMessage.user.js

@@ -0,0 +1,54 @@
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+import React from 'react';
+import { Text, useUIKitTheme } from '@sendbird/uikit-react-native-foundation';
+import { RegexText, createStyleSheet } from '@sendbird/uikit-react-native-foundation';
+import { urlRegexStrict } from '@sendbird/uikit-utils';
+const ThreadParentMessageUser = props => {
+  var _props$renderRegexTex;
+  const userMessage = props.parentMessage;
+  if (!userMessage) return null;
+  const {
+    colors
+  } = useUIKitTheme();
+  return /*#__PURE__*/React.createElement(Text, {
+    body3: true,
+    color: colors.onBackground01,
+    suppressHighlighting: true
+  }, /*#__PURE__*/React.createElement(RegexText, {
+    body3: true,
+    color: colors.onBackground01,
+    patterns: [...(props.regexTextPatterns ?? []), {
+      regex: urlRegexStrict,
+      replacer(_ref) {
+        let {
+          match,
+          parentProps,
+          keyPrefix,
+          index
+        } = _ref;
+        return /*#__PURE__*/React.createElement(Text, _extends({}, parentProps, {
+          key: `${keyPrefix}-${index}`,
+          onPress: () => {
+            var _props$onPressURL;
+            return (_props$onPressURL = props.onPressURL) === null || _props$onPressURL === void 0 ? void 0 : _props$onPressURL.call(props, match);
+          },
+          style: [parentProps === null || parentProps === void 0 ? void 0 : parentProps.style, styles.urlText]
+        }), match);
+      }
+    }]
+  }, (_props$renderRegexTex = props.renderRegexTextChildren) === null || _props$renderRegexTex === void 0 ? void 0 : _props$renderRegexTex.call(props, userMessage)), Boolean(userMessage.updatedAt) && /*#__PURE__*/React.createElement(Text, {
+    body3: true,
+    color: colors.onBackground02
+  }, ' (edited)'));
+};
+const styles = createStyleSheet({
+  bubble: {
+    paddingHorizontal: 12,
+    paddingVertical: 6
+  },
+  urlText: {
+    textDecorationLine: 'underline'
+  }
+});
+export default ThreadParentMessageUser;
+//# sourceMappingURL=ThreadParentMessage.user.js.map

package/lib/module/components/ThreadParentMessageRenderer/ThreadParentMessage.user.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","Text","useUIKitTheme","RegexText","createStyleSheet","urlRegexStrict","ThreadParentMessageUser","props","_props$renderRegexTex","userMessage","parentMessage","colors","createElement","body3","color","onBackground01","suppressHighlighting","patterns","regexTextPatterns","regex","replacer","_ref","match","parentProps","keyPrefix","index","_extends","key","onPress","_props$onPressURL","onPressURL","call","style","styles","urlText","renderRegexTextChildren","Boolean","updatedAt","onBackground02","bubble","paddingHorizontal","paddingVertical","textDecorationLine"],"sources":["ThreadParentMessage.user.tsx"],"sourcesContent":["import React from 'react';\n\nimport { type RegexTextPattern, Text, useUIKitTheme } from '@sendbird/uikit-react-native-foundation';\nimport { RegexText, createStyleSheet } from '@sendbird/uikit-react-native-foundation';\nimport { SendbirdUserMessage, urlRegexStrict } from '@sendbird/uikit-utils';\n\nimport { ThreadParentMessageRendererProps } from './index';\n\ntype Props = ThreadParentMessageRendererProps<{\n  regexTextPatterns?: RegexTextPattern[];\n  renderRegexTextChildren?: (message: SendbirdUserMessage) => string;\n}>;\n\nconst ThreadParentMessageUser = (props: Props) => {\n  const userMessage: SendbirdUserMessage = props.parentMessage as SendbirdUserMessage;\n  if (!userMessage) return null;\n\n  const { colors } = useUIKitTheme();\n\n  return (\n    <Text body3 color={colors.onBackground01} suppressHighlighting>\n      <RegexText\n        body3\n        color={colors.onBackground01}\n        patterns={[\n          ...(props.regexTextPatterns ?? []),\n          {\n            regex: urlRegexStrict,\n            replacer({ match, parentProps, keyPrefix, index }) {\n              return (\n                <Text\n                  {...parentProps}\n                  key={`${keyPrefix}-${index}`}\n                  onPress={() => props.onPressURL?.(match)}\n                  style={[parentProps?.style, styles.urlText]}\n                >\n                  {match}\n                </Text>\n              );\n            },\n          },\n        ]}\n      >\n        {props.renderRegexTextChildren?.(userMessage)}\n      </RegexText>\n      {Boolean(userMessage.updatedAt) && (\n        <Text body3 color={colors.onBackground02}>\n          {' (edited)'}\n        </Text>\n      )}\n    </Text>\n  );\n};\n\nconst styles = createStyleSheet({\n  bubble: {\n    paddingHorizontal: 12,\n    paddingVertical: 6,\n  },\n  urlText: {\n    textDecorationLine: 'underline',\n  },\n});\n\nexport default ThreadParentMessageUser;\n"],"mappings":";AAAA,OAAOA,KAAK,MAAM,OAAO;AAEzB,SAAgCC,IAAI,EAAEC,aAAa,QAAQ,yCAAyC;AACpG,SAASC,SAAS,EAAEC,gBAAgB,QAAQ,yCAAyC;AACrF,SAA8BC,cAAc,QAAQ,uBAAuB;AAS3E,MAAMC,uBAAuB,GAAIC,KAAY,IAAK;EAAA,IAAAC,qBAAA;EAChD,MAAMC,WAAgC,GAAGF,KAAK,CAACG,aAAoC;EACnF,IAAI,CAACD,WAAW,EAAE,OAAO,IAAI;EAE7B,MAAM;IAAEE;EAAO,CAAC,GAAGT,aAAa,EAAE;EAElC,oBACEF,KAAA,CAAAY,aAAA,CAACX,IAAI;IAACY,KAAK;IAACC,KAAK,EAAEH,MAAM,CAACI,cAAe;IAACC,oBAAoB;EAAA,gBAC5DhB,KAAA,CAAAY,aAAA,CAACT,SAAS;IACRU,KAAK;IACLC,KAAK,EAAEH,MAAM,CAACI,cAAe;IAC7BE,QAAQ,EAAE,CACR,IAAIV,KAAK,CAACW,iBAAiB,IAAI,EAAE,CAAC,EAClC;MACEC,KAAK,EAAEd,cAAc;MACrBe,QAAQA,CAAAC,IAAA,EAA2C;QAAA,IAA1C;UAAEC,KAAK;UAAEC,WAAW;UAAEC,SAAS;UAAEC;QAAM,CAAC,GAAAJ,IAAA;QAC/C,oBACErB,KAAA,CAAAY,aAAA,CAACX,IAAI,EAAAyB,QAAA,KACCH,WAAW;UACfI,GAAG,EAAG,GAAEH,SAAU,IAAGC,KAAM,EAAE;UAC7BG,OAAO,EAAEA,CAAA;YAAA,IAAAC,iBAAA;YAAA,QAAAA,iBAAA,GAAMtB,KAAK,CAACuB,UAAU,cAAAD,iBAAA,uBAAhBA,iBAAA,CAAAE,IAAA,CAAAxB,KAAK,EAAce,KAAK,CAAC;UAAA,CAAC;UACzCU,KAAK,EAAE,CAACT,WAAW,aAAXA,WAAW,uBAAXA,WAAW,CAAES,KAAK,EAAEC,MAAM,CAACC,OAAO;QAAE,IAE3CZ,KAAK,CACD;MAEX;IACF,CAAC;EACD,IAAAd,qBAAA,GAEDD,KAAK,CAAC4B,uBAAuB,cAAA3B,qBAAA,uBAA7BA,qBAAA,CAAAuB,IAAA,CAAAxB,KAAK,EAA2BE,WAAW,CAAC,CACnC,EACX2B,OAAO,CAAC3B,WAAW,CAAC4B,SAAS,CAAC,iBAC7BrC,KAAA,CAAAY,aAAA,CAACX,IAAI;IAACY,KAAK;IAACC,KAAK,EAAEH,MAAM,CAAC2B;EAAe,GACtC,WAAW,CAEf,CACI;AAEX,CAAC;AAED,MAAML,MAAM,GAAG7B,gBAAgB,CAAC;EAC9BmC,MAAM,EAAE;IACNC,iBAAiB,EAAE,EAAE;IACrBC,eAAe,EAAE;EACnB,CAAC;EACDP,OAAO,EAAE;IACPQ,kBAAkB,EAAE;EACtB;AACF,CAAC,CAAC;AAEF,eAAepC,uBAAuB"}

package/lib/module/components/ThreadParentMessageRenderer/ThreadParentMessage.user.og.js

@@ -0,0 +1,119 @@
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+import React from 'react';
+import { Box, ImageWithPlaceholder, PressBox, RegexText, Text, createStyleSheet, useUIKitTheme } from '@sendbird/uikit-react-native-foundation';
+import { urlRegexStrict, useFreshCallback } from '@sendbird/uikit-utils';
+import { useSendbirdChat } from './../../hooks/useContext';
+const ThreadParentMessageUserOg = props => {
+  var _props$renderRegexTex;
+  const userMessage = props.parentMessage;
+  if (!userMessage) return null;
+  const {
+    sbOptions
+  } = useSendbirdChat();
+  const {
+    select,
+    colors,
+    palette
+  } = useUIKitTheme();
+  const enableOgtag = sbOptions.uikitWithAppInfo.groupChannel.channel.enableOgtag;
+  const onPressMessage = userMessage => useFreshCallback(() => {
+    var _userMessage$ogMetaDa, _props$onPressURL;
+    typeof ((_userMessage$ogMetaDa = userMessage.ogMetaData) === null || _userMessage$ogMetaDa === void 0 ? void 0 : _userMessage$ogMetaDa.url) === 'string' && ((_props$onPressURL = props.onPressURL) === null || _props$onPressURL === void 0 ? void 0 : _props$onPressURL.call(props, userMessage.ogMetaData.url));
+  });
+  return /*#__PURE__*/React.createElement(Box, null, /*#__PURE__*/React.createElement(PressBox, {
+    activeOpacity: 0.85,
+    onPress: onPressMessage(userMessage)
+  }, /*#__PURE__*/React.createElement(Text, {
+    body3: true,
+    color: colors.onBackground01,
+    suppressHighlighting: true
+  }, /*#__PURE__*/React.createElement(RegexText, {
+    body3: true,
+    color: colors.onBackground01,
+    patterns: [...(props.regexTextPatterns ?? []), {
+      regex: urlRegexStrict,
+      replacer(_ref) {
+        let {
+          match,
+          parentProps,
+          keyPrefix,
+          index
+        } = _ref;
+        return /*#__PURE__*/React.createElement(Text, _extends({}, parentProps, {
+          key: `${keyPrefix}-${index}`,
+          onPress: () => {
+            var _props$onPressURL2;
+            return (_props$onPressURL2 = props.onPressURL) === null || _props$onPressURL2 === void 0 ? void 0 : _props$onPressURL2.call(props, match);
+          },
+          style: [parentProps === null || parentProps === void 0 ? void 0 : parentProps.style, styles.urlText]
+        }), match);
+      }
+    }]
+  }, (_props$renderRegexTex = props.renderRegexTextChildren) === null || _props$renderRegexTex === void 0 ? void 0 : _props$renderRegexTex.call(props, userMessage)), Boolean(userMessage.updatedAt) && /*#__PURE__*/React.createElement(Text, {
+    body3: true,
+    color: colors.onBackground02
+  }, ' (edited)'))), userMessage.ogMetaData && enableOgtag && /*#__PURE__*/React.createElement(PressBox, {
+    onPress: onPressMessage(userMessage),
+    style: styles.container
+  }, /*#__PURE__*/React.createElement(Box, null, !!userMessage.ogMetaData.defaultImage && /*#__PURE__*/React.createElement(ImageWithPlaceholder, {
+    style: styles.ogImage,
+    source: {
+      uri: userMessage.ogMetaData.defaultImage.url
+    }
+  }), /*#__PURE__*/React.createElement(Box, {
+    style: styles.ogContainer,
+    backgroundColor: select({
+      dark: palette.background400,
+      light: palette.background100
+    })
+  }, /*#__PURE__*/React.createElement(Text, {
+    numberOfLines: 3,
+    body2: true,
+    color: colors.onBackground01,
+    style: styles.ogTitle
+  }, userMessage.ogMetaData.title), !!userMessage.ogMetaData.description && /*#__PURE__*/React.createElement(Text, {
+    numberOfLines: 1,
+    caption2: true,
+    color: colors.onBackground01,
+    style: styles.ogDesc
+  }, userMessage.ogMetaData.description), /*#__PURE__*/React.createElement(Text, {
+    numberOfLines: 1,
+    caption2: true,
+    color: colors.onBackground02
+  }, userMessage.ogMetaData.url)))));
+};
+const styles = createStyleSheet({
+  container: {
+    borderRadius: 16,
+    overflow: 'hidden'
+  },
+  ogContainer: {
+    paddingHorizontal: 12,
+    paddingTop: 8,
+    paddingBottom: 12,
+    maxWidth: 240,
+    borderBottomLeftRadius: 16,
+    borderBottomRightRadius: 16
+  },
+  ogImage: {
+    width: 240,
+    height: 136,
+    borderTopLeftRadius: 16,
+    borderTopRightRadius: 16
+  },
+  ogUrl: {
+    marginBottom: 4
+  },
+  ogTitle: {
+    marginBottom: 4
+  },
+  ogDesc: {
+    lineHeight: 14,
+    marginBottom: 8
+  },
+  urlText: {
+    textDecorationLine: 'underline'
+  }
+});
+export default ThreadParentMessageUserOg;
+//# sourceMappingURL=ThreadParentMessage.user.og.js.map

package/lib/module/components/ThreadParentMessageRenderer/ThreadParentMessage.user.og.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","Box","ImageWithPlaceholder","PressBox","RegexText","Text","createStyleSheet","useUIKitTheme","urlRegexStrict","useFreshCallback","useSendbirdChat","ThreadParentMessageUserOg","props","_props$renderRegexTex","userMessage","parentMessage","sbOptions","select","colors","palette","enableOgtag","uikitWithAppInfo","groupChannel","channel","onPressMessage","_userMessage$ogMetaDa","_props$onPressURL","ogMetaData","url","onPressURL","call","createElement","activeOpacity","onPress","body3","color","onBackground01","suppressHighlighting","patterns","regexTextPatterns","regex","replacer","_ref","match","parentProps","keyPrefix","index","_extends","key","_props$onPressURL2","style","styles","urlText","renderRegexTextChildren","Boolean","updatedAt","onBackground02","container","defaultImage","ogImage","source","uri","ogContainer","backgroundColor","dark","background400","light","background100","numberOfLines","body2","ogTitle","title","description","caption2","ogDesc","borderRadius","overflow","paddingHorizontal","paddingTop","paddingBottom","maxWidth","borderBottomLeftRadius","borderBottomRightRadius","width","height","borderTopLeftRadius","borderTopRightRadius","ogUrl","marginBottom","lineHeight","textDecorationLine"],"sources":["ThreadParentMessage.user.og.tsx"],"sourcesContent":["import React from 'react';\n\nimport {\n  Box,\n  ImageWithPlaceholder,\n  PressBox,\n  RegexText,\n  type RegexTextPattern,\n  Text,\n  createStyleSheet,\n  useUIKitTheme,\n} from '@sendbird/uikit-react-native-foundation';\nimport { SendbirdUserMessage, urlRegexStrict, useFreshCallback } from '@sendbird/uikit-utils';\n\nimport { useSendbirdChat } from './../../hooks/useContext';\nimport { ThreadParentMessageRendererProps } from './index';\n\ntype Props = ThreadParentMessageRendererProps<{\n  regexTextPatterns?: RegexTextPattern[];\n  renderRegexTextChildren?: (message: SendbirdUserMessage) => string;\n}>;\n\nconst ThreadParentMessageUserOg = (props: Props) => {\n  const userMessage: SendbirdUserMessage = props.parentMessage as SendbirdUserMessage;\n  if (!userMessage) return null;\n\n  const { sbOptions } = useSendbirdChat();\n  const { select, colors, palette } = useUIKitTheme();\n  const enableOgtag = sbOptions.uikitWithAppInfo.groupChannel.channel.enableOgtag;\n  const onPressMessage = (userMessage: SendbirdUserMessage) =>\n    useFreshCallback(() => {\n      typeof userMessage.ogMetaData?.url === 'string' && props.onPressURL?.(userMessage.ogMetaData.url);\n    });\n\n  return (\n    <Box>\n      <PressBox activeOpacity={0.85} onPress={onPressMessage(userMessage)}>\n        <Text body3 color={colors.onBackground01} suppressHighlighting>\n          <RegexText\n            body3\n            color={colors.onBackground01}\n            patterns={[\n              ...(props.regexTextPatterns ?? []),\n              {\n                regex: urlRegexStrict,\n                replacer({ match, parentProps, keyPrefix, index }) {\n                  return (\n                    <Text\n                      {...parentProps}\n                      key={`${keyPrefix}-${index}`}\n                      onPress={() => props.onPressURL?.(match)}\n                      style={[parentProps?.style, styles.urlText]}\n                    >\n                      {match}\n                    </Text>\n                  );\n                },\n              },\n            ]}\n          >\n            {props.renderRegexTextChildren?.(userMessage)}\n          </RegexText>\n          {Boolean(userMessage.updatedAt) && (\n            <Text body3 color={colors.onBackground02}>\n              {' (edited)'}\n            </Text>\n          )}\n        </Text>\n      </PressBox>\n      {userMessage.ogMetaData && enableOgtag && (\n        <PressBox onPress={onPressMessage(userMessage)} style={styles.container}>\n          <Box>\n            {!!userMessage.ogMetaData.defaultImage && (\n              <ImageWithPlaceholder style={styles.ogImage} source={{ uri: userMessage.ogMetaData.defaultImage.url }} />\n            )}\n            <Box\n              style={styles.ogContainer}\n              backgroundColor={select({ dark: palette.background400, light: palette.background100 })}\n            >\n              <Text numberOfLines={3} body2 color={colors.onBackground01} style={styles.ogTitle}>\n                {userMessage.ogMetaData.title}\n              </Text>\n              {!!userMessage.ogMetaData.description && (\n                <Text numberOfLines={1} caption2 color={colors.onBackground01} style={styles.ogDesc}>\n                  {userMessage.ogMetaData.description}\n                </Text>\n              )}\n              <Text numberOfLines={1} caption2 color={colors.onBackground02}>\n                {userMessage.ogMetaData.url}\n              </Text>\n            </Box>\n          </Box>\n        </PressBox>\n      )}\n    </Box>\n  );\n};\n\nconst styles = createStyleSheet({\n  container: {\n    borderRadius: 16,\n    overflow: 'hidden',\n  },\n  ogContainer: {\n    paddingHorizontal: 12,\n    paddingTop: 8,\n    paddingBottom: 12,\n    maxWidth: 240,\n    borderBottomLeftRadius: 16,\n    borderBottomRightRadius: 16,\n  },\n  ogImage: {\n    width: 240,\n    height: 136,\n    borderTopLeftRadius: 16,\n    borderTopRightRadius: 16,\n  },\n  ogUrl: {\n    marginBottom: 4,\n  },\n  ogTitle: {\n    marginBottom: 4,\n  },\n  ogDesc: {\n    lineHeight: 14,\n    marginBottom: 8,\n  },\n  urlText: {\n    textDecorationLine: 'underline',\n  },\n});\n\nexport default ThreadParentMessageUserOg;\n"],"mappings":"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"}

package/lib/module/components/ThreadParentMessageRenderer/index.js

@@ -0,0 +1,196 @@
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+import React, { useRef } from 'react';
+import { Text, useUIKitTheme } from '@sendbird/uikit-react-native-foundation';
+import { getMessageType, isMyMessage, isVoiceMessage } from '@sendbird/uikit-utils';
+import { VOICE_MESSAGE_META_ARRAY_DURATION_KEY } from '../../constants';
+import SBUUtils from '../../libs/SBUUtils';
+import { usePlatformService, useSendbirdChat } from './../../hooks/useContext';
+import ThreadParentMessageFile from './ThreadParentMessage.file';
+import ThreadParentMessageFileImage from './ThreadParentMessage.file.image';
+import ThreadParentMessageFileVideo from './ThreadParentMessage.file.video';
+import ThreadParentMessageFileVoice from './ThreadParentMessage.file.voice';
+import ThreadParentMessageUser from './ThreadParentMessage.user';
+import ThreadParentMessageUserOg from './ThreadParentMessage.user.og';
+const ThreadParentMessageRenderer = props => {
+  const playerUnsubscribes = useRef([]);
+  const {
+    sbOptions,
+    currentUser,
+    mentionManager
+  } = useSendbirdChat();
+  const {
+    palette
+  } = useUIKitTheme();
+  const {
+    mediaService,
+    playerService
+  } = usePlatformService();
+  const parentMessage = props.parentMessage;
+  const resetPlayer = async () => {
+    playerUnsubscribes.current.forEach(unsubscribe => {
+      try {
+        unsubscribe();
+      } catch {}
+    });
+    playerUnsubscribes.current.length = 0;
+    await playerService.reset();
+  };
+  const messageProps = {
+    onPressURL: url => SBUUtils.openURL(url),
+    onToggleVoiceMessage: async (state, setState) => {
+      if (isVoiceMessage(parentMessage) && parentMessage.sendingStatus === 'succeeded') {
+        if (playerService.uri === parentMessage.url) {
+          if (playerService.state === 'playing') {
+            await playerService.pause();
+          } else {
+            await playerService.play(parentMessage.url);
+          }
+        } else {
+          if (playerService.state !== 'idle') {
+            await resetPlayer();
+          }
+          const shouldSeekToTime = state.duration > state.currentTime && state.currentTime > 0;
+          let seekFinished = !shouldSeekToTime;
+          const forPlayback = playerService.addPlaybackListener(_ref => {
+            let {
+              stopped,
+              currentTime,
+              duration
+            } = _ref;
+            if (seekFinished) {
+              setState(prevState => ({
+                ...prevState,
+                currentTime: stopped ? 0 : currentTime,
+                duration
+              }));
+            }
+          });
+          const forState = playerService.addStateListener(state => {
+            switch (state) {
+              case 'preparing':
+                setState(prevState => ({
+                  ...prevState,
+                  status: 'preparing'
+                }));
+                break;
+              case 'playing':
+                setState(prevState => ({
+                  ...prevState,
+                  status: 'playing'
+                }));
+                break;
+              case 'idle':
+              case 'paused':
+                {
+                  setState(prevState => ({
+                    ...prevState,
+                    status: 'paused'
+                  }));
+                  break;
+                }
+              case 'stopped':
+                setState(prevState => ({
+                  ...prevState,
+                  status: 'paused'
+                }));
+                break;
+            }
+          });
+          playerUnsubscribes.current.push(forPlayback, forState);
+          await playerService.play(parentMessage.url);
+          if (shouldSeekToTime) {
+            await playerService.seek(state.currentTime);
+            seekFinished = true;
+          }
+        }
+      }
+    },
+    ...props
+  };
+  const userMessageProps = {
+    renderRegexTextChildren: message => {
+      if (mentionManager.shouldUseMentionedMessageTemplate(message, sbOptions.uikit.groupChannel.channel.enableMention)) {
+        return message.mentionedMessageTemplate;
+      } else {
+        return message.message;
+      }
+    },
+    regexTextPatterns: [{
+      regex: mentionManager.templateRegex,
+      replacer(_ref2) {
+        var _parentMessage$mentio;
+        let {
+          match,
+          groups,
+          parentProps,
+          index,
+          keyPrefix
+        } = _ref2;
+        const user = (_parentMessage$mentio = parentMessage.mentionedUsers) === null || _parentMessage$mentio === void 0 ? void 0 : _parentMessage$mentio.find(it => it.userId === groups[2]);
+        if (user) {
+          const mentionColor = !isMyMessage(parentMessage, currentUser === null || currentUser === void 0 ? void 0 : currentUser.userId) && user.userId === (currentUser === null || currentUser === void 0 ? void 0 : currentUser.userId) ? palette.onBackgroundLight01 : parentProps === null || parentProps === void 0 ? void 0 : parentProps.color;
+          return /*#__PURE__*/React.createElement(Text, _extends({}, parentProps, {
+            key: `${keyPrefix}-${index}`,
+            color: mentionColor,
+            onPress: () => {
+              var _messageProps$onPress;
+              return (_messageProps$onPress = messageProps.onPressMentionedUser) === null || _messageProps$onPress === void 0 ? void 0 : _messageProps$onPress.call(messageProps, user);
+            },
+            onLongPress: messageProps.onLongPress,
+            style: [parentProps === null || parentProps === void 0 ? void 0 : parentProps.style, {
+              fontWeight: '700'
+            }, user.userId === (currentUser === null || currentUser === void 0 ? void 0 : currentUser.userId) && {
+              backgroundColor: palette.highlight
+            }]
+          }), `${mentionManager.asMentionedMessageText(user)}`);
+        }
+        return match;
+      }
+    }]
+  };
+  switch (getMessageType(props.parentMessage)) {
+    case 'user':
+      {
+        return /*#__PURE__*/React.createElement(ThreadParentMessageUser, _extends({}, userMessageProps, messageProps));
+      }
+    case 'user.opengraph':
+      {
+        return /*#__PURE__*/React.createElement(ThreadParentMessageUserOg, _extends({}, userMessageProps, messageProps));
+      }
+    case 'file':
+    case 'file.audio':
+      {
+        return /*#__PURE__*/React.createElement(ThreadParentMessageFile, messageProps);
+      }
+    case 'file.video':
+      {
+        return /*#__PURE__*/React.createElement(ThreadParentMessageFileVideo, _extends({
+          fetchThumbnailFromVideoSource: uri => mediaService.getVideoThumbnail({
+            url: uri,
+            timeMills: 1000
+          })
+        }, messageProps));
+      }
+    case 'file.image':
+      {
+        return /*#__PURE__*/React.createElement(ThreadParentMessageFileImage, messageProps);
+      }
+    case 'file.voice':
+      {
+        return /*#__PURE__*/React.createElement(ThreadParentMessageFileVoice, _extends({
+          durationMetaArrayKey: VOICE_MESSAGE_META_ARRAY_DURATION_KEY,
+          onUnmount: () => {
+            if (isVoiceMessage(parentMessage) && playerService.uri === parentMessage.url) {
+              resetPlayer();
+            }
+          }
+        }, messageProps));
+      }
+    default:
+      {
+        return null;
+      }
+  }
+};
+export default /*#__PURE__*/React.memo(ThreadParentMessageRenderer);
+//# sourceMappingURL=index.js.map

package/lib/module/components/ThreadParentMessageRenderer/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","useRef","Text","useUIKitTheme","getMessageType","isMyMessage","isVoiceMessage","VOICE_MESSAGE_META_ARRAY_DURATION_KEY","SBUUtils","usePlatformService","useSendbirdChat","ThreadParentMessageFile","ThreadParentMessageFileImage","ThreadParentMessageFileVideo","ThreadParentMessageFileVoice","ThreadParentMessageUser","ThreadParentMessageUserOg","ThreadParentMessageRenderer","props","playerUnsubscribes","sbOptions","currentUser","mentionManager","palette","mediaService","playerService","parentMessage","resetPlayer","current","forEach","unsubscribe","length","reset","messageProps","onPressURL","url","openURL","onToggleVoiceMessage","state","setState","sendingStatus","uri","pause","play","shouldSeekToTime","duration","currentTime","seekFinished","forPlayback","addPlaybackListener","_ref","stopped","prevState","forState","addStateListener","status","push","seek","userMessageProps","renderRegexTextChildren","message","shouldUseMentionedMessageTemplate","uikit","groupChannel","channel","enableMention","mentionedMessageTemplate","regexTextPatterns","regex","templateRegex","replacer","_ref2","_parentMessage$mentio","match","groups","parentProps","index","keyPrefix","user","mentionedUsers","find","it","userId","mentionColor","onBackgroundLight01","color","createElement","_extends","key","onPress","_messageProps$onPress","onPressMentionedUser","call","onLongPress","style","fontWeight","backgroundColor","highlight","asMentionedMessageText","fetchThumbnailFromVideoSource","getVideoThumbnail","timeMills","durationMetaArrayKey","onUnmount","memo"],"sources":["index.tsx"],"sourcesContent":["import React, { useRef } from 'react';\n\nimport { RegexTextPattern, Text, useUIKitTheme } from '@sendbird/uikit-react-native-foundation';\nimport {\n  SendbirdFileMessage,\n  type SendbirdUser,\n  SendbirdUserMessage,\n  getMessageType,\n  isMyMessage,\n  isVoiceMessage,\n} from '@sendbird/uikit-utils';\n\nimport { VOICE_MESSAGE_META_ARRAY_DURATION_KEY } from '../../constants';\nimport SBUUtils from '../../libs/SBUUtils';\nimport { usePlatformService, useSendbirdChat } from './../../hooks/useContext';\nimport ThreadParentMessageFile from './ThreadParentMessage.file';\nimport ThreadParentMessageFileImage from './ThreadParentMessage.file.image';\nimport ThreadParentMessageFileVideo from './ThreadParentMessage.file.video';\nimport ThreadParentMessageFileVoice, { VoiceFileMessageState } from './ThreadParentMessage.file.voice';\nimport ThreadParentMessageUser from './ThreadParentMessage.user';\nimport ThreadParentMessageUserOg from './ThreadParentMessage.user.og';\n\nexport type ThreadParentMessageRendererProps<AdditionalProps = unknown> = {\n  parentMessage: SendbirdUserMessage | SendbirdFileMessage;\n  onPress?: () => void;\n  onLongPress?: () => void;\n  onPressURL?: (url: string) => void;\n  onPressMentionedUser?: (mentionedUser?: SendbirdUser) => void;\n  onToggleVoiceMessage?: (\n    state: VoiceFileMessageState,\n    setState: React.Dispatch<React.SetStateAction<VoiceFileMessageState>>,\n  ) => Promise<void>;\n} & AdditionalProps;\n\nconst ThreadParentMessageRenderer = (props: ThreadParentMessageRendererProps) => {\n  const playerUnsubscribes = useRef<(() => void)[]>([]);\n  const { sbOptions, currentUser, mentionManager } = useSendbirdChat();\n  const { palette } = useUIKitTheme();\n  const { mediaService, playerService } = usePlatformService();\n  const parentMessage = props.parentMessage;\n\n  const resetPlayer = async () => {\n    playerUnsubscribes.current.forEach((unsubscribe) => {\n      try {\n        unsubscribe();\n      } catch {}\n    });\n    playerUnsubscribes.current.length = 0;\n    await playerService.reset();\n  };\n\n  const messageProps: ThreadParentMessageRendererProps = {\n    onPressURL: (url) => SBUUtils.openURL(url),\n    onToggleVoiceMessage: async (state, setState) => {\n      if (isVoiceMessage(parentMessage) && parentMessage.sendingStatus === 'succeeded') {\n        if (playerService.uri === parentMessage.url) {\n          if (playerService.state === 'playing') {\n            await playerService.pause();\n          } else {\n            await playerService.play(parentMessage.url);\n          }\n        } else {\n          if (playerService.state !== 'idle') {\n            await resetPlayer();\n          }\n\n          const shouldSeekToTime = state.duration > state.currentTime && state.currentTime > 0;\n          let seekFinished = !shouldSeekToTime;\n\n          const forPlayback = playerService.addPlaybackListener(({ stopped, currentTime, duration }) => {\n            if (seekFinished) {\n              setState((prevState) => ({ ...prevState, currentTime: stopped ? 0 : currentTime, duration }));\n            }\n          });\n          const forState = playerService.addStateListener((state) => {\n            switch (state) {\n              case 'preparing':\n                setState((prevState) => ({ ...prevState, status: 'preparing' }));\n                break;\n              case 'playing':\n                setState((prevState) => ({ ...prevState, status: 'playing' }));\n                break;\n              case 'idle':\n              case 'paused': {\n                setState((prevState) => ({ ...prevState, status: 'paused' }));\n                break;\n              }\n              case 'stopped':\n                setState((prevState) => ({ ...prevState, status: 'paused' }));\n                break;\n            }\n          });\n          playerUnsubscribes.current.push(forPlayback, forState);\n\n          await playerService.play(parentMessage.url);\n          if (shouldSeekToTime) {\n            await playerService.seek(state.currentTime);\n            seekFinished = true;\n          }\n        }\n      }\n    },\n    ...props,\n  };\n\n  const userMessageProps: {\n    renderRegexTextChildren: (message: SendbirdUserMessage) => string;\n    regexTextPatterns: RegexTextPattern[];\n  } = {\n    renderRegexTextChildren: (message) => {\n      if (\n        mentionManager.shouldUseMentionedMessageTemplate(message, sbOptions.uikit.groupChannel.channel.enableMention)\n      ) {\n        return message.mentionedMessageTemplate;\n      } else {\n        return message.message;\n      }\n    },\n    regexTextPatterns: [\n      {\n        regex: mentionManager.templateRegex,\n        replacer({ match, groups, parentProps, index, keyPrefix }) {\n          const user = parentMessage.mentionedUsers?.find((it) => it.userId === groups[2]);\n          if (user) {\n            const mentionColor =\n              !isMyMessage(parentMessage, currentUser?.userId) && user.userId === currentUser?.userId\n                ? palette.onBackgroundLight01\n                : parentProps?.color;\n\n            return (\n              <Text\n                {...parentProps}\n                key={`${keyPrefix}-${index}`}\n                color={mentionColor}\n                onPress={() => messageProps.onPressMentionedUser?.(user)}\n                onLongPress={messageProps.onLongPress}\n                style={[\n                  parentProps?.style,\n                  { fontWeight: '700' },\n                  user.userId === currentUser?.userId && { backgroundColor: palette.highlight },\n                ]}\n              >\n                {`${mentionManager.asMentionedMessageText(user)}`}\n              </Text>\n            );\n          }\n          return match;\n        },\n      },\n    ],\n  };\n\n  switch (getMessageType(props.parentMessage)) {\n    case 'user': {\n      return <ThreadParentMessageUser {...userMessageProps} {...messageProps} />;\n    }\n    case 'user.opengraph': {\n      return <ThreadParentMessageUserOg {...userMessageProps} {...messageProps} />;\n    }\n    case 'file':\n    case 'file.audio': {\n      return <ThreadParentMessageFile {...messageProps} />;\n    }\n    case 'file.video': {\n      return (\n        <ThreadParentMessageFileVideo\n          fetchThumbnailFromVideoSource={(uri) => mediaService.getVideoThumbnail({ url: uri, timeMills: 1000 })}\n          {...messageProps}\n        />\n      );\n    }\n    case 'file.image': {\n      return <ThreadParentMessageFileImage {...messageProps} />;\n    }\n    case 'file.voice': {\n      return (\n        <ThreadParentMessageFileVoice\n          durationMetaArrayKey={VOICE_MESSAGE_META_ARRAY_DURATION_KEY}\n          onUnmount={() => {\n            if (isVoiceMessage(parentMessage) && playerService.uri === parentMessage.url) {\n              resetPlayer();\n            }\n          }}\n          {...messageProps}\n        />\n      );\n    }\n    default: {\n      return null;\n    }\n  }\n};\n\nexport default React.memo(ThreadParentMessageRenderer);\n"],"mappings":"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"}

package/lib/module/containers/SendbirdUIKitContainer.js

@@ -19,6 +19,7 @@ import InternalLocalCacheStorage from '../libs/InternalLocalCacheStorage';
 import MentionConfig from '../libs/MentionConfig';
 import MentionManager from '../libs/MentionManager';
 import VoiceMessageConfig from '../libs/VoiceMessageConfig';
+import VoiceMessageStatusManager from '../libs/VoiceMessageStatusManager';
 import StringSetEn from '../localization/StringSet.en';
 import SBUDynamicModule from '../platform/dynamicModule';
 import VERSION from '../version';
@@ -77,6 +78,7 @@ const SendbirdUIKitContainer = props => {
   } = useConfigInstance(props);
   const emojiManager = useMemo(() => new EmojiManager(internalStorage), [internalStorage]);
   const mentionManager = useMemo(() => new MentionManager(mentionConfig), [mentionConfig]);
+  const voiceMessageStatusManager = useMemo(() => new VoiceMessageStatusManager(), []);
   useLayoutEffect(() => {
     if (!isFirstMount) {
       const sendbird = initializeSendbird(appId, {
@@ -123,6 +125,7 @@ const SendbirdUIKitContainer = props => {
     mentionManager: mentionManager,
     imageCompressionConfig: imageCompressionConfig,
     voiceMessageConfig: voiceMessageConfig,
+    voiceMessageStatusManager: voiceMessageStatusManager,
     enableAutoPushTokenRegistration: chatOptions.enableAutoPushTokenRegistration ?? SendbirdUIKit.DEFAULT.AUTO_PUSH_TOKEN_REGISTRATION,
     enableUseUserIdForNickname: chatOptions.enableUseUserIdForNickname ?? SendbirdUIKit.DEFAULT.USE_USER_ID_FOR_NICKNAME,
     enableImageCompression: chatOptions.enableImageCompression ?? SendbirdUIKit.DEFAULT.IMAGE_COMPRESSION