Live location sharing - consolidate maps (#8236)
* 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> * working map in location body Signed-off-by: Kerry Archibald <kerrya@element.io> * test Map Signed-off-by: Kerry Archibald <kerrya@element.io> * remove skinned sdk Signed-off-by: Kerry Archibald <kerrya@element.io> * update snaps with new mocks Signed-off-by: Kerry Archibald <kerrya@element.io> * use new ZoomButtons in MLocationBody Signed-off-by: Kerry Archibald <kerrya@element.io> * make LocationViewDialog map interactive Signed-off-by: Kerry Archibald <kerrya@element.io> * test MLocationBody Signed-off-by: Kerry Archibald <kerrya@element.io> * test LocationViewDialog Signed-off-by: Kerry Archibald <kerrya@element.io> * add copyrights, shrink snapshot Signed-off-by: Kerry Archibald <kerrya@element.io> * update comment Signed-off-by: Kerry Archibald <kerrya@element.io> * lint Signed-off-by: Kerry Archibald <kerrya@element.io> * lint Signed-off-by: Kerry Archibald <kerrya@element.io>
This commit is contained in:
Kerry
GitHub
parent
944e11d7d6
commit
9ba55d1d14
16 changed files with 890 additions and 235 deletions
|
|
@ -225,6 +225,7 @@ class LocationPicker extends React.Component<ILocationPickerProps, IState> {
|
|||
return (
|
||||
<div className="mx_LocationPicker">
|
||||
<div id="mx_LocationPicker_map" />
|
||||
|
||||
{ this.props.shareType === LocationShareType.Pin && <div className="mx_LocationPicker_pinText">
|
||||
<span>
|
||||
{ this.state.position ? _t("Click to move the pin") : _t("Click to drop a pin") }
|
||||
|
|
|
|||
|
|
@ -16,13 +16,14 @@ limitations under the License.
|
|||
|
||||
import React from 'react';
|
||||
import { MatrixEvent } from 'matrix-js-sdk/src/models/event';
|
||||
import { ClientEvent, IClientWellKnown, MatrixClient } from 'matrix-js-sdk/src/client';
|
||||
import { MatrixClient } from 'matrix-js-sdk/src/client';
|
||||
|
||||
import BaseDialog from "../dialogs/BaseDialog";
|
||||
import { IDialogProps } from "../dialogs/IDialogProps";
|
||||
import { LocationBodyContent } from '../messages/MLocationBody';
|
||||
import { tileServerFromWellKnown } from '../../../utils/WellKnownUtils';
|
||||
import { parseGeoUri, locationEventGeoUri, createMapWithCoords } from '../../../utils/location';
|
||||
import { locationEventGeoUri, isSelfLocation } from '../../../utils/location';
|
||||
import Map from './Map';
|
||||
import SmartMarker from './SmartMarker';
|
||||
import ZoomButtons from './ZoomButtons';
|
||||
|
||||
interface IProps extends IDialogProps {
|
||||
matrixClient: MatrixClient;
|
||||
|
|
@ -34,78 +35,54 @@ interface IState {
|
|||
}
|
||||
|
||||
export default class LocationViewDialog extends React.Component<IProps, IState> {
|
||||
private coords: GeolocationCoordinates;
|
||||
private map?: maplibregl.Map;
|
||||
|
||||
constructor(props: IProps) {
|
||||
super(props);
|
||||
|
||||
this.coords = parseGeoUri(locationEventGeoUri(this.props.mxEvent));
|
||||
this.map = null;
|
||||
this.state = {
|
||||
error: undefined,
|
||||
};
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
if (this.state.error) {
|
||||
return;
|
||||
}
|
||||
|
||||
this.props.matrixClient.on(ClientEvent.ClientWellKnown, this.updateStyleUrl);
|
||||
|
||||
this.map = createMapWithCoords(
|
||||
this.coords,
|
||||
true,
|
||||
this.getBodyId(),
|
||||
this.getMarkerId(),
|
||||
(e: Error) => this.setState({ error: e }),
|
||||
);
|
||||
}
|
||||
|
||||
componentWillUnmount() {
|
||||
this.props.matrixClient.off(ClientEvent.ClientWellKnown, this.updateStyleUrl);
|
||||
}
|
||||
|
||||
private updateStyleUrl = (clientWellKnown: IClientWellKnown) => {
|
||||
const style = tileServerFromWellKnown(clientWellKnown)?.["map_style_url"];
|
||||
if (style) {
|
||||
this.map?.setStyle(style);
|
||||
}
|
||||
};
|
||||
|
||||
private getBodyId = () => {
|
||||
return `mx_LocationViewDialog_${this.props.mxEvent.getId()}`;
|
||||
};
|
||||
|
||||
private getMarkerId = () => {
|
||||
return `mx_MLocationViewDialog_marker_${this.props.mxEvent.getId()}`;
|
||||
};
|
||||
|
||||
private onZoomIn = () => {
|
||||
this.map?.zoomIn();
|
||||
};
|
||||
|
||||
private onZoomOut = () => {
|
||||
this.map?.zoomOut();
|
||||
private onError = (error) => {
|
||||
this.setState({ error });
|
||||
};
|
||||
|
||||
render() {
|
||||
const { mxEvent } = this.props;
|
||||
|
||||
// only pass member to marker when should render avatar marker
|
||||
const markerRoomMember = isSelfLocation(mxEvent.getContent()) ? mxEvent.sender : undefined;
|
||||
const geoUri = locationEventGeoUri(mxEvent);
|
||||
return (
|
||||
<BaseDialog
|
||||
className='mx_LocationViewDialog'
|
||||
onFinished={this.props.onFinished}
|
||||
fixedWidth={false}
|
||||
>
|
||||
<LocationBodyContent
|
||||
mxEvent={this.props.mxEvent}
|
||||
bodyId={this.getBodyId()}
|
||||
markerId={this.getMarkerId()}
|
||||
error={this.state.error}
|
||||
zoomButtons={true}
|
||||
onZoomIn={this.onZoomIn}
|
||||
onZoomOut={this.onZoomOut}
|
||||
/>
|
||||
<Map
|
||||
id={this.getBodyId()}
|
||||
centerGeoUri={geoUri}
|
||||
onError={this.onError}
|
||||
interactive
|
||||
className="mx_LocationViewDialog_map"
|
||||
>
|
||||
{
|
||||
({ map }) =>
|
||||
<>
|
||||
<SmartMarker
|
||||
map={map}
|
||||
id={`${this.getBodyId()}-marker`}
|
||||
geoUri={geoUri}
|
||||
roomMember={markerRoomMember}
|
||||
/>
|
||||
<ZoomButtons map={map} />
|
||||
</>
|
||||
}
|
||||
</Map>
|
||||
</BaseDialog>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
101
src/components/views/location/Map.tsx
Normal file
101
src/components/views/location/Map.tsx
Normal file
|
|
@ -0,0 +1,101 @@
|
|||
/*
|
||||
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, { ReactNode, useContext, useEffect } from 'react';
|
||||
import classNames from 'classnames';
|
||||
import { ClientEvent, IClientWellKnown } from 'matrix-js-sdk/src/matrix';
|
||||
import { logger } from 'matrix-js-sdk/src/logger';
|
||||
|
||||
import MatrixClientContext from '../../../contexts/MatrixClientContext';
|
||||
import { useEventEmitterState } from '../../../hooks/useEventEmitter';
|
||||
import { parseGeoUri } from '../../../utils/location';
|
||||
import { tileServerFromWellKnown } from '../../../utils/WellKnownUtils';
|
||||
import { useMap } from '../../../utils/location/useMap';
|
||||
|
||||
const useMapWithStyle = ({ id, centerGeoUri, onError, interactive }) => {
|
||||
const bodyId = `mx_Map_${id}`;
|
||||
|
||||
// style config
|
||||
const context = useContext(MatrixClientContext);
|
||||
const mapStyleUrl = useEventEmitterState(
|
||||
context,
|
||||
ClientEvent.ClientWellKnown,
|
||||
(clientWellKnown: IClientWellKnown) => tileServerFromWellKnown(clientWellKnown)?.["map_style_url"],
|
||||
);
|
||||
|
||||
const map = useMap({ interactive, bodyId, onError });
|
||||
|
||||
useEffect(() => {
|
||||
if (mapStyleUrl && map) {
|
||||
map.setStyle(mapStyleUrl);
|
||||
}
|
||||
}, [mapStyleUrl, map]);
|
||||
|
||||
useEffect(() => {
|
||||
if (map && centerGeoUri) {
|
||||
try {
|
||||
const coords = parseGeoUri(centerGeoUri);
|
||||
map.setCenter({ lon: coords.longitude, lat: coords.latitude });
|
||||
} catch (error) {
|
||||
logger.error('Could not set map center', centerGeoUri);
|
||||
}
|
||||
}
|
||||
}, [map, centerGeoUri]);
|
||||
|
||||
return {
|
||||
map,
|
||||
bodyId,
|
||||
};
|
||||
};
|
||||
|
||||
interface MapProps {
|
||||
id: string;
|
||||
interactive?: boolean;
|
||||
centerGeoUri?: string;
|
||||
className?: string;
|
||||
onClick?: () => void;
|
||||
onError?: (error: Error) => void;
|
||||
children?: (renderProps: {
|
||||
map: maplibregl.Map;
|
||||
}) => ReactNode;
|
||||
}
|
||||
|
||||
const Map: React.FC<MapProps> = ({
|
||||
centerGeoUri, className, id, onError, onClick, children, interactive,
|
||||
}) => {
|
||||
const { map, bodyId } = useMapWithStyle({ centerGeoUri, onError, id, interactive });
|
||||
|
||||
const onMapClick = (
|
||||
event: React.MouseEvent<HTMLDivElement, MouseEvent>,
|
||||
) => {
|
||||
// Eat click events when clicking the attribution button
|
||||
const target = event.target as Element;
|
||||
if (target.classList.contains("maplibregl-ctrl-attrib-button")) {
|
||||
return;
|
||||
}
|
||||
|
||||
onClick && onClick();
|
||||
};
|
||||
|
||||
return <div className={classNames('mx_Map', className)}
|
||||
id={bodyId}
|
||||
onClick={onMapClick}
|
||||
>
|
||||
{ !!children && !!map && children({ map }) }
|
||||
</div>;
|
||||
};
|
||||
|
||||
export default Map;
|
||||
|
|
@ -15,28 +15,23 @@ limitations under the License.
|
|||
*/
|
||||
|
||||
import React from 'react';
|
||||
import maplibregl from 'maplibre-gl';
|
||||
import { MatrixEvent } from 'matrix-js-sdk/src/models/event';
|
||||
import { ClientEvent, IClientWellKnown } from 'matrix-js-sdk/src/client';
|
||||
|
||||
import { IBodyProps } from "./IBodyProps";
|
||||
import { _t } from '../../../languageHandler';
|
||||
import Modal from '../../../Modal';
|
||||
import {
|
||||
parseGeoUri,
|
||||
locationEventGeoUri,
|
||||
createMapWithCoords,
|
||||
getLocationShareErrorMessage,
|
||||
LocationShareError,
|
||||
isSelfLocation,
|
||||
} from '../../../utils/location';
|
||||
import LocationViewDialog from '../location/LocationViewDialog';
|
||||
import MatrixClientContext from '../../../contexts/MatrixClientContext';
|
||||
import TooltipTarget from '../elements/TooltipTarget';
|
||||
import { Alignment } from '../elements/Tooltip';
|
||||
import AccessibleButton from '../elements/AccessibleButton';
|
||||
import { tileServerFromWellKnown } from '../../../utils/WellKnownUtils';
|
||||
import MatrixClientContext from '../../../contexts/MatrixClientContext';
|
||||
import Marker from '../location/Marker';
|
||||
import LocationViewDialog from '../location/LocationViewDialog';
|
||||
import Map from '../location/Map';
|
||||
import SmartMarker from '../location/SmartMarker';
|
||||
import { IBodyProps } from "./IBodyProps";
|
||||
|
||||
interface IState {
|
||||
error: Error;
|
||||
|
|
@ -45,61 +40,23 @@ interface IState {
|
|||
export default class MLocationBody extends React.Component<IBodyProps, IState> {
|
||||
public static contextType = MatrixClientContext;
|
||||
public context!: React.ContextType<typeof MatrixClientContext>;
|
||||
private coords: GeolocationCoordinates;
|
||||
private bodyId: string;
|
||||
private markerId: string;
|
||||
private map?: maplibregl.Map = null;
|
||||
private mapId: string;
|
||||
|
||||
constructor(props: IBodyProps) {
|
||||
super(props);
|
||||
|
||||
const randomString = Math.random().toString(16).slice(2, 10);
|
||||
// multiple instances of same map might be in document
|
||||
// eg thread and main timeline, reply
|
||||
const idSuffix = `${props.mxEvent.getId()}_${randomString}`;
|
||||
this.bodyId = `mx_MLocationBody_${idSuffix}`;
|
||||
this.markerId = `mx_MLocationBody_marker_${idSuffix}`;
|
||||
this.coords = parseGeoUri(locationEventGeoUri(this.props.mxEvent));
|
||||
this.mapId = `mx_MLocationBody_${idSuffix}`;
|
||||
|
||||
this.state = {
|
||||
error: undefined,
|
||||
};
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
if (this.state.error) {
|
||||
return;
|
||||
}
|
||||
|
||||
this.context.on(ClientEvent.ClientWellKnown, this.updateStyleUrl);
|
||||
|
||||
this.map = createMapWithCoords(
|
||||
this.coords,
|
||||
false,
|
||||
this.bodyId,
|
||||
this.markerId,
|
||||
(e: Error) => this.setState({ error: e }),
|
||||
);
|
||||
}
|
||||
|
||||
componentWillUnmount() {
|
||||
this.context.off(ClientEvent.ClientWellKnown, this.updateStyleUrl);
|
||||
}
|
||||
|
||||
private updateStyleUrl = (clientWellKnown: IClientWellKnown) => {
|
||||
const style = tileServerFromWellKnown(clientWellKnown)?.["map_style_url"];
|
||||
if (style) {
|
||||
this.map?.setStyle(style);
|
||||
}
|
||||
};
|
||||
|
||||
private onClick = (
|
||||
event: React.MouseEvent<HTMLDivElement, MouseEvent>,
|
||||
) => {
|
||||
// Don't open map if we clicked the attribution button
|
||||
const target = event.target as Element;
|
||||
if (target.classList.contains("maplibregl-ctrl-attrib-button")) {
|
||||
return;
|
||||
}
|
||||
|
||||
private onClick = () => {
|
||||
Modal.createTrackedDialog(
|
||||
'Location View',
|
||||
'',
|
||||
|
|
@ -114,14 +71,17 @@ export default class MLocationBody extends React.Component<IBodyProps, IState> {
|
|||
);
|
||||
};
|
||||
|
||||
private onError = (error) => {
|
||||
this.setState({ error });
|
||||
};
|
||||
|
||||
render(): React.ReactElement<HTMLDivElement> {
|
||||
return this.state.error ?
|
||||
<LocationBodyFallbackContent error={this.state.error} event={this.props.mxEvent} /> :
|
||||
<LocationBodyContent
|
||||
mxEvent={this.props.mxEvent}
|
||||
bodyId={this.bodyId}
|
||||
markerId={this.markerId}
|
||||
error={this.state.error}
|
||||
mapId={this.mapId}
|
||||
onError={this.onError}
|
||||
tooltip={_t("Expand map")}
|
||||
onClick={this.onClick}
|
||||
/>;
|
||||
|
|
@ -147,68 +107,52 @@ export const LocationBodyFallbackContent: React.FC<{ event: MatrixEvent, error:
|
|||
|
||||
interface LocationBodyContentProps {
|
||||
mxEvent: MatrixEvent;
|
||||
bodyId: string;
|
||||
markerId: string;
|
||||
error: Error;
|
||||
mapId: string;
|
||||
tooltip?: string;
|
||||
onClick?: (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
|
||||
zoomButtons?: boolean;
|
||||
onZoomIn?: () => void;
|
||||
onZoomOut?: () => void;
|
||||
onError: (error: Error) => void;
|
||||
onClick?: () => void;
|
||||
}
|
||||
export const LocationBodyContent: React.FC<LocationBodyContentProps> = (props) => {
|
||||
const mapDiv = <div
|
||||
id={props.bodyId}
|
||||
onClick={props.onClick}
|
||||
className="mx_MLocationBody_map"
|
||||
/>;
|
||||
|
||||
export const LocationBodyContent: React.FC<LocationBodyContentProps> = ({
|
||||
mxEvent,
|
||||
mapId,
|
||||
tooltip,
|
||||
onError,
|
||||
onClick,
|
||||
}) => {
|
||||
// only pass member to marker when should render avatar marker
|
||||
const markerRoomMember = isSelfLocation(props.mxEvent.getContent()) ? props.mxEvent.sender : undefined;
|
||||
const markerRoomMember = isSelfLocation(mxEvent.getContent()) ? mxEvent.sender : undefined;
|
||||
const geoUri = locationEventGeoUri(mxEvent);
|
||||
|
||||
const mapElement = (<Map
|
||||
id={mapId}
|
||||
centerGeoUri={geoUri}
|
||||
onClick={onClick}
|
||||
onError={onError}
|
||||
className="mx_MLocationBody_map"
|
||||
>
|
||||
{
|
||||
({ map }) =>
|
||||
<SmartMarker
|
||||
map={map}
|
||||
id={`${mapId}-marker`}
|
||||
geoUri={geoUri}
|
||||
roomMember={markerRoomMember}
|
||||
/>
|
||||
}
|
||||
</Map>);
|
||||
|
||||
return <div className="mx_MLocationBody">
|
||||
{
|
||||
props.tooltip
|
||||
tooltip
|
||||
? <TooltipTarget
|
||||
label={props.tooltip}
|
||||
label={tooltip}
|
||||
alignment={Alignment.InnerBottom}
|
||||
maxParentWidth={450}
|
||||
>
|
||||
{ mapDiv }
|
||||
{ mapElement }
|
||||
</TooltipTarget>
|
||||
: mapDiv
|
||||
}
|
||||
<Marker id={props.markerId} roomMember={markerRoomMember} />
|
||||
{
|
||||
props.zoomButtons
|
||||
? <ZoomButtons
|
||||
onZoomIn={props.onZoomIn}
|
||||
onZoomOut={props.onZoomOut}
|
||||
/>
|
||||
: null
|
||||
: mapElement
|
||||
}
|
||||
</div>;
|
||||
};
|
||||
|
||||
interface IZoomButtonsProps {
|
||||
onZoomIn: () => void;
|
||||
onZoomOut: () => void;
|
||||
}
|
||||
|
||||
function ZoomButtons(props: IZoomButtonsProps): React.ReactElement<HTMLDivElement> {
|
||||
return <div className="mx_MLocationBody_zoomButtons">
|
||||
<AccessibleButton
|
||||
onClick={props.onZoomIn}
|
||||
title={_t("Zoom in")}
|
||||
>
|
||||
<div className="mx_MLocationBody_zoomButton mx_MLocationBody_plusButton" />
|
||||
</AccessibleButton>
|
||||
<AccessibleButton
|
||||
onClick={props.onZoomOut}
|
||||
title={_t("Zoom out")}
|
||||
>
|
||||
<div className="mx_MLocationBody_zoomButton mx_MLocationBody_minusButton" />
|
||||
</AccessibleButton>
|
||||
</div>;
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue