Disable start/call button if offline

ts/components/CallingLobby.tsx

@@ -19,6 +19,7 @@ import {
 } from './CallingLobbyJoinButton';
 import { AvatarColorType } from '../types/Colors';
 import { LocalizerType } from '../types/Util';
+import { useIsOnline } from '../hooks/useIsOnline';
 import * as KeyboardLayout from '../services/keyboardLayout';
 import { ConversationType } from '../state/ducks/conversations';
 import { isConversationTooBigToRing } from '../conversations/isConversationTooBigToRing';
@@ -139,6 +140,8 @@ export const CallingLobby = ({
     };
   }, [toggleVideo, toggleAudio]);
 
+  const isOnline = useIsOnline();
+
   const [isCallConnecting, setIsCallConnecting] = React.useState(false);
 
   // eslint-disable-next-line no-nested-ternary
@@ -186,7 +189,7 @@ export const CallingLobby = ({
     ringButtonType = CallingButtonType.RING_DISABLED;
   }
 
-  const canJoin = !isCallFull && !isCallConnecting;
+  const canJoin = !isCallFull && !isCallConnecting && isOnline;
 
   let callingLobbyJoinButtonVariant: CallingLobbyJoinButtonVariant;
   if (isCallFull) {

ts/hooks/useIsOnline.ts

@@ -0,0 +1,26 @@
+// Copyright 2021 Signal Messenger, LLC
+// SPDX-License-Identifier: AGPL-3.0-only
+
+import { useEffect, useState } from 'react';
+
+export function useIsOnline(): boolean {
+  const [isOnline, setIsOnline] = useState(navigator.onLine);
+
+  useEffect(() => {
+    const update = () => {
+      setIsOnline(navigator.onLine);
+    };
+
+    update();
+
+    window.addEventListener('offline', update);
+    window.addEventListener('online', update);
+
+    return () => {
+      window.removeEventListener('offline', update);
+      window.removeEventListener('online', update);
+    };
+  }, []);
+
+  return isOnline;
+}