fix: Substantially reduce cases where errors block whole card (#1764)

dermotduffy · Dec 16, 2024 · dab9ff3 · dab9ff3
1 parent b6fb821
commit dab9ff3
Show file tree

Hide file tree

Showing 25 changed files with 327 additions and 405 deletions.
diff --git a/src/components-lib/live/live-controller.ts b/src/components-lib/live/live-controller.ts
@@ -1,6 +1,6 @@
 import { LitElement, ReactiveController } from 'lit';
 import { FrigateCardMessageEventTarget } from '../../components/message.js';
-import { MediaLoadedInfo, Message } from '../../types.js';
+import { MediaLoadedInfo } from '../../types.js';
 import {
   FrigateCardMediaLoadedEventTarget,
   dispatchExistingMediaLoadedInfoAsEvent,
@@ -38,16 +38,11 @@ export class LiveController implements ReactiveController {
   // foreground and background (in preload mode).
   protected _intersectionObserver: IntersectionObserver;
 
-  // Whether or not to allow updates.
-  protected _messageReceived = false;
-
   // MediaLoadedInfo object and target from the underlying live media. In the
   // case of pre-loading these may be propagated later (from the original
   // source).
   protected _lastMediaLoadedInfo: LastMediaLoadedInfo | null = null;
 
-  protected _renderEpoch = 0;
-
   constructor(host: LiveControllerHost) {
     this._host = host;
 
@@ -58,50 +53,22 @@ export class LiveController implements ReactiveController {
     );
   }
 
-  public shouldUpdate(): boolean {
-    // Don't process updates if it's in the background and a message was
-    // received (otherwise an error message thrown by the background live
-    // component may continually be re-spammed hitting performance).
-    return !(this._inBackground && this._messageReceived);
-  }
-
   public hostConnected(): void {
     this._intersectionObserver.observe(this._host);
 
     this._host.addEventListener('frigate-card:media:loaded', this._handleMediaLoaded);
-    this._host.addEventListener('frigate-card:message', this._handleMessage);
   }
 
   public hostDisconnected(): void {
     this._intersectionObserver.disconnect();
 
     this._host.removeEventListener('frigate-card:media:loaded', this._handleMediaLoaded);
-    this._host.removeEventListener('frigate-card:message', this._handleMessage);
-  }
-
-  public clearMessageReceived(): void {
-    this._messageReceived = false;
   }
 
   public isInBackground(): boolean {
     return this._inBackground;
   }
 
-  public getRenderEpoch(): number {
-    return this._renderEpoch;
-  }
-
-  protected _handleMessage = (ev: CustomEvent<Message>): void => {
-    this._messageReceived = true;
-
-    if (this._inBackground) {
-      ev.stopPropagation();
-
-      // Force the whole DOM to re-render next time.
-      this._renderEpoch++;
-    }
-  };
-
   protected _handleMediaLoaded = (ev: CustomEvent<MediaLoadedInfo>): void => {
     this._lastMediaLoadedInfo = {
       source: ev.composedPath()[0],
@@ -117,7 +84,7 @@ export class LiveController implements ReactiveController {
     const wasInBackground = this._inBackground;
     this._inBackground = !entries.some((entry) => entry.isIntersecting);
 
-    if (!this._inBackground && !this._messageReceived && this._lastMediaLoadedInfo) {
+    if (!this._inBackground && this._lastMediaLoadedInfo) {
       // If this isn't being rendered in the background, the last render did not
       // generate a message and there's a saved MediaInfo, dispatch it upwards.
       dispatchExistingMediaLoadedInfoAsEvent(

diff --git a/src/components-lib/live/utils/dispatch-live-error.ts b/src/components-lib/live/utils/dispatch-live-error.ts
@@ -0,0 +1,5 @@
+import { dispatchFrigateCardEvent } from '../../../utils/basic';
+
+export function dispatchLiveErrorEvent(element: EventTarget): void {
+  dispatchFrigateCardEvent(element, 'live:error');
+}
diff --git a/src/components/image.ts b/src/components/image.ts
@@ -8,7 +8,7 @@ import {
   TemplateResult,
   unsafeCSS,
 } from 'lit';
-import { customElement, property } from 'lit/decorators.js';
+import { customElement, property, state } from 'lit/decorators.js';
 import { live } from 'lit/directives/live.js';
 import { createRef, ref, Ref } from 'lit/directives/ref.js';
 import isEqual from 'lodash-es/isEqual';
@@ -18,7 +18,7 @@ import { CameraConfig, ImageMode, ImageViewConfig } from '../config/types.js';
 import defaultImage from '../images/frigate-bird-in-sky.jpg';
 import { localize } from '../localize/localize.js';
 import imageStyle from '../scss/image.scss';
-import { FrigateCardMediaPlayer, MediaLoadedInfo } from '../types.js';
+import { FrigateCardMediaPlayer, MediaLoadedInfo, Message } from '../types.js';
 import { contentsChanged } from '../utils/basic.js';
 import { isHassDifferent } from '../utils/ha';
 import {
@@ -28,7 +28,7 @@ import {
   dispatchMediaPlayEvent,
 } from '../utils/media-info.js';
 import { View } from '../view/view.js';
-import { dispatchErrorMessageEvent } from './message.js';
+import { renderMessage } from './message.js';
 
 // See TOKEN_CHANGE_INTERVAL in https://github.com/home-assistant/core/blob/dev/homeassistant/components/camera/__init__.py .
 const HASS_REJECTION_CUTOFF_MS = 5 * 60 * 1000;
@@ -53,6 +53,9 @@ export class FrigateCardImage extends LitElement implements FrigateCardMediaPlay
   @property({ attribute: false, hasChanged: contentsChanged })
   public imageConfig?: ImageViewConfig;
 
+  @state()
+  protected _message: Message | null = null;
+
   protected _refImage: Ref<HTMLImageElement> = createRef();
 
   protected _cachedValueController?: CachedValueController<string>;
@@ -175,6 +178,10 @@ export class FrigateCardImage extends LitElement implements FrigateCardMediaPlay
     if (!this._cachedValueController?.value) {
       this._cachedValueController?.updateValue();
     }
+
+    if (['imageConfig', 'view'].some((prop) => changedProps.has(prop))) {
+      this._message = null;
+    }
   }
 
   /**
@@ -211,6 +218,7 @@ export class FrigateCardImage extends LitElement implements FrigateCardMediaPlay
    */
   disconnectedCallback(): void {
     this._cachedValueController?.stopTimer();
+    this._message = null;
     document.removeEventListener('visibilitychange', this._boundVisibilityHandler);
     super.disconnectedCallback();
   }
@@ -329,6 +337,10 @@ export class FrigateCardImage extends LitElement implements FrigateCardMediaPlay
   }
 
   protected render(): TemplateResult | void {
+    if (this._message) {
+      return renderMessage(this._message);
+    }
+
     const src = this._cachedValueController?.value;
     // Note the use of live() below to ensure the update will restore the image
     // src if it's been changed via _forceSafeImage().
@@ -363,9 +375,11 @@ export class FrigateCardImage extends LitElement implements FrigateCardMediaPlay
               } else if (mode === 'url') {
                 // In url mode, the user likely specified a URL that cannot be
                 // resolved. Show an error message.
-                dispatchErrorMessageEvent(this, localize('error.image_load_error'), {
+                this._message = {
+                  type: 'error',
+                  message: localize('error.image_load_error'),
                   context: this.imageConfig,
-                });
+                };
               }
             }}
           />

diff --git a/src/components/live/index.ts b/src/components/live/index.ts
@@ -1,13 +1,5 @@
-import {
-  CSSResultGroup,
-  html,
-  LitElement,
-  PropertyValues,
-  TemplateResult,
-  unsafeCSS,
-} from 'lit';
+import { CSSResultGroup, html, LitElement, TemplateResult, unsafeCSS } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
-import { keyed } from 'lit/directives/keyed.js';
 import { CameraManager } from '../../camera-manager/manager.js';
 import { ConditionsManagerEpoch } from '../../card-controller/conditions-manager.js';
 import { ReadonlyMicrophoneManager } from '../../card-controller/microphone-manager.js';
@@ -53,15 +45,6 @@ export class FrigateCardLive extends LitElement {
 
   protected _controller = new LiveController(this);
 
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  protected shouldUpdate(_changedProps: PropertyValues): boolean {
-    return this._controller.shouldUpdate();
-  }
-
-  protected willUpdate(): void {
-    this._controller.clearMessageReceived();
-  }
-
   protected render(): TemplateResult | void {
     if (!this.hass || !this.nonOverriddenLiveConfig || !this.cameraManager) {
       return;
@@ -73,28 +56,22 @@ export class FrigateCardLive extends LitElement {
     //   carousel (not necessarily the selected camera).
     // - Various events are captured to prevent them propagating upwards if the
     //   card is in the background.
-    // - The entire returned template is keyed to allow for the whole template
-    //   to be re-rendered in certain circumstances (specifically: if a message
-    //   is received when the card is in the background).
-    return html`${keyed(
-      this._controller.getRenderEpoch(),
-      html`
-        <frigate-card-live-grid
-          .hass=${this.hass}
-          .viewManagerEpoch=${this.viewManagerEpoch}
-          .nonOverriddenLiveConfig=${this.nonOverriddenLiveConfig}
-          .overriddenLiveConfig=${this.overriddenLiveConfig}
-          .inBackground=${this._controller.isInBackground()}
-          .conditionsManagerEpoch=${this.conditionsManagerEpoch}
-          .overrides=${this.overrides}
-          .cardWideConfig=${this.cardWideConfig}
-          .cameraManager=${this.cameraManager}
-          .microphoneManager=${this.microphoneManager}
-          .triggeredCameraIDs=${this.triggeredCameraIDs}
-        >
-        </frigate-card-live-grid>
-      `,
-    )}`;
+    return html`
+      <frigate-card-live-grid
+        .hass=${this.hass}
+        .viewManagerEpoch=${this.viewManagerEpoch}
+        .nonOverriddenLiveConfig=${this.nonOverriddenLiveConfig}
+        .overriddenLiveConfig=${this.overriddenLiveConfig}
+        .inBackground=${this._controller.isInBackground()}
+        .conditionsManagerEpoch=${this.conditionsManagerEpoch}
+        .overrides=${this.overrides}
+        .cardWideConfig=${this.cardWideConfig}
+        .cameraManager=${this.cameraManager}
+        .microphoneManager=${this.microphoneManager}
+        .triggeredCameraIDs=${this.triggeredCameraIDs}
+      >
+      </frigate-card-live-grid>
+    `;
   }
 
   static get styles(): CSSResultGroup {

diff --git a/src/components/live/provider.ts b/src/components/live/provider.ts
@@ -23,14 +23,14 @@ import { localize } from '../../localize/localize.js';
 import liveProviderStyle from '../../scss/live-provider.scss';
 import { ExtendedHomeAssistant, FrigateCardMediaPlayer } from '../../types.js';
 import { aspectRatioToString } from '../../utils/basic.js';
-import { getStateObjOrDispatchError } from '../../utils/get-state-obj.js';
 import { dispatchMediaUnloadedEvent } from '../../utils/media-info.js';
 import { updateElementStyleFromMediaLayoutConfig } from '../../utils/media-layout.js';
 import { playMediaMutingIfNecessary } from '../../utils/media.js';
 import { renderMessage } from '../message.js';
 import '../next-prev-control.js';
 import '../ptz.js';
 import '../surround.js';
+import { dispatchLiveErrorEvent } from '../../components-lib/live/utils/dispatch-live-error.js';
 
 @customElement('frigate-card-live-provider')
 export class FrigateCardLiveProvider
@@ -71,6 +71,9 @@ export class FrigateCardLiveProvider
   @state()
   protected _isVideoMediaLoaded = false;
 
+  @state()
+  protected _hasProviderError = false;
+
   protected _refProvider: Ref<LitElement & FrigateCardMediaPlayer> = createRef();
 
   // A note on dynamic imports:
@@ -165,7 +168,9 @@ export class FrigateCardLiveProvider
     return (
       !!this.cameraConfig?.camera_entity &&
       !!this.hass &&
-      !!this.liveConfig?.show_image_during_load
+      !!this.liveConfig?.show_image_during_load &&
+      // Do not continue to show image during loading if an error has occurred.
+      !this._hasProviderError
     );
   }
 
@@ -177,6 +182,10 @@ export class FrigateCardLiveProvider
     this._isVideoMediaLoaded = true;
   }
 
+  protected _providerErrorHandler(): void {
+    this._hasProviderError = true;
+  }
+
   protected willUpdate(changedProps: PropertyValues): void {
     if (changedProps.has('load')) {
       if (!this.load) {
@@ -263,17 +272,30 @@ export class FrigateCardLiveProvider
     };
 
     if (provider === 'ha' || provider === 'image') {
-      const stateObj = getStateObjOrDispatchError(this, this.hass, this.cameraConfig);
+      if (!this.cameraConfig?.camera_entity) {
+        dispatchLiveErrorEvent(this);
+        return renderMessage({
+          message: localize('error.no_live_camera'),
+          type: 'error',
+          icon: 'mdi:camera',
+          context: this.cameraConfig,
+        });
+      }
+
+      const stateObj = this.hass.states[this.cameraConfig.camera_entity];
       if (!stateObj) {
-        return;
+        dispatchLiveErrorEvent(this);
+        return renderMessage({
+          message: localize('error.live_camera_not_found'),
+          type: 'error',
+          icon: 'mdi:camera',
+          context: this.cameraConfig,
+        });
       }
+
       if (stateObj.state === 'unavailable') {
+        dispatchLiveErrorEvent(this);
         dispatchMediaUnloadedEvent(this);
-
-        // An unavailable camera gets a message rendered in place vs dispatched,
-        // as this may be a common occurrence (e.g. Frigate cameras that stop
-        // receiving frames). Otherwise a single temporarily unavailable camera
-        // would render a whole carousel inoperable.
         return renderMessage({
           message: `${localize('error.live_camera_unavailable')}${
             this.label ? `: ${this.label}` : ''
@@ -291,6 +313,7 @@ export class FrigateCardLiveProvider
             ${ref(this._refProvider)}
             .hass=${this.hass}
             .cameraConfig=${this.cameraConfig}
+            @frigate-card:live:error=${() => this._providerErrorHandler()}
             @frigate-card:media:loaded=${(ev: Event) => {
               if (provider === 'image') {
                 // Only count the media has loaded if the required provider is
@@ -311,6 +334,7 @@ export class FrigateCardLiveProvider
             .hass=${this.hass}
             .cameraConfig=${this.cameraConfig}
             ?controls=${this.liveConfig.controls.builtin}
+            @frigate-card:live:error=${() => this._providerErrorHandler()}
             @frigate-card:media:loaded=${this._videoMediaShowHandler.bind(this)}
           >
           </frigate-card-live-ha>`
@@ -324,6 +348,7 @@ export class FrigateCardLiveProvider
               .microphoneStream=${this.microphoneStream}
               .microphoneConfig=${this.liveConfig.microphone}
               ?controls=${this.liveConfig.controls.builtin}
+              @frigate-card:live:error=${() => this._providerErrorHandler()}
               @frigate-card:media:loaded=${this._videoMediaShowHandler.bind(this)}
             >
             </frigate-card-live-go2rtc>`
@@ -336,6 +361,7 @@ export class FrigateCardLiveProvider
                 .cameraEndpoints=${this.cameraEndpoints}
                 .cardWideConfig=${this.cardWideConfig}
                 ?controls=${this.liveConfig.controls.builtin}
+                @frigate-card:live:error=${() => this._providerErrorHandler()}
                 @frigate-card:media:loaded=${this._videoMediaShowHandler.bind(this)}
               >
               </frigate-card-live-webrtc-card>`
@@ -347,6 +373,7 @@ export class FrigateCardLiveProvider
                   .cameraConfig=${this.cameraConfig}
                   .cameraEndpoints=${this.cameraEndpoints}
                   .cardWideConfig=${this.cardWideConfig}
+                  @frigate-card:live:error=${() => this._providerErrorHandler()}
                   @frigate-card:media:loaded=${this._videoMediaShowHandler.bind(this)}
                 >
                 </frigate-card-live-jsmpeg>`