stream-chat-react-native-core 6.3.1 → 6.4.0-beta.2

package/src/components/ProgressControl/WaveProgressBar.tsx

@@ -1,22 +1,50 @@
-import React, { useEffect, useMemo, useState } from 'react';
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import { Platform, Pressable, StyleProp, StyleSheet, View, ViewStyle } from 'react-native';
 import { Gesture, GestureDetector } from 'react-native-gesture-handler';
 import Animated, { runOnJS, 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 = {
+  /**
+   * The progress of the waveform in percentage
+   */
   progress: number;
+  /**
+   * The waveform data to be displayed
+   */
   waveformData: number[];
+  /**
+   * The number of amplitudes to display
+   */
   amplitudesCount?: number;
+  /**
+   * The color of the filled waveform
+   */
   filledColor?: string;
+  /**
+   * The function to be called when the user ends dragging the waveform
+   */
+  onEndDrag?: (progress: number) => void;
+  /**
+   * The function to be called when the user plays or pauses the audio
+   * @deprecated Use onStartDrag and onEndDrag instead
+   */
   onPlayPause?: (status?: boolean) => void;
+  /**
+   * The function to be called when the user is dragging the waveform
+   */
   onProgressDrag?: (progress: number) => void;
+  /**
+   * The function to be called when the user starts dragging the waveform
+   */
+  onStartDrag?: (progress: number) => void;
 };
 
 const WAVEFORM_WIDTH = 2;
+const WAVE_MAX_HEIGHT = 25;
+const WAVE_MIN_HEIGHT = 3;
 
 const ProgressControlThumb = ({ style }: { style?: StyleProp<ViewStyle> }) => {
   const {
@@ -43,61 +71,65 @@ const ProgressControlThumb = ({ style }: { style?: StyleProp<ViewStyle> }) => {
 
 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,
+      onEndDrag,
       onPlayPause,
       onProgressDrag,
+      onStartDrag,
       progress,
       waveformData,
     } = props;
+    const eachWaveformWidth = WAVEFORM_WIDTH * 2;
+    const fullWidth = (amplitudesCount - 1) * eachWaveformWidth;
+    const state = useSharedValue(progress);
+    const [currentWaveformProgress, setCurrentWaveformProgress] = useState<number>(0);
+
+    const waveFormNumberFromProgress = useCallback(
+      (progress: number) => {
+        'worklet';
+        const progressInPrecision = Number(progress.toFixed(2));
+        const progressInWaveformWidth = Number((progressInPrecision * fullWidth).toFixed(0));
+        const progressInWaveformNumber = Math.floor(progressInWaveformWidth / 4);
+        runOnJS(setCurrentWaveformProgress)(progressInWaveformNumber);
+      },
+      [fullWidth],
+    );
+
+    useEffect(() => {
+      waveFormNumberFromProgress(progress);
+    }, [progress, waveFormNumberFromProgress]);
+
     const {
       theme: {
         colors: { accent_blue, grey_dark },
         waveProgressBar: { container, thumb, waveform: waveformTheme },
       },
     } = useTheme();
-    const state = useSharedValue(0);
 
     const pan = Gesture.Pan()
       .maxPointers(1)
-      .onStart(() => {
+      .onStart((event) => {
+        const currentProgress = (state.value + event.x) / fullWidth;
+        state.value = Math.max(0, Math.min(currentProgress, 1));
+        if (onStartDrag) runOnJS(onStartDrag)(state.value);
         if (onPlayPause) runOnJS(onPlayPause)(true);
-        state.value = endPosition;
       })
-      .onChange((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');
-        }
+      .onUpdate((event) => {
+        const currentProgress = (state.value + event.x) / fullWidth;
+        state.value = Math.max(0, Math.min(currentProgress, 1));
+        if (onProgressDrag) runOnJS(onProgressDrag)(state.value);
       })
-      .onEnd(() => {
-        const stage = Math.floor(state.value / (WAVEFORM_WIDTH * 2));
-        runOnJS(setEndPosition)(state.value);
-        if (onProgressDrag) runOnJS(onProgressDrag)(stage);
+      .onEnd((event) => {
+        const currentProgress = (state.value + event.x) / fullWidth;
+        state.value = Math.max(0, Math.min(currentProgress, 1));
+        if (onEndDrag) runOnJS(onEndDrag)(state.value);
         if (onPlayPause) runOnJS(onPlayPause)(false);
       });
 
-    useEffect(() => {
-      const stageProgress = Math.floor(
-        progress * (showProgressDrag ? amplitudesCount - 1 : amplitudesCount),
-      );
-      state.value = stageProgress * (WAVEFORM_WIDTH * 2);
-      setEndPosition(state.value);
-      setCurrentWaveformProgress(stageProgress);
-      // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [progress]);
-
     const stringifiedWaveformData = waveformData.toString();
 
     const resampledWaveformData = useMemo(
@@ -106,35 +138,41 @@ export const WaveProgressBar = React.memo(
       [amplitudesCount, stringifiedWaveformData],
     );
 
-    const thumbStyles = useAnimatedStyle(() => ({
-      position: 'absolute',
-      transform: [{ translateX: state.value }],
-    }));
+    const thumbStyles = useAnimatedStyle(
+      () => ({
+        position: 'absolute',
+        transform: [{ translateX: currentWaveformProgress * eachWaveformWidth }],
+      }),
+      [currentWaveformProgress, fullWidth],
+    );
 
     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 && (
-          <GestureDetector gesture={pan}>
+      <GestureDetector gesture={pan}>
+        <View style={[styles.container, container]}>
+          {resampledWaveformData.map((waveform, index) => (
+            <Animated.View
+              key={index}
+              style={[
+                styles.waveform,
+                {
+                  backgroundColor:
+                    index < currentWaveformProgress ? filledColor || accent_blue : grey_dark,
+                  height:
+                    waveform * WAVE_MAX_HEIGHT > WAVE_MIN_HEIGHT
+                      ? waveform * WAVE_MAX_HEIGHT
+                      : WAVE_MIN_HEIGHT,
+                },
+                waveformTheme,
+              ]}
+            />
+          ))}
+          {showProgressDrag && (onEndDrag || onProgressDrag) && (
             <Animated.View style={[thumbStyles, thumb]}>
               <ProgressControlThumb />
             </Animated.View>
-          </GestureDetector>
-        )}
-      </View>
+          )}
+        </View>
+      </GestureDetector>
     );
   },
   (prevProps, nextProps) => {
@@ -147,14 +185,13 @@ export const WaveProgressBar = React.memo(
 const styles = StyleSheet.create({
   container: {
     alignItems: 'center',
-    alignSelf: 'center',
     flexDirection: 'row',
   },
   progressControlThumbStyle: {
     borderRadius: 5,
     borderWidth: 0.2,
     elevation: 6,
-    height: 25,
+    height: 28,
     shadowOffset: {
       height: 3,
       width: 0,
@@ -166,7 +203,7 @@ const styles = StyleSheet.create({
   waveform: {
     alignSelf: 'center',
     borderRadius: 2,
-    marginHorizontal: WAVEFORM_WIDTH / 2,
+    marginRight: WAVEFORM_WIDTH,
     width: WAVEFORM_WIDTH,
   },
 });

package/src/components/index.ts

@@ -47,6 +47,7 @@ export * from './ChannelList/ChannelListMessenger';
 export * from './ChannelList/hooks/listeners/useAddedToChannelNotification';
 export * from './ChannelList/hooks/listeners/useChannelDeleted';
 export * from './ChannelList/hooks/listeners/useChannelHidden';
+export * from './ChannelList/hooks/listeners/useChannelMemberUpdated';
 export * from './ChannelList/hooks/listeners/useChannelTruncated';
 export * from './ChannelList/hooks/listeners/useChannelUpdated';
 export * from './ChannelList/hooks/listeners/useNewMessage';
@@ -55,6 +56,7 @@ export * from './ChannelList/hooks/listeners/useRemovedFromChannelNotification';
 export * from './ChannelList/hooks/listeners/useUserPresence';
 export * from './ChannelList/hooks/useCreateChannelsContext';
 export * from './ChannelList/hooks/usePaginatedChannels';
+export * from './ChannelList/hooks/useChannelMembershipState';
 export * from './ChannelList/Skeleton';
 
 export * from './ChannelPreview/ChannelAvatar';

package/src/contexts/themeContext/utils/theme.ts

@@ -236,6 +236,7 @@ export type Theme = {
     };
     videoControl: {
       durationTextStyle: TextStyle;
+      progressDurationText: TextStyle;
       roundedView: ViewStyle;
       videoContainer: ViewStyle;
     };
@@ -1007,6 +1008,7 @@ export const defaultTheme: Theme = {
     },
     videoControl: {
       durationTextStyle: {},
+      progressDurationText: {},
       roundedView: {},
       videoContainer: {},
     },

package/src/hooks/useAudioPlayer.ts

@@ -0,0 +1,59 @@
+import { SDK, SoundReturnType } from '../native';
+
+export type UseSoundPlayerProps = {
+  soundRef: React.MutableRefObject<SoundReturnType | null>;
+};
+
+/**
+ * This hook is used to play, pause, seek and change audio speed.
+ * It handles both Expo CLI and Native CLI.
+ */
+export const useAudioPlayer = (props: UseSoundPlayerProps) => {
+  const { soundRef } = props;
+
+  const isExpoCLI = SDK === 'stream-chat-expo';
+
+  const playAudio = async () => {
+    if (isExpoCLI) {
+      if (soundRef.current?.playAsync) await soundRef.current.playAsync();
+    } else {
+      if (soundRef.current?.resume) soundRef.current.resume();
+    }
+  };
+
+  const pauseAudio = async () => {
+    if (isExpoCLI) {
+      if (soundRef.current?.pauseAsync) await soundRef.current.pauseAsync();
+    } else {
+      if (soundRef.current?.pause) soundRef.current.pause();
+    }
+  };
+
+  const seekAudio = async (currentTime: number) => {
+    if (isExpoCLI) {
+      if (currentTime === 0) {
+        // If currentTime is 0, we should replay the video from 0th position.
+        if (soundRef.current?.replayAsync) {
+          await soundRef.current.replayAsync({
+            positionMillis: 0,
+            shouldPlay: false,
+          });
+        }
+      } else {
+        if (soundRef.current?.setPositionAsync) {
+          await soundRef.current.setPositionAsync(currentTime * 1000);
+        }
+      }
+    } else {
+      if (soundRef.current?.seek) soundRef.current.seek(currentTime);
+    }
+  };
+
+  const changeAudioSpeed = async (speed: number) => {
+    // Handled through prop `rate` in `Sound.Player`
+    if (!isExpoCLI) return;
+    if (soundRef.current?.setRateAsync) await soundRef.current.setRateAsync(speed);
+  };
+
+  return { changeAudioSpeed, pauseAudio, playAudio, seekAudio };
+};

package/src/icons/Archieve.tsx

@@ -0,0 +1,10 @@
+import React from 'react';
+import Svg, { Path } from 'react-native-svg';
+
+import { IconProps } from './utils/base';
+
+export const Archieve: React.FC<IconProps> = ({ height = 512, width = 512, ...rest }) => (
+  <Svg height={height} viewBox={'0 0 512 512'} width={width} {...rest}>
+    <Path d='M32 32l448 0c17.7 0 32 14.3 32 32l0 32c0 17.7-14.3 32-32 32L32 128C14.3 128 0 113.7 0 96L0 64C0 46.3 14.3 32 32 32zm0 128l448 0 0 256c0 35.3-28.7 64-64 64L96 480c-35.3 0-64-28.7-64-64l0-256zm128 80c0 8.8 7.2 16 16 16l160 0c8.8 0 16-7.2 16-16s-7.2-16-16-16l-160 0c-8.8 0-16 7.2-16 16z' />
+  </Svg>
+);

package/src/icons/Pause.tsx

@@ -6,10 +6,7 @@ import { IconProps } from './utils/base';
 type Props = IconProps;
 
 export const Pause = ({ height, width, ...rest }: Props) => (
-  <Svg height={height} viewBox={`0 0 ${height} ${width}`} width={width} {...rest}>
-    <Path
-      d='M8 25.3333H13.3333V6.66663H8V25.3333ZM18.6667 6.66663V25.3333H24V6.66663H18.6667Z'
-      {...rest}
-    />
+  <Svg height={height} viewBox={`0 0 24 24`} width={width} {...rest}>
+    <Path d='M6 19H10V5H6V19ZM14 5V19H18V5H14Z' {...rest} />
   </Svg>
 );

package/src/icons/Play.tsx

@@ -7,7 +7,7 @@ import { IconProps } from './utils/base';
 type Props = IconProps;
 
 export const Play = ({ height, width, ...rest }: Props) => (
-  <Svg height={height} viewBox={`0 0 ${height} ${width}`} width={width} {...rest}>
-    <Path d='M8.66602 6.66663V25.3333L23.3327 16L8.66602 6.66663Z' {...rest} />
+  <Svg height={height} viewBox={`0 0 24 24`} width={width} {...rest}>
+    <Path d='M6.5 5V19L17.5 12L6.5 5Z' {...rest} />
   </Svg>
 );

package/src/icons/index.ts

@@ -1,5 +1,6 @@
 export * from './utils/base';
 
+export * from './Archieve';
 export * from './ArrowRight';
 export * from './ArrowLeft';
 export * from './ArrowUp';

package/src/native.ts

@@ -114,6 +114,7 @@ export type PlaybackStatus = {
   isLooping: boolean;
   isMuted: boolean;
   isPlaying: boolean;
+  isSeeking: boolean;
   positionMillis: number;
   shouldPlay: boolean;
 };
@@ -141,7 +142,6 @@ export type SoundOptions = {
 };
 
 export type SoundReturnType = {
-  paused: boolean;
   testID: string;
   getDuration?: () => number;
   isPlaying?: () => boolean;
@@ -149,18 +149,21 @@ export type SoundReturnType = {
   onEnd?: () => void;
   onLoad?: (payload: VideoPayloadData) => void;
   onLoadStart?: () => void;
+  onPlaybackStateChanged?: (playbackState: PlaybackStatus) => void;
   onPlaybackStatusUpdate?: (playbackStatus: PlaybackStatus) => void;
   onProgress?: (data: VideoProgressData) => void;
   onReadyForDisplay?: () => void;
+  onSeek?: (seekResponse: VideoSeekResponse) => void;
   pause?: () => void;
   pauseAsync?: () => void;
+  paused?: boolean;
   play?: () => void;
   playAsync?: () => void;
   rate?: number;
-  replayAsync?: () => void;
+  replayAsync?: (status: Partial<AVPlaybackStatusToSet>) => void;
   resizeMode?: string;
   resume?: () => void;
-  seek?: (progress: number) => void;
+  seek?: (progress: number, tolerance?: number) => void;
   setPositionAsync?: (millis: number) => void;
   setProgressUpdateIntervalAsync?: (progressUpdateIntervalMillis: number) => void;
   setRateAsync?: (rate: number) => void;
@@ -241,6 +244,11 @@ export let Audio: AudioType | undefined;
 
 export let Sound: SoundType;
 
+export type VideoSeekResponse = {
+  currentTime: number;
+  seekTime: number;
+};
+
 export type VideoProgressData = {
   currentTime: number;
   seekableDuration: number;

package/src/types/types.ts

@@ -1,4 +1,10 @@
-import type { ChannelState, ExtendableGenerics, LiteralStringForUnion } from 'stream-chat';
+import type {
+  ChannelFilters,
+  ChannelSort,
+  ChannelState,
+  ExtendableGenerics,
+  LiteralStringForUnion,
+} from 'stream-chat';
 
 import type { FileStateValue } from '../utils/utils';
 
@@ -97,6 +103,13 @@ export interface DefaultStreamChatGenerics extends ExtendableGenerics {
   userType: DefaultUserType;
 }
 
+export type ChannelListEventListenerOptions<
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
+> = {
+  filters?: ChannelFilters<StreamChatGenerics>;
+  sort?: ChannelSort<StreamChatGenerics>;
+};
+
 export type UnknownType = Record<string, unknown>;
 
 export type ValueOf<T> = T[keyof T];

package/src/version.json

@@ -1,3 +1,3 @@
 {
-  "version": "6.3.1"
+  "version": "6.4.0-beta.2"
 }