Live location sharing - beacon in timeline happy path (#8285)

* 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 idle status to live beacon icon

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

* i18n

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>

* polish and copyrights

Signed-off-by: Kerry Archibald <kerrya@element.io>

* lint

Signed-off-by: Kerry Archibald <kerrya@element.io>

* better comment

Signed-off-by: Kerry Archibald <kerrya@element.io>
This commit is contained in:
Kerry 2022-04-13 10:44:15 +02:00 committed by GitHub
parent b4a91ea442
commit e59edb7101
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
22 changed files with 562 additions and 91 deletions

View file

@ -14,86 +14,20 @@ See the License for the specific language governing permissions and
limitations under the License.
*/
import React, { useEffect, useState } from 'react';
import React from 'react';
import classNames from 'classnames';
import {
Room,
Beacon,
BeaconIdentifier,
} from 'matrix-js-sdk/src/matrix';
import { Room } from 'matrix-js-sdk/src/matrix';
import { _t } from '../../../languageHandler';
import { useEventEmitterState } from '../../../hooks/useEventEmitter';
import { OwnBeaconStore, OwnBeaconStoreEvent } from '../../../stores/OwnBeaconStore';
import { sortBeaconsByLatestExpiry } from '../../../utils/beacon';
import { useOwnLiveBeacons } from '../../../utils/beacon';
import AccessibleButton from '../elements/AccessibleButton';
import Spinner from '../elements/Spinner';
import StyledLiveBeaconIcon from './StyledLiveBeaconIcon';
import { Icon as CloseIcon } from '../../../../res/img/image-view/close.svg';
import LiveTimeRemaining from './LiveTimeRemaining';
/**
* It's technically possible to have multiple live beacons in one room
* Select the latest expiry to display,
* and kill all beacons on stop sharing
*/
type LiveBeaconsState = {
beacon?: Beacon;
onStopSharing?: () => void;
onResetWireError?: () => void;
stoppingInProgress?: boolean;
hasStopSharingError?: boolean;
hasWireError?: boolean;
};
const useLiveBeacons = (liveBeaconIds: BeaconIdentifier[], roomId: string): LiveBeaconsState => {
const [stoppingInProgress, setStoppingInProgress] = useState(false);
const [error, setError] = useState<Error>();
const hasWireError = useEventEmitterState(
OwnBeaconStore.instance,
OwnBeaconStoreEvent.WireError,
() =>
OwnBeaconStore.instance.hasWireErrors(roomId),
);
// reset stopping in progress on change in live ids
useEffect(() => {
setStoppingInProgress(false);
setError(undefined);
}, [liveBeaconIds]);
// select the beacon with latest expiry to display expiry time
const beacon = liveBeaconIds.map(beaconId => OwnBeaconStore.instance.getBeaconById(beaconId))
.sort(sortBeaconsByLatestExpiry)
.shift();
const onStopSharing = async () => {
setStoppingInProgress(true);
try {
await Promise.all(liveBeaconIds.map(beaconId => OwnBeaconStore.instance.stopBeacon(beaconId)));
} catch (error) {
// only clear loading in case of error
// to avoid flash of not-loading state
// after beacons have been stopped but we wait for sync
setError(error);
setStoppingInProgress(false);
}
};
const onResetWireError = () => {
liveBeaconIds.map(beaconId => OwnBeaconStore.instance.resetWireError(beaconId));
};
return {
onStopSharing,
onResetWireError,
beacon,
stoppingInProgress,
hasWireError,
hasStopSharingError: !!error,
};
};
const getLabel = (hasWireError: boolean, hasStopSharingError: boolean): string => {
if (hasWireError) {
return _t('An error occured whilst sharing your live location, please try again');
@ -116,7 +50,7 @@ const RoomLiveShareWarningInner: React.FC<RoomLiveShareWarningInnerProps> = ({ l
stoppingInProgress,
hasStopSharingError,
hasWireError,
} = useLiveBeacons(liveBeaconIds, roomId);
} = useOwnLiveBeacons(liveBeaconIds);
if (!beacon) {
return null;
@ -147,6 +81,7 @@ const RoomLiveShareWarningInner: React.FC<RoomLiveShareWarningInnerProps> = ({ l
{ !stoppingInProgress && !hasError && <LiveTimeRemaining beacon={beacon} /> }
<AccessibleButton
className='mx_RoomLiveShareWarning_stopButton'
data-test-id='room-live-share-primary-button'
onClick={onButtonClick}
kind='danger'