stream-chat-react-native-core 5.1.0 → 5.1.1-beta.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (39) hide show
  1. package/lib/commonjs/components/ImageGallery/ImageGallery.js +106 -100
  2. package/lib/commonjs/components/ImageGallery/ImageGallery.js.map +1 -1
  3. package/lib/commonjs/components/ImageGallery/components/AnimatedGalleryVideo.js +14 -16
  4. package/lib/commonjs/components/ImageGallery/components/AnimatedGalleryVideo.js.map +1 -1
  5. package/lib/commonjs/components/ImageGallery/components/ImageGalleryFooter.js +13 -16
  6. package/lib/commonjs/components/ImageGallery/components/ImageGalleryFooter.js.map +1 -1
  7. package/lib/commonjs/components/ImageGallery/components/ImageGalleryVideoControl.js +6 -6
  8. package/lib/commonjs/components/ImageGallery/components/ImageGalleryVideoControl.js.map +1 -1
  9. package/lib/commonjs/components/ProgressControl/ProgressControl.js +6 -6
  10. package/lib/commonjs/components/ProgressControl/ProgressControl.js.map +1 -1
  11. package/lib/commonjs/native.js.map +1 -1
  12. package/lib/commonjs/version.json +1 -1
  13. package/lib/module/components/ImageGallery/ImageGallery.js +106 -100
  14. package/lib/module/components/ImageGallery/ImageGallery.js.map +1 -1
  15. package/lib/module/components/ImageGallery/components/AnimatedGalleryVideo.js +14 -16
  16. package/lib/module/components/ImageGallery/components/AnimatedGalleryVideo.js.map +1 -1
  17. package/lib/module/components/ImageGallery/components/ImageGalleryFooter.js +13 -16
  18. package/lib/module/components/ImageGallery/components/ImageGalleryFooter.js.map +1 -1
  19. package/lib/module/components/ImageGallery/components/ImageGalleryVideoControl.js +6 -6
  20. package/lib/module/components/ImageGallery/components/ImageGalleryVideoControl.js.map +1 -1
  21. package/lib/module/components/ProgressControl/ProgressControl.js +6 -6
  22. package/lib/module/components/ProgressControl/ProgressControl.js.map +1 -1
  23. package/lib/module/native.js.map +1 -1
  24. package/lib/module/version.json +1 -1
  25. package/lib/typescript/components/ImageGallery/ImageGallery.d.ts +3 -0
  26. package/lib/typescript/components/ImageGallery/components/AnimatedGalleryVideo.d.ts +5 -3
  27. package/lib/typescript/components/ImageGallery/components/ImageGalleryFooter.d.ts +1 -3
  28. package/lib/typescript/components/ProgressControl/ProgressControl.d.ts +1 -1
  29. package/lib/typescript/native.d.ts +3 -2
  30. package/package.json +1 -1
  31. package/src/components/ImageGallery/ImageGallery.tsx +87 -65
  32. package/src/components/ImageGallery/__tests__/AnimatedVideoGallery.test.tsx +2 -2
  33. package/src/components/ImageGallery/__tests__/ImageGallery.test.tsx +40 -28
  34. package/src/components/ImageGallery/components/AnimatedGalleryVideo.tsx +16 -9
  35. package/src/components/ImageGallery/components/ImageGalleryFooter.tsx +1 -6
  36. package/src/components/ImageGallery/components/ImageGalleryVideoControl.tsx +5 -6
  37. package/src/components/ProgressControl/ProgressControl.tsx +8 -4
  38. package/src/native.ts +3 -2
  39. package/src/version.json +1 -1
