Allow Element Call to be started without audio / video interface (#924)

* config: add feature in `config.json`

* groupCall: adjust connection state in feed if allowCallWithoutVideoAndAudio

* matrix-js-sdk: update version for allowCallWithoutVideoAndAudio

- I modified the SDK so that mute unmute work without media and check device permission inside the SDK
- allowCallWithoutVideoAndAudio is only checked at one point outside the SDK

* docu: add join group call without media docu in READMe

---------

Co-authored-by: Robin Townsend <robin@robin.town>
Co-authored-by: Šimon Brandner <simon.bra.ag@gmail.com>

src/room/InCallView.tsx

@@ -372,27 +372,36 @@ export function InCallView({
 
   if (noControls) {
     footer = null;
-  } else if (reducedControls) {
-    footer = (
-      <div className={styles.footer}>
-        <MicButton muted={microphoneMuted} onPress={toggleMicrophoneMuted} />
-        <VideoButton muted={localVideoMuted} onPress={toggleLocalVideoMuted} />
-        <HangupButton onPress={onLeave} />
-      </div>
-    );
   } else {
-    footer = (
-      <div className={styles.footer}>
-        <MicButton muted={microphoneMuted} onPress={toggleMicrophoneMuted} />
-        <VideoButton muted={localVideoMuted} onPress={toggleLocalVideoMuted} />
-        {canScreenshare && !hideScreensharing && !isSafari && (
+    const buttons: JSX.Element[] = [];
+
+    buttons.push(
+      <MicButton
+        key="1"
+        muted={microphoneMuted}
+        onPress={toggleMicrophoneMuted}
+      />,
+      <VideoButton
+        key="2"
+        muted={localVideoMuted}
+        onPress={toggleLocalVideoMuted}
+      />
+    );
+
+    if (!reducedControls) {
+      if (canScreenshare && !hideScreensharing && !isSafari) {
+        buttons.push(
           <ScreenshareButton
+            key="3"
             enabled={isScreensharing}
             onPress={toggleScreensharing}
           />
-        )}
-        {!maximisedParticipant && (
+        );
+      }
+      if (!maximisedParticipant) {
+        buttons.push(
           <OverflowMenu
+            key="4"
             inCall
             roomIdOrAlias={roomIdOrAlias}
             groupCall={groupCall}
@@ -400,10 +409,12 @@ export function InCallView({
             feedbackModalState={feedbackModalState}
             feedbackModalProps={feedbackModalProps}
           />
-        )}
-        <HangupButton onPress={onLeave} />
-      </div>
-    );
+        );
+      }
+    }
+
+    buttons.push(<HangupButton key="6" onPress={onLeave} />);
+    footer = <div className={styles.footer}>{buttons}</div>;
   }
 
   return (

src/room/useGroupCall.ts

@@ -98,12 +98,24 @@ function getParticipants(
         (f) => f.userId === member.userId && f.deviceId === deviceId
       );
 
-      participantInfoMap.set(deviceId, {
-        connectionState: feed
+      let connectionState: ConnectionState;
+      // If we allow calls without media, we have no feeds and cannot read the connection status from them.
+      // @TODO: The connection state should generally not be determined by the feed.
+      if (
+        groupCall.allowCallWithoutVideoAndAudio &&
+        !feed &&
+        !participant.screensharing
+      ) {
+        connectionState = ConnectionState.Connected;
+      } else {
+        connectionState = feed
           ? feed.connected
             ? ConnectionState.Connected
             : ConnectionState.WaitMedia
-          : ConnectionState.EstablishingCall,
+          : ConnectionState.EstablishingCall;
+      }
+      participantInfoMap.set(deviceId, {
+        connectionState,
         presenter: participant.screensharing,
       });
     }