Improve disconnection/reconnection UX

.vscode/i18n-ally-reviews.yml

@@ -0,0 +1,10 @@
+# Review comments generated by i18n-ally. Please commit this file.
+
+reviews:
+  error.reconnecting:
+    locales:
+      pt-BR:
+        translation_candidate:
+          source: en
+          text: Reconectando
+          time: '2022-06-23T03:45:39.286Z'

.vscode/settings.json

@@ -1,9 +1,8 @@
 {
-    "i18n-ally.localesPaths": [
-        "src/localize/languages"
-    ],
-    "i18n-ally.keystyle": "nested",
-    "i18n-ally.sortKeys": true,
-    "i18n-ally.keepFulfilled": true,
-    "i18n-ally.editor.preferEditor": true
-}
+  "i18n-ally.localesPaths": ["src/localize/languages"],
+  "i18n-ally.keystyle": "nested",
+  "i18n-ally.sortKeys": true,
+  "i18n-ally.keepFulfilled": true,
+  "i18n-ally.editor.preferEditor": true,
+  "i18n-ally.translate.saveAsCandidates": true
+}

src/card.ts

@@ -1106,8 +1106,26 @@ export class FrigateCard extends LitElement {
 
     if (oldHass) {
       const selectedCamera = this._getSelectedCameraConfig();
-      if (this._getConfig().view.scan.enabled && this._updateTriggeredCameras(oldHass)) {
-        shouldUpdate ||= true;
+      if (oldHass.connected !== !!this._hass?.connected) {
+        if (!this._hass?.connected) {
+          this._setMessageAndUpdate(
+            {
+              message: localize('error.reconnecting'),
+              icon: 'mdi:lan-disconnect',
+              type: 'info',
+              dotdotdot: true,
+            },
+            true,
+          );
+        } else {
+          this._changeView();
+        }
+        shouldUpdate = true;
+      } else if (
+        this._getConfig().view.scan.enabled &&
+        this._updateTriggeredCameras(oldHass)
+      ) {
+        shouldUpdate = true;
       } else if (
         // Home Assistant pumps a lot of updates through. Re-rendering the card is
         // necessary at times (e.g. to update the 'clip' view as new clips
@@ -1125,7 +1143,7 @@ export class FrigateCard extends LitElement {
         // default. Note that as per the Lit lifecycle, the setting of the view
         // itself will not trigger an *additional* re-render here.
         this._changeView();
-        shouldUpdate ||= true;
+        shouldUpdate = true;
       } else {
         shouldUpdate ||= isHassDifferent(
           this._hass,

src/components/message.ts

@@ -1,10 +1,4 @@
-import {
-  CSSResultGroup,
-  html,
-  LitElement,
-  TemplateResult,
-  unsafeCSS,
-} from 'lit';
+import { CSSResultGroup, html, LitElement, TemplateResult, unsafeCSS } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 import { TROUBLESHOOTING_URL } from '../const.js';
 import { localize } from '../localize/localize.js';
@@ -23,6 +17,9 @@ export class FrigateCardMessage extends LitElement {
   @property({ attribute: false })
   public icon?: string;
 
+  @property({ attribute: true, type: Boolean })
+  public dotdotdot?: boolean;
+
   // Render the menu.
   protected render(): TemplateResult {
     const icon = this.icon ? this.icon : 'mdi:information-outline';
@@ -33,6 +30,7 @@ export class FrigateCardMessage extends LitElement {
         </div>
         <div class="contents">
           <span> ${this.message ? html`${this.message}` : ''} </span>
+          ${this.dotdotdot ? html`<span class="dotdotdot"></span>` : ``}
           ${this.context
             ? html`<pre>${JSON.stringify(this.context, null, 2)}</pre>`
             : ''}
@@ -60,6 +58,7 @@ export class FrigateCardErrorMessage extends LitElement {
         <a href="${TROUBLESHOOTING_URL}"> ${localize('error.troubleshooting')}</a>.`}
       .icon=${'mdi:alert-circle'}
       .context=${this.message.context}
+      .dotdotdot=${this.message.dotdotdot}
     >
     </frigate-card-message>`;
   }
@@ -89,15 +88,16 @@ export class FrigateCardProgressIndicator extends LitElement {
 }
 
 export function renderMessage(message: Message): TemplateResult {
-  if (message.type == 'error') {
+  if (message.type === 'error') {
     return html` <frigate-card-error-message
       .message=${message}
     ></frigate-card-error-message>`;
-  } else if (message.type == 'info') {
+  } else if (message.type === 'info') {
     return html` <frigate-card-message
       .message=${message.message}
       .icon=${message.icon}
       .context=${message.context}
+      .dotdotdot=${message.dotdotdot}
     ></frigate-card-message>`;
   }
   return html``;
@@ -165,7 +165,7 @@ export function dispatchFrigateCardErrorEvent(
 
 declare global {
   interface HTMLElementTagNameMap {
-		"frigate-card-progress-indicator": FrigateCardProgressIndicator
+    'frigate-card-progress-indicator': FrigateCardProgressIndicator;
     'frigate-card-error-message': FrigateCardErrorMessage;
     'frigate-card-message': FrigateCardMessage;
   }

src/localize/languages/en.json

@@ -328,6 +328,7 @@
     "no_camera_name": "Could not determine a Frigate camera name for camera (or one of its dependents), please specify either 'camera_entity' or 'camera_name'",
     "no_cameras": "No valid cameras found, you must configure at least one camera entry",
     "no_live_camera": "The camera_entity parameter must be set and valid for this live provider",
+    "reconnecting": "Reconnecting",
     "timeline_no_cameras": "No Frigate cameras to show in timeline",
     "troubleshooting": "Check troubleshooting",
     "undecodable_response": "Could not decode response from Home Assistant for request",

src/localize/languages/pt-BR.json

@@ -330,6 +330,7 @@
     "no_camera_name": "Não foi possível determinar o nome da câmera da Frigate, especifique 'camera_entity' ou 'camera_name' para a câmera a seguir",
     "no_cameras": "Nenhuma câmera válida encontrada, você deve configurar pelo menos uma câmera",
     "no_live_camera": "O parâmetro camera_entity deve ser definido e válido para este provedor ativo",
+    "reconnecting": "",
     "timeline_no_cameras": "Nenhuma câmera do Frigate para mostrar na linha do tempo",
     "troubleshooting": "Verifique a solução de problemas",
     "undecodable_response": "Não foi possível decodificar a resposta do Home Assistant para solicitação",

src/scss/message.scss

@@ -48,3 +48,27 @@ div.message div.icon {
   white-space: pre-wrap;
   word-break: break-all;
 }
+
+.dotdotdot:before {
+  @keyframes dots {
+    0%,
+    20% {
+      content: '.';
+    }
+    40% {
+      content: '..';
+    }
+    60% {
+      content: '...';
+    }
+    90%,
+    100% {
+      content: '';
+    }
+  }
+
+  animation: dots 2s linear infinite;
+  content: '';
+  display: inline-block;
+  width: 3em;
+}

src/types.ts

@@ -1193,6 +1193,7 @@ export interface Message {
   type: 'error' | 'info';
   icon?: string;
   context?: unknown;
+  dotdotdot?: boolean;
 }
 
 export interface StateParameters {