stream-chat-react-native-core 4.6.0 → 4.7.0-beta.1

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

@@ -25,6 +25,8 @@ var _bottomSheet = require("@gorhom/bottom-sheet");
 
 var _AnimatedGalleryImage = require("./components/AnimatedGalleryImage");
 
+var _AnimatedGalleryVideo = require("./components/AnimatedGalleryVideo");
+
 var _ImageGalleryFooter = require("./components/ImageGalleryFooter");
 
 var _ImageGalleryHeader = require("./components/ImageGalleryHeader");
@@ -35,14 +37,14 @@ var _ImageGrid = require("./components/ImageGrid");
 
 var _ImageGridHandle = require("./components/ImageGridHandle");
 
+var _useImageGalleryGestures = require("./hooks/useImageGalleryGestures");
+
 var _ImageGalleryContext = require("../../contexts/imageGalleryContext/ImageGalleryContext");
 
 var _OverlayContext = require("../../contexts/overlayContext/OverlayContext");
 
 var _ThemeContext = require("../../contexts/themeContext/ThemeContext");
 
-var _native = require("../../native");
-
 var _getResizedImageUrl = require("../../utils/getResizedImageUrl");
 
 var _getUrlOfImageAttachment = require("../../utils/getUrlOfImageAttachment");
@@ -92,6 +94,21 @@ var ImageGallery = function ImageGallery(props) {
       numberOfImageGalleryGridColumns = props.numberOfImageGalleryGridColumns,
       overlayOpacity = props.overlayOpacity;
 
+  var _useState = (0, _react.useState)(false),
+      _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];
+
   var _useTheme = (0, _ThemeContext.useTheme)(),
       _useTheme$theme = _useTheme.theme,
       white_snow = _useTheme$theme.colors.white_snow,
