Live location sharing - add configs to render beacon_info in timeline (#8251)

* add configs to render beacon_info in timeline

Signed-off-by: Kerry Archibald <kerrya@element.io>

* fix copyright

Signed-off-by: Kerry Archibald <kerrya@element.io>

* one more comment

Signed-off-by: Kerry Archibald <kerrya@element.io>

* update beacon identifier

Signed-off-by: Kerry Archibald <kerrya@element.io>

* use special case for beacon_info tile mapper

Signed-off-by: Kerry Archibald <kerrya@element.io>

src/components/views/messages/MBeaconBody.tsx

@@ -0,0 +1,55 @@
+/*
+Copyright 2022 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import React from 'react';
+import { Beacon, getBeaconInfoIdentifier } from 'matrix-js-sdk/src/matrix';
+
+import MatrixClientContext from '../../../contexts/MatrixClientContext';
+import { IBodyProps } from "./IBodyProps";
+
+export default class MLocationBody extends React.Component<IBodyProps> {
+    public static contextType = MatrixClientContext;
+    public context!: React.ContextType<typeof MatrixClientContext>;
+    private beacon: Beacon | undefined;
+    private roomId: string;
+    private beaconIdentifier: string;
+
+    constructor(props: IBodyProps) {
+        super(props);
+
+        this.roomId = props.mxEvent.getRoomId();
+
+        this.beaconIdentifier = getBeaconInfoIdentifier(props.mxEvent);
+    }
+
+    componentDidMount() {
+        const roomState = this.context.getRoom(this.roomId)?.currentState;
+
+        const beacon = roomState?.beacons.get(this.beaconIdentifier);
+
+        this.beacon = beacon;
+    }
+
+    render(): React.ReactElement<HTMLDivElement> {
+        if (!this.beacon) {
+            // TODO loading and error states
+            return null;
+        }
+        // TODO everything else :~)
+        const description = this.beacon.beaconInfo.description;
+        return <div>{ description }</div>;
+    }
+}

src/components/views/messages/MessageEvent.tsx

@@ -17,6 +17,7 @@ limitations under the License.
 import React, { createRef } from 'react';
 import { EventType, MsgType } from "matrix-js-sdk/src/@types/event";
 import { Relations } from 'matrix-js-sdk/src/models/relations';
+import { M_BEACON_INFO } from 'matrix-js-sdk/src/@types/beacon';
 import { M_LOCATION } from 'matrix-js-sdk/src/@types/location';
 import { M_POLL_START } from "matrix-events-sdk";
 
@@ -39,6 +40,7 @@ import MStickerBody from "./MStickerBody";
 import MPollBody from "./MPollBody";
 import MLocationBody from "./MLocationBody";
 import MjolnirBody from "./MjolnirBody";
+import MBeaconBody from "./MBeaconBody";
 
 // onMessageAllowed is handled internally
 interface IProps extends Omit<IBodyProps, "onMessageAllowed" | "mediaEventHelper"> {
@@ -97,6 +99,8 @@ export default class MessageEvent extends React.Component<IProps> implements IMe
             [EventType.Sticker]: MStickerBody,
             [M_POLL_START.name]: MPollBody,
             [M_POLL_START.altName]: MPollBody,
+            [M_BEACON_INFO.name]: MBeaconBody,
+            [M_BEACON_INFO.altName]: MBeaconBody,
 
             ...(this.props.overrideEventTypes || {}),
         };

src/events/EventTileFactory.tsx

@@ -19,6 +19,7 @@ import { MatrixEvent } from "matrix-js-sdk/src/models/event";
 import { EventType, MsgType, RelationType } from "matrix-js-sdk/src/@types/event";
 import { M_POLL_START, Optional } from "matrix-events-sdk";
 import { MatrixClient } from "matrix-js-sdk/src/client";
+import { M_BEACON_INFO } from "matrix-js-sdk/src/@types/beacon";
 
 import EditorStateTransfer from "../utils/EditorStateTransfer";
 import { RoomPermalinkCreator } from "../utils/permalinks/Permalinks";
@@ -211,9 +212,17 @@ export function pickFactory(mxEvent: MatrixEvent, cli: MatrixClient, asHiddenEv?
 
     // Try and pick a state event factory, if we can.
     if (mxEvent.isState()) {
+        if (
+            M_BEACON_INFO.matches(evType) &&
+            SettingsStore.getValue("feature_location_share_live")
+        ) {
+            return MessageEventFactory;
+        }
+
         if (SINGULAR_STATE_EVENTS.has(evType) && mxEvent.getStateKey() !== '') {
             return noEventFactoryFactory(); // improper event type to render
         }
+
         return STATE_EVENT_TILE_TYPES[evType] ?? noEventFactoryFactory();
     }
 

src/utils/EventRenderingUtils.ts

@@ -18,6 +18,7 @@ import { MatrixEvent } from "matrix-js-sdk/src/models/event";
 import { EventType, MsgType } from "matrix-js-sdk/src/@types/event";
 import { M_POLL_START } from "matrix-events-sdk";
 import { M_LOCATION } from "matrix-js-sdk/src/@types/location";
+import { M_BEACON_INFO } from "matrix-js-sdk/src/@types/beacon";
 
 import SettingsStore from "../settings/SettingsStore";
 import { haveRendererForEvent, JitsiEventFactory, JSONEventFactory, pickFactory } from "../events/EventTileFactory";
@@ -72,7 +73,8 @@ export function getEventDisplayInfo(mxEvent: MatrixEvent, hideEvent?: boolean):
         eventType !== EventType.RoomMessageEncrypted &&
         eventType !== EventType.Sticker &&
         eventType !== EventType.RoomCreate &&
-        !M_POLL_START.matches(eventType)
+        !M_POLL_START.matches(eventType) &&
+        !M_BEACON_INFO.matches(eventType)
     );
     // Some non-info messages want to be rendered in the appropriate bubble column but without the bubble background
     const noBubbleEvent = (