Live location sharing: own live beacon status on maximised view

res/css/_components.scss

@@ -7,6 +7,7 @@
 @import "./components/views/beacon/_BeaconListItem.scss";
 @import "./components/views/beacon/_BeaconStatus.scss";
 @import "./components/views/beacon/_BeaconViewDialog.scss";
+@import "./components/views/beacon/_DialogOwnBeaconStatus.scss";
 @import "./components/views/beacon/_DialogSidebar.scss";
 @import "./components/views/beacon/_LeftPanelLiveShareWarning.scss";
 @import "./components/views/beacon/_LiveTimeRemaining.scss";

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

@@ -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.
+*/
+
+.mx_DialogOwnBeaconStatus {
+    position: absolute;
+    bottom: $spacing-32;
+    width: 300px;
+    margin-left: -150px;
+    left: 50%;
+
+    box-sizing: border-box;
+    display: flex;
+    flex-direction: row;
+    align-items: flex-start;
+    justify-content: stretch;
+
+    background: $background;
+    border-radius: 8px;
+    box-shadow: 4px 4px 12px 0 $menu-box-shadow-color;
+
+    padding: 0 $spacing-12;
+}
+
+.mx_DialogOwnBeaconStatus_avatarIcon {
+    flex: 0 0;
+    height: 32px;
+    width: 32px;
+    margin: $spacing-8 0 $spacing-8 0;
+}
+
+.mx_DialogOwnBeaconStatus_avatar {
+    flex: 0 0;
+    box-sizing: border-box;
+
+    border: 2px solid $location-live-color;
+    margin: $spacing-8 0 $spacing-8 0;
+}
+
+.mx_DialogOwnBeaconStatus_status {
+    flex: 1 1;
+    padding-right: 0;
+}

src/components/views/beacon/BeaconViewDialog.tsx

@@ -36,6 +36,7 @@ import { Icon as LocationIcon } from '../../../../res/img/element-icons/location
 import { _t } from '../../../languageHandler';
 import AccessibleButton from '../elements/AccessibleButton';
 import DialogSidebar from './DialogSidebar';
