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;
-  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;

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,6 +173,7 @@ export const PTTCallView: React.FC<Props> = ({
         // https://github.com/vector-im/element-call/issues/328
         show={false}
       />
+      {showControls && (
         <Header className={styles.header}>
           <LeftNav>
             <RoomSetupHeaderInfo
@@ -183,7 +185,10 @@ export const PTTCallView: React.FC<Props> = ({
           </LeftNav>
           <RightNav />
         </Header>
+      )}
       <div className={styles.center}>
+        {showControls && (
+          <>
             <div className={styles.participants}>
               <p>{`${participants.length} ${
                 participants.length > 1 ? "people" : "person"
@@ -209,9 +214,12 @@ export const PTTCallView: React.FC<Props> = ({
               {!isEmbedded && <HangupButton onPress={onLeave} />}
               <InviteButton onPress={() => inviteModalState.open()} />
             </div>
+          </>
+        )}
 
         <div className={styles.pttButtonContainer}>
-          {activeSpeakerUserId ? (
+          {showControls &&
+            (activeSpeakerUserId ? (
               <div className={styles.talkingInfo}>
                 <h2>
                   {!activeSpeakerIsLocalUser && (
@@ -225,7 +233,7 @@ export const PTTCallView: React.FC<Props> = ({
               </div>
             ) : (
               <div className={styles.talkingInfo} />
-          )}
+            ))}
           <PTTButton
             enabled={!feedbackModalState.isOpen}
             showTalkOverError={showTalkOverError}
@@ -241,6 +249,7 @@ export const PTTCallView: React.FC<Props> = ({
             enqueueNetworkWaiting={enqueueTalkingExpected}
             setNetworkWaiting={setTalkingExpected}
           />
+          {showControls && (
             <p className={styles.actionTip}>
               {getPromptText(
                 networkWaiting,
@@ -253,6 +262,7 @@ export const PTTCallView: React.FC<Props> = ({
                 connected
               )}
             </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>