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 // 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}