Prefer showing the reaction button at small screen widths

src/button/Button.tsx

@@ -16,7 +16,6 @@ import {
   EndCallIcon,
   ShareScreenSolidIcon,
   SettingsSolidIcon,
-  SwitchCameraSolidIcon,
 } from "@vector-im/compound-design-tokens/assets/web/icons";
 
 import styles from "./Button.module.css";
@@ -67,23 +66,6 @@ export const VideoButton: FC<VideoButtonProps> = ({ muted, ...props }) => {
   );
 };
 
-export const SwitchCameraButton: FC<ComponentPropsWithoutRef<"button">> = (
-  props,
-) => {
-  const { t } = useTranslation();
-
-  return (
-    <Tooltip label={t("switch_camera")}>
-      <CpdButton
-        iconOnly
-        Icon={SwitchCameraSolidIcon}
-        kind="secondary"
-        {...props}
-      />
-    </Tooltip>
-  );
-};
-
 interface ShareScreenButtonProps extends ComponentPropsWithoutRef<"button"> {
   enabled: boolean;
 }

src/grid/TileWrapper.tsx

@@ -61,7 +61,12 @@ const TileWrapper_ = memo(
     useDrag((state) => onDrag?.current!(id, state), {
       target: ref,
       filterTaps: true,
-      preventScroll: true,
+      // Previous designs, which allowed tiles to be dragged and dropped around
+      // the scrolling grid, required us to set preventScroll to true here. But
+      // our designs no longer call for this, and meanwhile there's a bug in
+      // use-gesture that causes filterTaps + preventScroll to break buttons
+      // within tiles (like the 'switch camera' button) on mobile.
+      // https://github.com/pmndrs/use-gesture/issues/593
     });
 
     return (

src/room/InCallView.module.css

@@ -108,14 +108,6 @@ Please see LICENSE in the repository root for full details.
 }
 
 @media (max-width: 370px) {
-  .raiseHand {
-    display: none;
-  }
-}
-
-@media (max-width: 340px) {
-  .invite,
-  .switchCamera,
   .shareScreen {
     display: none;
   }
@@ -127,6 +119,13 @@ Please see LICENSE in the repository root for full details.
   }
 }
 
