fix: indexing

Author: khushal87

package/src/components/ImageGallery/components/AnimatedGalleryImage.tsx

@@ -4,45 +4,49 @@ import type { ImageStyle, StyleProp } from 'react-native';
 import Animated, { SharedValue } from 'react-native-reanimated';
 
 import { useChatConfigContext } from '../../../contexts/chatConfigContext/ChatConfigContext';
+import { useImageGalleryContext } from '../../../contexts/imageGalleryContext/ImageGalleryContext';
+import { useStateStore } from '../../../hooks/useStateStore';
+import {
+  ImageGalleryAsset,
+  ImageGalleryState,
+} from '../../../state-store/image-gallery-state-store';
 import { getResizedImageUrl } from '../../../utils/getResizedImageUrl';
 import { useAnimatedGalleryStyle } from '../hooks/useAnimatedGalleryStyle';
 
 const oneEighth = 1 / 8;
 
 type Props = {
   accessibilityLabel: string;
-  index: number;
   offsetScale: SharedValue<number>;
-  photo: { uri: string };
-  previous: boolean;
+  photo: ImageGalleryAsset;
   scale: SharedValue<number>;
   screenHeight: number;
   screenWidth: number;
-  selected: boolean;
-  shouldRender: boolean;
   translateX: SharedValue<number>;
   translateY: SharedValue<number>;
   style?: StyleProp<ImageStyle>;
 };
 
