xmj/element-call
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Merge pull request #608 from robintown/reduced-controls

Browse source 
Show a reduced set of controls when the window is narrow
This commit is contained in:
Robin 2022-09-27 07:54:24 -04:00 committed by GitHub
commit 70d6c3e9bf
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
1 changed files with 5 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
src/room/InCallView.tsx
View file

@ -215,7 +215,7 @@ export function InCallView({
// window is too small to show everyone
const maximisedParticipant = useMemo(
() =>
fullscreenParticipant ?? (bounds.height <= 500 && bounds.width <= 500)
fullscreenParticipant ?? (bounds.height <= 400 && bounds.width <= 400)
? items.find((item) => item.focused) ??
items.find((item) => item.callFeed) ??
null
@ -223,6 +223,8 @@ export function InCallView({
[fullscreenParticipant, bounds, items]
);
const reducedControls = bounds.width <= 400;
const renderAvatar = useCallback(
(roomMember: RoomMember, width: number, height: number) => {
const avatarUrl = roomMember.user?.avatarUrl;
@ -325,13 +327,13 @@ export function InCallView({
<div className={styles.footer}>
<MicButton muted={microphoneMuted} onPress={toggleMicrophoneMuted} />
<VideoButton muted={localVideoMuted} onPress={toggleLocalVideoMuted} />
{canScreenshare && !isSafari && !maximisedParticipant && (
{canScreenshare && !isSafari && !reducedControls && (
<ScreenshareButton
enabled={isScreensharing}
onPress={toggleScreensharing}
/>
)}
{!maximisedParticipant && (
{!reducedControls && (
<OverflowMenu
inCall
roomIdOrAlias={roomIdOrAlias}