+@media (max-width: 320px) {
+  .invite,
+  .raiseHand {
+    display: none;
+  }
+}
+
 @media (max-height: 400px) {
   .footer {
     padding-block: var(--cpd-space-4x);

src/room/InCallView.tsx

@@ -44,7 +44,6 @@ import {
   ShareScreenButton,
   SettingsButton,
   ReactionToggleButton,
-  SwitchCameraButton,
 } from "../button";
 import { Header, LeftNav, RightNav, RoomHeaderInfo } from "../Header";
 import { type HeaderStyle, useUrlParams } from "../UrlParams";
@@ -94,7 +93,6 @@ import {
   useReactionsSender,
 } from "../reactions/useReactionsSender";
 import { ReactionsAudioRenderer } from "./ReactionAudioRenderer";
-import { useSwitchCamera } from "./useSwitchCamera";
 import { ReactionsOverlay } from "./ReactionsOverlay";
 import { CallEventAudioRenderer } from "./CallEventAudioRenderer";
 import {
@@ -311,7 +309,6 @@ export const InCallView: FC<InCallViewProps> = ({
   const showFooter = useObservableEagerState(vm.showFooter$);
   const earpieceMode = useObservableEagerState(vm.earpieceMode$);
   const audioOutputSwitcher = useObservableEagerState(vm.audioOutputSwitcher$);
-  const switchCamera = useSwitchCamera(vm.localVideo$);
 
   // 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
@@ -672,15 +669,6 @@ export const InCallView: FC<InCallViewProps> = ({
       data-testid="incall_videomute"
     />,
   );
-  if (switchCamera !== null)
-    buttons.push(
-      <SwitchCameraButton
-        key="switch_camera"
-        className={styles.switchCamera}
-        onClick={switchCamera}
-        onTouchEnd={onControlsTouchEnd}
-      />,
-    );
   if (canScreenshare && !hideScreensharing) {
     buttons.push(
       <ShareScreenButton

src/room/LobbyView.tsx

@@ -24,8 +24,7 @@ import {
   type LocalVideoTrack,
   Track,
 } from "livekit-client";
-import { useObservable, useObservableEagerState } from "observable-hooks";
-import { map } from "rxjs";
+import { useObservableEagerState } from "observable-hooks";
 import { useNavigate } from "react-router-dom";
 
 import inCallStyles from "./InCallView.module.css";
@@ -38,7 +37,6 @@ import {
   EndCallButton,
   MicButton,
   SettingsButton,
-  SwitchCameraButton,
   VideoButton,
 } from "../button/Button";
 import { SettingsModal, defaultSettingsTab } from "../settings/SettingsModal";
@@ -47,7 +45,6 @@ import { E2eeType } from "../e2ee/e2eeType";
 import { Link } from "../button/Link";
 import { useMediaDevices } from "../MediaDevicesContext";
 import { useInitial } from "../useInitial";
-import { useSwitchCamera as useShowSwitchCamera } from "./useSwitchCamera";
 import {
   useTrackProcessor,
   useTrackProcessorSync,
@@ -195,12 +192,6 @@ export const LobbyView: FC<Props> = ({
   }, [devices, videoInputId, videoTrack]);
 
   useTrackProcessorSync(videoTrack);
-  const showSwitchCamera = useShowSwitchCamera(
-    useObservable(
-      (inputs$) => inputs$.pipe(map(([video]) => video)),
-      [videoTrack],
-    ),
-  );
 
   // TODO: Unify this component with InCallView, so we can get slick joining
   // animations and don't have to feel bad about reusing its CSS
@@ -257,9 +248,6 @@ export const LobbyView: FC<Props> = ({
               onClick={onVideoPress}
               disabled={muteStates.video.setEnabled === null}
             />
-            {showSwitchCamera && (
-              <SwitchCameraButton onClick={showSwitchCamera} />
-            )}
             <SettingsButton onClick={openSettings} />
             {!confineToRoom && <EndCallButton onClick={onLeaveClick} />}
           </div>

src/state/CallViewModel.ts

@@ -13,10 +13,8 @@ import {
 import {
   type Room as LivekitRoom,
   type LocalParticipant,
-  LocalVideoTrack,
   ParticipantEvent,
   type RemoteParticipant,
-  Track,
 } from "livekit-client";
 import { RoomStateEvent, type Room, type RoomMember } from "matrix-js-sdk";
 import {
@@ -60,7 +58,6 @@ import {
 import {
   LocalUserMediaViewModel,
   type MediaViewModel,
-  observeTrackReference$,
   RemoteUserMediaViewModel,
   ScreenShareViewModel,
   type UserMediaViewModel,
@@ -258,6 +255,7 @@ class UserMedia {
     participant: LocalParticipant | RemoteParticipant | undefined,
     encryptionSystem: EncryptionSystem,
     livekitRoom: LivekitRoom,
+    mediaDevices: MediaDevices,
     displayname$: Observable<string>,
     handRaised$: Observable<Date | null>,
     reaction$: Observable<ReactionOption | null>,
@@ -271,6 +269,7 @@ class UserMedia {
         this.participant$.asObservable() as Observable<LocalParticipant>,
         encryptionSystem,
         livekitRoom,
+        mediaDevices,
         displayname$,
         handRaised$,
         reaction$,
@@ -382,17 +381,6 @@ function getRoomMemberFromRtcMember(
 
 // TODO: Move wayyyy more business logic from the call and lobby views into here
 export class CallViewModel extends ViewModel {
-  public readonly localVideo$: Observable<LocalVideoTrack | null> =
-    observeTrackReference$(
-      of(this.livekitRoom.localParticipant),
-      Track.Source.Camera,
-    ).pipe(
-      map((trackRef) => {
-        const track = trackRef?.publication?.track;
-        return track instanceof LocalVideoTrack ? track : null;
-      }),
-    );
-
   /**
    * The raw list of RemoteParticipants as reported by LiveKit
    */
@@ -579,6 +567,7 @@ export class CallViewModel extends ViewModel {
                       participant,
                       this.encryptionSystem,
                       this.livekitRoom,
+                      this.mediaDevices,
                       this.memberDisplaynames$.pipe(
                         map((m) => m.get(matrixIdentifier) ?? "[👻]"),
                       ),
@@ -643,6 +632,7 @@ export class CallViewModel extends ViewModel {
                             participant,
                             this.encryptionSystem,
                             this.livekitRoom,
+                            this.mediaDevices,
                             this.memberDisplaynames$.pipe(
                               map((m) => m.get(participant.identity) ?? "[👻]"),
                             ),