FIX | Chats: fix pause icon on android, fix play/pause/resume different audio messages

src/shared/components/plugins/chat/chat-item-audio.component.tsx

@@ -13,6 +13,8 @@ interface ChatItemAudioProps extends IChatMessage {
 	onLongPress?: () => void
 	onProfilePress?: () => void
 	onRepliedPress?: (id: number) => void
+	onPressPlay?: () => void
+	activeAudioId?: number
 }
 
 export const ChatItemAudio: FC<ChatItemAudioProps> = props => {
@@ -50,10 +52,17 @@ export const ChatItemAudio: FC<ChatItemAudioProps> = props => {
 	const onResumePlay = async () => {
 		setIsPause(false)
 		setIsPlying(true)
-		await mediaService.onResumePlay()
+
+		if (props.activeAudioId === props.id) await mediaService.onResumePlay()
+		else {
+			await onPlay()
+			await mediaService.seekToPlayer(currentPosition)
+		}
 	}
 
 	const actionHandler = async () => {
+		if (props.onPressPlay) props.onPressPlay()
+		if (props.activeAudioId !== props.id) await mediaService.onStopPlay()
 		if (isPlaying) return await onPause()
 		if (isPause) return await onResumePlay()
 

src/shared/components/plugins/chat/chat-messages.component.tsx

@@ -6,7 +6,7 @@ import {
 } from '@/shared/helpers'
 import { useTheme } from '@/shared/hooks'
 import { PartialTheme } from '@/shared/themes/interfaces'
-import _, { last } from 'lodash'
+import _ from 'lodash'
 import moment from 'moment'
 import React, {
 	FC,
@@ -59,6 +59,7 @@ export const ChatMessages: FC<ChatMessagesProps> = ({ items, ...props }) => {
 	const [touchStart, setTouchStart] = useState(null)
 	const [isScrolling, setScrolling] = useState(false)
 	const [itemsHeight, setHeight] = useState({})
+	const [activeAudioId, setActiveAudioId] = useState<number>(null)
 
 	const listRef = useRef(null)
 	const itemsRef = useRef<IChatMessage[]>(null)
@@ -227,6 +228,8 @@ export const ChatMessages: FC<ChatMessagesProps> = ({ items, ...props }) => {
 						props.onProfilePress(item.authorId)
 					}}
 					onRepliedPress={props.onPressReplied}
+					onPressPlay={() => setActiveAudioId(item.id)}
+					activeAudioId={activeAudioId}
 				/>
 			)
 		}
@@ -255,7 +258,7 @@ export const ChatMessages: FC<ChatMessagesProps> = ({ items, ...props }) => {
 
 			return null
 		},
-		[items],
+		[items, activeAudioId],
 	)
 
 	const calculateOffset = (index: number) => {