+import DialogOwnBeaconStatus from './DialogOwnBeaconStatus';
 
 interface IProps extends IDialogProps {
     roomId: Room['roomId'];
@@ -124,6 +125,7 @@ const BeaconViewDialog: React.FC<IProps> = ({
                         { _t('View list') }
                     </AccessibleButton>
                 }
+                <DialogOwnBeaconStatus roomId={roomId} />
             </MatrixClientContext.Provider>
         </BaseDialog>
     );

src/components/views/beacon/DialogOwnBeaconStatus.tsx

@@ -0,0 +1,80 @@
+/*
+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 { Room, Beacon } from 'matrix-js-sdk/src/matrix';
+import { LocationAssetType } from 'matrix-js-sdk/src/@types/location';
+
+import { OwnBeaconStore, OwnBeaconStoreEvent } from '../../../stores/OwnBeaconStore';
+import { useEventEmitterState } from '../../../hooks/useEventEmitter';
+import { OwnProfileStore } from '../../../stores/OwnProfileStore';
+import OwnBeaconStatus from './OwnBeaconStatus';
+import { BeaconDisplayStatus } from './displayStatus';
+import MatrixClientContext from '../../../contexts/MatrixClientContext';
+import MemberAvatar from '../avatars/MemberAvatar';
+import StyledLiveBeaconIcon from './StyledLiveBeaconIcon';
+
+interface Props {
+    roomId: Room['roomId'];
+}
+
+const useOwnBeacon = (roomId: Room['roomId']): Beacon | undefined => {
+    const ownBeacon = useEventEmitterState(
+        OwnProfileStore.instance,
+        OwnBeaconStoreEvent.LivenessChange,
+        () => {
+            const [ownBeaconId] = OwnBeaconStore.instance.getLiveBeaconIds(roomId);
+            return OwnBeaconStore.instance.getBeaconById(ownBeaconId);
+        },
+    );
+
+    return ownBeacon;
+};
+
+const DialogOwnBeaconStatus: React.FC<Props> = ({ roomId }) => {
+    const beacon = useOwnBeacon(roomId);
+
+    const matrixClient = useContext(MatrixClientContext);
+    const room = matrixClient.getRoom(roomId);
+
+    if (!beacon?.isLive) {
+        return null;
+    }
+
+    const isSelfLocation = beacon.beaconInfo.assetType === LocationAssetType.Self;
+    const beaconMember = isSelfLocation ?
+        room.getMember(beacon.beaconInfoOwner) :
+        undefined;
+
+    return <div className='mx_DialogOwnBeaconStatus'>
+        { isSelfLocation ?
+            <MemberAvatar
+                className='mx_DialogOwnBeaconStatus_avatar'
+                member={beaconMember}
+                height={32}
+                width={32}
+            /> :
+            <StyledLiveBeaconIcon className='mx_DialogOwnBeaconStatus_avatarIcon' />
+        }
+        <OwnBeaconStatus
+            className='mx_DialogOwnBeaconStatus_status'
+            beacon={beacon}
+            displayStatus={BeaconDisplayStatus.Active}
+        />
+    </div>;
+};
+
+export default DialogOwnBeaconStatus;

src/components/views/beacon/OwnBeaconStatus.tsx

@@ -25,15 +25,17 @@ import AccessibleButton from '../elements/AccessibleButton';
 
 interface Props {
     displayStatus: BeaconDisplayStatus;
+    className?: string;
     beacon?: Beacon;
+    withIcon?: boolean;
 }
 
 /**
  * Wraps BeaconStatus with more capabilities
  * for errors and actions available for users own live beacons
  */
 const OwnBeaconStatus: React.FC<Props & HTMLProps<HTMLDivElement>> = ({
-    beacon, displayStatus, className, ...rest
+    beacon, displayStatus, ...rest
 }) => {
     const {
         hasWireError,
@@ -49,12 +51,10 @@ const OwnBeaconStatus: React.FC<Props & HTMLProps<HTMLDivElement>> = ({
         displayStatus;
 
     return <BeaconStatus
-        className='mx_MBeaconBody_chin'
         beacon={beacon}
         displayStatus={ownDisplayStatus}
         label={_t('Live location enabled')}
         displayLiveTimeRemaining
-        withIcon
         {...rest}
     >
         { ownDisplayStatus === BeaconDisplayStatus.Active && <AccessibleButton

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

@@ -34,6 +34,8 @@ import {
     makeRoomWithStateEvents,
 } from '../../../test-utils';
 import { TILE_SERVER_WK_KEY } from '../../../../src/utils/WellKnownUtils';
+import { OwnBeaconStore } from '../../../../src/stores/OwnBeaconStore';
+import { BeaconDisplayStatus } from '../../../../src/components/views/beacon/displayStatus';
 
 describe('<BeaconViewDialog />', () => {
     // 14.03.2022 16:15
@@ -50,9 +52,10 @@ describe('<BeaconViewDialog />', () => {
         getClientWellKnown: jest.fn().mockReturnValue({
             [TILE_SERVER_WK_KEY.name]: { map_style_url: 'maps.com' },
         }),
-        getUserId: jest.fn().mockReturnValue(aliceId),
+        getUserId: jest.fn().mockReturnValue(bobId),
         getRoom: jest.fn(),
         isGuest: jest.fn().mockReturnValue(false),
+        getVisibleRooms: jest.fn().mockReturnValue([]),
     });
 
     // make fresh rooms every time
@@ -83,6 +86,10 @@ describe('<BeaconViewDialog />', () => {
     const getComponent = (props = {}) =>
         mount(<BeaconViewDialog {...defaultProps} {...props} />);
 
+    beforeEach(() => {
+        jest.spyOn(OwnBeaconStore.instance, 'getLiveBeaconIds').mockRestore();
+    });
+
     it('renders a map with markers', () => {
         const room = setupRoom([defaultEvent]);
         const beacon = room.currentState.beacons.get(getBeaconInfoIdentifier(defaultEvent));
@@ -95,6 +102,31 @@ describe('<BeaconViewDialog />', () => {
         expect(component.find('SmartMarker').length).toEqual(1);
     });
 
+    it('does not render any own beacon status when user is not live sharing', () => {
+        // default event belongs to alice, we are bob
+        const room = setupRoom([defaultEvent]);
+        const beacon = room.currentState.beacons.get(getBeaconInfoIdentifier(defaultEvent));
+        beacon.addLocations([location1]);
+        const component = getComponent();
+        expect(component.find('DialogOwnBeaconStatus').html()).toBeNull();
+    });
+
+    it('renders own beacon status when user is live sharing', () => {
+        // default event belongs to alice
+        const room = setupRoom([defaultEvent]);
+        const beacon = room.currentState.beacons.get(getBeaconInfoIdentifier(defaultEvent));
+        beacon.addLocations([location1]);
+        // mock own beacon store to show default event as alice's live beacon
+        jest.spyOn(OwnBeaconStore.instance, 'getLiveBeaconIds').mockReturnValue([beacon.identifier]);
+        jest.spyOn(OwnBeaconStore.instance, 'getBeaconById').mockReturnValue(beacon);
+        const component = getComponent();
+        expect(component.find('MemberAvatar').length).toBeTruthy();
+        expect(component.find('OwnBeaconStatus').props()).toEqual({
+            beacon, displayStatus: BeaconDisplayStatus.Active,
+            className: 'mx_DialogOwnBeaconStatus_status',
+        });
+    });
+
     it('updates markers on changes to beacons', () => {
         const room = setupRoom([defaultEvent]);
         const beacon = room.currentState.beacons.get(getBeaconInfoIdentifier(defaultEvent));

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

@@ -5,24 +5,13 @@ exports[`<OwnBeaconStatus /> renders without a beacon instance 1`] = `
   displayStatus="Loading"
 >
   <BeaconStatus
-    className="mx_MBeaconBody_chin"
     displayLiveTimeRemaining={true}
     displayStatus="Loading"
     label="Live location enabled"
-    withIcon={true}
   >
     <div
-      className="mx_BeaconStatus mx_BeaconStatus_Loading mx_MBeaconBody_chin"
+      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>
       <div
         className="mx_BeaconStatus_description"
       >