stream-chat-react-native-core 5.28.1-beta.1 → 5.29.0-beta.1

package/src/components/ProgressControl/WaveProgressBar.tsx

@@ -0,0 +1,180 @@
+import React, { useEffect, useMemo, useState } from 'react';
+import { Platform, Pressable, StyleProp, StyleSheet, View, ViewStyle } from 'react-native';
+import { PanGestureHandler } from 'react-native-gesture-handler';
+import Animated, {
+  runOnJS,
+  useAnimatedGestureHandler,
+  useAnimatedStyle,
+  useSharedValue,
+} from 'react-native-reanimated';
+
+import { useTheme } from '../../contexts/themeContext/ThemeContext';
+import { triggerHaptic } from '../../native';
+import { resampleWaveformData } from '../MessageInput/utils/audioSampling';
+
+export type WaveProgressBarProps = {
+  progress: number;
+  waveformData: number[];
+  amplitudesCount?: number;
+  filledColor?: string;
+  onPlayPause?: (status?: boolean) => void;
+  onProgressDrag?: (progress: number) => void;
+};
+
+const WAVEFORM_WIDTH = 2;
+
+const ProgressControlThumb = ({ style }: { style?: StyleProp<ViewStyle> }) => {
+  const {
+    theme: {
+      colors: { black, grey_dark, static_white },
+    },
+  } = useTheme();
+  return (
+    <Pressable style={{ height: 40, justifyContent: 'center', width: 40 }}>
+      <View
+        style={[
+          styles.progressControlThumbStyle,
+          {
+            backgroundColor: static_white,
+            borderColor: grey_dark,
+            shadowColor: black,
+          },
+          style,
+        ]}
+      />
+    </Pressable>
+  );
+};
+
+export const WaveProgressBar = React.memo(
+  (props: WaveProgressBarProps) => {
+    const [endPosition, setEndPosition] = useState(0);
+    const [currentWaveformProgress, setCurrentWaveformProgress] = useState(0);
+    /* On Android, the seek doesn't work for AAC files, hence we disable progress drag for now */
+    const showProgressDrag = Platform.OS === 'ios';
+    const {
+      amplitudesCount = 70,
+      filledColor,
+      onPlayPause,
+      onProgressDrag,
+      progress,
+      waveformData,
+    } = props;
+    const {
+      theme: {
+        colors: { accent_blue, grey_dark },
+        waveProgressBar: { container, thumb, waveform: waveformTheme },
+      },
+    } = useTheme();
+    const state = useSharedValue(0);
+
+    useEffect(() => {
+      const stageProgress = Math.floor(
+        progress * (showProgressDrag ? amplitudesCount - 1 : amplitudesCount),
+      );
+      state.value = stageProgress * (WAVEFORM_WIDTH * 2);
+      setEndPosition(state.value);
+      setCurrentWaveformProgress(stageProgress);
+    }, [progress]);
+
+    const stringifiedWaveformData = waveformData.toString();
+
+    const resampledWaveformData = useMemo(
+      () => resampleWaveformData(waveformData, amplitudesCount),
+      [amplitudesCount, stringifiedWaveformData],
+    );
+
+    const thumbStyles = useAnimatedStyle(() => ({
+      position: 'absolute',
+      transform: [{ translateX: state.value }],
+    }));
+
+    const onGestureEvent = useAnimatedGestureHandler(
+      {
+        onActive: (event) => {
+          const stage = Math.floor((endPosition + event.translationX) / (WAVEFORM_WIDTH * 2));
+          runOnJS(setCurrentWaveformProgress)(stage);
+          state.value = stage * (WAVEFORM_WIDTH * 2);
+          if (state.value < 0) {
+            state.value = 0;
+          } else if (state.value > amplitudesCount * (WAVEFORM_WIDTH * 2)) {
+            state.value = (amplitudesCount - 1) * (WAVEFORM_WIDTH * 2);
+          } else {
+            runOnJS(triggerHaptic)('impactLight');
+          }
+        },
+        onFinish: () => {
+          const stage = Math.floor(state.value / (WAVEFORM_WIDTH * 2));
+          runOnJS(setEndPosition)(state.value);
+          if (onProgressDrag) runOnJS(onProgressDrag)(stage);
+          if (onPlayPause) runOnJS(onPlayPause)(false);
+        },
+        onStart: () => {
+          if (onPlayPause) runOnJS(onPlayPause)(true);
+          state.value = endPosition;
+        },
+      },
+      [amplitudesCount, endPosition],
+    );
+
+    return (
+      <View style={[styles.container, container]}>
+        {resampledWaveformData.map((waveform, index) => (
+          <View
+            key={index}
+            style={[
+              styles.waveform,
+              {
+                backgroundColor:
+                  index < currentWaveformProgress ? filledColor || accent_blue : grey_dark,
+                height: waveform * 25 > 3 ? waveform * 25 : 3,
+              },
+              waveformTheme,
+            ]}
+          />
+        ))}
+        {showProgressDrag && onProgressDrag && (
+          <PanGestureHandler maxPointers={1} onGestureEvent={onGestureEvent}>
+            <Animated.View style={[thumbStyles, thumb]}>
+              <ProgressControlThumb />
+            </Animated.View>
+          </PanGestureHandler>
+        )}
+      </View>
+    );
+  },
+  (prevProps, nextProps) => {
+    if (prevProps.amplitudesCount !== nextProps.amplitudesCount) return false;
+    if (prevProps.progress !== nextProps.progress) return false;
+    else return true;
+  },
+);
+
+const styles = StyleSheet.create({
+  container: {
+    alignItems: 'center',
+    alignSelf: 'center',
+    flexDirection: 'row',
+  },
+  progressControlThumbStyle: {
+    borderRadius: 5,
+    borderWidth: 0.2,
+    elevation: 6,
+    height: 25,
+    shadowOffset: {
+      height: 3,
+      width: 0,
+    },
+    shadowOpacity: 0.27,
+    shadowRadius: 4.65,
+    width: WAVEFORM_WIDTH * 2,
+  },
+  waveform: {
+    alignSelf: 'center',
+    borderRadius: 2,
+    marginHorizontal: WAVEFORM_WIDTH / 2,
+    width: WAVEFORM_WIDTH,
+  },
+});
+
+WaveProgressBar.displayName = 'WaveProgressBar';

