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

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

@@ -88,7 +88,7 @@ exports.IsSwiping = IsSwiping;
 })(IsSwiping || (exports.IsSwiping = IsSwiping = {}));
 
 var ImageGallery = function ImageGallery(props) {
-  var _StatusBar$currentHei, _photos$selectedIndex;
+  var _StatusBar$currentHei, _imageGalleryAttachme;
 
   var _props$giphyVersion = props.giphyVersion,
       giphyVersion = _props$giphyVersion === void 0 ? 'fixed_height' : _props$giphyVersion,
@@ -98,20 +98,10 @@ var ImageGallery = function ImageGallery(props) {
       numberOfImageGalleryGridColumns = props.numberOfImageGalleryGridColumns,
       overlayOpacity = props.overlayOpacity;
 
-  var _useState = (0, _react.useState)(false),
+  var _useState = (0, _react.useState)([]),
       _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
-      paused = _useState2[0],
-      setPaused = _useState2[1];
-
-  var _useState3 = (0, _react.useState)(0),
-      _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
-      progress = _useState4[0],
-      setProgress = _useState4[1];
-
-  var _useState5 = (0, _react.useState)(0),
-      _useState6 = (0, _slicedToArray2["default"])(_useState5, 2),
-      duration = _useState6[0],
-      setDuration = _useState6[1];
+      imageGalleryAttachments = _useState2[0],
+      setImageGalleryAttachments = _useState2[1];
 
   var _useTheme = (0, _ThemeContext.useTheme)(),
       _useTheme$theme = _useTheme.theme,
@@ -121,10 +111,10 @@ var ImageGallery = function ImageGallery(props) {
       pager = _useTheme$theme$image.pager,
       slide = _useTheme$theme$image.slide;
 
-  var _useState7 = (0, _react.useState)([]),
-      _useState8 = (0, _slicedToArray2["default"])(_useState7, 2),
-      gridPhotos = _useState8[0],
-      setGridPhotos = _useState8[1];
+  var _useState3 = (0, _react.useState)([]),
+      _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
+      gridPhotos = _useState4[0],
+      setGridPhotos = _useState4[1];
 
   var _useOverlayContext = (0, _OverlayContext.useOverlayContext)(),
       overlay = _useOverlayContext.overlay,
@@ -148,10 +138,10 @@ var ImageGallery = function ImageGallery(props) {
 
   var bottomSheetModalRef = (0, _react.useRef)(null);
 
-  var _useState9 = (0, _react.useState)(0),
-      _useState10 = (0, _slicedToArray2["default"])(_useState9, 2),
-      currentBottomSheetIndex = _useState10[0],
-      setCurrentBottomSheetIndex = _useState10[1];
+  var _useState5 = (0, _react.useState)(0),
+      _useState6 = (0, _slicedToArray2["default"])(_useState5, 2),
+      currentBottomSheetIndex = _useState6[0],
+      setCurrentBottomSheetIndex = _useState6[1];
 
   var animatedBottomSheetIndex = (0, _reactNativeReanimated.useSharedValue)(0);
   var screenTranslateY = (0, _reactNativeReanimated.useSharedValue)(screenHeight);
@@ -171,15 +161,15 @@ var ImageGallery = function ImageGallery(props) {
     showScreen();
   }, []);
 
-  var _useState11 = (0, _react.useState)(screenHeight),
-      _useState12 = (0, _slicedToArray2["default"])(_useState11, 2),
-      currentImageHeight = _useState12[0],
-      setCurrentImageHeight = _useState12[1];
+  var _useState7 = (0, _react.useState)(screenHeight),
+      _useState8 = (0, _slicedToArray2["default"])(_useState7, 2),
+      currentImageHeight = _useState8[0],
+      setCurrentImageHeight = _useState8[1];
 
-  var _useState13 = (0, _react.useState)(0),
-      _useState14 = (0, _slicedToArray2["default"])(_useState13, 2),
-      selectedIndex = _useState14[0],
-      setSelectedIndex = _useState14[1];
+  var _useState9 = (0, _react.useState)(0),
+      _useState10 = (0, _slicedToArray2["default"])(_useState9, 2),
+      selectedIndex = _useState10[0],
+      setSelectedIndex = _useState10[1];
 
   var index = (0, _reactNativeReanimated.useSharedValue)(0);
   var headerFooterVisible = (0, _reactNativeReanimated.useSharedValue)(1);
@@ -208,11 +198,14 @@ var ImageGallery = function ImageGallery(props) {
       return {
         channelId: cur.cid,
         created_at: cur.created_at,
+        duration: 0,
         id: "photoId-" + cur.id + "-" + imageUrl,
         messageId: cur.id,
         mime_type: a.type === 'giphy' ? (0, _getGiphyMimeType.getGiphyMimeType)(giphyURL != null ? giphyURL : '') : a.mime_type,
         original_height: a.original_height,
         original_width: a.original_width,
+        paused: true,
+        progress: 0,
         type: a.type,
         uri: a.type === 'giphy' ? giphyURL : (0, _getResizedImageUrl.getResizedImageUrl)({
           height: screenHeight,
@@ -226,6 +219,9 @@ var ImageGallery = function ImageGallery(props) {
     return [].concat((0, _toConsumableArray2["default"])(attachmentPhotos), (0, _toConsumableArray2["default"])(acc));
   }, []);
   var photoLength = photos.length;
+  (0, _react.useEffect)(function () {
+    setImageGalleryAttachments(photos);
+  }, []);
 
   var stripQueryFromUrl = function stripQueryFromUrl(url) {
     return url.split('?')[0];
@@ -245,17 +241,12 @@ var ImageGallery = function ImageGallery(props) {
     var newIndex = photos.findIndex(function (photo) {
       return photo.messageId === (selectedMessage == null ? void 0 : selectedMessage.messageId) && stripQueryFromUrl(photo.uri) === stripQueryFromUrl((selectedMessage == null ? void 0 : selectedMessage.url) || '');
     });
-
-    if (photoLength > 1) {
-      setPaused(true);
-    }
-
     (0, _reactNativeReanimated.runOnUI)(updatePosition)(newIndex);
   }, [selectedMessage, photoLength]);
-  var uriForCurrentImage = (_photos$selectedIndex = photos[selectedIndex]) == null ? void 0 : _photos$selectedIndex.uri;
+  var uriForCurrentImage = (_imageGalleryAttachme = imageGalleryAttachments[selectedIndex]) == null ? void 0 : _imageGalleryAttachme.uri;
   (0, _react.useEffect)(function () {
     setCurrentImageHeight(screenHeight);
-    var photo = photos[index.value];
+    var photo = imageGalleryAttachments[index.value];
     var height = photo == null ? void 0 : photo.original_height;
     var width = photo == null ? void 0 : photo.original_width;
 
@@ -334,52 +325,66 @@ var ImageGallery = function ImageGallery(props) {
 
     if ((_bottomSheetModalRef$2 = bottomSheetModalRef.current) != null && _bottomSheetModalRef$2.present) {
       bottomSheetModalRef.current.present();
-      setGridPhotos(photos);
+      setGridPhotos(imageGalleryAttachments);
     }
   };
 
-  var videoRef = (0, _react.useRef)(null);
-
   var handleEnd = function handleEnd() {
-    setPaused(true);
-    setProgress(1);
+    handlePlayPause(imageGalleryAttachments[selectedIndex].id, true);
+    handleProgress(imageGalleryAttachments[selectedIndex].id, 1, true);
   };
 
-  var handleLoad = function handleLoad(payload) {
-    if (payload.duration) setDuration(payload.duration);
-  };
+  var videoRef = (0, _react.useRef)(null);
 
-  var handleProgress = function handleProgress(data) {
-    if (data.currentTime && data.seekableDuration) {
-      setProgress(data.currentTime / data.seekableDuration);
-    }
+  var handleLoad = function handleLoad(index, duration) {
+    setImageGalleryAttachments(function (prevImageGalleryAttachment) {
+      return prevImageGalleryAttachment.map(function (imageGalleryAttachment) {
+        return (0, _extends2["default"])({}, imageGalleryAttachment, {
+          duration: imageGalleryAttachment.id === index ? duration : imageGalleryAttachment.duration
+        });
+      });
+    });
   };
 
-  var handlePlayPause = function handlePlayPause(status) {
-    if (status === undefined) {
-      if (progress === 1 && videoRef.current && videoRef.current.seek) {
-        videoRef.current.seek(0);
-      }
-
-      if (progress === 1 && videoRef.current && videoRef.current.replayAsync) {
-        videoRef.current.replayAsync();
-      }
+  var handleProgress = function handleProgress(index, progress, hasEnd) {
+    setImageGalleryAttachments(function (prevImageGalleryAttachments) {
+      return prevImageGalleryAttachments.map(function (imageGalleryAttachment) {
+        return (0, _extends2["default"])({}, imageGalleryAttachment, {
+          progress: imageGalleryAttachment.id === index ? hasEnd ? 1 : progress : imageGalleryAttachment.progress
+        });
+      });
+    });
+  };
 
-      setPaused(function (state) {
-        return !state;
+  var handlePlayPause = function handlePlayPause(index, pausedStatus) {
+    if (pausedStatus === false) {
+      setImageGalleryAttachments(function (prevImageGalleryAttachment) {
+        return prevImageGalleryAttachment.map(function (imageGalleryAttachment) {
+          return (0, _extends2["default"])({}, imageGalleryAttachment, {
+            paused: imageGalleryAttachment.id === index ? false : true
+          });
+        });
       });
     } else {
-      setPaused(status);
+      setImageGalleryAttachments(function (prevImageGalleryAttachment) {
+        return prevImageGalleryAttachment.map(function (imageGalleryAttachment) {
+          return (0, _extends2["default"])({}, imageGalleryAttachment, {
+            paused: true
+          });
+        });
+      });
     }
   };
 
-  var onProgressDrag = function onProgressDrag(progress) {
-    if (videoRef.current && videoRef.current.seek) {
-      videoRef.current.seek(progress);
-    }
-
-    if (videoRef.current && videoRef.current.setPositionAsync) {
-      videoRef.current.setPositionAsync(progress * 1000);
+  var onPlayPause = function onPlayPause(status) {
+    if (status === undefined) {
+      if (imageGalleryAttachments[selectedIndex].paused) {
+        handlePlayPause(imageGalleryAttachments[selectedIndex].id, false);
+      } else {
+        handlePlayPause(imageGalleryAttachments[selectedIndex].id, true);
+      }
+    } else {
+      handlePlayPause(imageGalleryAttachments[selectedIndex].id, status);
     }
   };
 
@@ -390,7 +395,7 @@ var ImageGallery = function ImageGallery(props) {
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 517,
+      lineNumber: 532,
       columnNumber: 5
     }
   }, _react["default"].createElement(_reactNativeReanimated["default"].View, {
@@ -398,7 +403,7 @@ var ImageGallery = function ImageGallery(props) {
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 522,
+      lineNumber: 537,
       columnNumber: 7
     }
   }), _react["default"].createElement(_reactNativeGestureHandler.TapGestureHandler, {
@@ -410,7 +415,7 @@ var ImageGallery = function ImageGallery(props) {
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 523,
+      lineNumber: 538,
       columnNumber: 7
     }
   }, _react["default"].createElement(_reactNativeReanimated["default"].View, {
@@ -418,7 +423,7 @@ var ImageGallery = function ImageGallery(props) {
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 530,
+      lineNumber: 545,
       columnNumber: 9
     }
   }, _react["default"].createElement(_reactNativeGestureHandler.TapGestureHandler, {
@@ -432,7 +437,7 @@ var ImageGallery = function ImageGallery(props) {
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 531,
+      lineNumber: 546,
       columnNumber: 11
     }
   }, _react["default"].createElement(_reactNativeReanimated["default"].View, {
@@ -440,7 +445,7 @@ var ImageGallery = function ImageGallery(props) {
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 540,
+      lineNumber: 555,
       columnNumber: 13
     }
   }, _react["default"].createElement(_reactNativeGestureHandler.PinchGestureHandler, {
@@ -450,7 +455,7 @@ var ImageGallery = function ImageGallery(props) {
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 541,
+      lineNumber: 556,
       columnNumber: 15
     }
   }, _react["default"].createElement(_reactNativeReanimated["default"].View, {
@@ -458,7 +463,7 @@ var ImageGallery = function ImageGallery(props) {
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 546,
+      lineNumber: 561,
       columnNumber: 17
     }
   }, _react["default"].createElement(_reactNativeGestureHandler.PanGestureHandler, {
@@ -471,7 +476,7 @@ var ImageGallery = function ImageGallery(props) {
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 547,
+      lineNumber: 562,
       columnNumber: 19
     }
   }, _react["default"].createElement(_reactNativeReanimated["default"].View, {
@@ -479,7 +484,7 @@ var ImageGallery = function ImageGallery(props) {
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 555,
+      lineNumber: 570,
       columnNumber: 21
     }
   }, _react["default"].createElement(_reactNativeReanimated["default"].View, {
@@ -493,19 +498,21 @@ var ImageGallery = function ImageGallery(props) {
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 556,
+      lineNumber: 571,
       columnNumber: 23
     }
-  }, photos.map(function (photo, i) {
+  }, imageGalleryAttachments.map(function (photo, i) {
     return photo.type === 'video' ? _react["default"].createElement(_AnimatedGalleryVideo.AnimatedGalleryVideo, {
+      attachmentId: photo.id,
       handleEnd: handleEnd,
       handleLoad: handleLoad,
       handleProgress: handleProgress,
       index: i,
       key: photo.uri + "-" + i,
       offsetScale: offsetScale,
-      paused: paused,
+      paused: photo.paused || false,
       previous: selectedIndex > i,
+      repeat: true,
       scale: scale,
       screenHeight: screenHeight,
       selected: selectedIndex === i,
@@ -524,7 +531,7 @@ var ImageGallery = function ImageGallery(props) {
       __self: _this,
       __source: {
         fileName: _jsxFileName,
-        lineNumber: 573,
+        lineNumber: 588,
         columnNumber: 29
       }
     }) : _react["default"].createElement(_AnimatedGalleryImage.AnimatedGalleryImage, {
@@ -548,40 +555,39 @@ var ImageGallery = function ImageGallery(props) {
       __self: _this,
       __source: {
         fileName: _jsxFileName,
-        lineNumber: 600,
+        lineNumber: 617,
         columnNumber: 29
       }
     });
   })))))))))), _react["default"].createElement(_ImageGalleryHeader.ImageGalleryHeader, (0, _extends2["default"])({
     opacity: headerFooterOpacity,
-    photo: photos[selectedIndex],
+    photo: imageGalleryAttachments[selectedIndex],
     visible: headerFooterVisible
   }, imageGalleryCustomComponents == null ? void 0 : imageGalleryCustomComponents.header, {
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 633,
+      lineNumber: 650,
       columnNumber: 7
     }
-  })), _react["default"].createElement(_ImageGalleryFooter.ImageGalleryFooter, (0, _extends2["default"])({
+  })), imageGalleryAttachments.length > 0 && _react["default"].createElement(_ImageGalleryFooter.ImageGalleryFooter, (0, _extends2["default"])({
     accessibilityLabel: 'Image Gallery Footer',
-    duration: duration,
-    onPlayPause: handlePlayPause,
-    onProgressDrag: onProgressDrag,
+    duration: imageGalleryAttachments[selectedIndex].duration || 0,
+    onPlayPause: onPlayPause,
     opacity: headerFooterOpacity,
     openGridView: openGridView,
-    paused: paused,
-    photo: photos[selectedIndex],
-    photoLength: photoLength,
-    progress: progress,
+    paused: imageGalleryAttachments[selectedIndex].paused || false,
+    photo: imageGalleryAttachments[selectedIndex],
+    photoLength: imageGalleryAttachments.length,
+    progress: imageGalleryAttachments[selectedIndex].progress || 0,
     selectedIndex: selectedIndex,
     visible: headerFooterVisible
   }, imageGalleryCustomComponents == null ? void 0 : imageGalleryCustomComponents.footer, {
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 639,
-      columnNumber: 7
+      lineNumber: 658,
+      columnNumber: 9
     }
   })), _react["default"].createElement(_ImageGalleryOverlay.ImageGalleryOverlay, {
     animatedBottomSheetIndex: animatedBottomSheetIndex,
@@ -590,14 +596,14 @@ var ImageGallery = function ImageGallery(props) {
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 655,
+      lineNumber: 674,
       columnNumber: 7
     }
   }), _react["default"].createElement(_bottomSheet.BottomSheetModalProvider, {
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 660,
+      lineNumber: 679,
       columnNumber: 7
     }
   }, _react["default"].createElement(_bottomSheet.BottomSheetModal, {
@@ -610,7 +616,7 @@ var ImageGallery = function ImageGallery(props) {
         __self: _this,
         __source: {
           fileName: _jsxFileName,
-          lineNumber: 665,
+          lineNumber: 684,
           columnNumber: 13
         }
       }));
@@ -625,7 +631,7 @@ var ImageGallery = function ImageGallery(props) {
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 661,
+      lineNumber: 680,
       columnNumber: 9
     }
   }, _react["default"].createElement(_ImageGrid.ImageGrid, (0, _extends2["default"])({
@@ -637,7 +643,7 @@ var ImageGallery = function ImageGallery(props) {
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 676,
+      lineNumber: 695,
       columnNumber: 11
     }
   })))));