Live location sharing - update live location tiles (PSF-1027)

res/css/_components.scss

@@ -19,6 +19,7 @@
 @import "./components/views/location/_LiveDurationDropdown.scss";
 @import "./components/views/location/_LocationShareMenu.scss";
 @import "./components/views/location/_MapError.scss";
+@import "./components/views/location/_MapFallback.scss";
 @import "./components/views/location/_Marker.scss";
 @import "./components/views/location/_ShareDialogButtons.scss";
 @import "./components/views/location/_ShareType.scss";

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

@@ -59,23 +59,6 @@ limitations under the License.
     border-radius: 8px;
 }
 
-.mx_BeaconViewDialog_mapFallback {
-    box-sizing: border-box;
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
-
-    background: url('$(res)/img/location/map.svg');
-    background-size: cover;
-}
-
-.mx_BeaconViewDialog_mapFallbackIcon {
-    width: 65px;
-    margin-bottom: $spacing-16;
-    color: $quaternary-content;
-}
-
 .mx_BeaconViewDialog_mapFallbackMessage {
     color: $secondary-content;
     margin-bottom: $spacing-16;

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

@@ -23,7 +23,7 @@ limitations under the License.
     border-radius: 50%;
 
     background-color: $location-live-color;
-    border-color: $location-live-secondary-color;
+    border-color: $location-live-color;
     padding: 2px;
     // colors icon
     color: white;

res/css/components/views/location/_MapFallback.scss

@@ -0,0 +1,45 @@
+/*
+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_MapFallback {
+    box-sizing: border-box;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    position: relative;
+    z-index: 0;
+
+    background-color: $system;
+}
+
+.mx_MapFallback_bg {
+    position: absolute;
+    top: 0;
+    left: 0;
+    min-height: 100%;
+    min-width: 100%;
+    color: $quinary-content;
+    z-index: -1;
+
+    pointer-events: none;
+}
+
+.mx_MapFallback_icon {
+    width: 65px;
+    margin-bottom: $spacing-16;
+    color: $quaternary-content;
+}

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

@@ -26,30 +26,17 @@ limitations under the License.
 .mx_MBeaconBody_map {
     height: 100%;
     width: 100%;
-    z-index: 0; // keeps the entire map under the message action bar
+    z-index: 0; // keeps the entire map under the message action bars
 
-    &:not(.mx_MBeaconBody_mapFallback) {
-        cursor: pointer;
-    }
+    cursor: pointer;
 }
 
 .mx_MBeaconBody_mapFallback {
-    box-sizing: border-box;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-
     // pushes spinner/icon up
     // to appear more centered with the footer
     padding-bottom: 50px;
 
-    background: url('$(res)/img/location/map.svg');
-    background-size: cover;
-}
-
-.mx_MBeaconBody_mapFallbackIcon {
-    width: 65px;
-    color: $quaternary-content;
+    cursor: default;
 }
 
 .mx_MBeaconBody_chin {

src/components/views/beacon/BeaconViewDialog.tsx

@@ -32,12 +32,12 @@ import ZoomButtons from '../location/ZoomButtons';
 import BeaconMarker from './BeaconMarker';
 import { Bounds, getBeaconBounds } from '../../../utils/beacon/bounds';
 import { getGeoUri } from '../../../utils/beacon';
-import { Icon as LocationIcon } from '../../../../res/img/element-icons/location.svg';
 import { _t } from '../../../languageHandler';
 import AccessibleButton from '../elements/AccessibleButton';
 import DialogSidebar from './DialogSidebar';
 import DialogOwnBeaconStatus from './DialogOwnBeaconStatus';
 import BeaconStatusTooltip from './BeaconStatusTooltip';
+import MapFallback from '../location/MapFallback';
 
 interface IProps extends IDialogProps {
     roomId: Room['roomId'];
@@ -110,11 +110,10 @@ const BeaconViewDialog: React.FC<IProps> = ({
                             </>
                     }
                 </Map> :
-                    <div
+                    <MapFallback
                         data-test-id='beacon-view-dialog-map-fallback'
-                        className='mx_BeaconViewDialog_map mx_BeaconViewDialog_mapFallback'
+                        className='mx_BeaconViewDialog_map'
                     >
-                        <LocationIcon className='mx_BeaconViewDialog_mapFallbackIcon' />
                         <span className='mx_BeaconViewDialog_mapFallbackMessage'>{ _t('No live locations') }</span>
                         <AccessibleButton
                             kind='primary'
@@ -123,7 +122,7 @@ const BeaconViewDialog: React.FC<IProps> = ({
                         >
                             { _t('Close') }
                         </AccessibleButton>
-                    </div>
+                    </MapFallback>
                 }
                 { isSidebarOpen ?
                     <DialogSidebar beacons={liveBeacons} requestClose={() => setSidebarOpen(false)} /> :

src/components/views/location/MapFallback.tsx

@@ -0,0 +1,39 @@
+/*
+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 classNames from 'classnames';
+
+import { Icon as LocationMarkerIcon } from '../../../../res/img/element-icons/location.svg';
+import { Icon as MapFallbackImage } from '../../../../res/img/location/map.svg';
+import Spinner from '../elements/Spinner';
+
+interface Props extends React.HTMLAttributes<HTMLDivElement> {
+    className?: string;
+    isLoading?: boolean;
+    children?: React.ReactNode | React.ReactNodeArray;
+}
+
+const MapFallback: React.FC<Props> = ({ className, isLoading, children, ...rest }) => {
+    return <div className={classNames('mx_MapFallback', className)} {...rest}>
+        <MapFallbackImage className='mx_MapFallback_bg' />
+        { /* <div className='mx_MapFallback_bg'/> */ }
+        { isLoading ? <Spinner h={32} w={32} /> : <LocationMarkerIcon className='mx_MapFallback_icon' /> }
+        { children }
+    </div>;
+};
+
+export default MapFallback;

