diff --git a/src/room/PTTButton.module.css b/src/room/PTTButton.module.css index 8b15d333..a0b64b51 100644 --- a/src/room/PTTButton.module.css +++ b/src/room/PTTButton.module.css @@ -1,17 +1,28 @@ .pttButton { width: 100vw; - height: 100vh; - max-height: 232px; - max-width: 232px; + aspect-ratio: 1; + max-height: min(232px, calc(100vh - 16px)); + max-width: min(232px, calc(100vw - 16px)); border-radius: 116px; color: var(--primary-content); border: 6px solid var(--accent); background-color: #21262c; position: relative; padding: 0; + margin: 4px; 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 { background-color: var(--accent); cursor: unset; diff --git a/src/room/PTTCallView.module.css b/src/room/PTTCallView.module.css index d4b01e7f..76ef6998 100644 --- a/src/room/PTTCallView.module.css +++ b/src/room/PTTCallView.module.css @@ -41,6 +41,7 @@ .talkingInfo { display: flex; + flex-shrink: 0; flex-direction: column; align-items: center; margin-bottom: 20px; diff --git a/src/room/PTTCallView.tsx b/src/room/PTTCallView.tsx index c9a70076..04c01d0f 100644 --- a/src/room/PTTCallView.tsx +++ b/src/room/PTTCallView.tsx @@ -113,6 +113,7 @@ export const PTTCallView: React.FC = ({ useModalTriggerState(); const [containerRef, bounds] = useMeasure({ polyfill: ResizeObserver }); const facepileSize = bounds.width < 800 ? "sm" : "md"; + const showControls = bounds.height > 500; const pttButtonSize = 232; const { audioOutput } = useMediaHandler(); @@ -172,60 +173,67 @@ export const PTTCallView: React.FC = ({ // https://github.com/vector-im/element-call/issues/328 show={false} /> -
- - - - -
+ {showControls && ( +
+ + + + +
+ )}
-
-

{`${participants.length} ${ - participants.length > 1 ? "people" : "person" - } connected`}

- -
-
- - {!isEmbedded && } - inviteModalState.open()} /> -
+ {showControls && ( + <> +
+

{`${participants.length} ${ + participants.length > 1 ? "people" : "person" + } connected`}

+ +
+
+ + {!isEmbedded && } + inviteModalState.open()} /> +
+ + )}
- {activeSpeakerUserId ? ( -
-

- {!activeSpeakerIsLocalUser && ( - - )} - {activeSpeakerIsLocalUser - ? "Talking..." - : `${activeSpeakerDisplayName} is talking...`} -

- -
- ) : ( -
- )} + {showControls && + (activeSpeakerUserId ? ( +
+

+ {!activeSpeakerIsLocalUser && ( + + )} + {activeSpeakerIsLocalUser + ? "Talking..." + : `${activeSpeakerDisplayName} is talking...`} +

+ +
+ ) : ( +
+ ))} = ({ enqueueNetworkWaiting={enqueueTalkingExpected} setNetworkWaiting={setTalkingExpected} /> -

- {getPromptText( - networkWaiting, - showTalkOverError, - pttButtonHeld, - activeSpeakerIsLocalUser, - talkOverEnabled, - activeSpeakerUserId, - activeSpeakerDisplayName, - connected - )} -

+ {showControls && ( +

+ {getPromptText( + networkWaiting, + showTalkOverError, + pttButtonHeld, + activeSpeakerIsLocalUser, + talkOverEnabled, + activeSpeakerUserId, + activeSpeakerDisplayName, + connected + )} +

+ )} {userMediaFeeds.map((callFeed) => ( = ({ audioOutputDevice={audioOutput} /> ))} - {isAdmin && ( + {isAdmin && showControls && ( = ({
- {inviteModalState.isOpen && ( + {inviteModalState.isOpen && showControls && ( )}