Disconnect other connected devices (of the same user) when joining an Element call (#9379)

src/hooks/useCall.ts

@@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import { useState, useCallback } from "react";
+import { useState, useCallback, useMemo } from "react";
 
 import type { RoomMember } from "matrix-js-sdk/src/models/room-member";
 import { Call, ConnectionState, ElementCall, Layout } from "../models/Call";
@@ -24,6 +24,7 @@ import { CallStore, CallStoreEvent } from "../stores/CallStore";
 import { useEventEmitter } from "./useEventEmitter";
 import SdkConfig, { DEFAULTS } from "../SdkConfig";
 import { _t } from "../languageHandler";
+import { MatrixClientPeg } from "../MatrixClientPeg";
 
 export const useCall = (roomId: string): Call | null => {
     const [call, setCall] = useState(() => CallStore.instance.getCall(roomId));
@@ -56,15 +57,33 @@ export const useFull = (call: Call): boolean => {
     );
 };
 
-export const useJoinCallButtonDisabledTooltip = (call: Call): string | null => {
+export const useIsAlreadyParticipant = (call: Call): boolean => {
+    const client = MatrixClientPeg.get();
+    const participants = useParticipants(call);
+
+    return useMemo(() => {
+        return participants.has(client.getRoom(call.roomId).getMember(client.getUserId()));
+    }, [participants, client, call]);
+};
+
+export const useJoinCallButtonTooltip = (call: Call): string | null => {
     const isFull = useFull(call);
     const state = useConnectionState(call);
+    const isAlreadyParticipant = useIsAlreadyParticipant(call);
 
     if (state === ConnectionState.Connecting) return _t("Connecting");
     if (isFull) return _t("Sorry — this call is currently full");
+    if (isAlreadyParticipant) return _t("You have already joined this call from another device");
     return null;
 };
 
+export const useJoinCallButtonDisabled = (call: Call): boolean => {
+    const isFull = useFull(call);
+    const state = useConnectionState(call);
+
+    return isFull || state === ConnectionState.Connecting;
+};
+
 export const useLayout = (call: ElementCall): Layout =>
     useTypedEventEmitterState(
         call,