fix: play pause button in audio attachment

ts/components/conversation/H5AudioPlayer.tsx

@@ -5,7 +5,7 @@ import { useDispatch, useSelector } from 'react-redux';
 import styled from 'styled-components';
 import { useEncryptedFileFetch } from '../../hooks/useEncryptedFileFetch';
 import { setNextMessageToPlayId } from '../../state/ducks/conversations';
-import { useMessageSelected } from '../../state/selectors';
+import { useMessageDirection, useMessageSelected } from '../../state/selectors';
 import {
   getNextMessageToPlayId,
   getSortedMessagesOfSelectedConversation,
@@ -166,37 +166,13 @@ export const AudioPlayerWithEncryptedFile = (props: {
   const nextMessageToPlayId = useSelector(getNextMessageToPlayId);
   const multiSelectMode = useSelector(isMessageSelectionMode);
   const selected = useMessageSelected(messageId);
-
+  const direction = useMessageDirection(messageId);
+  const iconColor =
+    direction === 'incoming'
+      ? 'var(--message-bubbles-received-text-color)'
+      : 'var(--message-bubbles-sent-text-color)';
   const dataTestId = `audio-${messageId}`;
 
-  useEffect(() => {
-    // Updates datatestId once rendered
-    if (
-      player.current?.audio.current &&
-      player.current?.container.current &&
-      player.current.container.current.dataset.testId !== dataTestId
-    ) {
-      // NOTE we can't assign the value using dataset.testId because the result is data-test-id not data-testid which is our convention
-      player.current.container.current.setAttribute('data-testid', dataTestId);
-    }
-  }, [dataTestId, player]);
-
-  useEffect(() => {
-    // updates playback speed to value selected in context menu
-    if (
-      player.current?.audio.current &&
-      player.current?.audio.current?.playbackRate !== playbackSpeed
-    ) {
-      player.current.audio.current.playbackRate = playbackSpeed;
-    }
-  }, [playbackSpeed, player]);
-
-  useEffect(() => {
-    if (messageId !== undefined && messageId === nextMessageToPlayId) {
-      void player.current?.audio.current?.play();
-    }
-  }, [messageId, nextMessageToPlayId, player]);
-
   const triggerPlayNextMessageIfNeeded = (endedMessageId: string) => {
     const justEndedMessageIndex = messageProps.findIndex(
       m => m.propsForMessage.id === endedMessageId
@@ -237,6 +213,34 @@ export const AudioPlayerWithEncryptedFile = (props: {
     }
   };
 
+  useEffect(() => {
+    // Updates datatestId once rendered
+    if (
+      player.current?.audio.current &&
+      player.current?.container.current &&
+      player.current.container.current.dataset.testId !== dataTestId
+    ) {
+      // NOTE we can't assign the value using dataset.testId because the result is data-test-id not data-testid which is our convention
+      player.current.container.current.setAttribute('data-testid', dataTestId);
+    }
+  }, [dataTestId, player]);
+
+  useEffect(() => {
+    // updates playback speed to value selected in context menu
+    if (
+      player.current?.audio.current &&
+      player.current?.audio.current?.playbackRate !== playbackSpeed
+    ) {
+      player.current.audio.current.playbackRate = playbackSpeed;
+    }
+  }, [playbackSpeed, player]);
+
+  useEffect(() => {
+    if (messageId !== undefined && messageId === nextMessageToPlayId) {
+      void player.current?.audio.current?.play();
+    }
+  }, [messageId, nextMessageToPlayId, player]);
+
   return (
     <StyledH5AudioPlayer
       src={urlToLoad}
@@ -264,8 +268,8 @@ export const AudioPlayerWithEncryptedFile = (props: {
         </StyledSpeedButton>,
       ]}
       customIcons={{
-        play: <SessionIcon iconType="play" iconSize="small" />,
+        play: <SessionIcon iconType="play" iconSize="small" iconColor={iconColor} />,
-        pause: <SessionIcon iconType="pause" iconSize="small" />,
+        pause: <SessionIcon iconType="pause" iconSize="small" iconColor={iconColor} />,
       }}
       dropShadow={selected}
     />

ts/state/selectors/messages.ts

@@ -1,4 +1,5 @@
 import { useSelector } from 'react-redux';
+import { MessageModelType } from '../../models/messageType';
 import { UserUtils } from '../../session/utils';
 import {
   LastMessageStatusType,
@@ -80,7 +81,9 @@ export const useMessageAuthor = (messageId: string | undefined): string | undefi
   return useMessagePropsByMessageId(messageId)?.propsForMessage.sender;
 };
 
-export const useMessageDirection = (messageId: string | undefined): string | undefined => {
+export const useMessageDirection = (
+  messageId: string | undefined
+): MessageModelType | undefined => {
   return useMessagePropsByMessageId(messageId)?.propsForMessage.direction;
 };