Support MSC3026 busy presence (#8043)

* Support MSC3026 busy presence

* Use UnstableValue

* Add the import

Author: dbkr

res/css/views/avatars/_DecoratedRoomAvatar.scss

@@ -65,6 +65,10 @@ limitations under the License.
         background-color: $presence-away;
     }
 
+    .mx_DecoratedRoomAvatar_icon_busy::before {
+        background-color: $presence-busy;
+    }
+
     .mx_NotificationBadge, .mx_RoomTile_badgeContainer {
         position: absolute;
         top: 0;

res/themes/legacy-light/css/_legacy-light.scss

@@ -137,6 +137,7 @@ $roomtile-selected-bg-color: #fff;
 
 $presence-away: #d9b072;
 $presence-offline: #e3e8f0;
+$presence-busy: #FF5B55;
 
 // Legacy theme backports
 $accent: #0DBD8B;

res/themes/light/css/_light.scss

@@ -136,6 +136,7 @@ $rte-code-bg-color: rgba(0, 0, 0, 0.04);
 // ********************
 $presence-away: #d9b072;
 $presence-offline: $quinary-content;
+$presence-busy: $alert;
 // ********************
 
 // Inputs

src/components/views/avatars/DecoratedRoomAvatar.tsx

@@ -21,6 +21,7 @@ import { User, UserEvent } from "matrix-js-sdk/src/models/user";
 import { MatrixEvent } from "matrix-js-sdk/src/models/event";
 import { EventType } from "matrix-js-sdk/src/@types/event";
 import { JoinRule } from "matrix-js-sdk/src/@types/partials";
+import { UnstableValue } from "matrix-js-sdk/src/NamespacedValue";
 
 import RoomAvatar from "./RoomAvatar";
 import NotificationBadge from '../rooms/NotificationBadge';
@@ -50,13 +51,16 @@ interface IState {
     icon: Icon;
 }
 
+const BUSY_PRESENCE_NAME = new UnstableValue("busy", "org.matrix.msc3026.busy");
+
 enum Icon {
     // Note: the names here are used in CSS class names
     None = "NONE", // ... except this one
     Globe = "GLOBE",
     PresenceOnline = "ONLINE",
     PresenceAway = "AWAY",
     PresenceOffline = "OFFLINE",
+    PresenceBusy = "BUSY",
 }
 
 function tooltipText(variant: Icon) {
@@ -69,6 +73,8 @@ function tooltipText(variant: Icon) {
             return _t("Away");
         case Icon.PresenceOffline:
             return _t("Offline");
+        case Icon.PresenceBusy:
+            return _t("Busy");
     }
 }
 
@@ -141,7 +147,9 @@ export default class DecoratedRoomAvatar extends React.PureComponent<IProps, ISt
         let icon = Icon.None;
 
         const isOnline = this.dmUser.currentlyActive || this.dmUser.presence === 'online';
-        if (isOnline) {
+        if (BUSY_PRESENCE_NAME.matches(this.dmUser.presence)) {
+            icon = Icon.PresenceBusy;
+        } else if (isOnline) {
             icon = Icon.PresenceOnline;
         } else if (this.dmUser.presence === 'offline') {
             icon = Icon.PresenceOffline;

src/components/views/rooms/PresenceLabel.tsx

@@ -15,10 +15,13 @@ limitations under the License.
 */
 
 import React from 'react';
+import { UnstableValue } from "matrix-js-sdk/src/NamespacedValue";
 
 import { _t } from '../../../languageHandler';
 import { replaceableComponent } from "../../../utils/replaceableComponent";
 
+const BUSY_PRESENCE_NAME = new UnstableValue("busy", "org.matrix.msc3026.busy");
+
 interface IProps {
     // number of milliseconds ago this user was last active.
     // zero = unknown
@@ -62,6 +65,11 @@ export default class PresenceLabel extends React.Component<IProps> {
     }
 
     private getPrettyPresence(presence: string, activeAgo: number, currentlyActive: boolean): string {
+        // for busy presence, we ignore the 'currentlyActive' flag: they're busy whether
+        // they're active or not. It can be set while the user is active in which case
+        // the 'active ago' ends up being 0.
+        if (BUSY_PRESENCE_NAME.matches(presence)) return _t("Busy");
+
         if (!currentlyActive && activeAgo !== undefined && activeAgo > 0) {
             const duration = this.getDuration(activeAgo);
             if (presence === "online") return _t("Online for %(duration)s", { duration: duration });

src/i18n/strings/en_EN.json

@@ -1740,6 +1740,7 @@
     "%(duration)sm": "%(duration)sm",
     "%(duration)sh": "%(duration)sh",
     "%(duration)sd": "%(duration)sd",
+    "Busy": "Busy",
     "Online for %(duration)s": "Online for %(duration)s",
     "Idle for %(duration)s": "Idle for %(duration)s",
     "Offline for %(duration)s": "Offline for %(duration)s",