Live location sharing - beacon in timeline happy path (#8285)

* extract location markers into generic Marker

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

* wrap marker in smartmarker

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

* test smartmarker

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

* working map in location body

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

* remove skinned sdk

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

* use new ZoomButtons in MLocationBody

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

* test LocationViewDialog

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

* update commentt

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

* lint

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

* lint

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

* extract livetimeremaining into own component

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

* extract more beacon state utils

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

* update tests for roomlivesharewarning

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

* add idle status to live beacon icon

* add beacon map and status chin

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

* add handling for bubbles

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

* tests for BeaconBody

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

* i18n

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

* move displaystatus check up to mbeaconbody

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

* test BeaconStatus

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

* rename BeaconStatusChin -> BeaconStatus

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

* make BeaconStatus generic

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

* lint

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

* adjust spinner size

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

* polish and copyrights

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

* lint

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

* better comment

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

res/css/_components.scss

@@ -4,6 +4,7 @@
 @import "./_font-sizes.scss";
 @import "./_font-weights.scss";
 @import "./_spacing.scss";
+@import "./components/views/beacon/_BeaconStatus.scss";
 @import "./components/views/beacon/_LeftPanelLiveShareWarning.scss";
 @import "./components/views/beacon/_LiveTimeRemaining.scss";
 @import "./components/views/beacon/_RoomLiveShareWarning.scss";

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

@@ -0,0 +1,60 @@
+/*
+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_BeaconStatus {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: flex-start;
+
+    box-sizing: border-box;
+    padding: $spacing-8;
+
+    color: var(--color);
+    font-size: $font-12px;
+}
+
+.mx_BeaconStatus_Loading,
+.mx_BeaconStatus_Stopped {
+    --color: $tertiary-content;
+}
+
+.mx_BeaconStatus_Active,
+.mx_BeaconStatus_Error {
+    --color: $primary-content;
+}
+
+.mx_BeaconStatus_icon {
+    height: 32px;
+    width: 32px;
+
+    flex: 0 0 32px;
+    margin-right: $spacing-8;
+}
+
+.mx_BeaconStatus_activeDescription {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    line-height: $font-14px;
+}
+
+.mx_BeaconStatus_stopButton {
+    // override button link_inline styles
+    color: $alert !important;
+    font-weight: $font-semi-bold !important;
+    text-transform: uppercase;
+}

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

@@ -48,6 +48,10 @@ limitations under the License.
     margin-left: $spacing-16;
 }
 
+.mx_RoomLiveShareWarning_stopButton {
+    margin-left: $spacing-16;
+}
+
 .mx_RoomLiveShareWarning_closeButtonIcon {
     height: $font-18px;
     padding: $spacing-4;

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

@@ -33,3 +33,8 @@ limitations under the License.
     background-color: $alert;
     border-color: $alert;
 }
+
+.mx_StyledLiveBeaconIcon.mx_StyledLiveBeaconIcon_idle {
+    background-color: $quaternary-content;
+    border-color: $quaternary-content;
+}

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

@@ -48,6 +48,13 @@ limitations under the License.
     color: $quaternary-content;
 }
 
+.mx_MBeaconBody_chin {
+    position: absolute;
+    bottom: 0;
+    width: 100%;
+    background-color: $overlay-background;
+}
+
 .mx_EventTile[data-layout="bubble"] .mx_EventTile_line .mx_MBeaconBody {
     max-width: 100%;
     width: 450px;

res/themes/dark/css/_dark.scss

@@ -8,6 +8,7 @@ $quinary-content: #394049;
 
 $system: #21262C;
 $background: #15191E;
+$overlay-background: rgba($background, 0.85);
 
 $panel-base: #8D97A5; // This color is not intended for use in the app
 $panels: rgba($system, 0.9);

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

@@ -98,6 +98,8 @@ $quaternary-content: #6F7882;
 $quinary-content: $quaternary-content;
 $system: #21262C;
 $background: $primary-bg-color;
+$overlay-background: rgba($background, 0.85);
+
 $panels: rgba($system, 0.9);
 $panel-base: #8D97A5; // This color is not intended for use in the app
 $panel-selected: rgba($panel-base, 0.3);

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

@@ -151,6 +151,8 @@ $quaternary-content: #6F7882;
 $quinary-content: $quaternary-content;
 $system: #F4F6FA;
 $background: $primary-bg-color;
+$overlay-background: rgba($background, 0.85);
+
 $panels: rgba($system, 0.9);
 $panel-base: #8D97A5; // This color is not intended for use in the app
 $panel-selected: rgba($tertiary-content, 0.3);

res/themes/light/css/_light.scss

@@ -35,6 +35,7 @@ $quinary-content: #E3E8F0;
 
 $system: #F4F6FA;
 $background: #ffffff;
+$overlay-background: rgba($background, 0.85);
 
 $panels: rgba($system, 0.9);
 $panel-selected: rgba($tertiary-content, 0.3);

src/components/views/beacon/BeaconStatus.tsx

@@ -0,0 +1,71 @@
+/*
+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, { HTMLProps } from 'react';
+import classNames from 'classnames';
+import { Beacon } from 'matrix-js-sdk/src/matrix';
+
+import StyledLiveBeaconIcon from './StyledLiveBeaconIcon';
+import { _t } from '../../../languageHandler';
+import AccessibleButton from '../elements/AccessibleButton';
+import LiveTimeRemaining from './LiveTimeRemaining';
+import { BeaconDisplayStatus } from './displayStatus';
+
+interface Props {
+    displayStatus: BeaconDisplayStatus;
+    beacon?: Beacon;
+    label?: string;
+    // assumes permission to stop was checked by parent
+    stopBeacon?: () => void;
+}
+
+const BeaconStatus: React.FC<Props & HTMLProps<HTMLDivElement>> =
+    ({ beacon, displayStatus, label, stopBeacon, className, ...rest }) => {
+        const isIdle = displayStatus === BeaconDisplayStatus.Loading ||
+            displayStatus === BeaconDisplayStatus.Stopped;
+
+        return <div
+            {...rest}
+            className={classNames('mx_BeaconStatus', `mx_BeaconStatus_${displayStatus}`, className)}
+        >
+            <StyledLiveBeaconIcon
+                className='mx_BeaconStatus_icon'
+                withError={displayStatus === BeaconDisplayStatus.Error}
+                isIdle={isIdle}
+            />
+            { displayStatus === BeaconDisplayStatus.Loading && <span>{ _t('Loading live location...') }</span> }
+            { displayStatus === BeaconDisplayStatus.Stopped && <span>{ _t('Live location ended') }</span> }
+
+            { /* TODO error */ }
+
+            { displayStatus === BeaconDisplayStatus.Active && beacon && <>
+                <div className='mx_BeaconStatus_activeDescription'>
+                    { label }
+                    <LiveTimeRemaining beacon={beacon} />
+                </div>
+                { stopBeacon && <AccessibleButton
+                    data-test-id='beacon-status-stop-beacon'
+                    kind='link'
+                    onClick={stopBeacon}
+                    className='mx_BeaconStatus_stopButton'
+                >{ _t('Stop') }</AccessibleButton>
+                }
+            </>
+            }
+        </div>;
+    };
+
+export default BeaconStatus;

