Merge pull request #444 from robintown/wt-small

Adapt walkie-talkie layout to hide controls at small sizes

src/room/PTTButton.module.css

@@ -1,17 +1,28 @@
 .pttButton {
   width: 100vw;
-  height: 100vh;
+  aspect-ratio: 1;
-  max-height: 232px;
+  max-height: min(232px, calc(100vh - 16px));
-  max-width: 232px;
+  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;

src/room/PTTCallView.module.css

@@ -41,6 +41,7 @@
 
 .talkingInfo {
   display: flex;
+  flex-shrink: 0;
   flex-direction: column;
   align-items: center;
   margin-bottom: 20px;

src/room/PTTCallView.tsx

@@ -113,6 +113,7 @@ export const PTTCallView: React.FC<Props> = ({
     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<Props> = ({
         // https://github.com/vector-im/element-call/issues/328
         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.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}>
-          {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
             enabled={!feedbackModalState.isOpen}
             showTalkOverError={showTalkOverError}
@@ -241,18 +249,20 @@ export const PTTCallView: React.FC<Props> = ({
             enqueueNetworkWaiting={enqueueTalkingExpected}
             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) => (
             <PTTFeed
               key={callFeed.userId}
@@ -260,7 +270,7 @@ export const PTTCallView: React.FC<Props> = ({
               audioOutputDevice={audioOutput}
             />
           ))}
-          {isAdmin && (
+          {isAdmin && showControls && (
             <Toggle
               isSelected={talkOverEnabled}
               onChange={setTalkOverEnabled}
@@ -271,7 +281,7 @@ export const PTTCallView: React.FC<Props> = ({
         </div>
       </div>
 
-      {inviteModalState.isOpen && (
+      {inviteModalState.isOpen && showControls && (
         <InviteModal roomId={roomId} {...inviteModalProps} />
       )}
     </div>