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>

src/utils/beacon/index.ts

@@ -17,3 +17,4 @@ limitations under the License.
 export * from './duration';
 export * from './geolocation';
 export * from './useBeacon';
+export * from './useOwnLiveBeacons';

src/utils/beacon/useBeacon.ts

@@ -68,5 +68,11 @@ export const useBeacon = (beaconInfoEvent: MatrixEvent): Beacon | undefined => {
         }
     }, [beaconInstanceEventId, beaconInfoEvent]);
 
+    useEffect(() => {
+        if (beacon) {
+            beacon.monitorLiveness();
+        }
+    }, [beacon]);
+
     return beacon;
 };

src/utils/beacon/useOwnLiveBeacons.ts

@@ -0,0 +1,87 @@
+/*
+Copyright 2022 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import { useEffect, useState } from "react";
+import { Beacon, BeaconIdentifier } from "matrix-js-sdk/src/matrix";
+
+import { useEventEmitterState } from "../../hooks/useEventEmitter";
+import { OwnBeaconStore, OwnBeaconStoreEvent } from "../../stores/OwnBeaconStore";
+import { sortBeaconsByLatestExpiry } from "./duration";
+
+type LiveBeaconsState = {
+    beacon?: Beacon;
+    onStopSharing?: () => void;
+    onResetWireError?: () => void;
+    stoppingInProgress?: boolean;
+    hasStopSharingError?: boolean;
+    hasWireError?: boolean;
+};
+
+/**
+ * Monitor the current users own beacons
+ * While current implementation only allows one live beacon per user per room
+ * In future it will be possible to have multiple live beacons in one room
+ * Select the latest expiry to display,
+ * and kill all beacons on stop sharing
+ */
+export const useOwnLiveBeacons = (liveBeaconIds: BeaconIdentifier[]): LiveBeaconsState => {
+    const [stoppingInProgress, setStoppingInProgress] = useState(false);
+    const [error, setError] = useState<Error>();
+
+    const hasWireError = useEventEmitterState(
+        OwnBeaconStore.instance,
+        OwnBeaconStoreEvent.WireError,
+        () =>
+            liveBeaconIds.some(OwnBeaconStore.instance.beaconHasWireError),
+    );
+
+    // 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,
+    };
+};