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/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
-                    member={props.mxEvent.sender}
-                    width={27}
-                    height={27}
-                    viewUserOnClick={false}
-                />
+                { markerContents }
             </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 {