Merge pull request #2738 from robintown/narrow-footer

Make the footer display more nicely on narrow screens

src/button/ReactionToggleButton.tsx

@@ -211,7 +211,7 @@ export function ReactionPopupMenu({
   );
 }
 
-interface ReactionToggleButtonProps {
+interface ReactionToggleButtonProps extends ComponentPropsWithoutRef<"button"> {
   rtcSession: MatrixRTCSession;
   client: MatrixClient;
 }
@@ -219,6 +219,7 @@ interface ReactionToggleButtonProps {
 export function ReactionToggleButton({
   client,
   rtcSession,
+  ...props
 }: ReactionToggleButtonProps): ReactNode {
   const { t } = useTranslation();
   const { raisedHands, lowerHand, reactions } = useReactions();
@@ -327,6 +328,7 @@ export function ReactionToggleButton({
         onClick={() => setShowReactionsMenu((show) => !show)}
         raised={isHandRaised}
         open={showReactionsMenu}
+        {...props}
       />
       <Modal
         open={showReactionsMenu}

src/room/InCallView.module.css

@@ -36,12 +36,14 @@ Please see LICENSE in the repository root for full details.
   inset-block-end: 0;
   z-index: 1;
   display: grid;
-  grid-template-columns: 1fr auto 1fr;
+  grid-template-columns: minmax(0, var(--inline-content-inset)) 1fr auto 1fr minmax(
-  grid-template-areas: "logo buttons layout";
+      0,
+      var(--inline-content-inset)
+    );
+  grid-template-areas: ". logo buttons layout .";
   align-items: center;
   gap: var(--cpd-space-3x);
-  padding-block: var(--cpd-space-4x);
+  padding-block: var(--cpd-space-10x);
-  padding-inline: var(--inline-content-inset);
   background: linear-gradient(
     180deg,
     rgba(0, 0, 0, 0) 0%,
@@ -83,6 +85,7 @@ Please see LICENSE in the repository root for full details.
 
 .buttons {
   grid-area: buttons;
+  justify-self: center;
   display: flex;
   gap: var(--cpd-space-3x);
 }
@@ -92,15 +95,49 @@ Please see LICENSE in the repository root for full details.
   justify-self: end;
 }
 
-@media (min-height: 400px) {
+@media (max-width: 660px) {
   .footer {
-    padding-block: var(--cpd-space-8x);
+    grid-template-areas: ". buttons buttons buttons .";
+  }
+
+  .logo {
+    display: none;
+  }
+
+  .layout {
+    display: none !important;
   }
 }
 
-@media (min-height: 800px) {
+@media (max-width: 370px) {
+  .raiseHand {
+    display: none;
+  }
+}
+
+@media (max-width: 340px) {
+  .invite,
+  .switchCamera,
+  .shareScreen {
+    display: none;
+  }
+
+  @media (max-height: 400px) {
     .footer {
-    padding-block: var(--cpd-space-10x);
+      display: none;
+    }
+  }
+}
+
+@media (max-height: 400px) {
+  .footer {
+    padding-block: var(--cpd-space-4x);
+  }
+}
+
+@media (max-height: 800px) {
+  .footer {
+    padding-block: var(--cpd-space-8x);
   }
 }
 

src/room/InCallView.tsx

@@ -213,7 +213,6 @@ export const InCallView: FC<InCallViewProps> = ({
 
   const containerRef1 = useRef<HTMLDivElement | null>(null);
   const [containerRef2, bounds] = useMeasure();
-  const boundsValid = bounds.height > 0;
   // Merge the refs so they can attach to the same element
   const containerRef = useMergedRefs(containerRef1, containerRef2);
 
@@ -241,10 +240,6 @@ export const InCallView: FC<InCallViewProps> = ({
     (muted) => muteStates.audio.setEnabled?.(!muted),
   );
 
-  const mobile = boundsValid && bounds.width <= 660;
-  const reducedControls = boundsValid && bounds.width <= 340;
-  const noControls = reducedControls && bounds.height <= 400;
-
   const windowMode = useObservableEagerState(vm.windowMode);
   const layout = useObservableEagerState(vm.layout);
   const gridMode = useObservableEagerState(vm.gridMode);
@@ -526,11 +521,6 @@ export const InCallView: FC<InCallViewProps> = ({
       .catch(logger.error);
   }, [localParticipant, isScreenShareEnabled]);
 
-  let footer: JSX.Element | null;
-
-  if (noControls) {
-    footer = null;
-  } else {
   const buttons: JSX.Element[] = [];
 
   buttons.push(
@@ -549,15 +539,19 @@ export const InCallView: FC<InCallViewProps> = ({
       data-testid="incall_videomute"
     />,
   );
-    if (!reducedControls) {
   if (switchCamera !== null)
     buttons.push(
-          <SwitchCameraButton key="switch_camera" onClick={switchCamera} />,
+      <SwitchCameraButton
+        key="switch_camera"
+        className={styles.switchCamera}
+        onClick={switchCamera}
+      />,
     );
   if (canScreenshare && !hideScreensharing) {
     buttons.push(
       <ShareScreenButton
         key="share_screen"
+        className={styles.shareScreen}
         enabled={isScreenShareEnabled}
         onClick={toggleScreensharing}
         data-testid="incall_screenshare"
@@ -567,14 +561,15 @@ export const InCallView: FC<InCallViewProps> = ({
   if (supportsReactions) {
     buttons.push(
       <ReactionToggleButton
+        key="raise_hand"
+        className={styles.raiseHand}
         client={client}
         rtcSession={rtcSession}
-            key="4"
       />,
     );
   }
+  if (layout.type !== "pip")
     buttons.push(<SettingsButton key="settings" onClick={openSettings} />);
-    }
 
   buttons.push(
     <EndCallButton
@@ -585,7 +580,7 @@ export const InCallView: FC<InCallViewProps> = ({
       data-testid="incall_leave"
     />,
   );
-    footer = (
+  const footer = (
     <div
       ref={footerRef}
       className={classNames(styles.footer, {
@@ -593,7 +588,7 @@ export const InCallView: FC<InCallViewProps> = ({
         [styles.hidden]: !showFooter || (!showControls && hideHeader),
       })}
     >
-        {!mobile && !hideHeader && (
+      {!hideHeader && (
         <div className={styles.logo}>
           <LogoMark width={24} height={24} aria-hidden />
           <LogoType
@@ -604,7 +599,7 @@ export const InCallView: FC<InCallViewProps> = ({
         </div>
       )}
       {showControls && <div className={styles.buttons}>{buttons}</div>}
-        {!mobile && showControls && (
+      {showControls && (
         <LayoutToggle
           className={styles.layout}
           layout={gridMode}
@@ -614,7 +609,6 @@ export const InCallView: FC<InCallViewProps> = ({
       )}
     </div>
   );
-  }
 
   return (
     <div
@@ -646,8 +640,11 @@ export const InCallView: FC<InCallViewProps> = ({
               />
             </LeftNav>
             <RightNav>
-              {!reducedControls && showControls && onShareClick !== null && (
+              {showControls && onShareClick !== null && (
-                <InviteButton onClick={onShareClick} />
+                <InviteButton
+                  className={styles.invite}
+                  onClick={onShareClick}
+                />
               )}
             </RightNav>
           </Header>
@@ -669,7 +666,9 @@ export const InCallView: FC<InCallViewProps> = ({
         </span>
       ))}
       {footer}
-      {!noControls && <RageshakeRequestModal {...rageshakeRequestModalProps} />}
+      {layout.type !== "pip" && (
+        <>
+          <RageshakeRequestModal {...rageshakeRequestModalProps} />
           <SettingsModal
             client={client}
             roomId={rtcSession.room.roomId}
@@ -678,6 +677,8 @@ export const InCallView: FC<InCallViewProps> = ({
             tab={settingsTab}
             onTabChange={setSettingsTab}
           />
+        </>
+      )}
     </div>
   );
 };