stream-chat-react-native-core 5.0.0-offline-support.12 → 5.0.0

package/src/components/Attachment/Giphy.tsx

@@ -134,7 +134,7 @@ const styles = StyleSheet.create({
 
 export type GiphyPropsWithContext<
   StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
-> = Pick<ImageGalleryContextValue<StreamChatGenerics>, 'setImage' | 'setImages'> &
+> = Pick<ImageGalleryContextValue<StreamChatGenerics>, 'setSelectedMessage' | 'setMessages'> &
   Pick<
     MessageContextValue<StreamChatGenerics>,
     | 'handleAction'
@@ -173,9 +173,9 @@ const GiphyWithContext = <
     onPress,
     onPressIn,
     preventPress,
-    setImage,
-    setImages,
+    setMessages,
     setOverlay,
+    setSelectedMessage,
   } = props;
 
   const { actions, giphy: giphyData, image_url, thumb_url, title, type } = attachment;
@@ -210,8 +210,8 @@ const GiphyWithContext = <
   const giphyDimensions: { height?: number; width?: number } = {};
 
   const defaultOnPress = () => {
-    setImages([message]);
-    setImage({ messageId: message.id, url: uri });
+    setMessages([message]);
+    setSelectedMessage({ messageId: message.id, url: uri });
     setOverlay('gallery');
   };
 
@@ -391,11 +391,13 @@ const areEqual = <StreamChatGenerics extends DefaultStreamChatGenerics = Default
     attachment: { actions: prevActions, image_url: prevImageUrl, thumb_url: prevThumbUrl },
     giphyVersion: prevGiphyVersion,
     isMyMessage: prevIsMyMessage,
+    message: prevMessage,
   } = prevProps;
   const {
     attachment: { actions: nextActions, image_url: nextImageUrl, thumb_url: nextThumbUrl },
     giphyVersion: nextGiphyVersion,
     isMyMessage: nextIsMyMessage,
+    message: nextMessage,
   } = nextProps;
 
   const imageUrlEqual = prevImageUrl === nextImageUrl;
@@ -418,6 +420,11 @@ const areEqual = <StreamChatGenerics extends DefaultStreamChatGenerics = Default
   const isMyMessageEqual = prevIsMyMessage === nextIsMyMessage;
   if (!isMyMessageEqual) return false;
 
+  const messageEqual =
+    prevMessage?.id === nextMessage?.id &&
+    `${prevMessage?.updated_at}` === `${nextMessage?.updated_at}`;
+
+  if (!messageEqual) return false;
   return true;
 };
 
@@ -440,7 +447,7 @@ export const Giphy = <
   const { handleAction, isMyMessage, message, onLongPress, onPress, onPressIn, preventPress } =
     useMessageContext<StreamChatGenerics>();
   const { additionalTouchableProps, giphyVersion } = useMessagesContext<StreamChatGenerics>();
-  const { setImage, setImages } = useImageGalleryContext<StreamChatGenerics>();
+  const { setMessages, setSelectedMessage } = useImageGalleryContext<StreamChatGenerics>();
   const { setOverlay } = useOverlayContext();
 
   const {
@@ -465,9 +472,9 @@ export const Giphy = <
         onPress,
         onPressIn,
         preventPress,
-        setImage,
-        setImages,
+        setMessages,
         setOverlay,
+        setSelectedMessage,
       }}
       {...props}
     />

package/src/components/Attachment/VideoThumbnail.tsx

