publish first location immediately

Signed-off-by: Kerry Archibald <[email protected]>

Author: Kerry Archibald

src/components/views/location/LiveDurationDropdown.tsx

@@ -21,14 +21,12 @@ import { _t } from '../../../languageHandler';
 import Dropdown from '../elements/Dropdown';
 
 const DURATION_MS = {
-    // TODO kerry debug only!!
-    oneMin: 60000,
     fifteenMins: 900000,
     oneHour: 3600000,
     eightHours: 28800000,
 };
 
-export const DEFAULT_DURATION_MS = DURATION_MS.oneMin;
+export const DEFAULT_DURATION_MS = DURATION_MS.fifteenMins;
 
 interface Props {
     timeout: number;

src/stores/OwnBeaconStore.ts

@@ -29,14 +29,15 @@ import { M_BEACON } from "matrix-js-sdk/src/@types/beacon";
 import defaultDispatcher from "../dispatcher/dispatcher";
 import { ActionPayload } from "../dispatcher/payloads";
 import { AsyncStoreWithClient } from "./AsyncStoreWithClient";
-import { arrayHasDiff } from "../utils/arrays";
+import { arrayDiff } from "../utils/arrays";
 import {
     ClearWatchCallback,
     GeolocationError,
     mapGeolocationPositionToTimedGeo,
     TimedGeoUri,
     watchPosition,
 } from "../utils/beacon";
+import { getCurrentPosition } from "../utils/beacon/geolocation";
 
 const isOwnBeacon = (beacon: Beacon, userId: string): boolean => beacon.beaconInfoOwner === userId;
 
@@ -75,6 +76,11 @@ export class OwnBeaconStore extends AsyncStoreWithClient<OwnBeaconStoreState> {
         return OwnBeaconStore.internalInstance;
     }
 
+    public get isMonitoringLiveLocation() {
+        // we are watching location as long as this is truthy
+        return !!this.clearPositionWatch;
+    }
+
     protected async onNotReady() {
         this.matrixClient.removeListener(BeaconEvent.LivenessChange, this.onBeaconLiveness);
         this.matrixClient.removeListener(BeaconEvent.New, this.onNewBeacon);
@@ -181,10 +187,25 @@ export class OwnBeaconStore extends AsyncStoreWithClient<OwnBeaconStoreState> {
             .filter(beacon => beacon.isLive)
             .map(beacon => beacon.identifier);
 
-        if (arrayHasDiff(prevLiveBeaconIds, this.liveBeaconIds)) {
+        const diff = arrayDiff(prevLiveBeaconIds, this.liveBeaconIds);
+
+        if (diff.added.length || diff.removed.length) {
             this.emit(OwnBeaconStoreEvent.LivenessChange, this.liveBeaconIds);
         }
 
+        // publish current location immediately
+        // when there are new live beacons
+        // and we already have a live monitor
+        // so first position is published quickly
+        // even when target is stationery
+        //
+        // when there is no existing live monitor
+        // it will be created below by togglePollingLocation
+        // and publish first position quickly
+        if (diff.added.length && this.isMonitoringLiveLocation) {
+            this.publishCurrentLocationToBeacons();
+        }
+
         // if overall liveness changed
         if (!!prevLiveBeaconIds?.length !== !!this.liveBeaconIds.length) {
             this.togglePollingLocation();
@@ -223,14 +244,11 @@ export class OwnBeaconStore extends AsyncStoreWithClient<OwnBeaconStoreState> {
             if (!this.lastPublishedPosition) {
                 return;
             }
-            // TODO should this use the timestamp the position was taken,
-            // or a new timestamp when we send it
-            // or should we geolocation.getCurrentPosition() here?
-            const { publishedTimestamp, position } = this.lastPublishedPosition;
+            const { publishedTimestamp } = this.lastPublishedPosition;
             // if position was last updated STATIC_UPDATE_INTERVAL ms ago or more
-            // republish our last position
+            // get our position and publish it
             if (publishedTimestamp <= Date.now() - STATIC_UPDATE_INTERVAL) {
-                this.publishLocationToBeacons(position);
+                this.publishCurrentLocationToBeacons();
             }
         }, STATIC_UPDATE_INTERVAL);
     };
@@ -263,6 +281,10 @@ export class OwnBeaconStore extends AsyncStoreWithClient<OwnBeaconStoreState> {
         }
     };
 
+    /**
+     * Sends m.location events to all live beacons
+     * Sets last published beacon
+     */
     private publishLocationToBeacons = async (position: TimedGeoUri) => {
         this.lastPublishedPosition = { position, publishedTimestamp: Date.now() };
         // TODO handle failure in individual beacon without rejecting rest
@@ -273,8 +295,22 @@ export class OwnBeaconStore extends AsyncStoreWithClient<OwnBeaconStoreState> {
 
     private debouncedPublishLocationToBeacons = debounce(this.publishLocationToBeacons, MOVING_UPDATE_INTERVAL);
 
+    /**
+     * Sends m.location event to referencing given beacon
+     */
     private sendLocationToBeacon = async (beacon: Beacon, { geoUri, timestamp }: TimedGeoUri) => {
         const content = makeBeaconContent(geoUri, timestamp, beacon.beaconInfoId);
         await this.matrixClient.sendEvent(beacon.roomId, M_BEACON.name, content);
     };
+
+    /**
+     * Gets the current location
+     * (as opposed to using watching location)
+     * and publishes it to all live beacons
+     */
+    private publishCurrentLocationToBeacons = async () => {
+        const position = await getCurrentPosition();
+        // TODO error handling
+        this.publishLocationToBeacons(mapGeolocationPositionToTimedGeo(position));
+    };
 }

src/utils/beacon/geolocation.ts

@@ -112,6 +112,21 @@ export const mapGeolocationPositionToTimedGeo = (position: GeolocationPosition):
     return { timestamp: position.timestamp, geoUri: getGeoUri(genericPositionFromGeolocation(position)) };
 };
 
+/**
+ * Gets current position, returns a promise
+ * @returns Promise<GeolocationPosition>
+ */
+export const getCurrentPosition = async (): Promise<GeolocationPosition> => {
+    try {
+        const position = await new Promise((resolve: PositionCallback, reject) => {
+            getGeolocation().getCurrentPosition(resolve, reject, GeolocationOptions);
+        });
+        return position;
+    } catch (error) {
+        throw new Error(mapGeolocationError(error));
+    }
+};
+
 export type ClearWatchCallback = () => void;
 export const watchPosition = (
     onWatchPosition: PositionCallback,

test/components/views/beacon/RoomLiveShareWarning-test.tsx

@@ -26,11 +26,13 @@ import {
     findByTestId,
     getMockClientWithEventEmitter,
     makeBeaconInfoEvent,
+    mockGeolocation,
     resetAsyncStoreWithClient,
     setupAsyncStoreWithClient,
 } from '../../../test-utils';
 
 jest.useFakeTimers();
+mockGeolocation();
 describe('<RoomLiveShareWarning />', () => {
     const aliceId = '@alice:server.org';
     const room1Id = '$room1:server.org';
@@ -40,6 +42,7 @@ describe('<RoomLiveShareWarning />', () => {
         getVisibleRooms: jest.fn().mockReturnValue([]),
         getUserId: jest.fn().mockReturnValue(aliceId),
         unstable_setLiveBeacon: jest.fn().mockResolvedValue({ event_id: '1' }),
+        sendEvent: jest.fn(),
     });
 
     // 14.03.2022 16:15
@@ -137,12 +140,16 @@ describe('<RoomLiveShareWarning />', () => {
 
         it('renders correctly with one live beacon in room', () => {
             const component = getComponent({ roomId: room1Id });
-            expect(component).toMatchSnapshot();
+            // beacons have generated ids that break snapshots
+            // assert on html
+            expect(component.html()).toMatchSnapshot();
         });
 
         it('renders correctly with two live beacons in room', () => {
             const component = getComponent({ roomId: room2Id });
-            expect(component).toMatchSnapshot();
+            // beacons have generated ids that break snapshots
+            // assert on html
+            expect(component.html()).toMatchSnapshot();
             // later expiry displayed
             expect(getExpiryText(component)).toEqual('12h left');
         });

test/components/views/beacon/__snapshots__/RoomLiveShareWarning-test.tsx.snap

@@ -1,191 +1,5 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`<RoomLiveShareWarning /> when user has live beacons renders correctly with one live beacon in room 1`] = `
-<RoomLiveShareWarning
-  roomId="$room1:server.org"
->
-  <div
-    className="mx_RoomLiveShareWarning"
-  >
-    <StyledLiveBeaconIcon
-      className="mx_RoomLiveShareWarning_icon"
-    >
-      <div
-        className="mx_StyledLiveBeaconIcon mx_RoomLiveShareWarning_icon"
-      />
-    </StyledLiveBeaconIcon>
-    <span
-      className="mx_RoomLiveShareWarning_label"
-    >
-      You are sharing your live location
-    </span>
-    <LiveTimeRemaining
-      beacon={
-        Beacon {
-          "_beaconInfo": Object {
-            "assetType": "m.self",
-            "description": undefined,
-            "live": true,
-            "timeout": 3600000,
-            "timestamp": 1647270879403,
-          },
-          "_events": Object {
-            "Beacon.LivenessChange": Array [
-              [Function],
-              [Function],
-            ],
-            "Beacon.new": [Function],
-            "Beacon.update": [Function],
-          },
-          "_eventsCount": 3,
-          "_isLive": true,
-          "_maxListeners": undefined,
-          "livenessWatchInterval": 1000000000002,
-          "roomId": "$room1:server.org",
-          "rootEvent": Object {
-            "content": Object {
-              "org.matrix.msc3488.asset": Object {
-                "type": "m.self",
-              },
-              "org.matrix.msc3488.ts": 1647270879403,
-              "org.matrix.msc3489.beacon_info": Object {
-                "description": undefined,
-                "live": true,
-                "timeout": 3600000,
-              },
-            },
-            "event_id": "$0",
-            "room_id": "$room1:server.org",
-            "state_key": "@alice:server.org",
-            "type": "org.matrix.msc3489.beacon_info.@alice:server.org.2",
-          },
-          Symbol(kCapture): false,
-        }
-      }
-    >
-      <span
-        className="mx_RoomLiveShareWarning_expiry"
-        data-test-id="room-live-share-expiry"
-      >
-        1h left
-      </span>
-    </LiveTimeRemaining>
-    <AccessibleButton
-      data-test-id="room-live-share-stop-sharing"
-      disabled={false}
-      element="button"
-      kind="danger"
-      onClick={[Function]}
-      role="button"
-      tabIndex={0}
-    >
-      <button
-        className="mx_AccessibleButton mx_AccessibleButton_hasKind mx_AccessibleButton_kind_danger"
-        data-test-id="room-live-share-stop-sharing"
-        onClick={[Function]}
-        onKeyDown={[Function]}
-        onKeyUp={[Function]}
-        role="button"
-        tabIndex={0}
-      >
-        Stop sharing
-      </button>
-    </AccessibleButton>
-  </div>
-</RoomLiveShareWarning>
-`;
+exports[`<RoomLiveShareWarning /> when user has live beacons renders correctly with one live beacon in room 1`] = `"<div class=\\"mx_RoomLiveShareWarning\\"><div class=\\"mx_StyledLiveBeaconIcon mx_RoomLiveShareWarning_icon\\"></div><span class=\\"mx_RoomLiveShareWarning_label\\">You are sharing your live location</span><span data-test-id=\\"room-live-share-expiry\\" class=\\"mx_RoomLiveShareWarning_expiry\\">1h left</span><button data-test-id=\\"room-live-share-stop-sharing\\" role=\\"button\\" tabindex=\\"0\\" class=\\"mx_AccessibleButton mx_AccessibleButton_hasKind mx_AccessibleButton_kind_danger\\">Stop sharing</button></div>"`;
 
-exports[`<RoomLiveShareWarning /> when user has live beacons renders correctly with two live beacons in room 1`] = `
-<RoomLiveShareWarning
-  roomId="$room2:server.org"
->
-  <div
-    className="mx_RoomLiveShareWarning"
-  >
-    <StyledLiveBeaconIcon
-      className="mx_RoomLiveShareWarning_icon"
-    >
-      <div
-        className="mx_StyledLiveBeaconIcon mx_RoomLiveShareWarning_icon"
-      />
-    </StyledLiveBeaconIcon>
-    <span
-      className="mx_RoomLiveShareWarning_label"
-    >
-      You are sharing your live location
-    </span>
-    <LiveTimeRemaining
-      beacon={
-        Beacon {
-          "_beaconInfo": Object {
-            "assetType": "m.self",
-            "description": undefined,
-            "live": true,
-            "timeout": 43200000,
-            "timestamp": 1647270879403,
-          },
-          "_events": Object {
-            "Beacon.LivenessChange": Array [
-              [Function],
-              [Function],
-            ],
-            "Beacon.new": [Function],
-            "Beacon.update": [Function],
-          },
-          "_eventsCount": 3,
-          "_isLive": true,
-          "_maxListeners": undefined,
-          "livenessWatchInterval": 1000000000010,
-          "roomId": "$room2:server.org",
-          "rootEvent": Object {
-            "content": Object {
-              "org.matrix.msc3488.asset": Object {
-                "type": "m.self",
-              },
-              "org.matrix.msc3488.ts": 1647270879403,
-              "org.matrix.msc3489.beacon_info": Object {
-                "description": undefined,
-                "live": true,
-                "timeout": 43200000,
-              },
-            },
-            "event_id": "$2",
-            "room_id": "$room2:server.org",
-            "state_key": "@alice:server.org",
-            "type": "org.matrix.msc3489.beacon_info.@alice:server.org.4",
-          },
-          Symbol(kCapture): false,
-        }
-      }
-    >
-      <span
-        className="mx_RoomLiveShareWarning_expiry"
-        data-test-id="room-live-share-expiry"
-      >
-        12h left
-      </span>
-    </LiveTimeRemaining>
-    <AccessibleButton
-      data-test-id="room-live-share-stop-sharing"
-      disabled={false}
-      element="button"
-      kind="danger"
-      onClick={[Function]}
-      role="button"
-      tabIndex={0}
-    >
-      <button
-        className="mx_AccessibleButton mx_AccessibleButton_hasKind mx_AccessibleButton_kind_danger"
-        data-test-id="room-live-share-stop-sharing"
-        onClick={[Function]}
-        onKeyDown={[Function]}
-        onKeyUp={[Function]}
-        role="button"
-        tabIndex={0}
-      >
-        Stop sharing
-      </button>
-    </AccessibleButton>
-  </div>
-</RoomLiveShareWarning>
-`;
+exports[`<RoomLiveShareWarning /> when user has live beacons renders correctly with two live beacons in room 1`] = `"<div class=\\"mx_RoomLiveShareWarning\\"><div class=\\"mx_StyledLiveBeaconIcon mx_RoomLiveShareWarning_icon\\"></div><span class=\\"mx_RoomLiveShareWarning_label\\">You are sharing your live location</span><span data-test-id=\\"room-live-share-expiry\\" class=\\"mx_RoomLiveShareWarning_expiry\\">12h left</span><button data-test-id=\\"room-live-share-stop-sharing\\" role=\\"button\\" tabindex=\\"0\\" class=\\"mx_AccessibleButton mx_AccessibleButton_hasKind mx_AccessibleButton_kind_danger\\">Stop sharing</button></div>"`;