only show to-device transport label in dev mode (#3221)

* Only show to device encryption label if developer mode on

* Add tests for developer mode to device label

---------

Co-authored-by: Timo <toger5@hotmail.de>

src/room/InCallView.tsx

@@ -101,6 +101,7 @@ import {
   debugTileLayout as debugTileLayoutSetting,
   useExperimentalToDeviceTransport as useExperimentalToDeviceTransportSetting,
   muteAllAudio as muteAllAudioSetting,
+  developerMode as developerModeSetting,
   useSetting,
 } from "../settings/settings";
 import { ReactionsReader } from "../reactions/ReactionsReader";
@@ -233,6 +234,8 @@ export const InCallView: FC<InCallViewProps> = ({
     RoomAndToDeviceEvents.EnabledTransportsChanged,
     (enabled) => setDidFallbackToRoomKey(enabled.room),
   );
+
+  const [developerMode] = useSetting(developerModeSetting);
   const [useExperimentalToDeviceTransport] = useSetting(
     useExperimentalToDeviceTransportSetting,
   );
@@ -240,13 +243,15 @@ export const InCallView: FC<InCallViewProps> = ({
 
   const showToDeviceEncryption = useMemo(
     () =>
+      developerMode &&
       useExperimentalToDeviceTransport &&
       encryptionSystem.kind === E2eeType.PER_PARTICIPANT &&
       !didFallbackToRoomKey,
     [
+      developerMode,
+      useExperimentalToDeviceTransport,
       encryptionSystem.kind,
       didFallbackToRoomKey,
-      useExperimentalToDeviceTransport,
     ],
   );