Live location sharing - smart location marker (#8232)

* 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>

* remove skinned-sdk

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

* lint

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

* better types for LocationBodyContent

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

src/components/views/location/LocationViewDialog.tsx

@@ -22,7 +22,7 @@ import BaseDialog from "../dialogs/BaseDialog";
 import { IDialogProps } from "../dialogs/IDialogProps";
 import { LocationBodyContent } from '../messages/MLocationBody';
 import { tileServerFromWellKnown } from '../../../utils/WellKnownUtils';
-import { parseGeoUri, locationEventGeoUri, createMap } from '../../../utils/location';
+import { parseGeoUri, locationEventGeoUri, createMapWithCoords } from '../../../utils/location';
 
 interface IProps extends IDialogProps {
     matrixClient: MatrixClient;
@@ -54,7 +54,7 @@ export default class LocationViewDialog extends React.Component<IProps, IState>
 
         this.props.matrixClient.on(ClientEvent.ClientWellKnown, this.updateStyleUrl);
 
-        this.map = createMap(
+        this.map = createMapWithCoords(
             this.coords,
             true,
             this.getBodyId(),

src/components/views/location/Marker.tsx

@@ -33,9 +33,10 @@ interface Props {
 /**
  * Generic location marker
  */
-const Marker: React.FC<Props> = ({ id, roomMember, useMemberColor }) => {
+const Marker = React.forwardRef<HTMLDivElement, Props>(({ id, roomMember, useMemberColor }, ref) => {
     const memberColorClass = useMemberColor && roomMember ? getUserNameColorClass(roomMember.userId) : '';
     return <div
+        ref={ref}
         id={id}
         className={classNames("mx_Marker", memberColorClass, {
             "mx_Marker_defaultColor": !memberColorClass,
@@ -53,6 +54,6 @@ const Marker: React.FC<Props> = ({ id, roomMember, useMemberColor }) => {
             }
         </div>
     </div>;
-};
+});
 
 export default Marker;

src/components/views/location/SmartMarker.tsx

@@ -0,0 +1,83 @@
+/*
+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, { useCallback, useEffect, useState } from 'react';
+import maplibregl from 'maplibre-gl';
+import { RoomMember } from 'matrix-js-sdk/src/matrix';
+
+import { createMarker, parseGeoUri } from '../../../utils/location';
+import Marker from './Marker';
+
+const useMapMarker = (
+    map: maplibregl.Map,
+    geoUri: string,
+): { marker?: maplibregl.Marker, onElementRef: (el: HTMLDivElement) => void } => {
+    const [marker, setMarker] = useState<maplibregl.Marker>();
+
+    const onElementRef = useCallback((element: HTMLDivElement) => {
+        if (marker || !element) {
+            return;
+        }
+        const coords = parseGeoUri(geoUri);
+        const newMarker = createMarker(coords, element);
+        newMarker.addTo(map);
+        setMarker(newMarker);
+    }, [marker, geoUri, map]);
+
+    useEffect(() => {
+        if (marker) {
+            const coords = parseGeoUri(geoUri);
+            marker.setLngLat({ lon: coords.longitude, lat: coords.latitude });
+        }
+    }, [marker, geoUri]);
+
+    useEffect(() => () => {
+        if (marker) {
+            marker.remove();
+        }
+    }, [marker]);
+
+    return {
+        marker,
+        onElementRef,
+    };
+};
+
+interface SmartMarkerProps {
+    map: maplibregl.Map;
+    geoUri: string;
+    id?: string;
+    // renders MemberAvatar when provided
+    roomMember?: RoomMember;
+    // use member text color as background
+    useMemberColor?: boolean;
+}
+
+/**
+ * Generic location marker
+ */
+const SmartMarker: React.FC<SmartMarkerProps> = ({ id, map, geoUri, roomMember, useMemberColor }) => {
+    const { onElementRef } = useMapMarker(map, geoUri);
+
+    return <Marker
+        ref={onElementRef}
+        id={id}
+        roomMember={roomMember}
+        useMemberColor={useMemberColor}
+    />;
+};
+
+export default SmartMarker;

src/components/views/messages/MLocationBody.tsx

@@ -30,7 +30,7 @@ import Modal from '../../../Modal';
 import {
     parseGeoUri,
     locationEventGeoUri,
-    createMap,
+    createMapWithCoords,
     getLocationShareErrorMessage,
     LocationShareError,
 } from '../../../utils/location';
@@ -75,7 +75,7 @@ export default class MLocationBody extends React.Component<IBodyProps, IState> {
 
         this.context.on(ClientEvent.ClientWellKnown, this.updateStyleUrl);
 
-        this.map = createMap(
+        this.map = createMapWithCoords(
             this.coords,
             false,
             this.bodyId,
@@ -138,18 +138,6 @@ export function isSelfLocation(locationContent: ILocationContent): boolean {
     return assetType == LocationAssetType.Self;
 }
 
-interface ILocationBodyContentProps {
-    mxEvent: MatrixEvent;
-    bodyId: string;
-    markerId: string;
-    error: Error;
-    tooltip?: string;
-    onClick?: (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
-    zoomButtons?: boolean;
-    onZoomIn?: () => void;
-    onZoomOut?: () => void;
-}
-
 export const LocationBodyFallbackContent: React.FC<{ event: MatrixEvent, error: Error }> = ({ error, event }) => {
     const errorType = error?.message as LocationShareError;
     const message = `${_t('Unable to load map')}: ${getLocationShareErrorMessage(errorType)}`;
@@ -167,8 +155,18 @@ export const LocationBodyFallbackContent: React.FC<{ event: MatrixEvent, error:
     </div>;
 };
 
-export function LocationBodyContent(props: ILocationBodyContentProps):
-        React.ReactElement<HTMLDivElement> {
+interface LocationBodyContentProps {
+    mxEvent: MatrixEvent;
+    bodyId: string;
+    markerId: string;
+    error: Error;
+    tooltip?: string;
+    onClick?: (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
+    zoomButtons?: boolean;
+    onZoomIn?: () => void;
+    onZoomOut?: () => void;
+}
+export const LocationBodyContent: React.FC<LocationBodyContentProps> = (props) => {
     const mapDiv = <div
         id={props.bodyId}
         onClick={props.onClick}
@@ -200,7 +198,7 @@ export function LocationBodyContent(props: ILocationBodyContentProps):
                 : null
         }
     </div>;
-}
+};
 
 interface IZoomButtonsProps {
     onZoomIn: () => void;