Simple static location sharing (#7135)

Adds maplibre as a dependency, and behind a labs flag, lets users send and receive [MSC3488](https://github.com/matrix-org/matrix-doc/blob/matthew/location/proposals/3488-location.md) style location shares - with backwards compatibility with old school `m.location` `msgtype` location shares too.

For this to work, you have to define a valid maptile server and API in your config.json's `map_style_url`.

package.json

@@ -57,6 +57,7 @@
     "@babel/runtime": "^7.12.5",
     "@sentry/browser": "^6.11.0",
     "@sentry/tracing": "^6.11.0",
+    "@types/geojson": "^7946.0.8",
     "await-lock": "^2.1.0",
     "blurhash": "^1.1.3",
     "browser-encrypt-attachment": "^0.3.0",
@@ -83,6 +84,7 @@
     "katex": "^0.12.0",
     "linkifyjs": "^2.1.9",
     "lodash": "^4.17.20",
+    "maplibre-gl": "^1.15.2",
     "matrix-js-sdk": "github:matrix-org/matrix-js-sdk#develop",
     "matrix-widget-api": "^0.1.0-beta.18",
     "minimist": "^1.2.5",

res/css/_common.scss

@@ -1,7 +1,8 @@
 /*
 Copyright 2015, 2016 OpenMarket Ltd
 Copyright 2017 Vector Creations Ltd
-Copyright 2017 New Vector Ltd
+Copyright 2017 - 2019 New Vector Ltd
+Copyright 2019 - 2021 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.
@@ -19,6 +20,7 @@ limitations under the License.
 @import "./_font-sizes.scss";
 @import "./_font-weights.scss";
 @import "./_animations.scss";
+@import url("maplibre-gl/dist/maplibre-gl.css");
 
 $hover-transition: 0.08s cubic-bezier(.46, .03, .52, .96); // quadratic
 

res/css/_components.scss

@@ -173,6 +173,7 @@
 @import "./views/groups/_GroupPublicityToggle.scss";
 @import "./views/groups/_GroupRoomList.scss";
 @import "./views/groups/_GroupUserSettings.scss";
+@import "./views/location/_LocationPicker.scss";
 @import "./views/messages/_CallEvent.scss";
 @import "./views/messages/_CreateEvent.scss";
 @import "./views/messages/_DateSeparator.scss";
@@ -182,6 +183,7 @@
 @import "./views/messages/_MImageBody.scss";
 @import "./views/messages/_MImageReplyBody.scss";
 @import "./views/messages/_MJitsiWidgetEvent.scss";
+@import "./views/messages/_MLocationBody.scss";
 @import "./views/messages/_MNoticeBody.scss";
 @import "./views/messages/_MPollBody.scss";
 @import "./views/messages/_MStickerBody.scss";

res/css/views/location/_LocationPicker.scss

@@ -0,0 +1,44 @@
+/*
+Copyright 2021 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_LocationPicker {
+    // placeholder sizing to be replaced once there's a proper design
+    width: 450px;
+    height: 500px;
+
+    border-radius: 4px;
+
+    display: flex;
+    flex-direction: column;
+}
+
+#mx_LocationPicker_map {
+    height: 324px;
+    border-radius: 8px 8px 0px 0px;
+}
+
+.mx_LocationPicker_footer {
+    margin: 24px;
+
+    .mx_Dropdown_menu {
+        max-height: 140px;
+    }
+}
+
+.mx_LocationPicker_error {
+    color: red;
+    margin: auto;
+}

res/css/views/messages/_MLocationBody.scss

@@ -0,0 +1,22 @@
+/*
+Copyright 2021 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_MLocationBody_map {
+    width: 450px;
+    height: 300px;
+
+    border-radius: $timeline-image-border-radius;
+}

res/css/views/rooms/_MessageComposer.scss

@@ -256,6 +256,10 @@ limitations under the License.
     mask-image: url('$(res)/img/element-icons/room/composer/emoji.svg');
 }
 
+.mx_MessageComposer_location::before {
+    mask-image: url('$(res)/img/element-icons/room/composer/location.svg');
+}
+
 .mx_MessageComposer_stickers::before {
     mask-image: url('$(res)/img/element-icons/room/composer/sticker.svg');
 }

src/components/views/location/LocationPicker.tsx

@@ -0,0 +1,200 @@
+/*
+Copyright 2021 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 maplibregl from 'maplibre-gl';
+
+import SdkConfig from '../../../SdkConfig';
+import Field from "../elements/Field";
+import DialogButtons from "../elements/DialogButtons";
+import Dropdown from "../elements/Dropdown";
+import LocationShareType from "./LocationShareType";
+
+import { _t } from '../../../languageHandler';
+import { replaceableComponent } from "../../../utils/replaceableComponent";
+import { logger } from "matrix-js-sdk/src/logger";
+
+interface IDropdownProps {
+    value: LocationShareType;
+    label: string;
+    width?: number;
+    onChange(type: LocationShareType): void;
+}
+
+const LocationShareTypeDropdown = ({
+    value,
+    label,
+    width,
+    onChange,
+}: IDropdownProps) => {
+    const options = [
+        // <div key={LocationShareType.Custom}>{ _t("Share custom location") }</div>,
+        <div key={LocationShareType.OnceOff}>{ _t("Share my current location as a once off") }</div>,
+        // <div key={LocationShareType.OneMin}>{ _t("Share my current location for one minute") }</div>,
+        // <div key={LocationShareType.FiveMins}>{ _t("Share my current location for five minutes") }</div>,
+        // <div key={LocationShareType.ThirtyMins}>{ _t("Share my current location for thirty minutes") }</div>,
+        // <div key={LocationShareType.OneHour}>{ _t("Share my current location for one hour") }</div>,
+        // <div key={LocationShareType.ThreeHours}>{ _t("Share my current location for three hours") }</div>,
+        // <div key={LocationShareType.SixHours}>{ _t("Share my current location for six hours") }</div>,
+        // <div key={LocationShareType.OneDay}>{ _t("Share my current location for one day") }</div>,
+        // <div key={LocationShareType.Forever}>{ _t("Share my current location until I disable it") }</div>,
+    ];
+
+    return <Dropdown
+        id="mx_LocationShareTypeDropdown"
+        className="mx_LocationShareTypeDropdown"
+        onOptionChange={(key: string)=>{ onChange(LocationShareType[LocationShareType[parseInt(key)]]); }}
+        menuWidth={width}
+        label={label}
+        value={value.toString()}
+    >
+        { options }
+    </Dropdown>;
+};
+
+interface IProps {
+    onChoose(uri: string, ts: number, type: LocationShareType, description: string): boolean;
+    onFinished();
+}
+
+interface IState {
+    description: string;
+    type: LocationShareType;
+    position?: GeolocationPosition;
+    manual: boolean;
+    error: Error;
+}
+
+@replaceableComponent("views.location.LocationPicker")
+class LocationPicker extends React.Component<IProps, IState> {
+    private map: maplibregl.Map;
+    private geolocate: maplibregl.GeolocateControl;
+
+    constructor(props) {
+        super(props);
+
+        this.state = {
+            description: _t("My location"),
+            type: LocationShareType.OnceOff,
+            position: undefined,
+            manual: false,
+            error: undefined,
+        };
+    }
+
+    componentDidMount() {
+        const config = SdkConfig.get();
+        this.map = new maplibregl.Map({
+            container: 'mx_LocationPicker_map',
+            style: config.map_style_url,
+            center: [0, 0],
+            zoom: 1,
+        });
+
+        // Add geolocate control to the map.
+        this.geolocate = new maplibregl.GeolocateControl({
+            positionOptions: {
+                enableHighAccuracy: true,
+            },
+            trackUserLocation: true,
+        });
+        this.map.addControl(this.geolocate);
+
+        this.map.on('error', (e)=>{
+            logger.error("Failed to load map: check map_style_url in config.json has a valid URL and API key", e.error);
+            this.setState({ error: e.error });
+        });
+
+        this.map.on('load', ()=>{
+            this.geolocate.trigger();
+        });
+
+        this.geolocate.on('geolocate', this.onGeolocate);
+    }
+
+    componentWillUnmount() {
+        this.geolocate.off('geolocate', this.onGeolocate);
+    }
+
+    private onGeolocate = (position) => {
+        this.setState({ position });
+    };
+
+    private onDescriptionChange = (ev: React.ChangeEvent<HTMLInputElement>) => {
+        this.setState({ description: ev.target.value });
+    };
+
+    private getGeoUri = (position) => {
+        return (`geo:${ position.coords.latitude },` +
+                position.coords.longitude +
+                ( position.coords.altitude != null ?
+                    `,${ position.coords.altitude }` : '' ) +
+                `;u=${ position.coords.accuracy }`);
+    };
+
+    private onOk = () => {
+        this.props.onChoose(
+            this.state.position ? this.getGeoUri(this.state.position) : undefined,
+            this.state.position ? this.state.position.timestamp : undefined,
+            this.state.type,
+            this.state.description,
+        );
+        this.props.onFinished();
+    };
+
+    private onTypeChange= (type: LocationShareType) => {
+        this.setState({ type });
+    };
+
+    render() {
+        const error = this.state.error ?
+            <div className="mx_LocationPicker_error">
+                { _t("Failed to load map") }
+            </div> : null;
+
+        return (
+            <div className="mx_LocationPicker">
+                <div id="mx_LocationPicker_map" />
+                { error }
+                <div className="mx_LocationPicker_footer">
+                    <form onSubmit={this.onOk}>
+                        <LocationShareTypeDropdown
+                            value={this.state.type}
+                            label={_t("Type of location share")}
+                            onChange={this.onTypeChange}
+                            width={400}
+                        />
+
+                        <Field
+                            label={_t('Description')}
+                            onChange={this.onDescriptionChange}
+                            value={this.state.description}
+                            width={400}
+                            className="mx_LocationPicker_description"
+                        />
+
+                        <DialogButtons primaryButton={_t('Share')}
+                            onPrimaryButtonClick={this.onOk}
+                            onCancel={this.props.onFinished}
+                            disabled={!this.state.position} />
+                    </form>
+                </div>
+            </div>
+        );
+    }
+}
+
+export default LocationPicker;

src/components/views/location/LocationShareType.tsx

@@ -0,0 +1,30 @@
+/*
+Copyright 2021 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.
+*/
+
+enum LocationShareType {
+    Custom = -1,
+    OnceOff = 0,
+    OneMine = 60,
+    FiveMins = 5 * 60,
+    ThirtyMins = 30 * 60,
+    OneHour = 60 * 60,
+    ThreeHours = 3 * 60 * 60,
+    SixHours = 6 * 60 * 60,
+    OneDay = 24 * 60 * 60,
+    Forever = Number.MAX_SAFE_INTEGER,
+}
+
+export default LocationShareType;