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

package/src/native.ts

@@ -93,8 +93,6 @@ type HapticFeedbackMethod =
 type TriggerHaptic = (method: HapticFeedbackMethod) => void | never;
 export let triggerHaptic: TriggerHaptic = fail;
 
-export let SDK: string;
-
 export type PlaybackStatus = {
   didJustFinish: boolean;
   durationMillis: number;
@@ -106,6 +104,65 @@ export type PlaybackStatus = {
   positionMillis: number;
 };
 
+export type AVPlaybackStatusToSet = {
+  isLooping: boolean;
+  isMuted: boolean;
+  positionMillis: number;
+  progressUpdateIntervalMillis: number;
+  rate: number;
+  shouldCorrectPitch: boolean;
+  shouldPlay: boolean;
+  volume: number;
+};
+
+export let SDK: string;
+
+export type SoundOptions = {
+  basePathOrCallback?: string;
+  callback?: () => void;
+  filenameOrFile?: string;
+  initialStatus?: Partial<AVPlaybackStatusToSet>;
+  onPlaybackStatusUpdate?: (playbackStatus: PlaybackStatus) => void;
+  source?: { uri: string };
+};
+
+export type SoundReturnType = {
+  paused: boolean;
+  testID: string;
+  getDuration?: () => number;
+  isPlaying?: () => boolean;
+  onBuffer?: (props: { isBuffering: boolean }) => void;
+  onEnd?: () => void;
+  onLoad?: (payload: VideoPayloadData) => void;
+  onLoadStart?: () => void;
+  onPlaybackStatusUpdate?: (playbackStatus: PlaybackStatus) => void;
+  onProgress?: (data: VideoProgressData) => void;
+  onReadyForDisplay?: () => void;
+  pauseAsync?: () => void;
+  play?: () => void;
+  playAsync?: () => void;
+  replayAsync?: () => void;
+  resizeMode?: string;
+  seek?: (progress: number) => void;
+  setPositionAsync?: (millis: number) => void;
+  soundRef?: React.RefObject<SoundReturnType>;
+  stopAsync?: () => void;
+  style?: StyleProp<ViewStyle>;
+  unloadAsync?: () => void;
+  uri?: string;
+};
+
+export type SoundType = {
+  initializeSound: (
+    source?: { uri: string },
+    initialStatus?: Partial<AVPlaybackStatusToSet>,
+    onPlaybackStatusUpdate?: (playbackStatus: PlaybackStatus) => void,
+  ) => SoundReturnType | null;
+  Player: React.ComponentType<SoundReturnType> | null;
+};
+
+export let Sound: SoundType;
+
 export type VideoProgressData = {
   currentTime?: number;
   playableDuration?: number;
@@ -113,9 +170,9 @@ export type VideoProgressData = {
 };
 
 export type VideoPayloadData = {
+  duration: number;
   audioTracks?: { index: number; language: string; title: string; type: string }[];
   currentPosition?: number;
-  duration?: number;
   naturalSize?: { height: number; orientation: 'portrait' | 'landscape'; width: number };
   textTracks?: { index: number; language: string; title: string; type: string }[];
   videoTracks?: {
@@ -129,6 +186,7 @@ export type VideoPayloadData = {
 
 export type VideoType = {
   paused: boolean;
+  testID: string;
   uri: string;
   videoRef: React.RefObject<VideoType>;
   onBuffer?: (props: { isBuffering: boolean }) => void;
@@ -158,6 +216,7 @@ type Handlers = {
   saveFile?: SaveFile;
   SDK?: string;
   shareImage?: ShareImage;
+  Sound?: SoundType;
   takePhoto?: TakePhoto;
   triggerHaptic?: TriggerHaptic;
   Video?: React.ComponentType<VideoType>;
@@ -187,10 +246,6 @@ export const registerNativeHandlers = (handlers: Handlers) => {
     getPhotos = handlers.getPhotos;
   }
 
-  if (handlers.NetInfo) {
-    NetInfo = handlers.NetInfo;
-  }
-
   if (handlers.pickDocument) {
     pickDocument = handlers.pickDocument;
   }
@@ -207,6 +262,10 @@ export const registerNativeHandlers = (handlers: Handlers) => {
     shareImage = handlers.shareImage;
   }
 
+  if (handlers.Sound) {
+    Sound = handlers.Sound;
+  }
+
   if (handlers.takePhoto) {
     takePhoto = handlers.takePhoto;
   }
@@ -221,3 +280,4 @@ export const registerNativeHandlers = (handlers: Handlers) => {
 };
 
 export const isVideoPackageAvailable = () => !!Video;
+export const isAudioPackageAvailable = () => !!Sound.Player || !!Sound.initializeSound;

package/src/version.json

@@ -1,3 +1,3 @@
 {
-  "version": "4.11.1-beta.2"
+  "version": "4.12.0-beta.1"
 }

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

@@ -1 +0,0 @@
-{"version":3,"sources":["ProgressControl.tsx"],"names":["width","height","styles","StyleSheet","create","containerStyle","borderRadius","innerStyle","progressControlThumbStyle","backgroundColor","top","ProgressControlThumb","ProgressControl","React","memo","props","duration","onPlayPause","onProgressDrag","progress","theme","colors","grey_dark","white_snow","state","translateX","value","animatedStyles","thumbStyles","transform","onGestureEvent","onActive","event","translationX","onFinish","dragFinishLocationInSeconds","onStart","prevProps","nextProps"],"mappings":";;;;;;;AAAA;;AACA;;AACA;;AACA;;AAUA;;;;;;;;;AAOA,IAAMA,KAAK,GAAG,GAAd;AACA,IAAMC,MAAM,GAAG,CAAf;;AACA,IAAMC,MAAM,GAAGC,wBAAWC,MAAX,CAAkB;AAC/BC,EAAAA,cAAc,EAAE;AACdC,IAAAA,YAAY,EAAE,EADA;AAEdL,IAAAA,MAAM,EAANA,MAFc;AAGdD,IAAAA,KAAK,EAALA;AAHc,GADe;AAM/BO,EAAAA,UAAU,EAAE;AACVN,IAAAA,MAAM,EAANA;AADU,GANmB;AAS/BO,EAAAA,yBAAyB,EAAE;AACzBC,IAAAA,eAAe,EAAE,MADQ;AAEzBH,IAAAA,YAAY,EAAE,CAFW;AAGzBL,IAAAA,MAAM,EAAE,EAHiB;AAIzBS,IAAAA,GAAG,EAAE,CAAC,EAJmB;AAKzBV,IAAAA,KAAK,EAAE;AALkB;AATI,CAAlB,CAAf;;AAkBA,IAAMW,oBAAoB,GAAG,SAAvBA,oBAAuB;AAAA,SAAM,gCAAC,iBAAD;AAAM,IAAA,KAAK,EAAET,MAAM,CAACM,yBAApB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAAN;AAAA,CAA7B;;AAEO,IAAMI,eAA+C,GAAGC,kBAAMC,IAAN,CAC7D,UAACC,KAAD,EAAW;AACT,MAAQC,QAAR,GAA4DD,KAA5D,CAAQC,QAAR;AAAA,MAAkBC,WAAlB,GAA4DF,KAA5D,CAAkBE,WAAlB;AAAA,MAA+BC,cAA/B,GAA4DH,KAA5D,CAA+BG,cAA/B;AAAA,MAA+CC,QAA/C,GAA4DJ,KAA5D,CAA+CI,QAA/C;;AACA,kBAII,6BAJJ;AAAA,wCACEC,KADF,CAEIC,MAFJ;AAAA,MAEcC,SAFd,yBAEcA,SAFd;AAAA,MAEyBC,UAFzB,yBAEyBA,UAFzB;;AAMA,MAAMC,KAAK,GAAG,2CAAe,CAAf,CAAd;AACA,MAAMC,UAAU,GAAG,2CAAe,CAAf,CAAnB;AAEA,wBAAU,YAAM;AACdD,IAAAA,KAAK,CAACE,KAAN,GAAcP,QAAQ,GAAGnB,KAAzB;AACAyB,IAAAA,UAAU,CAACC,KAAX,GAAmBP,QAAQ,GAAGnB,KAA9B;AACD,GAHD,EAGG,CAACmB,QAAD,CAHH;AAKA,MAAMQ,cAAc,GAAG,6CAAiB;AAAA,WAAO;AAC7ClB,MAAAA,eAAe,EAAEc,UAD4B;AAE7CvB,MAAAA,KAAK,EAAEwB,KAAK,CAACE;AAFgC,KAAP;AAAA,GAAjB,CAAvB;AAKA,MAAME,WAAW,GAAG,6CAAiB;AAAA,WAAO;AAC1CC,MAAAA,SAAS,EAAE,CAAC;AAAEJ,QAAAA,UAAU,EAAED,KAAK,CAACE;AAApB,OAAD;AAD+B,KAAP;AAAA,GAAjB,CAApB;AAIA,MAAMI,cAAc,GAAG,sDACrB;AACEC,IAAAA,QAAQ,EAAE,kBAACC,KAAD,EAAW;AACnBR,MAAAA,KAAK,CAACE,KAAN,GAAcD,UAAU,CAACC,KAAX,GAAmBM,KAAK,CAACC,YAAvC;AACA,UAAIT,KAAK,CAACE,KAAN,GAAc1B,KAAlB,EAAyBwB,KAAK,CAACE,KAAN,GAAc1B,KAAd,CAAzB,KACK,IAAIwB,KAAK,CAACE,KAAN,GAAc,CAAlB,EAAqBF,KAAK,CAACE,KAAN,GAAc,CAAd;AAC3B,KALH;AAMEQ,IAAAA,QAAQ,EAAE,oBAAM;AACdT,MAAAA,UAAU,CAACC,KAAX,GAAmBF,KAAK,CAACE,KAAzB;AACA,UAAMS,2BAA2B,GAAIX,KAAK,CAACE,KAAN,GAAc1B,KAAf,GAAwBgB,QAA5D;AACA,0CAAQE,cAAR,EAAwBiB,2BAAxB;AACA,0CAAQlB,WAAR;AACD,KAXH;AAYEmB,IAAAA,OAAO,EAAE,mBAAM;AACb,0CAAQnB,WAAR;AACA,kDAAgBQ,UAAhB;AACAD,MAAAA,KAAK,CAACE,KAAN,GAAcD,UAAU,CAACC,KAAzB;AACD;AAhBH,GADqB,EAmBrB,CAACV,QAAD,CAnBqB,CAAvB;AAqBA,SACE,gCAAC,iBAAD;AAAM,IAAA,KAAK,EAAE,CAACd,MAAM,CAACG,cAAR,EAAwB;AAAEI,MAAAA,eAAe,EAAEa;AAAnB,KAAxB,CAAb;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,KACE,gCAAC,iCAAD,CAAU,IAAV;AAAe,IAAA,KAAK,EAAE,CAACpB,MAAM,CAACK,UAAR,EAAoBoB,cAApB,CAAtB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IADF,EAGE,gCAAC,4CAAD;AAAmB,IAAA,WAAW,EAAE,CAAhC;AAAmC,IAAA,cAAc,EAAEG,cAAnD;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,KACE,gCAAC,iCAAD,CAAU,IAAV;AAAe,IAAA,KAAK,EAAE,CAACF,WAAD,CAAtB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,KACE,gCAAC,oBAAD;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IADF,CADF,CAHF,CADF;AAWD,CA1D4D,EA2D7D,UAACS,SAAD,EAAYC,SAAZ,EAA0B;AACxB,MAAID,SAAS,CAACrB,QAAV,KAAuBsB,SAAS,CAACtB,QAAjC,IAA6CqB,SAAS,CAAClB,QAAV,KAAuBmB,SAAS,CAACnB,QAAlF,EACE,OAAO,IAAP,CADF,KAEK,OAAO,KAAP;AACN,CA/D4D,CAAxD","sourcesContent":["import React, { useEffect } from 'react';\nimport { StyleSheet, View } from 'react-native';\nimport { PanGestureHandler } from 'react-native-gesture-handler';\nimport Animated, {\n  cancelAnimation,\n  runOnJS,\n  useAnimatedGestureHandler,\n  useAnimatedStyle,\n  useSharedValue,\n} from 'react-native-reanimated';\n\nimport type { ImageGalleryFooterVideoControlProps } from './ImageGalleryFooter';\n\nimport { useTheme } from '../../../contexts/themeContext/ThemeContext';\n\ntype ProgressControlProps = Pick<\n  ImageGalleryFooterVideoControlProps,\n  'duration' | 'onPlayPause' | 'onProgressDrag' | 'progress'\n>;\n\nconst width = 180;\nconst height = 2;\nconst styles = StyleSheet.create({\n  containerStyle: {\n    borderRadius: 50,\n    height,\n    width,\n  },\n  innerStyle: {\n    height,\n  },\n  progressControlThumbStyle: {\n    backgroundColor: '#fff',\n    borderRadius: 5,\n    height: 20,\n    top: -11,\n    width: 4,\n  },\n});\n\nconst ProgressControlThumb = () => <View style={styles.progressControlThumbStyle} />;\n\nexport const ProgressControl: React.FC<ProgressControlProps> = React.memo(\n  (props) => {\n    const { duration, onPlayPause, onProgressDrag, progress } = props;\n    const {\n      theme: {\n        colors: { grey_dark, white_snow },\n      },\n    } = useTheme();\n\n    const state = useSharedValue(0);\n    const translateX = useSharedValue(0);\n\n    useEffect(() => {\n      state.value = progress * width;\n      translateX.value = progress * width;\n    }, [progress]);\n\n    const animatedStyles = useAnimatedStyle(() => ({\n      backgroundColor: white_snow,\n      width: state.value,\n    }));\n\n    const thumbStyles = useAnimatedStyle(() => ({\n      transform: [{ translateX: state.value }],\n    }));\n\n    const onGestureEvent = useAnimatedGestureHandler(\n      {\n        onActive: (event) => {\n          state.value = translateX.value + event.translationX;\n          if (state.value > width) state.value = width;\n          else if (state.value < 0) state.value = 0;\n        },\n        onFinish: () => {\n          translateX.value = state.value;\n          const dragFinishLocationInSeconds = (state.value / width) * duration;\n          runOnJS(onProgressDrag)(dragFinishLocationInSeconds);\n          runOnJS(onPlayPause)();\n        },\n        onStart: () => {\n          runOnJS(onPlayPause)();\n          cancelAnimation(translateX);\n          state.value = translateX.value;\n        },\n      },\n      [duration],\n    );\n    return (\n      <View style={[styles.containerStyle, { backgroundColor: grey_dark }]}>\n        <Animated.View style={[styles.innerStyle, animatedStyles]} />\n\n        <PanGestureHandler maxPointers={1} onGestureEvent={onGestureEvent}>\n          <Animated.View style={[thumbStyles]}>\n            <ProgressControlThumb />\n          </Animated.View>\n        </PanGestureHandler>\n      </View>\n    );\n  },\n  (prevProps, nextProps) => {\n    if (prevProps.duration === nextProps.duration && prevProps.progress === nextProps.progress)\n      return true;\n    else return false;\n  },\n);\n"]}

package/lib/module/components/ImageGallery/components/ProgressControl.js.map

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

package/lib/typescript/components/ImageGallery/components/ProgressControl.d.ts

@@ -1,5 +0,0 @@
-import React from 'react';
-import type { ImageGalleryFooterVideoControlProps } from './ImageGalleryFooter';
-declare type ProgressControlProps = Pick<ImageGalleryFooterVideoControlProps, 'duration' | 'onPlayPause' | 'onProgressDrag' | 'progress'>;
-export declare const ProgressControl: React.FC<ProgressControlProps>;
-export {};