package/src/components/Reply/Reply.tsx

@@ -1,5 +1,8 @@
 import React, { useContext, useMemo, useState } from 'react';
-import { Image, ImageStyle, StyleSheet, View, ViewStyle } from 'react-native';
+
+import { Image, ImageStyle, StyleSheet, Text, View, ViewStyle } from 'react-native';
+
+import dayjs from 'dayjs';
 
 import merge from 'lodash/merge';
 
@@ -21,6 +24,7 @@ import {
 } from '../../contexts/translationContext/TranslationContext';
 import type { DefaultStreamChatGenerics } from '../../types/types';
 import { getResizedImageUrl } from '../../utils/getResizedImageUrl';
+import { getTrimmedAttachmentTitle } from '../../utils/getTrimmedAttachmentTitle';
 import { hasOnlyEmojis } from '../../utils/utils';
 
 import { FileIcon as FileIconDefault } from '../Attachment/FileIcon';
@@ -51,7 +55,10 @@ const styles = StyleSheet.create({
     flexGrow: 1,
     flexShrink: 1,
   },
-  text: { fontSize: 12 },
+  secondaryText: {
+    paddingHorizontal: 8,
+  },
+  text: { fontSize: 12, fontWeight: 'bold', overflow: 'hidden' },
   textContainer: { maxWidth: undefined, paddingHorizontal: 8 },
   videoThumbnailContainerStyle: {
     borderRadius: 8,
@@ -87,7 +94,11 @@ const getMessageType = <
 ) => {
   let messageType;
 
-  const isLastAttachmentFile = lastAttachment.type === 'file' || lastAttachment.type === 'audio';
+  const isLastAttachmentFile = lastAttachment.type === 'file';
+
+  const isLastAttachmentAudio = lastAttachment.type === 'audio';
+
+  const isLastAttachmentVoiceRecording = lastAttachment.type === 'voiceRecording';
 
   const isLastAttachmentVideo = lastAttachment.type === 'video';
 
@@ -105,6 +116,10 @@ const getMessageType = <
     messageType = 'file';
   } else if (isLastAttachmentVideo) {
     messageType = 'video';
+  } else if (isLastAttachmentAudio) {
+    messageType = 'audio';
+  } else if (isLastAttachmentVoiceRecording) {
+    messageType = 'voiceRecording';
   } else if (isLastAttachmentImageOrGiphy) {
     if (isLastAttachmentImage) messageType = 'image';
     else messageType = undefined;
@@ -142,6 +157,7 @@ const ReplyWithContext = <
         imageAttachment,
         markdownStyles,
         messageContainer,
+        secondaryText,
         textContainer,
         videoThumbnail: {
           container: videoThumbnailContainerStyle,
@@ -163,11 +179,15 @@ const ReplyWithContext = <
   const lastAttachment = quotedMessage.attachments?.slice(-1)[0] as Attachment<StreamChatGenerics>;
   const messageType = lastAttachment && getMessageType(lastAttachment);
 
+  const trimmedLastAttachmentTitle = getTrimmedAttachmentTitle(lastAttachment?.title);
+
   const hasImage =
     !error &&
     lastAttachment &&
     messageType !== 'file' &&
     messageType !== 'video' &&
+    messageType !== 'audio' &&
+    messageType !== 'voiceRecording' &&
     (lastAttachment.image_url || lastAttachment.thumb_url || lastAttachment.og_scrape_url);
 
   const onlyEmojis = !lastAttachment && emojiOnlyText;
@@ -189,7 +209,7 @@ const ReplyWithContext = <
         ]}
       >
         {!error && lastAttachment ? (
-          messageType === 'file' ? (
+          messageType === 'file' || messageType === 'voiceRecording' || messageType === 'audio' ? (
             <View
               style={[
                 styles.fileAttachmentContainer,
@@ -228,60 +248,73 @@ const ReplyWithContext = <
             thumb_url={lastAttachment.thumb_url}
           />
         ) : null}
-        <MessageTextContainer<StreamChatGenerics>
-          markdownStyles={
-            quotedMessage.type === 'deleted'
-              ? merge({ em: { color: grey } }, deletedText)
-              : { text: styles.text, ...markdownStyles }
-          }
-          message={{
-            ...quotedMessage,
-            text:
+        <View style={{ flexDirection: 'column' }}>
+          <MessageTextContainer<StreamChatGenerics>
+            markdownStyles={
               quotedMessage.type === 'deleted'
-                ? `_${t('Message deleted')}_`
-                : quotedMessage.text
-                ? quotedMessage.text.length > 170
-                  ? `${quotedMessage.text.slice(0, 170)}...`
+                ? merge({ em: { color: grey } }, deletedText)
+                : { text: styles.text, ...markdownStyles }
+            }
+            message={{
+              ...quotedMessage,
+              text:
+                quotedMessage.type === 'deleted'
+                  ? `_${t('Message deleted')}_`
                   : quotedMessage.text
-                : messageType === 'image'
-                ? t('Photo')
-                : messageType === 'video'
-                ? t('Video')
-                : messageType === 'file'
-                ? lastAttachment?.title || ''
-                : '',
-          }}
-          onlyEmojis={onlyEmojis}
-          styles={{
-            textContainer: [
-              {
-                marginRight:
-                  hasImage || messageType === 'video'
-                    ? Number(
-                        stylesProp.imageAttachment?.height ||
-                          imageAttachment.height ||
-                          styles.imageAttachment.height,
-                      ) +
-                      Number(
-                        stylesProp.imageAttachment?.marginLeft ||
-                          imageAttachment.marginLeft ||
-                          styles.imageAttachment.marginLeft,
-                      )
-                    : messageType === 'file'
-                    ? attachmentSize +
-                      Number(
-                        stylesProp.fileAttachmentContainer?.paddingLeft ||
-                          fileAttachmentContainer.paddingLeft ||
-                          styles.fileAttachmentContainer.paddingLeft,
-                      )
-                    : undefined,
-              },
-              styles.textContainer,
-              textContainer,
-              stylesProp.textContainer,
-            ],
-          }}
-        />
+                  ? quotedMessage.text.length > 170
+                    ? `${quotedMessage.text.slice(0, 170)}...`
+                    : quotedMessage.text
+                  : messageType === 'image'
+                  ? t('Photo')
+                  : messageType === 'video'
+                  ? t('Video')
+                  : messageType === 'file' ||
+                    messageType === 'audio' ||
+                    messageType === 'voiceRecording'
+                  ? trimmedLastAttachmentTitle || ''
+                  : '',
+            }}
+            onlyEmojis={onlyEmojis}
+            styles={{
+              textContainer: [
+                {
+                  marginRight:
+                    hasImage || messageType === 'video'
+                      ? Number(
+                          stylesProp.imageAttachment?.height ||
+                            imageAttachment.height ||
+                            styles.imageAttachment.height,
+                        ) +
+                        Number(
+                          stylesProp.imageAttachment?.marginLeft ||
+                            imageAttachment.marginLeft ||
+                            styles.imageAttachment.marginLeft,
+                        )
+                      : messageType === 'file' ||
+                        messageType === 'audio' ||
+                        messageType === 'voiceRecording'
+                      ? attachmentSize +
+                        Number(
+                          stylesProp.fileAttachmentContainer?.paddingLeft ||
+                            fileAttachmentContainer.paddingLeft ||
+                            styles.fileAttachmentContainer.paddingLeft,
+                        )
+                      : undefined,
+                },
+                styles.textContainer,
+                textContainer,
+                stylesProp.textContainer,
+              ],
+            }}
+          />
+          {messageType === 'audio' || messageType === 'voiceRecording' ? (
+            <Text style={[styles.secondaryText, { color: grey }, secondaryText]}>
+              {lastAttachment.duration
+                ? dayjs.duration(lastAttachment.duration, 'second').format('mm:ss')
+                : ''}
+            </Text>
+          ) : null}
+        </View>
       </View>
     </View>
   );

package/src/components/Thread/__tests__/__snapshots__/Thread.test.js.snap

@@ -1503,8 +1503,9 @@ exports[`Thread should match thread snapshot 1`] = `
         style={
           [
             {
-              "alignItems": "flex-end",
+              "alignItems": "center",
               "flexDirection": "row",
+              "justifyContent": "space-between",
             },
             {},
           ]
@@ -1515,8 +1516,6 @@ exports[`Thread should match thread snapshot 1`] = `
             [
               {
                 "flexDirection": "row",
-                "paddingBottom": 10,
-                "paddingRight": 10,
               },
               {},
             ]
@@ -1526,7 +1525,7 @@ exports[`Thread should match thread snapshot 1`] = `
             style={
               [
                 {
-                  "paddingRight": 10,
+                  "paddingRight": 5,
                 },
                 {},
               ]
@@ -1729,6 +1728,7 @@ exports[`Thread should match thread snapshot 1`] = `
                 "borderRadius": 20,
                 "borderWidth": 1,
                 "flex": 1,
+                "marginHorizontal": 10,
               },
               {
                 "borderColor": "#ECEBEB",
@@ -1790,10 +1790,7 @@ exports[`Thread should match thread snapshot 1`] = `
         <View
           style={
             [
-              {
-                "paddingBottom": 10,
-                "paddingLeft": 10,
-              },
+              {},
               {},
             ]
           }
@@ -1837,14 +1834,14 @@ exports[`Thread should match thread snapshot 1`] = `
           >
             <RNSVGSvgView
               align="xMidYMid"
-              bbHeight={24}
-              bbWidth={24}
+              bbHeight={32}
+              bbWidth={32}
+              fill="#DBDBDB"
               focusable={false}
-              height={24}
+              height={32}
               meetOrSlice={0}
               minX={0}
               minY={0}
-              pathFill="#DBDBDB"
               style={
                 [
                   {
@@ -1853,29 +1850,50 @@ exports[`Thread should match thread snapshot 1`] = `
                   },
                   {
                     "flex": 0,
-                    "height": 24,
-                    "width": 24,
+                    "height": 32,
+                    "width": 32,
                   },
                 ]
               }
-              vbHeight={24}
-              vbWidth={24}
-              width={24}
+              vbHeight={32}
+              vbWidth={32}
+              width={32}
             >
               <RNSVGGroup
                 fill={
                   {
-                    "payload": 4278190080,
+                    "payload": 4292598747,
                     "type": 0,
                   }
                 }
+                propList={
+                  [
+                    "fill",
+                  ]
+                }
               >
+                <RNSVGCircle
+                  cx={16}
+                  cy={16}
+                  fill={
+                    {
+                      "payload": 4292598747,
+                      "type": 0,
+                    }
+                  }
+                  propList={
+                    [
+                      "fill",
+                    ]
+                  }
+                  r={16}
+                />
                 <RNSVGPath
                   clipRule={0}
-                  d="M22 12c0-5.52-4.48-10-10-10S2 6.48 2 12s4.48 10 10 10 10-4.48 10-10zM8 11h4V8l4 4-4 4v-3H8v-2z"
+                  d="M9.33398 14.6666H16.0007V9.33325L22.6673 15.9999L16.0007 22.6666V17.3333H9.33398V14.6666Z"
                   fill={
                     {
-                      "payload": 4292598747,
+                      "payload": 4294967295,
                       "type": 0,
                     }
                   }

package/src/components/index.ts

@@ -114,6 +114,12 @@ export * from '../utils/removeReservedFields';
 
 export * from './MessageInput/AttachButton';
 export * from './MessageInput/CommandsButton';
+export * from './MessageInput/components/AudioRecorder/AudioRecorder';
+export * from './MessageInput/components/AudioRecorder/AudioRecordingButton';
+export * from './MessageInput/components/AudioRecorder/AudioRecordingInProgress';
+export * from './MessageInput/components/AudioRecorder/AudioRecordingLockIndicator';
+export * from './MessageInput/components/AudioRecorder/AudioRecordingPreview';
+export * from './MessageInput/components/AudioRecorder/AudioRecordingWaveform';
 export * from './MessageInput/CooldownTimer';
 export * from './MessageInput/FileUploadPreview';
 export * from './MessageInput/ImageUploadPreview';