+const imageGallerySelector = (state: ImageGalleryState) => ({
+  currentIndex: state.currentIndex,
+});
+
 export const AnimatedGalleryImage = React.memo(
   (props: Props) => {
     const {
       accessibilityLabel,
-      index,
       offsetScale,
       photo,
-      previous,
       scale,
       screenHeight,
       screenWidth,
-      selected,
-      shouldRender,
       style,
       translateX,
       translateY,
     } = props;
     const { resizableCDNHosts } = useChatConfigContext();
+    const { imageGalleryStateStore } = useImageGalleryContext();
+    const { currentIndex } = useStateStore(imageGalleryStateStore.state, imageGallerySelector);
 
     const uri = useMemo(() => {
       return getResizedImageUrl({
@@ -53,17 +57,21 @@ export const AnimatedGalleryImage = React.memo(
       });
     }, [photo.uri, resizableCDNHosts, screenHeight, screenWidth]);
 
+    const index = photo.index;
+
     const animatedStyles = useAnimatedGalleryStyle({
       index,
       offsetScale,
-      previous,
+      previous: currentIndex > index,
       scale,
       screenHeight,
-      selected,
+      selected: currentIndex === index,
       translateX,
       translateY,
     });
 
+    const shouldRender = Math.abs(currentIndex - index) < 4;
+
     /**
      * An empty view is rendered for images not close to the currently
      * selected in order to maintain spacing while reducing the image
@@ -84,11 +92,7 @@ export const AnimatedGalleryImage = React.memo(
   },
   (prevProps, nextProps) => {
     if (
-      prevProps.selected === nextProps.selected &&
-      prevProps.shouldRender === nextProps.shouldRender &&
       prevProps.photo.uri === nextProps.photo.uri &&
-      prevProps.previous === nextProps.previous &&
-      prevProps.index === nextProps.index &&
       prevProps.screenHeight === nextProps.screenHeight &&
       prevProps.screenWidth === nextProps.screenWidth
     ) {

package/src/components/ImageGallery/components/AnimatedGalleryVideo.tsx

@@ -3,6 +3,7 @@ import { StyleSheet, View, ViewStyle } from 'react-native';
 import type { StyleProp } from 'react-native';
 import Animated, { SharedValue } from 'react-native-reanimated';
 
+import { useImageGalleryContext } from '../../../contexts/imageGalleryContext/ImageGalleryContext';
 import { useStateStore } from '../../../hooks/useStateStore';
 import {
   isVideoPlayerAvailable,
@@ -13,28 +14,26 @@ import {
   VideoType,
 } from '../../../native';
 
+import {
+  ImageGalleryAsset,
+  ImageGalleryState,
+} from '../../../state-store/image-gallery-state-store';
 import { VideoPlayerState } from '../../../state-store/video-player';
 import { ONE_SECOND_IN_MILLISECONDS } from '../../../utils/constants';
 import { Spinner } from '../../UIComponents/Spinner';
 import { useAnimatedGalleryStyle } from '../hooks/useAnimatedGalleryStyle';
 import { useImageGalleryVideoPlayer } from '../hooks/useImageGalleryVideoPlayer';
-import { Photo } from '../ImageGallery';
 
 const oneEighth = 1 / 8;
 
 export type AnimatedGalleryVideoType = {
   attachmentId: string;
-  index: number;
   offsetScale: SharedValue<number>;
-  previous: boolean;
   scale: SharedValue<number>;
   screenHeight: number;
-  selected: boolean;
-  shouldRender: boolean;
-  photo: Photo;
+  photo: ImageGalleryAsset;
   translateX: SharedValue<number>;
   translateY: SharedValue<number>;
-  repeat?: boolean;
   style?: StyleProp<ViewStyle>;
 };
 
@@ -52,25 +51,18 @@ const videoPlayerSelector = (state: VideoPlayerState) => ({
   isPlaying: state.isPlaying,
 });
 
+const imageGallerySelector = (state: ImageGalleryState) => ({
+  currentIndex: state.currentIndex,
+});
+
 export const AnimatedGalleryVideo = React.memo(
   (props: AnimatedGalleryVideoType) => {
+    const { imageGalleryStateStore } = useImageGalleryContext();
     const [opacity, setOpacity] = useState<number>(1);
+    const { currentIndex } = useStateStore(imageGalleryStateStore.state, imageGallerySelector);
 
-    const {
-      attachmentId,
-      index,
-      offsetScale,
-      previous,
-      repeat,
-      scale,
-      screenHeight,
-      selected,
-      shouldRender,
-      style,
-      photo,
-      translateX,
-      translateY,
-    } = props;
+    const { attachmentId, offsetScale, scale, screenHeight, style, photo, translateX, translateY } =
+      props;
 
     const videoRef = useRef<VideoType>(null);
 
@@ -140,17 +132,21 @@ export const AnimatedGalleryVideo = React.memo(
       }
     };
 
+    const index = photo.index;
+
     const animatedStyles = useAnimatedGalleryStyle({
       index,
       offsetScale,
-      previous,
+      previous: currentIndex > index,
       scale,
       screenHeight,
-      selected,
+      selected: currentIndex === index,
       translateX,
       translateY,
     });
 
+    const shouldRender = Math.abs(currentIndex - index) < 4;
+
     /**
      * An empty view is rendered for images not close to the currently
      * selected in order to maintain spacing while reducing the image
@@ -176,7 +172,7 @@ export const AnimatedGalleryVideo = React.memo(
             onPlaybackStatusUpdate={onPlayBackStatusUpdate}
             onProgress={onProgress}
             paused={!isPlaying}
-            repeat={repeat}
+            repeat={true}
             resizeMode='contain'
             style={style}
             testID='video-player'
@@ -205,15 +201,7 @@ export const AnimatedGalleryVideo = React.memo(
   },
 
   (prevProps, nextProps) => {
-    if (
-      prevProps.repeat === nextProps.repeat &&
-      prevProps.shouldRender === nextProps.shouldRender &&
-      prevProps.screenHeight === nextProps.screenHeight &&
-      prevProps.selected === nextProps.selected &&
-      prevProps.previous === nextProps.previous &&
-      prevProps.index === nextProps.index &&
-      prevProps.photo === nextProps.photo
-    ) {
+    if (prevProps.screenHeight === nextProps.screenHeight && prevProps.photo === nextProps.photo) {
       return true;
     }
     return false;

package/src/state-store/image-gallery-state-store.ts

@@ -9,6 +9,7 @@ import { getUrlOfImageAttachment } from '../utils/getUrlOfImageAttachment';
 
 export type ImageGalleryAsset = {
   id: string;
+  index: number;
   uri: string;
   channelId?: string;
   created_at?: string | Date;
@@ -112,7 +113,7 @@ export class ImageGalleryStateStore {
     const attachmentsWithMessage = this.attachmentsWithMessage;
     const { giphyVersion = 'fixed_height' } = this.options;
 
-    return attachmentsWithMessage.flatMap(({ message, attachments }) => {
+    return attachmentsWithMessage.flatMap(({ message, attachments }, index) => {
       return attachments.map((attachment) => {
         const assetUrl = getUrlOfImageAttachment(attachment, giphyVersion) as string;
         const assetId = this.getAssetId(message?.id ?? '', assetUrl);
@@ -124,6 +125,7 @@ export class ImageGalleryStateStore {
           channelId: message?.cid,
           created_at: message?.created_at,
           id: assetId,
+          index,
           messageId: message?.id,
           mime_type: attachment.type === 'giphy' ? giphyMimeType : attachment.mime_type,
           original_height: attachment.original_height,