From e654b74ee082719c5fc3f9721b4c333890280dd0 Mon Sep 17 00:00:00 2001
From: Heath <duweihengmr@163.com>
Date: Wed, 31 Jul 2024 16:19:57 +0800
Subject: [PATCH] voice msg style optimization

---
 .../CommonChatFrame/ChatContent/Voice/index.jsx     |  8 ++++++--
 src/componets/CustomAudio/index.jsx                 | 13 ++++++-------
 src/componets/CustomAudio/index.less                |  5 +++++
 src/componets/CustomSoundIcon/index.jsx             | 12 ++++++------
 4 files changed, 23 insertions(+), 15 deletions(-)

diff --git a/src/componets/CommonChatFrame/ChatContent/Voice/index.jsx b/src/componets/CommonChatFrame/ChatContent/Voice/index.jsx
index 394caf9..2f28b20 100644
--- a/src/componets/CommonChatFrame/ChatContent/Voice/index.jsx
+++ b/src/componets/CommonChatFrame/ChatContent/Voice/index.jsx
@@ -38,8 +38,12 @@ const Voice = memo(({value, right = false}) => {
             <div className={"chat-content-voice"}>
                 <div className={`content  ${right ? "right" : ""}`}>
                     {info &&
-                        <CustomAudio key={retryNum} audioUrl={info} time={audioTime}
-                                     onLoadedMetadata={() => clearInterval(interval.current)}
+                        <CustomAudio
+                            type={right ? "" : "minor"}
+                            key={retryNum}
+                            audioUrl={info}
+                            time={audioTime}
+                            onLoadedMetadata={() => clearInterval(interval.current)}
                         />
                     }
                 </div>
diff --git a/src/componets/CustomAudio/index.jsx b/src/componets/CustomAudio/index.jsx
index 15087ba..674a184 100644
--- a/src/componets/CustomAudio/index.jsx
+++ b/src/componets/CustomAudio/index.jsx
@@ -2,7 +2,7 @@ import "./index.less"
 import CustomSoundIcon from "../CustomSoundIcon/index.jsx";
 import React, {useRef, useState} from "react";
 
-export default function CustomAudio({audioUrl, time, onLoadedMetadata}) {
+export default function CustomAudio({audioUrl, time, onLoadedMetadata, type = ""}) {
     const [audioTime, setAudioTime] = useState(time)
     const audioRef = useRef(null)
     const [isPlay, setIsPlay] = useState(false)
@@ -22,10 +22,10 @@ export default function CustomAudio({audioUrl, time, onLoadedMetadata}) {
         }
     };
 
-    return (
-        <div>
-            <div onClick={playAudio} className="custom-audio">
-                <CustomSoundIcon isStart={isPlay} style={{color: "#fff", marginLeft: 10}}/>
+    return (<div>
+            <div onClick={playAudio} className={`custom-audio ${type}`}>
+                <CustomSoundIcon isStart={isPlay} style={{marginLeft: 10}}
+                                 barStyle={{backgroundColor: type === "" ? "#fff" : "#1f1f1f"}}/>
                 <div style={{marginLeft: 10}}>{audioTime}"</div>
                 <audio
                     ref={audioRef}
@@ -38,6 +38,5 @@ export default function CustomAudio({audioUrl, time, onLoadedMetadata}) {
                     src={audioUrl} controls style={{display: "none"}}
                 />
             </div>
-        </div>
-    )
+        </div>)
 }
\ No newline at end of file
diff --git a/src/componets/CustomAudio/index.less b/src/componets/CustomAudio/index.less
index 31d7aad..cea0f18 100644
--- a/src/componets/CustomAudio/index.less
+++ b/src/componets/CustomAudio/index.less
@@ -7,4 +7,9 @@
   display: flex;
   align-items: center;
   cursor: pointer;
+
+  &.minor {
+    background-color: #FFFFFF;
+    color: #1F1F1F;
+  }
 }
\ No newline at end of file
diff --git a/src/componets/CustomSoundIcon/index.jsx b/src/componets/CustomSoundIcon/index.jsx
index 71c1a02..3bc2e56 100644
--- a/src/componets/CustomSoundIcon/index.jsx
+++ b/src/componets/CustomSoundIcon/index.jsx
@@ -1,13 +1,13 @@
 import './index.less';
 
-const CustomSoundIcon = ({isStart, style = {}}) => {
+const CustomSoundIcon = ({isStart, style = {}, barStyle = {}}) => {
     return (
         <div className={`sound-icon ${isStart ? 'start' : ''}`} style={style}>
-            <div className="bar bar1"></div>
-            <div className="bar bar2"></div>
-            <div className="bar bar3"></div>
-            <div className="bar bar4"></div>
-            <div className="bar bar5"></div>
+            <div className="bar bar1" style={barStyle}></div>
+            <div className="bar bar2" style={barStyle}></div>
+            <div className="bar bar3" style={barStyle}></div>
+            <div className="bar bar4" style={barStyle}></div>
+            <div className="bar bar5" style={barStyle}></div>
         </div>
     );
 };