Put a switch camera button on the local user's tile

Author: robintown

src/tile/GridTile.tsx

@@ -27,6 +27,7 @@ import {
   UserProfileIcon,
   ExpandIcon,
   VolumeOffSolidIcon,
+  SwitchCameraSolidIcon,
 } from "@vector-im/compound-design-tokens/assets/web/icons";
 import {
   ContextMenu,
@@ -62,6 +63,7 @@ interface UserMediaTileProps extends TileProps {
   vm: UserMediaViewModel;
   mirror: boolean;
   locallyMuted: boolean;
+  primaryButton?: ReactNode;
   menuStart?: ReactNode;
   menuEnd?: ReactNode;
 }
@@ -72,6 +74,7 @@ const UserMediaTile = forwardRef<HTMLDivElement, UserMediaTileProps>(
       vm,
       showSpeakingIndicators,
       locallyMuted,
+      primaryButton,
       menuStart,
       menuEnd,
       className,
@@ -160,20 +163,22 @@ const UserMediaTile = forwardRef<HTMLDivElement, UserMediaTileProps>(
         }
         displayName={displayName}
         primaryButton={
-          <Menu
-            open={menuOpen}
-            onOpenChange={setMenuOpen}
-            title={displayName}
-            trigger={
-              <button aria-label={t("common.options")}>
-                <OverflowHorizontalIcon aria-hidden width={20} height={20} />
-              </button>
-            }
-            side="left"
-            align="start"
-          >
-            {menu}
-          </Menu>
+          primaryButton ?? (
+            <Menu
+              open={menuOpen}
+              onOpenChange={setMenuOpen}
+              title={displayName}
+              trigger={
+                <button aria-label={t("common.options")}>
+                  <OverflowHorizontalIcon aria-hidden width={20} height={20} />
+                </button>
+              }
+              side="left"
+              align="start"
+            >
+              {menu}
+            </Menu>
+          )
         }
         raisedHandTime={handRaised ?? undefined}
         currentReaction={reaction ?? undefined}
@@ -205,6 +210,8 @@ const LocalUserMediaTile = forwardRef<HTMLDivElement, LocalUserMediaTileProps>(
     const { t } = useTranslation();
     const mirror = useObservableEagerState(vm.mirror$);
     const alwaysShow = useObservableEagerState(vm.alwaysShow$);
+    const switchCamera = useObservableEagerState(vm.switchCamera$);
+
     const latestAlwaysShow = useLatest(alwaysShow);
     const onSelectAlwaysShow = useCallback(
       (e: Event) => {
@@ -220,6 +227,13 @@ const LocalUserMediaTile = forwardRef<HTMLDivElement, LocalUserMediaTileProps>(
         vm={vm}
         locallyMuted={false}
         mirror={mirror}
+        primaryButton={
+          switchCamera === null ? undefined : (
+            <button aria-label={t("switch_camera")} onClick={switchCamera}>
+              <SwitchCameraSolidIcon aria-hidden width={20} height={20} />
+            </button>
+          )
+        }
         menuStart={
           <ToggleMenuItem
             Icon={VisibilityOnIcon}