@@ -46,7 +46,6 @@ var styles = _reactNative.StyleSheet.create({
46
46
  var ImageGalleryVideoControl = _react["default"].memo(function (props) {
47
47
  var duration = props.duration,
48
48
  onPlayPause = props.onPlayPause,
49
- onProgressDrag = props.onProgressDrag,
50
49
  paused = props.paused,
51
50
  progress = props.progress;
52
51
  var videoDuration = duration ? duration / 3600 >= 1 ? _dayjs["default"].duration(duration, 'second').format('HH:mm:ss') : _dayjs["default"].duration(duration, 'second').format('mm:ss') : null;
@@ -56,6 +55,8 @@ var ImageGalleryVideoControl = _react["default"].memo(function (props) {
56
55
  var _useTheme = (0, _ThemeContext.useTheme)(),
57
56
  _useTheme$theme = _useTheme.theme,
58
57
  _useTheme$theme$color = _useTheme$theme.colors,
58
+ accent_blue = _useTheme$theme$color.accent_blue,
59
+ black = _useTheme$theme$color.black,
59
60
  static_black = _useTheme$theme$color.static_black,
60
61
  static_white = _useTheme$theme$color.static_white,
61
62
  _useTheme$theme$image = _useTheme$theme.imageGallery.videoControl,
@@ -117,7 +118,7 @@ var ImageGalleryVideoControl = _react["default"].memo(function (props) {
117
118
  }))), _react["default"].createElement(_reactNative.Text, {
118
119
  accessibilityLabel: "Progress Duration",
119
120
  style: [styles.durationTextStyle, durationTextStyle, {
120
- color: static_white
121
+ color: black
121
122
  }],
122
123
  __self: _this,
123
124
  __source: {
@@ -127,9 +128,8 @@ var ImageGalleryVideoControl = _react["default"].memo(function (props) {
127
128
  }
128
129
  }, progressDuration ? progressDuration : '00:00'), _react["default"].createElement(_ProgressControl.ProgressControl, {
129
130
  duration: duration,
130
- filledColor: static_white,
131
+ filledColor: accent_blue,
131
132
  onPlayPause: onPlayPause,
132
- onProgressDrag: onProgressDrag,
133
133
  progress: progress,
134
134
  testID: 'progress-control',
135
135
  width: 180,
@@ -142,12 +142,12 @@ var ImageGalleryVideoControl = _react["default"].memo(function (props) {
142
142
  }), _react["default"].createElement(_reactNative.Text, {
143
143
  accessibilityLabel: "Video Duration",
144
144
  style: [styles.durationTextStyle, durationTextStyle, {
145
- color: static_white
145
+ color: black
146
146
  }],
147
147
  __self: _this,
148
148
  __source: {
149
149
  fileName: _jsxFileName,
150
- lineNumber: 99,
150
+ lineNumber: 98,
151
151
  columnNumber: 9
152
152
  }
153
153
  }, videoDuration ? videoDuration : '00:00'));
@@ -1 +1 @@
1
- {"version":3,"sources":["ImageGalleryVideoControl.tsx"],"names":["styles","StyleSheet","create","durationTextStyle","fontWeight","roundedView","alignItems","borderRadius","display","elevation","height","justifyContent","width","videoContainer","backgroundColor","flexDirection","padding","ImageGalleryVideoControl","React","memo","props","duration","onPlayPause","onProgressDrag","paused","progress","videoDuration","dayjs","format","progressValueInSeconds","progressDuration","theme","colors","static_black","static_white","imageGallery","videoControl","color","prevProps","nextProps","displayName"],"mappings":"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","sourcesContent":["import React from 'react';\nimport { StyleSheet, Text, TouchableOpacity, View } from 'react-native';\n\nimport dayjs from 'dayjs';\n\nimport type { ImageGalleryFooterVideoControlProps } from './ImageGalleryFooter';\n\nimport { useTheme } from '../../../contexts/themeContext/ThemeContext';\n\nimport { Pause, Play } from '../../../icons';\nimport { ProgressControl } from '../../ProgressControl/ProgressControl';\n\nconst styles = StyleSheet.create({\n durationTextStyle: {\n fontWeight: 'bold',\n },\n roundedView: {\n alignItems: 'center',\n borderRadius: 50,\n display: 'flex',\n elevation: 2,\n height: 36,\n justifyContent: 'center',\n width: 36,\n },\n videoContainer: {\n alignItems: 'center',\n backgroundColor: 'rgba(52, 52, 52, 0.1)',\n display: 'flex',\n flexDirection: 'row',\n justifyContent: 'space-between',\n padding: 10,\n },\n});\n\nexport const ImageGalleryVideoControl: React.FC<ImageGalleryFooterVideoControlProps> = React.memo(\n (props) => {\n const { duration, onPlayPause, onProgressDrag, paused, progress } = props;\n\n const videoDuration = duration\n ? duration / 3600 >= 1\n ? dayjs.duration(duration, 'second').format('HH:mm:ss')\n : dayjs.duration(duration, 'second').format('mm:ss')\n : null;\n\n const progressValueInSeconds = progress * duration;\n\n const progressDuration = progressValueInSeconds\n ? progressValueInSeconds / 3600 >= 1\n ? dayjs.duration(progressValueInSeconds, 'second').format('HH:mm:ss')\n : dayjs.duration(progressValueInSeconds, 'second').format('mm:ss')\n : null;\n\n const {\n theme: {\n colors: { static_black, static_white },\n imageGallery: {\n videoControl: { durationTextStyle, roundedView, videoContainer },\n },\n },\n } = useTheme();\n\n return (\n <View style={[styles.videoContainer, videoContainer]}>\n <TouchableOpacity\n accessibilityLabel='Play Pause Button'\n onPress={() => {\n onPlayPause();\n }}\n >\n <View style={[styles.roundedView, roundedView, { backgroundColor: static_white }]}>\n {paused ? (\n <Play accessibilityLabel='Play Icon' height={24} pathFill={static_black} width={24} />\n ) : (\n <Pause\n accessibilityLabel='Pause Icon'\n height={24}\n pathFill={static_black}\n width={24}\n />\n )}\n </View>\n </TouchableOpacity>\n <Text\n accessibilityLabel='Progress Duration'\n style={[styles.durationTextStyle, durationTextStyle, { color: static_white }]}\n >\n {progressDuration ? progressDuration : '00:00'}\n </Text>\n <ProgressControl\n duration={duration}\n filledColor={static_white}\n onPlayPause={onPlayPause}\n onProgressDrag={onProgressDrag}\n progress={progress}\n testID={'progress-control'}\n width={180}\n />\n <Text\n accessibilityLabel='Video Duration'\n style={[styles.durationTextStyle, durationTextStyle, { color: static_white }]}\n >\n {videoDuration ? videoDuration : '00:00'}\n </Text>\n </View>\n );\n },\n (prevProps, nextProps) => {\n if (\n prevProps.duration === nextProps.duration &&\n prevProps.paused === nextProps.paused &&\n prevProps.progress === nextProps.progress\n ) {\n return true;\n } else {\n return false;\n }\n },\n);\n\nImageGalleryVideoControl.displayName = 'ImageGalleryVideoControl{imageGallery{videoControl}}';\n"]}
1
+ {"version":3,"sources":["ImageGalleryVideoControl.tsx"],"names":["styles","StyleSheet","create","durationTextStyle","fontWeight","roundedView","alignItems","borderRadius","display","elevation","height","justifyContent","width","videoContainer","backgroundColor","flexDirection","padding","ImageGalleryVideoControl","React","memo","props","duration","onPlayPause","paused","progress","videoDuration","dayjs","format","progressValueInSeconds","progressDuration","theme","colors","accent_blue","black","static_black","static_white","imageGallery","videoControl","color","prevProps","nextProps","displayName"],"mappings":"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","sourcesContent":["import React from 'react';\nimport { StyleSheet, Text, TouchableOpacity, View } from 'react-native';\n\nimport dayjs from 'dayjs';\n\nimport type { ImageGalleryFooterVideoControlProps } from './ImageGalleryFooter';\n\nimport { useTheme } from '../../../contexts/themeContext/ThemeContext';\n\nimport { Pause, Play } from '../../../icons';\nimport { ProgressControl } from '../../ProgressControl/ProgressControl';\n\nconst styles = StyleSheet.create({\n durationTextStyle: {\n fontWeight: 'bold',\n },\n roundedView: {\n alignItems: 'center',\n borderRadius: 50,\n display: 'flex',\n elevation: 2,\n height: 36,\n justifyContent: 'center',\n width: 36,\n },\n videoContainer: {\n alignItems: 'center',\n backgroundColor: 'rgba(52, 52, 52, 0.1)',\n display: 'flex',\n flexDirection: 'row',\n justifyContent: 'space-between',\n padding: 10,\n },\n});\n\nexport const ImageGalleryVideoControl: React.FC<ImageGalleryFooterVideoControlProps> = React.memo(\n (props) => {\n const { duration, onPlayPause, paused, progress } = props;\n\n const videoDuration = duration\n ? duration / 3600 >= 1\n ? dayjs.duration(duration, 'second').format('HH:mm:ss')\n : dayjs.duration(duration, 'second').format('mm:ss')\n : null;\n\n const progressValueInSeconds = progress * duration;\n\n const progressDuration = progressValueInSeconds\n ? progressValueInSeconds / 3600 >= 1\n ? dayjs.duration(progressValueInSeconds, 'second').format('HH:mm:ss')\n : dayjs.duration(progressValueInSeconds, 'second').format('mm:ss')\n : null;\n\n const {\n theme: {\n colors: { accent_blue, black, static_black, static_white },\n imageGallery: {\n videoControl: { durationTextStyle, roundedView, videoContainer },\n },\n },\n } = useTheme();\n\n return (\n <View style={[styles.videoContainer, videoContainer]}>\n <TouchableOpacity\n accessibilityLabel='Play Pause Button'\n onPress={() => {\n onPlayPause();\n }}\n >\n <View style={[styles.roundedView, roundedView, { backgroundColor: static_white }]}>\n {paused ? (\n <Play accessibilityLabel='Play Icon' height={24} pathFill={static_black} width={24} />\n ) : (\n <Pause\n accessibilityLabel='Pause Icon'\n height={24}\n pathFill={static_black}\n width={24}\n />\n )}\n </View>\n </TouchableOpacity>\n <Text\n accessibilityLabel='Progress Duration'\n style={[styles.durationTextStyle, durationTextStyle, { color: black }]}\n >\n {progressDuration ? progressDuration : '00:00'}\n </Text>\n <ProgressControl\n duration={duration}\n filledColor={accent_blue}\n onPlayPause={onPlayPause}\n progress={progress}\n testID={'progress-control'}\n width={180}\n />\n <Text\n accessibilityLabel='Video Duration'\n style={[styles.durationTextStyle, durationTextStyle, { color: black }]}\n >\n {videoDuration ? videoDuration : '00:00'}\n </Text>\n </View>\n );\n },\n (prevProps, nextProps) => {\n if (\n prevProps.duration === nextProps.duration &&\n prevProps.paused === nextProps.paused &&\n prevProps.progress === nextProps.progress\n ) {\n return true;\n } else {\n return false;\n }\n },\n);\n\nImageGalleryVideoControl.displayName = 'ImageGalleryVideoControl{imageGallery{videoControl}}';\n"]}
@@ -104,7 +104,7 @@ var ProgressControl = _react["default"].memo(function (props) {
104
104
  onFinish: function onFinish() {
105
105
  translateX.value = state.value;
106
106
  var dragFinishLocationInSeconds = state.value / width * duration;
107
- (0, _reactNativeReanimated.runOnJS)(onProgressDrag)(dragFinishLocationInSeconds);
107
+ if (onProgressDrag) (0, _reactNativeReanimated.runOnJS)(onProgressDrag)(dragFinishLocationInSeconds);
108
108
  (0, _reactNativeReanimated.runOnJS)(onPlayPause)(false);
109
109
  },
110
110
  onStart: function onStart() {
@@ -134,7 +134,7 @@ var ProgressControl = _react["default"].memo(function (props) {
134
134
  }
135
135
  }), _react["default"].createElement(_reactNativeGestureHandler.PanGestureHandler, {
136
136
  maxPointers: 1,
137
- onGestureEvent: onGestureEvent,
137
+ onGestureEvent: onProgressDrag ? onGestureEvent : undefined,
138
138
  testID: testID,
139
139
  __self: _this,
140
140
  __source: {
@@ -147,15 +147,15 @@ var ProgressControl = _react["default"].memo(function (props) {
147
147
  __self: _this,
148
148
  __source: {
149
149
  fileName: _jsxFileName,
150
- lineNumber: 113,
150
+ lineNumber: 117,
151
151
  columnNumber: 11
152
152
  }
153
- }, _react["default"].createElement(ProgressControlThumb, {
153
+ }, onProgressDrag && _react["default"].createElement(ProgressControlThumb, {
154
154
  __self: _this,
155
155
  __source: {
156
156
  fileName: _jsxFileName,
157
- lineNumber: 114,
158
- columnNumber: 13
157
+ lineNumber: 118,
158
+ columnNumber: 32
159
159
  }
160
160
  }))));
161
161
  }, function (prevProps, nextProps) {
@@ -1 +1 @@
1
- {"version":3,"sources":["ProgressControl.tsx"],"names":["height","styles","StyleSheet","create","containerStyle","borderRadius","innerStyle","progressControlThumbStyle","elevation","shadowOffset","width","shadowOpacity","shadowRadius","top","ProgressControlThumb","black","theme","colors","backgroundColor","shadowColor","ProgressControl","React","memo","props","duration","filledColor","onPlayPause","onProgressDrag","progress","testID","grey_dark","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 { useTheme } from '../../contexts/themeContext/ThemeContext';\n\nexport type ProgressControlProps = {\n duration: number;\n filledColor: string;\n onPlayPause: (status?: boolean) => void;\n onProgressDrag: (progress: number) => void;\n progress: number;\n testID: string;\n width: number;\n};\n\nconst height = 2;\nconst styles = StyleSheet.create({\n containerStyle: {\n borderRadius: 50,\n height,\n },\n innerStyle: {\n height,\n },\n progressControlThumbStyle: {\n borderRadius: 5,\n elevation: 6,\n height: 20,\n shadowOffset: {\n height: 3,\n width: 0,\n },\n shadowOpacity: 0.27,\n shadowRadius: 4.65,\n top: -11,\n width: 5,\n },\n});\n\nconst ProgressControlThumb = () => {\n const {\n theme: {\n colors: { black },\n },\n } = useTheme();\n return (\n <View\n style={[styles.progressControlThumbStyle, { backgroundColor: '#ffffff', shadowColor: black }]}\n />\n );\n};\n\nexport const ProgressControl: React.FC<ProgressControlProps> = React.memo(\n (props) => {\n const { duration, filledColor, onPlayPause, onProgressDrag, progress, testID, width } = props;\n const {\n theme: {\n colors: { grey_dark },\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: filledColor,\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)(false);\n },\n onStart: () => {\n runOnJS(onPlayPause)(true);\n cancelAnimation(translateX);\n state.value = translateX.value;\n },\n },\n [duration],\n );\n return (\n <View style={[styles.containerStyle, { backgroundColor: grey_dark, width }]}>\n <Animated.View style={[styles.innerStyle, animatedStyles]} />\n\n <PanGestureHandler maxPointers={1} onGestureEvent={onGestureEvent} testID={testID}>\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"]}
1
+ {"version":3,"sources":["ProgressControl.tsx"],"names":["height","styles","StyleSheet","create","containerStyle","borderRadius","innerStyle","progressControlThumbStyle","elevation","shadowOffset","width","shadowOpacity","shadowRadius","top","ProgressControlThumb","black","theme","colors","backgroundColor","shadowColor","ProgressControl","React","memo","props","duration","filledColor","onPlayPause","onProgressDrag","progress","testID","grey_dark","state","translateX","value","animatedStyles","thumbStyles","transform","onGestureEvent","onActive","event","translationX","onFinish","dragFinishLocationInSeconds","onStart","undefined","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 { useTheme } from '../../contexts/themeContext/ThemeContext';\n\nexport type ProgressControlProps = {\n duration: number;\n filledColor: string;\n onPlayPause: (status?: boolean) => void;\n progress: number;\n testID: string;\n width: number;\n onProgressDrag?: (progress: number) => void;\n};\n\nconst height = 2;\nconst styles = StyleSheet.create({\n containerStyle: {\n borderRadius: 50,\n height,\n },\n innerStyle: {\n height,\n },\n progressControlThumbStyle: {\n borderRadius: 5,\n elevation: 6,\n height: 20,\n shadowOffset: {\n height: 3,\n width: 0,\n },\n shadowOpacity: 0.27,\n shadowRadius: 4.65,\n top: -11,\n width: 5,\n },\n});\n\nconst ProgressControlThumb = () => {\n const {\n theme: {\n colors: { black },\n },\n } = useTheme();\n return (\n <View\n style={[styles.progressControlThumbStyle, { backgroundColor: '#ffffff', shadowColor: black }]}\n />\n );\n};\n\nexport const ProgressControl: React.FC<ProgressControlProps> = React.memo(\n (props) => {\n const { duration, filledColor, onPlayPause, onProgressDrag, progress, testID, width } = props;\n const {\n theme: {\n colors: { grey_dark },\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: filledColor,\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 if (onProgressDrag) runOnJS(onProgressDrag)(dragFinishLocationInSeconds);\n runOnJS(onPlayPause)(false);\n },\n onStart: () => {\n runOnJS(onPlayPause)(true);\n cancelAnimation(translateX);\n state.value = translateX.value;\n },\n },\n [duration],\n );\n return (\n <View style={[styles.containerStyle, { backgroundColor: grey_dark, width }]}>\n <Animated.View style={[styles.innerStyle, animatedStyles]} />\n\n <PanGestureHandler\n maxPointers={1}\n onGestureEvent={onProgressDrag ? onGestureEvent : undefined}\n testID={testID}\n >\n <Animated.View style={[thumbStyles]}>\n {onProgressDrag && <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"]}
@@ -1 +1 @@
1
- {"version":3,"sources":["native.ts"],"names":["fail","Error","compressImage","deleteFile","getLocalAssetUri","getPhotos","FlatList","DefaultFlatList","NetInfo","addEventListener","fetch","pickDocument","saveFile","shareImage","takePhoto","triggerHaptic","SDK","Sound","Video","registerNativeHandlers","handlers","isVideoPackageAvailable","isAudioPackageAvailable","Player","initializeSound"],"mappings":";;;;;AACA;;AAMA,IAAMA,IAAI,GAAG,SAAPA,IAAO,GAAM;AACjB,QAAMC,KAAK,CACT,mGADS,CAAX;AAGD,CAJD;;AAiBO,IAAIC,aAA4B,GAAGF,IAAnC;;AAGA,IAAIG,UAAsB,GAAGH,IAA7B;;AAGA,IAAII,gBAAkC,GAAGJ,IAAzC;;AASA,IAAIK,SAAoB,GAAGL,IAA3B;;AAOA,IAAIM,QAAQ,GAAGC,qBAAf;;AAEA,IAAIC,OAAgB,GAAG;AAC5BC,EAAAA,gBAAgB,EAAET,IADU;AAE5BU,EAAAA,KAAK,EAAEV;AAFqB,CAAvB;;AAWA,IAAIW,YAA0B,GAAGX,IAAjC;;AAOA,IAAIY,QAAkB,GAAGZ,IAAzB;;AAOA,IAAIa,UAAsB,GAAGb,IAA7B;;AASA,IAAIc,SAAoB,GAAGd,IAA3B;;AAWA,IAAIe,aAA4B,GAAGf,IAAnC;;AAwBA,IAAIgB,GAAJ;;AA8CA,IAAIC,KAAJ;;AA0CA,IAAIC,KAAJ;;;AAmBA,IAAMC,sBAAsB,GAAG,SAAzBA,sBAAyB,CAACC,QAAD,EAAwB;AAC5D,MAAIA,QAAQ,CAAClB,aAAb,EAA4B;AAC1B,4BAAAA,aAAa,GAAGkB,QAAQ,CAAClB,aAAzB;AACD;;AAED,MAAIkB,QAAQ,CAACjB,UAAb,EAAyB;AACvB,yBAAAA,UAAU,GAAGiB,QAAQ,CAACjB,UAAtB;AACD;;AAED,MAAIiB,QAAQ,CAACd,QAAb,EAAuB;AACrB,uBAAAA,QAAQ,GAAGc,QAAQ,CAACd,QAApB;AACD;;AACD,MAAIc,QAAQ,CAACZ,OAAb,EAAsB;AACpB,sBAAAA,OAAO,GAAGY,QAAQ,CAACZ,OAAnB;AACD;;AAED,MAAIY,QAAQ,CAAChB,gBAAb,EAA+B;AAC7B,+BAAAA,gBAAgB,GAAGgB,QAAQ,CAAChB,gBAA5B;AACD;;AAED,MAAIgB,QAAQ,CAACf,SAAb,EAAwB;AACtB,wBAAAA,SAAS,GAAGe,QAAQ,CAACf,SAArB;AACD;;AAED,MAAIe,QAAQ,CAACT,YAAb,EAA2B;AACzB,2BAAAA,YAAY,GAAGS,QAAQ,CAACT,YAAxB;AACD;;AAED,MAAIS,QAAQ,CAACR,QAAb,EAAuB;AACrB,uBAAAA,QAAQ,GAAGQ,QAAQ,CAACR,QAApB;AACD;;AAED,MAAIQ,QAAQ,CAACJ,GAAb,EAAkB;AAChB,kBAAAA,GAAG,GAAGI,QAAQ,CAACJ,GAAf;AACD;;AAED,MAAII,QAAQ,CAACP,UAAb,EAAyB;AACvB,yBAAAA,UAAU,GAAGO,QAAQ,CAACP,UAAtB;AACD;;AAED,MAAIO,QAAQ,CAACH,KAAb,EAAoB;AAClB,oBAAAA,KAAK,GAAGG,QAAQ,CAACH,KAAjB;AACD;;AAED,MAAIG,QAAQ,CAACN,SAAb,EAAwB;AACtB,wBAAAA,SAAS,GAAGM,QAAQ,CAACN,SAArB;AACD;;AAED,MAAIM,QAAQ,CAACL,aAAb,EAA4B;AAC1B,4BAAAA,aAAa,GAAGK,QAAQ,CAACL,aAAzB;AACD;;AAED,MAAIK,QAAQ,CAACF,KAAb,EAAoB;AAClB,oBAAAA,KAAK,GAAGE,QAAQ,CAACF,KAAjB;AACD;AACF,CAvDM;;;;AAyDA,IAAMG,uBAAuB,GAAG,SAA1BA,uBAA0B;AAAA,SAAM,CAAC,CAACH,KAAR;AAAA,CAAhC;;;;AACA,IAAMI,uBAAuB,GAAG,SAA1BA,uBAA0B;AAAA,SAAM,CAAC,CAACL,KAAK,CAACM,MAAR,IAAkB,CAAC,CAACN,KAAK,CAACO,eAAhC;AAAA,CAAhC","sourcesContent":["import type React from 'react';\nimport { FlatList as DefaultFlatList, StyleProp, ViewStyle } from 'react-native';\n\nimport type { NetInfoSubscription } from '@react-native-community/netinfo';\n\nimport type { Asset, File } from './types/types';\n\nconst fail = () => {\n throw Error(\n 'Native handler was not registered, you should import stream-chat-expo or stream-chat-react-native',\n );\n};\n\ntype CompressImage = ({\n compressImageQuality,\n height,\n uri,\n width,\n}: {\n compressImageQuality: number;\n height: number;\n uri: string;\n width: number;\n}) => Promise<string> | never;\nexport let compressImage: CompressImage = fail;\n\ntype DeleteFile = ({ uri }: { uri: string }) => Promise<boolean> | never;\nexport let deleteFile: DeleteFile = fail;\n\ntype GetLocalAssetUri = (uriOrAssetId: string) => never;\nexport let getLocalAssetUri: GetLocalAssetUri = fail;\n\ntype GetPhotos = ({ after, first }: { first: number; after?: string }) =>\n | Promise<{\n assets: Array<Omit<Asset, 'source'> & { source: 'picker' }>;\n endCursor: string;\n hasNextPage: boolean;\n }>\n | never;\nexport let getPhotos: GetPhotos = fail;\n\ntype NetInfo = {\n addEventListener: (listener: (isConnected: boolean) => void) => NetInfoSubscription | never;\n fetch: (requestedInterface?: string | undefined) => Promise<boolean> | never;\n};\n\nexport let FlatList = DefaultFlatList;\n\nexport let NetInfo: NetInfo = {\n addEventListener: fail,\n fetch: fail,\n};\n\ntype PickDocument = ({ maxNumberOfFiles }: { maxNumberOfFiles?: number }) =>\n | Promise<{\n cancelled: boolean;\n docs?: File[];\n }>\n | never;\nexport let pickDocument: PickDocument = fail;\n\ntype SaveFileOptions = {\n fileName: string;\n fromUrl: string;\n};\ntype SaveFile = (options: SaveFileOptions) => Promise<string> | never;\nexport let saveFile: SaveFile = fail;\n\ntype ShareOptions = {\n type?: string;\n url?: string;\n};\ntype ShareImage = (options: ShareOptions) => Promise<boolean> | never;\nexport let shareImage: ShareImage = fail;\n\ntype Photo =\n | (Omit<Asset, 'source'> & {\n cancelled: false;\n source: 'camera';\n })\n | { cancelled: true };\ntype TakePhoto = (options: { compressImageQuality?: number }) => Promise<Photo> | never;\nexport let takePhoto: TakePhoto = fail;\n\ntype HapticFeedbackMethod =\n | 'impactHeavy'\n | 'impactLight'\n | 'impactMedium'\n | 'notificationError'\n | 'notificationSuccess'\n | 'notificationWarning'\n | 'selection';\ntype TriggerHaptic = (method: HapticFeedbackMethod) => void | never;\nexport let triggerHaptic: TriggerHaptic = fail;\n\nexport type PlaybackStatus = {\n didJustFinish: boolean;\n durationMillis: number;\n error: string;\n isBuffering: boolean;\n isLoaded: boolean;\n isLooping: boolean;\n isPlaying: boolean;\n positionMillis: number;\n};\n\nexport type AVPlaybackStatusToSet = {\n isLooping: boolean;\n isMuted: boolean;\n positionMillis: number;\n progressUpdateIntervalMillis: number;\n rate: number;\n shouldCorrectPitch: boolean;\n shouldPlay: boolean;\n volume: number;\n};\n\nexport let SDK: string;\n\nexport type SoundOptions = {\n basePathOrCallback?: string;\n callback?: () => void;\n filenameOrFile?: string;\n initialStatus?: Partial<AVPlaybackStatusToSet>;\n onPlaybackStatusUpdate?: (playbackStatus: PlaybackStatus) => void;\n source?: { uri: string };\n};\n\nexport type SoundReturnType = {\n paused: boolean;\n testID: string;\n getDuration?: () => number;\n isPlaying?: () => boolean;\n onBuffer?: (props: { isBuffering: boolean }) => void;\n onEnd?: () => void;\n onLoad?: (payload: VideoPayloadData) => void;\n onLoadStart?: () => void;\n onPlaybackStatusUpdate?: (playbackStatus: PlaybackStatus) => void;\n onProgress?: (data: VideoProgressData) => void;\n onReadyForDisplay?: () => void;\n pauseAsync?: () => void;\n play?: () => void;\n playAsync?: () => void;\n replayAsync?: () => void;\n resizeMode?: string;\n seek?: (progress: number) => void;\n setPositionAsync?: (millis: number) => void;\n soundRef?: React.RefObject<SoundReturnType>;\n stopAsync?: () => void;\n style?: StyleProp<ViewStyle>;\n unloadAsync?: () => void;\n uri?: string;\n};\n\nexport type SoundType = {\n initializeSound: (\n source?: { uri: string },\n initialStatus?: Partial<AVPlaybackStatusToSet>,\n onPlaybackStatusUpdate?: (playbackStatus: PlaybackStatus) => void,\n ) => SoundReturnType | null;\n Player: React.ComponentType<SoundReturnType> | null;\n};\n\nexport let Sound: SoundType;\n\nexport type VideoProgressData = {\n currentTime?: number;\n playableDuration?: number;\n seekableDuration?: number;\n};\n\nexport type VideoPayloadData = {\n duration: number;\n audioTracks?: { index: number; language: string; title: string; type: string }[];\n currentPosition?: number;\n naturalSize?: { height: number; orientation: 'portrait' | 'landscape'; width: number };\n textTracks?: { index: number; language: string; title: string; type: string }[];\n videoTracks?: {\n bitrate: number;\n codecs: string;\n height: number;\n trackId: number;\n width: number;\n }[];\n};\n\nexport type VideoType = {\n paused: boolean;\n testID: string;\n uri: string;\n videoRef: React.RefObject<VideoType>;\n onBuffer?: (props: { isBuffering: boolean }) => void;\n onEnd?: () => void;\n onLoad?: (payload: VideoPayloadData) => void;\n onLoadStart?: () => void;\n onPlaybackStatusUpdate?: (playbackStatus: PlaybackStatus) => void;\n onProgress?: (data: VideoProgressData) => void;\n onReadyForDisplay?: () => void;\n replayAsync?: () => void;\n resizeMode?: string;\n seek?: (progress: number) => void;\n setPositionAsync?: (position: number) => void;\n style?: StyleProp<ViewStyle>;\n};\n\nexport let Video: React.ComponentType<VideoType>;\n\ntype Handlers = {\n compressImage?: CompressImage;\n deleteFile?: DeleteFile;\n FlatList?: typeof DefaultFlatList;\n getLocalAssetUri?: GetLocalAssetUri;\n getPhotos?: GetPhotos;\n NetInfo?: NetInfo;\n pickDocument?: PickDocument;\n saveFile?: SaveFile;\n SDK?: string;\n shareImage?: ShareImage;\n Sound?: SoundType;\n takePhoto?: TakePhoto;\n triggerHaptic?: TriggerHaptic;\n Video?: React.ComponentType<VideoType>;\n};\n\nexport const registerNativeHandlers = (handlers: Handlers) => {\n if (handlers.compressImage) {\n compressImage = handlers.compressImage;\n }\n\n if (handlers.deleteFile) {\n deleteFile = handlers.deleteFile;\n }\n\n if (handlers.FlatList) {\n FlatList = handlers.FlatList;\n }\n if (handlers.NetInfo) {\n NetInfo = handlers.NetInfo;\n }\n\n if (handlers.getLocalAssetUri) {\n getLocalAssetUri = handlers.getLocalAssetUri;\n }\n\n if (handlers.getPhotos) {\n getPhotos = handlers.getPhotos;\n }\n\n if (handlers.pickDocument) {\n pickDocument = handlers.pickDocument;\n }\n\n if (handlers.saveFile) {\n saveFile = handlers.saveFile;\n }\n\n if (handlers.SDK) {\n SDK = handlers.SDK;\n }\n\n if (handlers.shareImage) {\n shareImage = handlers.shareImage;\n }\n\n if (handlers.Sound) {\n Sound = handlers.Sound;\n }\n\n if (handlers.takePhoto) {\n takePhoto = handlers.takePhoto;\n }\n\n if (handlers.triggerHaptic) {\n triggerHaptic = handlers.triggerHaptic;\n }\n\n if (handlers.Video) {\n Video = handlers.Video;\n }\n};\n\nexport const isVideoPackageAvailable = () => !!Video;\nexport const isAudioPackageAvailable = () => !!Sound.Player || !!Sound.initializeSound;\n"]}
1
+ {"version":3,"sources":["native.ts"],"names":["fail","Error","compressImage","deleteFile","getLocalAssetUri","getPhotos","FlatList","DefaultFlatList","NetInfo","addEventListener","fetch","pickDocument","saveFile","shareImage","takePhoto","triggerHaptic","SDK","Sound","Video","registerNativeHandlers","handlers","isVideoPackageAvailable","isAudioPackageAvailable","Player","initializeSound"],"mappings":";;;;;AACA;;AAMA,IAAMA,IAAI,GAAG,SAAPA,IAAO,GAAM;AACjB,QAAMC,KAAK,CACT,mGADS,CAAX;AAGD,CAJD;;AAiBO,IAAIC,aAA4B,GAAGF,IAAnC;;AAGA,IAAIG,UAAsB,GAAGH,IAA7B;;AAGA,IAAII,gBAAkC,GAAGJ,IAAzC;;AASA,IAAIK,SAAoB,GAAGL,IAA3B;;AAOA,IAAIM,QAAQ,GAAGC,qBAAf;;AAEA,IAAIC,OAAgB,GAAG;AAC5BC,EAAAA,gBAAgB,EAAET,IADU;AAE5BU,EAAAA,KAAK,EAAEV;AAFqB,CAAvB;;AAWA,IAAIW,YAA0B,GAAGX,IAAjC;;AAOA,IAAIY,QAAkB,GAAGZ,IAAzB;;AAOA,IAAIa,UAAsB,GAAGb,IAA7B;;AASA,IAAIc,SAAoB,GAAGd,IAA3B;;AAWA,IAAIe,aAA4B,GAAGf,IAAnC;;AAwBA,IAAIgB,GAAJ;;AA8CA,IAAIC,KAAJ;;AA2CA,IAAIC,KAAJ;;;AAmBA,IAAMC,sBAAsB,GAAG,SAAzBA,sBAAyB,CAACC,QAAD,EAAwB;AAC5D,MAAIA,QAAQ,CAAClB,aAAb,EAA4B;AAC1B,4BAAAA,aAAa,GAAGkB,QAAQ,CAAClB,aAAzB;AACD;;AAED,MAAIkB,QAAQ,CAACjB,UAAb,EAAyB;AACvB,yBAAAA,UAAU,GAAGiB,QAAQ,CAACjB,UAAtB;AACD;;AAED,MAAIiB,QAAQ,CAACd,QAAb,EAAuB;AACrB,uBAAAA,QAAQ,GAAGc,QAAQ,CAACd,QAApB;AACD;;AACD,MAAIc,QAAQ,CAACZ,OAAb,EAAsB;AACpB,sBAAAA,OAAO,GAAGY,QAAQ,CAACZ,OAAnB;AACD;;AAED,MAAIY,QAAQ,CAAChB,gBAAb,EAA+B;AAC7B,+BAAAA,gBAAgB,GAAGgB,QAAQ,CAAChB,gBAA5B;AACD;;AAED,MAAIgB,QAAQ,CAACf,SAAb,EAAwB;AACtB,wBAAAA,SAAS,GAAGe,QAAQ,CAACf,SAArB;AACD;;AAED,MAAIe,QAAQ,CAACT,YAAb,EAA2B;AACzB,2BAAAA,YAAY,GAAGS,QAAQ,CAACT,YAAxB;AACD;;AAED,MAAIS,QAAQ,CAACR,QAAb,EAAuB;AACrB,uBAAAA,QAAQ,GAAGQ,QAAQ,CAACR,QAApB;AACD;;AAED,MAAIQ,QAAQ,CAACJ,GAAb,EAAkB;AAChB,kBAAAA,GAAG,GAAGI,QAAQ,CAACJ,GAAf;AACD;;AAED,MAAII,QAAQ,CAACP,UAAb,EAAyB;AACvB,yBAAAA,UAAU,GAAGO,QAAQ,CAACP,UAAtB;AACD;;AAED,MAAIO,QAAQ,CAACH,KAAb,EAAoB;AAClB,oBAAAA,KAAK,GAAGG,QAAQ,CAACH,KAAjB;AACD;;AAED,MAAIG,QAAQ,CAACN,SAAb,EAAwB;AACtB,wBAAAA,SAAS,GAAGM,QAAQ,CAACN,SAArB;AACD;;AAED,MAAIM,QAAQ,CAACL,aAAb,EAA4B;AAC1B,4BAAAA,aAAa,GAAGK,QAAQ,CAACL,aAAzB;AACD;;AAED,MAAIK,QAAQ,CAACF,KAAb,EAAoB;AAClB,oBAAAA,KAAK,GAAGE,QAAQ,CAACF,KAAjB;AACD;AACF,CAvDM;;;;AAyDA,IAAMG,uBAAuB,GAAG,SAA1BA,uBAA0B;AAAA,SAAM,CAAC,CAACH,KAAR;AAAA,CAAhC;;;;AACA,IAAMI,uBAAuB,GAAG,SAA1BA,uBAA0B;AAAA,SAAM,CAAC,CAACL,KAAK,CAACM,MAAR,IAAkB,CAAC,CAACN,KAAK,CAACO,eAAhC;AAAA,CAAhC","sourcesContent":["import type React from 'react';\nimport { FlatList as DefaultFlatList, StyleProp, ViewStyle } from 'react-native';\n\nimport type { NetInfoSubscription } from '@react-native-community/netinfo';\n\nimport type { Asset, File } from './types/types';\n\nconst fail = () => {\n throw Error(\n 'Native handler was not registered, you should import stream-chat-expo or stream-chat-react-native',\n );\n};\n\ntype CompressImage = ({\n compressImageQuality,\n height,\n uri,\n width,\n}: {\n compressImageQuality: number;\n height: number;\n uri: string;\n width: number;\n}) => Promise<string> | never;\nexport let compressImage: CompressImage = fail;\n\ntype DeleteFile = ({ uri }: { uri: string }) => Promise<boolean> | never;\nexport let deleteFile: DeleteFile = fail;\n\ntype GetLocalAssetUri = (uriOrAssetId: string) => never;\nexport let getLocalAssetUri: GetLocalAssetUri = fail;\n\ntype GetPhotos = ({ after, first }: { first: number; after?: string }) =>\n | Promise<{\n assets: Array<Omit<Asset, 'source'> & { source: 'picker' }>;\n endCursor: string;\n hasNextPage: boolean;\n }>\n | never;\nexport let getPhotos: GetPhotos = fail;\n\ntype NetInfo = {\n addEventListener: (listener: (isConnected: boolean) => void) => NetInfoSubscription | never;\n fetch: (requestedInterface?: string | undefined) => Promise<boolean> | never;\n};\n\nexport let FlatList = DefaultFlatList;\n\nexport let NetInfo: NetInfo = {\n addEventListener: fail,\n fetch: fail,\n};\n\ntype PickDocument = ({ maxNumberOfFiles }: { maxNumberOfFiles?: number }) =>\n | Promise<{\n cancelled: boolean;\n docs?: File[];\n }>\n | never;\nexport let pickDocument: PickDocument = fail;\n\ntype SaveFileOptions = {\n fileName: string;\n fromUrl: string;\n};\ntype SaveFile = (options: SaveFileOptions) => Promise<string> | never;\nexport let saveFile: SaveFile = fail;\n\ntype ShareOptions = {\n type?: string;\n url?: string;\n};\ntype ShareImage = (options: ShareOptions) => Promise<boolean> | never;\nexport let shareImage: ShareImage = fail;\n\ntype Photo =\n | (Omit<Asset, 'source'> & {\n cancelled: false;\n source: 'camera';\n })\n | { cancelled: true };\ntype TakePhoto = (options: { compressImageQuality?: number }) => Promise<Photo> | never;\nexport let takePhoto: TakePhoto = fail;\n\ntype HapticFeedbackMethod =\n | 'impactHeavy'\n | 'impactLight'\n | 'impactMedium'\n | 'notificationError'\n | 'notificationSuccess'\n | 'notificationWarning'\n | 'selection';\ntype TriggerHaptic = (method: HapticFeedbackMethod) => void | never;\nexport let triggerHaptic: TriggerHaptic = fail;\n\nexport type PlaybackStatus = {\n didJustFinish: boolean;\n durationMillis: number;\n error: string;\n isBuffering: boolean;\n isLoaded: boolean;\n isLooping: boolean;\n isPlaying: boolean;\n positionMillis: number;\n};\n\nexport type AVPlaybackStatusToSet = {\n isLooping: boolean;\n isMuted: boolean;\n positionMillis: number;\n progressUpdateIntervalMillis: number;\n rate: number;\n shouldCorrectPitch: boolean;\n shouldPlay: boolean;\n volume: number;\n};\n\nexport let SDK: string;\n\nexport type SoundOptions = {\n basePathOrCallback?: string;\n callback?: () => void;\n filenameOrFile?: string;\n initialStatus?: Partial<AVPlaybackStatusToSet>;\n onPlaybackStatusUpdate?: (playbackStatus: PlaybackStatus) => void;\n source?: { uri: string };\n};\n\nexport type SoundReturnType = {\n paused: boolean;\n testID: string;\n getDuration?: () => number;\n isPlaying?: () => boolean;\n onBuffer?: (props: { isBuffering: boolean }) => void;\n onEnd?: () => void;\n onLoad?: (payload: VideoPayloadData) => void;\n onLoadStart?: () => void;\n onPlaybackStatusUpdate?: (playbackStatus: PlaybackStatus) => void;\n onProgress?: (data: VideoProgressData) => void;\n onReadyForDisplay?: () => void;\n pauseAsync?: () => void;\n play?: () => void;\n playAsync?: () => void;\n replayAsync?: () => void;\n resizeMode?: string;\n seek?: (progress: number) => void;\n setPositionAsync?: (millis: number) => void;\n soundRef?: React.RefObject<SoundReturnType>;\n stopAsync?: () => void;\n style?: StyleProp<ViewStyle>;\n unloadAsync?: () => void;\n uri?: string;\n};\n\nexport type SoundType = {\n initializeSound: (\n source?: { uri: string },\n initialStatus?: Partial<AVPlaybackStatusToSet>,\n onPlaybackStatusUpdate?: (playbackStatus: PlaybackStatus) => void,\n ) => SoundReturnType | null;\n Player: React.ComponentType<SoundReturnType> | null;\n};\n\nexport let Sound: SoundType;\n\nexport type VideoProgressData = {\n currentTime: number;\n seekableDuration: number;\n playableDuration?: number;\n};\n\nexport type VideoPayloadData = {\n duration: number;\n audioTracks?: { index: number; language: string; title: string; type: string }[];\n currentPosition?: number;\n naturalSize?: { height: number; orientation: 'portrait' | 'landscape'; width: number };\n textTracks?: { index: number; language: string; title: string; type: string }[];\n videoTracks?: {\n bitrate: number;\n codecs: string;\n height: number;\n trackId: number;\n width: number;\n }[];\n};\n\nexport type VideoType = {\n paused: boolean;\n testID: string;\n uri: string;\n videoRef: React.RefObject<VideoType>;\n onBuffer?: (props: { isBuffering: boolean }) => void;\n onEnd?: () => void;\n onLoad?: (payload: VideoPayloadData) => void;\n onLoadStart?: () => void;\n onPlaybackStatusUpdate?: (playbackStatus: PlaybackStatus) => void;\n onProgress?: (data: VideoProgressData) => void;\n onReadyForDisplay?: () => void;\n repeat?: boolean;\n replayAsync?: () => void;\n resizeMode?: string;\n seek?: (progress: number) => void;\n setPositionAsync?: (position: number) => void;\n style?: StyleProp<ViewStyle>;\n};\n\nexport let Video: React.ComponentType<VideoType>;\n\ntype Handlers = {\n compressImage?: CompressImage;\n deleteFile?: DeleteFile;\n FlatList?: typeof DefaultFlatList;\n getLocalAssetUri?: GetLocalAssetUri;\n getPhotos?: GetPhotos;\n NetInfo?: NetInfo;\n pickDocument?: PickDocument;\n saveFile?: SaveFile;\n SDK?: string;\n shareImage?: ShareImage;\n Sound?: SoundType;\n takePhoto?: TakePhoto;\n triggerHaptic?: TriggerHaptic;\n Video?: React.ComponentType<VideoType>;\n};\n\nexport const registerNativeHandlers = (handlers: Handlers) => {\n if (handlers.compressImage) {\n compressImage = handlers.compressImage;\n }\n\n if (handlers.deleteFile) {\n deleteFile = handlers.deleteFile;\n }\n\n if (handlers.FlatList) {\n FlatList = handlers.FlatList;\n }\n if (handlers.NetInfo) {\n NetInfo = handlers.NetInfo;\n }\n\n if (handlers.getLocalAssetUri) {\n getLocalAssetUri = handlers.getLocalAssetUri;\n }\n\n if (handlers.getPhotos) {\n getPhotos = handlers.getPhotos;\n }\n\n if (handlers.pickDocument) {\n pickDocument = handlers.pickDocument;\n }\n\n if (handlers.saveFile) {\n saveFile = handlers.saveFile;\n }\n\n if (handlers.SDK) {\n SDK = handlers.SDK;\n }\n\n if (handlers.shareImage) {\n shareImage = handlers.shareImage;\n }\n\n if (handlers.Sound) {\n Sound = handlers.Sound;\n }\n\n if (handlers.takePhoto) {\n takePhoto = handlers.takePhoto;\n }\n\n if (handlers.triggerHaptic) {\n triggerHaptic = handlers.triggerHaptic;\n }\n\n if (handlers.Video) {\n Video = handlers.Video;\n }\n};\n\nexport const isVideoPackageAvailable = () => !!Video;\nexport const isAudioPackageAvailable = () => !!Sound.Player || !!Sound.initializeSound;\n"]}
@@ -1,3 +1,3 @@
1
1
  {
2
- "version": "5.1.0"
2
+ "version": "5.1.1-beta.1"
3
3
  }
@@ -70,10 +70,13 @@ export declare type Photo<StreamChatGenerics extends DefaultStreamChatGenerics =
70
70
  uri: string;
71
71
  channelId?: string;
72
72
  created_at?: string | Date;
73
+ duration?: number;
73
74
  messageId?: string;
74
75
  mime_type?: string;
75
76
  original_height?: number;
76
77
  original_width?: number;
78
+ paused?: boolean;
79
+ progress?: number;
77
80
  type?: string;
78
81
  user?: UserResponse<StreamChatGenerics> | null;
79
82
  user_id?: string;
@@ -2,11 +2,12 @@ import React from 'react';
2
2
  import { ViewStyle } from 'react-native';
3
3
  import type { StyleProp } from 'react-native';
4
4
  import Animated from 'react-native-reanimated';
5
- import { VideoPayloadData, VideoProgressData, VideoType } from '../../../native';
5
+ import { VideoType } from '../../../native';
6
6
  export declare type AnimatedGalleryVideoType = {
7
+ attachmentId: string;
7
8
  handleEnd: () => void;
8
- handleLoad: (payload: VideoPayloadData) => void;
9
- handleProgress: (data: VideoProgressData) => void;
9
+ handleLoad: (index: string, duration: number) => void;
10
+ handleProgress: (index: string, progress: number, hasEnd?: boolean) => void;
10
11
  index: number;
11
12
  offsetScale: Animated.SharedValue<number>;
12
13
  paused: boolean;
@@ -21,6 +22,7 @@ export declare type AnimatedGalleryVideoType = {
21
22
  translateX: Animated.SharedValue<number>;
22
23
  translateY: Animated.SharedValue<number>;
23
24
  videoRef: React.RefObject<VideoType>;
25
+ repeat?: boolean;
24
26
  style?: StyleProp<ViewStyle>;
25
27
  };
26
28
  export declare const AnimatedGalleryVideo: React.FC<AnimatedGalleryVideoType>;
@@ -11,11 +11,10 @@ export declare type ImageGalleryFooterCustomComponent<StreamChatGenerics extends
11
11
  export declare type ImageGalleryFooterVideoControlProps = {
12
12
  duration: number;
13
13
  onPlayPause: (status?: boolean) => void;
14
- onProgressDrag: (progress: number) => void;
15
14
  paused: boolean;
16
15
  progress: number;
17
16
  };
18
- export declare type ImageGalleryFooterVideoControlComponent = ({ duration, onPlayPause, onProgressDrag, paused, progress, }: ImageGalleryFooterVideoControlProps) => React.ReactElement | null;
17
+ export declare type ImageGalleryFooterVideoControlComponent = ({ duration, onPlayPause, paused, progress, }: ImageGalleryFooterVideoControlProps) => React.ReactElement | null;
19
18
  export declare type ImageGalleryFooterCustomComponentProps<StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics> = {
20
19
  centerElement?: ImageGalleryFooterCustomComponent<StreamChatGenerics>;
21
20
  GridIcon?: React.ReactElement;
@@ -28,7 +27,6 @@ declare type ImageGalleryFooterPropsWithContext<StreamChatGenerics extends Defau
28
27
  accessibilityLabel: string;
29
28
  duration: number;
30
29
  onPlayPause: () => void;
31
- onProgressDrag: (progress: number) => void;
32
30
  opacity: Animated.SharedValue<number>;
33
31
  openGridView: () => void;
34
32
  paused: boolean;
@@ -3,9 +3,9 @@ export declare type ProgressControlProps = {
3
3
  duration: number;
4
4
  filledColor: string;
5
5
  onPlayPause: (status?: boolean) => void;
6
- onProgressDrag: (progress: number) => void;
7
6
  progress: number;
8
7
  testID: string;
9
8
  width: number;
9
+ onProgressDrag?: (progress: number) => void;
10
10
  };
11
11
  export declare const ProgressControl: React.FC<ProgressControlProps>;
@@ -130,9 +130,9 @@ export declare type SoundType = {
130
130
  };
131
131
  export declare let Sound: SoundType;
132
132
  export declare type VideoProgressData = {
133
- currentTime?: number;
133
+ currentTime: number;
134
+ seekableDuration: number;
134
135
  playableDuration?: number;
135
- seekableDuration?: number;
136
136
  };
137
137
  export declare type VideoPayloadData = {
138
138
  duration: number;
@@ -176,6 +176,7 @@ export declare type VideoType = {
176
176
  onPlaybackStatusUpdate?: (playbackStatus: PlaybackStatus) => void;
177
177
  onProgress?: (data: VideoProgressData) => void;
178
178
  onReadyForDisplay?: () => void;
179
+ repeat?: boolean;
179
180
  replayAsync?: () => void;
180
181
  resizeMode?: string;
181
182
  seek?: (progress: number) => void;
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "stream-chat-react-native-core",
3
3
  "description": "The official React Native and Expo components for Stream Chat, a service for building chat applications",
4
- "version": "5.1.0",
4
+ "version": "5.1.1-beta.1",
5
5
  "author": {
6
6
  "company": "Stream.io Inc",
7
7
  "name": "Stream.io Inc"
@@ -55,12 +55,7 @@ import {
55
55
  useOverlayContext,
56
56
  } from '../../contexts/overlayContext/OverlayContext';
57
57
  import { useTheme } from '../../contexts/themeContext/ThemeContext';
58
- import {
59
- isVideoPackageAvailable,
60
- VideoPayloadData,
61
- VideoProgressData,
62
- VideoType,
63
- } from '../../native';
58
+ import { isVideoPackageAvailable, VideoType } from '../../native';
64
59
  import type { DefaultStreamChatGenerics } from '../../types/types';
65
60
  import { getResizedImageUrl } from '../../utils/getResizedImageUrl';
66
61
  import { getUrlOfImageAttachment } from '../../utils/getUrlOfImageAttachment';
@@ -151,9 +146,9 @@ export const ImageGallery = <
151
146
  numberOfImageGalleryGridColumns,
152
147
  overlayOpacity,
153
148
  } = props;
154
- const [paused, setPaused] = useState<boolean>(false);
155
- const [progress, setProgress] = useState<number>(0);
156
- const [duration, setDuration] = useState<number>(0);
149
+ const [imageGalleryAttachments, setImageGalleryAttachments] = useState<
150
+ Photo<StreamChatGenerics>[]
151
+ >([]);
157
152
  const {
158
153
  theme: {
159
154
  colors: { white_snow },
@@ -282,11 +277,14 @@ export const ImageGallery = <
282
277
  return {
283
278
  channelId: cur.cid,
284
279
  created_at: cur.created_at,
280
+ duration: 0,
285
281
  id: `photoId-${cur.id}-${imageUrl}`,
286
282
  messageId: cur.id,
287
283
  mime_type: a.type === 'giphy' ? getGiphyMimeType(giphyURL ?? '') : a.mime_type,
288
284
  original_height: a.original_height,
289
285
  original_width: a.original_width,
286
+ paused: true,
287
+ progress: 0,
290
288
  type: a.type,
291
289
  uri:
292
290
  a.type === 'giphy'
@@ -312,6 +310,10 @@ export const ImageGallery = <
312
310
  */
313
311
  const photoLength = photos.length;
314
312
 
313
+ useEffect(() => {
314
+ setImageGalleryAttachments(photos);
315
+ }, []);
316
+
315
317
  /**
316
318
  * The URL for the images may differ because of dimensions passed as
317
319
  * part of the query.
@@ -338,10 +340,6 @@ export const ImageGallery = <
338
340
  stripQueryFromUrl(photo.uri) === stripQueryFromUrl(selectedMessage?.url || ''),
339
341
  );
340
342
 
341
- if (photoLength > 1) {
342
- setPaused(true);
343
- }
344
-
345
343
  runOnUI(updatePosition)(newIndex);
346
344
  }, [selectedMessage, photoLength]);
347
345
 
@@ -351,10 +349,11 @@ export const ImageGallery = <
351
349
  * to the proper scaled height based on the width being restricted to the
352
350
  * screen width when the dimensions are received.
353
351
  */
354
- const uriForCurrentImage = photos[selectedIndex]?.uri;
352
+ const uriForCurrentImage = imageGalleryAttachments[selectedIndex]?.uri;
353
+
355
354
  useEffect(() => {
356
355
  setCurrentImageHeight(screenHeight);
357
- const photo = photos[index.value];
356
+ const photo = imageGalleryAttachments[index.value];
358
357
  const height = photo?.original_height;
359
358
  const width = photo?.original_width;
360
359
 
@@ -463,53 +462,69 @@ export const ImageGallery = <
463
462
  const openGridView = () => {
464
463
  if (bottomSheetModalRef.current?.present) {
465
464
  bottomSheetModalRef.current.present();
466
- setGridPhotos(photos);
465
+ setGridPhotos(imageGalleryAttachments);
467
466
  }
468
467
  };
469
468
 
469
+ const handleEnd = () => {
470
+ handlePlayPause(imageGalleryAttachments[selectedIndex].id, true);
471
+ handleProgress(imageGalleryAttachments[selectedIndex].id, 1, true);
472
+ };
473
+
470
474
  const videoRef = useRef<VideoType>(null);
471
475
 
472
- const handleEnd = () => {
473
- setPaused(true);
474
- setProgress(1);
476
+ const handleLoad = (index: string, duration: number) => {
477
+ setImageGalleryAttachments((prevImageGalleryAttachment) =>
478
+ prevImageGalleryAttachment.map((imageGalleryAttachment) => ({
479
+ ...imageGalleryAttachment,
480
+ duration: imageGalleryAttachment.id === index ? duration : imageGalleryAttachment.duration,
481
+ })),
482
+ );
475
483
  };
476
484
 
477
- const handleLoad = (payload: VideoPayloadData) => {
478
- if (payload.duration) setDuration(payload.duration);
485
+ const handleProgress = (index: string, progress: number, hasEnd?: boolean) => {
486
+ setImageGalleryAttachments((prevImageGalleryAttachments) =>
487
+ prevImageGalleryAttachments.map((imageGalleryAttachment) => ({
488
+ ...imageGalleryAttachment,
489
+ progress:
490
+ imageGalleryAttachment.id === index
491
+ ? hasEnd
492
+ ? 1
493
+ : progress
494
+ : imageGalleryAttachment.progress,
495
+ })),
496
+ );
479
497
  };
480
498
 
481
- const handleProgress = (data: VideoProgressData) => {
482
- if (data.currentTime && data.seekableDuration) {
483
- setProgress(data.currentTime / data.seekableDuration);
499
+ const handlePlayPause = (index: string, pausedStatus?: boolean) => {
500
+ if (pausedStatus === false) {
501
+ // If the status is false we set the audio with the index as playing and the others as paused.
502
+ setImageGalleryAttachments((prevImageGalleryAttachment) =>
503
+ prevImageGalleryAttachment.map((imageGalleryAttachment) => ({
504
+ ...imageGalleryAttachment,
505
+ paused: imageGalleryAttachment.id === index ? false : true,
506
+ })),
507
+ );
508
+ } else {
509
+ // If the status is true we simply set all the audio's paused state as true.
510
+ setImageGalleryAttachments((prevImageGalleryAttachment) =>
511
+ prevImageGalleryAttachment.map((imageGalleryAttachment) => ({
512
+ ...imageGalleryAttachment,
513
+ paused: true,
514
+ })),
515
+ );
484
516
  }
485
517
  };
486
518
 
487
- const handlePlayPause = (status?: boolean) => {
519
+ const onPlayPause = (status?: boolean) => {
488
520
  if (status === undefined) {
489
- // React Native Video for RN CLI has seek as an API to move to a particular location in the video
490
- if (progress === 1 && videoRef.current && videoRef.current.seek) {
491
- videoRef.current.seek(0);
492
- }
493
- // Expo AV for Expo has replayAsync as an API to move to a starting of the video
494
- if (progress === 1 && videoRef.current && videoRef.current.replayAsync) {
495
- videoRef.current.replayAsync();
521
+ if (imageGalleryAttachments[selectedIndex].paused) {
522
+ handlePlayPause(imageGalleryAttachments[selectedIndex].id, false);
523
+ } else {
524
+ handlePlayPause(imageGalleryAttachments[selectedIndex].id, true);
496
525
  }
497
-
498
- setPaused((state) => !state);
499
526
  } else {
500
- setPaused(status);
501
- }
502
- };
503
-
504
- const onProgressDrag = (progress: number) => {
505
- // React Native Video for RN CLI has seek as an API to move to a particular location in the video
506
- if (videoRef.current && videoRef.current.seek) {
507
- videoRef.current.seek(progress);
508
- }
509
-
510
- // Expo AV for Expo has setPositionAsync as an API to move to a particular location of the video
511
- if (videoRef.current && videoRef.current.setPositionAsync) {
512
- videoRef.current.setPositionAsync(progress * 1000);
527
+ handlePlayPause(imageGalleryAttachments[selectedIndex].id, status);
513
528
  }
514
529
  };
515
530
 
@@ -568,17 +583,19 @@ export const ImageGallery = <
568
583
  },
569
584
  ]}
570
585
  >
571
- {photos.map((photo, i) =>
586
+ {imageGalleryAttachments.map((photo, i) =>
572
587
  photo.type === 'video' ? (
573
588
  <AnimatedGalleryVideo
589
+ attachmentId={photo.id}
574
590
  handleEnd={handleEnd}
575
591
  handleLoad={handleLoad}
576
592
  handleProgress={handleProgress}
577
593
  index={i}
578
594
  key={`${photo.uri}-${i}`}
579
595
  offsetScale={offsetScale}
580
- paused={paused}
596
+ paused={photo.paused || false}
581
597
  previous={selectedIndex > i}
598
+ repeat={true}
582
599
  scale={scale}
583
600
  screenHeight={screenHeight}
584
601
  selected={selectedIndex === i}
@@ -632,25 +649,27 @@ export const ImageGallery = <
632
649
  </TapGestureHandler>
633
650
  <ImageGalleryHeader<StreamChatGenerics>
634
651
  opacity={headerFooterOpacity}
635
- photo={photos[selectedIndex]}
652
+ photo={imageGalleryAttachments[selectedIndex]}
636
653
  visible={headerFooterVisible}
637
654
  {...imageGalleryCustomComponents?.header}
638
655
  />
639
- <ImageGalleryFooter<StreamChatGenerics>
640
- accessibilityLabel={'Image Gallery Footer'}
641
- duration={duration}
642
- onPlayPause={handlePlayPause}
643
- onProgressDrag={onProgressDrag}
644
- opacity={headerFooterOpacity}
645
- openGridView={openGridView}
646
- paused={paused}
647
- photo={photos[selectedIndex]}
648
- photoLength={photoLength}
649
- progress={progress}
650
- selectedIndex={selectedIndex}
651
- visible={headerFooterVisible}
652
- {...imageGalleryCustomComponents?.footer}
653
- />
656
+
657
+ {imageGalleryAttachments.length > 0 && (
658
+ <ImageGalleryFooter<StreamChatGenerics>
659
+ accessibilityLabel={'Image Gallery Footer'}
660
+ duration={imageGalleryAttachments[selectedIndex].duration || 0}
661
+ onPlayPause={onPlayPause}
662
+ opacity={headerFooterOpacity}
663
+ openGridView={openGridView}
664
+ paused={imageGalleryAttachments[selectedIndex].paused || false}
665
+ photo={imageGalleryAttachments[selectedIndex]}
666
+ photoLength={imageGalleryAttachments.length}
667
+ progress={imageGalleryAttachments[selectedIndex].progress || 0}
668
+ selectedIndex={selectedIndex}
669
+ visible={headerFooterVisible}
670
+ {...imageGalleryCustomComponents?.footer}
671
+ />
672
+ )}
654
673
 
655
674
  <ImageGalleryOverlay
656
675
  animatedBottomSheetIndex={animatedBottomSheetIndex}
@@ -708,10 +727,13 @@ export type Photo<
708
727
  uri: string;
709
728
  channelId?: string;
710
729
  created_at?: string | Date;
730
+ duration?: number;
711
731
  messageId?: string;
712
732
  mime_type?: string;
713
733
  original_height?: number;
714
734
  original_width?: number;
735
+ paused?: boolean;
736
+ progress?: number;
715
737
  type?: string;
716
738
  user?: UserResponse<StreamChatGenerics> | null;
717
739
  user_id?: string;
@@ -78,7 +78,7 @@ describe('ImageGallery', () => {
78
78
 
79
79
  act(() => {
80
80
  fireEvent(videoComponent, 'onEnd');
81
- fireEvent(videoComponent, 'onProgress');
81
+ fireEvent(videoComponent, 'onProgress', { currentTime: 10, seekableDuration: 60 });
82
82
  });
83
83
 
84
84
  expect(handleEndMock).toHaveBeenCalled();
@@ -127,7 +127,7 @@ describe('ImageGallery', () => {
127
127
  const spinnerComponent = queryByA11yLabel('Spinner');
128
128
 
129
129
  act(() => {
130
- fireEvent(videoComponent, 'onLoad');
130
+ fireEvent(videoComponent, 'onLoad', { duration: 10 });
131
131
  });
132
132
 
133
133
  expect(handleLoadMock).toHaveBeenCalled();