Display general marker on non-self location shares (#7574)

res/css/views/messages/_MLocationBody.scss

@@ -40,4 +40,16 @@ limitations under the License.
         bottom: -3px;
         left: 12px;
     }
+
+    .mx_MLocationBody_markerContents {
+        background-color: $location-marker-color;
+        margin: 4px;
+        width: 24px;
+        height: 24px;
+        padding-top: 8px;
+        mask-repeat: no-repeat;
+        mask-size: contain;
+        mask-position: center;
+        mask-image: url('$(res)/img/element-icons/location.svg');
+    }
 }

res/img/element-icons/location.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M12 1.99999C8.13 1.99999 5 5.2152 5 9.19054C5 13.4741 9.42 19.3806 11.24 21.6302C11.64 22.1233 12.37 22.1233 12.77 21.6302C14.58 19.3806 19 13.4741 19 9.19054C19 5.2152 15.87 1.99999 12 1.99999ZM12 11.7586C10.62 11.7586 9.5 10.6081 9.5 9.19054C9.5 7.77298 10.62 6.62249 12 6.62249C13.38 6.62249 14.5 7.77298 14.5 9.19054C14.5 10.6081 13.38 11.7586 12 11.7586Z" fill="#737D8C"/>
+</svg>

res/themes/legacy-light/css/_legacy-light.scss

@@ -36,6 +36,7 @@ $accent-alt: #238cf5;
 $selection-fg-color: $primary-bg-color;
 
 $focus-brightness: 105%;
+$location-marker-color: #ffffff;
 
 $other-user-pill-bg-color: rgba(0, 0, 0, 0.1);
 

res/themes/light/css/_light.scss

@@ -283,6 +283,7 @@ $pinned-color: $tertiary-content;
 $avatar-initial-color: $background;
 $primary-hairline-color: transparent;
 $focus-brightness: 105%;
+$location-marker-color: #ffffff;
 // ********************
 
 // blur amounts for left left panel (only for element theme)

src/components/views/messages/MLocationBody.tsx

@@ -17,8 +17,13 @@ limitations under the License.
 import React from 'react';
 import maplibregl from 'maplibre-gl';
 import { logger } from "matrix-js-sdk/src/logger";
-import { LOCATION_EVENT_TYPE } from 'matrix-js-sdk/src/@types/location';
 import { MatrixEvent } from 'matrix-js-sdk/src/models/event';
+import {
+    ASSET_NODE_TYPE,
+    ASSET_TYPE_SELF,
+    ILocationContent,
+    LOCATION_EVENT_TYPE,
+} from 'matrix-js-sdk/src/@types/location';
 
 import SdkConfig from '../../../SdkConfig';
 import { replaceableComponent } from "../../../utils/replaceableComponent";
@@ -101,6 +106,12 @@ export default class MLocationBody extends React.Component<IBodyProps, IState> {
     }
 }
 
+export function isSelfLocation(locationContent: ILocationContent): boolean {
+    const asset = ASSET_NODE_TYPE.findIn(locationContent) as { type: string };
+    const assetType = asset?.type ?? ASSET_TYPE_SELF;
+    return assetType == ASSET_TYPE_SELF;
+}
+
 interface ILocationBodyContentProps {
     mxEvent: MatrixEvent;
     bodyId: string;
@@ -121,6 +132,17 @@ export function LocationBodyContent(props: ILocationBodyContentProps):
         className="mx_MLocationBody_map"
     />;
 
+    const markerContents = (
+        isSelfLocation(props.mxEvent.getContent())
+            ? <MemberAvatar
+                member={props.mxEvent.sender}
+                width={27}
+                height={27}
+                viewUserOnClick={false}
+            />
+            : <div className="mx_MLocationBody_markerContents" />
+    );
+
     return <div className="mx_MLocationBody">
         {
             props.error
@@ -142,12 +164,7 @@ export function LocationBodyContent(props: ILocationBodyContentProps):
         }
         <div className="mx_MLocationBody_marker" id={props.markerId}>
             <div className="mx_MLocationBody_markerBorder">
-                <MemberAvatar
+                { markerContents }
-                    member={props.mxEvent.sender}
-                    width={27}
-                    height={27}
-                    viewUserOnClick={false}
-                />
             </div>
             <img
                 className="mx_MLocationBody_pointer"

test/components/views/messages/MLocationBody-test.tsx

@@ -15,11 +15,21 @@ limitations under the License.
 */
 
 import { makeLocationContent } from "matrix-js-sdk/src/content-helpers";
-import { LOCATION_EVENT_TYPE } from "matrix-js-sdk/src/@types/location";
+import {
+    ASSET_NODE_TYPE,
+    ILocationContent,
+    LOCATION_EVENT_TYPE,
+    TIMESTAMP_NODE_TYPE,
+} from "matrix-js-sdk/src/@types/location";
+import { TEXT_NODE_TYPE } from "matrix-js-sdk/src/@types/extensible_events";
 import { MatrixEvent } from "matrix-js-sdk/src/models/event";
 
 import sdk from "../../../skinned-sdk";
-import { createMapSiteLink, parseGeoUri } from "../../../../src/components/views/messages/MLocationBody";
+import {
+    createMapSiteLink,
+    isSelfLocation,
+    parseGeoUri,
+} from "../../../../src/components/views/messages/MLocationBody";
 
 sdk.getComponent("views.messages.MLocationBody");
 
@@ -189,6 +199,46 @@ describe("MLocationBody", () => {
             );
         });
     });
+
+    describe("isSelfLocation", () => {
+        it("Returns true for a full m.asset event", () => {
+            const content = makeLocationContent("", "", 0);
+            expect(isSelfLocation(content)).toBe(true);
+        });
+
+        it("Returns true for a missing m.asset", () => {
+            const content = {
+                body: "",
+                msgtype: "m.location",
+                geo_uri: "",
+                [LOCATION_EVENT_TYPE.name]: { uri: "" },
+                [TEXT_NODE_TYPE.name]: "",
+                [TIMESTAMP_NODE_TYPE.name]: 0,
+                // Note: no m.asset!
+            };
+            expect(isSelfLocation(content as ILocationContent)).toBe(true);
+        });
+
+        it("Returns true for a missing m.asset type", () => {
+            const content = {
+                body: "",
+                msgtype: "m.location",
+                geo_uri: "",
+                [LOCATION_EVENT_TYPE.name]: { uri: "" },
+                [TEXT_NODE_TYPE.name]: "",
+                [TIMESTAMP_NODE_TYPE.name]: 0,
+                [ASSET_NODE_TYPE.name]: {
+                    // Note: no type!
+                },
+            };
+            expect(isSelfLocation(content as ILocationContent)).toBe(true);
+        });
+
+        it("Returns false for an unknown asset type", () => {
+            const content = makeLocationContent("", "", 0, "", "org.example.unknown");
+            expect(isSelfLocation(content)).toBe(false);
+        });
+    });
 });
 
 function oldLocationEvent(geoUri: string): MatrixEvent {