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

feat: voice fullscreen mode

Browse Source
This commit is contained in:
Tristan Yang
2023-04-27 11:56:21 +08:00
parent 3bcdb640cd
commit 86ec2ea808
14 changed files with 235 additions and 49 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/routes/chat/VoiceChat/VoiceManagement.tsx
+22 -12
View File
@@ -5,23 +5,28 @@ import { useTranslation } from 'react-i18next';
import { VoicingInfo } from '../../../app/slices/voice';
import { useAppSelector } from '../../../app/store';
import Avatar from '../../../common/component/Avatar';
import IconHeadphone from '../../../assets/icons/sound.on.svg';
import IconHeadphoneOff from '../../../assets/icons/sound.off.svg';
// import IconHeadphone from '../../../assets/icons/sound.on.svg';
// import IconHeadphoneOff from '../../../assets/icons/sound.off.svg';
import IconMic from '../../../assets/icons/mic.on.svg';
import IconMicOff from '../../../assets/icons/mic.off.svg';
import IconCameraOff from '../../../assets/icons/camera.off.svg';
import IconCamera from '../../../assets/icons/camera.svg';
import IconFullscreen from '../../../assets/icons/fullscreen.svg';
import IconScreen from '../../../assets/icons/share.screen.svg';
import StyledButton from '../../../common/component/styled/Button';
import IconCallOff from '../../../assets/icons/call.off.svg';
import StyledButton from '../../../common/component/styled/Button';
import Tooltip from '../../../common/component/Tooltip';
import { playAgoraVideo } from '../../../common/utils';
import { ChatContext } from '../../../types/common';
import { updateChannelVisibleAside } from '../../../app/slices/footprint';
import { useDispatch } from 'react-redux';
// import User from '../../../common/component/User';
type Props = {
id: number,
context: ChatContext,
info: VoicingInfo | null,
setMute: (param: boolean) => void,
setDeafen: (param: boolean) => void,
leave: () => void,
closeCamera: () => void,
openCamera: () => void,
@@ -29,8 +34,9 @@ type Props = {
stopShareScreen: () => void
}
const VoiceManagement = ({ info, setMute, setDeafen, leave, closeCamera, openCamera, startShareScreen, stopShareScreen }: Props) => {
const VoiceManagement = ({ id, context, info, setMute, leave, closeCamera, openCamera, startShareScreen, stopShareScreen }: Props) => {
const { t } = useTranslation("chat");
const dispatch = useDispatch();
const { userData, voicingMembers } = useAppSelector(store => {
return {
userData: store.users.byId,
@@ -43,9 +49,13 @@ const VoiceManagement = ({ info, setMute, setDeafen, leave, closeCamera, openCam
playAgoraVideo(id);
});
}, [voicingMembers.ids]);
const handleFullscreen = () => {
if (context == "channel") {
dispatch(updateChannelVisibleAside({ id, aside: "voice_fullscreen" }));
}
};
if (!info) return null;
const { deafen, muted, video, shareScreen } = info;
const { muted, video, shareScreen } = 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;
@@ -102,11 +112,6 @@ const VoiceManagement = ({ info, setMute, setDeafen, leave, closeCamera, openCam
</ul>
<div className="flex flex-col gap-2">
<ul className='flex justify-between'>
<Tooltip tip={deafen ? t("undeafen") : t("deafen")} placement="top">
<li role={"button"} onClick={setDeafen.bind(null, !deafen)} className="py-2 px-3 rounded bg-gray-100 dark:bg-gray-900">
{deafen ? <IconHeadphoneOff className="fill-gray-700 dark:fill-gray-300" /> : <IconHeadphone className="fill-gray-700 dark:fill-gray-300" />}
</li>
</Tooltip>
<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" />}
@@ -122,6 +127,11 @@ const VoiceManagement = ({ info, setMute, setDeafen, leave, closeCamera, openCam
<IconScreen className="fill-gray-700 dark:fill-gray-300" />
</li>
</Tooltip>
<Tooltip tip={"Fullscreen"} placement="top">
<li role={"button"} onClick={handleFullscreen} className="py-2 px-3 rounded bg-gray-100 dark:bg-gray-900">
<IconFullscreen className="fill-gray-700 dark:fill-gray-300" />
</li>
</Tooltip>
</ul>
<StyledButton onClick={leave} className='bg-red-600 hover:!bg-red-700 text-center'>
<Tooltip tip={t("leave_voice")} placement="top" offset={[0, 24]} >