voice msg style optimization

DWHengr · Jul 31, 2024 · e654b74 · e654b74
1 parent 023a593
commit e654b74
Show file tree

Hide file tree

Showing 4 changed files with 23 additions and 15 deletions.
diff --git 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
@@ -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>)
 }
diff --git 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;
+  }
 }
diff --git 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>
     );
 };