Show when user can't connect because of a bad token (#2105)

* Reapply "Add ping pong health, remove a timeout interval, fix up netwo… (#1771)

This reverts commit 1913519f68.

* Fix build errors

* Add new error states to network status notification

* Remove unused variable

* Refactor to use Context API for network status

* Don't do any stream events if network is not ok

* Catch LSP errors on bad auth

* Show when authentication is bad (cookie header only)

* Fix formatting

* Fix up types

* Revert awaiting on lsp failure

* Fix tsc

* wip

* wip

* fmt

* Fix typing

* Incorporate ping health; yarn make:dev; faster video stream loss notice

* A snapshot a day keeps the bugs away! 📷🐛 (OS: ubuntu)

* run ci pls

* run ci pls

* A snapshot a day keeps the bugs away! 📷🐛 (OS: ubuntu)

* run ci pls again

* Remove unused variables

* Add new instructions on running Playwright anywhere

* Please the Playwright. Praise the Playwright.

* Correct a vitest

* A snapshot a day keeps the bugs away! 📷🐛 (OS: ubuntu)

* ci again

* Fix tests unrelated to this PR

* Fix flakiness in for segments tests

* Bump to 2 workers

* fmt

* A snapshot a day keeps the bugs away! 📷🐛 (OS: ubuntu)

* fmt

* fmt

* Fixups

* A snapshot a day keeps the bugs away! 📷🐛 (OS: ubuntu)

* ci

* Set workers to 1

* Wait for network status listeners before connecting

* Fix initial connection requirements and trying 2 workers again

---------

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>

src/hooks/useSetupEngineManager.ts

@@ -43,7 +43,7 @@ export function useSetupEngineManager(
     engineCommandManager.pool = settings.pool
   }
 
-  useLayoutEffect(() => {
+  const startEngineInstance = () => {
     // Load the engine command manager once with the initial width and height,
     // then we do not want to reload it.
     const { width: quadWidth, height: quadHeight } = getDimensions(
@@ -73,7 +73,12 @@ export function useSetupEngineManager(
       })
       hasSetNonZeroDimensions.current = true
     }
-  }, [streamRef?.current?.offsetWidth, streamRef?.current?.offsetHeight])
+  }
+
+  useLayoutEffect(startEngineInstance, [
+    streamRef?.current?.offsetWidth,
+    streamRef?.current?.offsetHeight,
+  ])
 
   useEffect(() => {
     const handleResize = deferExecution(() => {
@@ -96,8 +101,20 @@ export function useSetupEngineManager(
       }
     }, 500)
 
+    const onOnline = () => {
+      startEngineInstance()
+    }
+
+    const onOffline = () => {
+      engineCommandManager.tearDown()
+    }
+
+    window.addEventListener('online', onOnline)
+    window.addEventListener('offline', onOffline)
     window.addEventListener('resize', handleResize)
     return () => {
+      window.removeEventListener('online', onOnline)
+      window.removeEventListener('offline', onOffline)
       window.removeEventListener('resize', handleResize)
     }
   }, [])