From fff6d7ecad2c77625e51d868c1801157342f8aa7 Mon Sep 17 00:00:00 2001 From: Dermot Duffy Date: Thu, 23 Jun 2022 05:08:53 +0000 Subject: [PATCH] Improve disconnection/reconnection UX --- .vscode/i18n-ally-reviews.yml | 10 ++++++++++ .vscode/settings.json | 15 +++++++-------- src/card.ts | 24 +++++++++++++++++++++--- src/components/message.ts | 20 ++++++++++---------- src/localize/languages/en.json | 1 + src/localize/languages/pt-BR.json | 1 + src/scss/message.scss | 24 ++++++++++++++++++++++++ src/types.ts | 1 + 8 files changed, 75 insertions(+), 21 deletions(-) create mode 100644 .vscode/i18n-ally-reviews.yml diff --git a/.vscode/i18n-ally-reviews.yml b/.vscode/i18n-ally-reviews.yml new file mode 100644 index 00000000..8e914e43 --- /dev/null +++ b/.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' diff --git a/.vscode/settings.json b/.vscode/settings.json index 3ec3801e..a4a10938 100644 --- a/.vscode/settings.json +++ b/.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 -} \ No newline at end of file + "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 +} diff --git a/src/card.ts b/src/card.ts index b52ac763..32322436 100644 --- a/src/card.ts +++ b/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, diff --git a/src/components/message.ts b/src/components/message.ts index e7a1574d..e4f21fa5 100644 --- a/src/components/message.ts +++ b/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 {
${this.message ? html`${this.message}` : ''} + ${this.dotdotdot ? html`` : ``} ${this.context ? html`
${JSON.stringify(this.context, null, 2)}
` : ''} @@ -60,6 +58,7 @@ export class FrigateCardErrorMessage extends LitElement { ${localize('error.troubleshooting')}.`} .icon=${'mdi:alert-circle'} .context=${this.message.context} + .dotdotdot=${this.message.dotdotdot} > `; } @@ -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` `; - } else if (message.type == 'info') { + } else if (message.type === 'info') { return html` `; } 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; } diff --git a/src/localize/languages/en.json b/src/localize/languages/en.json index 3630cf51..98302f54 100644 --- a/src/localize/languages/en.json +++ b/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", diff --git a/src/localize/languages/pt-BR.json b/src/localize/languages/pt-BR.json index 5ecb1694..8cbc47c5 100644 --- a/src/localize/languages/pt-BR.json +++ b/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", diff --git a/src/scss/message.scss b/src/scss/message.scss index 67d0b0b3..1f721aca 100644 --- a/src/scss/message.scss +++ b/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; +} diff --git a/src/types.ts b/src/types.ts index 449e47de..3cd534d7 100644 --- a/src/types.ts +++ b/src/types.ts @@ -1193,6 +1193,7 @@ export interface Message { type: 'error' | 'info'; icon?: string; context?: unknown; + dotdotdot?: boolean; } export interface StateParameters {