FIX | fixed audio messages format/add pause feature

src/containers/Chats/atoms/audio-player.atom.tsx

@@ -1,6 +1,7 @@
 import { IconComponent } from "@/shared";
-import React from "react";
+import React, { FC, useEffect } from "react";
 import { useAudioPlayer, useAudioPosition } from "react-use-audio-player";
+
 import playIcon from "@/assets/img/play-1-icon.svg";
 import pauseIcon from "@/assets/img/pause-icon.svg";
 import { AudioBar } from "./audio-bar.atom";
@@ -19,38 +20,52 @@ export const PlayBar = () => {
   );
 };
 
-export const AudioPlayer = ({ file, isMy }) => {
-  const { togglePlayPause, ready, loading, playing } = useAudioPlayer({
-    src: file,
-    format: "m4a",
+interface IAudioPlayerProps {
+  fileUrl: string;
+  fileId: number;
+  isMy: boolean;
+  activeAudioId: number;
+  onPressPlay?: () => void;
+}
+
+export const AudioPlayer: FC<IAudioPlayerProps> = ({
+  fileUrl,
+  fileId,
+  isMy,
+  activeAudioId,
+  onPressPlay,
+}) => {
+  useEffect(() => {
+    if (activeAudioId !== fileId && playing) player.pause();
+  }, [activeAudioId]);
+
+  const { togglePlayPause, ready, loading, playing, player } = useAudioPlayer({
+    src: fileUrl,
+    format: "mp4",
     autoplay: false,
+    onpause: () => console.log("sound has paused!"),
+    onplay: () => console.log("sound started play!"),
   });
 
   if (!ready && !loading) return <div>No audio to play</div>;
   if (loading) return <div>Loading audio</div>;
 
+  const actionHandler = async () => {
+    if (onPressPlay) onPressPlay();
+    await togglePlayPause();
+  };
+
   return (
     <div className="player">
       <div className="audio-controls">
-        {!playing ? (
-          <button
-            className={
-              "player__button " + (isMy ? "my-sound-icon" : "sound-icon")
-            }
-            onClick={togglePlayPause}
-          >
-            <IconComponent name={playIcon} />
-          </button>
-        ) : (
-          <button
-            className={
-              "player__button " + (isMy ? "my-sound-icon" : "sound-icon")
-            }
-            onClick={togglePlayPause}
-          >
-            <IconComponent name={pauseIcon} />
-          </button>
-        )}
+        <button
+          className={
+            "player__button " + (isMy ? "my-sound-icon" : "sound-icon")
+          }
+          onClick={actionHandler}
+        >
+          <IconComponent name={playing ? pauseIcon : playIcon} />
+        </button>
         <PlayBar />
       </div>
     </div>

src/containers/Chats/hooks/use-audio-player.hook.ts

@@ -16,7 +16,8 @@ const useAudioPlayer = (url) => {
   useEffect(() => {
     const setAudioData = () => {
       // console.log("audio.duration", audio.duration);
-      console.log("audioref duration", audioRef.current.duration);
+      // console.log("audioref duration", audioRef.current.duration);
+      // console.log("audioRef paused", audioRef.current.paused);
 
       setDuration(audioRef.current.duration);
       setCurTime(audioRef.current.currentTime);

src/containers/Chats/plugins/chat-item-audio.component.tsx

@@ -1,20 +1,16 @@
-import React, { FC, useMemo, useState } from "react";
+import React, { FC, useState } from "react";
 import "./style.scss";
 import { ChatItem } from "./chat-item.component";
 import { IChatMessage } from "./interfaces";
-import { PlayCircleFilled } from "@material-ui/icons";
-import { PauseCircleFilled } from "@material-ui/icons";
-import { AudioBar, AudioPlayer, PlayBar } from "../atoms";
-import useAudioPlayer from "../hooks/use-audio-player.hook";
-import playIcon from "@/assets/img/play-1-icon.svg";
-import pauseIcon from "@/assets/img/pause-icon.svg";
-import { IconComponent } from "@/shared";
+import { AudioPlayer } from "../atoms";
 import { AudioPlayerProvider } from "react-use-audio-player";
 
 interface ChatItemAudioProps extends IChatMessage {
   onLongPress?: () => void;
   onProfilePress?: () => void;
   onRepliedPress?: (id: number) => void;
+  activeAudioId?: number;
+  onPressPlay?: () => void;
 }
 
 export const ChatItemAudio: FC<ChatItemAudioProps> = (props) => {
@@ -22,19 +18,17 @@ export const ChatItemAudio: FC<ChatItemAudioProps> = (props) => {
   const [audioDuration, setDuration] = useState<number>(0);
   const [isPause, setIsPause] = useState<boolean>(false);
 
-  const {
-    curTime,
-    duration,
-    playing,
-    setPlaying,
-    setClickedTime,
-  } = useAudioPlayer(props.content?.fileUrl); // custom audio hook
-
   return (
     <ChatItem {...props}>
       <div className="chat-item-message-container">
         <AudioPlayerProvider>
-          <AudioPlayer file={props.content?.fileUrl} isMy={props.isMy} />
+          <AudioPlayer
+            fileUrl={props.content?.fileUrl}
+            fileId={props.id}
+            isMy={props.isMy}
+            activeAudioId={props.activeAudioId}
+            onPressPlay={props.onPressPlay}
+          />
         </AudioPlayerProvider>
       </div>
     </ChatItem>

src/containers/Chats/plugins/chat-messages.component.tsx

@@ -41,6 +41,8 @@ export const ChatMessages: FC<ChatMessagesProps> = ({
   chatDetails,
   ...props
 }) => {
+  const [activeAudioId, setActiveAudioId] = useState<number>(null);
+
   const messagesGroups = useMemo(() => {
     const groups: Record<string, any> = {};
 
@@ -104,7 +106,13 @@ export const ChatMessages: FC<ChatMessagesProps> = ({
     }
 
     if (item?.type === MessageType.Audio) {
-      return <ChatItemAudio {...item} />;
+      return (
+        <ChatItemAudio
+          {...item}
+          onPressPlay={() => setActiveAudioId(item.id)}
+          activeAudioId={activeAudioId}
+        />
+      );
     }
 
     if (item?.type === MessageType.Video) {
@@ -123,7 +131,7 @@ export const ChatMessages: FC<ChatMessagesProps> = ({
 
       return null;
     },
-    [items]
+    [items, activeAudioId]
   );
 
   return (