src/components/views/beacon/RoomLiveShareWarning.tsx

@@ -14,86 +14,20 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React, { useEffect, useState } from 'react';
+import React from 'react';
 import classNames from 'classnames';
-import {
+import { Room } from 'matrix-js-sdk/src/matrix';
-    Room,
-    Beacon,
-    BeaconIdentifier,
-} from 'matrix-js-sdk/src/matrix';
 
 import { _t } from '../../../languageHandler';
 import { useEventEmitterState } from '../../../hooks/useEventEmitter';
 import { OwnBeaconStore, OwnBeaconStoreEvent } from '../../../stores/OwnBeaconStore';
-import { sortBeaconsByLatestExpiry } from '../../../utils/beacon';
+import { useOwnLiveBeacons } from '../../../utils/beacon';
 import AccessibleButton from '../elements/AccessibleButton';
 import Spinner from '../elements/Spinner';
 import StyledLiveBeaconIcon from './StyledLiveBeaconIcon';
 import { Icon as CloseIcon } from '../../../../res/img/image-view/close.svg';
 import LiveTimeRemaining from './LiveTimeRemaining';
 
-/**
- * It's technically possible to have multiple live beacons in one room
- * Select the latest expiry to display,
- * and kill all beacons on stop sharing
- */
-type LiveBeaconsState = {
-    beacon?: Beacon;
-    onStopSharing?: () => void;
-    onResetWireError?: () => void;
-    stoppingInProgress?: boolean;
-    hasStopSharingError?: boolean;
-    hasWireError?: boolean;
-};
-const useLiveBeacons = (liveBeaconIds: BeaconIdentifier[], roomId: string): LiveBeaconsState => {
-    const [stoppingInProgress, setStoppingInProgress] = useState(false);
-    const [error, setError] = useState<Error>();
-
-    const hasWireError = useEventEmitterState(
-        OwnBeaconStore.instance,
-        OwnBeaconStoreEvent.WireError,
-        () =>
-            OwnBeaconStore.instance.hasWireErrors(roomId),
-    );
-
-    // reset stopping in progress on change in live ids
-    useEffect(() => {
-        setStoppingInProgress(false);
-        setError(undefined);
-    }, [liveBeaconIds]);
-
-    // select the beacon with latest expiry to display expiry time
-    const beacon = liveBeaconIds.map(beaconId => OwnBeaconStore.instance.getBeaconById(beaconId))
-        .sort(sortBeaconsByLatestExpiry)
-        .shift();
-
-    const onStopSharing = async () => {
-        setStoppingInProgress(true);
-        try {
-            await Promise.all(liveBeaconIds.map(beaconId => OwnBeaconStore.instance.stopBeacon(beaconId)));
-        } catch (error) {
-            // only clear loading in case of error
-            // to avoid flash of not-loading state
-            // after beacons have been stopped but we wait for sync
-            setError(error);
-            setStoppingInProgress(false);
-        }
-    };
-
-    const onResetWireError = () => {
-        liveBeaconIds.map(beaconId => OwnBeaconStore.instance.resetWireError(beaconId));
-    };
-
-    return {
-        onStopSharing,
-        onResetWireError,
-        beacon,
-        stoppingInProgress,
-        hasWireError,
-        hasStopSharingError: !!error,
-    };
-};
-
 const getLabel = (hasWireError: boolean, hasStopSharingError: boolean): string => {
     if (hasWireError) {
         return _t('An error occured whilst sharing your live location, please try again');
@@ -116,7 +50,7 @@ const RoomLiveShareWarningInner: React.FC<RoomLiveShareWarningInnerProps> = ({ l
         stoppingInProgress,
         hasStopSharingError,
         hasWireError,
-    } = useLiveBeacons(liveBeaconIds, roomId);
+    } = useOwnLiveBeacons(liveBeaconIds);
 
     if (!beacon) {
         return null;
@@ -147,6 +81,7 @@ const RoomLiveShareWarningInner: React.FC<RoomLiveShareWarningInnerProps> = ({ l
         { !stoppingInProgress && !hasError && <LiveTimeRemaining beacon={beacon} /> }
 
         <AccessibleButton
+            className='mx_RoomLiveShareWarning_stopButton'
             data-test-id='room-live-share-primary-button'
             onClick={onButtonClick}
             kind='danger'

src/components/views/beacon/StyledLiveBeaconIcon.tsx

@@ -22,11 +22,19 @@ import { Icon as LiveLocationIcon } from '../../../../res/img/location/live-loca
 interface Props extends React.SVGProps<SVGSVGElement> {
     // use error styling when true
     withError?: boolean;
+    isIdle?: boolean;
 }
-const StyledLiveBeaconIcon: React.FC<Props> = ({ className, withError, ...props }) =>
+const StyledLiveBeaconIcon: React.FC<Props> = ({ className, withError, isIdle, ...props }) =>
     <LiveLocationIcon
         {...props}
-        className={classNames('mx_StyledLiveBeaconIcon', className, { 'mx_StyledLiveBeaconIcon_error': withError })}
+        className={classNames(
+            'mx_StyledLiveBeaconIcon',
+            className,
+            {
+                'mx_StyledLiveBeaconIcon_error': withError,
+                'mx_StyledLiveBeaconIcon_idle': isIdle,
+
+            })}
     />;
 
 export default StyledLiveBeaconIcon;

src/components/views/messages/MBeaconBody.tsx

@@ -27,7 +27,9 @@ import { BeaconDisplayStatus, getBeaconDisplayStatus } from '../beacon/displaySt
 import Spinner from '../elements/Spinner';
 import Map from '../location/Map';
 import SmartMarker from '../location/SmartMarker';
+import BeaconStatus from '../beacon/BeaconStatus';
 import { IBodyProps } from "./IBodyProps";
+import { _t } from '../../../languageHandler';
 
 const useBeaconState = (beaconInfoEvent: MatrixEvent): {
     beacon?: Beacon;
@@ -76,6 +78,7 @@ const useUniqueId = (eventId: string): string => {
 
 const MBeaconBody: React.FC<IBodyProps> = React.forwardRef(({ mxEvent }, ref) => {
     const {
+        beacon,
         isLive,
         latestLocationState,
     } = useBeaconState(mxEvent);
@@ -113,6 +116,12 @@ const MBeaconBody: React.FC<IBodyProps> = React.forwardRef(({ mxEvent }, ref) =>
                     }
                 </div>
             }
+            <BeaconStatus
+                className='mx_MBeaconBody_chin'
+                beacon={beacon}
+                displayStatus={displayStatus}
+                label={_t('View live location')}
+            />
         </div>
     );
 });

src/i18n/strings/en_EN.json

@@ -2079,6 +2079,7 @@
     "Pick a date to jump to": "Pick a date to jump to",
     "Go": "Go",
     "Error processing audio message": "Error processing audio message",
+    "View live location": "View live location",
     "React": "React",
     "Reply in thread": "Reply in thread",
     "Can't create a thread from an event with an existing relation": "Can't create a thread from an event with an existing relation",
@@ -2900,6 +2901,8 @@
     "Beta": "Beta",
     "Leave the beta": "Leave the beta",
     "Join the beta": "Join the beta",
+    "Loading live location...": "Loading live location...",
+    "Live location ended": "Live location ended",
     "An error occured whilst sharing your live location": "An error occured whilst sharing your live location",
     "You are sharing your live location": "You are sharing your live location",
     "%(timeRemaining)s left": "%(timeRemaining)s left",

src/utils/beacon/index.ts

@@ -17,3 +17,4 @@ limitations under the License.
 export * from './duration';
 export * from './geolocation';
 export * from './useBeacon';
+export * from './useOwnLiveBeacons';

src/utils/beacon/useBeacon.ts

@@ -68,5 +68,11 @@ export const useBeacon = (beaconInfoEvent: MatrixEvent): Beacon | undefined => {
         }
     }, [beaconInstanceEventId, beaconInfoEvent]);
 
+    useEffect(() => {
+        if (beacon) {
+            beacon.monitorLiveness();
+        }
+    }, [beacon]);
+
     return beacon;
 };

src/utils/beacon/useOwnLiveBeacons.ts

@@ -0,0 +1,87 @@
+/*
+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 { useEffect, useState } from "react";
+import { Beacon, BeaconIdentifier } from "matrix-js-sdk/src/matrix";
+
+import { useEventEmitterState } from "../../hooks/useEventEmitter";
+import { OwnBeaconStore, OwnBeaconStoreEvent } from "../../stores/OwnBeaconStore";
+import { sortBeaconsByLatestExpiry } from "./duration";
+
+type LiveBeaconsState = {
+    beacon?: Beacon;
+    onStopSharing?: () => void;
+    onResetWireError?: () => void;
+    stoppingInProgress?: boolean;
+    hasStopSharingError?: boolean;
+    hasWireError?: boolean;
+};
+
+/**
+ * Monitor the current users own beacons
+ * While current implementation only allows one live beacon per user per room
+ * In future it will be possible to have multiple live beacons in one room
+ * Select the latest expiry to display,
+ * and kill all beacons on stop sharing
+ */
+export const useOwnLiveBeacons = (liveBeaconIds: BeaconIdentifier[]): LiveBeaconsState => {
+    const [stoppingInProgress, setStoppingInProgress] = useState(false);
+    const [error, setError] = useState<Error>();
+
+    const hasWireError = useEventEmitterState(
+        OwnBeaconStore.instance,
+        OwnBeaconStoreEvent.WireError,
+        () =>
+            liveBeaconIds.some(OwnBeaconStore.instance.beaconHasWireError),
+    );
+
+    // reset stopping in progress on change in live ids
+    useEffect(() => {
+        setStoppingInProgress(false);
+        setError(undefined);
+    }, [liveBeaconIds]);
+
+    // select the beacon with latest expiry to display expiry time
+    const beacon = liveBeaconIds.map(beaconId => OwnBeaconStore.instance.getBeaconById(beaconId))
+        .sort(sortBeaconsByLatestExpiry)
+        .shift();
+
+    const onStopSharing = async () => {
+        setStoppingInProgress(true);
+        try {
+            await Promise.all(liveBeaconIds.map(beaconId => OwnBeaconStore.instance.stopBeacon(beaconId)));
+        } catch (error) {
+            // only clear loading in case of error
+            // to avoid flash of not-loading state
+            // after beacons have been stopped but we wait for sync
+            setError(error);
+            setStoppingInProgress(false);
+        }
+    };
+
+    const onResetWireError = () => {
+        liveBeaconIds.map(beaconId => OwnBeaconStore.instance.resetWireError(beaconId));
+    };
+
+    return {
+        onStopSharing,
+        onResetWireError,
+        beacon,
+        stoppingInProgress,
+        hasWireError,
+        hasStopSharingError: !!error,
+    };
+};

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

@@ -0,0 +1,67 @@
+/*
+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 { Beacon } from 'matrix-js-sdk/src/matrix';
+import { act } from 'react-dom/test-utils';
+
+import BeaconStatus from '../../../../src/components/views/beacon/BeaconStatus';
+import { BeaconDisplayStatus } from '../../../../src/components/views/beacon/displayStatus';
+import { findByTestId, makeBeaconInfoEvent } from '../../../test-utils';
+
+describe('<BeaconStatus />', () => {
+    const defaultProps = {
+        displayStatus: BeaconDisplayStatus.Loading,
+    };
+    const getComponent = (props = {}) =>
+        mount(<BeaconStatus {...defaultProps} {...props} />);
+
+    it('renders loading state', () => {
+        const component = getComponent({ displayStatus: BeaconDisplayStatus.Loading });
+        expect(component).toMatchSnapshot();
+    });
+
+    it('renders stopped state', () => {
+        const component = getComponent({ displayStatus: BeaconDisplayStatus.Stopped });
+        expect(component).toMatchSnapshot();
+    });
+
+    it('renders active state without stop buttons', () => {
+        // mock for stable snapshot
+        jest.spyOn(Date, 'now').mockReturnValue(123456789);
+        const beacon = new Beacon(makeBeaconInfoEvent('@user:server', '!room:server', {}, '$1'));
+        const component = getComponent({ beacon, displayStatus: BeaconDisplayStatus.Active });
+        expect(component).toMatchSnapshot();
+    });
+
+    it('renders active state with stop button', () => {
+        const stopBeacon = jest.fn();
+        const beacon = new Beacon(makeBeaconInfoEvent('@user:server', '!room:sever'));
+        const component = getComponent({
+            beacon,
+            stopBeacon,
+            displayStatus: BeaconDisplayStatus.Active,
+        });
+        expect(findByTestId(component, 'beacon-status-stop-beacon')).toMatchSnapshot();
+
+        act(() => {
+            findByTestId(component, 'beacon-status-stop-beacon').at(0).simulate('click');
+        });
+
+        expect(stopBeacon).toHaveBeenCalled();
+    });
+});

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

@@ -100,7 +100,7 @@ describe('<RoomLiveShareWarning />', () => {
     });
 
     afterEach(async () => {
-        jest.spyOn(OwnBeaconStore.instance, 'hasWireErrors').mockRestore();
+        jest.spyOn(OwnBeaconStore.instance, 'beaconHasWireError').mockRestore();
         await resetAsyncStoreWithClient(OwnBeaconStore.instance);
     });
 
@@ -319,20 +319,24 @@ describe('<RoomLiveShareWarning />', () => {
 
         describe('with wire errors', () => {
             it('displays wire error when mounted with wire errors', async () => {
-                const hasWireErrorsSpy = jest.spyOn(OwnBeaconStore.instance, 'hasWireErrors').mockReturnValue(true);
+                const wireErrorSpy = jest.spyOn(OwnBeaconStore.instance, 'beaconHasWireError')
+                    .mockReturnValue(true);
                 const component = getComponent({ roomId: room2Id });
 
                 expect(component).toMatchSnapshot();
-                expect(hasWireErrorsSpy).toHaveBeenCalledWith(room2Id);
+                expect(wireErrorSpy).toHaveBeenCalledWith(
+                    getBeaconInfoIdentifier(room2Beacon1), 0, [getBeaconInfoIdentifier(room2Beacon1)],
+                );
             });
 
             it('displays wire error when wireError event is emitted and beacons have errors', async () => {
-                const hasWireErrorsSpy = jest.spyOn(OwnBeaconStore.instance, 'hasWireErrors').mockReturnValue(false);
+                const wireErrorSpy = jest.spyOn(OwnBeaconStore.instance, 'beaconHasWireError')
+                    .mockReturnValue(false);
                 const component = getComponent({ roomId: room2Id });
 
                 // update mock and emit event
                 act(() => {
-                    hasWireErrorsSpy.mockReturnValue(true);
+                    wireErrorSpy.mockReturnValue(true);
                     OwnBeaconStore.instance.emit(OwnBeaconStoreEvent.WireError, getBeaconInfoIdentifier(room2Beacon1));
                 });
                 component.setProps({});
@@ -345,12 +349,13 @@ describe('<RoomLiveShareWarning />', () => {
             });
 
             it('stops displaying wire error when errors are cleared', async () => {
-                const hasWireErrorsSpy = jest.spyOn(OwnBeaconStore.instance, 'hasWireErrors').mockReturnValue(true);
+                const wireErrorSpy = jest.spyOn(OwnBeaconStore.instance, 'beaconHasWireError')
+                    .mockReturnValue(true);
                 const component = getComponent({ roomId: room2Id });
 
                 // update mock and emit event
                 act(() => {
-                    hasWireErrorsSpy.mockReturnValue(false);
+                    wireErrorSpy.mockReturnValue(false);
                     OwnBeaconStore.instance.emit(OwnBeaconStoreEvent.WireError, getBeaconInfoIdentifier(room2Beacon1));
                 });
                 component.setProps({});
@@ -363,7 +368,7 @@ describe('<RoomLiveShareWarning />', () => {
             });
 
             it('clicking retry button resets wire errors', async () => {
-                jest.spyOn(OwnBeaconStore.instance, 'hasWireErrors').mockReturnValue(true);
+                jest.spyOn(OwnBeaconStore.instance, 'beaconHasWireError').mockReturnValue(true);
                 const resetErrorSpy = jest.spyOn(OwnBeaconStore.instance, 'resetWireError');
 
                 const component = getComponent({ roomId: room2Id });
@@ -376,7 +381,7 @@ describe('<RoomLiveShareWarning />', () => {
             });
 
             it('clicking close button stops beacons', async () => {
-                jest.spyOn(OwnBeaconStore.instance, 'hasWireErrors').mockReturnValue(true);
+                jest.spyOn(OwnBeaconStore.instance, 'beaconHasWireError').mockReturnValue(true);
                 const stopBeaconSpy = jest.spyOn(OwnBeaconStore.instance, 'stopBeacon');
 
                 const component = getComponent({ roomId: room2Id });

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

@@ -0,0 +1,195 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<BeaconStatus /> renders active state with stop button 1`] = `
+Array [
+  <AccessibleButton
+    className="mx_BeaconStatus_stopButton"
+    data-test-id="beacon-status-stop-beacon"
+    element="div"
+    kind="link"
+    onClick={[MockFunction]}
+    role="button"
+    tabIndex={0}
+  >
+    <div
+      className="mx_AccessibleButton mx_BeaconStatus_stopButton mx_AccessibleButton_hasKind mx_AccessibleButton_kind_link"
+      data-test-id="beacon-status-stop-beacon"
+      onClick={[MockFunction]}
+      onKeyDown={[Function]}
+      onKeyUp={[Function]}
+      role="button"
+      tabIndex={0}
+    >
+      Stop
+    </div>
+  </AccessibleButton>,
+  <div
+    className="mx_AccessibleButton mx_BeaconStatus_stopButton mx_AccessibleButton_hasKind mx_AccessibleButton_kind_link"
+    data-test-id="beacon-status-stop-beacon"
+    onClick={[MockFunction]}
+    onKeyDown={[Function]}
+    onKeyUp={[Function]}
+    role="button"
+    tabIndex={0}
+  >
+    Stop
+  </div>,
+]
+`;
+
+exports[`<BeaconStatus /> renders active state without stop buttons 1`] = `
+<BeaconStatus
+  beacon={
+    Beacon {
+      "_beaconInfo": Object {
+        "assetType": "m.self",
+        "description": undefined,
+        "live": undefined,
+        "timeout": 3600000,
+        "timestamp": 123456789,
+      },
+      "_events": Object {
+        "Beacon.update": [Function],
+      },
+      "_eventsCount": 1,
+      "_isLive": undefined,
+      "_latestLocationState": undefined,
+      "_maxListeners": undefined,
+      "clearLatestLocation": [Function],
+      "livenessWatchInterval": undefined,
+      "roomId": "!room:server",
+      "rootEvent": Object {
+        "content": Object {
+          "description": undefined,
+          "live": undefined,
+          "org.matrix.msc3488.asset": Object {
+            "type": "m.self",
+          },
+          "org.matrix.msc3488.ts": 123456789,
+          "timeout": 3600000,
+        },
+        "event_id": "$1",
+        "origin_server_ts": 123456789,
+        "room_id": "!room:server",
+        "sender": "@user:server",
+        "state_key": "@user:server",
+        "type": "org.matrix.msc3672.beacon_info",
+      },
+      Symbol(kCapture): false,
+    }
+  }
+  displayStatus="Active"
+>
+  <div
+    className="mx_BeaconStatus mx_BeaconStatus_Active"
+  >
+    <StyledLiveBeaconIcon
+      className="mx_BeaconStatus_icon"
+      isIdle={false}
+      withError={false}
+    >
+      <div
+        className="mx_StyledLiveBeaconIcon mx_BeaconStatus_icon"
+      />
+    </StyledLiveBeaconIcon>
+    <div
+      className="mx_BeaconStatus_activeDescription"
+    >
+      <LiveTimeRemaining
+        beacon={
+          Beacon {
+            "_beaconInfo": Object {
+              "assetType": "m.self",
+              "description": undefined,
+              "live": undefined,
+              "timeout": 3600000,
+              "timestamp": 123456789,
+            },
+            "_events": Object {
+              "Beacon.update": [Function],
+            },
+            "_eventsCount": 1,
+            "_isLive": undefined,
+            "_latestLocationState": undefined,
+            "_maxListeners": undefined,
+            "clearLatestLocation": [Function],
+            "livenessWatchInterval": undefined,
+            "roomId": "!room:server",
+            "rootEvent": Object {
+              "content": Object {
+                "description": undefined,
+                "live": undefined,
+                "org.matrix.msc3488.asset": Object {
+                  "type": "m.self",
+                },
+                "org.matrix.msc3488.ts": 123456789,
+                "timeout": 3600000,
+              },
+              "event_id": "$1",
+              "origin_server_ts": 123456789,
+              "room_id": "!room:server",
+              "sender": "@user:server",
+              "state_key": "@user:server",
+              "type": "org.matrix.msc3672.beacon_info",
+            },
+            Symbol(kCapture): false,
+          }
+        }
+      >
+        <span
+          className="mx_LiveTimeRemaining"
+          data-test-id="room-live-share-expiry"
+        >
+          1h left
+        </span>
+      </LiveTimeRemaining>
+    </div>
+  </div>
+</BeaconStatus>
+`;
+
+exports[`<BeaconStatus /> renders loading state 1`] = `
+<BeaconStatus
+  displayStatus="Loading"
+>
+  <div
+    className="mx_BeaconStatus mx_BeaconStatus_Loading"
+  >
+    <StyledLiveBeaconIcon
+      className="mx_BeaconStatus_icon"
+      isIdle={true}
+      withError={false}
+    >
+      <div
+        className="mx_StyledLiveBeaconIcon mx_BeaconStatus_icon mx_StyledLiveBeaconIcon_idle"
+      />
+    </StyledLiveBeaconIcon>
+    <span>
+      Loading live location...
+    </span>
+  </div>
+</BeaconStatus>
+`;
+
+exports[`<BeaconStatus /> renders stopped state 1`] = `
+<BeaconStatus
+  displayStatus="Stopped"
+>
+  <div
+    className="mx_BeaconStatus mx_BeaconStatus_Stopped"
+  >
+    <StyledLiveBeaconIcon
+      className="mx_BeaconStatus_icon"
+      isIdle={true}
+      withError={false}
+    >
+      <div
+        className="mx_StyledLiveBeaconIcon mx_BeaconStatus_icon mx_StyledLiveBeaconIcon_idle"
+      />
+    </StyledLiveBeaconIcon>
+    <span>
+      Live location ended
+    </span>
+  </div>
+</BeaconStatus>
+`;

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

@@ -1,10 +1,10 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`<RoomLiveShareWarning /> when user has live beacons and geolocation is available renders correctly with one live beacon in room 1`] = `"<div class=\\"mx_RoomLiveShareWarning\\"><div class=\\"mx_StyledLiveBeaconIcon mx_RoomLiveShareWarning_icon\\"></div><span class=\\"mx_RoomLiveShareWarning_label\\">You are sharing your live location</span><span data-test-id=\\"room-live-share-expiry\\" class=\\"mx_LiveTimeRemaining\\">1h left</span><button data-test-id=\\"room-live-share-primary-button\\" role=\\"button\\" tabindex=\\"0\\" class=\\"mx_AccessibleButton mx_AccessibleButton_hasKind mx_AccessibleButton_kind_danger\\">Stop sharing</button></div>"`;
+exports[`<RoomLiveShareWarning /> when user has live beacons and geolocation is available renders correctly with one live beacon in room 1`] = `"<div class=\\"mx_RoomLiveShareWarning\\"><div class=\\"mx_StyledLiveBeaconIcon mx_RoomLiveShareWarning_icon\\"></div><span class=\\"mx_RoomLiveShareWarning_label\\">You are sharing your live location</span><span data-test-id=\\"room-live-share-expiry\\" class=\\"mx_LiveTimeRemaining\\">1h left</span><button data-test-id=\\"room-live-share-primary-button\\" role=\\"button\\" tabindex=\\"0\\" class=\\"mx_AccessibleButton mx_RoomLiveShareWarning_stopButton mx_AccessibleButton_hasKind mx_AccessibleButton_kind_danger\\">Stop sharing</button></div>"`;
 
-exports[`<RoomLiveShareWarning /> when user has live beacons and geolocation is available renders correctly with two live beacons in room 1`] = `"<div class=\\"mx_RoomLiveShareWarning\\"><div class=\\"mx_StyledLiveBeaconIcon mx_RoomLiveShareWarning_icon\\"></div><span class=\\"mx_RoomLiveShareWarning_label\\">You are sharing your live location</span><span data-test-id=\\"room-live-share-expiry\\" class=\\"mx_LiveTimeRemaining\\">12h left</span><button data-test-id=\\"room-live-share-primary-button\\" role=\\"button\\" tabindex=\\"0\\" class=\\"mx_AccessibleButton mx_AccessibleButton_hasKind mx_AccessibleButton_kind_danger\\">Stop sharing</button></div>"`;
+exports[`<RoomLiveShareWarning /> when user has live beacons and geolocation is available renders correctly with two live beacons in room 1`] = `"<div class=\\"mx_RoomLiveShareWarning\\"><div class=\\"mx_StyledLiveBeaconIcon mx_RoomLiveShareWarning_icon\\"></div><span class=\\"mx_RoomLiveShareWarning_label\\">You are sharing your live location</span><span data-test-id=\\"room-live-share-expiry\\" class=\\"mx_LiveTimeRemaining\\">12h left</span><button data-test-id=\\"room-live-share-primary-button\\" role=\\"button\\" tabindex=\\"0\\" class=\\"mx_AccessibleButton mx_RoomLiveShareWarning_stopButton mx_AccessibleButton_hasKind mx_AccessibleButton_kind_danger\\">Stop sharing</button></div>"`;
 
-exports[`<RoomLiveShareWarning /> when user has live beacons and geolocation is available stopping beacons displays error when stop sharing fails 1`] = `"<div class=\\"mx_RoomLiveShareWarning\\"><div class=\\"mx_StyledLiveBeaconIcon mx_RoomLiveShareWarning_icon mx_StyledLiveBeaconIcon_error\\"></div><span class=\\"mx_RoomLiveShareWarning_label\\">An error occurred while stopping your live location, please try again</span><button data-test-id=\\"room-live-share-primary-button\\" role=\\"button\\" tabindex=\\"0\\" class=\\"mx_AccessibleButton mx_AccessibleButton_hasKind mx_AccessibleButton_kind_danger\\">Retry</button></div>"`;
+exports[`<RoomLiveShareWarning /> when user has live beacons and geolocation is available stopping beacons displays error when stop sharing fails 1`] = `"<div class=\\"mx_RoomLiveShareWarning\\"><div class=\\"mx_StyledLiveBeaconIcon mx_RoomLiveShareWarning_icon mx_StyledLiveBeaconIcon_error\\"></div><span class=\\"mx_RoomLiveShareWarning_label\\">An error occurred while stopping your live location, please try again</span><button data-test-id=\\"room-live-share-primary-button\\" role=\\"button\\" tabindex=\\"0\\" class=\\"mx_AccessibleButton mx_RoomLiveShareWarning_stopButton mx_AccessibleButton_hasKind mx_AccessibleButton_kind_danger\\">Retry</button></div>"`;
 
 exports[`<RoomLiveShareWarning /> when user has live beacons and geolocation is available with wire errors displays wire error when mounted with wire errors 1`] = `
 <RoomLiveShareWarning
@@ -35,6 +35,7 @@ exports[`<RoomLiveShareWarning /> when user has live beacons and geolocation is
         An error occured whilst sharing your live location, please try again
       </span>
       <AccessibleButton
+        className="mx_RoomLiveShareWarning_stopButton"
         data-test-id="room-live-share-primary-button"
         disabled={false}
         element="button"
@@ -44,7 +45,7 @@ exports[`<RoomLiveShareWarning /> when user has live beacons and geolocation is
         tabIndex={0}
       >
         <button
-          className="mx_AccessibleButton mx_AccessibleButton_hasKind mx_AccessibleButton_kind_danger"
+          className="mx_AccessibleButton mx_RoomLiveShareWarning_stopButton mx_AccessibleButton_hasKind mx_AccessibleButton_kind_danger"
           data-test-id="room-live-share-primary-button"
           onClick={[Function]}
           onKeyDown={[Function]}

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

@@ -95,7 +95,7 @@ describe('<MBeaconBody />', () => {
         );
         makeRoomWithStateEvents([beaconInfoEvent]);
         const component = getComponent({ mxEvent: beaconInfoEvent });
-        expect(component.find('Map').length).toBeFalsy();
+        expect(component.text()).toEqual("Live location ended");
     });
 
     it('renders stopped beacon UI for an expired beacon', () => {
@@ -107,7 +107,7 @@ describe('<MBeaconBody />', () => {
         );
         makeRoomWithStateEvents([beaconInfoEvent]);
         const component = getComponent({ mxEvent: beaconInfoEvent });
-        expect(component.find('Map').length).toBeFalsy();
+        expect(component.text()).toEqual("Live location ended");
     });
 
     it('renders stopped UI when a beacon event is not the latest beacon for a user', () => {
@@ -130,7 +130,7 @@ describe('<MBeaconBody />', () => {
 
         const component = getComponent({ mxEvent: aliceBeaconInfo1 });
         // beacon1 has been superceded by beacon2
-        expect(component.find('Map').length).toBeFalsy();
+        expect(component.text()).toEqual("Live location ended");
     });
 
     it('renders stopped UI when a beacon event is replaced', () => {
@@ -162,7 +162,7 @@ describe('<MBeaconBody />', () => {
         component.setProps({});
 
         // beacon1 has been superceded by beacon2
-        expect(component.find('Map').length).toBeFalsy();
+        expect(component.text()).toEqual("Live location ended");
     });
 
     describe('on liveness change', () => {
@@ -187,7 +187,7 @@ describe('<MBeaconBody />', () => {
             component.setProps({});
 
             // stopped UI
-            expect(component.find('Map').length).toBeFalsy();
+            expect(component.text()).toEqual("Live location ended");
         });
     });
 
@@ -210,7 +210,7 @@ describe('<MBeaconBody />', () => {
             makeRoomWithStateEvents([aliceBeaconInfo]);
             const component = getComponent({ mxEvent: aliceBeaconInfo });
 
-            expect(component.find('Spinner').length).toBeTruthy();
+            expect(component.text()).toEqual("Loading live location...");
         });
 
         it('updates latest location', () => {