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

feat: useVoice

Browse Source
This commit is contained in:
Tristan Yang
2023-03-24 23:07:56 +08:00
parent da00f3b797
commit 92411d0468
20 changed files with 331 additions and 132 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/routes/chat/RTCWidget.tsx
+23 -10
View File
@@ -3,20 +3,33 @@ import { useAppSelector } from '../../app/store';
import User from '../../common/component/User';
import IconHeadphone from '../../assets/icons/headphone.svg';
import IconMic from '../../assets/icons/mic.on.svg';
import IconSoundOn from '../../assets/icons/sound.on.svg';
import IconSignal from '../../assets/icons/signal.svg';
import { useVoice } from '../../common/component/Voice';
type Props = {}
type Props = {
id: number,
context?: "channel" | "dm"
}
const RTCWidget = (props: Props) => {
const { loginUser, voicing } = useAppSelector(store => { return { loginUser: store.authData.user, voicing: store.authData.voice }; });
const RTCWidget = ({ id, context = "channel" }: Props) => {
const { leave } = useVoice({ context, id });
const { loginUser, joined } = useAppSelector(store => { return { loginUser: store.authData.user, joined: store.voice.joined }; });
if (!loginUser) return null;
return (
<div className='bg-gray-100 dark:bg-gray-900 flex flex-col p-2 rounded-full m-3 text-sm'>
{voicing && <div className="flex justify-between items-center">
<div className="flex items-center gap-3 text-green-800">
Voice Connected
<div className='bg-gray-100 dark:bg-gray-900 flex flex-col p-2 rounded-3xl m-3 text-sm'>
{joined &&
<div className="flex justify-between items-center border-b border-solid border-gray-100 dark:border-gray-800 pb-3 mb-2">
<div className="flex items-center gap-1">
<IconSignal />
<div className="flex flex-col">
<span className='text-green-800'>Voice Connected</span>
<span className='text-gray-600 dark:text-gray-400 text-xs'>Channel / name</span>
</div>
</div>
<IconHeadphone onClick={leave} role="button" className="fill-red-600" />
</div>
</div>}
}
<div className="flex justify-between items-center">
<div className="flex items-center gap-3">
<User uid={loginUser.uid} compact />
@@ -26,7 +39,7 @@ const RTCWidget = (props: Props) => {
</div>
</div>
<div className="flex gap-2">
<IconHeadphone role="button" />
<IconSoundOn role="button" />
<IconMic role="button" />
</div>
</div>