@@ -40,6 +40,7 @@ export type VideoThumbnailProps = {
 export const VideoThumbnail: React.FC<VideoThumbnailProps> = (props) => {
   const {
     theme: {
+      colors: { static_black, static_white },
       messageSimple: {
         videoThumbnail: { container, roundedView },
       },
@@ -53,8 +54,8 @@ export const VideoThumbnail: React.FC<VideoThumbnailProps> = (props) => {
       source={{ uri: thumb_url }}
       style={[styles.container, container, style]}
     >
-      <View style={[styles.roundedView, roundedView]}>
-        <Play height={24} pathFill={'#000'} width={24} />
+      <View style={[styles.roundedView, roundedView, { backgroundColor: static_white }]}>
+        <Play height={24} pathFill={static_black} width={24} />
       </View>
     </ImageBackground>
   );

package/src/components/Attachment/utils/getGiphyMimeType.ts

@@ -0,0 +1,13 @@
+/**
+ *
+ * @param giphyUrl The giphy attachment url
+ * @returns mimeType for the giphy attachment
+ */
+export function getGiphyMimeType(giphyUrl: string): string {
+  if (giphyUrl.includes('.mp4')) {
+    return 'video/mp4';
+  } else if (giphyUrl.includes('.webp')) {
+    return 'image/webp';
+  }
+  return 'image/gif';
+}

package/src/components/Channel/Channel.tsx

@@ -76,6 +76,7 @@ import type { DefaultStreamChatGenerics } from '../../types/types';
 import { generateRandomId, MessageStatusTypes, ReactionData } from '../../utils/utils';
 import { Attachment as AttachmentDefault } from '../Attachment/Attachment';
 import { AttachmentActions as AttachmentActionsDefault } from '../Attachment/AttachmentActions';
+import { AudioAttachment as AudioAttachmentDefault } from '../Attachment/AudioAttachment';
 import { Card as CardDefault } from '../Attachment/Card';
 import { FileAttachment as FileAttachmentDefault } from '../Attachment/FileAttachment';
 import { FileAttachmentGroup as FileAttachmentGroupDefault } from '../Attachment/FileAttachmentGroup';
@@ -107,7 +108,6 @@ import { MessageSimple as MessageSimpleDefault } from '../Message/MessageSimple/
 import { MessageStatus as MessageStatusDefault } from '../Message/MessageSimple/MessageStatus';
 import { ReactionList as ReactionListDefault } from '../Message/MessageSimple/ReactionList';
 import { AttachButton as AttachButtonDefault } from '../MessageInput/AttachButton';
-import { AudioAttachmentUploadPreview as AudioAttachmentUploadPreviewDefault } from '../MessageInput/AudioAttachmentUploadPreview';
 import { CommandsButton as CommandsButtonDefault } from '../MessageInput/CommandsButton';
 import { InputEditingStateHeader as InputEditingStateHeaderDefault } from '../MessageInput/components/InputEditingStateHeader';
 import { InputGiphySearch as InputGiphyCommandInputDefault } from '../MessageInput/components/InputGiphySearch';
@@ -223,6 +223,7 @@ export type ChannelPropsWithContext<
       | 'additionalTouchableProps'
       | 'Attachment'
       | 'AttachmentActions'
+      | 'AudioAttachment'
       | 'Card'
       | 'CardCover'
       | 'CardFooter'
@@ -391,7 +392,7 @@ const ChannelWithContext = <
     AttachButton = AttachButtonDefault,
     Attachment = AttachmentDefault,
     AttachmentActions = AttachmentActionsDefault,
-    AudioAttachmentUploadPreview = AudioAttachmentUploadPreviewDefault,
+    AudioAttachment = AudioAttachmentDefault,
     AutoCompleteSuggestionHeader = AutoCompleteSuggestionHeaderDefault,
     AutoCompleteSuggestionItem = AutoCompleteSuggestionItemDefault,
     AutoCompleteSuggestionList = AutoCompleteSuggestionListDefault,
@@ -576,7 +577,7 @@ const ChannelWithContext = <
   const channelId = channel?.id || '';
   useEffect(() => {
     const initChannel = () => {
-      if (!channel || !shouldSyncChannel || channel.staticState) return;
+      if (!channel || !shouldSyncChannel || channel.offlineMode) return;
       /**
        * Loading channel at first unread message  requires channel to be initialized in the first place,
        * since we use read state on channel to decide what offset to load channel at.
@@ -1584,7 +1585,6 @@ const ChannelWithContext = <
   const inputMessageInputContext = useCreateInputMessageInputContext<StreamChatGenerics>({
     additionalTextInputProps,
     AttachButton,
-    AudioAttachmentUploadPreview,
     autoCompleteSuggestionsLimit,
     autoCompleteTriggerSettings,
     channelId,
@@ -1644,6 +1644,7 @@ const ChannelWithContext = <
     additionalTouchableProps,
     Attachment,
     AttachmentActions,
+    AudioAttachment,
     Card,
     CardCover,
     CardFooter,

package/src/components/Channel/hooks/useCreateInputMessageInputContext.ts

@@ -8,7 +8,6 @@ export const useCreateInputMessageInputContext = <
 >({
   additionalTextInputProps,
   AttachButton,
-  AudioAttachmentUploadPreview,
   autoCompleteSuggestionsLimit,
   autoCompleteTriggerSettings,
   channelId,
@@ -65,7 +64,6 @@ export const useCreateInputMessageInputContext = <
     () => ({
       additionalTextInputProps,
       AttachButton,
-      AudioAttachmentUploadPreview,
       autoCompleteSuggestionsLimit,
       autoCompleteTriggerSettings,
       clearEditingState,

package/src/components/Channel/hooks/useCreateMessagesContext.ts

@@ -9,6 +9,7 @@ export const useCreateMessagesContext = <
   additionalTouchableProps,
   Attachment,
   AttachmentActions,
+  AudioAttachment,
   Card,
   CardCover,
   CardFooter,
@@ -99,6 +100,7 @@ export const useCreateMessagesContext = <
       additionalTouchableProps,
       Attachment,
       AttachmentActions,
+      AudioAttachment,
       Card,
       CardCover,
       CardFooter,

package/src/components/ChannelList/__tests__/ChannelList.test.js

@@ -246,6 +246,34 @@ describe('ChannelList', () => {
         });
       });
 
+      it('should add channel to top if channel is hidden from the list', async () => {
+        const { getAllByRole, getByTestId, getByText } = render(
+          <Chat client={chatClient}>
+            <ChannelList {...props} />
+          </Chat>,
+        );
+
+        await waitFor(() => expect(getByTestId('channel-list')).toBeTruthy());
+        act(() => dispatchChannelHiddenEvent(chatClient, testChannel3.channel));
+
+        const newItems = getAllByRole('list-item');
+        await waitFor(() => {
+          expect(newItems).toHaveLength(2);
+        });
+
+        const newMessage = sendNewMessageOnChannel3();
+
+        await waitFor(() => {
+          expect(getByText(newMessage.text)).toBeTruthy();
+        });
+
+        const items = getAllByRole('list-item');
+
+        await waitFor(() => {
+          expect(within(items[0]).getByText(newMessage.text)).toBeTruthy();
+        });
+      });
+
       it('should not alter order if `lockChannelOrder` prop is true', async () => {
         const { getAllByRole, getByTestId, getByText } = render(
           <Chat client={chatClient}>

package/src/components/ChannelList/hooks/listeners/useNewMessage.ts

@@ -24,11 +24,24 @@ export const useNewMessage = <
   useEffect(() => {
     const handleEvent = (event: Event<StreamChatGenerics>) => {
       setChannels((channels) => {
-        if (!lockChannelOrder && event.cid) {
-          return moveChannelUp<StreamChatGenerics>({
-            channels,
-            cid: event.cid,
-          });
+        if (!lockChannelOrder && event.cid && event.channel_type && event.channel_id) {
+          const targetChannelIndex = channels.findIndex((c) => c.cid === event.cid);
+
+          if (targetChannelIndex >= 0) {
+            return moveChannelUp<StreamChatGenerics>({
+              channels,
+              cid: event.cid,
+            });
+          }
+
+          // If channel doesn't exist in existing list, check in activeChannels as well.
+          // It may happen that channel was hidden using channel.hide(). In that case
+          // We remove it from `channels` state, but its still being watched and exists in client.activeChannels.
+          const channel = client.channel(event.channel_type, event.channel_id);
+
+          if (channel.initialized) {
+            return [channel, ...channels];
+          }
         }
 
         return [...channels];

package/src/components/ChannelList/hooks/usePaginatedChannels.ts

@@ -6,7 +6,7 @@ import { useActiveChannelsRefContext } from '../../../contexts/activeChannelsRef
 import { useChatContext } from '../../../contexts/chatContext/ChatContext';
 import { useIsMountedRef } from '../../../hooks/useIsMountedRef';
 
-import { getChannels } from '../../../store/apis/getChannels';
+import { getChannelsForFilterSort } from '../../../store/apis/getChannelsForFilterSort';
 import type { DefaultStreamChatGenerics } from '../../../types/types';
 import { ONE_SECOND_IN_MS } from '../../../utils/date';
 import { MAX_QUERY_CHANNELS_LIMIT } from '../utils';
@@ -44,8 +44,10 @@ export const usePaginatedChannels = <
   sort = {},
 }: Parameters<StreamChatGenerics>) => {
   const { client } = useChatContext<StreamChatGenerics>();
-
-  const [channels, setChannels] = useState<Channel<StreamChatGenerics>[]>([]);
+  const initialChannelsStateRef = useRef([]);
+  const [channels, setChannels] = useState<Channel<StreamChatGenerics>[]>(
+    initialChannelsStateRef.current,
+  );
   const [staticChannelsActive, setStaticChannelsActive] = useState<boolean>(true);
   const activeChannels = useActiveChannelsRefContext();
 
@@ -181,12 +183,19 @@ export const usePaginatedChannels = <
       if (!client?.user?.id) return;
       if (enableOfflineSupport) {
         try {
-          const channelsFromDB = getChannels({ currentUserId: client.user.id, filters, sort });
-          setChannels(
-            client.hydrateActiveChannels(channelsFromDB, {
-              staticState: true,
-            }),
-          );
+          const channelsFromDB = getChannelsForFilterSort({
+            currentUserId: client.user.id,
+            filters,
+            sort,
+          });
+
+          if (channelsFromDB) {
+            setChannels(
+              client.hydrateActiveChannels(channelsFromDB, {
+                offlineMode: true,
+              }),
+            );
+          }
         } catch (e) {
           console.warn('Failed to get channels from database: ', e);
         }
@@ -205,7 +214,7 @@ export const usePaginatedChannels = <
     loadingChannels:
       activeQueryType === 'queryLocalDB'
         ? true
-        : activeQueryType === 'reload' && channels.length === 0,
+        : activeQueryType === 'reload' && channels === initialChannelsStateRef.current,
     loadingNextPage: activeQueryType === 'loadChannels',
     loadNextPage,
     refreshing: activeQueryType === 'refresh',

package/src/components/ChannelPreview/ChannelPreview.tsx

@@ -78,9 +78,12 @@ const ChannelPreviewWithContext = <
     };
 
     const handleUpdatedOrDeletedMessage = (event: Event<StreamChatGenerics>) => {
-      if (event.message?.id === lastMessage?.id) {
-        setLastMessage(event.message);
-      }
+      setLastMessage((prevLastMessage) => {
+        if (prevLastMessage?.id === event.message?.id) {
+          return event.message;
+        }
+        return prevLastMessage;
+      });
     };
 
     const listeners = [

package/src/components/ImageGallery/ImageGallery.tsx

@@ -65,6 +65,7 @@ import type { DefaultStreamChatGenerics } from '../../types/types';
 import { getResizedImageUrl } from '../../utils/getResizedImageUrl';
 import { getUrlOfImageAttachment } from '../../utils/getUrlOfImageAttachment';
 import { vh, vw } from '../../utils/utils';
+import { getGiphyMimeType } from '../Attachment/utils/getGiphyMimeType';
 
 const isAndroid = Platform.OS === 'android';
 const fullScreenHeight = Dimensions.get('screen').height;
@@ -161,7 +162,8 @@ export const ImageGallery = <
   } = useTheme();
   const [gridPhotos, setGridPhotos] = useState<Photo<StreamChatGenerics>[]>([]);
   const { overlay, translucentStatusBar } = useOverlayContext();
-  const { image, images, setImage } = useImageGalleryContext<StreamChatGenerics>();
+  const { messages, selectedMessage, setSelectedMessage } =
+    useImageGalleryContext<StreamChatGenerics>();
 
   /**
    * Height constants
@@ -256,20 +258,22 @@ export const ImageGallery = <
    * photo attachments
    */
 
-  const photos = images.reduce((acc: Photo<StreamChatGenerics>[], cur) => {
+  const photos = messages.reduce((acc: Photo<StreamChatGenerics>[], cur) => {
     const attachmentImages =
-      cur.attachments?.filter(
-        (attachment) =>
-          (attachment.type === 'giphy' &&
-            (attachment.giphy?.[giphyVersion]?.url ||
-              attachment.thumb_url ||
-              attachment.image_url)) ||
-          (attachment.type === 'image' &&
-            !attachment.title_link &&
-            !attachment.og_scrape_url &&
-            getUrlOfImageAttachment(attachment)) ||
-          (isVideoPackageAvailable() && attachment.type === 'video'),
-      ) || [];
+      cur.attachments
+        ?.filter(
+          (attachment) =>
+            (attachment.type === 'giphy' &&
+              (attachment.giphy?.[giphyVersion]?.url ||
+                attachment.thumb_url ||
+                attachment.image_url)) ||
+            (attachment.type === 'image' &&
+              !attachment.title_link &&
+              !attachment.og_scrape_url &&
+              getUrlOfImageAttachment(attachment)) ||
+            (isVideoPackageAvailable() && attachment.type === 'video'),
+        )
+        .reverse() || [];
 
     const attachmentPhotos = attachmentImages.map((a) => {
       const imageUrl = getUrlOfImageAttachment(a) as string;
@@ -280,7 +284,7 @@ export const ImageGallery = <
         created_at: cur.created_at,
         id: `photoId-${cur.id}-${imageUrl}`,
         messageId: cur.id,
-        mime_type: a.type === 'giphy' ? 'image/gif' : a.mime_type,
+        mime_type: a.type === 'giphy' ? getGiphyMimeType(giphyURL ?? '') : a.mime_type,
         original_height: a.original_height,
         original_width: a.original_width,
         type: a.type,
@@ -297,7 +301,7 @@ export const ImageGallery = <
       };
     });
 
-    return [...acc, ...attachmentPhotos] as Photo<StreamChatGenerics>[];
+    return [...attachmentPhotos, ...acc] as Photo<StreamChatGenerics>[];
   }, []);
 
   /**
@@ -308,6 +312,12 @@ export const ImageGallery = <
    */
   const photoLength = photos.length;
 
+  /**
+   * The URL for the images may differ because of dimensions passed as
+   * part of the query.
+   */
+  const stripQueryFromUrl = (url: string) => url.split('?')[0];
+
   /**
    * Set selected photo when changed via pressing in the message list
    */
@@ -323,7 +333,9 @@ export const ImageGallery = <
     };
 
     const newIndex = photos.findIndex(
-      (photo) => photo.messageId === image?.messageId && photo.uri === image?.url,
+      (photo) =>
+        photo.messageId === selectedMessage?.messageId &&
+        stripQueryFromUrl(photo.uri) === stripQueryFromUrl(selectedMessage?.url || ''),
     );
 
     if (photoLength > 1) {
@@ -331,7 +343,7 @@ export const ImageGallery = <
     }
 
     runOnUI(updatePosition)(newIndex);
-  }, [image, photoLength]);
+  }, [selectedMessage, photoLength]);
 
   /**
    * Image heights are not provided and therefore need to be calculated.
@@ -370,6 +382,7 @@ export const ImageGallery = <
     scale,
     screenHeight,
     screenWidth,
+    selectedIndex,
     setSelectedIndex,
     translateX,
     translateY,
@@ -664,7 +677,7 @@ export const ImageGallery = <
             closeGridView={closeGridView}
             numberOfImageGalleryGridColumns={numberOfImageGalleryGridColumns}
             photos={gridPhotos}
-            setImage={setImage}
+            setSelectedMessage={setSelectedMessage}
             {...imageGalleryCustomComponents?.grid}
           />
         </BottomSheetModal>

package/src/components/ImageGallery/__tests__/ImageGallery.test.tsx

@@ -48,7 +48,7 @@ describe('ImageGallery', () => {
   it('render image gallery component', () => {
     const { queryAllByA11yLabel } = render(
       getComponent({
-        images: [
+        messages: [
           generateMessage({
             attachments: [
               generateImageAttachment(),
@@ -66,7 +66,7 @@ describe('ImageGallery', () => {
   it('handle handleLoad function when video item present and payload duration is available', () => {
     const { getByA11yLabel } = render(
       getComponent({
-        images: [
+        messages: [
           generateMessage({
             attachments: [generateVideoAttachment({ type: 'video' })],
           }),
@@ -89,7 +89,7 @@ describe('ImageGallery', () => {
   it('handle handleLoad function when video item present and payload duration is undefined', () => {
     const { getByA11yLabel } = render(
       getComponent({
-        images: [
+        messages: [
           generateMessage({
             attachments: [generateVideoAttachment({ type: 'video' })],
           }),
@@ -112,7 +112,7 @@ describe('ImageGallery', () => {
   it('handle handleProgress function when video item present and payload is well defined', () => {
     const { getByA11yLabel } = render(
       getComponent({
-        images: [
+        messages: [
           generateMessage({
             attachments: [generateVideoAttachment({ type: 'video' })],
           }),
@@ -140,7 +140,7 @@ describe('ImageGallery', () => {
   it('handle handleProgress function when video item present and payload is not defined', () => {
     const { getByA11yLabel } = render(
       getComponent({
-        images: [
+        messages: [
           generateMessage({
             attachments: [generateVideoAttachment({ type: 'video' })],
           }),
@@ -168,7 +168,7 @@ describe('ImageGallery', () => {
   it('handle handleEnd function when video item present', () => {
     const { getByA11yLabel } = render(
       getComponent({
-        images: [
+        messages: [
           generateMessage({
             attachments: [generateVideoAttachment({ type: 'video' })],
           }),

package/src/components/ImageGallery/__tests__/ImageGalleryFooter.test.tsx

@@ -71,7 +71,7 @@ describe('ImageGalleryFooter', () => {
         <ImageGalleryContext.Provider
           value={
             {
-              images: [
+              messages: [
                 generateMessage({
                   attachments: [generateVideoAttachment({ type: 'video' })],
                 }),
@@ -123,7 +123,7 @@ describe('ImageGalleryFooter', () => {
         <ImageGalleryContext.Provider
           value={
             {
-              images: [
+              messages: [
                 generateMessage({
                   attachments: [generateVideoAttachment({ type: 'video' })],
                 }),
@@ -162,7 +162,7 @@ describe('ImageGalleryFooter', () => {
         <ImageGalleryContext.Provider
           value={
             {
-              images: [
+              messages: [
                 generateMessage({
                   attachments: [generateImageAttachment()],
                 }),

package/src/components/ImageGallery/__tests__/ImageGalleryGrid.test.tsx

@@ -76,13 +76,13 @@ describe('ImageGalleryOverlay', () => {
 
   it('should trigger the selectAndClose when the Image item is pressed', () => {
     const closeGridViewMock = jest.fn();
-    const setImageMock = jest.fn();
+    const setSelectedMessageMock = jest.fn();
 
     const { getAllByA11yLabel } = render(
       getComponent({
         closeGridView: closeGridViewMock,
         photos: [generateImageAttachment(), generateVideoAttachment({ type: 'video' })],
-        setImage: setImageMock,
+        setSelectedMessage: setSelectedMessageMock,
       }),
     );
 
@@ -93,6 +93,6 @@ describe('ImageGalleryOverlay', () => {
     });
 
     expect(closeGridViewMock).toHaveBeenCalledTimes(1);
-    expect(setImageMock).toHaveBeenCalledTimes(1);
+    expect(setSelectedMessageMock).toHaveBeenCalledTimes(1);
   });
 });

package/src/components/ImageGallery/__tests__/ImageGalleryHeader.test.tsx

@@ -65,7 +65,7 @@ describe('ImageGalleryHeader', () => {
         <ImageGalleryContext.Provider
           value={
             {
-              images: [
+              messages: [
                 generateMessage({
                   attachments: [generateImageAttachment()],
                 }),
@@ -109,7 +109,7 @@ describe('ImageGalleryHeader', () => {
         <ImageGalleryContext.Provider
           value={
             {
-              images: [
+              messages: [
                 generateMessage({
                   attachments: [generateVideoAttachment({ type: 'video' })],
                 }),
@@ -146,7 +146,7 @@ describe('ImageGalleryHeader', () => {
         <ImageGalleryContext.Provider
           value={
             {
-              images: [
+              messages: [
                 generateMessage({
                   attachments: [generateImageAttachment()],
                 }),

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

@@ -53,7 +53,7 @@ export const ImageGalleryVideoControl: React.FC<ImageGalleryFooterVideoControlPr
 
     const {
       theme: {
-        colors: { black, white_snow },
+        colors: { static_black, static_white },
         imageGallery: {
           videoControl: { durationTextStyle, roundedView, videoContainer },
         },
@@ -68,23 +68,28 @@ export const ImageGalleryVideoControl: React.FC<ImageGalleryFooterVideoControlPr
             onPlayPause();
           }}
         >
-          <View style={[styles.roundedView, roundedView, { backgroundColor: white_snow }]}>
+          <View style={[styles.roundedView, roundedView, { backgroundColor: static_white }]}>
             {paused ? (
-              <Play accessibilityLabel='Play Icon' height={24} pathFill={black} width={24} />
+              <Play accessibilityLabel='Play Icon' height={24} pathFill={static_black} width={24} />
             ) : (
-              <Pause accessibilityLabel='Pause Icon' height={24} width={24} />
+              <Pause
+                accessibilityLabel='Pause Icon'
+                height={24}
+                pathFill={static_black}
+                width={24}
+              />
             )}
           </View>
         </TouchableOpacity>
         <Text
           accessibilityLabel='Progress Duration'
-          style={[styles.durationTextStyle, durationTextStyle, { color: white_snow }]}
+          style={[styles.durationTextStyle, durationTextStyle, { color: static_white }]}
         >
           {progressDuration ? progressDuration : '00:00'}
         </Text>
         <ProgressControl
           duration={duration}
-          filledColor={white_snow}
+          filledColor={static_white}
           onPlayPause={onPlayPause}
           onProgressDrag={onProgressDrag}
           progress={progress}
@@ -93,7 +98,7 @@ export const ImageGalleryVideoControl: React.FC<ImageGalleryFooterVideoControlPr
         />
         <Text
           accessibilityLabel='Video Duration'
-          style={[styles.durationTextStyle, durationTextStyle, { color: white_snow }]}
+          style={[styles.durationTextStyle, durationTextStyle, { color: static_white }]}
         >
           {videoDuration ? videoDuration : '00:00'}
         </Text>