fix: improve state usage

Author: khushal87

package/src/components/ImageGallery/ImageGallery.tsx

@@ -125,7 +125,7 @@ export const ImageGallery = (props: Props) => {
   } = useTheme();
   const { imageGalleryStateStore } = useImageGalleryContext();
   const { currentIndex } = useStateStore(imageGalleryStateStore.state, imageGallerySelector);
-  const assets = imageGalleryStateStore.assets;
+  const { assets, videoPlayerPool } = imageGalleryStateStore;
 
   const { vh, vw } = useViewport();
 
@@ -230,11 +230,12 @@ export const ImageGallery = (props: Props) => {
 
   // If you change the current index, pause the active video player.
   useEffect(() => {
-    const actvivePlayer = imageGalleryStateStore.videoPlayerPool.getActivePlayer();
-    if (actvivePlayer) {
-      actvivePlayer.pause();
+    const activePlayer = videoPlayerPool.getActivePlayer();
+
+    if (activePlayer) {
+      activePlayer.pause();
     }
-  }, [currentIndex, imageGalleryStateStore.videoPlayerPool]);
+  }, [currentIndex, videoPlayerPool]);
 
   const { doubleTap, pan, pinch, singleTap } = useImageGalleryGestures({
     currentImageHeight,

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

@@ -17,7 +17,7 @@ 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 { useVideoPlayer } from '../hooks/useVideoPlayer';
+import { useImageGalleryVideoPlayer } from '../hooks/useImageGalleryVideoPlayer';
 import { Photo } from '../ImageGallery';
 
 const oneEighth = 1 / 8;
@@ -49,10 +49,7 @@ const styles = StyleSheet.create({
 });
 
 const videoPlayerSelector = (state: VideoPlayerState) => ({
-  duration: state.duration,
   isPlaying: state.isPlaying,
-  position: state.position,
-  progress: state.progress,
 });
 
 export const AnimatedGalleryVideo = React.memo(
@@ -77,7 +74,7 @@ export const AnimatedGalleryVideo = React.memo(
 
     const videoRef = useRef<VideoType>(null);
 
-    const videoPlayer = useVideoPlayer({
+    const videoPlayer = useImageGalleryVideoPlayer({
       id: attachmentId,
     });
 

package/src/components/ImageGallery/components/ImageGalleryVideoControl.tsx

@@ -10,7 +10,7 @@ import { Pause, Play } from '../../../icons';
 import { VideoPlayerState } from '../../../state-store/video-player';
 import { getDurationLabelFromDuration } from '../../../utils/utils';
 import { ProgressControl } from '../../ProgressControl/ProgressControl';
-import { useVideoPlayer } from '../hooks/useVideoPlayer';
+import { useImageGalleryVideoPlayer } from '../hooks/useImageGalleryVideoPlayer';
 
 const styles = StyleSheet.create({
   durationTextStyle: {
@@ -52,7 +52,7 @@ const videoPlayerSelector = (state: VideoPlayerState) => ({
 export const ImageGalleryVideoControl = React.memo((props: ImageGalleryFooterVideoControlProps) => {
   const { attachmentId } = props;
 
-  const videoPlayer = useVideoPlayer({
+  const videoPlayer = useImageGalleryVideoPlayer({
     id: attachmentId,
   });
 

…nts/ImageGallery/hooks/useVideoPlayer.ts …lery/hooks/useImageGalleryVideoPlayer.tspackage/src/components/ImageGallery/hooks/useVideoPlayer.ts renamed to package/src/components/ImageGallery/hooks/useImageGalleryVideoPlayer.ts package/src/components/ImageGallery/hooks/useVideoPlayer.ts renamed to package/src/components/ImageGallery/hooks/useImageGalleryVideoPlayer.ts

@@ -3,18 +3,21 @@ import { useMemo } from 'react';
 import { useImageGalleryContext } from '../../../contexts/imageGalleryContext/ImageGalleryContext';
 import { VideoPlayerOptions } from '../../../state-store/video-player';
 
-export type UseVideoPlayerProps = VideoPlayerOptions;
+export type UseImageGalleryVideoPlayerProps = VideoPlayerOptions;
 
 /**
  * Hook to get the video player instance.
  * @param options - The options for the video player.
  * @returns The video player instance.
  */
-export const useVideoPlayer = (options: UseVideoPlayerProps) => {
-  const { imageGalleryStateStore } = useImageGalleryContext();
+export const useImageGalleryVideoPlayer = (options: UseImageGalleryVideoPlayerProps) => {
+  const { autoPlayVideo, imageGalleryStateStore } = useImageGalleryContext();
   const videoPlayer = useMemo(() => {
-    return imageGalleryStateStore.videoPlayerPool.getOrAddPlayer(options);
-  }, [imageGalleryStateStore, options]);
+    return imageGalleryStateStore.videoPlayerPool.getOrAddPlayer({
+      ...options,
+      autoPlay: autoPlayVideo,
+    });
+  }, [autoPlayVideo, imageGalleryStateStore, options]);
 
   return videoPlayer;
 };

package/src/components/index.ts

@@ -81,6 +81,8 @@ export * from './ImageGallery/components/ImageGalleryHeader';
 export * from './ImageGallery/components/ImageGalleryOverlay';
 export * from './ImageGallery/components/ImageGrid';
 export * from './ImageGallery/components/ImageGridHandle';
+export * from './ImageGallery/components/ImageGalleryVideoControl';
+export * from './ImageGallery/hooks/useImageGalleryVideoPlayer';
 
 export * from './Indicators/EmptyStateIndicator';
 export * from './Indicators/LoadingDot';

package/src/contexts/imageGalleryContext/ImageGalleryContext.tsx

@@ -1,23 +1,31 @@
-import React, { PropsWithChildren, useContext, useEffect, useState } from 'react';
+import React, { PropsWithChildren, useContext, useEffect, useMemo, useState } from 'react';
+
+import { Attachment } from 'stream-chat';
 
 import { ImageGalleryStateStore } from '../../state-store/image-gallery-state-store';
-import type { UnknownType } from '../../types/types';
 import { DEFAULT_BASE_CONTEXT_VALUE } from '../utils/defaultBaseContextValue';
 
 import { isTestEnvironment } from '../utils/isTestEnvironment';
 
 export type ImageGalleryContextValue = {
+  autoPlayVideo?: boolean;
   imageGalleryStateStore: ImageGalleryStateStore;
 };
 
+export type ImageGalleryProviderProps = {
+  autoPlayVideo?: boolean;
+  giphyVersion?: keyof NonNullable<Attachment['giphy']>;
+};
+
 export const ImageGalleryContext = React.createContext(
   DEFAULT_BASE_CONTEXT_VALUE as ImageGalleryContextValue,
 );
 
-export const ImageGalleryProvider = ({ children }: PropsWithChildren<UnknownType>) => {
-  const [imageGalleryStateStore] = useState(
-    () => new ImageGalleryStateStore({ autoPlayVideo: false, giphyVersion: 'fixed_height' }),
-  );
+export const ImageGalleryProvider = ({
+  children,
+  value,
+}: PropsWithChildren<{ value: ImageGalleryProviderProps }>) => {
+  const [imageGalleryStateStore] = useState(() => new ImageGalleryStateStore(value));
 
   useEffect(() => {
     const unsubscribe = imageGalleryStateStore.registerSubscriptions();
@@ -26,13 +34,17 @@ export const ImageGalleryProvider = ({ children }: PropsWithChildren<UnknownType
     };
   }, [imageGalleryStateStore]);
 
+  const imageGalleryContextValue = useMemo(
+    () => ({
+      autoPlayVideo: value?.autoPlayVideo,
+      imageGalleryStateStore,
+    }),
+    [value?.autoPlayVideo, imageGalleryStateStore],
+  );
+
   return (
     <ImageGalleryContext.Provider
-      value={
-        {
-          imageGalleryStateStore,
-        } as unknown as ImageGalleryContextValue
-      }
+      value={imageGalleryContextValue as unknown as ImageGalleryContextValue}
     >
       {children}
     </ImageGalleryContext.Provider>

package/src/contexts/overlayContext/OverlayProvider.tsx

@@ -1,4 +1,4 @@
-import React, { PropsWithChildren, useEffect, useState } from 'react';
+import React, { PropsWithChildren, useEffect, useMemo, useState } from 'react';
 
 import { BackHandler } from 'react-native';
 
@@ -10,7 +10,10 @@ import { ImageGallery } from '../../components/ImageGallery/ImageGallery';
 
 import { useStreami18n } from '../../hooks/useStreami18n';
 
-import { ImageGalleryProvider } from '../imageGalleryContext/ImageGalleryContext';
+import {
+  ImageGalleryProvider,
+  ImageGalleryProviderProps,
+} from '../imageGalleryContext/ImageGalleryContext';
 import { ThemeProvider } from '../themeContext/ThemeContext';
 import {
   DEFAULT_USER_LANGUAGE,
@@ -82,6 +85,14 @@ export const OverlayProvider = (props: PropsWithChildren<OverlayProviderProps>)
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [overlay]);
 
+  const imageGalleryProviderProps: ImageGalleryProviderProps = useMemo(
+    () => ({
+      autoPlayVideo,
+      giphyVersion,
+    }),
+    [autoPlayVideo, giphyVersion],
+  );
+
   const overlayContext = {
     overlay,
     setOverlay,
@@ -91,13 +102,11 @@ export const OverlayProvider = (props: PropsWithChildren<OverlayProviderProps>)
   return (
     <TranslationProvider value={{ ...translators, userLanguage: DEFAULT_USER_LANGUAGE }}>
       <OverlayContext.Provider value={overlayContext}>
-        <ImageGalleryProvider>
+        <ImageGalleryProvider value={imageGalleryProviderProps}>
           <ThemeProvider style={overlayContext.style}>
             {children}
             {overlay === 'gallery' && (
               <ImageGallery
-                autoPlayVideo={autoPlayVideo}
-                giphyVersion={giphyVersion}
                 imageGalleryCustomComponents={imageGalleryCustomComponents}
                 imageGalleryGridHandleHeight={imageGalleryGridHandleHeight}
                 imageGalleryGridSnapPoints={imageGalleryGridSnapPoints}

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

@@ -48,7 +48,7 @@ export class ImageGalleryStateStore {
   options: ImageGalleryOptions;
   videoPlayerPool: VideoPlayerPool;
 
-  constructor(options: Partial<ImageGalleryOptions>) {
+  constructor(options: Partial<ImageGalleryOptions> = {}) {
     this.options = { ...INITIAL_IMAGE_GALLERY_OPTIONS, ...options };
     this.state = new StateStore<ImageGalleryState>(INITIAL_STATE);
     this.videoPlayerPool = new VideoPlayerPool();
@@ -145,33 +145,16 @@ export class ImageGalleryStateStore {
             asset.messageId === message?.id &&
             stripQueryFromUrl(asset.uri) === stripQueryFromUrl(selectedAttachmentUrl ?? ''),
         );
-        console.log('index', index);
         this.state.partialNext({ currentIndex: index === -1 ? 0 : index });
       },
     );
 
     return unsubscribe;
   };
 
-  addVideosToPool = () => {
-    const message = this.message;
-    const attachments = this.attachments;
-    const videoAttachments = attachments.filter(
-      (attachment) => attachment.type === FileTypes.Video,
-    );
-    videoAttachments.forEach((attachment) => {
-      const assetId = this.getAssetId(message?.id ?? '', attachment.asset_url ?? '');
-      this.videoPlayerPool.getOrAddPlayer({
-        autoPlay: this.options.autoPlayVideo,
-        id: assetId,
-      });
-    });
-  };
-
   registerSubscriptions = () => {
     const subscriptions: Unsubscribe[] = [];
     subscriptions.push(this.subscribeToSelectedAttachmentUrl());
-    this.addVideosToPool();
 
     return () => {
       subscriptions.forEach((subscription) => subscription());

package/src/state-store/index.ts

@@ -1,3 +1,6 @@
-export * from './audio-player';
 export * from './in-app-notifications-store';
+export * from './audio-player';
 export * from './audio-player-pool';
+export * from './video-player';
+export * from './video-player.pool';
+export * from './image-gallery-state-store';