src/components/views/messages/MBeaconBody.tsx

@@ -19,7 +19,6 @@ import { Beacon, BeaconEvent, MatrixEvent } from 'matrix-js-sdk/src/matrix';
 import { BeaconLocationState } from 'matrix-js-sdk/src/content-helpers';
 import { randomString } from 'matrix-js-sdk/src/randomstring';
 
-import { Icon as LocationMarkerIcon } from '../../../../res/img/element-icons/location.svg';
 import MatrixClientContext from '../../../contexts/MatrixClientContext';
 import { useEventEmitterState } from '../../../hooks/useEventEmitter';
 import { _t } from '../../../languageHandler';
@@ -28,8 +27,8 @@ import { useBeacon } from '../../../utils/beacon';
 import { isSelfLocation } from '../../../utils/location';
 import { BeaconDisplayStatus, getBeaconDisplayStatus } from '../beacon/displayStatus';
 import BeaconStatus from '../beacon/BeaconStatus';
-import Spinner from '../elements/Spinner';
 import Map from '../location/Map';
+import MapFallback from '../location/MapFallback';
 import SmartMarker from '../location/SmartMarker';
 import OwnBeaconStatus from '../beacon/OwnBeaconStatus';
 import BeaconViewDialog from '../beacon/BeaconViewDialog';
@@ -134,12 +133,10 @@ const MBeaconBody: React.FC<IBodyProps> = React.forwardRef(({ mxEvent }, ref) =>
                             />
                     }
                 </Map>
-                : <div className='mx_MBeaconBody_map mx_MBeaconBody_mapFallback'>
-                    { displayStatus === BeaconDisplayStatus.Loading ?
-                        <Spinner h={32} w={32} /> :
-                        <LocationMarkerIcon className='mx_MBeaconBody_mapFallbackIcon' />
-                    }
-                </div>
+                : <MapFallback
+                    isLoading={displayStatus === BeaconDisplayStatus.Loading}
+                    className='mx_MBeaconBody_map mx_MBeaconBody_mapFallback'
+                />
             }
             { isOwnBeacon ?
                 <OwnBeaconStatus