fallback to event text in location body when map unavailable (#7982)
* center icon better Signed-off-by: Kerry Archibald <kerrya@element.io> * remove debug Signed-off-by: Kerry Archibald <kerrya@element.io> * retrigger all builds Signed-off-by: Kerry Archibald <kerrya@element.io> * set assetType on share event Signed-off-by: Kerry Archibald <kerrya@element.io> * use pin marker on map for pin drop share Signed-off-by: Kerry Archibald <kerrya@element.io> * lint Signed-off-by: Kerry Archibald <kerrya@element.io> * test events Signed-off-by: Kerry Archibald <kerrya@element.io> * pin drop helper text Signed-off-by: Kerry Archibald <kerrya@element.io> * use generic location type Signed-off-by: Kerry Archibald <kerrya@element.io> * add navigationcontrol when in pin mode Signed-off-by: Kerry Archibald <kerrya@element.io> * allow pin drop without location permissions Signed-off-by: Kerry Archibald <kerrya@element.io> * remove geolocate control when pin dropping without geo perms Signed-off-by: Kerry Archibald <kerrya@element.io> * test locationpicker Signed-off-by: Kerry Archibald <kerrya@element.io> * test marker type, tidy Signed-off-by: Kerry Archibald <kerrya@element.io> * move findMapStyleUrl Signed-off-by: Kerry Archibald <kerrya@element.io> * fallback to event content when cant render map Signed-off-by: Kerry Archibald <kerrya@element.io> * update mocks in location picker, show same messages as timeline Signed-off-by: Kerry Archibald <kerrya@element.io> * style error message in location share menu Signed-off-by: Kerry Archibald <kerrya@element.io> * i18n Signed-off-by: Kerry Archibald <kerrya@element.io> * forgotten copyright Signed-off-by: Kerry Archibald <kerrya@element.io> * add copyright Signed-off-by: Kerry Archibald <kerrya@element.io> * update style Signed-off-by: Kerry Archibald <kerrya@element.io> * icon bigger Signed-off-by: Kerry Archibald <kerrya@element.io>
This commit is contained in:
parent
9082e07ff4
commit
d38a1fa201
15 changed files with 485 additions and 68 deletions
|
@ -26,7 +26,6 @@ import {
|
|||
} from 'matrix-js-sdk/src/@types/location';
|
||||
import { ClientEvent, IClientWellKnown } from 'matrix-js-sdk/src/client';
|
||||
|
||||
import SdkConfig from '../../../SdkConfig';
|
||||
import { replaceableComponent } from "../../../utils/replaceableComponent";
|
||||
import { IBodyProps } from "./IBodyProps";
|
||||
import { _t } from '../../../languageHandler';
|
||||
|
@ -36,8 +35,10 @@ import LocationViewDialog from '../location/LocationViewDialog';
|
|||
import TooltipTarget from '../elements/TooltipTarget';
|
||||
import { Alignment } from '../elements/Tooltip';
|
||||
import AccessibleButton from '../elements/AccessibleButton';
|
||||
import { getTileServerWellKnown, tileServerFromWellKnown } from '../../../utils/WellKnownUtils';
|
||||
import { tileServerFromWellKnown } from '../../../utils/WellKnownUtils';
|
||||
import MatrixClientContext from '../../../contexts/MatrixClientContext';
|
||||
import { findMapStyleUrl } from '../location/findMapStyleUrl';
|
||||
import { getLocationShareErrorMessage, LocationShareError } from '../location/LocationShareErrors';
|
||||
|
||||
interface IState {
|
||||
error: Error;
|
||||
|
@ -117,14 +118,16 @@ export default class MLocationBody extends React.Component<IBodyProps, IState> {
|
|||
};
|
||||
|
||||
render(): React.ReactElement<HTMLDivElement> {
|
||||
return <LocationBodyContent
|
||||
mxEvent={this.props.mxEvent}
|
||||
bodyId={this.bodyId}
|
||||
markerId={this.markerId}
|
||||
error={this.state.error}
|
||||
tooltip={_t("Expand map")}
|
||||
onClick={this.onClick}
|
||||
/>;
|
||||
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}
|
||||
tooltip={_t("Expand map")}
|
||||
onClick={this.onClick}
|
||||
/>;
|
||||
}
|
||||
}
|
||||
|
||||
|
@ -146,6 +149,23 @@ interface ILocationBodyContentProps {
|
|||
onZoomOut?: () => void;
|
||||
}
|
||||
|
||||
export const LocationBodyFallbackContent: React.FC<{ event: MatrixEvent, error: Error }> = ({ error, event }) => {
|
||||
const errorType = error?.message as LocationShareError;
|
||||
const message = `${_t('Unable to load map')}: ${getLocationShareErrorMessage(errorType)}`;
|
||||
|
||||
const locationFallback = isSelfLocation(event.getContent()) ?
|
||||
(_t('Shared their location: ') + event.getContent()?.body) :
|
||||
(_t('Shared a location: ') + event.getContent()?.body);
|
||||
|
||||
return <div className="mx_EventTile_body">
|
||||
<span className={errorType !== LocationShareError.MapStyleUrlNotConfigured ? "mx_EventTile_tileError" : ''}>
|
||||
{ message }
|
||||
</span>
|
||||
<br />
|
||||
{ locationFallback }
|
||||
</div>;
|
||||
};
|
||||
|
||||
export function LocationBodyContent(props: ILocationBodyContentProps):
|
||||
React.ReactElement<HTMLDivElement> {
|
||||
const mapDiv = <div
|
||||
|
@ -166,13 +186,6 @@ export function LocationBodyContent(props: ILocationBodyContentProps):
|
|||
);
|
||||
|
||||
return <div className="mx_MLocationBody">
|
||||
{
|
||||
props.error
|
||||
? <div className="mx_EventTile_tileError mx_EventTile_body">
|
||||
{ _t("Failed to load map") }
|
||||
</div>
|
||||
: null
|
||||
}
|
||||
{
|
||||
props.tooltip
|
||||
? <TooltipTarget
|
||||
|
@ -225,27 +238,6 @@ function ZoomButtons(props: IZoomButtonsProps): React.ReactElement<HTMLDivElemen
|
|||
</div>;
|
||||
}
|
||||
|
||||
/**
|
||||
* Look up what map tile server style URL was provided in the homeserver's
|
||||
* .well-known location, or, failing that, in our local config, or, failing
|
||||
* that, defaults to the same tile server listed by matrix.org.
|
||||
*/
|
||||
export function findMapStyleUrl(): string {
|
||||
const mapStyleUrl = (
|
||||
getTileServerWellKnown()?.map_style_url ??
|
||||
SdkConfig.get().map_style_url
|
||||
);
|
||||
|
||||
if (!mapStyleUrl) {
|
||||
throw new Error(
|
||||
"'map_style_url' missing from homeserver .well-known area, and " +
|
||||
"missing from from config.json.",
|
||||
);
|
||||
}
|
||||
|
||||
return mapStyleUrl;
|
||||
}
|
||||
|
||||
export function createMap(
|
||||
coords: GeolocationCoordinates,
|
||||
interactive: boolean,
|
||||
|
@ -279,7 +271,7 @@ export function createMap(
|
|||
+ "valid URL and API key",
|
||||
e.error,
|
||||
);
|
||||
onError(e.error);
|
||||
onError(new Error(LocationShareError.MapStyleUrlNotReachable));
|
||||
});
|
||||
|
||||
return map;
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue