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} /> +