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:
Kerry 2022-03-11 09:52:57 +01:00 committed by GitHub
parent 9082e07ff4
commit d38a1fa201
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
15 changed files with 485 additions and 68 deletions

View file

@ -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;