@@ -100,14 +117,13 @@ var ImageGallery = function ImageGallery(props) {
       pager = _useTheme$theme$image.pager,
       slide = _useTheme$theme$image.slide;
 
-  var _useState = (0, _react.useState)([]),
-      _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
-      gridPhotos = _useState2[0],
-      setGridPhotos = _useState2[1];
+  var _useState7 = (0, _react.useState)([]),
+      _useState8 = (0, _slicedToArray2["default"])(_useState7, 2),
+      gridPhotos = _useState8[0],
+      setGridPhotos = _useState8[1];
 
   var _useOverlayContext = (0, _OverlayContext.useOverlayContext)(),
       overlay = _useOverlayContext.overlay,
-      setOverlay = _useOverlayContext.setOverlay,
       translucentStatusBar = _useOverlayContext.translucentStatusBar;
 
   var _useImageGalleryConte = (0, _ImageGalleryContext.useImageGalleryContext)(),
@@ -123,15 +139,15 @@ var ImageGallery = function ImageGallery(props) {
   var quarterScreenHeight = screenHeight / 4;
 
   var snapPoints = _react["default"].useMemo(function () {
-    return [screenHeight * 9 / 10];
+    return [screenHeight * 3 / 4, screenHeight - (imageGalleryGridHandleHeight != null ? imageGalleryGridHandleHeight : 40)];
   }, []);
 
   var bottomSheetModalRef = (0, _react.useRef)(null);
 
-  var _useState3 = (0, _react.useState)(0),
-      _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
-      currentBottomSheetIndex = _useState4[0],
-      setCurrentBottomSheetIndex = _useState4[1];
+  var _useState9 = (0, _react.useState)(0),
+      _useState10 = (0, _slicedToArray2["default"])(_useState9, 2),
+      currentBottomSheetIndex = _useState10[0],
+      setCurrentBottomSheetIndex = _useState10[1];
 
   var animatedBottomSheetIndex = (0, _reactNativeReanimated.useSharedValue)(0);
   var screenTranslateY = (0, _reactNativeReanimated.useSharedValue)(screenHeight);
@@ -151,80 +167,35 @@ var ImageGallery = function ImageGallery(props) {
     showScreen();
   }, []);
 
-  var _useState5 = (0, _react.useState)(screenHeight),
-      _useState6 = (0, _slicedToArray2["default"])(_useState5, 2),
-      currentImageHeight = _useState6[0],
-      setCurrentImageHeight = _useState6[1];
+  var _useState11 = (0, _react.useState)(screenHeight),
+      _useState12 = (0, _slicedToArray2["default"])(_useState11, 2),
+      currentImageHeight = _useState12[0],
+      setCurrentImageHeight = _useState12[1];
 
-  var _useState7 = (0, _react.useState)(0),
-      _useState8 = (0, _slicedToArray2["default"])(_useState7, 2),
-      selectedIndex = _useState8[0],
-      setSelectedIndex = _useState8[1];
+  var _useState13 = (0, _react.useState)(0),
+      _useState14 = (0, _slicedToArray2["default"])(_useState13, 2),
+      selectedIndex = _useState14[0],
+      setSelectedIndex = _useState14[1];
 
   var index = (0, _reactNativeReanimated.useSharedValue)(0);
   var headerFooterVisible = (0, _reactNativeReanimated.useSharedValue)(1);
-  var hasHitBottomScale = (0, _reactNativeReanimated.useSharedValue)(1);
-  var hasHitTopScale = (0, _reactNativeReanimated.useSharedValue)(0);
   var doubleTapRef = (0, _react.useRef)(null);
   var panRef = (0, _react.useRef)(null);
   var pinchRef = (0, _react.useRef)(null);
   var singleTapRef = (0, _react.useRef)(null);
-  var offsetX = (0, _reactNativeReanimated.useSharedValue)(0);
-  var offsetY = (0, _reactNativeReanimated.useSharedValue)(0);
   var translateX = (0, _reactNativeReanimated.useSharedValue)(0);
   var translateY = (0, _reactNativeReanimated.useSharedValue)(0);
   var offsetScale = (0, _reactNativeReanimated.useSharedValue)(1);
   var scale = (0, _reactNativeReanimated.useSharedValue)(1);
   var translationX = (0, _reactNativeReanimated.useSharedValue)(0);
-  var originX = (0, _reactNativeReanimated.useSharedValue)(0);
-  var originY = (0, _reactNativeReanimated.useSharedValue)(0);
-  var focalX = (0, _reactNativeReanimated.useSharedValue)(0);
-  var focalY = (0, _reactNativeReanimated.useSharedValue)(0);
-  var oldFocalX = (0, _reactNativeReanimated.useSharedValue)(0);
-  var oldFocalY = (0, _reactNativeReanimated.useSharedValue)(0);
-  var focalOffsetX = (0, _reactNativeReanimated.useSharedValue)(0);
-  var focalOffsetY = (0, _reactNativeReanimated.useSharedValue)(0);
-  var adjustedFocalX = (0, _reactNativeReanimated.useSharedValue)(0);
-  var adjustedFocalY = (0, _reactNativeReanimated.useSharedValue)(0);
-  var tapX = (0, _reactNativeReanimated.useSharedValue)(0);
-  var tapY = (0, _reactNativeReanimated.useSharedValue)(0);
-  var numberOfPinchFingers = (0, _reactNativeReanimated.useSharedValue)(0);
-  var isSwiping = (0, _reactNativeReanimated.useSharedValue)(0);
-  var isPinch = (0, _reactNativeReanimated.useSharedValue)(false);
-  var hasPinched = (0, _reactNativeReanimated.useSharedValue)(0);
-
-  var resetTouchValues = function resetTouchValues() {
-    'worklet';
-
-    focalX.value = 0;
-    focalY.value = 0;
-    oldFocalX.value = 0;
-    oldFocalY.value = 0;
-    originX.value = 0;
-    originY.value = 0;
-    focalOffsetX.value = 0;
-    focalOffsetY.value = 0;
-    numberOfPinchFingers.value = 0;
-    isPinch.value = false;
-    isSwiping.value = IsSwiping.UNDETERMINED;
-  };
-
-  var resetMovementValues = function resetMovementValues() {
-    'worklet';
-
-    translateX.value = 0;
-    translateY.value = 0;
-    scale.value = 1;
-    offsetScale.value = 1;
-  };
-
   var photos = images.reduce(function (acc, cur) {
     var _cur$attachments;
 
+    console.log(cur);
     var attachmentImages = ((_cur$attachments = cur.attachments) == null ? void 0 : _cur$attachments.filter(function (attachment) {
       var _attachment$giphy, _attachment$giphy$gip;
 
-      return attachment.type === 'giphy' && (((_attachment$giphy = attachment.giphy) == null ? void 0 : (_attachment$giphy$gip = _attachment$giphy[giphyVersion]) == null ? void 0 : _attachment$giphy$gip.url) || attachment.thumb_url || attachment.image_url) || attachment.type === 'image' && !attachment.title_link && !attachment.og_scrape_url && (0, _getUrlOfImageAttachment.getUrlOfImageAttachment)(attachment);
+      return attachment.type === 'giphy' && (((_attachment$giphy = attachment.giphy) == null ? void 0 : (_attachment$giphy$gip = _attachment$giphy[giphyVersion]) == null ? void 0 : _attachment$giphy$gip.url) || attachment.thumb_url || attachment.image_url) || attachment.type === 'image' && !attachment.title_link && !attachment.og_scrape_url && (0, _getUrlOfImageAttachment.getUrlOfImageAttachment)(attachment) || attachment.type === 'video';
     })) || [];
     var attachmentPhotos = attachmentImages.map(function (a) {
       var imageUrl = (0, _getUrlOfImageAttachment.getUrlOfImageAttachment)(a);
@@ -233,8 +204,10 @@ var ImageGallery = function ImageGallery(props) {
         created_at: cur.created_at,
         id: "photoId-" + cur.id + "-" + imageUrl,
         messageId: cur.id,
+        mime_type: a.mime_type,
         original_height: a.original_height,
         original_width: a.original_width,
+        type: a.type,
         uri: (0, _getResizedImageUrl.getResizedImageUrl)({
           height: screenHeight,
           url: imageUrl,
@@ -261,6 +234,11 @@ var ImageGallery = function ImageGallery(props) {
     var newIndex = photos.findIndex(function (photo) {
       return photo.messageId === (image == null ? void 0 : image.messageId) && photo.uri === (image == null ? void 0 : image.url);
     });
+
+    if (photoLength > 1) {
+      setPaused(true);
+    }
+
     (0, _reactNativeReanimated.runOnUI)(updatePosition)(newIndex);
   }, [image, photoLength]);
   var uriForCurrentImage = (_photos$selectedIndex = photos[selectedIndex]) == null ? void 0 : _photos$selectedIndex.uri;
@@ -274,268 +252,36 @@ var ImageGallery = function ImageGallery(props) {
       var imageHeight = Math.floor(height * (screenWidth / width));
       setCurrentImageHeight(imageHeight > screenHeight ? screenHeight : imageHeight);
     } else if (photo != null && photo.uri) {
-      _reactNative.Image.getSize(photo.uri, function (width, height) {
-        var imageHeight = Math.floor(height * (screenWidth / width));
-        setCurrentImageHeight(imageHeight > screenHeight ? screenHeight : imageHeight);
-      });
-    }
-  }, [uriForCurrentImage]);
-  var onPan = (0, _reactNativeReanimated.useAnimatedGestureHandler)({
-    onActive: function onActive(evt) {
-      if (evt.numberOfPointers === 1 && !isPinch.value) {
-        if (isAndroid && hasPinched.value === HasPinched.TRUE) {
-          hasPinched.value = HasPinched.FALSE;
-          isSwiping.value = IsSwiping.FALSE;
-          offsetX.value = translateX.value + evt.translationX;
-          offsetY.value = translateY.value - evt.translationY;
-        }
-
-        if (isSwiping.value === IsSwiping.UNDETERMINED) {
-          var maxXYRatio = isAndroid ? 1 : 0.25;
-
-          if (Math.abs(evt.translationX / evt.translationY) > maxXYRatio && (Math.abs(-halfScreenWidth * (scale.value - 1) - offsetX.value) < 3 || Math.abs(halfScreenWidth * (scale.value - 1) - offsetX.value) < 3)) {
-            isSwiping.value = IsSwiping.TRUE;
-          }
-
-          if (Math.abs(evt.translationY) > 25) {
-            isSwiping.value = IsSwiping.FALSE;
-          }
-        }
-
-        var localEvtScale = scale.value / offsetScale.value;
-        translateX.value = scale.value !== offsetScale.value ? offsetX.value * localEvtScale - evt.translationX : offsetX.value - evt.translationX;
-        translateY.value = isSwiping.value !== IsSwiping.TRUE ? scale.value !== offsetScale.value ? offsetY.value * localEvtScale + evt.translationY : offsetY.value + evt.translationY : translateY.value;
-        scale.value = currentImageHeight * offsetScale.value < screenHeight && translateY.value > 0 ? offsetScale.value * (1 - 1 / 3 * (translateY.value / screenHeight)) : currentImageHeight * offsetScale.value > screenHeight && translateY.value > currentImageHeight / 2 * offsetScale.value - halfScreenHeight ? offsetScale.value * (1 - 1 / 3 * ((translateY.value - (currentImageHeight / 2 * offsetScale.value - halfScreenHeight)) / screenHeight)) : scale.value;
-        overlayOpacity.value = localEvtScale;
-      }
-    },
-    onFinish: function onFinish(evt) {
-      if (!isPinch.value && evt.numberOfPointers < 2) {
-        var finalXPosition = evt.translationX - evt.velocityX * 0.3;
-        var finalYPosition = evt.translationY + evt.velocityY * 0.1;
-
-        if (index.value < photoLength - 1 && Math.abs(halfScreenWidth * (scale.value - 1) + offsetX.value) < 3 && translateX.value < 0 && finalXPosition < -halfScreenWidth && isSwiping.value === IsSwiping.TRUE) {
-          (0, _reactNativeReanimated.cancelAnimation)(translationX);
-          translationX.value = (0, _reactNativeReanimated.withTiming)(-(screenWidth + MARGIN) * (index.value + 1), {
-            duration: 200,
-            easing: _reactNativeReanimated.Easing.out(_reactNativeReanimated.Easing.ease)
-          }, function () {
-            resetMovementValues();
-            index.value = index.value + 1;
-            (0, _reactNativeReanimated.runOnJS)(setSelectedIndex)(index.value);
-          });
-        } else if (index.value > 0 && Math.abs(-halfScreenWidth * (scale.value - 1) + offsetX.value) < 3 && translateX.value > 0 && finalXPosition > halfScreenWidth && isSwiping.value === IsSwiping.TRUE) {
-          (0, _reactNativeReanimated.cancelAnimation)(translationX);
-          translationX.value = (0, _reactNativeReanimated.withTiming)(-(screenWidth + MARGIN) * (index.value - 1), {
-            duration: 200,
-            easing: _reactNativeReanimated.Easing.out(_reactNativeReanimated.Easing.ease)
-          }, function () {
-            resetMovementValues();
-            index.value = index.value - 1;
-            (0, _reactNativeReanimated.runOnJS)(setSelectedIndex)(index.value);
-          });
-        }
-
-        translateX.value = scale.value < 1 ? (0, _reactNativeReanimated.withTiming)(0) : translateX.value > halfScreenWidth * (scale.value - 1) ? (0, _reactNativeReanimated.withTiming)(halfScreenWidth * (scale.value - 1), {
-          duration: 200
-        }) : translateX.value < -halfScreenWidth * (scale.value - 1) ? (0, _reactNativeReanimated.withTiming)(-halfScreenWidth * (scale.value - 1), {
-          duration: 200
-        }) : (0, _reactNativeReanimated.withDecay)({
-          clamp: [-halfScreenWidth * (scale.value - 1), halfScreenWidth * (scale.value - 1)],
-          deceleration: 0.99,
-          velocity: -evt.velocityX
-        });
-        translateY.value = currentImageHeight * scale.value < screenHeight ? (0, _reactNativeReanimated.withTiming)(0) : translateY.value > currentImageHeight / 2 * scale.value - halfScreenHeight ? (0, _reactNativeReanimated.withTiming)(currentImageHeight / 2 * scale.value - halfScreenHeight) : translateY.value < -currentImageHeight / 2 * scale.value + halfScreenHeight ? (0, _reactNativeReanimated.withTiming)(-currentImageHeight / 2 * scale.value + halfScreenHeight) : (0, _reactNativeReanimated.withDecay)({
-          clamp: [-currentImageHeight / 2 * scale.value + halfScreenHeight, currentImageHeight / 2 * scale.value - halfScreenHeight],
-          deceleration: 0.99,
-          velocity: evt.velocityY
+      if (photo.type === 'image') {
+        _reactNative.Image.getSize(photo.uri, function (width, height) {
+          var imageHeight = Math.floor(height * (screenWidth / width));
+          setCurrentImageHeight(imageHeight > screenHeight ? screenHeight : imageHeight);
         });
-        resetTouchValues();
-        scale.value = scale.value !== offsetScale.value ? (0, _reactNativeReanimated.withTiming)(offsetScale.value) : offsetScale.value;
-
-        if (finalYPosition > halfScreenHeight && offsetY.value + 8 >= currentImageHeight / 2 * scale.value - halfScreenHeight && isSwiping.value !== IsSwiping.TRUE && translateY.value !== 0 && !(Math.abs(halfScreenWidth * (scale.value - 1) + offsetX.value) < 3 && translateX.value < 0 && finalXPosition < -halfScreenWidth) && !(Math.abs(-halfScreenWidth * (scale.value - 1) + offsetX.value) < 3 && translateX.value > 0 && finalXPosition > halfScreenWidth)) {
-          (0, _reactNativeReanimated.cancelAnimation)(translateX);
-          (0, _reactNativeReanimated.cancelAnimation)(translateY);
-          (0, _reactNativeReanimated.cancelAnimation)(scale);
-          overlayOpacity.value = (0, _reactNativeReanimated.withTiming)(0, {
-            duration: 200,
-            easing: _reactNativeReanimated.Easing.out(_reactNativeReanimated.Easing.ease)
-          }, function () {
-            (0, _reactNativeReanimated.runOnJS)(setOverlay)('none');
-          });
-          scale.value = (0, _reactNativeReanimated.withTiming)(0.6, {
-            duration: 200,
-            easing: _reactNativeReanimated.Easing.out(_reactNativeReanimated.Easing.ease)
-          });
-          translateY.value = evt.velocityY > 1000 ? (0, _reactNativeReanimated.withDecay)({
-            velocity: evt.velocityY
-          }) : (0, _reactNativeReanimated.withTiming)(halfScreenHeight + currentImageHeight / 2 * scale.value, {
-            duration: 200,
-            easing: _reactNativeReanimated.Easing.out(_reactNativeReanimated.Easing.ease)
-          });
-          translateX.value = (0, _reactNativeReanimated.withDecay)({
-            velocity: -evt.velocityX
-          });
-        }
-      }
-    },
-    onStart: function onStart() {
-      if (!isPinch.value) {
-        (0, _reactNativeReanimated.cancelAnimation)(translateX);
-        (0, _reactNativeReanimated.cancelAnimation)(translateY);
-        (0, _reactNativeReanimated.cancelAnimation)(scale);
-        offsetX.value = translateX.value;
-        offsetY.value = translateY.value;
       }
-
-      hasPinched.value = HasPinched.FALSE;
     }
-  }, [currentImageHeight, photoLength]);
-  var onPinch = (0, _reactNativeReanimated.useAnimatedGestureHandler)({
-    onActive: function onActive(evt) {
-      if (!isPinch.value && isAndroid) {
-        hasPinched.value = HasPinched.TRUE;
-        (0, _reactNativeReanimated.cancelAnimation)(translateX);
-        (0, _reactNativeReanimated.cancelAnimation)(translateY);
-        (0, _reactNativeReanimated.cancelAnimation)(scale);
-        isSwiping.value = IsSwiping.UNDETERMINED;
-        numberOfPinchFingers.value = evt.numberOfPointers;
-        offsetX.value = translateX.value;
-        offsetY.value = translateY.value;
-        adjustedFocalX.value = evt.focalX - (halfScreenWidth - offsetX.value);
-        adjustedFocalY.value = evt.focalY - (halfScreenHeight + offsetY.value);
-        originX.value = adjustedFocalX.value;
-        originY.value = adjustedFocalY.value;
-        offsetScale.value = scale.value;
-      }
-
-      isPinch.value = true;
-      scale.value = clamp(offsetScale.value * evt.scale, 1, 8);
-      var localEvtScale = scale.value / offsetScale.value;
-
-      if (scale.value !== 8 && scale.value !== 1) {
-        hasHitTopScale.value = 0;
-        hasHitBottomScale.value = 0;
-      } else if (scale.value === 8 && hasHitTopScale.value === 0) {
-        hasHitTopScale.value = 1;
-        (0, _reactNativeReanimated.runOnJS)(_native.triggerHaptic)('impactLight');
-      } else if (scale.value === 1 && hasHitBottomScale.value === 0) {
-        hasHitBottomScale.value = 1;
-        (0, _reactNativeReanimated.runOnJS)(_native.triggerHaptic)('impactLight');
-      }
-
-      adjustedFocalX.value = evt.focalX - (halfScreenWidth - offsetX.value);
-      adjustedFocalY.value = evt.focalY - (halfScreenHeight + offsetY.value);
-
-      if (numberOfPinchFingers.value !== evt.numberOfPointers) {
-        numberOfPinchFingers.value = evt.numberOfPointers;
-
-        if (evt.numberOfPointers === 1) {
-          focalOffsetX.value = oldFocalX.value - adjustedFocalX.value;
-          focalOffsetY.value = oldFocalY.value - adjustedFocalY.value;
-        } else if (numberOfPinchFingers.value > 1) {
-          originX.value = originX.value - (oldFocalX.value / localEvtScale - adjustedFocalX.value / localEvtScale);
-          originY.value = originY.value - (oldFocalY.value / localEvtScale - adjustedFocalY.value / localEvtScale);
-        }
-      }
+  }, [uriForCurrentImage]);
 
-      if (numberOfPinchFingers.value === 1) {
-        oldFocalX.value = adjustedFocalX.value + focalOffsetX.value;
-        oldFocalY.value = adjustedFocalY.value + focalOffsetY.value;
-        translateX.value = offsetX.value - oldFocalX.value + localEvtScale * originX.value;
-        translateY.value = offsetY.value + oldFocalY.value - localEvtScale * originY.value;
-      } else if (numberOfPinchFingers.value > 1) {
-        oldFocalX.value = adjustedFocalX.value;
-        oldFocalY.value = adjustedFocalY.value;
-        translateX.value = offsetX.value - adjustedFocalX.value + localEvtScale * originX.value;
-        translateY.value = offsetY.value + adjustedFocalY.value - localEvtScale * originY.value;
-      }
-    },
-    onFinish: function onFinish() {
-      if (isPinch.value) {
-        translateX.value = scale.value < 1 ? (0, _reactNativeReanimated.withTiming)(0) : translateX.value > halfScreenWidth * (scale.value - 1) ? (0, _reactNativeReanimated.withTiming)(halfScreenWidth * (scale.value - 1)) : translateX.value < -halfScreenWidth * (scale.value - 1) ? (0, _reactNativeReanimated.withTiming)(-halfScreenWidth * (scale.value - 1)) : translateX.value;
-        translateY.value = currentImageHeight * scale.value < screenHeight ? (0, _reactNativeReanimated.withTiming)(0) : translateY.value > currentImageHeight / 2 * scale.value - screenHeight / 2 ? (0, _reactNativeReanimated.withTiming)(currentImageHeight / 2 * scale.value - screenHeight / 2) : translateY.value < -currentImageHeight / 2 * scale.value + screenHeight / 2 ? (0, _reactNativeReanimated.withTiming)(-currentImageHeight / 2 * scale.value + screenHeight / 2) : translateY.value;
-        offsetScale.value = scale.value < 1 ? 1 : scale.value;
-        scale.value = scale.value < 1 ? (0, _reactNativeReanimated.withTiming)(1) : scale.value;
-        resetTouchValues();
-      }
-    },
-    onStart: function onStart(evt) {
-      if (!isAndroid) {
-        (0, _reactNativeReanimated.cancelAnimation)(translateX);
-        (0, _reactNativeReanimated.cancelAnimation)(translateY);
-        (0, _reactNativeReanimated.cancelAnimation)(scale);
-        isPinch.value = true;
-        isSwiping.value = IsSwiping.UNDETERMINED;
-        numberOfPinchFingers.value = evt.numberOfPointers;
-        offsetX.value = translateX.value;
-        offsetY.value = translateY.value;
-        adjustedFocalX.value = evt.focalX - (halfScreenWidth - offsetX.value);
-        adjustedFocalY.value = evt.focalY - (halfScreenHeight + offsetY.value);
-        originX.value = adjustedFocalX.value;
-        originY.value = adjustedFocalY.value;
-        offsetScale.value = scale.value;
-      }
+  var _useImageGalleryGestu = (0, _useImageGalleryGestures.useImageGalleryGestures)({
+    currentImageHeight: currentImageHeight,
+    halfScreenHeight: halfScreenHeight,
+    halfScreenWidth: halfScreenWidth,
+    headerFooterVisible: headerFooterVisible,
+    offsetScale: offsetScale,
+    overlayOpacity: overlayOpacity,
+    photoLength: photoLength,
+    scale: scale,
+    screenHeight: screenHeight,
+    screenWidth: screenWidth,
+    setSelectedIndex: setSelectedIndex,
+    translateX: translateX,
+    translateY: translateY,
+    translationX: translationX
+  }),
+      onDoubleTap = _useImageGalleryGestu.onDoubleTap,
+      onPan = _useImageGalleryGestu.onPan,
+      onPinch = _useImageGalleryGestu.onPinch,
+      onSingleTap = _useImageGalleryGestu.onSingleTap;
 
-      hasPinched.value = HasPinched.FALSE;
-    }
-  }, [currentImageHeight]);
-  var onSingleTap = (0, _reactNativeReanimated.useAnimatedGestureHandler)({
-    onActive: function onActive() {
-      (0, _reactNativeReanimated.cancelAnimation)(headerFooterVisible);
-      headerFooterVisible.value = headerFooterVisible.value > 0 ? (0, _reactNativeReanimated.withTiming)(0) : (0, _reactNativeReanimated.withTiming)(1);
-    }
-  });
-  var onDoubleTap = (0, _reactNativeReanimated.useAnimatedGestureHandler)({
-    onActive: function onActive(evt) {
-      if (Math.abs(tapX.value - evt.absoluteX) < 64 && Math.abs(tapY.value - evt.absoluteY) < 64) {
-        if (offsetScale.value === 1 && offsetX.value === 0 && offsetY.value === 0) {
-          offsetScale.value = 2;
-          scale.value = (0, _reactNativeReanimated.withTiming)(2, {
-            duration: 200,
-            easing: _reactNativeReanimated.Easing.out(_reactNativeReanimated.Easing.ease)
-          });
-          translateX.value = (0, _reactNativeReanimated.withTiming)(evt.absoluteX - halfScreenWidth, {
-            duration: 200,
-            easing: _reactNativeReanimated.Easing.out(_reactNativeReanimated.Easing.ease)
-          });
-
-          if (currentImageHeight * 2 > screenHeight) {
-            var translateYTopBottom = evt.absoluteY > halfScreenHeight ? -(currentImageHeight * 2 - screenHeight) / 2 : (currentImageHeight * 2 - screenHeight) / 2;
-            translateY.value = (0, _reactNativeReanimated.withTiming)(translateYTopBottom, {
-              duration: 200,
-              easing: _reactNativeReanimated.Easing.out(_reactNativeReanimated.Easing.ease)
-            });
-          }
-        } else {
-          offsetScale.value = 1;
-          scale.value = (0, _reactNativeReanimated.withTiming)(1, {
-            duration: 200,
-            easing: _reactNativeReanimated.Easing.out(_reactNativeReanimated.Easing.ease)
-          });
-          offsetX.value = 0;
-          offsetY.value = 0;
-          translateX.value = (0, _reactNativeReanimated.withTiming)(0, {
-            duration: 200,
-            easing: _reactNativeReanimated.Easing.out(_reactNativeReanimated.Easing.ease)
-          });
-          translateY.value = (0, _reactNativeReanimated.withTiming)(0, {
-            duration: 200,
-            easing: _reactNativeReanimated.Easing.out(_reactNativeReanimated.Easing.ease)
-          });
-
-          if (headerFooterVisible.value !== 0) {
-            (0, _reactNativeReanimated.cancelAnimation)(headerFooterVisible);
-            headerFooterVisible.value = (0, _reactNativeReanimated.withTiming)(0);
-          }
-        }
-      }
-    },
-    onStart: function onStart(evt) {
-      tapX.value = evt.absoluteX;
-      tapY.value = evt.absoluteY;
-    }
-  });
   var headerFooterOpacity = (0, _reactNativeReanimated.useDerivedValue)(function () {
     return currentImageHeight * scale.value < screenHeight && translateY.value > 0 ? 1 - translateY.value / quarterScreenHeight : currentImageHeight * scale.value > screenHeight && translateY.value > currentImageHeight / 2 * scale.value - halfScreenHeight ? 1 - (translateY.value - (currentImageHeight / 2 * scale.value - halfScreenHeight)) / quarterScreenHeight : 1;
   }, [currentImageHeight]);
@@ -580,13 +326,54 @@ var ImageGallery = function ImageGallery(props) {
     }
   };
 
+  var videoRef = (0, _react.useRef)(null);
+
+  var handleEnd = function handleEnd() {
+    setPaused(true);
+    setProgress(1);
+  };
+
+  var handleLoad = function handleLoad(payload) {
+    if (payload.duration) setDuration(payload.duration);
+  };
+
+  var handleProgress = function handleProgress(data) {
+    if (data.currentTime && data.seekableDuration) {
+      setProgress(data.currentTime / data.seekableDuration);
+    }
+  };
+
+  var handlePlayPause = function handlePlayPause() {
+    if (progress === 1 && videoRef.current && videoRef.current.seek) {
+      videoRef.current.seek(0);
+    }
+
+    if (progress === 1 && videoRef.current && videoRef.current.replayAsync) {
+      videoRef.current.replayAsync();
+    }
+
+    setPaused(function (state) {
+      return !state;
+    });
+  };
+
+  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);
+    }
+  };
+
   return _react["default"].createElement(_reactNativeReanimated["default"].View, {
     pointerEvents: 'auto',
     style: [_reactNative.StyleSheet.absoluteFillObject, showScreenStyle],
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 1051,
+      lineNumber: 492,
       columnNumber: 5
     }
   }, _react["default"].createElement(_reactNativeReanimated["default"].View, {
@@ -594,7 +381,7 @@ var ImageGallery = function ImageGallery(props) {
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 1052,
+      lineNumber: 493,
       columnNumber: 7
     }
   }), _react["default"].createElement(_reactNativeGestureHandler.TapGestureHandler, {
@@ -606,7 +393,7 @@ var ImageGallery = function ImageGallery(props) {
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 1053,
+      lineNumber: 494,
       columnNumber: 7
     }
   }, _react["default"].createElement(_reactNativeReanimated["default"].View, {
@@ -614,7 +401,7 @@ var ImageGallery = function ImageGallery(props) {
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 1060,
+      lineNumber: 501,
       columnNumber: 9
     }
   }, _react["default"].createElement(_reactNativeGestureHandler.TapGestureHandler, {
@@ -628,7 +415,7 @@ var ImageGallery = function ImageGallery(props) {
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 1061,
+      lineNumber: 502,
       columnNumber: 11
     }
   }, _react["default"].createElement(_reactNativeReanimated["default"].View, {
@@ -636,7 +423,7 @@ var ImageGallery = function ImageGallery(props) {
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 1070,
+      lineNumber: 511,
       columnNumber: 13
     }
   }, _react["default"].createElement(_reactNativeGestureHandler.PinchGestureHandler, {
@@ -646,7 +433,7 @@ var ImageGallery = function ImageGallery(props) {
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 1071,
+      lineNumber: 512,
       columnNumber: 15
     }
   }, _react["default"].createElement(_reactNativeReanimated["default"].View, {
@@ -654,7 +441,7 @@ var ImageGallery = function ImageGallery(props) {
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 1076,
+      lineNumber: 517,
       columnNumber: 17
     }
   }, _react["default"].createElement(_reactNativeGestureHandler.PanGestureHandler, {
@@ -667,7 +454,7 @@ var ImageGallery = function ImageGallery(props) {
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 1077,
+      lineNumber: 518,
       columnNumber: 19
     }
   }, _react["default"].createElement(_reactNativeReanimated["default"].View, {
@@ -675,7 +462,7 @@ var ImageGallery = function ImageGallery(props) {
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 1085,
+      lineNumber: 526,
       columnNumber: 21
     }
   }, _react["default"].createElement(_reactNativeReanimated["default"].View, {
@@ -689,11 +476,41 @@ var ImageGallery = function ImageGallery(props) {
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 1086,
+      lineNumber: 527,
       columnNumber: 23
     }
   }, photos.map(function (photo, i) {
-    return _react["default"].createElement(_AnimatedGalleryImage.AnimatedGalleryImage, {
+    return photo.type === 'video' ? _react["default"].createElement(_AnimatedGalleryVideo.AnimatedGalleryVideo, {
+      handleEnd: handleEnd,
+      handleLoad: handleLoad,
+      handleProgress: handleProgress,
+      index: i,
+      key: photo.uri + "-" + i,
+      offsetScale: offsetScale,
+      paused: paused,
+      previous: selectedIndex > i,
+      scale: scale,
+      screenHeight: screenHeight,
+      selected: selectedIndex === i,
+      shouldRender: Math.abs(selectedIndex - i) < 4,
+      source: {
+        uri: photo.uri
+      },
+      style: [{
+        height: screenHeight * 8,
+        marginRight: MARGIN,
+        width: screenWidth * 8
+      }, slide],
+      translateX: translateX,
+      translateY: translateY,
+      videoRef: videoRef,
+      __self: _this,
+      __source: {
+        fileName: _jsxFileName,
+        lineNumber: 544,
+        columnNumber: 29
+      }
+    }) : _react["default"].createElement(_AnimatedGalleryImage.AnimatedGalleryImage, {
       index: i,
       key: photo.uri + "-" + i,
       offsetScale: offsetScale,
@@ -713,8 +530,8 @@ var ImageGallery = function ImageGallery(props) {
       __self: _this,
       __source: {
         fileName: _jsxFileName,
-        lineNumber: 1102,
-        columnNumber: 27
+        lineNumber: 571,
+        columnNumber: 29
       }
     });
   })))))))))), _react["default"].createElement(_ImageGalleryHeader.ImageGalleryHeader, (0, _extends2["default"])({
@@ -725,21 +542,26 @@ var ImageGallery = function ImageGallery(props) {
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 1133,
+      lineNumber: 603,
       columnNumber: 7
     }
   })), _react["default"].createElement(_ImageGalleryFooter.ImageGalleryFooter, (0, _extends2["default"])({
+    duration: duration,
+    onPlayPause: handlePlayPause,
+    onProgressDrag: onProgressDrag,
     opacity: headerFooterOpacity,
     openGridView: openGridView,
+    paused: paused,
     photo: photos[selectedIndex],
     photoLength: photoLength,
+    progress: progress,
     selectedIndex: selectedIndex,
     visible: headerFooterVisible
   }, imageGalleryCustomComponents == null ? void 0 : imageGalleryCustomComponents.footer, {
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 1139,
+      lineNumber: 609,
       columnNumber: 7
     }
   })), _react["default"].createElement(_ImageGalleryOverlay.ImageGalleryOverlay, {
@@ -749,14 +571,14 @@ var ImageGallery = function ImageGallery(props) {
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 1148,
+      lineNumber: 624,
       columnNumber: 7
     }
   }), _react["default"].createElement(_bottomSheet.BottomSheetModalProvider, {
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 1153,
+      lineNumber: 629,
       columnNumber: 7
     }
   }, _react["default"].createElement(_bottomSheet.BottomSheetModal, {
@@ -769,7 +591,7 @@ var ImageGallery = function ImageGallery(props) {
         __self: _this,
         __source: {
           fileName: _jsxFileName,
-          lineNumber: 1158,
+          lineNumber: 634,
           columnNumber: 13
         }
       }));
@@ -784,7 +606,7 @@ var ImageGallery = function ImageGallery(props) {
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 1154,
+      lineNumber: 630,
       columnNumber: 9
     }
   }, _react["default"].createElement(_ImageGrid.ImageGrid, (0, _extends2["default"])({
@@ -796,7 +618,7 @@ var ImageGallery = function ImageGallery(props) {
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 1169,
+      lineNumber: 645,
       columnNumber: 11
     }
   })))));