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/RTCWidget.tsx
+6 -5
View File
@@ -2,10 +2,11 @@ import React from 'react';
import { useAppSelector } from '../../app/store';
import User from '../../common/component/User';
import IconHeadphone from '../../assets/icons/headphone.svg';
import IconHeadphoneOff from '../../assets/icons/headphone.off.svg';
import IconMic from '../../assets/icons/mic.on.svg';
import IconMicOff from '../../assets/icons/mic.off.svg';
import IconCallOff from '../../assets/icons/call.off.svg';
// import IconSoundOn from '../../assets/icons/sound.on.svg';
// import IconSignal from '../../assets/icons/signal.svg';
import { useVoice } from '../../common/component/Voice';
import Signal from '../../common/component/Signal';
@@ -37,7 +38,7 @@ const RTCWidget = ({ id, context = "channel" }: Props) => {
<span className='text-gray-600 dark:text-gray-400 text-xs truncate max-w-[170px]' >{voicingInfo.context == "channel" ? "Channel" : "DM"} / {voicingInfo.context == "channel" ? channelData[voicingInfo.id].name : userData[voicingInfo.id].name}</span>
</div>
</div>
<IconHeadphone onClick={leave} role="button" className="fill-red-600" />
<IconCallOff onClick={leave} role="button" className="fill-red-600" />
</div>
{/* } */}
<div className="flex justify-between items-center">
@@ -50,11 +51,11 @@ const RTCWidget = ({ id, context = "channel" }: Props) => {
</div>
{/* {voicingInfo && */}
<div className="flex gap-2 px-1">
{/* <IconSoundOn role="button" /> */}
<IconHeadphone role="button" />
{voicingInfo.muted ?
<IconMicOff className="w-5" onClick={setMute.bind(null, false)} role="button" />
<IconMicOff onClick={setMute.bind(null, false)} role="button" />
:
<IconMic className="w-5" onClick={setMute.bind(null, true)} role="button" />}
<IconMic onClick={setMute.bind(null, true)} role="button" />}
</div>
{/* } */}
</div>
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} /> */}