Live location sharing - update beacon_info implementation to latest MSC (#8256)

* update calls to set and createLiveBeacon

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

* fix stop beacon

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

* remove variable event type from beacon utils

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

* use beacon identifier

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

* fix RoomLiveShareWarning tests

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

* add case for beacon update

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

* lint

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

* more lint

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

src/components/views/beacon/RoomLiveShareWarning.tsx

@@ -16,7 +16,12 @@ limitations under the License.
 
 import React, { useCallback, useEffect, useState } from 'react';
 import classNames from 'classnames';
-import { Room, Beacon } from 'matrix-js-sdk/src/matrix';
+import {
+    Room,
+    Beacon,
+    BeaconEvent,
+    BeaconIdentifier,
+} from 'matrix-js-sdk/src/matrix';
 
 import { formatDuration } from '../../../DateUtils';
 import { _t } from '../../../languageHandler';
@@ -45,16 +50,22 @@ const getUpdateInterval = (ms: number) => {
     return 1000;
 };
 const useMsRemaining = (beacon: Beacon): number => {
-    const [msRemaining, setMsRemaining] = useState(() => getBeaconMsUntilExpiry(beacon));
+    const beaconInfo = useEventEmitterState(
+        beacon,
+        BeaconEvent.Update,
+        () => beacon.beaconInfo,
+    );
+
+    const [msRemaining, setMsRemaining] = useState(() => getBeaconMsUntilExpiry(beaconInfo));
 
     useEffect(() => {
-        setMsRemaining(getBeaconMsUntilExpiry(beacon));
-    }, [beacon]);
+        setMsRemaining(getBeaconMsUntilExpiry(beaconInfo));
+    }, [beaconInfo]);
 
     const updateMsRemaining = useCallback(() => {
-        const ms = getBeaconMsUntilExpiry(beacon);
+        const ms = getBeaconMsUntilExpiry(beaconInfo);
         setMsRemaining(ms);
-    }, [beacon]);
+    }, [beaconInfo]);
 
     useInterval(updateMsRemaining, getUpdateInterval(msRemaining));
 
@@ -74,7 +85,7 @@ type LiveBeaconsState = {
     hasStopSharingError?: boolean;
     hasWireError?: boolean;
 };
-const useLiveBeacons = (liveBeaconIds: string[], roomId: string): LiveBeaconsState => {
+const useLiveBeacons = (liveBeaconIds: BeaconIdentifier[], roomId: string): LiveBeaconsState => {
     const [stoppingInProgress, setStoppingInProgress] = useState(false);
     const [error, setError] = useState<Error>();
 

src/components/views/location/shareLocation.ts

@@ -78,8 +78,7 @@ export const shareLiveLocation = (
                 description,
                 LocationAssetType.Self,
             ),
-            // use timestamp as unique suffix in interim
-            `${Date.now()}`);
+        );
     } catch (error) {
         handleShareError(error, openMenu, LocationShareType.Live);
     }

src/stores/OwnBeaconStore.ts

