Say when a call was answered from a different device (#10224)

* Say when a call was answered from a different device

* Adjust font size on call tiles to match designs

res/css/views/messages/_LegacyCallEvent.pcss

@@ -160,6 +160,7 @@ limitations under the License.
             flex-wrap: wrap;
             align-items: center;
             color: $secondary-content;
+            font-size: $font-12px;
             gap: $spacing-12; /* See mx_IncomingLegacyCallToast_buttons */
             margin-inline-start: 42px; /* avatar (32px) + mx_LegacyCallEvent_info_basic margin (10px) */
             word-break: break-word;
@@ -168,6 +169,7 @@ limitations under the License.
             .mx_LegacyCallEvent_content_button {
                 @mixin LegacyCallButton;
                 padding: 0 $spacing-12;
+                font-size: inherit;
 
                 span::before {
                     mask-size: 16px;

src/components/structures/LegacyCallEventGrouper.ts

@@ -72,7 +72,7 @@ export function buildLegacyCallEventGroupers(
 
 export default class LegacyCallEventGrouper extends EventEmitter {
     private events: Set<MatrixEvent> = new Set<MatrixEvent>();
-    private call: MatrixCall;
+    private call: MatrixCall | null = null;
     public state: CallState | CustomCallState;
 
     public constructor() {
@@ -111,7 +111,7 @@ export default class LegacyCallEventGrouper extends EventEmitter {
     }
 
     public get hangupReason(): string | null {
-        return this.hangup?.getContent()?.reason;
+        return this.call?.hangupReason ?? this.hangup?.getContent()?.reason ?? null;
     }
 
     public get rejectParty(): string {

src/components/views/messages/LegacyCallEvent.tsx

@@ -191,6 +191,13 @@ export default class LegacyCallEvent extends React.PureComponent<IProps, IState>
                         {this.props.timestamp}
                     </div>
                 );
+            } else if (hangupReason === CallErrorCode.AnsweredElsewhere) {
+                return (
+                    <div className="mx_LegacyCallEvent_content">
+                        {_t("Answered elsewhere")}
+                        {this.props.timestamp}
+                    </div>
+                );
             }
 
             let reason;

src/i18n/strings/en_EN.json

@@ -2351,6 +2351,7 @@
     "Call declined": "Call declined",
     "Call back": "Call back",
     "No answer": "No answer",
+    "Answered elsewhere": "Answered elsewhere",
     "Could not connect media": "Could not connect media",
     "Connection failed": "Connection failed",
     "Their device couldn't start the camera or microphone": "Their device couldn't start the camera or microphone",