Add warning if incompatible versionsd are being used

This will probably be overly sensitive until we start timing out
member events (ie. https://github.com/matrix-org/matrix-js-sdk/pull/2446
lands) because lots of calls might have old member events from people
who've joined previously.

src/room/GroupCallView.jsx

@@ -53,6 +53,7 @@ export function GroupCallView({
     screenshareFeeds,
     hasLocalParticipant,
     participants,
+    unencryptedEventsFromUsers,
   } = useGroupCall(groupCall);
 
   const avatarUrl = useRoomAvatar(groupCall.room);
@@ -112,6 +113,7 @@ export function GroupCallView({
           localScreenshareFeed={localScreenshareFeed}
           screenshareFeeds={screenshareFeeds}
           roomId={roomId}
+          unencryptedEventsFromUsers={unencryptedEventsFromUsers}
         />
       );
     }

src/room/InCallView.jsx

@@ -22,7 +22,13 @@ import {
   VideoButton,
   ScreenshareButton,
 } from "../button";
-import { Header, LeftNav, RightNav, RoomHeaderInfo } from "../Header";
+import {
+  Header,
+  LeftNav,
+  RightNav,
+  RoomHeaderInfo,
+  VersionMismatchWarning,
+} from "../Header";
 import { VideoGrid, useVideoGridLayout } from "../video-grid/VideoGrid";
 import { VideoTileContainer } from "../video-grid/VideoTileContainer";
 import { GroupCallInspector } from "./GroupCallInspector";
@@ -59,6 +65,7 @@ export function InCallView({
   isScreensharing,
   screenshareFeeds,
   roomId,
+  unencryptedEventsFromUsers,
 }) {
   usePreventScroll();
   const [layout, setLayout] = useVideoGridLayout(screenshareFeeds.length > 0);
@@ -135,6 +142,10 @@ export function InCallView({
       <Header>
         <LeftNav>
           <RoomHeaderInfo roomName={roomName} avatarUrl={avatarUrl} />
+          <VersionMismatchWarning
+            users={unencryptedEventsFromUsers}
+            room={groupCall.room}
+          />
         </LeftNav>
         <RightNav>
           <GridLayoutMenu layout={layout} setLayout={setLayout} />

src/room/useGroupCall.ts

@@ -14,11 +14,14 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import { useCallback, useEffect, useState } from "react";
+import { useCallback, useEffect, useReducer, useState } from "react";
 import {
   GroupCallEvent,
   GroupCallState,
   GroupCall,
+  GroupCallErrorCode,
+  GroupCallUnknownDeviceError,
+  GroupCallError,
 } from "matrix-js-sdk/src/webrtc/groupCall";
 import { MatrixCall } from "matrix-js-sdk/src/webrtc/call";
 import { CallFeed } from "matrix-js-sdk/src/webrtc/callFeed";
@@ -48,6 +51,7 @@ export interface UseGroupCallType {
   localDesktopCapturerSourceId: string;
   participants: RoomMember[];
   hasLocalParticipant: boolean;
+  unencryptedEventsFromUsers: Set<string>;
 }
 
 interface State {
@@ -106,6 +110,13 @@ export function useGroupCall(groupCall: GroupCall): UseGroupCallType {
     hasLocalParticipant: false,
   });
 
+  const [unencryptedEventsFromUsers, addUnencryptedEventUser] = useReducer(
+    (state: Set<string>, newVal: string) => {
+      return new Set(state).add(newVal);
+    },
+    new Set<string>()
+  );
+
   const updateState = (state: Partial<State>) =>
     setState((prevState) => ({ ...prevState, ...state }));
 
@@ -180,6 +191,13 @@ export function useGroupCall(groupCall: GroupCall): UseGroupCallType {
       });
     }
 
+    function onError(e: GroupCallError): void {
+      if (e.code === GroupCallErrorCode.UnknownDevice) {
+        const unknownDeviceError = e as GroupCallUnknownDeviceError;
+        addUnencryptedEventUser(unknownDeviceError.userId);
+      }
+    }
+
     groupCall.on(GroupCallEvent.GroupCallStateChanged, onGroupCallStateChanged);
     groupCall.on(GroupCallEvent.UserMediaFeedsChanged, onUserMediaFeedsChanged);
     groupCall.on(
@@ -194,6 +212,7 @@ export function useGroupCall(groupCall: GroupCall): UseGroupCallType {
     );
     groupCall.on(GroupCallEvent.CallsChanged, onCallsChanged);
     groupCall.on(GroupCallEvent.ParticipantsChanged, onParticipantsChanged);
+    groupCall.on(GroupCallEvent.Error, onError);
 
     updateState({
       error: null,
@@ -242,6 +261,7 @@ export function useGroupCall(groupCall: GroupCall): UseGroupCallType {
         GroupCallEvent.ParticipantsChanged,
         onParticipantsChanged
       );
+      groupCall.removeListener(GroupCallEvent.Error, onError);
       groupCall.leave();
     };
   }, [groupCall]);
@@ -319,5 +339,6 @@ export function useGroupCall(groupCall: GroupCall): UseGroupCallType {
     localDesktopCapturerSourceId,
     participants,
     hasLocalParticipant,
+    unencryptedEventsFromUsers,
   };
 }