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