From adbe90ceb7ffb838e02a894031c1c7f56598be46 Mon Sep 17 00:00:00 2001 From: David Baker Date: Fri, 17 Jul 2026 11:07:38 +0100 Subject: [PATCH] Support for reading m.call status (#34295) * Support for reading m.call status (well, the prefixed version) * Abstract the details away in userStatusFromProfile make the validate functions non-exported * Add test * format the oxen * Remove set function should be in the other PR --- apps/web/src/MatrixClientPeg.ts | 2 +- apps/web/src/hooks/useUserStatus.ts | 6 +- apps/web/src/i18n/strings/en_EN.json | 3 + apps/web/src/stores/OwnProfileStore.ts | 5 +- apps/web/src/utils/userStatus.ts | 68 +++++++++++++++++-- .../room-list/RoomListItemViewModel.ts | 9 ++- .../status/UserStatusIconViewModel.ts | 9 ++- .../test/unit-tests/utils/userStatus-test.ts | 38 +++++++++++ 8 files changed, 124 insertions(+), 16 deletions(-) diff --git a/apps/web/src/MatrixClientPeg.ts b/apps/web/src/MatrixClientPeg.ts index 4d96a653b3..aaf78fe791 100644 --- a/apps/web/src/MatrixClientPeg.ts +++ b/apps/web/src/MatrixClientPeg.ts @@ -270,7 +270,7 @@ class MatrixClientPegClass implements IMatrixClientPeg { } opts.threadSupport = true; if (SettingsStore.getValue("feature_user_status")) { - opts.unstableMSC4429SyncUserProfileFields = ["org.matrix.msc4426.status"]; + opts.unstableMSC4429SyncUserProfileFields = ["org.matrix.msc4426.status", "org.matrix.msc4426.call"]; } if (SettingsStore.getValue("feature_sliding_sync")) { diff --git a/apps/web/src/hooks/useUserStatus.ts b/apps/web/src/hooks/useUserStatus.ts index 4b4afaff9a..1e6eeb7957 100644 --- a/apps/web/src/hooks/useUserStatus.ts +++ b/apps/web/src/hooks/useUserStatus.ts @@ -13,7 +13,7 @@ import { type UserStatus } from "@element-hq/web-shared-components"; import { useMatrixClientContext } from "../contexts/MatrixClientContext"; import { useTypedEventEmitter } from "./useEventEmitter"; import { useFeatureEnabled } from "./useSettings"; -import { fetchUserStatus, validateUserStatus } from "../utils/userStatus"; +import { fetchUserStatus, userStatusFromProfile } from "../utils/userStatus"; const logger = rootLogger.getChild("useUserStatus"); @@ -34,7 +34,9 @@ export function useUserStatus(userId: string | undefined): UserStatus | undefine return; } - setUserStatus(validateUserStatus(syncProfile["org.matrix.msc4426.status"])); + setUserStatus( + userStatusFromProfile(syncProfile["org.matrix.msc4426.status"], syncProfile["org.matrix.msc4426.call"]), + ); }); useEffect(() => { (async () => { diff --git a/apps/web/src/i18n/strings/en_EN.json b/apps/web/src/i18n/strings/en_EN.json index 2ccf843819..18cc71dd2e 100644 --- a/apps/web/src/i18n/strings/en_EN.json +++ b/apps/web/src/i18n/strings/en_EN.json @@ -3828,6 +3828,9 @@ "verify_button": "Verify User", "verify_explainer": "For extra security, verify this user by checking a one-time code on both of your devices." }, + "user_status": { + "on_a_call": "On a call" + }, "voip": { "already_in_call": "Already in call", "already_in_call_person": "You're already in a call with this person.", diff --git a/apps/web/src/stores/OwnProfileStore.ts b/apps/web/src/stores/OwnProfileStore.ts index a1a2d8ebe6..b3178e3492 100644 --- a/apps/web/src/stores/OwnProfileStore.ts +++ b/apps/web/src/stores/OwnProfileStore.ts @@ -25,7 +25,7 @@ import { MatrixClientPeg } from "../MatrixClientPeg"; import { _t } from "../languageHandler"; import { mediaFromMxc } from "../customisations/Media"; import SettingsStore from "../settings/SettingsStore"; -import { validateUserStatus } from "../utils/userStatus"; +import { userStatusFromProfile } from "../utils/userStatus"; interface IState { displayName?: string; @@ -206,7 +206,8 @@ export class OwnProfileStore extends AsyncStoreWithClient { this.matrixClient.getSafeUserId(), "org.matrix.msc4426.status", ); - await this.updateState({ userStatus: validateUserStatus(rawUserStatus) }); + // We don't show our own "on a call" status so we pass undefined for the call status. + await this.updateState({ userStatus: userStatusFromProfile(rawUserStatus, undefined) }); }; private onStateEvents = async (ev: MatrixEvent): Promise => { diff --git a/apps/web/src/utils/userStatus.ts b/apps/web/src/utils/userStatus.ts index 5315f7d918..fd16a41f6a 100644 --- a/apps/web/src/utils/userStatus.ts +++ b/apps/web/src/utils/userStatus.ts @@ -5,14 +5,23 @@ SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Com Please see LICENSE files in the repository root for full details. */ -import { type UserStatus } from "@element-hq/web-shared-components"; +import { _td, type UserStatus } from "@element-hq/web-shared-components"; import { type MatrixClient, MatrixError } from "matrix-js-sdk/src/matrix"; import { logger } from "matrix-js-sdk/src/logger"; +import { _t } from "../languageHandler"; + // MSC4426 defines the maximum length of a status to be 256 bytes of UTF-8, // so we truncate anything longer than that. const MAX_STATUS_TEXT_BYTES = 256; +// We don't use the actual UserStatus type here as we want to translate the string at runtime, +// so we can make the types reflect the fact it's not ready for human consumption. +const ON_A_CALL_STATUS = { + emoji: "📞", + textKey: _td("user_status|on_a_call"), +}; + // Static Intl.Segmenter for grabbing the first grapheme of a user status emoji. // We make one and keep it for performance. const intlSegmenter = new Intl.Segmenter(); @@ -32,7 +41,7 @@ export function userStatusTextWithinMaxLength(text: string): boolean { * @param rawUserStatus The raw user status object to validate. * @returns A UserStatus object if valid, otherwise undefined. */ -export function validateUserStatus(rawUserStatus: unknown): UserStatus | undefined { +function validateUserStatus(rawUserStatus: unknown): UserStatus | undefined { if (typeof rawUserStatus !== "object" || rawUserStatus === null) { return undefined; } @@ -51,8 +60,38 @@ export function validateUserStatus(rawUserStatus: unknown): UserStatus | undefin } /** - * Fetch the MSC4426 user status of the given user. Returns undefined if the server does not - * support extended profiles, the user has no (valid) status, or the status could not be fetched. + * Takes the raw result from getExtendedProfileProperty for m.call, validates it and + * returns true a UserStatus object reflect it, undefined if there is no status or it + * does not say that the user is on a call. + * Designed to be the same API as validateUserStatus for simplicty. + * @param rawCallStatus + */ +function validateMCallStatus(rawCallStatus: unknown): UserStatus | undefined { + if (!rawCallStatus || typeof rawCallStatus !== "object") return undefined; + if (!("call_joined_ts" in rawCallStatus) || typeof rawCallStatus.call_joined_ts !== "number") return undefined; + if (rawCallStatus.call_joined_ts > 0) return { emoji: ON_A_CALL_STATUS.emoji, text: _t(ON_A_CALL_STATUS.textKey) }; + + return undefined; +} + +/** + * Takes both MSC4426 user status fields (m.status and m.call) and returns a UserStatus + * object that reflects the information they represent. + */ +export function userStatusFromProfile(userStatus: unknown, callStatus: unknown): UserStatus | undefined { + const validatedUserStatus = validateUserStatus(userStatus); + if (validatedUserStatus) return validatedUserStatus; + + const validatedCallStatus = validateMCallStatus(callStatus); + if (validatedCallStatus) return validatedCallStatus; + + return undefined; +} + +/** + * Fetch the MSC4426 user status of the given user, taking into account m.call if present. + * Returns undefined if the server does not support extended profiles, the user has no + * (valid) status, or the status could not be fetched. * * @param client The Matrix client to fetch the status with. * @param userId The ID of the user whose status is being fetched. @@ -61,14 +100,29 @@ export async function fetchUserStatus(client: MatrixClient, userId: string): Pro if ((await client.doesServerSupportExtendedProfiles()) === false) { return undefined; } + + let rawUserStatus: unknown; + let rawCallStatus: unknown; + try { - return validateUserStatus(await client.getExtendedProfileProperty(userId, "org.matrix.msc4426.status")); + // nb. one of these may be redundant since one takes precedence over the other, but the two + // are fetched in the same call by the js-sdk anyway so it will only be one API call and this + // is simpler and duplicates less logic. + rawUserStatus = await client.getExtendedProfileProperty(userId, "org.matrix.msc4426.status"); } catch (ex) { if (!(ex instanceof MatrixError && ex.errcode === "M_NOT_FOUND")) { - logger.warn(`Failed to get userStatus for ${userId}`, ex); + logger.warn(`Failed to get user status for ${userId}`, ex); } - return undefined; } + + try { + rawCallStatus = await client.getExtendedProfileProperty(userId, "org.matrix.msc4426.call"); + } catch (ex) { + if (!(ex instanceof MatrixError && ex.errcode === "M_NOT_FOUND")) { + logger.warn(`Failed to get call status for ${userId}`, ex); + } + } + return userStatusFromProfile(rawUserStatus, rawCallStatus); } /** diff --git a/apps/web/src/viewmodels/room-list/RoomListItemViewModel.ts b/apps/web/src/viewmodels/room-list/RoomListItemViewModel.ts index fc6d21c694..3aa61f8097 100644 --- a/apps/web/src/viewmodels/room-list/RoomListItemViewModel.ts +++ b/apps/web/src/viewmodels/room-list/RoomListItemViewModel.ts @@ -43,7 +43,7 @@ import { type Call, CallEvent } from "../../models/Call"; import RoomListStoreV3 from "../../stores/room-list-v3/RoomListStoreV3"; import { getCustomSectionData, isDefaultSectionTag } from "../../stores/room-list-v3/section"; import { _t } from "../../languageHandler"; -import { fetchUserStatus, validateUserStatus } from "../../utils/userStatus"; +import { fetchUserStatus, userStatusFromProfile } from "../../utils/userStatus"; /** * View section type without `isSelected` field @@ -292,7 +292,12 @@ export class RoomListItemViewModel */ private onUserProfileUpdate: ClientEventHandlerMap[ClientEvent.UserProfileUpdate] = (userId, profile) => { if (userId !== this.dmUserId || !SettingsStore.getValue("feature_user_status")) return; - this.snapshot.merge({ userStatus: validateUserStatus(profile?.["org.matrix.msc4426.status"]) }); + this.snapshot.merge({ + userStatus: userStatusFromProfile( + profile?.["org.matrix.msc4426.status"], + profile?.["org.matrix.msc4426.call"], + ), + }); }; /** diff --git a/apps/web/src/viewmodels/status/UserStatusIconViewModel.ts b/apps/web/src/viewmodels/status/UserStatusIconViewModel.ts index e33c5cfd2b..c63a4b575a 100644 --- a/apps/web/src/viewmodels/status/UserStatusIconViewModel.ts +++ b/apps/web/src/viewmodels/status/UserStatusIconViewModel.ts @@ -8,7 +8,7 @@ Please see LICENSE files in the repository root for full details. import { type MatrixClient, ClientEvent } from "matrix-js-sdk/src/matrix"; import { BaseViewModel, type UserStatusIconViewSnapshot } from "@element-hq/web-shared-components"; -import { fetchUserStatus, validateUserStatus } from "../../utils/userStatus"; +import { fetchUserStatus, userStatusFromProfile } from "../../utils/userStatus"; import SettingsStore from "../../settings/SettingsStore"; import { logger } from "matrix-js-sdk/src/logger"; @@ -49,6 +49,11 @@ export class UserStatusIconViewModel extends BaseViewModel | null): void => { if (syncedUserId !== this.props.userId) return; - this.snapshot.merge({ status: validateUserStatus(syncProfile?.["org.matrix.msc4426.status"]) }); + this.snapshot.merge({ + status: userStatusFromProfile( + syncProfile?.["org.matrix.msc4426.status"], + syncProfile?.["org.matrix.msc4426.call"], + ), + }); }; } diff --git a/apps/web/test/unit-tests/utils/userStatus-test.ts b/apps/web/test/unit-tests/utils/userStatus-test.ts index 6c07bfc698..99f150f942 100644 --- a/apps/web/test/unit-tests/utils/userStatus-test.ts +++ b/apps/web/test/unit-tests/utils/userStatus-test.ts @@ -12,11 +12,49 @@ import { clearUserStatus, fetchUserStatus, setUserStatus, + userStatusFromProfile, userStatusTextWithinMaxLength, } from "../../../src/utils/userStatus"; import { stubClient } from "../../test-utils"; describe("userStatus utils", () => { + describe("userStatusFromProfile", () => { + it("returns the user status if it is valid", () => { + expect(userStatusFromProfile({ emoji: "🐳", text: "Feeling a little blue" }, undefined)).toEqual({ + emoji: "🐳", + text: "Feeling a little blue", + }); + }); + + it("returns undefined if the user status is invalid and there is no call status", () => { + expect(userStatusFromProfile({ text: "Feeling a little blue" }, undefined)).toBeUndefined(); + }); + + it("returns the call status if the user status is invalid but the call status is valid", () => { + expect(userStatusFromProfile({ text: "Feeling a little blue" }, { call_joined_ts: 12345 })).toEqual({ + emoji: "📞", + text: "On a call", + }); + }); + + it("prefers the user status over the call status if both are valid", () => { + expect( + userStatusFromProfile({ emoji: "🐳", text: "Feeling a little blue" }, { call_joined_ts: 12345 }), + ).toEqual({ + emoji: "🐳", + text: "Feeling a little blue", + }); + }); + + it("returns undefined if the call status has a non-positive call_joined_ts", () => { + expect(userStatusFromProfile(undefined, { call_joined_ts: 0 })).toBeUndefined(); + }); + + it("returns undefined if neither status is valid", () => { + expect(userStatusFromProfile(undefined, undefined)).toBeUndefined(); + }); + }); + describe("userStatusTextWithinMaxLength", () => { it("returns true for text within the max length", () => { const text = "a".repeat(256);