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

Adapt walkie-talkie layout to hide controls at small sizes

Browse source
This commit is contained in:
Robin Townsend 2022-07-05 13:45:40 -04:00
commit b9a2473d19
2 changed files with 88 additions and 67 deletions
Download patch file Download diff file Expand all files Collapse all files

15
src/room/PTTButton.module.css
View file

@ -1,6 +1,6 @@
.pttButton { .pttButton {
width: 100vw; height: 100%;
height: 100vh; aspect-ratio: 1;
max-height: 232px; max-height: 232px;
max-width: 232px; max-width: 232px;
border-radius: 116px; border-radius: 116px;
@ -9,9 +9,20 @@
background-color: #21262c; background-color: #21262c;
position: relative; position: relative;
padding: 0; padding: 0;
margin: 4px;
cursor: pointer; cursor: pointer;
} }
.micIcon {
max-height: 50%;
}
.avatar {
/* Remove explicit size to allow avatar to scale with the button */
width: unset !important;
height: unset !important;
}
.talking { .talking {
background-color: var(--accent); background-color: var(--accent);
cursor: unset; cursor: unset;

140
src/room/PTTCallView.tsx
View file

@ -113,6 +113,7 @@ export const PTTCallView: React.FC<Props> = ({
useModalTriggerState(); useModalTriggerState();
const [containerRef, bounds] = useMeasure({ polyfill: ResizeObserver }); const [containerRef, bounds] = useMeasure({ polyfill: ResizeObserver });
const facepileSize = bounds.width < 800 ? "sm" : "md"; const facepileSize = bounds.width < 800 ? "sm" : "md";
const showControls = bounds.height > 500;
const pttButtonSize = 232; const pttButtonSize = 232;
const { audioOutput } = useMediaHandler(); const { audioOutput } = useMediaHandler();
@ -172,60 +173,67 @@ export const PTTCallView: React.FC<Props> = ({
// https://github.com/vector-im/element-call/issues/328 // https://github.com/vector-im/element-call/issues/328
show={false} show={false}
/> />
<Header className={styles.header}> {showControls && (
<LeftNav> <Header className={styles.header}>
<RoomSetupHeaderInfo <LeftNav>
roomName={roomName} <RoomSetupHeaderInfo
avatarUrl={avatarUrl} roomName={roomName}
onPress={onLeave} avatarUrl={avatarUrl}
isEmbedded={isEmbedded} onPress={onLeave}
/> isEmbedded={isEmbedded}
</LeftNav> />
<RightNav /> </LeftNav>
</Header> <RightNav />
</Header>
)}
<div className={styles.center}> <div className={styles.center}>
<div className={styles.participants}> {showControls && (
<p>{`${participants.length} ${ <>
participants.length > 1 ? "people" : "person" <div className={styles.participants}>
} connected`}</p> <p>{`${participants.length} ${
<Facepile participants.length > 1 ? "people" : "person"
size={facepileSize} } connected`}</p>
max={8} <Facepile
className={styles.facepile} size={facepileSize}
client={client} max={8}
participants={participants} className={styles.facepile}
/> client={client}
</div> participants={participants}
<div className={styles.footer}> />
<OverflowMenu </div>
inCall <div className={styles.footer}>
roomId={roomId} <OverflowMenu
client={client} inCall
groupCall={groupCall} roomId={roomId}
showInvite={false} client={client}
feedbackModalState={feedbackModalState} groupCall={groupCall}
feedbackModalProps={feedbackModalProps} showInvite={false}
/> feedbackModalState={feedbackModalState}
{!isEmbedded && <HangupButton onPress={onLeave} />} feedbackModalProps={feedbackModalProps}
<InviteButton onPress={() => inviteModalState.open()} /> />
</div> {!isEmbedded && <HangupButton onPress={onLeave} />}
<InviteButton onPress={() => inviteModalState.open()} />
</div>
</>
)}
<div className={styles.pttButtonContainer}> <div className={styles.pttButtonContainer}>
{activeSpeakerUserId ? ( {showControls &&
<div className={styles.talkingInfo}> (activeSpeakerUserId ? (
<h2> <div className={styles.talkingInfo}>
{!activeSpeakerIsLocalUser && ( <h2>
<AudioIcon className={styles.speakerIcon} /> {!activeSpeakerIsLocalUser && (
)} <AudioIcon className={styles.speakerIcon} />
{activeSpeakerIsLocalUser )}
? "Talking..." {activeSpeakerIsLocalUser
: `${activeSpeakerDisplayName} is talking...`} ? "Talking..."
</h2> : `${activeSpeakerDisplayName} is talking...`}
<Timer value={activeSpeakerUserId} /> </h2>
</div> <Timer value={activeSpeakerUserId} />
) : ( </div>
<div className={styles.talkingInfo} /> ) : (
)} <div className={styles.talkingInfo} />
))}
<PTTButton <PTTButton
enabled={!feedbackModalState.isOpen} enabled={!feedbackModalState.isOpen}
showTalkOverError={showTalkOverError} showTalkOverError={showTalkOverError}
@ -241,18 +249,20 @@ export const PTTCallView: React.FC<Props> = ({
enqueueNetworkWaiting={enqueueTalkingExpected} enqueueNetworkWaiting={enqueueTalkingExpected}
setNetworkWaiting={setTalkingExpected} setNetworkWaiting={setTalkingExpected}
/> />
<p className={styles.actionTip}> {showControls && (
{getPromptText( <p className={styles.actionTip}>
networkWaiting, {getPromptText(
showTalkOverError, networkWaiting,
pttButtonHeld, showTalkOverError,
activeSpeakerIsLocalUser, pttButtonHeld,
talkOverEnabled, activeSpeakerIsLocalUser,
activeSpeakerUserId, talkOverEnabled,
activeSpeakerDisplayName, activeSpeakerUserId,
connected activeSpeakerDisplayName,
)} connected
</p> )}
</p>
)}
{userMediaFeeds.map((callFeed) => ( {userMediaFeeds.map((callFeed) => (
<PTTFeed <PTTFeed
key={callFeed.userId} key={callFeed.userId}
@ -260,7 +270,7 @@ export const PTTCallView: React.FC<Props> = ({
audioOutputDevice={audioOutput} audioOutputDevice={audioOutput}
/> />
))} ))}
{isAdmin && ( {isAdmin && showControls && (
<Toggle <Toggle
isSelected={talkOverEnabled} isSelected={talkOverEnabled}
onChange={setTalkOverEnabled} onChange={setTalkOverEnabled}
@ -271,7 +281,7 @@ export const PTTCallView: React.FC<Props> = ({
</div> </div>
</div> </div>
{inviteModalState.isOpen && ( {inviteModalState.isOpen && showControls && (
<InviteModal roomId={roomId} {...inviteModalProps} /> <InviteModal roomId={roomId} {...inviteModalProps} />
)} )}
</div> </div>