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

refactor: video call

Browse Source
This commit is contained in:
Tristan Yang
2023-04-23 17:46:31 +08:00
parent 9dc6bcd483
commit adbd244292
9 changed files with 93 additions and 62 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/routes/chat/RTCWidget.tsx
+4 -5
View File
@@ -8,7 +8,7 @@ import IconMicOff from '../../assets/icons/mic.off.svg';
import IconCallOff from '../../assets/icons/headphone.svg';
import IconSoundOn from '../../assets/icons/sound.on.svg';
import IconSoundOff from '../../assets/icons/sound.off.svg';
import IconCameraOff from '../../assets/icons/camera.off.svg';
// import IconCameraOff from '../../assets/icons/camera.off.svg';
import IconCamera from '../../assets/icons/camera.svg';
import IconScreen from '../../assets/icons/share.screen.svg';
import { useVoice } from '../../common/component/Voice';
@@ -22,7 +22,7 @@ type Props = {
const RTCWidget = ({ id, context = "channel" }: Props) => {
const { t } = useTranslation("chat");
const { leave, voicingInfo, setMute, setDeafen, joining = true, openCamera } = useVoice({ context, id });
const { leave, voicingInfo, setMute, setDeafen, joining = true, openCamera, closeCamera } = useVoice({ context, id });
const { loginUser, channelData, userData } = useAppSelector(store => {
return {
userData: store.users.byId,
@@ -38,7 +38,6 @@ const RTCWidget = ({ id, context = "channel" }: Props) => {
<div className='bg-gray-100 dark:bg-gray-900 flex flex-col p-2 rounded-3xl m-3 mb-4 text-sm'>
<div className="border-b border-b-gray-200 dark:border-b-gray-800 pb-2">
<div className="flex justify-between items-center">
<div className="flex flex-1 items-center gap-1">
<Signal strength={voicingInfo.downlinkNetworkQuality} />
<div className="flex flex-col">
@@ -51,8 +50,8 @@ const RTCWidget = ({ id, context = "channel" }: Props) => {
</Tooltip>
</div>
<div className="flex items-center gap-2 mt-3">
<button onClick={openCamera} className='rounded-lg py-2 px-5 bg-white/50 dark:bg-black/50 flex items-center gap-1'>
<IconCameraOff className="fill-gray-800 dark:fill-gray-200 w-6 h-6" />
<button onClick={voicingInfo.video ? closeCamera : openCamera} className={clsx('rounded-lg py-2 px-5 flex items-center gap-1', voicingInfo.video ? "bg-green-700" : "bg-white/50 dark:bg-black/50")}>
<IconCamera className="fill-gray-800 dark:fill-gray-200 w-6 h-6" />
<span className='text-sm text-gray-800 dark:text-gray-200 font-semibold'>Video</span>
</button>
<button className='rounded-lg py-2 px-5 bg-white/50 dark:bg-black/50 flex items-center gap-1'>
src/routes/chat/VoiceChat/Dashboard.tsx
+2 -2
View File
@@ -10,12 +10,12 @@ type Props = {
}
const Dashboard = ({ context = "channel", id, visible }: Props) => {
const { voicingInfo, setMute, setDeafen, leave } = useVoice({ id, context });
const { voicingInfo, setMute, setDeafen, leave, closeCamera, openCamera } = useVoice({ id, context });
// const dispatch = useDispatch();
return <div className={`h-full flex-col gap-1 w-[226px] overflow-y-scroll overflow-x-hidden p-2 shadow-[inset_1px_0px_0px_rgba(0,_0,_0,_0.1)] ${visible ? "flex" : "hidden"}`}>
<VoiceManagement info={voicingInfo} setMute={setMute} setDeafen={setDeafen} leave={leave} />
<VoiceManagement info={voicingInfo} setMute={setMute} setDeafen={setDeafen} leave={leave} closeCamera={closeCamera} openCamera={openCamera} />
</div>;
};
src/routes/chat/VoiceChat/VoiceManagement.tsx
+9 -9
View File
@@ -21,10 +21,12 @@ type Props = {
info: VoicingInfo | null,
setMute: (param: boolean) => void,
setDeafen: (param: boolean) => void,
leave: () => void
leave: () => void,
closeCamera: () => void,
openCamera: () => void
}
const VoiceManagement = ({ info, setMute, setDeafen, leave }: Props) => {
const VoiceManagement = ({ info, setMute, setDeafen, leave, closeCamera, openCamera }: Props) => {
const { t } = useTranslation("chat");
const { userData, voicingMembers } = useAppSelector(store => {
return {
@@ -33,7 +35,7 @@ const VoiceManagement = ({ info, setMute, setDeafen, leave }: Props) => {
};
});
if (!info) return null;
const { deafen, muted } = info;
const { deafen, muted, video } = info;
const nameClass = clsx(`text-sm text-gray-500 max-w-[120px] truncate font-semibold dark:text-white`);
const members = voicingMembers.ids;
const membersData = voicingMembers.byId;
@@ -81,7 +83,7 @@ const VoiceManagement = ({ info, setMute, setDeafen, leave }: Props) => {
{muted ? <IconMicOff className="w-4 fill-gray-500 dark:fill-gray-400" /> : <IconMic className="w-4 fill-gray-500 dark:fill-gray-400" />}
</div>
</div>
<div id={`CAMERA_${uid}`} className="w-[98%] h-[120px] rounded overflow-hidden m-auto">
<div id={`CAMERA_${uid}`} className="w-[98%] rounded overflow-hidden m-auto">
{/* camera placeholder */}
</div>
</li>;
@@ -98,13 +100,11 @@ const VoiceManagement = ({ info, setMute, setDeafen, leave }: Props) => {
<Tooltip tip={muted ? t("unmute") : t("mute")} placement="top">
<li role={"button"} onClick={setMute.bind(null, !muted)} className="py-2 px-3 rounded bg-gray-100 dark:bg-gray-900">
{muted ? <IconMicOff className="fill-gray-700 dark:fill-gray-300" /> : <IconMic className="fill-gray-700 dark:fill-gray-300" />}
</li>
</Tooltip>
<Tooltip tip={"Camera"} placement="top">
<li role={"button"} className="py-2 px-3 rounded bg-gray-100 dark:bg-gray-900">
{muted ? <IconCameraOff className="fill-gray-700 dark:fill-gray-300" /> : <IconCamera className="fill-gray-700 dark:fill-gray-300" />}
<Tooltip tip={video ? t("camera_off") : t("camera_on")} placement="top">
<li role={"button"} onClick={video ? closeCamera : openCamera} className="py-2 px-3 rounded bg-gray-100 dark:bg-gray-900">
{video ? <IconCamera className="fill-gray-700 dark:fill-gray-300" /> : <IconCameraOff className="fill-gray-700 dark:fill-gray-300" />}
</li>
</Tooltip>
<Tooltip tip={"Share Screen"} placement="top">