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

enhance: more like zoom UX

Browse Source
This commit is contained in:
Tristan Yang
2023-04-28 10:26:17 +08:00
parent 86ec2ea808
commit f13616f176
4 changed files with 54 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/routes/chat/VoiceChat/VoiceManagement.tsx
+7 -4
View File
@@ -2,7 +2,7 @@ import clsx from 'clsx';
import { useEffect } from 'react';
import { useTranslation } from 'react-i18next';
import { VoicingInfo } from '../../../app/slices/voice';
import { VoicingInfo, updatePin } from '../../../app/slices/voice';
import { useAppSelector } from '../../../app/store';
import Avatar from '../../../common/component/Avatar';
// import IconHeadphone from '../../../assets/icons/sound.on.svg';
@@ -49,9 +49,12 @@ const VoiceManagement = ({ id, context, info, setMute, leave, closeCamera, openC
playAgoraVideo(id);
});
}, [voicingMembers.ids]);
const handleFullscreen = () => {
const handleFullscreen = (uid?: number) => {
if (context == "channel") {
dispatch(updateChannelVisibleAside({ id, aside: "voice_fullscreen" }));
if (uid) {
dispatch(updatePin({ uid, action: "pin" }));
}
}
};
if (!info) return null;
@@ -103,7 +106,7 @@ const VoiceManagement = ({ id, context, info, setMute, leave, closeCamera, openC
{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%] rounded overflow-hidden m-auto">
<div onDoubleClick={handleFullscreen.bind(null, uid)} id={`CAMERA_${uid}`} className="w-[98%] rounded overflow-hidden m-auto">
{/* camera placeholder */}
</div>
</li>;
@@ -128,7 +131,7 @@ const VoiceManagement = ({ id, context, info, setMute, leave, closeCamera, openC
</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">
<li role={"button"} onClick={handleFullscreen.bind(null, undefined)} className="py-2 px-3 rounded bg-gray-100 dark:bg-gray-900">
<IconFullscreen className="fill-gray-700 dark:fill-gray-300" />
</li>
</Tooltip>