Matrix/element-call-Github
1
0
Fork 0
mirror of https://github.com/vector-im/element-call.git synced 2024-11-15 00:04:59 +08:00
Code Issues Packages Projects Releases Wiki Activity

Show a reduced set of controls when the window is narrow

Browse Source
This commit is contained in:
Robin Townsend 2022-09-26 20:31:52 -04:00
parent 47f7e0e5a0
commit fdc0272940
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 // window is too small to show everyone
const maximisedParticipant = useMemo( 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.focused) ??
items.find((item) => item.callFeed) ?? items.find((item) => item.callFeed) ??
null null
@ -223,6 +223,8 @@ export function InCallView({
[fullscreenParticipant, bounds, items] [fullscreenParticipant, bounds, items]
); );
const reducedControls = bounds.width <= 400;
const renderAvatar = useCallback( const renderAvatar = useCallback(
(roomMember: RoomMember, width: number, height: number) => { (roomMember: RoomMember, width: number, height: number) => {
const avatarUrl = roomMember.user?.avatarUrl; const avatarUrl = roomMember.user?.avatarUrl;
@ -325,13 +327,13 @@ export function InCallView({
<div className={styles.footer}> <div className={styles.footer}>
<MicButton muted={microphoneMuted} onPress={toggleMicrophoneMuted} /> <MicButton muted={microphoneMuted} onPress={toggleMicrophoneMuted} />
<VideoButton muted={localVideoMuted} onPress={toggleLocalVideoMuted} /> <VideoButton muted={localVideoMuted} onPress={toggleLocalVideoMuted} />
{canScreenshare && !isSafari && !maximisedParticipant && ( {canScreenshare && !isSafari && !reducedControls && (
<ScreenshareButton <ScreenshareButton
enabled={isScreensharing} enabled={isScreensharing}
onPress={toggleScreensharing} onPress={toggleScreensharing}
/> />
)} )}
{!maximisedParticipant && ( {!reducedControls && (
<OverflowMenu <OverflowMenu
inCall inCall
roomIdOrAlias={roomIdOrAlias} roomIdOrAlias={roomIdOrAlias}