Live location sharing - basic maximised beacon map (#8310)

* open a dialog with map centered around first beacon

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

* add room member markers

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

* fix unmount issue in smart marker

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

* dont throw on no more live locations

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

* cursor on beacon maps

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

* fussy import ordering

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

* test dialog opening from beacon body

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

* test beaconmarker

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

* test BeaconViewDialog

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

* comment

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

* use unstable prefix for wk tile_Server

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

* unstable prefix for new m.tile_server use in test

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

res/css/_components.scss

@@ -5,6 +5,7 @@
 @import "./_font-weights.scss";
 @import "./_spacing.scss";
 @import "./components/views/beacon/_BeaconStatus.scss";
+@import "./components/views/beacon/_BeaconViewDialog.scss";
 @import "./components/views/beacon/_LeftPanelLiveShareWarning.scss";
 @import "./components/views/beacon/_LiveTimeRemaining.scss";
 @import "./components/views/beacon/_OwnBeaconStatus.scss";

res/css/components/views/beacon/_BeaconViewDialog.scss

@@ -0,0 +1,57 @@
+/*
+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.
+*/
+
+.mx_BeaconViewDialog_wrapper .mx_Dialog {
+    padding: 0px;
+
+    /* Unset contain and position to allow the close button
+    to appear outside the dialog */
+    contain: unset;
+    position: unset;
+}
+
+.mx_BeaconViewDialog {
+    /* subtract 0.5px to prevent single-pixel margin due to rounding */
+    width: calc(80vw - 0.5px);
+    height: calc(80vh - 0.5px);
+    overflow: hidden;
+
+    .mx_Dialog_header {
+        margin: 0px;
+        padding: 0px;
+        position: unset;
+
+        .mx_Dialog_title {
+            display: none;
+        }
+
+        .mx_Dialog_cancelButton {
+            z-index: 4010;
+            position: absolute;
+            right: 5vw;
+            top: 5vh;
+            width: 20px;
+            height: 20px;
+            background-color: $dialog-close-external-color;
+        }
+    }
+}
+
+.mx_BeaconViewDialog_map {
+    width: 80vw;
+    height: 80vh;
+    border-radius: 8px;
+}

res/css/components/views/messages/_MBeaconBody.scss

@@ -27,6 +27,10 @@ limitations under the License.
     height: 100%;
     width: 100%;
     z-index: 0; // keeps the entire map under the message action bar
+
+    &:not(.mx_MBeaconBody_mapFallback) {
+        cursor: pointer;
+    }
 }
 
 .mx_MBeaconBody_mapFallback {

src/components/views/beacon/BeaconMarker.tsx

@@ -0,0 +1,64 @@
+/*
+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, { useContext } from 'react';
+import maplibregl from 'maplibre-gl';
+import {
+    Beacon,
+    BeaconEvent,
+} from 'matrix-js-sdk/src/matrix';
+import { LocationAssetType } from 'matrix-js-sdk/src/@types/location';
+
+import MatrixClientContext from '../../../contexts/MatrixClientContext';
+import { useEventEmitterState } from '../../../hooks/useEventEmitter';
+import SmartMarker from '../location/SmartMarker';
+
+interface Props {
+    map: maplibregl.Map;
+    beacon: Beacon;
+}
+
+/**
+ * Updates a map SmartMarker with latest location from given beacon
+ */
+const BeaconMarker: React.FC<Props> = ({ map, beacon }) => {
+    const latestLocationState = useEventEmitterState(
+        beacon,
+        BeaconEvent.LocationUpdate,
+        () => beacon.latestLocationState,
+    );
+    const matrixClient = useContext(MatrixClientContext);
+    const room = matrixClient.getRoom(beacon.roomId);
+
+    if (!latestLocationState || !beacon.isLive) {
+        return null;
+    }
+
+    const geoUri = latestLocationState?.uri;
+
+    const markerRoomMember = beacon.beaconInfo.assetType === LocationAssetType.Self ?
+        room.getMember(beacon.beaconInfoOwner) :
+        undefined;
+
+    return <SmartMarker
+        map={map}
+        id={beacon.identifier}
+        geoUri={geoUri}
+        roomMember={markerRoomMember}
+    />;
+};
+
+export default BeaconMarker;

src/components/views/beacon/BeaconViewDialog.tsx

@@ -0,0 +1,86 @@
+/*
+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 { MatrixClient } from 'matrix-js-sdk/src/client';
+import {
+    Beacon,
+    Room,
+} from 'matrix-js-sdk/src/matrix';
+import maplibregl from 'maplibre-gl';
+
+import { useLiveBeacons } from '../../../utils/beacon/useLiveBeacons';
+import MatrixClientContext from '../../../contexts/MatrixClientContext';
+import BaseDialog from "../dialogs/BaseDialog";
+import { IDialogProps } from "../dialogs/IDialogProps";
+import Map from '../location/Map';
+import ZoomButtons from '../location/ZoomButtons';
+import BeaconMarker from './BeaconMarker';
+
+interface IProps extends IDialogProps {
+    roomId: Room['roomId'];
+    matrixClient: MatrixClient;
+}
+
+// TODO actual center is coming soon
+// for now just center around first beacon in list
+const getMapCenterUri = (beacons: Beacon[]): string => {
+    const firstBeaconWithLocation = beacons.find(beacon => beacon.latestLocationState);
+
+    return firstBeaconWithLocation?.latestLocationState?.uri;
+};
+
+/**
+ * Dialog to view live beacons maximised
+ */
+const BeaconViewDialog: React.FC<IProps> = ({ roomId, matrixClient, onFinished }) => {
+    const liveBeacons = useLiveBeacons(roomId, matrixClient);
+
+    const mapCenterUri = getMapCenterUri(liveBeacons);
+    // TODO probably show loader or placeholder when there is no location
+    // to center the map on
+
+    return (
+        <BaseDialog
+            className='mx_BeaconViewDialog'
+            onFinished={onFinished}
+            fixedWidth={false}
+        >
+            <MatrixClientContext.Provider value={matrixClient}>
+                <Map
+                    id='mx_BeaconViewDialog'
+                    centerGeoUri={mapCenterUri}
+                    interactive
+                    className="mx_BeaconViewDialog_map"
+                >
+                    {
+                        ({ map }: { map: maplibregl.Map}) =>
+                            <>
+                                { liveBeacons.map(beacon => <BeaconMarker
+                                    key={beacon.identifier}
+                                    map={map}
+                                    beacon={beacon}
+                                />) }
+                                <ZoomButtons map={map} />
+                            </>
+                    }
+                </Map>
+            </MatrixClientContext.Provider>
+        </BaseDialog>
+    );
+};
+
+export default BeaconViewDialog;

src/components/views/location/LocationViewDialog.tsx

@@ -34,6 +34,9 @@ interface IState {
     error: Error;
 }
 
+/**
+ * Dialog to view m.location events maximised
+ */
 export default class LocationViewDialog extends React.Component<IProps, IState> {
     constructor(props: IProps) {
         super(props);

src/components/views/location/SmartMarker.tsx

@@ -72,12 +72,21 @@ interface SmartMarkerProps {
 const SmartMarker: React.FC<SmartMarkerProps> = ({ id, map, geoUri, roomMember, useMemberColor }) => {
     const { onElementRef } = useMapMarker(map, geoUri);
 
-    return <Marker
+    return (
-        ref={onElementRef}
+        // maplibregl hijacks the Marker dom element
-        id={id}
+        // and removes it from the dom when the maplibregl.Marker instance
-        roomMember={roomMember}
+        // is removed
-        useMemberColor={useMemberColor}
+        // wrap in a span so that react doesn't get confused
-    />;
+        // when trying to unmount this component
+        <span>
+            <Marker
+                ref={onElementRef}
+                id={id}
+                roomMember={roomMember}
+                useMemberColor={useMemberColor}
+            />
+        </span>
+    );
 };
 
 export default SmartMarker;

src/components/views/messages/MBeaconBody.tsx

@@ -23,6 +23,7 @@ import { Icon as LocationMarkerIcon } from '../../../../res/img/element-icons/lo
 import MatrixClientContext from '../../../contexts/MatrixClientContext';
 import { useEventEmitterState } from '../../../hooks/useEventEmitter';
 import { _t } from '../../../languageHandler';
+import Modal from '../../../Modal';
 import { useBeacon } from '../../../utils/beacon';
 import { isSelfLocation } from '../../../utils/location';
 import { BeaconDisplayStatus, getBeaconDisplayStatus } from '../beacon/displayStatus';
@@ -32,6 +33,7 @@ import Map from '../location/Map';
 import SmartMarker from '../location/SmartMarker';
 import OwnBeaconStatus from '../beacon/OwnBeaconStatus';
 import { IBodyProps } from "./IBodyProps";
+import BeaconViewDialog from '../beacon/BeaconViewDialog';
 
 const useBeaconState = (beaconInfoEvent: MatrixEvent): {
     beacon?: Beacon;
@@ -85,13 +87,31 @@ const MBeaconBody: React.FC<IBodyProps> = React.forwardRef(({ mxEvent }, ref) =>
         latestLocationState,
     } = useBeaconState(mxEvent);
     const mapId = useUniqueId(mxEvent.getId());
-    const [error, setError] = useState<Error>();
+
     const matrixClient = useContext(MatrixClientContext);
+    const [error, setError] = useState<Error>();
     const displayStatus = getBeaconDisplayStatus(isLive, latestLocationState, error);
     const markerRoomMember = isSelfLocation(mxEvent.getContent()) ? mxEvent.sender : undefined;
-
     const isOwnBeacon = beacon?.beaconInfoOwner === matrixClient.getUserId();
 
+    const onClick = () => {
+        if (displayStatus !== BeaconDisplayStatus.Active) {
+            return;
+        }
+        Modal.createTrackedDialog(
+            'Beacon View',
+            '',
+            BeaconViewDialog,
+            {
+                roomId: mxEvent.getRoomId(),
+                matrixClient,
+            },
+            "mx_BeaconViewDialog_wrapper",
+            false, // isPriority
+            true, // isStatic
+        );
+    };
+
     return (
         <div className='mx_MBeaconBody' ref={ref}>
             { displayStatus === BeaconDisplayStatus.Active ?
@@ -99,6 +119,7 @@ const MBeaconBody: React.FC<IBodyProps> = React.forwardRef(({ mxEvent }, ref) =>
                     id={mapId}
                     centerGeoUri={latestLocationState.uri}
                     onError={setError}
+                    onClick={onClick}
                     className="mx_MBeaconBody_map"
                 >
                     {

src/utils/WellKnownUtils.ts

@@ -22,7 +22,7 @@ import { MatrixClientPeg } from '../MatrixClientPeg';
 const CALL_BEHAVIOUR_WK_KEY = "io.element.call_behaviour";
 const E2EE_WK_KEY = "io.element.e2ee";
 const E2EE_WK_KEY_DEPRECATED = "im.vector.riot.e2ee";
-const TILE_SERVER_WK_KEY = new UnstableValue(
+export const TILE_SERVER_WK_KEY = new UnstableValue(
     "m.tile_server", "org.matrix.msc3488.tile_server");
 
 /* eslint-disable camelcase */

src/utils/beacon/useLiveBeacons.ts

@@ -0,0 +1,41 @@
+/*
+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 {
+    Beacon,
+    Room,
+    RoomStateEvent,
+    MatrixClient,
+} from "matrix-js-sdk/src/matrix";
+
+import { useEventEmitterState } from "../../hooks/useEventEmitter";
+
+/**
+ * Returns an array of all live beacon ids for a given room
+ *
+ * Beacons are removed from array when they become inactive
+ */
+export const useLiveBeacons = (roomId: Room['roomId'], matrixClient: MatrixClient): Beacon[] => {
+    const room = matrixClient.getRoom(roomId);
+
+    const liveBeacons = useEventEmitterState(
+        room.currentState,
+        RoomStateEvent.BeaconLiveness,
+        () => room.currentState?.liveBeaconIds.map(beaconIdentifier => room.currentState.beacons.get(beaconIdentifier)),
+    );
+
+    return liveBeacons;
+};

test/components/views/beacon/BeaconMarker-test.tsx

@@ -0,0 +1,136 @@
+/*
+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 { mount } from 'enzyme';
+import maplibregl from 'maplibre-gl';
+import { act } from 'react-dom/test-utils';
+import {
+    Beacon,
+    Room,
+    RoomMember,
+    getBeaconInfoIdentifier,
+} from 'matrix-js-sdk/src/matrix';
+
+import BeaconMarker from '../../../../src/components/views/beacon/BeaconMarker';
+import MatrixClientContext from '../../../../src/contexts/MatrixClientContext';
+import { getMockClientWithEventEmitter, makeBeaconEvent, makeBeaconInfoEvent } from '../../../test-utils';
+import { TILE_SERVER_WK_KEY } from '../../../../src/utils/WellKnownUtils';
+
+describe('<BeaconMarker />', () => {
+    // 14.03.2022 16:15
+    const now = 1647270879403;
+    // stable date for snapshots
+    jest.spyOn(global.Date, 'now').mockReturnValue(now);
+    const roomId = '!room:server';
+    const aliceId = '@alice:server';
+
+    const aliceMember = new RoomMember(roomId, aliceId);
+
+    const mockMap = new maplibregl.Map();
+
+    const mockClient = getMockClientWithEventEmitter({
+        getClientWellKnown: jest.fn().mockReturnValue({
+            [TILE_SERVER_WK_KEY.name]: { map_style_url: 'maps.com' },
+        }),
+        getUserId: jest.fn().mockReturnValue(aliceId),
+        getRoom: jest.fn(),
+        isGuest: jest.fn().mockReturnValue(false),
+    });
+
+    // make fresh rooms every time
+    // as we update room state
+    const makeRoomWithStateEvents = (stateEvents = []): Room => {
+        const room1 = new Room(roomId, mockClient, aliceId);
+
+        room1.currentState.setStateEvents(stateEvents);
+        jest.spyOn(room1, 'getMember').mockReturnValue(aliceMember);
+        mockClient.getRoom.mockReturnValue(room1);
+
+        return room1;
+    };
+
+    const defaultEvent = makeBeaconInfoEvent(aliceId,
+        roomId,
+        { isLive: true },
+        '$alice-room1-1',
+    );
+    const notLiveEvent = makeBeaconInfoEvent(aliceId,
+        roomId,
+        { isLive: false },
+        '$alice-room1-2',
+    );
+
+    const location1 = makeBeaconEvent(
+        aliceId, { beaconInfoId: defaultEvent.getId(), geoUri: 'geo:51,41', timestamp: now + 1 },
+    );
+    const location2 = makeBeaconEvent(
+        aliceId, { beaconInfoId: defaultEvent.getId(), geoUri: 'geo:52,42', timestamp: now + 10000 },
+    );
+
+    const defaultProps = {
+        map: mockMap,
+        beacon: new Beacon(defaultEvent),
+    };
+
+    const getComponent = (props = {}) =>
+        mount(<BeaconMarker {...defaultProps} {...props} />, {
+            wrappingComponent: MatrixClientContext.Provider,
+            wrappingComponentProps: { value: mockClient },
+        });
+
+    beforeEach(() => {
+        jest.clearAllMocks();
+    });
+
+    it('renders nothing when beacon is not live', () => {
+        const room = makeRoomWithStateEvents([notLiveEvent]);
+        const beacon = room.currentState.beacons.get(getBeaconInfoIdentifier(notLiveEvent));
+        const component = getComponent({ beacon });
+        expect(component.html()).toBe(null);
+    });
+
+    it('renders nothing when beacon has no location', () => {
+        const room = makeRoomWithStateEvents([defaultEvent]);
+        const beacon = room.currentState.beacons.get(getBeaconInfoIdentifier(defaultEvent));
+        const component = getComponent({ beacon });
+        expect(component.html()).toBe(null);
+    });
+
+    it('renders marker when beacon has location', () => {
+        const room = makeRoomWithStateEvents([defaultEvent]);
+        const beacon = room.currentState.beacons.get(getBeaconInfoIdentifier(defaultEvent));
+        beacon.addLocations([location1]);
+        const component = getComponent({ beacon });
+        expect(component).toMatchSnapshot();
+    });
+
+    it('updates with new locations', () => {
+        const room = makeRoomWithStateEvents([defaultEvent]);
+        const beacon = room.currentState.beacons.get(getBeaconInfoIdentifier(defaultEvent));
+        beacon.addLocations([location1]);
+        const component = getComponent({ beacon });
+        expect(component.find('SmartMarker').props()['geoUri']).toEqual('geo:51,41');
+
+        act(() => {
+            beacon.addLocations([location2]);
+        });
+        component.setProps({});
+
+        // updated to latest location
+        expect(component.find('SmartMarker').props()['geoUri']).toEqual('geo:52,42');
+    });
+});

test/components/views/beacon/BeaconViewDialog-test.tsx

@@ -0,0 +1,121 @@
+/*
+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 { mount } from 'enzyme';
+import { act } from 'react-dom/test-utils';
+import {
+    MatrixClient,
+    Room,
+    RoomMember,
+    getBeaconInfoIdentifier,
+} from 'matrix-js-sdk/src/matrix';
+
+import BeaconViewDialog from '../../../../src/components/views/beacon/BeaconViewDialog';
+import {
+    getMockClientWithEventEmitter,
+    makeBeaconEvent,
+    makeBeaconInfoEvent,
+} from '../../../test-utils';
+import { TILE_SERVER_WK_KEY } from '../../../../src/utils/WellKnownUtils';
+
+describe('<BeaconViewDialog />', () => {
+    // 14.03.2022 16:15
+    const now = 1647270879403;
+    // stable date for snapshots
+    jest.spyOn(global.Date, 'now').mockReturnValue(now);
+    const roomId = '!room:server';
+    const aliceId = '@alice:server';
+    const bobId = '@bob:server';
+
+    const aliceMember = new RoomMember(roomId, aliceId);
+
+    const mockClient = getMockClientWithEventEmitter({
+        getClientWellKnown: jest.fn().mockReturnValue({
+            [TILE_SERVER_WK_KEY.name]: { map_style_url: 'maps.com' },
+        }),
+        getUserId: jest.fn().mockReturnValue(aliceId),
+        getRoom: jest.fn(),
+        isGuest: jest.fn().mockReturnValue(false),
+    });
+
+    // make fresh rooms every time
+    // as we update room state
+    const makeRoomWithStateEvents = (stateEvents = []): Room => {
+        const room1 = new Room(roomId, mockClient, aliceId);
+
+        room1.currentState.setStateEvents(stateEvents);
+        jest.spyOn(room1, 'getMember').mockReturnValue(aliceMember);
+        mockClient.getRoom.mockReturnValue(room1);
+
+        return room1;
+    };
+
+    const defaultEvent = makeBeaconInfoEvent(aliceId,
+        roomId,
+        { isLive: true },
+        '$alice-room1-1',
+    );
+
+    const location1 = makeBeaconEvent(
+        aliceId, { beaconInfoId: defaultEvent.getId(), geoUri: 'geo:51,41', timestamp: now + 1 },
+    );
+
+    const defaultProps = {
+        onFinished: jest.fn(),
+        roomId,
+        matrixClient: mockClient as MatrixClient,
+    };
+
+    const getComponent = (props = {}) =>
+        mount(<BeaconViewDialog {...defaultProps} {...props} />);
+
+    it('renders a map with markers', () => {
+        const room = makeRoomWithStateEvents([defaultEvent]);
+        const beacon = room.currentState.beacons.get(getBeaconInfoIdentifier(defaultEvent));
+        beacon.addLocations([location1]);
+        const component = getComponent();
+        expect(component.find('Map').props()).toEqual(expect.objectContaining({
+            centerGeoUri: 'geo:51,41',
+            interactive: true,
+        }));
+        expect(component.find('SmartMarker').length).toEqual(1);
+    });
+
+    it('updates markers on changes to beacons', () => {
+        const room = makeRoomWithStateEvents([defaultEvent]);
+        const beacon = room.currentState.beacons.get(getBeaconInfoIdentifier(defaultEvent));
+        beacon.addLocations([location1]);
+        const component = getComponent();
+        expect(component.find('BeaconMarker').length).toEqual(1);
+
+        const anotherBeaconEvent = makeBeaconInfoEvent(bobId,
+            roomId,
+            { isLive: true },
+            '$bob-room1-1',
+        );
+
+        act(() => {
+            // emits RoomStateEvent.BeaconLiveness
+            room.currentState.setStateEvents([anotherBeaconEvent]);
+        });
+
+        component.setProps({});
+
+        // two markers now!
+        expect(component.find('BeaconMarker').length).toEqual(2);
+    });
+});

test/components/views/beacon/__snapshots__/BeaconMarker-test.tsx.snap

@@ -0,0 +1,229 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<BeaconMarker /> renders marker when beacon has location 1`] = `
+<BeaconMarker
+  beacon={
+    Beacon {
+      "_beaconInfo": Object {
+        "assetType": "m.self",
+        "description": undefined,
+        "live": true,
+        "timeout": 3600000,
+        "timestamp": 1647270879403,
+      },
+      "_events": Object {
+        "Beacon.Destroy": Array [
+          [Function],
+          [Function],
+        ],
+        "Beacon.LivenessChange": Array [
+          [Function],
+          [Function],
+        ],
+        "Beacon.LocationUpdate": [Function],
+        "Beacon.new": [Function],
+        "Beacon.update": [Function],
+      },
+      "_eventsCount": 5,
+      "_isLive": true,
+      "_latestLocationState": Object {
+        "description": undefined,
+        "timestamp": 1647270879404,
+        "uri": "geo:51,41",
+      },
+      "_maxListeners": undefined,
+      "clearLatestLocation": [Function],
+      "livenessWatchInterval": undefined,
+      "roomId": "!room:server",
+      "rootEvent": Object {
+        "content": Object {
+          "description": undefined,
+          "live": true,
+          "org.matrix.msc3488.asset": Object {
+            "type": "m.self",
+          },
+          "org.matrix.msc3488.ts": 1647270879403,
+          "timeout": 3600000,
+        },
+        "event_id": "$alice-room1-1",
+        "origin_server_ts": 1647270879403,
+        "room_id": "!room:server",
+        "sender": "@alice:server",
+        "state_key": "@alice:server",
+        "type": "org.matrix.msc3672.beacon_info",
+      },
+      Symbol(kCapture): false,
+    }
+  }
+  map={
+    MockMap {
+      "_events": Object {},
+      "_eventsCount": 0,
+      "_maxListeners": undefined,
+      "addControl": [MockFunction],
+      "removeControl": [MockFunction],
+      "setCenter": [MockFunction],
+      "setStyle": [MockFunction],
+      "zoomIn": [MockFunction],
+      "zoomOut": [MockFunction],
+      Symbol(kCapture): false,
+    }
+  }
+>
+  <SmartMarker
+    geoUri="geo:51,41"
+    id="!room:server_@alice:server"
+    map={
+      MockMap {
+        "_events": Object {},
+        "_eventsCount": 0,
+        "_maxListeners": undefined,
+        "addControl": [MockFunction],
+        "removeControl": [MockFunction],
+        "setCenter": [MockFunction],
+        "setStyle": [MockFunction],
+        "zoomIn": [MockFunction],
+        "zoomOut": [MockFunction],
+        Symbol(kCapture): false,
+      }
+    }
+    roomMember={
+      RoomMember {
+        "_events": Object {},
+        "_eventsCount": 0,
+        "_isOutOfBand": false,
+        "_maxListeners": undefined,
+        "_modified": 1647270879403,
+        "_requestedProfileInfo": undefined,
+        "disambiguate": false,
+        "events": Object {
+          "member": null,
+        },
+        "membership": null,
+        "name": "@alice:server",
+        "powerLevel": 0,
+        "powerLevelNorm": 0,
+        "rawDisplayName": "@alice:server",
+        "roomId": "!room:server",
+        "typing": false,
+        "user": null,
+        "userId": "@alice:server",
+        Symbol(kCapture): false,
+      }
+    }
+  >
+    <span>
+      <ForwardRef
+        id="!room:server_@alice:server"
+        roomMember={
+          RoomMember {
+            "_events": Object {},
+            "_eventsCount": 0,
+            "_isOutOfBand": false,
+            "_maxListeners": undefined,
+            "_modified": 1647270879403,
+            "_requestedProfileInfo": undefined,
+            "disambiguate": false,
+            "events": Object {
+              "member": null,
+            },
+            "membership": null,
+            "name": "@alice:server",
+            "powerLevel": 0,
+            "powerLevelNorm": 0,
+            "rawDisplayName": "@alice:server",
+            "roomId": "!room:server",
+            "typing": false,
+            "user": null,
+            "userId": "@alice:server",
+            Symbol(kCapture): false,
+          }
+        }
+      >
+        <div
+          className="mx_Marker mx_Marker_defaultColor"
+          id="!room:server_@alice:server"
+        >
+          <div
+            className="mx_Marker_border"
+          >
+            <MemberAvatar
+              height={36}
+              member={
+                RoomMember {
+                  "_events": Object {},
+                  "_eventsCount": 0,
+                  "_isOutOfBand": false,
+                  "_maxListeners": undefined,
+                  "_modified": 1647270879403,
+                  "_requestedProfileInfo": undefined,
+                  "disambiguate": false,
+                  "events": Object {
+                    "member": null,
+                  },
+                  "membership": null,
+                  "name": "@alice:server",
+                  "powerLevel": 0,
+                  "powerLevelNorm": 0,
+                  "rawDisplayName": "@alice:server",
+                  "roomId": "!room:server",
+                  "typing": false,
+                  "user": null,
+                  "userId": "@alice:server",
+                  Symbol(kCapture): false,
+                }
+              }
+              resizeMethod="crop"
+              viewUserOnClick={false}
+              width={36}
+            >
+              <BaseAvatar
+                height={36}
+                idName="@alice:server"
+                name="@alice:server"
+                resizeMethod="crop"
+                title="@alice:server"
+                url={null}
+                width={36}
+              >
+                <span
+                  className="mx_BaseAvatar"
+                  role="presentation"
+                >
+                  <span
+                    aria-hidden="true"
+                    className="mx_BaseAvatar_initial"
+                    style={
+                      Object {
+                        "fontSize": "23.400000000000002px",
+                        "lineHeight": "36px",
+                        "width": "36px",
+                      }
+                    }
+                  >
+                    A
+                  </span>
+                  <img
+                    alt=""
+                    aria-hidden="true"
+                    className="mx_BaseAvatar_image"
+                    onError={[Function]}
+                    src="data:image/png;base64,00"
+                    style={
+                      Object {
+                        "height": "36px",
+                        "width": "36px",
+                      }
+                    }
+                    title="@alice:server"
+                  />
+                </span>
+              </BaseAvatar>
+            </MemberAvatar>
+          </div>
+        </div>
+      </ForwardRef>
+    </span>
+  </SmartMarker>
+</BeaconMarker>
+`;

test/components/views/location/LocationViewDialog-test.tsx

@@ -20,6 +20,7 @@ import { RoomMember } from 'matrix-js-sdk/src/matrix';
 import { LocationAssetType } from 'matrix-js-sdk/src/@types/location';
 
 import LocationViewDialog from '../../../../src/components/views/location/LocationViewDialog';
+import { TILE_SERVER_WK_KEY } from '../../../../src/utils/WellKnownUtils';
 import { getMockClientWithEventEmitter, makeLocationEvent } from '../../../test-utils';
 
 describe('<LocationViewDialog />', () => {
@@ -27,7 +28,7 @@ describe('<LocationViewDialog />', () => {
     const userId = '@user:server';
     const mockClient = getMockClientWithEventEmitter({
         getClientWellKnown: jest.fn().mockReturnValue({
-            "m.tile_server": { map_style_url: 'maps.com' },
+            [TILE_SERVER_WK_KEY.name]: { map_style_url: 'maps.com' },
         }),
         isGuest: jest.fn().mockReturnValue(false),
     });

test/components/views/location/Map-test.tsx

@@ -24,6 +24,7 @@ import { logger } from 'matrix-js-sdk/src/logger';
 import Map from '../../../../src/components/views/location/Map';
 import { findByTestId, getMockClientWithEventEmitter } from '../../../test-utils';
 import MatrixClientContext from '../../../../src/contexts/MatrixClientContext';
+import { TILE_SERVER_WK_KEY } from '../../../../src/utils/WellKnownUtils';
 
 describe('<Map />', () => {
     const defaultProps = {
@@ -34,7 +35,7 @@ describe('<Map />', () => {
     };
     const matrixClient = getMockClientWithEventEmitter({
         getClientWellKnown: jest.fn().mockReturnValue({
-            "m.tile_server": { map_style_url: 'maps.com' },
+            [TILE_SERVER_WK_KEY.name]: { map_style_url: 'maps.com' },
         }),
     });
     const getComponent = (props = {}) =>
@@ -46,7 +47,7 @@ describe('<Map />', () => {
     beforeEach(() => {
         jest.clearAllMocks();
         matrixClient.getClientWellKnown.mockReturnValue({
-            "m.tile_server": { map_style_url: 'maps.com' },
+            [TILE_SERVER_WK_KEY.name]: { map_style_url: 'maps.com' },
         });
 
         jest.spyOn(logger, 'error').mockRestore();
@@ -65,7 +66,7 @@ describe('<Map />', () => {
 
             act(() => {
                 matrixClient.emit(ClientEvent.ClientWellKnown, {
-                    "m.tile_server": { map_style_url: 'new.maps.com' },
+                    [TILE_SERVER_WK_KEY.name]: { map_style_url: 'new.maps.com' },
                 });
             });
 
@@ -77,7 +78,7 @@ describe('<Map />', () => {
 
             act(() => {
                 matrixClient.emit(ClientEvent.ClientWellKnown, {
-                    "m.tile_server": { map_style_url: undefined },
+                    [TILE_SERVER_WK_KEY.name]: { map_style_url: undefined },
                 });
             });
 

test/components/views/location/__snapshots__/LocationViewDialog-test.tsx.snap

@@ -48,22 +48,24 @@ exports[`<LocationViewDialog /> renders map correctly 1`] = `
         }
       }
     >
-      <ForwardRef
+      <span>
-        id="mx_LocationViewDialog_$2-marker"
+        <ForwardRef
-      >
-        <div
-          className="mx_Marker mx_Marker_defaultColor"
           id="mx_LocationViewDialog_$2-marker"
         >
           <div
-            className="mx_Marker_border"
+            className="mx_Marker mx_Marker_defaultColor"
+            id="mx_LocationViewDialog_$2-marker"
           >
             <div
-              className="mx_Marker_icon"
+              className="mx_Marker_border"
-            />
+            >
+              <div
+                className="mx_Marker_icon"
+              />
+            </div>
           </div>
-        </div>
+        </ForwardRef>
-      </ForwardRef>
+      </span>
     </SmartMarker>
     <ZoomButtons
       map={

test/components/views/location/__snapshots__/SmartMarker-test.tsx.snap

@@ -18,19 +18,21 @@ exports[`<SmartMarker /> creates a marker on mount 1`] = `
     }
   }
 >
-  <ForwardRef>
+  <span>
-    <div
+    <ForwardRef>
-      className="mx_Marker mx_Marker_defaultColor"
-    >
       <div
-        className="mx_Marker_border"
+        className="mx_Marker mx_Marker_defaultColor"
       >
         <div
-          className="mx_Marker_icon"
+          className="mx_Marker_border"
-        />
+        >
+          <div
+            className="mx_Marker_icon"
+          />
+        </div>
       </div>
-    </div>
+    </ForwardRef>
-  </ForwardRef>
+  </span>
 </SmartMarker>
 `;
 
@@ -52,18 +54,20 @@ exports[`<SmartMarker /> removes marker on unmount 1`] = `
     }
   }
 >
-  <ForwardRef>
+  <span>
-    <div
+    <ForwardRef>
-      className="mx_Marker mx_Marker_defaultColor"
-    >
       <div
-        className="mx_Marker_border"
+        className="mx_Marker mx_Marker_defaultColor"
       >
         <div
-          className="mx_Marker_icon"
+          className="mx_Marker_border"
-        />
+        >
+          <div
+            className="mx_Marker_icon"
+          />
+        </div>
       </div>
-    </div>
+    </ForwardRef>
-  </ForwardRef>
+  </span>
 </SmartMarker>
 `;

test/components/views/messages/MBeaconBody-test.tsx

@@ -29,6 +29,8 @@ import { getMockClientWithEventEmitter, makeBeaconEvent, makeBeaconInfoEvent } f
 import { RoomPermalinkCreator } from '../../../../src/utils/permalinks/Permalinks';
 import { MediaEventHelper } from '../../../../src/utils/MediaEventHelper';
 import MatrixClientContext from '../../../../src/contexts/MatrixClientContext';
+import Modal from '../../../../src/Modal';
+import { TILE_SERVER_WK_KEY } from '../../../../src/utils/WellKnownUtils';
 
 describe('<MBeaconBody />', () => {
     // 14.03.2022 16:15
@@ -43,7 +45,7 @@ describe('<MBeaconBody />', () => {
 
     const mockClient = getMockClientWithEventEmitter({
         getClientWellKnown: jest.fn().mockReturnValue({
-            "m.tile_server": { map_style_url: 'maps.com' },
+            [TILE_SERVER_WK_KEY.name]: { map_style_url: 'maps.com' },
         }),
         getUserId: jest.fn().mockReturnValue(aliceId),
         getRoom: jest.fn(),
@@ -83,6 +85,8 @@ describe('<MBeaconBody />', () => {
             wrappingComponentProps: { value: mockClient },
         });
 
+    const modalSpy = jest.spyOn(Modal, 'createTrackedDialog').mockReturnValue(undefined);
+
     beforeEach(() => {
         jest.clearAllMocks();
     });
@@ -110,6 +114,23 @@ describe('<MBeaconBody />', () => {
         expect(component.text()).toEqual("Live location ended");
     });
 
+    it('does not open maximised map when on click when beacon is stopped', () => {
+        const beaconInfoEvent = makeBeaconInfoEvent(aliceId,
+            roomId,
+            // puts this beacons live period in the past
+            { isLive: true, timestamp: now - 600000, timeout: 500 },
+            '$alice-room1-1',
+        );
+        makeRoomWithStateEvents([beaconInfoEvent]);
+        const component = getComponent({ mxEvent: beaconInfoEvent });
+
+        act(() => {
+            component.find('.mx_MBeaconBody_map').simulate('click');
+        });
+
+        expect(modalSpy).not.toHaveBeenCalled();
+    });
+
     it('renders stopped UI when a beacon event is not the latest beacon for a user', () => {
         const aliceBeaconInfo1 = makeBeaconInfoEvent(
             aliceId,
@@ -213,6 +234,40 @@ describe('<MBeaconBody />', () => {
             expect(component.text()).toEqual("Loading live location...");
         });
 
+        it('does nothing on click when a beacon has no location', () => {
+            makeRoomWithStateEvents([aliceBeaconInfo]);
+            const component = getComponent({ mxEvent: aliceBeaconInfo });
+
+            act(() => {
+                component.find('.mx_MBeaconBody_map').simulate('click');
+            });
+
+            expect(modalSpy).not.toHaveBeenCalled();
+        });
+
+        it('renders a live beacon with a location correctly', () => {
+            const room = makeRoomWithStateEvents([aliceBeaconInfo]);
+            const beaconInstance = room.currentState.beacons.get(getBeaconInfoIdentifier(aliceBeaconInfo));
+            beaconInstance.addLocations([location1]);
+            const component = getComponent({ mxEvent: aliceBeaconInfo });
+
+            expect(component.find('Map').length).toBeTruthy;
+        });
+
+        it('opens maximised map view on click when beacon has a live location', () => {
+            const room = makeRoomWithStateEvents([aliceBeaconInfo]);
+            const beaconInstance = room.currentState.beacons.get(getBeaconInfoIdentifier(aliceBeaconInfo));
+            beaconInstance.addLocations([location1]);
+            const component = getComponent({ mxEvent: aliceBeaconInfo });
+
+            act(() => {
+                component.find('Map').simulate('click');
+            });
+
+            // opens modal
+            expect(modalSpy).toHaveBeenCalled();
+        });
+
         it('updates latest location', () => {
             const room = makeRoomWithStateEvents([aliceBeaconInfo]);
             const component = getComponent({ mxEvent: aliceBeaconInfo });

test/components/views/messages/MLocationBody-test.tsx

@@ -28,6 +28,7 @@ import { RoomPermalinkCreator } from "../../../../src/utils/permalinks/Permalink
 import { MediaEventHelper } from "../../../../src/utils/MediaEventHelper";
 import Modal from '../../../../src/Modal';
 import SdkConfig from "../../../../src/SdkConfig";
+import { TILE_SERVER_WK_KEY } from '../../../../src/utils/WellKnownUtils';
 import { makeLocationEvent } from "../../../test-utils/location";
 import { getMockClientWithEventEmitter } from '../../../test-utils';
 
@@ -37,7 +38,7 @@ describe("MLocationBody", () => {
         const userId = '@user:server';
         const mockClient = getMockClientWithEventEmitter({
             getClientWellKnown: jest.fn().mockReturnValue({
-                "m.tile_server": { map_style_url: 'maps.com' },
+                [TILE_SERVER_WK_KEY.name]: { map_style_url: 'maps.com' },
             }),
             isGuest: jest.fn().mockReturnValue(false),
         });
@@ -78,7 +79,7 @@ describe("MLocationBody", () => {
             it('displays correct fallback content when map_style_url is misconfigured', () => {
                 const mockMap = new maplibregl.Map();
                 mockClient.getClientWellKnown.mockReturnValue({
-                    "m.tile_server": { map_style_url: 'bad-tile-server.com' },
+                    [TILE_SERVER_WK_KEY.name]: { map_style_url: 'bad-tile-server.com' },
                 });
                 const component = getComponent();
 
@@ -93,7 +94,7 @@ describe("MLocationBody", () => {
         describe('without error', () => {
             beforeEach(() => {
                 mockClient.getClientWellKnown.mockReturnValue({
-                    "m.tile_server": { map_style_url: 'maps.com' },
+                    [TILE_SERVER_WK_KEY.name]: { map_style_url: 'maps.com' },
                 });
 
                 // MLocationBody uses random number for map id

test/components/views/messages/__snapshots__/MLocationBody-test.tsx.snap

@@ -158,22 +158,24 @@ exports[`MLocationBody <MLocationBody> without error renders map correctly 1`] =
                   }
                 }
               >
-                <ForwardRef
+                <span>
-                  id="mx_MLocationBody_$2_1f9acffa-marker"
+                  <ForwardRef
-                >
-                  <div
-                    className="mx_Marker mx_Marker_defaultColor"
                     id="mx_MLocationBody_$2_1f9acffa-marker"
                   >
                     <div
-                      className="mx_Marker_border"
+                      className="mx_Marker mx_Marker_defaultColor"
+                      id="mx_MLocationBody_$2_1f9acffa-marker"
                     >
                       <div
-                        className="mx_Marker_icon"
+                        className="mx_Marker_border"
-                      />
+                      >
+                        <div
+                          className="mx_Marker_icon"
+                        />
+                      </div>
                     </div>
-                  </div>
+                  </ForwardRef>
-                </ForwardRef>
+                </span>
               </SmartMarker>
             </div>
           </Map>