add indicator that to-device is used

src/Header.tsx

@@ -22,10 +22,6 @@ import Logo from "./icons/Logo.svg?react";
 import { Avatar, Size } from "./Avatar";
 import { EncryptionLock } from "./room/EncryptionLock";
 import { useMediaQuery } from "./useMediaQuery";
-import {
-  useExperimentalToDeviceTransportSetting,
-  useSetting,
-} from "./settings/settings";
 
 interface HeaderProps extends HTMLAttributes<HTMLElement> {
   children: ReactNode;
@@ -137,9 +133,7 @@ export const RoomHeaderInfo: FC<RoomHeaderInfoProps> = ({
 }) => {
   const { t } = useTranslation();
   const size = useMediaQuery("(max-width: 550px)") ? "sm" : "lg";
-  const [toDeviceEncryption] = useSetting(
+
-    useExperimentalToDeviceTransportSetting,
-  );
   return (
     <div className={styles.roomHeaderInfo} data-size={size}>
       <Avatar
@@ -159,11 +153,6 @@ export const RoomHeaderInfo: FC<RoomHeaderInfoProps> = ({
           {name}
         </Heading>
         <EncryptionLock encrypted={encrypted} />
-        {
-          // TODO: remove this once we remove the developer flag
-          // and find a better way to device what key transport to use.
-          toDeviceEncryption && <Text size="sm">To Device key transport</Text>
-        }
       </div>
       {(participantCount ?? 0) > 0 && (
         <div className={styles.participantsLine}>

src/room/InCallView.tsx

@@ -10,6 +10,7 @@ import {
   RoomContext,
   useLocalParticipant,
 } from "@livekit/components-react";
+import { Text } from "@vector-im/compound-web";
 import { ConnectionState, type Room } from "livekit-client";
 import { type MatrixClient } from "matrix-js-sdk";
 import {
@@ -94,11 +95,11 @@ import { ReactionsOverlay } from "./ReactionsOverlay";
 import { CallEventAudioRenderer } from "./CallEventAudioRenderer";
 import {
   debugTileLayout as debugTileLayoutSetting,
+  useExperimentalToDeviceTransportSetting,
   useSetting,
 } from "../settings/settings";
 import { ReactionsReader } from "../reactions/ReactionsReader";
 import { ConnectionLostError } from "../utils/errors.ts";
-
 const canScreenshare = "getDisplayMedia" in (navigator.mediaDevices ?? {});
 
 const maxTapDurationMs = 400;
@@ -216,6 +217,10 @@ export const InCallView: FC<InCallViewProps> = ({
     room: livekitRoom,
   });
 
+  const [toDeviceEncryption] = useSetting(
+    useExperimentalToDeviceTransportSetting,
+  );
+
   const toggleMicrophone = useCallback(
     () => muteStates.audio.setEnabled?.((e) => !e),
     [muteStates],
@@ -662,6 +667,18 @@ export const InCallView: FC<InCallViewProps> = ({
             </RightNav>
           </Header>
         ))}
+      {
+        // TODO: remove this once we remove the developer flag
+        // and find a better way to device what key transport to use.
+        toDeviceEncryption && (
+          <Text
+            style={{ height: 0, zIndex: 1, alignSelf: "center", margin: 0 }}
+            size="sm"
+          >
+            using to Device key transport
+          </Text>
+        )
+      }
       <RoomAudioRenderer />
       {renderContent()}
       <CallEventAudioRenderer vm={vm} />

src/utils/matrix.ts

@@ -251,6 +251,7 @@ export async function createRoom(
         "m.room.encryption": 100,
         "m.room.name": 50,
         "m.room.message": 0,
+        // revert this once we do not rely on room messages for perSenderKeys anymore
         "m.room.encrypted": 0,
         "m.sticker": 50,
         "org.matrix.msc3401.call.member": 0,