Live location sharing - extract location markers into generic Marker (#8225)
* extract location markers into generic Marker Signed-off-by: Kerry Archibald <kerrya@element.io> * comments Signed-off-by: Kerry Archibald <kerrya@element.io> * remove skinned Signed-off-by: Kerry Archibald <kerrya@element.io>
This commit is contained in:
Kerry
GitHub
parent
b9da2255c4
commit
b98739056e
10 changed files with 188 additions and 145 deletions
|
|
@ -19,23 +19,20 @@ 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 classNames from 'classnames';
|
||||
|
||||
import { Icon as LocationIcon } from '../../../../res/img/element-icons/location.svg';
|
||||
import { _t } from '../../../languageHandler';
|
||||
import MatrixClientContext from '../../../contexts/MatrixClientContext';
|
||||
import Modal from '../../../Modal';
|
||||
import SdkConfig from '../../../SdkConfig';
|
||||
import { tileServerFromWellKnown } from '../../../utils/WellKnownUtils';
|
||||
import { getUserNameColorClass } from '../../../utils/FormattingUtils';
|
||||
import { GenericPosition, genericPositionFromGeolocation, getGeoUri } from '../../../utils/beacon';
|
||||
import { LocationShareError, findMapStyleUrl } from '../../../utils/location';
|
||||
import MemberAvatar from '../avatars/MemberAvatar';
|
||||
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;
|
||||
|
|
@ -225,8 +222,6 @@ class LocationPicker extends React.Component<ILocationPickerProps, IState> {
|
|||
</div>;
|
||||
}
|
||||
|
||||
const userColorClass = getUserNameColorClass(this.props.sender.userId);
|
||||
|
||||
return (
|
||||
<div className="mx_LocationPicker">
|
||||
<div id="mx_LocationPicker_map" />
|
||||
|
|
@ -256,13 +251,7 @@ class LocationPicker extends React.Component<ILocationPickerProps, IState> {
|
|||
</AccessibleButton>
|
||||
</form>
|
||||
</div>
|
||||
<div className={classNames(
|
||||
"mx_MLocationBody_marker",
|
||||
`mx_MLocationBody_marker-${this.props.shareType}`,
|
||||
userColorClass,
|
||||
)}
|
||||
id={this.getMarkerId()}
|
||||
>
|
||||
<div id={this.getMarkerId()}>
|
||||
{ /*
|
||||
maplibregl hijacks the div above to style the marker
|
||||
it must be in the dom when the map is initialised
|
||||
|
|
@ -271,22 +260,11 @@ class LocationPicker extends React.Component<ILocationPickerProps, IState> {
|
|||
so hide the internal visible elements
|
||||
*/ }
|
||||
|
||||
{ !!this.marker && <>
|
||||
<div className="mx_MLocationBody_markerBorder">
|
||||
{ isSharingOwnLocation(this.props.shareType) ?
|
||||
<MemberAvatar
|
||||
member={this.props.sender}
|
||||
width={27}
|
||||
height={27}
|
||||
viewUserOnClick={false}
|
||||
/>
|
||||
: <LocationIcon className="mx_MLocationBody_markerIcon" />
|
||||
}
|
||||
</div>
|
||||
<div
|
||||
className="mx_MLocationBody_pointer"
|
||||
/>
|
||||
</> }
|
||||
{ !!this.marker && <Marker
|
||||
roomMember={isSharingOwnLocation(this.props.shareType) ? this.props.sender : undefined}
|
||||
useMemberColor={this.props.shareType === LocationShareType.Live}
|
||||
/>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
|
|
|||
58
src/components/views/location/Marker.tsx
Normal file
58
src/components/views/location/Marker.tsx
Normal file
|
|
@ -0,0 +1,58 @@
|
|||
/*
|
||||
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 classNames from 'classnames';
|
||||
import { RoomMember } from 'matrix-js-sdk/src/matrix';
|
||||
|
||||
import { Icon as LocationIcon } from '../../../../res/img/element-icons/location.svg';
|
||||
import { getUserNameColorClass } from '../../../utils/FormattingUtils';
|
||||
import MemberAvatar from '../avatars/MemberAvatar';
|
||||
|
||||
interface Props {
|
||||
id?: string;
|
||||
// renders MemberAvatar when provided
|
||||
roomMember?: RoomMember;
|
||||
// use member text color as background
|
||||
useMemberColor?: boolean;
|
||||
}
|
||||
|
||||
/**
|
||||
* Generic location marker
|
||||
*/
|
||||
const Marker: React.FC<Props> = ({ id, roomMember, useMemberColor }) => {
|
||||
const memberColorClass = useMemberColor && roomMember ? getUserNameColorClass(roomMember.userId) : '';
|
||||
return <div
|
||||
id={id}
|
||||
className={classNames("mx_Marker", memberColorClass, {
|
||||
"mx_Marker_defaultColor": !memberColorClass,
|
||||
})}
|
||||
>
|
||||
<div className="mx_Marker_border">
|
||||
{ roomMember ?
|
||||
<MemberAvatar
|
||||
member={roomMember}
|
||||
width={36}
|
||||
height={36}
|
||||
viewUserOnClick={false}
|
||||
/>
|
||||
: <LocationIcon className="mx_Marker_icon" />
|
||||
}
|
||||
</div>
|
||||
</div>;
|
||||
};
|
||||
|
||||
export default Marker;
|
||||
|
|
@ -26,7 +26,6 @@ import { ClientEvent, IClientWellKnown } from 'matrix-js-sdk/src/client';
|
|||
|
||||
import { IBodyProps } from "./IBodyProps";
|
||||
import { _t } from '../../../languageHandler';
|
||||
import MemberAvatar from '../avatars/MemberAvatar';
|
||||
import Modal from '../../../Modal';
|
||||
import {
|
||||
parseGeoUri,
|
||||
|
|
@ -41,6 +40,7 @@ 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';
|
||||
|
||||
interface IState {
|
||||
error: Error;
|
||||
|
|
@ -175,16 +175,8 @@ export function LocationBodyContent(props: ILocationBodyContentProps):
|
|||
className="mx_MLocationBody_map"
|
||||
/>;
|
||||
|
||||
const markerContents = (
|
||||
isSelfLocation(props.mxEvent.getContent())
|
||||
? <MemberAvatar
|
||||
member={props.mxEvent.sender}
|
||||
width={27}
|
||||
height={27}
|
||||
viewUserOnClick={false}
|
||||
/>
|
||||
: <div className="mx_MLocationBody_markerContents" />
|
||||
);
|
||||
// only pass member to marker when should render avatar marker
|
||||
const markerRoomMember = isSelfLocation(props.mxEvent.getContent()) ? props.mxEvent.sender : undefined;
|
||||
|
||||
return <div className="mx_MLocationBody">
|
||||
{
|
||||
|
|
@ -198,14 +190,7 @@ export function LocationBodyContent(props: ILocationBodyContentProps):
|
|||
</TooltipTarget>
|
||||
: mapDiv
|
||||
}
|
||||
<div className="mx_MLocationBody_marker" id={props.markerId}>
|
||||
<div className="mx_MLocationBody_markerBorder">
|
||||
{ markerContents }
|
||||
</div>
|
||||
<div
|
||||
className="mx_MLocationBody_pointer"
|
||||
/>
|
||||
</div>
|
||||
<Marker id={props.markerId} roomMember={markerRoomMember} />
|
||||
{
|
||||
props.zoomButtons
|
||||
? <ZoomButtons
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue