Merge pull request lichess-org#14642 from schlawg/socket-offline-vs-r…

…econnecting dont attempt lila-ws connection when offline
Carbrex · Feb 10, 2024 · 982c08a · 982c08a
2 parents 289fae3 + f866761
commit 982c08a
Show file tree

Hide file tree

Showing 6 changed files with 21 additions and 7 deletions.
diff --git a/app/views/base/layout.scala b/app/views/base/layout.scala
@@ -343,10 +343,10 @@ object layout:
             )
           ),
           netConfig.socketDomains.nonEmpty option a(
-            id       := "reconnecting",
+            id       := "network-status",
             cls      := "link text",
             dataIcon := licon.ChasingArrows
-          )(trans.reconnecting()),
+          ),
           spinnerMask,
           loadScripts(moreJs)
         )
@@ -431,6 +431,8 @@ object layout:
       trans.pause,
       trans.resume,
       trans.nbFriendsOnline,
+      trans.reconnecting,
+      trans.noNetwork,
       trans.timeago.justNow,
       trans.timeago.inNbSeconds,
       trans.timeago.inNbMinutes,

diff --git a/modules/i18n/src/main/I18nKeys.scala b/modules/i18n/src/main/I18nKeys.scala
@@ -305,6 +305,7 @@ object I18nKeys:
   val `blackCheckmatesInOneMove` = I18nKey("blackCheckmatesInOneMove")
   val `retry` = I18nKey("retry")
   val `reconnecting` = I18nKey("reconnecting")
+  val `noNetwork` = I18nKey("noNetwork")
   val `favoriteOpponents` = I18nKey("favoriteOpponents")
   val `follow` = I18nKey("follow")
   val `following` = I18nKey("following")

diff --git a/translation/source/site.xml b/translation/source/site.xml
@@ -418,6 +418,7 @@
   <string name="blackCheckmatesInOneMove">Black to checkmate in one move</string>
   <string name="retry">Retry</string>
   <string name="reconnecting">Reconnecting</string>
+  <string name="noNetwork">Offline</string>
   <plurals name="nbFriendsOnline">
     <item quantity="one">%s friend online</item>
     <item quantity="other">%s friends online</item>

diff --git a/ui/common/css/abstract/_z-index.scss b/ui/common/css/abstract/_z-index.scss
@@ -24,7 +24,7 @@ $z-indexes: (
   'dropdown': 108,
   'context-menu': 107,
   'site-header': 106,
-  'reconnecting': 105,
+  'network-status': 105,
   'tour-reminder': 104,
   'mz-menu': 4,
   'above-link-overlay': 3,

diff --git a/ui/common/css/component/_reconnecting.scss b/ui/common/css/component/_reconnecting.scss
@@ -12,7 +12,7 @@ $recon-height: 2.5rem;
   }
 }
 
-#reconnecting {
+#network-status {
   @extend %flex-center-nowrap, %popup-shadow;
 
   font-size: 1.2em;
@@ -25,7 +25,7 @@ $recon-height: 2.5rem;
   height: $recon-height;
   padding: 0 1rem;
   border-top-right-radius: 3px;
-  z-index: z('reconnecting');
+  z-index: z('network-status');
   opacity: 0;
   transform: translateY($recon-height);
 

diff --git a/ui/site/src/component/socket.ts b/ui/site/src/component/socket.ts
@@ -1,6 +1,7 @@
 import * as xhr from 'common/xhr';
 import idleTimer from './idleTimer';
 import sri from './sri';
+import { siteTrans } from './trans';
 import { reload } from './reload';
 import { storage as makeStorage } from './storage';
 import { storedIntProp } from 'common/storage';
@@ -116,6 +117,13 @@ export default class StrongSocket {
 
   connect = () => {
     this.destroy();
+    if (!navigator.onLine) {
+      document.body.classList.remove('online');
+      document.body.classList.add('offline');
+      $('#network-status').text(siteTrans('noNetwork'));
+      this.scheduleConnect(1000);
+      return;
+    }
     this.autoReconnect = true;
     const fullUrl = xhr.url(this.options.protocol + '//' + this.baseUrl() + this.url, {
       ...this.settings.params,
@@ -195,7 +203,8 @@ export default class StrongSocket {
     this.connectSchedule = setTimeout(() => {
       document.body.classList.add('offline');
       document.body.classList.remove('online');
-      if (!this.tryOtherUrl) {
+      $('#network-status').text(siteTrans('reconnecting'));
+      if (!this.tryOtherUrl && navigator.onLine) {
         // if this was set earlier, we've already logged the error
         this.tryOtherUrl = true;
         lichess.log(
@@ -308,7 +317,8 @@ export default class StrongSocket {
     }
     if (e.wasClean && e.code < 1002) return;
 
-    lichess.log(`${sri ? 'sri ' + sri : ''} unclean close ${e.code} ${url} ${e.reason}`);
+    if (navigator.onLine)
+      lichess.log(`${sri ? 'sri ' + sri : ''} unclean close ${e.code} ${url} ${e.reason}`);
     this.tryOtherUrl = true;
     clearTimeout(this.pingSchedule);
   };