diff --git a/src/Header.jsx b/src/Header.jsx
index 85039de..882dac3 100644
--- a/src/Header.jsx
+++ b/src/Header.jsx
@@ -1,5 +1,5 @@
import classNames from "classnames";
-import React, { useRef } from "react";
+import React, { useCallback, useRef } from "react";
import { Link } from "react-router-dom";
import styles from "./Header.module.css";
import { ReactComponent as Logo } from "./icons/Logo.svg";
@@ -8,6 +8,9 @@ import { ReactComponent as ArrowLeftIcon } from "./icons/ArrowLeft.svg";
import { useButton } from "@react-aria/button";
import { Subtitle } from "./typography/Typography";
import { Avatar } from "./Avatar";
+import { IncompatibleversionModal } from "./IncompatibleversionModal";
+import { useModalTriggerState } from "./Modal";
+import { Button } from "./button";
export function Header({ children, className, ...rest }) {
return (
@@ -84,3 +87,25 @@ export function RoomSetupHeaderInfo({ roomName, avatarUrl, ...rest }) {
);
}
+
+export function VersionMismatchWarning({ users, room }) {
+ const { modalState, modalProps } = useModalTriggerState();
+
+ const onDetailsClick = useCallback(() => {
+ modalState.open();
+ }, [modalState]);
+
+ if (users.size === 0) return null;
+
+ return (
+
+ Incomaptible versions!
+
+ {modalState.isOpen && (
+
+ )}
+
+ );
+}
diff --git a/src/Header.module.css b/src/Header.module.css
index 04313d9..cab276a 100644
--- a/src/Header.module.css
+++ b/src/Header.module.css
@@ -104,6 +104,24 @@
flex-shrink: 0;
}
+.versionMismatchWarning {
+ padding-left: 15px;
+}
+
+.versionMismatchWarning::before {
+ content: "";
+ display: inline-block;
+ position: relative;
+ top: 2px;
+ width: 16px;
+ height: 16px;
+ mask-image: url("./icons/AlertTriangleFilled.svg");
+ mask-repeat: no-repeat;
+ mask-size: contain;
+ background-color: var(--warning);
+ padding-right: 3px;
+}
+
@media (min-width: 800px) {
.headerLogo,
.roomAvatar,
diff --git a/src/IncompatibleVersionModal.tsx b/src/IncompatibleVersionModal.tsx
new file mode 100644
index 0000000..5f8c9a8
--- /dev/null
+++ b/src/IncompatibleVersionModal.tsx
@@ -0,0 +1,48 @@
+/*
+Copyright 2022 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 { Room } from "matrix-js-sdk";
+import React from "react";
+
+import { Modal, ModalContent } from "./Modal";
+import { Body } from "./typography/Typography";
+
+interface Props {
+ userIds: Set;
+ room: Room;
+}
+
+export const IncompatibleversionModal: React.FC = ({
+ userIds,
+ room,
+ ...rest
+}) => {
+ const userLis = Array.from(userIds).map((u) => (
+
{room.getMember(u).name}
+ ));
+
+ return (
+
+
+
+ Other users are trying to join this call from incompatible versions.
+ These users should ensure that they have refreshed their browsers:
+