Live location share - beacon tooltip in maximised view (#8572) PSF-926

* pass optional tooltip prop down through markers

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

* add beaconstatustooltip, handle overflow on beacon status label

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

* remove debug, fix mouseout

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

* tidy comments

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

src/components/views/beacon/BeaconStatusTooltip.tsx

@@ -0,0 +1,61 @@
+/*
+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 { Beacon } from 'matrix-js-sdk/src/matrix';
+import { LocationAssetType } from 'matrix-js-sdk/src/@types/location';
+
+import MatrixClientContext from '../../../contexts/MatrixClientContext';
+import CopyableText from '../elements/CopyableText';
+import BeaconStatus from './BeaconStatus';
+import { BeaconDisplayStatus } from './displayStatus';
+
+interface Props {
+    beacon: Beacon;
+}
+
+const useBeaconName = (beacon: Beacon): string => {
+    const matrixClient = useContext(MatrixClientContext);
+
+    if (beacon.beaconInfo.assetType !== LocationAssetType.Self) {
+        return beacon.beaconInfo.description;
+    }
+    const room = matrixClient.getRoom(beacon.roomId);
+    const member = room?.getMember(beacon.beaconInfoOwner);
+
+    return member?.rawDisplayName || beacon.beaconInfoOwner;
+};
+
+const BeaconStatusTooltip: React.FC<Props> = ({ beacon }) => {
+    const label = useBeaconName(beacon);
+
+    return <div className='mx_BeaconStatusTooltip'>
+        <BeaconStatus
+            beacon={beacon}
+            label={label}
+            displayStatus={BeaconDisplayStatus.Active}
+            displayLiveTimeRemaining
+            className='mx_BeaconStatusTooltip_inner'
+        >
+            <CopyableText
+                border={false}
+                getTextToCopy={() => beacon.latestLocationState?.uri}
+            />
+        </BeaconStatus>
+    </div>;
+};
+
+export default BeaconStatusTooltip;