Live location sharing: own live beacon status on maximised view (#8374)

* add floating own live sharing eacon status to maximised view

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

* add tests for own beacon status

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

* stylelint

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

* remove huge snapshot

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

* remove unused emits from test

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

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,7 +25,9 @@ import AccessibleButton from '../elements/AccessibleButton';
 
 interface Props {
     displayStatus: BeaconDisplayStatus;
+    className?: string;
     beacon?: Beacon;
+    withIcon?: boolean;
 }
 
 /**
@@ -33,7 +35,7 @@ interface Props {
  * 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