Skip to content
This repository has been archived by the owner on Sep 11, 2024. It is now read-only.

Live location sharing - open location in OpenStreetMap (PSF-1040) #8695

Merged
merged 8 commits into from
May 27, 2022
Merged
Changes from 6 commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions res/css/_components.scss
Original file line number Diff line number Diff line change
@@ -14,6 +14,7 @@
@import "./components/views/beacon/_LiveTimeRemaining.scss";
@import "./components/views/beacon/_OwnBeaconStatus.scss";
@import "./components/views/beacon/_RoomLiveShareWarning.scss";
@import "./components/views/beacon/_ShareLatestLocation.scss";
@import "./components/views/beacon/_StyledLiveBeaconIcon.scss";
@import "./components/views/location/_EnableLiveShare.scss";
@import "./components/views/location/_LiveDurationDropdown.scss";
5 changes: 0 additions & 5 deletions res/css/components/views/beacon/_BeaconStatusTooltip.scss
Original file line number Diff line number Diff line change
@@ -21,11 +21,6 @@ limitations under the License.
height: 38px;
box-sizing: content-box;
padding-top: $spacing-8;

// override copyable text style to make compact
.mx_CopyableText_copyButton {
margin-left: 0 !important;
}
}

.mx_BeaconStatusTooltip_inner {
28 changes: 28 additions & 0 deletions res/css/components/views/beacon/_ShareLatestLocation.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,28 @@
/*
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.
*/

.mx_ShareLatestLocation_icon {
height: 13px;
width: 13px;
color: $text-secondary-color;
}

.mx_ShareLatestLocation_copy {
// override copyable text style to make compact
.mx_CopyableText_copyButton {
margin-left: $spacing-8 !important;
}
}
2 changes: 1 addition & 1 deletion res/img/external-link.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
7 changes: 2 additions & 5 deletions src/components/views/beacon/BeaconListItem.tsx
Original file line number Diff line number Diff line change
@@ -23,10 +23,10 @@ import { useEventEmitterState } from '../../../hooks/useEventEmitter';
import { humanizeTime } from '../../../utils/humanize';
import { _t } from '../../../languageHandler';
import MemberAvatar from '../avatars/MemberAvatar';
import CopyableText from '../elements/CopyableText';
import BeaconStatus from './BeaconStatus';
import { BeaconDisplayStatus } from './displayStatus';
import StyledLiveBeaconIcon from './StyledLiveBeaconIcon';
import ShareLatestLocation from './ShareLatestLocation';

interface Props {
beacon: Beacon;
@@ -69,10 +69,7 @@ const BeaconListItem: React.FC<Props> = ({ beacon }) => {
label={beaconMember?.name || beacon.beaconInfo.description || beacon.beaconInfoOwner}
displayStatus={BeaconDisplayStatus.Active}
>
<CopyableText
border={false}
getTextToCopy={() => latestLocationState?.uri}
/>
<ShareLatestLocation latestLocationState={latestLocationState} />
</BeaconStatus>
<span className='mx_BeaconListItem_lastUpdated'>{ _t("Updated %(humanizedUpdateTime)s", { humanizedUpdateTime }) }</span>
</div>
7 changes: 2 additions & 5 deletions src/components/views/beacon/BeaconStatusTooltip.tsx
Original file line number Diff line number Diff line change
@@ -19,9 +19,9 @@ import { Beacon } from 'matrix-js-sdk/src/matrix';
import { LocationAssetType } from 'matrix-js-sdk/src/@types/location';

import MatrixClientContext from '../../../contexts/MatrixClientContext';
import CopyableText from '../elements/CopyableText';
import BeaconStatus from './BeaconStatus';
import { BeaconDisplayStatus } from './displayStatus';
import ShareLatestLocation from './ShareLatestLocation';

interface Props {
beacon: Beacon;
@@ -50,10 +50,7 @@ const BeaconStatusTooltip: React.FC<Props> = ({ beacon }) => {
displayLiveTimeRemaining
className='mx_BeaconStatusTooltip_inner'
>
<CopyableText
border={false}
getTextToCopy={() => beacon.latestLocationState?.uri}
/>
<ShareLatestLocation latestLocationState={beacon.latestLocationState} />
</BeaconStatus>
</div>;
};
66 changes: 66 additions & 0 deletions src/components/views/beacon/ShareLatestLocation.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,66 @@
/*
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, { useEffect, useState } from 'react';
import { BeaconLocationState } from 'matrix-js-sdk/src/content-helpers';

import { Icon as ExternalLinkIcon } from '../../../../res/img/external-link.svg';
import { _t } from '../../../languageHandler';
import { makeMapSiteLink, parseGeoUri } from '../../../utils/location';
import CopyableText from '../elements/CopyableText';
import TooltipTarget from '../elements/TooltipTarget';

interface Props {
latestLocationState?: BeaconLocationState;
}

const ShareLatestLocation: React.FC<Props> = ({ latestLocationState }) => {
const [coords, setCoords] = useState(null);
useEffect(() => {
if (!latestLocationState) {
return;
}
const coords = parseGeoUri(latestLocationState.uri);
setCoords(coords);
}, [latestLocationState]);

if (!latestLocationState || !coords) {
return null;
}

const latLonString = `${coords.latitude},${coords.longitude}`;
const mapLink = makeMapSiteLink(coords);

return <>
<TooltipTarget label={_t('Open in OpenStreetMap')}>
<a
data-test-id='open-location-in-osm'
href={mapLink}
target='_blank'
rel='noreferrer noopener'
>
<ExternalLinkIcon className='mx_ShareLatestLocation_icon' />
</a>
</TooltipTarget>
<CopyableText
className='mx_ShareLatestLocation_copy'
border={false}
getTextToCopy={() => latLonString}
/>
</>;
};

export default ShareLatestLocation;
4 changes: 2 additions & 2 deletions src/components/views/context_menus/MessageContextMenu.tsx
Original file line number Diff line number Diff line change
@@ -50,7 +50,7 @@ import { ViewRoomPayload } from "../../../dispatcher/payloads/ViewRoomPayload";
import { GetRelationsForEvent, IEventTileOps } from "../rooms/EventTile";
import { OpenForwardDialogPayload } from "../../../dispatcher/payloads/OpenForwardDialogPayload";
import { OpenReportEventDialogPayload } from "../../../dispatcher/payloads/OpenReportEventDialogPayload";
import { createMapSiteLink } from '../../../utils/location';
import { createMapSiteLinkFromEvent } from '../../../utils/location';

interface IProps extends IPosition {
chevronFace: ChevronFace;
@@ -360,7 +360,7 @@ export default class MessageContextMenu extends React.Component<IProps, IState>

let openInMapSiteButton: JSX.Element;
if (this.canOpenInMapSite(mxEvent)) {
const mapSiteLink = createMapSiteLink(mxEvent);
const mapSiteLink = createMapSiteLinkFromEvent(mxEvent);
openInMapSiteButton = (
<IconizedContextMenuOption
iconClassName="mx_MessageContextMenu_iconOpenInMapSite"
7 changes: 4 additions & 3 deletions src/components/views/elements/CopyableText.tsx
Original file line number Diff line number Diff line change
@@ -27,9 +27,10 @@ interface IProps {
children?: React.ReactNode;
getTextToCopy: () => string;
border?: boolean;
className?: string;
}

const CopyableText: React.FC<IProps> = ({ children, getTextToCopy, border=true }) => {
const CopyableText: React.FC<IProps> = ({ children, getTextToCopy, border=true, className }) => {
const [tooltip, setTooltip] = useState<string | undefined>(undefined);

const onCopyClickInternal = async (e: ButtonEvent) => {
@@ -44,11 +45,11 @@ const CopyableText: React.FC<IProps> = ({ children, getTextToCopy, border=true }
}
};

const className = classNames("mx_CopyableText", {
const combinedClassName = classNames("mx_CopyableText", className, {
mx_CopyableText_border: border,
});

return <div className={className}>
return <div className={combinedClassName}>
{ children }
<AccessibleTooltipButton
title={tooltip ?? _t("Copy")}
8 changes: 4 additions & 4 deletions src/utils/location/map.ts
Original file line number Diff line number Diff line change
@@ -65,7 +65,7 @@ export const createMarker = (coords: GeolocationCoordinates, element: HTMLElemen
return marker;
};

const makeLink = (coords: GeolocationCoordinates): string => {
export const makeMapSiteLink = (coords: GeolocationCoordinates): string => {
return (
"https://www.openstreetmap.org/" +
`?mlat=${coords.latitude}` +
@@ -74,18 +74,18 @@ const makeLink = (coords: GeolocationCoordinates): string => {
);
};

export const createMapSiteLink = (event: MatrixEvent): string => {
export const createMapSiteLinkFromEvent = (event: MatrixEvent): string => {
const content: Object = event.getContent();
const mLocation = content[M_LOCATION.name];
if (mLocation !== undefined) {
const uri = mLocation["uri"];
if (uri !== undefined) {
return makeLink(parseGeoUri(uri));
return makeMapSiteLink(parseGeoUri(uri));
}
} else {
const geoUri = content["geo_uri"];
if (geoUri) {
return makeLink(parseGeoUri(geoUri));
return makeMapSiteLink(parseGeoUri(geoUri));
}
}
return null;
59 changes: 59 additions & 0 deletions test/components/views/beacon/ShareLatestLocation-test.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,59 @@
/*
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 from 'react';
import { mount } from 'enzyme';
import { act } from 'react-dom/test-utils';

import ShareLatestLocation from '../../../../src/components/views/beacon/ShareLatestLocation';
import { copyPlaintext } from '../../../../src/utils/strings';
import { flushPromises } from '../../../test-utils';

jest.mock('../../../../src/utils/strings', () => ({
copyPlaintext: jest.fn().mockResolvedValue(undefined),
}));

describe('<ShareLatestLocation />', () => {
const defaultProps = {
latestLocationState: {
uri: 'geo:51,42;u=35',
timestamp: 123,
},
};
const getComponent = (props = {}) =>
mount(<ShareLatestLocation {...defaultProps} {...props} />);

beforeEach(() => {
jest.clearAllMocks();
});

it('renders null when no location', () => {
const component = getComponent({ latestLocationState: undefined });
expect(component.html()).toBeNull();
});

it('renders share buttons when there is a location', async () => {
const component = getComponent();
expect(component).toMatchSnapshot();

await act(async () => {
component.find('.mx_CopyableText_copyButton').at(0).simulate('click');
await flushPromises();
});

expect(copyPlaintext).toHaveBeenCalledWith('51,42');
});
});
Original file line number Diff line number Diff line change
@@ -1,3 +1,3 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`<BeaconListItem /> when a beacon is live and has locations renders beacon info 1`] = `"<li class=\\"mx_BeaconListItem\\"><div class=\\"mx_StyledLiveBeaconIcon mx_BeaconListItem_avatarIcon\\"></div><div class=\\"mx_BeaconListItem_info\\"><div class=\\"mx_BeaconStatus mx_BeaconStatus_Active mx_BeaconListItem_status\\"><div class=\\"mx_BeaconStatus_description\\"><span class=\\"mx_BeaconStatus_label\\">Alice's car</span><span class=\\"mx_BeaconStatus_expiryTime\\">Live until 16:04</span></div><div class=\\"mx_CopyableText\\"><div aria-label=\\"Copy\\" role=\\"button\\" tabindex=\\"0\\" class=\\"mx_AccessibleButton mx_CopyableText_copyButton\\"></div></div></div><span class=\\"mx_BeaconListItem_lastUpdated\\">Updated a few seconds ago</span></div></li>"`;
exports[`<BeaconListItem /> when a beacon is live and has locations renders beacon info 1`] = `"<li class=\\"mx_BeaconListItem\\"><div class=\\"mx_StyledLiveBeaconIcon mx_BeaconListItem_avatarIcon\\"></div><div class=\\"mx_BeaconListItem_info\\"><div class=\\"mx_BeaconStatus mx_BeaconStatus_Active mx_BeaconListItem_status\\"><div class=\\"mx_BeaconStatus_description\\"><span class=\\"mx_BeaconStatus_label\\">Alice's car</span><span class=\\"mx_BeaconStatus_expiryTime\\">Live until 16:04</span></div><div tabindex=\\"0\\"><a data-test-id=\\"open-location-in-osm\\" href=\\"https://www.openstreetmap.org/?mlat=51&amp;mlon=41#map=16/51/41\\" target=\\"_blank\\" rel=\\"noreferrer noopener\\"><div class=\\"mx_ShareLatestLocation_icon\\"></div></a></div><div class=\\"mx_CopyableText mx_ShareLatestLocation_copy\\"><div aria-label=\\"Copy\\" role=\\"button\\" tabindex=\\"0\\" class=\\"mx_AccessibleButton mx_CopyableText_copyButton\\"></div></div></div><span class=\\"mx_BeaconListItem_lastUpdated\\">Updated a few seconds ago</span></div></li>"`;
Original file line number Diff line number Diff line change
@@ -0,0 +1,79 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`<ShareLatestLocation /> renders share buttons when there is a location 1`] = `
<ShareLatestLocation
latestLocationState={
Object {
"timestamp": 123,
"uri": "geo:51,42;u=35",
}
}
>
<TooltipTarget
label="Open in OpenStreetMap"
>
<div
onBlur={[Function]}
onFocus={[Function]}
onMouseLeave={[Function]}
onMouseMove={[Function]}
onMouseOver={[Function]}
tabIndex={0}
>
<a
data-test-id="open-location-in-osm"
href="https://www.openstreetmap.org/?mlat=51&mlon=42#map=16/51/42"
rel="noreferrer noopener"
target="_blank"
>
<div
className="mx_ShareLatestLocation_icon"
/>
</a>
</div>
</TooltipTarget>
<CopyableText
border={false}
className="mx_ShareLatestLocation_copy"
getTextToCopy={[Function]}
>
<div
className="mx_CopyableText mx_ShareLatestLocation_copy"
>
<AccessibleTooltipButton
className="mx_CopyableText_copyButton"
onClick={[Function]}
onHideTooltip={[Function]}
title="Copy"
>
<AccessibleButton
aria-label="Copy"
className="mx_CopyableText_copyButton"
element="div"
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
onMouseLeave={[Function]}
onMouseOver={[Function]}
role="button"
tabIndex={0}
>
<div
aria-label="Copy"
className="mx_AccessibleButton mx_CopyableText_copyButton"
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
onKeyDown={[Function]}
onKeyUp={[Function]}
onMouseLeave={[Function]}
onMouseOver={[Function]}
role="button"
tabIndex={0}
/>
</AccessibleButton>
</AccessibleTooltipButton>
</div>
</CopyableText>
</ShareLatestLocation>
`;
Loading