ColdBreeze/ColdBreeze-chat-web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: speaking animation

Browse Source
This commit is contained in:
Tristan Yang
2023-04-03 11:59:51 +08:00
parent 1c658354f2
commit 26ac8a5574
2 changed files with 17 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/routes/chat/VoiceChat/VoiceManagement.tsx
+6 -4
View File
@@ -12,6 +12,7 @@ import IconMicOff from '../../../assets/icons/mic.off.svg';
import StyledButton from '../../../common/component/styled/Button';
import IconCallOff from '../../../assets/icons/call.off.svg';
import Tooltip from '../../../common/component/Tooltip';
import SpeakingAnimate from './SpeakingAnimate';
// import User from '../../../common/component/User';
type Props = {
@@ -48,12 +49,13 @@ const VoiceManagement = ({ info, setMute, setDeafen, leave }: Props) => {
const { muted, speakingVolume = 0 } = membersData[uid];
const speaking = speakingVolume > 50;
return <li key={uid} className="flex items-center justify-between gap-6 pb-4 ">
<div className="flex items-center gap-2 transition-opacity" style={{ opacity: `${speaking ? 0.4 : 1}` }}>
<div className="w-8 h-8 flex shrink-0">
<div className="flex items-center gap-2 transition-opacity">
<div className={clsx("w-8 h-8 flex shrink-0 relative")}>
{speaking && <div className="z-10 absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 opacity-0 rounded-full bg-green-700 animate-speaking w-10 h-10"></div>}
<Avatar
width={32}
height={32}
className="w-full h-full rounded-full object-cover"
className="w-full h-full rounded-full object-cover z-20"
src={curr.avatar}
name={curr.name}
alt="avatar"
@@ -65,7 +67,7 @@ const VoiceManagement = ({ info, setMute, setDeafen, leave }: Props) => {
</div>
<div className="flex items-center gap-2">
{/* {deafen ? <IconHeadphoneOff className="w-4" /> : <IconHeadphone className="w-4" />} */}
{muted ? <IconMicOff className="w-4 fill-gray-500" /> : <IconMic className="w-4 fill-gray-500" />}
{muted ? <IconMicOff className="w-4 fill-gray-500 dark:fill-gray-400" /> : <IconMic className="w-4 fill-gray-500 dark:fill-gray-400" />}
</div>
{/* <User uid={uid} interactive={false} /> */}
{/* {userData[uid]?.name} */}