diff --git a/src/E2EELock.module.css b/src/E2EELock.module.css
new file mode 100644
index 00000000..8d6e95fa
--- /dev/null
+++ b/src/E2EELock.module.css
@@ -0,0 +1,28 @@
+/*
+Copyright 2023 New Vector Ltd
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+ http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+.e2eeLock {
+ width: 32px;
+ height: 32px;
+
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ margin: 8px;
+
+ border-radius: 100%;
+ background-color: var(--subtle-primary);
+}
diff --git a/src/E2EELock.tsx b/src/E2EELock.tsx
new file mode 100644
index 00000000..3832e7f0
--- /dev/null
+++ b/src/E2EELock.tsx
@@ -0,0 +1,56 @@
+/*
+Copyright 2023 New Vector Ltd
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+ http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import { useTranslation } from "react-i18next";
+import { useCallback } from "react";
+import { useObjectRef } from "@react-aria/utils";
+import { useButton } from "@react-aria/button";
+
+import styles from "./E2EELock.module.css";
+import { ReactComponent as LockOffIcon } from "./icons/LockOff.svg";
+import { TooltipTrigger } from "./Tooltip";
+
+export const E2EELock = () => {
+ const { t } = useTranslation();
+ const tooltip = useCallback(
+ () =>
+ t("Element Call is temporarily not encrypted while we test scalability."),
+ [t]
+ );
+
+ return (
+
+
+
+ );
+};
+
+/**
+ * This component is a bit of hack - for some reason for the TooltipTrigger to
+ * work, it needs to contain a component which uses the useButton hook; please
+ * note that for some reason this also needs to be a separate component and we
+ * cannot just use the useButton hook inside the E2EELock.
+ */
+const Icon = () => {
+ const buttonRef = useObjectRef();
+ const { buttonProps } = useButton({}, buttonRef);
+
+ return (
+
+
+
+ );
+};
diff --git a/src/room/InCallView.tsx b/src/room/InCallView.tsx
index 98a3a63b..b82b1513 100644
--- a/src/room/InCallView.tsx
+++ b/src/room/InCallView.tsx
@@ -84,6 +84,7 @@ import { useMediaDevices } from "../livekit/useMediaDevices";
import { useFullscreen } from "./useFullscreen";
import { useLayoutStates } from "../video-grid/Layout";
import { useSFUConfig } from "../livekit/OpenIDLoader";
+import { E2EELock } from "../E2EELock";
const canScreenshare = "getDisplayMedia" in (navigator.mediaDevices ?? {});
// There is currently a bug in Safari our our code with cloning and sending MediaStreams
@@ -395,6 +396,7 @@ export function InCallView({
users={unencryptedEventsFromUsers}
room={groupCall.room}
/>
+