Use prototype of matrix-js-sdk to send heartbeats and show offline status in UI

package.json

@@ -64,7 +64,7 @@
     "i18next-http-backend": "^2.0.0",
     "livekit-client": "^2.0.2",
     "lodash": "^4.17.21",
-    "matrix-js-sdk": "github:matrix-org/matrix-js-sdk#238eea0ef5c82d0a11b8d5cc5c04104d6c94c4c1",
+    "matrix-js-sdk": "github:matrix-org/matrix-js-sdk#c795c7eb656f2f6136ac4c6b17015c0f000df9a6",
     "matrix-widget-api": "^1.3.1",
     "normalize.css": "^8.0.1",
     "pako": "^2.0.4",
@@ -129,4 +129,4 @@
     "vite-plugin-svgr": "^4.0.0",
     "vitest": "^2.0.0"
   }
-}
+}

src/video-grid/VideoTile.tsx

@@ -112,8 +112,27 @@ const Tile = forwardRef<HTMLDivElement, TileProps>(
     const { t } = useTranslation();
     const mergedRef = useMergedRefs(tileRef, ref);
 
+    const [lastActiveTime, setLastActiveTime] = useState(
+      member?.getLastTypingTime() ?? 0,
+    );
+    const [online, setOnline] = useState(member?.typing ?? false);
+
+    useEffect(() => {
+      const onTyping = (): void => {
+        setOnline(member?.typing ?? false);
+        setLastActiveTime(member?.getLastTypingTime() ?? 0);
+      };
+
+      member?.on(RoomMemberEvent.Typing, onTyping);
+
+      return (): void => {
+        member?.off(RoomMemberEvent.Typing, onTyping);
+      };
+    }, [member]);
+
     const joinedCallTime = member?.events.member?.getTs() ?? 0;
 
+    const lastActiveAgo = useRelativeTime(lastActiveTime ?? 0);
     const joinedCallAgo = useRelativeTime(joinedCallTime ?? 0);
 
     return (
@@ -145,11 +164,24 @@ const Tile = forwardRef<HTMLDivElement, TileProps>(
           )}
           {!video && member && joinedCallTime > 0 && (
             <div style={{ textAlign: "center" }}>
-              <span title={member.userId}>{nameTag}</span> joined the call{" "}
+              <span>
+                {nameTag} ({member.userId})
+              </span>{" "}
+              joined the call{" "}
               <span title={new Date(joinedCallTime).toLocaleString()}>
                 {joinedCallAgo}
               </span>{" "}
-              but is currently unreachable. Are they having connection problems?
+              but is currently unreachable.
+              {lastActiveTime > 0 && (
+                <span>
+                  They were last reachable{" "}
+                  <span title={new Date(lastActiveTime).toLocaleString()}>
+                    {lastActiveAgo}
+                  </span>
+                  .
+                </span>
+              )}{" "}
+              Are they having connection problems?
             </div>
           )}
         </div>
@@ -157,7 +189,11 @@ const Tile = forwardRef<HTMLDivElement, TileProps>(
           <div className={styles.nameTag}>
             {nameTagLeadingIcon}
             <Text as="span" size="sm" weight="medium" className={styles.name}>
-              <span title={member?.userId}>{nameTag}</span>{" "}
+              <span
+                title={`${member?.userId}${lastActiveTime > 0 ? ` last reachable ${online ? "now" : lastActiveAgo}` : ""}`}
+              >
+                {nameTag}
+              </span>{" "}
             </Text>
             {unencryptedWarning && (
               <Tooltip

yarn.lock

@@ -4255,10 +4255,10 @@ bare-events@^2.2.0:
   resolved "https://registry.yarnpkg.com/bare-events/-/bare-events-2.2.0.tgz#a7a7263c107daf8b85adf0b64f908503454ab26e"
   integrity sha512-Yyyqff4PIFfSuthCZqLlPISTWHmnQxoPuAvkmgzsJEmG3CesdIv6Xweayl0JkCZJSB2yYIdJyEz97tpxNhgjbg==
 
-base-x@^4.0.0:
-  version "4.0.0"
-  resolved "https://registry.yarnpkg.com/base-x/-/base-x-4.0.0.tgz#d0e3b7753450c73f8ad2389b5c018a4af7b2224a"
-  integrity sha512-FuwxlW4H5kh37X/oW59pwTzzTKRzfrrQwhmyspRM7swOEZcHtDZSCt45U6oKgtuFE+WYPblePMVIPR4RZrh/hw==
+base-x@^5.0.0:
+  version "5.0.0"
+  resolved "https://registry.yarnpkg.com/base-x/-/base-x-5.0.0.tgz#6d835ceae379130e1a4cb846a70ac4746f28ea9b"
+  integrity sha512-sMW3VGSX1QWVFA6l8U62MLKz29rRfpTlYdCqLdpLo1/Yd4zZwSbnUaDfciIAowAqvq7YFnWq9hrhdg1KYgc1lQ==
 
 base64-js@^1.3.1:
   version "1.5.1"
@@ -4348,12 +4348,12 @@ browserslist@^4.22.2, browserslist@^4.23.0, browserslist@^4.23.1:
     node-releases "^2.0.14"
     update-browserslist-db "^1.0.16"
 
-bs58@^5.0.0:
-  version "5.0.0"
-  resolved "https://registry.yarnpkg.com/bs58/-/bs58-5.0.0.tgz#865575b4d13c09ea2a84622df6c8cbeb54ffc279"
-  integrity sha512-r+ihvQJvahgYT50JD05dyJNKlmmSlMoOGwn1lCcEzanPglg7TxYjioQUYehQ9mAR/+hOSd2jRc/Z2y5UxBymvQ==
+bs58@^6.0.0:
+  version "6.0.0"
+  resolved "https://registry.yarnpkg.com/bs58/-/bs58-6.0.0.tgz#a2cda0130558535dd281a2f8697df79caaf425d8"
+  integrity sha512-PD0wEnEYg6ijszw/u8s+iI3H17cTymlrwkKhDhPZq+Sokl3AU4htyBFTjAeNAlCCmg0f53g6ih3jATyCKftTfw==
   dependencies:
-    base-x "^4.0.0"
+    base-x "^5.0.0"
 
 buffer@^6.0.3:
   version "6.0.3"
@@ -6660,14 +6660,14 @@ matrix-events-sdk@0.0.1:
   resolved "https://registry.yarnpkg.com/matrix-events-sdk/-/matrix-events-sdk-0.0.1.tgz#c8c38911e2cb29023b0bbac8d6f32e0de2c957dd"
   integrity sha512-1QEOsXO+bhyCroIe2/A5OwaxHvBm7EsSQ46DEDn8RBIfQwN5HWBpFvyWWR4QY0KHPPnnJdI99wgRiAl7Ad5qaA==
 
-"matrix-js-sdk@github:matrix-org/matrix-js-sdk#238eea0ef5c82d0a11b8d5cc5c04104d6c94c4c1":
-  version "33.1.0"
-  resolved "https://codeload.github.com/matrix-org/matrix-js-sdk/tar.gz/238eea0ef5c82d0a11b8d5cc5c04104d6c94c4c1"
+"matrix-js-sdk@github:matrix-org/matrix-js-sdk#c795c7eb656f2f6136ac4c6b17015c0f000df9a6":
+  version "34.0.0"
+  resolved "https://codeload.github.com/matrix-org/matrix-js-sdk/tar.gz/c795c7eb656f2f6136ac4c6b17015c0f000df9a6"
   dependencies:
     "@babel/runtime" "^7.12.5"
     "@matrix-org/matrix-sdk-crypto-wasm" "^6.0.0"
     another-json "^0.2.0"
-    bs58 "^5.0.0"
+    bs58 "^6.0.0"
     content-type "^1.0.4"
     jwt-decode "^4.0.0"
     loglevel "^1.7.1"