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

feat: volume and mute indicator

Browse Source
This commit is contained in:
Tristan Yang
2023-03-30 08:45:35 +08:00
parent bd6b02d19a
commit a5e4a198e5
10 changed files with 127 additions and 58 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/routes/chat/VoiceChat/VoiceManagement.tsx
+14 -4
View File
@@ -12,19 +12,28 @@ type Props = {
}
const VoiceManagement = ({ info }: Props) => {
const userData = useAppSelector(store => store.users.byId);
const { userData, voicingMembers } = useAppSelector(store => {
return {
userData: store.users.byId,
voicingMembers: store.voice.voicingMembers
};
});
if (!info) return null;
const { context, id, members } = info;
const { context, id } = info;
const nameClass = clsx(`text-sm text-gray-500 max-w-[190px] truncate font-semibold dark:text-white`);
const members = voicingMembers.ids;
const membersData = voicingMembers.byId;
return (
<div className='w-full h-full py-2'>
<ul className='flex flex-col gap-2'>
{members.map((uid) => {
const curr = userData[uid];
if (!curr) return null;
const { muted, speakingVolume = 0 } = membersData[uid];
const speaking = speakingVolume > 50;
return <li key={uid}>
<div className="flex items-center justify-between gap-6 ">
<div className="flex items-center gap-2">
<div className="flex items-center gap-2 transition-opacity" style={{ opacity: `${speaking ? 0.4 : 1}` }}>
<div className="w-8 h-8 flex shrink-0">
<Avatar
width={32}
@@ -40,7 +49,8 @@ const VoiceManagement = ({ info }: Props) => {
</span>
</div>
<div className="flex items-center">
<IconMic className="w-4" role="button" />
{/* {muted ? <IconMicOff className="w-4" /> : <IconMic className="w-4" />} */}
{muted ? <IconMicOff className="w-4" /> : <IconMic className="w-4" />}
</div>
</div>
{/* <User uid={uid} interactive={false} /> */}