Show a reduced set of controls when the window is narrow

This commit is contained in:
Robin Townsend 2022-09-26 20:31:52 -04:00
parent 47f7e0e5a0
commit fdc0272940

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}