Display the user's avatar when they shared their location

res/css/views/messages/_MLocationBody.scss

@@ -14,9 +14,30 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-.mx_MLocationBody_map {
-    width: 450px;
-    height: 300px;
+.mx_MLocationBody {
+    .mx_MLocationBody_map {
+        width: 450px;
+        height: 300px;
 
-    border-radius: $timeline-image-border-radius;
+        border-radius: $timeline-image-border-radius;
+    }
+
+    .mx_MLocationBody_markerBorder {
+        width: 31px;
+        height: 31px;
+        border-radius: 50%;
+        background-color: $accent;
+        filter: drop-shadow(0px 3px 5px rgba(0, 0, 0, 0.2));
+
+        .mx_BaseAvatar {
+            margin-top: 2px;
+            margin-left: 2px;
+        }
+    }
+
+    .mx_MLocationBody_pointer {
+        position: absolute;
+        bottom: -3px;
+        left: 12px;
+    }
 }

src/components/views/context_menus/MessageContextMenu.tsx

@@ -15,11 +15,12 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React from 'react';
+import React, { ReactElement } from 'react';
 import { EventStatus, MatrixEvent } from 'matrix-js-sdk/src/models/event';
 import { EventType, RelationType } from "matrix-js-sdk/src/@types/event";
 import { Relations } from 'matrix-js-sdk/src/models/relations';
 import { POLL_START_EVENT_TYPE } from "matrix-js-sdk/src/@types/polls";
+import { LOCATION_EVENT_TYPE } from 'matrix-js-sdk/src/@types/location';
 
 import { MatrixClientPeg } from '../../../MatrixClientPeg';
 import dis from '../../../dispatcher/dispatcher';
@@ -82,6 +83,8 @@ interface IProps extends IPosition {
 interface IState {
     canRedact: boolean;
     canPin: boolean;
+    canForward: boolean;
+    canShare: boolean;
 }
 
 @replaceableComponent("views.context_menus.MessageContextMenu")
@@ -92,6 +95,8 @@ export default class MessageContextMenu extends React.Component<IProps, IState>
     state = {
         canRedact: false,
         canPin: false,
+        canForward: false,
+        canShare: false,
     };
 
     componentDidMount() {
@@ -121,7 +126,11 @@ export default class MessageContextMenu extends React.Component<IProps, IState>
         // HACK: Intentionally say we can't pin if the user doesn't want to use the functionality
         if (!SettingsStore.getValue("feature_pinning")) canPin = false;
 
-        this.setState({ canRedact, canPin });
+        const isLoc = isLocationEvent(this.props.mxEvent);
+        const canForward = !isLoc;
+        const canShare = !isLoc;
+
+        this.setState({ canRedact, canPin, canForward, canShare });
     };
 
     private isPinned(): boolean {
@@ -313,13 +322,15 @@ export default class MessageContextMenu extends React.Component<IProps, IState>
         }
 
         if (isContentActionable(mxEvent)) {
-            forwardButton = (
-                <IconizedContextMenuOption
-                    iconClassName="mx_MessageContextMenu_iconForward"
-                    label={_t("Forward")}
-                    onClick={this.onForwardClick}
-                />
-            );
+            if (this.state.canForward) {
+                forwardButton = (
+                    <IconizedContextMenuOption
+                        iconClassName="mx_MessageContextMenu_iconForward"
+                        label={_t("Forward")}
+                        onClick={this.onForwardClick}
+                    />
+                );
+            }
 
             if (this.state.canPin) {
                 pinButton = (
@@ -352,26 +363,29 @@ export default class MessageContextMenu extends React.Component<IProps, IState>
             }
         }
 
-        let permalink;
-        if (this.props.permalinkCreator) {
-            permalink = this.props.permalinkCreator.forEvent(this.props.mxEvent.getId());
-        }
-        const permalinkButton = (
-            <IconizedContextMenuOption
-                iconClassName="mx_MessageContextMenu_iconPermalink"
-                onClick={this.onPermalinkClick}
-                label={_t('Share')}
-                element="a"
-                {
-                    // XXX: Typescript signature for AccessibleButton doesn't work properly for non-inputs like `a`
-                    ...{
-                        href: permalink,
-                        target: "_blank",
-                        rel: "noreferrer noopener",
+        let permalink: string | null = null;
+        let permalinkButton: ReactElement | null = null;
+        if (this.state.canShare) {
+            if (this.props.permalinkCreator) {
+                permalink = this.props.permalinkCreator.forEvent(this.props.mxEvent.getId());
+            }
+            permalinkButton = (
+                <IconizedContextMenuOption
+                    iconClassName="mx_MessageContextMenu_iconPermalink"
+                    onClick={this.onPermalinkClick}
+                    label={_t('Share')}
+                    element="a"
+                    {
+                        // XXX: Typescript signature for AccessibleButton doesn't work properly for non-inputs like `a`
+                        ...{
+                            href: permalink,
+                            target: "_blank",
+                            rel: "noreferrer noopener",
+                        }
                     }
-                }
-            />
-        );
+                />
+            );
+        }
 
         if (this.canEndPoll(mxEvent)) {
             endPollButton = (
@@ -486,3 +500,14 @@ export default class MessageContextMenu extends React.Component<IProps, IState>
         );
     }
 }
+
+function isLocationEvent(event: MatrixEvent): boolean {
+    const eventType = event.getType();
+    return (
+        LOCATION_EVENT_TYPE.matches(eventType) ||
+        (
+            eventType === EventType.RoomMessage &&
+            LOCATION_EVENT_TYPE.matches(event.getContent().msgtype)
+        )
+    );
+}

src/components/views/messages/MLocationBody.tsx

@@ -23,6 +23,7 @@ import SdkConfig from '../../../SdkConfig';
 import { replaceableComponent } from "../../../utils/replaceableComponent";
 import { IBodyProps } from "./IBodyProps";
 import { _t } from '../../../languageHandler';
+import MemberAvatar from '../avatars/MemberAvatar';
 
 interface IState {
     error: Error;
@@ -32,7 +33,6 @@ interface IState {
 export default class MLocationBody extends React.Component<IBodyProps, IState> {
     private map: maplibregl.Map;
     private coords: GeolocationCoordinates;
-    private description: string;
 
     constructor(props: IBodyProps) {
         super(props);
@@ -49,8 +49,6 @@ export default class MLocationBody extends React.Component<IBodyProps, IState> {
         this.state = {
             error: undefined,
         };
-
-        this.description = loc?.description ?? content['body'];
     }
 
     componentDidMount() {
@@ -65,13 +63,12 @@ export default class MLocationBody extends React.Component<IBodyProps, IState> {
             zoom: 13,
         });
 
-        new maplibregl.Popup({
-            closeButton: false,
-            closeOnClick: false,
-            closeOnMove: false,
+        new maplibregl.Marker({
+            element: document.getElementById(this.getMarkerId()),
+            anchor: 'bottom',
+            offset: [0, -1],
         })
             .setLngLat(coordinates)
-            .setHTML(this.description)
             .addTo(this.map);
 
         this.map.on('error', (e)=>{
@@ -88,6 +85,10 @@ export default class MLocationBody extends React.Component<IBodyProps, IState> {
         return `mx_MLocationBody_${this.props.mxEvent.getId()}`;
     };
 
+    private getMarkerId = () => {
+        return `mx_MLocationBody_marker_${this.props.mxEvent.getId()}`;
+    };
+
     render() {
         const error = this.state.error ?
             <div className="mx_EventTile_tileError mx_EventTile_body">
@@ -97,6 +98,22 @@ export default class MLocationBody extends React.Component<IBodyProps, IState> {
         return <div className="mx_MLocationBody">
             <div id={this.getBodyId()} className="mx_MLocationBody_map" />
             { error }
+            <div className="mx_MLocationBody_marker" id={this.getMarkerId()}>
+                <div className="mx_MLocationBody_markerBorder">
+                    <MemberAvatar
+                        member={this.props.mxEvent.sender}
+                        width={27}
+                        height={27}
+                        viewUserOnClick={false}
+                    />
+                </div>
+                <img
+                    className="mx_MLocationBody_pointer"
+                    src={require("../../../../res/img/location/pointer.svg")}
+                    width="9"
+                    height="5"
+                />
+            </div>
         </div>;
     }
 }