@@ -17,6 +17,7 @@ limitations under the License.
 import { debounce } from "lodash";
 import {
     Beacon,
+    BeaconIdentifier,
     BeaconEvent,
     MatrixEvent,
     Room,
@@ -58,22 +59,22 @@ const STATIC_UPDATE_INTERVAL = 30000;
 const BAIL_AFTER_CONSECUTIVE_ERROR_COUNT = 2;
 
 type OwnBeaconStoreState = {
-    beacons: Map<string, Beacon>;
+    beacons: Map<BeaconIdentifier, Beacon>;
     beaconWireErrors: Map<string, Beacon>;
-    beaconsByRoomId: Map<Room['roomId'], Set<string>>;
-    liveBeaconIds: string[];
+    beaconsByRoomId: Map<Room['roomId'], Set<BeaconIdentifier>>;
+    liveBeaconIds: BeaconIdentifier[];
 };
 export class OwnBeaconStore extends AsyncStoreWithClient<OwnBeaconStoreState> {
     private static internalInstance = new OwnBeaconStore();
     // users beacons, keyed by event type
-    public readonly beacons = new Map<string, Beacon>();
-    public readonly beaconsByRoomId = new Map<Room['roomId'], Set<string>>();
+    public readonly beacons = new Map<BeaconIdentifier, Beacon>();
+    public readonly beaconsByRoomId = new Map<Room['roomId'], Set<BeaconIdentifier>>();
     /**
      * Track over the wire errors for published positions
      * Counts consecutive wire errors per beacon
      * Reset on successful publish of location
      */
-    public readonly beaconWireErrorCounts = new Map<string, number>();
+    public readonly beaconWireErrorCounts = new Map<BeaconIdentifier, number>();
     /**
      * ids of live beacons
      * ordered by creation time descending
@@ -108,6 +109,7 @@ export class OwnBeaconStore extends AsyncStoreWithClient<OwnBeaconStoreState> {
     protected async onNotReady() {
         this.matrixClient.removeListener(BeaconEvent.LivenessChange, this.onBeaconLiveness);
         this.matrixClient.removeListener(BeaconEvent.New, this.onNewBeacon);
+        this.matrixClient.removeListener(BeaconEvent.Update, this.onUpdateBeacon);
         this.matrixClient.removeListener(RoomStateEvent.Members, this.onRoomStateMembers);
 
         this.beacons.forEach(beacon => beacon.destroy());
@@ -122,6 +124,7 @@ export class OwnBeaconStore extends AsyncStoreWithClient<OwnBeaconStoreState> {
     protected async onReady(): Promise<void> {
         this.matrixClient.on(BeaconEvent.LivenessChange, this.onBeaconLiveness);
         this.matrixClient.on(BeaconEvent.New, this.onNewBeacon);
+        this.matrixClient.removeListener(BeaconEvent.Update, this.onUpdateBeacon);
         this.matrixClient.on(RoomStateEvent.Members, this.onRoomStateMembers);
 
         this.initialiseBeaconState();
@@ -177,8 +180,8 @@ export class OwnBeaconStore extends AsyncStoreWithClient<OwnBeaconStoreState> {
         return this.beacons.get(beaconId);
     };
 
-    public stopBeacon = async (beaconInfoType: string): Promise<void> => {
-        const beacon = this.beacons.get(beaconInfoType);
+    public stopBeacon = async (beaconIdentifier: string): Promise<void> => {
+        const beacon = this.beacons.get(beaconIdentifier);
         // if no beacon, or beacon is already explicitly set isLive: false
         // do nothing
         if (!beacon?.beaconInfo?.live) {
@@ -200,6 +203,17 @@ export class OwnBeaconStore extends AsyncStoreWithClient<OwnBeaconStoreState> {
         this.checkLiveness();
     };
 
+    /**
+     * This will be called when a beacon is replaced
+     */
+    private onUpdateBeacon = (_event: MatrixEvent, beacon: Beacon): void => {
+        if (!isOwnBeacon(beacon, this.matrixClient.getUserId())) {
+            return;
+        }
+
+        this.checkLiveness();
+    };
+
     private onBeaconLiveness = (isLive: boolean, beacon: Beacon): void => {
         // check if we care about this beacon
         if (!this.beacons.has(beacon.identifier)) {
@@ -439,7 +453,7 @@ export class OwnBeaconStore extends AsyncStoreWithClient<OwnBeaconStoreState> {
             assetType,
             timestamp);
 
-        await this.matrixClient.unstable_setLiveBeacon(beacon.roomId, beacon.beaconInfoEventType, updateContent);
+        await this.matrixClient.unstable_setLiveBeacon(beacon.roomId, updateContent);
     };
 
     /**

src/utils/beacon/duration.ts

@@ -14,6 +14,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
+import { BeaconInfoState } from "matrix-js-sdk/src/content-helpers";
 import { Beacon } from "matrix-js-sdk/src/matrix";
 
 /**
@@ -26,8 +27,8 @@ import { Beacon } from "matrix-js-sdk/src/matrix";
 export const msUntilExpiry = (startTimestamp: number, durationMs: number): number =>
     Math.max(0, (startTimestamp + durationMs) - Date.now());
 
-export const getBeaconMsUntilExpiry = (beacon: Beacon): number =>
-    msUntilExpiry(beacon.beaconInfo.timestamp, beacon.beaconInfo.timeout);
+export const getBeaconMsUntilExpiry = (beaconInfo: BeaconInfoState): number =>
+    msUntilExpiry(beaconInfo.timestamp, beaconInfo.timeout);
 
 export const getBeaconExpiryTimestamp = (beacon: Beacon): number =>
     beacon.beaconInfo.timestamp + beacon.beaconInfo.timeout;