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>
2022-04-13 10:44:15 +02:00 · 2022-04-13 10:44:15 +02:00 · e59edb7101
commit e59edb7101
parent b4a91ea442
22 changed files with 562 additions and 91 deletions
--- a/test/components/views/beacon/snapshots/BeaconStatus-test.tsx.snap
+++ b/test/components/views/beacon/snapshots/BeaconStatus-test.tsx.snap
@ -0,0 +1,195 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<BeaconStatus /> renders active state with stop button 1`] = `
+Array [
+  <AccessibleButton
+    className="mx_BeaconStatus_stopButton"
+    data-test-id="beacon-status-stop-beacon"
+    element="div"
+    kind="link"
+    onClick={[MockFunction]}
+    role="button"
+    tabIndex={0}
+  >
+    <div
+      className="mx_AccessibleButton mx_BeaconStatus_stopButton mx_AccessibleButton_hasKind mx_AccessibleButton_kind_link"
+      data-test-id="beacon-status-stop-beacon"
+      onClick={[MockFunction]}
+      onKeyDown={[Function]}
+      onKeyUp={[Function]}
+      role="button"
+      tabIndex={0}
+    >
+      Stop
+    </div>
+  </AccessibleButton>,
+  <div
+    className="mx_AccessibleButton mx_BeaconStatus_stopButton mx_AccessibleButton_hasKind mx_AccessibleButton_kind_link"
+    data-test-id="beacon-status-stop-beacon"
+    onClick={[MockFunction]}
+    onKeyDown={[Function]}
+    onKeyUp={[Function]}
+    role="button"
+    tabIndex={0}
+  >
+    Stop
+  </div>,
+]
+`;
+
+exports[`<BeaconStatus /> renders active state without stop buttons 1`] = `
+<BeaconStatus
+  beacon={
+    Beacon {
+      "_beaconInfo": Object {
+        "assetType": "m.self",
+        "description": undefined,
+        "live": undefined,
+        "timeout": 3600000,
+        "timestamp": 123456789,
+      },
+      "_events": Object {
+        "Beacon.update": [Function],
+      },
+      "_eventsCount": 1,
+      "_isLive": undefined,
+      "_latestLocationState": undefined,
+      "_maxListeners": undefined,
+      "clearLatestLocation": [Function],
+      "livenessWatchInterval": undefined,
+      "roomId": "!room:server",
+      "rootEvent": Object {
+        "content": Object {
+          "description": undefined,
+          "live": undefined,
+          "org.matrix.msc3488.asset": Object {
+            "type": "m.self",
+          },
+          "org.matrix.msc3488.ts": 123456789,
+          "timeout": 3600000,
+        },
+        "event_id": "$1",
+        "origin_server_ts": 123456789,
+        "room_id": "!room:server",
+        "sender": "@user:server",
+        "state_key": "@user:server",
+        "type": "org.matrix.msc3672.beacon_info",
+      },
+      Symbol(kCapture): false,
+    }
+  }
+  displayStatus="Active"
+>
+  <div
+    className="mx_BeaconStatus mx_BeaconStatus_Active"
+  >
+    <StyledLiveBeaconIcon
+      className="mx_BeaconStatus_icon"
+      isIdle={false}
+      withError={false}
+    >
+      <div
+        className="mx_StyledLiveBeaconIcon mx_BeaconStatus_icon"
+      />
+    </StyledLiveBeaconIcon>
+    <div
+      className="mx_BeaconStatus_activeDescription"
+    >
+      <LiveTimeRemaining
+        beacon={
+          Beacon {
+            "_beaconInfo": Object {
+              "assetType": "m.self",
+              "description": undefined,
+              "live": undefined,
+              "timeout": 3600000,
+              "timestamp": 123456789,
+            },
+            "_events": Object {
+              "Beacon.update": [Function],
+            },
+            "_eventsCount": 1,
+            "_isLive": undefined,
+            "_latestLocationState": undefined,
+            "_maxListeners": undefined,
+            "clearLatestLocation": [Function],
+            "livenessWatchInterval": undefined,
+            "roomId": "!room:server",
+            "rootEvent": Object {
+              "content": Object {
+                "description": undefined,
+                "live": undefined,
+                "org.matrix.msc3488.asset": Object {
+                  "type": "m.self",
+                },
+                "org.matrix.msc3488.ts": 123456789,
+                "timeout": 3600000,
+              },
+              "event_id": "$1",
+              "origin_server_ts": 123456789,
+              "room_id": "!room:server",
+              "sender": "@user:server",
+              "state_key": "@user:server",
+              "type": "org.matrix.msc3672.beacon_info",
+            },
+            Symbol(kCapture): false,
+          }
+        }
+      >
+        <span
+          className="mx_LiveTimeRemaining"
+          data-test-id="room-live-share-expiry"
+        >
+          1h left
+        </span>
+      </LiveTimeRemaining>
+    </div>
+  </div>
+</BeaconStatus>
+`;
+
+exports[`<BeaconStatus /> renders loading state 1`] = `
+<BeaconStatus
+  displayStatus="Loading"
+>
+  <div
+    className="mx_BeaconStatus mx_BeaconStatus_Loading"
+  >
+    <StyledLiveBeaconIcon
+      className="mx_BeaconStatus_icon"
+      isIdle={true}
+      withError={false}
+    >
+      <div
+        className="mx_StyledLiveBeaconIcon mx_BeaconStatus_icon mx_StyledLiveBeaconIcon_idle"
+      />
+    </StyledLiveBeaconIcon>
+    <span>
+      Loading live location...
+    </span>
+  </div>
+</BeaconStatus>
+`;
+
+exports[`<BeaconStatus /> renders stopped state 1`] = `
+<BeaconStatus
+  displayStatus="Stopped"
+>
+  <div
+    className="mx_BeaconStatus mx_BeaconStatus_Stopped"
+  >
+    <StyledLiveBeaconIcon
+      className="mx_BeaconStatus_icon"
+      isIdle={true}
+      withError={false}
+    >
+      <div
+        className="mx_StyledLiveBeaconIcon mx_BeaconStatus_icon mx_StyledLiveBeaconIcon_idle"
+      />
+    </StyledLiveBeaconIcon>
+    <span>
+      Live location ended
+    </span>
+  </div>
+</BeaconStatus>
+`;