From d2f9fc0d98815d4e311cd948df6e8be9ba9608be Mon Sep 17 00:00:00 2001 From: Kerry Archibald Date: Tue, 7 Jun 2022 13:11:32 +0200 Subject: [PATCH 1/5] check for beacons that are yet to start and show loading ui Signed-off-by: Kerry Archibald --- src/components/views/beacon/displayStatus.ts | 7 +++++-- src/components/views/messages/MBeaconBody.tsx | 13 +++++++++++-- src/utils/beacon/duration.ts | 7 +++++++ test/components/views/messages/MBeaconBody-test.tsx | 12 ++++++++++++ 4 files changed, 35 insertions(+), 4 deletions(-) diff --git a/src/components/views/beacon/displayStatus.ts b/src/components/views/beacon/displayStatus.ts index ee65991070f..05bb7b8571a 100644 --- a/src/components/views/beacon/displayStatus.ts +++ b/src/components/views/beacon/displayStatus.ts @@ -25,14 +25,17 @@ export enum BeaconDisplayStatus { export const getBeaconDisplayStatus = ( isLive: boolean, latestLocationState?: BeaconLocationState, - error?: Error): BeaconDisplayStatus => { + error?: Error, + waitingToStart?: boolean): BeaconDisplayStatus => { if (error) { return BeaconDisplayStatus.Error; } + if (waitingToStart) { + return BeaconDisplayStatus.Loading; + } if (!isLive) { return BeaconDisplayStatus.Stopped; } - if (!latestLocationState) { return BeaconDisplayStatus.Loading; } diff --git a/src/components/views/messages/MBeaconBody.tsx b/src/components/views/messages/MBeaconBody.tsx index bd581d1bce8..91c54d701a4 100644 --- a/src/components/views/messages/MBeaconBody.tsx +++ b/src/components/views/messages/MBeaconBody.tsx @@ -23,7 +23,7 @@ import MatrixClientContext from '../../../contexts/MatrixClientContext'; import { useEventEmitterState } from '../../../hooks/useEventEmitter'; import { _t } from '../../../languageHandler'; import Modal from '../../../Modal'; -import { useBeacon } from '../../../utils/beacon'; +import { isBeaconWaitingToStart, useBeacon } from '../../../utils/beacon'; import { isSelfLocation } from '../../../utils/location'; import { BeaconDisplayStatus, getBeaconDisplayStatus } from '../beacon/displayStatus'; import BeaconStatus from '../beacon/BeaconStatus'; @@ -39,6 +39,7 @@ const useBeaconState = (beaconInfoEvent: MatrixEvent): { description?: string; latestLocationState?: BeaconLocationState; isLive?: boolean; + waitingToStart?: boolean; } => { const beacon = useBeacon(beaconInfoEvent); @@ -56,12 +57,19 @@ const useBeaconState = (beaconInfoEvent: MatrixEvent): { return {}; } + // a beacon's starting timestamp can be in the future + // (either from small deviations in system clock times, or on purpose from another client) + // a beacon is only live between its start timestamp and expiry + // detect when a beacon is waiting to become live + // and display a loading state + const waitingToStart = !!beacon && isBeaconWaitingToStart(beacon); const { description } = beacon.beaconInfo; return { beacon, description, isLive, + waitingToStart, latestLocationState, }; }; @@ -84,12 +92,13 @@ const MBeaconBody: React.FC = React.forwardRef(({ mxEvent }, ref) => beacon, isLive, latestLocationState, + waitingToStart, } = useBeaconState(mxEvent); const mapId = useUniqueId(mxEvent.getId()); const matrixClient = useContext(MatrixClientContext); const [error, setError] = useState(); - const displayStatus = getBeaconDisplayStatus(isLive, latestLocationState, error); + const displayStatus = getBeaconDisplayStatus(isLive, latestLocationState, error, waitingToStart); const markerRoomMember = isSelfLocation(mxEvent.getContent()) ? mxEvent.sender : undefined; const isOwnBeacon = beacon?.beaconInfoOwner === matrixClient.getUserId(); diff --git a/src/utils/beacon/duration.ts b/src/utils/beacon/duration.ts index c49eef1bd55..bbd51c7b5d4 100644 --- a/src/utils/beacon/duration.ts +++ b/src/utils/beacon/duration.ts @@ -39,3 +39,10 @@ export const sortBeaconsByLatestExpiry = (left: Beacon, right: Beacon): number = // aka sort by timestamp descending export const sortBeaconsByLatestCreation = (left: Beacon, right: Beacon): number => right.beaconInfo.timestamp - left.beaconInfo.timestamp; + +// a beacon's starting timestamp can be in the future +// (either from small deviations in system clock times, or on purpose from another client) +// a beacon is only live between its start timestamp and expiry +// detect when a beacon is waiting to become live +export const isBeaconWaitingToStart = (beacon: Beacon): boolean => + !beacon.isLive && beacon.beaconInfo.timestamp > Date.now() && getBeaconExpiryTimestamp(beacon) > Date.now(); diff --git a/test/components/views/messages/MBeaconBody-test.tsx b/test/components/views/messages/MBeaconBody-test.tsx index e9cb719f7f2..a469e00c420 100644 --- a/test/components/views/messages/MBeaconBody-test.tsx +++ b/test/components/views/messages/MBeaconBody-test.tsx @@ -111,6 +111,18 @@ describe('', () => { expect(component.text()).toEqual("Live location ended"); }); + it('renders loading beacon UI for a beacon that has not started yet', () => { + const beaconInfoEvent = makeBeaconInfoEvent(aliceId, + roomId, + // puts this beacons start timestamp in the future + { isLive: true, timestamp: now + 60000, timeout: 500 }, + '$alice-room1-1', + ); + makeRoomWithStateEvents([beaconInfoEvent], { roomId, mockClient }); + const component = getComponent({ mxEvent: beaconInfoEvent }); + expect(component.text()).toEqual("Loading live location..."); + }); + it('does not open maximised map when on click when beacon is stopped', () => { const beaconInfoEvent = makeBeaconInfoEvent(aliceId, roomId, From 6fa892d7b6f756fadb153fb3ef81bbf24e8a716e Mon Sep 17 00:00:00 2001 From: Kerry Archibald Date: Tue, 7 Jun 2022 16:05:23 +0200 Subject: [PATCH 2/5] update snapshots for js-sdk rename Signed-off-by: Kerry Archibald --- src/components/views/messages/MBeaconBody.tsx | 2 ++ .../views/beacon/__snapshots__/BeaconMarker-test.tsx.snap | 2 +- .../views/beacon/__snapshots__/BeaconStatus-test.tsx.snap | 4 ++-- 3 files changed, 5 insertions(+), 3 deletions(-) diff --git a/src/components/views/messages/MBeaconBody.tsx b/src/components/views/messages/MBeaconBody.tsx index 91c54d701a4..aefd36495a1 100644 --- a/src/components/views/messages/MBeaconBody.tsx +++ b/src/components/views/messages/MBeaconBody.tsx @@ -65,6 +65,8 @@ const useBeaconState = (beaconInfoEvent: MatrixEvent): { const waitingToStart = !!beacon && isBeaconWaitingToStart(beacon); const { description } = beacon.beaconInfo; + console.log('hhh', { isLive, waitingToStart }, Date.now(), beacon.beaconInfo); + return { beacon, description, diff --git a/test/components/views/beacon/__snapshots__/BeaconMarker-test.tsx.snap b/test/components/views/beacon/__snapshots__/BeaconMarker-test.tsx.snap index a79a47b5892..b82f98dc4e5 100644 --- a/test/components/views/beacon/__snapshots__/BeaconMarker-test.tsx.snap +++ b/test/components/views/beacon/__snapshots__/BeaconMarker-test.tsx.snap @@ -33,7 +33,7 @@ exports[` renders marker when beacon has location 1`] = ` }, "_maxListeners": undefined, "clearLatestLocation": [Function], - "livenessWatchInterval": undefined, + "livenessWatchTimeout": undefined, "roomId": "!room:server", "rootEvent": Object { "content": Object { diff --git a/test/components/views/beacon/__snapshots__/BeaconStatus-test.tsx.snap b/test/components/views/beacon/__snapshots__/BeaconStatus-test.tsx.snap index b27f9ee191f..4e565b3fb9b 100644 --- a/test/components/views/beacon/__snapshots__/BeaconStatus-test.tsx.snap +++ b/test/components/views/beacon/__snapshots__/BeaconStatus-test.tsx.snap @@ -19,7 +19,7 @@ exports[` active state renders without children 1`] = ` "_latestLocationState": undefined, "_maxListeners": undefined, "clearLatestLocation": [Function], - "livenessWatchInterval": undefined, + "livenessWatchTimeout": undefined, "roomId": "!room:server", "rootEvent": Object { "content": Object { @@ -81,7 +81,7 @@ exports[` active state renders without children 1`] = ` "_latestLocationState": undefined, "_maxListeners": undefined, "clearLatestLocation": [Function], - "livenessWatchInterval": undefined, + "livenessWatchTimeout": undefined, "roomId": "!room:server", "rootEvent": Object { "content": Object { From c713008848d64f1f48e169917da49f83ec52be7c Mon Sep 17 00:00:00 2001 From: Kerry Archibald Date: Tue, 7 Jun 2022 17:13:41 +0200 Subject: [PATCH 3/5] remove debug Signed-off-by: Kerry Archibald --- src/components/views/messages/MBeaconBody.tsx | 2 -- 1 file changed, 2 deletions(-) diff --git a/src/components/views/messages/MBeaconBody.tsx b/src/components/views/messages/MBeaconBody.tsx index aefd36495a1..91c54d701a4 100644 --- a/src/components/views/messages/MBeaconBody.tsx +++ b/src/components/views/messages/MBeaconBody.tsx @@ -65,8 +65,6 @@ const useBeaconState = (beaconInfoEvent: MatrixEvent): { const waitingToStart = !!beacon && isBeaconWaitingToStart(beacon); const { description } = beacon.beaconInfo; - console.log('hhh', { isLive, waitingToStart }, Date.now(), beacon.beaconInfo); - return { beacon, description, From 91c5f6090be2798a20093f8c27fa52128f7471af Mon Sep 17 00:00:00 2001 From: Kerry Date: Wed, 8 Jun 2022 10:58:03 +0200 Subject: [PATCH 4/5] Update test/components/views/messages/MBeaconBody-test.tsx Co-authored-by: Travis Ralston --- test/components/views/messages/MBeaconBody-test.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/test/components/views/messages/MBeaconBody-test.tsx b/test/components/views/messages/MBeaconBody-test.tsx index a469e00c420..b817ac29959 100644 --- a/test/components/views/messages/MBeaconBody-test.tsx +++ b/test/components/views/messages/MBeaconBody-test.tsx @@ -112,7 +112,8 @@ describe('', () => { }); it('renders loading beacon UI for a beacon that has not started yet', () => { - const beaconInfoEvent = makeBeaconInfoEvent(aliceId, + const beaconInfoEvent = makeBeaconInfoEvent( + aliceId, roomId, // puts this beacons start timestamp in the future { isLive: true, timestamp: now + 60000, timeout: 500 }, From cc9bb4eed67c890f42c9b1e89f93b39217dfec4c Mon Sep 17 00:00:00 2001 From: Kerry Date: Wed, 8 Jun 2022 10:58:09 +0200 Subject: [PATCH 5/5] Update src/components/views/beacon/displayStatus.ts Co-authored-by: Travis Ralston --- src/components/views/beacon/displayStatus.ts | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/components/views/beacon/displayStatus.ts b/src/components/views/beacon/displayStatus.ts index 05bb7b8571a..73bc7bec306 100644 --- a/src/components/views/beacon/displayStatus.ts +++ b/src/components/views/beacon/displayStatus.ts @@ -26,7 +26,8 @@ export const getBeaconDisplayStatus = ( isLive: boolean, latestLocationState?: BeaconLocationState, error?: Error, - waitingToStart?: boolean): BeaconDisplayStatus => { + waitingToStart?: boolean, +): BeaconDisplayStatus => { if (error) { return BeaconDisplayStatus.Error; }