Show controls on tap/hover on small screens

This changes the mobile landscape view to automatically hide the controls, giving more visibility to the video underneath, and show them on tap/hover.

src/room/InCallView.module.css

@@ -22,31 +22,6 @@ limitations under the License.
   overflow-y: auto;
 }
 
-.controlsOverlay {
-  position: relative;
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-  overflow: auto;
-  overflow-inline: hidden;
-  /* There used to be a contain: strict here, but due to some bugs in Firefox,
-  this was causing the Z-ordering of modals to glitch out. It can be added back
-  if those issues appear to be resolved. */
-}
-
-.centerMessage {
-  display: flex;
-  flex: 1;
-  justify-content: center;
-  align-items: center;
-  flex-direction: column;
-}
-
-.centerMessage p {
-  display: block;
-  margin-bottom: 0;
-}
-
 .header {
   position: sticky;
   flex-shrink: 0;
@@ -82,6 +57,24 @@ limitations under the License.
   );
 }
 
+.footer.overlay {
+  position: absolute;
+  inset-block-end: 0;
+  inset-inline: 0;
+  opacity: 1;
+  transition: opacity 0.15s;
+}
+
+.footer.overlay.hidden {
+  opacity: 0;
+  pointer-events: none;
+}
+
+.footer.overlay:has(:focus-visible) {
+  opacity: 1;
+  pointer-events: initial;
+}
+
 .logo {
   grid-area: logo;
   justify-self: start;
@@ -120,21 +113,6 @@ limitations under the License.
   }
 }
 
-.footerThin {
-  padding-top: var(--cpd-space-3x);
-  padding-bottom: var(--cpd-space-5x);
-}
-
-.footerHidden {
-  display: none;
-}
-
-.footer.overlay {
-  position: absolute;
-  inset-block-end: 0;
-  inset-inline: 0;
-}
-
 .fixedGrid {
   position: absolute;
   inline-size: 100%;

src/room/InCallView.tsx

@@ -24,7 +24,9 @@ import { ConnectionState, Room } from "livekit-client";
 import { MatrixClient } from "matrix-js-sdk/src/client";
 import {
   FC,
+  PointerEvent,
   PropsWithoutRef,
+  TouchEvent,
   forwardRef,
   useCallback,
   useEffect,
@@ -88,6 +90,8 @@ import { makeSpotlightPortraitLayout } from "../grid/SpotlightPortraitLayout";
 
 const canScreenshare = "getDisplayMedia" in (navigator.mediaDevices ?? {});
 
+const maxTapDurationMs = 400;
+
 export interface ActiveCallProps
   extends Omit<InCallViewProps, "livekitRoom" | "connState"> {
   e2eeSystem: EncryptionSystem;
@@ -198,6 +202,38 @@ export const InCallView: FC<InCallViewProps> = ({
   const windowMode = useObservableEagerState(vm.windowMode);
   const layout = useObservableEagerState(vm.layout);
   const gridMode = useObservableEagerState(vm.gridMode);
+  const showHeader = useObservableEagerState(vm.showHeader);
+  const showFooter = useObservableEagerState(vm.showFooter);
+
+  // Ideally we could detect taps by listening for click events and checking
+  // that the pointerType of the event is "touch", but this isn't yet supported
+  // in Safari: https://developer.mozilla.org/en-US/docs/Web/API/Element/click_event#browser_compatibility
+  // Instead we have to watch for sufficiently fast touch events.
+  const touchStart = useRef<number | null>(null);
+  const onTouchStart = useCallback(() => (touchStart.current = Date.now()), []);
+  const onTouchEnd = useCallback(() => {
+    const start = touchStart.current;
+    if (start !== null && Date.now() - start <= maxTapDurationMs)
+      vm.tapScreen();
+    touchStart.current = null;
+  }, [vm]);
+  const onTouchCancel = useCallback(() => (touchStart.current = null), []);
+
+  // We also need to tell the layout toggle to prevent touch events from
+  // bubbling up, or else the controls will be dismissed before a change event
+  // can be registered on the toggle
+  const onLayoutToggleTouchEnd = useCallback(
+    (e: TouchEvent) => e.stopPropagation(),
+    [],
+  );
+
+  const onPointerMove = useCallback(
+    (e: PointerEvent) => {
+      if (e.pointerType === "mouse") vm.hoverScreen();
+    },
+    [vm],
+  );
+  const onPointerOut = useCallback(() => vm.unhoverScreen(), [vm]);
 
   const [settingsModalOpen, setSettingsModalOpen] = useState(false);
   const [settingsTab, setSettingsTab] = useState(defaultSettingsTab);
@@ -465,12 +501,10 @@ export const InCallView: FC<InCallViewProps> = ({
     footer = (
       <div
         ref={footerRef}
-        className={classNames(
-          styles.footer,
-          !showControls &&
-            (hideHeader ? styles.footerHidden : styles.footerThin),
-          { [styles.overlay]: windowMode === "flat" },
-        )}
+        className={classNames(styles.footer, {
+          [styles.overlay]: windowMode === "flat",
+          [styles.hidden]: !showFooter || (!showControls && hideHeader),
+        })}
       >
         {!mobile && !hideHeader && (
           <div className={styles.logo}>
@@ -488,6 +522,7 @@ export const InCallView: FC<InCallViewProps> = ({
             className={styles.layout}
             layout={gridMode}
             setLayout={setGridMode}
+            onTouchEnd={onLayoutToggleTouchEnd}
           />
         )}
       </div>
@@ -495,9 +530,16 @@ export const InCallView: FC<InCallViewProps> = ({
   }
 
   return (
-    <div className={styles.inRoom} ref={containerRef}>
-      {windowMode !== "pip" &&
-        windowMode !== "flat" &&
+    <div
+      className={styles.inRoom}
+      ref={containerRef}
+      onTouchStart={onTouchStart}
+      onTouchEnd={onTouchEnd}
+      onTouchCancel={onTouchCancel}
+      onPointerMove={onPointerMove}
+      onPointerOut={onPointerOut}
+    >
+      {showHeader &&
         (hideHeader ? (
           // Cosmetic header to fill out space while still affecting the bounds
           // of the grid

src/room/LayoutToggle.tsx

@@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import { ChangeEvent, FC, useCallback } from "react";
+import { ChangeEvent, FC, TouchEvent, useCallback } from "react";
 import { useTranslation } from "react-i18next";
 import { Tooltip } from "@vector-im/compound-web";
 import {
@@ -31,9 +31,15 @@ interface Props {
   layout: Layout;
   setLayout: (layout: Layout) => void;
   className?: string;
+  onTouchEnd?: (e: TouchEvent) => void;
 }
 
-export const LayoutToggle: FC<Props> = ({ layout, setLayout, className }) => {
+export const LayoutToggle: FC<Props> = ({
+  layout,
+  setLayout,
+  className,
+  onTouchEnd,
+}) => {
   const { t } = useTranslation();
 
   const onChange = useCallback(
@@ -50,6 +56,7 @@ export const LayoutToggle: FC<Props> = ({ layout, setLayout, className }) => {
           value="spotlight"
           checked={layout === "spotlight"}
           onChange={onChange}
+          onTouchEnd={onTouchEnd}
         />
       </Tooltip>
       <SpotlightIcon aria-hidden width={24} height={24} />
@@ -60,6 +67,7 @@ export const LayoutToggle: FC<Props> = ({ layout, setLayout, className }) => {
           value="grid"
           checked={layout === "grid"}
           onChange={onChange}
+          onTouchEnd={onTouchEnd}
         />
       </Tooltip>
       <GridIcon aria-hidden width={24} height={24} />