better display of reconnect timer

src/i18n/en.json

@@ -68,7 +68,7 @@
   "sidepanel_title_reset": "Reset Password",
   "sidepanel_title_archive": "Archived Chats",
   "update_available": "Update available. <a href=\"\">Reload</a>.",
-  "reconnect_countdown": "Disconnected. Reconnecting in {seconds}s…",
+  "reconnect_countdown": "Disconnected. Reconnecting in {seconds}…",
   "reconnect_now": "Try now",
   "phone_dative": "phone",
   "email_dative": "email",

src/i18n/ru.json

@@ -120,7 +120,7 @@
   "badge_owner": "влад.",
   "update_available": "Есть новая версия приложения. <a href=\"\">Обновить</a>.",
   "user_not_found": "Не найден",
-  "reconnect_countdown": "Нет связи. Подключение через {seconds}с…",
+  "reconnect_countdown": "Нет связи. Подключение через {seconds}…",
   "reconnect_now": "Подключить сейчас.",
   "save_attachment": "сохранить",
   "menu_item_archive_topic": "В архив",

src/lib/strformat.js

@@ -14,6 +14,14 @@ export function shortDateFormat(then, locale) {
     {hour12: false, year: 'numeric', month: 'short', day: 'numeric', hour: '2-digit', minute: '2-digit'});
 }
 
+// Convert seconds to minutes:seconds, i.e. 156 sec -> 2:36.
+export function secondsToTime(seconds) {
+  const min = Math.floor(seconds % 3600 / 60);
+  let sec = seconds % 60;
+  sec = sec < 10 ? `0${sec}` : sec;
+  return `${min}:${sec}`;
+}
+
 // Convert a number of bytes to human-readable format.
 export function bytesToHumanSize(bytes) {
   if (!bytes || bytes == 0) {

src/messages.json

@@ -69,7 +69,7 @@
     "sidepanel_title_reset": "Reset Password",
     "sidepanel_title_archive": "Archived Chats",
     "update_available": "Update available. <a href=\"\">Reload</a>.",
-    "reconnect_countdown": "Disconnected. Reconnecting in {seconds}s…",
+    "reconnect_countdown": "Disconnected. Reconnecting in {seconds}…",
     "reconnect_now": "Try now",
     "phone_dative": "phone",
     "email_dative": "email",
@@ -256,7 +256,7 @@
     "badge_owner": "влад.",
     "update_available": "Есть новая версия приложения. <a href=\"\">Обновить</a>.",
     "user_not_found": "Не найден",
-    "reconnect_countdown": "Нет связи. Подключение через {seconds}с…",
+    "reconnect_countdown": "Нет связи. Подключение через {seconds}…",
     "reconnect_now": "Подключить сейчас.",
     "save_attachment": "сохранить",
     "menu_item_archive_topic": "В архив",

src/views/tinode-web.jsx

@@ -19,6 +19,7 @@ import { base64ReEncode, makeImageUrl } from '../lib/blob-helpers.js';
 import { detectServerAddress, isLocalHost, isSecureConnection } from '../lib/host-name.js';
 import LocalStorageUtil from '../lib/local-storage.js';
 import HashNavigation from '../lib/navigation.js';
+import { secondsToTime } from '../lib/strformat.js'
 import { updateFavicon } from '../lib/utils.js';
 
 // Sound to play on message received.
@@ -32,7 +33,7 @@ const messages = defineMessages({
   },
   reconnect_countdown: {
     id: 'reconnect_countdown',
-    defaultMessage: 'Disconnected. Reconnecting in {seconds}s…',
+    defaultMessage: 'Disconnected. Reconnecting in {seconds}…',
     description: 'Message shown when an app update is available.'
   },
   reconnect_now: {
@@ -395,8 +396,9 @@ class TinodeWeb extends React.Component {
     let count = sec / 1000;
     count = count | count;
     this.reconnectCountdown = setInterval(() => {
+      const timeLeft = (count > 99) ? secondsToTime(count) : count;
       this.handleError(
-        formatHTMLMessage(messages.reconnect_countdown, {seconds: count}),
+        formatHTMLMessage(messages.reconnect_countdown, {seconds: timeLeft}),
         'warn',
         () => {
           clearInterval(this.reconnectCountdown);