Live location sharing - render users own beacons in timeline (#8296)
* extract location markers into generic Marker Signed-off-by: Kerry Archibald <kerrya@element.io> * wrap marker in smartmarker Signed-off-by: Kerry Archibald <kerrya@element.io> * test smartmarker Signed-off-by: Kerry Archibald <kerrya@element.io> * working map in location body Signed-off-by: Kerry Archibald <kerrya@element.io> * remove skinned sdk Signed-off-by: Kerry Archibald <kerrya@element.io> * use new ZoomButtons in MLocationBody Signed-off-by: Kerry Archibald <kerrya@element.io> * test LocationViewDialog Signed-off-by: Kerry Archibald <kerrya@element.io> * update commentt Signed-off-by: Kerry Archibald <kerrya@element.io> * lint Signed-off-by: Kerry Archibald <kerrya@element.io> * lint Signed-off-by: Kerry Archibald <kerrya@element.io> * extract livetimeremaining into own component Signed-off-by: Kerry Archibald <kerrya@element.io> * extract more beacon state utils Signed-off-by: Kerry Archibald <kerrya@element.io> * update tests for roomlivesharewarning Signed-off-by: Kerry Archibald <kerrya@element.io> * add beacon map and status chin Signed-off-by: Kerry Archibald <kerrya@element.io> * add handling for bubbles Signed-off-by: Kerry Archibald <kerrya@element.io> * tests for BeaconBody Signed-off-by: Kerry Archibald <kerrya@element.io> * move displaystatus check up to mbeaconbody Signed-off-by: Kerry Archibald <kerrya@element.io> * test BeaconStatus Signed-off-by: Kerry Archibald <kerrya@element.io> * rename BeaconStatusChin -> BeaconStatus Signed-off-by: Kerry Archibald <kerrya@element.io> * make BeaconStatus generic Signed-off-by: Kerry Archibald <kerrya@element.io> * lint Signed-off-by: Kerry Archibald <kerrya@element.io> * adjust spinner size Signed-off-by: Kerry Archibald <kerrya@element.io> * lint Signed-off-by: Kerry Archibald <kerrya@element.io> * add static time remaining option to beacon status Signed-off-by: Kerry Archibald <kerrya@element.io> * render time differently for own beacon Signed-off-by: Kerry Archibald <kerrya@element.io> * use children to add actions to BeaconStatus Signed-off-by: Kerry Archibald <kerrya@element.io> * add OwnBeaconStatus wrapper with stop button Signed-off-by: Kerry Archibald <kerrya@element.io> * add error states for own beacon Signed-off-by: Kerry Archibald <kerrya@element.io> * test OwnBeaconStatus Signed-off-by: Kerry Archibald <kerrya@element.io> * move ownbeaconstatus to write dir Signed-off-by: Kerry Archibald <kerrya@element.io> * improve button styling Signed-off-by: Kerry Archibald <kerrya@element.io> * i18n Signed-off-by: Kerry Archibald <kerrya@element.io> * lint Signed-off-by: Kerry Archibald <kerrya@element.io>
This commit is contained in:
Kerry
GitHub
parent
7a1a2c41d2
commit
1c215e2b71
11 changed files with 443 additions and 117 deletions
|
|
@ -20,20 +20,33 @@ import { Beacon } from 'matrix-js-sdk/src/matrix';
|
|||
|
||||
import StyledLiveBeaconIcon from './StyledLiveBeaconIcon';
|
||||
import { _t } from '../../../languageHandler';
|
||||
import AccessibleButton from '../elements/AccessibleButton';
|
||||
import LiveTimeRemaining from './LiveTimeRemaining';
|
||||
import { BeaconDisplayStatus } from './displayStatus';
|
||||
import { getBeaconExpiryTimestamp } from '../../../utils/beacon';
|
||||
import { formatTime } from '../../../DateUtils';
|
||||
|
||||
interface Props {
|
||||
displayStatus: BeaconDisplayStatus;
|
||||
displayLiveTimeRemaining?: boolean;
|
||||
beacon?: Beacon;
|
||||
label?: string;
|
||||
// assumes permission to stop was checked by parent
|
||||
stopBeacon?: () => void;
|
||||
}
|
||||
|
||||
const BeaconExpiryTime: React.FC<{ beacon: Beacon }> = ({ beacon }) => {
|
||||
const expiryTime = formatTime(new Date(getBeaconExpiryTimestamp(beacon)));
|
||||
return <span className='mx_BeaconStatus_expiryTime'>{ _t('Live until %(expiryTime)s', { expiryTime }) }</span>;
|
||||
};
|
||||
|
||||
const BeaconStatus: React.FC<Props & HTMLProps<HTMLDivElement>> =
|
||||
({ beacon, displayStatus, label, stopBeacon, className, ...rest }) => {
|
||||
({
|
||||
beacon,
|
||||
displayStatus,
|
||||
displayLiveTimeRemaining,
|
||||
label,
|
||||
className,
|
||||
children,
|
||||
...rest
|
||||
}) => {
|
||||
const isIdle = displayStatus === BeaconDisplayStatus.Loading ||
|
||||
displayStatus === BeaconDisplayStatus.Stopped;
|
||||
|
||||
|
|
@ -46,25 +59,25 @@ const BeaconStatus: React.FC<Props & HTMLProps<HTMLDivElement>> =
|
|||
withError={displayStatus === BeaconDisplayStatus.Error}
|
||||
isIdle={isIdle}
|
||||
/>
|
||||
{ displayStatus === BeaconDisplayStatus.Loading && <span>{ _t('Loading live location...') }</span> }
|
||||
{ displayStatus === BeaconDisplayStatus.Stopped && <span>{ _t('Live location ended') }</span> }
|
||||
<div className='mx_BeaconStatus_description'>
|
||||
|
||||
{ /* TODO error */ }
|
||||
{ displayStatus === BeaconDisplayStatus.Loading && <span>{ _t('Loading live location...') }</span> }
|
||||
{ displayStatus === BeaconDisplayStatus.Stopped && <span>{ _t('Live location ended') }</span> }
|
||||
|
||||
{ displayStatus === BeaconDisplayStatus.Active && beacon && <>
|
||||
<div className='mx_BeaconStatus_activeDescription'>
|
||||
{ label }
|
||||
<LiveTimeRemaining beacon={beacon} />
|
||||
</div>
|
||||
{ stopBeacon && <AccessibleButton
|
||||
data-test-id='beacon-status-stop-beacon'
|
||||
kind='link'
|
||||
onClick={stopBeacon}
|
||||
className='mx_BeaconStatus_stopButton'
|
||||
>{ _t('Stop') }</AccessibleButton>
|
||||
{ displayStatus === BeaconDisplayStatus.Error && <span>{ _t('Live location error') }</span> }
|
||||
|
||||
{ displayStatus === BeaconDisplayStatus.Active && beacon && <>
|
||||
<>
|
||||
{ label }
|
||||
{ displayLiveTimeRemaining ?
|
||||
<LiveTimeRemaining beacon={beacon} /> :
|
||||
<BeaconExpiryTime beacon={beacon} />
|
||||
}
|
||||
</>
|
||||
</>
|
||||
}
|
||||
</>
|
||||
}
|
||||
</div>
|
||||
{ children }
|
||||
</div>;
|
||||
};
|
||||
|
||||
|
|
|
|||
89
src/components/views/beacon/OwnBeaconStatus.tsx
Normal file
89
src/components/views/beacon/OwnBeaconStatus.tsx
Normal file
|
|
@ -0,0 +1,89 @@
|
|||
/*
|
||||
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 { Beacon } from 'matrix-js-sdk/src/matrix';
|
||||
import React, { HTMLProps } from 'react';
|
||||
|
||||
import { _t } from '../../../languageHandler';
|
||||
import { useOwnLiveBeacons } from '../../../utils/beacon';
|
||||
import BeaconStatus from './BeaconStatus';
|
||||
import { BeaconDisplayStatus } from './displayStatus';
|
||||
import AccessibleButton from '../elements/AccessibleButton';
|
||||
|
||||
interface Props {
|
||||
displayStatus: BeaconDisplayStatus;
|
||||
beacon?: Beacon;
|
||||
}
|
||||
|
||||
/**
|
||||
* Wraps BeaconStatus with more capabilities
|
||||
* for errors and actions available for users own live beacons
|
||||
*/
|
||||
const OwnBeaconStatus: React.FC<Props & HTMLProps<HTMLDivElement>> = ({
|
||||
beacon, displayStatus, className, ...rest
|
||||
}) => {
|
||||
const {
|
||||
hasWireError,
|
||||
hasStopSharingError,
|
||||
stoppingInProgress,
|
||||
onStopSharing,
|
||||
onResetWireError,
|
||||
} = useOwnLiveBeacons([beacon?.identifier]);
|
||||
|
||||
// combine display status with errors that only occur for user's own beacons
|
||||
const ownDisplayStatus = hasWireError || hasStopSharingError ?
|
||||
BeaconDisplayStatus.Error :
|
||||
displayStatus;
|
||||
|
||||
return <BeaconStatus
|
||||
className='mx_MBeaconBody_chin'
|
||||
beacon={beacon}
|
||||
displayStatus={ownDisplayStatus}
|
||||
label={_t('Live location enabled')}
|
||||
displayLiveTimeRemaining
|
||||
{...rest}
|
||||
>
|
||||
{ ownDisplayStatus === BeaconDisplayStatus.Active && <AccessibleButton
|
||||
data-test-id='beacon-status-stop-beacon'
|
||||
kind='link'
|
||||
onClick={onStopSharing}
|
||||
className='mx_OwnBeaconStatus_button mx_OwnBeaconStatus_destructiveButton'
|
||||
disabled={stoppingInProgress}
|
||||
>
|
||||
{ _t('Stop') }
|
||||
</AccessibleButton>
|
||||
}
|
||||
{ hasWireError && <AccessibleButton
|
||||
data-test-id='beacon-status-reset-wire-error'
|
||||
kind='link'
|
||||
onClick={onResetWireError}
|
||||
className='mx_OwnBeaconStatus_button mx_OwnBeaconStatus_destructiveButton'
|
||||
>
|
||||
{ _t('Retry') }
|
||||
</AccessibleButton>
|
||||
}
|
||||
{ hasStopSharingError && <AccessibleButton
|
||||
data-test-id='beacon-status-stop-beacon-retry'
|
||||
kind='link'
|
||||
onClick={onStopSharing}
|
||||
className='mx_OwnBeaconStatus_button mx_OwnBeaconStatus_destructiveButton'
|
||||
>
|
||||
{ _t('Retry') }
|
||||
</AccessibleButton> }
|
||||
</BeaconStatus>;
|
||||
};
|
||||
|
||||
export default OwnBeaconStatus;
|
||||
|
|
@ -14,22 +14,24 @@ See the License for the specific language governing permissions and
|
|||
limitations under the License.
|
||||
*/
|
||||
|
||||
import React, { useEffect, useState } from 'react';
|
||||
import React, { useContext, useEffect, useState } from 'react';
|
||||
import { Beacon, BeaconEvent, MatrixEvent } from 'matrix-js-sdk/src/matrix';
|
||||
import { BeaconLocationState } from 'matrix-js-sdk/src/content-helpers';
|
||||
import { randomString } from 'matrix-js-sdk/src/randomstring';
|
||||
|
||||
import { Icon as LocationMarkerIcon } from '../../../../res/img/element-icons/location.svg';
|
||||
import MatrixClientContext from '../../../contexts/MatrixClientContext';
|
||||
import { useEventEmitterState } from '../../../hooks/useEventEmitter';
|
||||
import { _t } from '../../../languageHandler';
|
||||
import { useBeacon } from '../../../utils/beacon';
|
||||
import { isSelfLocation } from '../../../utils/location';
|
||||
import { BeaconDisplayStatus, getBeaconDisplayStatus } from '../beacon/displayStatus';
|
||||
import BeaconStatus from '../beacon/BeaconStatus';
|
||||
import Spinner from '../elements/Spinner';
|
||||
import Map from '../location/Map';
|
||||
import SmartMarker from '../location/SmartMarker';
|
||||
import BeaconStatus from '../beacon/BeaconStatus';
|
||||
import OwnBeaconStatus from '../beacon/OwnBeaconStatus';
|
||||
import { IBodyProps } from "./IBodyProps";
|
||||
import { _t } from '../../../languageHandler';
|
||||
|
||||
const useBeaconState = (beaconInfoEvent: MatrixEvent): {
|
||||
beacon?: Beacon;
|
||||
|
|
@ -83,13 +85,13 @@ const MBeaconBody: React.FC<IBodyProps> = React.forwardRef(({ mxEvent }, ref) =>
|
|||
latestLocationState,
|
||||
} = useBeaconState(mxEvent);
|
||||
const mapId = useUniqueId(mxEvent.getId());
|
||||
|
||||
const [error, setError] = useState<Error>();
|
||||
|
||||
const matrixClient = useContext(MatrixClientContext);
|
||||
const displayStatus = getBeaconDisplayStatus(isLive, latestLocationState, error);
|
||||
|
||||
const markerRoomMember = isSelfLocation(mxEvent.getContent()) ? mxEvent.sender : undefined;
|
||||
|
||||
const isOwnBeacon = beacon?.beaconInfoOwner === matrixClient.getUserId();
|
||||
|
||||
return (
|
||||
<div className='mx_MBeaconBody' ref={ref}>
|
||||
{ displayStatus === BeaconDisplayStatus.Active ?
|
||||
|
|
@ -106,6 +108,7 @@ const MBeaconBody: React.FC<IBodyProps> = React.forwardRef(({ mxEvent }, ref) =>
|
|||
id={`${mapId}-marker`}
|
||||
geoUri={latestLocationState.uri}
|
||||
roomMember={markerRoomMember}
|
||||
useMemberColor
|
||||
/>
|
||||
}
|
||||
</Map>
|
||||
|
|
@ -116,12 +119,19 @@ const MBeaconBody: React.FC<IBodyProps> = React.forwardRef(({ mxEvent }, ref) =>
|
|||
}
|
||||
</div>
|
||||
}
|
||||
<BeaconStatus
|
||||
className='mx_MBeaconBody_chin'
|
||||
beacon={beacon}
|
||||
displayStatus={displayStatus}
|
||||
label={_t('View live location')}
|
||||
/>
|
||||
{ isOwnBeacon ?
|
||||
<OwnBeaconStatus
|
||||
className='mx_MBeaconBody_chin'
|
||||
beacon={beacon}
|
||||
displayStatus={displayStatus}
|
||||
/> :
|
||||
<BeaconStatus
|
||||
className='mx_MBeaconBody_chin'
|
||||
beacon={beacon}
|
||||
displayStatus={displayStatus}
|
||||
label={_t('View live location')}
|
||||
/>
|
||||
}
|
||||
</div>
|
||||
);
|
||||
});
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue