Apply prettier formatting
This commit is contained in:
Michael Weimann
parent
1cac306093
commit
526645c791
1576 changed files with 65385 additions and 62478 deletions
|
|
@ -14,25 +14,25 @@ See the License for the specific language governing permissions and
|
|||
limitations under the License.
|
||||
*/
|
||||
|
||||
import React, { SyntheticEvent } from 'react';
|
||||
import maplibregl, { MapMouseEvent } from 'maplibre-gl';
|
||||
import React, { SyntheticEvent } from "react";
|
||||
import maplibregl, { MapMouseEvent } from "maplibre-gl";
|
||||
import { logger } from "matrix-js-sdk/src/logger";
|
||||
import { RoomMember } from 'matrix-js-sdk/src/models/room-member';
|
||||
import { ClientEvent, IClientWellKnown } from 'matrix-js-sdk/src/client';
|
||||
import { RoomMember } from "matrix-js-sdk/src/models/room-member";
|
||||
import { ClientEvent, IClientWellKnown } from "matrix-js-sdk/src/client";
|
||||
|
||||
import { _t } from '../../../languageHandler';
|
||||
import MatrixClientContext from '../../../contexts/MatrixClientContext';
|
||||
import Modal from '../../../Modal';
|
||||
import SdkConfig from '../../../SdkConfig';
|
||||
import { tileServerFromWellKnown } from '../../../utils/WellKnownUtils';
|
||||
import { GenericPosition, genericPositionFromGeolocation, getGeoUri } from '../../../utils/beacon';
|
||||
import { LocationShareError, findMapStyleUrl } from '../../../utils/location';
|
||||
import ErrorDialog from '../dialogs/ErrorDialog';
|
||||
import AccessibleButton from '../elements/AccessibleButton';
|
||||
import { MapError } from './MapError';
|
||||
import LiveDurationDropdown, { DEFAULT_DURATION_MS } from './LiveDurationDropdown';
|
||||
import { LocationShareType, ShareLocationFn } from './shareLocation';
|
||||
import Marker from './Marker';
|
||||
import { _t } from "../../../languageHandler";
|
||||
import MatrixClientContext from "../../../contexts/MatrixClientContext";
|
||||
import Modal from "../../../Modal";
|
||||
import SdkConfig from "../../../SdkConfig";
|
||||
import { tileServerFromWellKnown } from "../../../utils/WellKnownUtils";
|
||||
import { GenericPosition, genericPositionFromGeolocation, getGeoUri } from "../../../utils/beacon";
|
||||
import { LocationShareError, findMapStyleUrl } from "../../../utils/location";
|
||||
import ErrorDialog from "../dialogs/ErrorDialog";
|
||||
import AccessibleButton from "../elements/AccessibleButton";
|
||||
import { MapError } from "./MapError";
|
||||
import LiveDurationDropdown, { DEFAULT_DURATION_MS } from "./LiveDurationDropdown";
|
||||
import { LocationShareType, ShareLocationFn } from "./shareLocation";
|
||||
import Marker from "./Marker";
|
||||
|
||||
export interface ILocationPickerProps {
|
||||
sender: RoomMember;
|
||||
|
|
@ -76,7 +76,7 @@ class LocationPicker extends React.Component<ILocationPickerProps, IState> {
|
|||
|
||||
try {
|
||||
this.map = new maplibregl.Map({
|
||||
container: 'mx_LocationPicker_map',
|
||||
container: "mx_LocationPicker_map",
|
||||
style: findMapStyleUrl(),
|
||||
center: [0, 0],
|
||||
zoom: 1,
|
||||
|
|
@ -92,54 +92,56 @@ class LocationPicker extends React.Component<ILocationPickerProps, IState> {
|
|||
|
||||
this.map.addControl(this.geolocate);
|
||||
|
||||
this.map.on('error', (e) => {
|
||||
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",
|
||||
"Failed to load map: check map_style_url in config.json " + "has a valid URL and API key",
|
||||
e.error,
|
||||
);
|
||||
this.setState({ error: LocationShareError.MapStyleUrlNotReachable });
|
||||
});
|
||||
|
||||
this.map.on('load', () => {
|
||||
this.map.on("load", () => {
|
||||
this.geolocate.trigger();
|
||||
});
|
||||
|
||||
this.geolocate.on('error', this.onGeolocateError);
|
||||
this.geolocate.on("error", this.onGeolocateError);
|
||||
|
||||
if (isSharingOwnLocation(this.props.shareType)) {
|
||||
this.geolocate.on('geolocate', this.onGeolocate);
|
||||
this.geolocate.on("geolocate", this.onGeolocate);
|
||||
}
|
||||
|
||||
if (this.props.shareType === LocationShareType.Pin) {
|
||||
const navigationControl = new maplibregl.NavigationControl({
|
||||
showCompass: false, showZoom: true,
|
||||
showCompass: false,
|
||||
showZoom: true,
|
||||
});
|
||||
this.map.addControl(navigationControl, 'bottom-right');
|
||||
this.map.on('click', this.onClick);
|
||||
this.map.addControl(navigationControl, "bottom-right");
|
||||
this.map.on("click", this.onClick);
|
||||
}
|
||||
} catch (e) {
|
||||
logger.error("Failed to render map", e);
|
||||
const errorType = e?.message === LocationShareError.MapStyleUrlNotConfigured ?
|
||||
LocationShareError.MapStyleUrlNotConfigured :
|
||||
LocationShareError.Default;
|
||||
const errorType =
|
||||
e?.message === LocationShareError.MapStyleUrlNotConfigured
|
||||
? LocationShareError.MapStyleUrlNotConfigured
|
||||
: LocationShareError.Default;
|
||||
this.setState({ error: errorType });
|
||||
}
|
||||
}
|
||||
|
||||
componentWillUnmount() {
|
||||
this.geolocate?.off('error', this.onGeolocateError);
|
||||
this.geolocate?.off('geolocate', this.onGeolocate);
|
||||
this.map?.off('click', this.onClick);
|
||||
this.geolocate?.off("error", this.onGeolocateError);
|
||||
this.geolocate?.off("geolocate", this.onGeolocate);
|
||||
this.map?.off("click", this.onClick);
|
||||
this.context.off(ClientEvent.ClientWellKnown, this.updateStyleUrl);
|
||||
}
|
||||
|
||||
private addMarkerToMap = () => {
|
||||
this.marker = new maplibregl.Marker({
|
||||
element: document.getElementById(this.getMarkerId()),
|
||||
anchor: 'bottom',
|
||||
anchor: "bottom",
|
||||
offset: [0, -1],
|
||||
}).setLngLat(new maplibregl.LngLat(0, 0))
|
||||
})
|
||||
.setLngLat(new maplibregl.LngLat(0, 0))
|
||||
.addTo(this.map);
|
||||
};
|
||||
|
||||
|
|
@ -155,12 +157,7 @@ class LocationPicker extends React.Component<ILocationPickerProps, IState> {
|
|||
this.addMarkerToMap();
|
||||
}
|
||||
this.setState({ position: genericPositionFromGeolocation(position) });
|
||||
this.marker?.setLngLat(
|
||||
new maplibregl.LngLat(
|
||||
position.coords.longitude,
|
||||
position.coords.latitude,
|
||||
),
|
||||
);
|
||||
this.marker?.setLngLat(new maplibregl.LngLat(position.coords.longitude, position.coords.latitude));
|
||||
};
|
||||
|
||||
private onClick = (event: MapMouseEvent) => {
|
||||
|
|
@ -202,65 +199,66 @@ class LocationPicker extends React.Component<ILocationPickerProps, IState> {
|
|||
const { timeout, position } = this.state;
|
||||
|
||||
this.props.onChoose(
|
||||
position ? { uri: getGeoUri(position), timestamp: position.timestamp, timeout } : {
|
||||
timeout,
|
||||
});
|
||||
position
|
||||
? { uri: getGeoUri(position), timestamp: position.timestamp, timeout }
|
||||
: {
|
||||
timeout,
|
||||
},
|
||||
);
|
||||
this.props.onFinished();
|
||||
};
|
||||
|
||||
render() {
|
||||
if (this.state.error) {
|
||||
return <div className="mx_LocationPicker mx_LocationPicker_hasError">
|
||||
<MapError
|
||||
error={this.state.error}
|
||||
onFinished={this.props.onFinished} />
|
||||
</div>;
|
||||
return (
|
||||
<div className="mx_LocationPicker mx_LocationPicker_hasError">
|
||||
<MapError error={this.state.error} onFinished={this.props.onFinished} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
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") }
|
||||
</span>
|
||||
</div>
|
||||
}
|
||||
{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")}</span>
|
||||
</div>
|
||||
)}
|
||||
<div className="mx_LocationPicker_footer">
|
||||
<form onSubmit={this.onOk}>
|
||||
{ this.props.shareType === LocationShareType.Live &&
|
||||
<LiveDurationDropdown
|
||||
onChange={this.onTimeoutChange}
|
||||
timeout={this.state.timeout}
|
||||
/>
|
||||
}
|
||||
{this.props.shareType === LocationShareType.Live && (
|
||||
<LiveDurationDropdown onChange={this.onTimeoutChange} timeout={this.state.timeout} />
|
||||
)}
|
||||
<AccessibleButton
|
||||
data-test-id="location-picker-submit-button"
|
||||
type="submit"
|
||||
element='button'
|
||||
kind='primary'
|
||||
className='mx_LocationPicker_submitButton'
|
||||
element="button"
|
||||
kind="primary"
|
||||
className="mx_LocationPicker_submitButton"
|
||||
disabled={!this.state.position}
|
||||
onClick={this.onOk}>
|
||||
{ _t('Share location') }
|
||||
onClick={this.onOk}
|
||||
>
|
||||
{_t("Share location")}
|
||||
</AccessibleButton>
|
||||
</form>
|
||||
</div>
|
||||
<div id={this.getMarkerId()}>
|
||||
{ /*
|
||||
{/*
|
||||
maplibregl hijacks the div above to style the marker
|
||||
it must be in the dom when the map is initialised
|
||||
and keep a consistent class
|
||||
we want to hide the marker until it is set in the case of pin drop
|
||||
so hide the internal visible elements
|
||||
*/ }
|
||||
*/}
|
||||
|
||||
{ !!this.marker && <Marker
|
||||
roomMember={isSharingOwnLocation(this.props.shareType) ? this.props.sender : undefined}
|
||||
useMemberColor={this.props.shareType === LocationShareType.Live}
|
||||
/>
|
||||
}
|
||||
{!!this.marker && (
|
||||
<Marker
|
||||
roomMember={isSharingOwnLocation(this.props.shareType) ? this.props.sender : undefined}
|
||||
useMemberColor={this.props.shareType === LocationShareType.Live}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
|
@ -272,18 +270,17 @@ export default LocationPicker;
|
|||
function positionFailureMessage(code: number): string {
|
||||
const brand = SdkConfig.get().brand;
|
||||
switch (code) {
|
||||
case 1: return _t(
|
||||
"%(brand)s was denied permission to fetch your location. " +
|
||||
"Please allow location access in your browser settings.", { brand },
|
||||
);
|
||||
case 2: return _t(
|
||||
"Failed to fetch your location. Please try again later.",
|
||||
);
|
||||
case 3: return _t(
|
||||
"Timed out trying to fetch your location. Please try again later.",
|
||||
);
|
||||
case 4: return _t(
|
||||
"Unknown error fetching location. Please try again later.",
|
||||
);
|
||||
case 1:
|
||||
return _t(
|
||||
"%(brand)s was denied permission to fetch your location. " +
|
||||
"Please allow location access in your browser settings.",
|
||||
{ brand },
|
||||
);
|
||||
case 2:
|
||||
return _t("Failed to fetch your location. Please try again later.");
|
||||
case 3:
|
||||
return _t("Timed out trying to fetch your location. Please try again later.");
|
||||
case 4:
|
||||
return _t("Unknown error fetching location. Please try again later.");
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue