Correctly record unloaded media.

src/components/image.ts

@@ -21,8 +21,9 @@ import { updateElementStyleFromMediaLayoutConfig } from '../utils/media-layout.j
 import { dispatchMediaLoadedEvent } from '../utils/media-info.js';
 import { View } from '../view.js';
 import { dispatchErrorMessageEvent } from './message.js';
+import { contentsChanged } from '../utils/basic.js';
 
-// See: https://github.com/home-assistant/core/blob/dev/homeassistant/components/camera/__init__.py#L101
+// 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;
 
 @customElement('frigate-card-image')
@@ -36,7 +37,10 @@ export class FrigateCardImage extends LitElement {
   @property({ attribute: false })
   public cameraConfig?: CameraConfig;
 
-  @property({ attribute: false })
+  // Using contentsChanged to ensure overridden configs (e.g. when the
+  // 'show_image_during_load' option is true for live views, an overridden
+  // config may be used here).
+  @property({ attribute: false, hasChanged: contentsChanged })
   public imageConfig?: ImageViewConfig;
 
   protected _refImage: Ref<HTMLImageElement> = createRef();

src/components/live.ts

@@ -106,7 +106,7 @@ export class FrigateCardLive extends LitElement {
 
   // MediaLoadedInfo object and message from the underlying live object. In the
   // case of pre-loading these may be propagated upwards later.
-  protected _savedMediaLoadedInfo: MediaLoadedInfo | null = null;
+  protected _backgroundMediaLoadedInfo: MediaLoadedInfo | null = null;
   protected _messageReceivedPostRender = false;
   protected _renderKey = 0;
 
@@ -127,11 +127,12 @@ export class FrigateCardLive extends LitElement {
     if (
       !this._inBackground &&
       !this._messageReceivedPostRender &&
-      this._savedMediaLoadedInfo
+      this._backgroundMediaLoadedInfo
     ) {
       // 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(this, this._savedMediaLoadedInfo);
+      dispatchExistingMediaLoadedInfoAsEvent(this, this._backgroundMediaLoadedInfo);
+      this._backgroundMediaLoadedInfo = null;
     }
 
     // Trigger a re-render which may be necessary if the prior render resulted
@@ -223,8 +224,8 @@ export class FrigateCardLive extends LitElement {
           }
         }}
         @frigate-card:media:loaded=${(ev: CustomEvent<MediaLoadedInfo>) => {
-          this._savedMediaLoadedInfo = ev.detail;
           if (this._inBackground) {
+            this._backgroundMediaLoadedInfo = ev.detail;
             ev.stopPropagation();
           }
         }}
@@ -735,6 +736,13 @@ export class FrigateCardLiveProvider extends LitElement {
     );
   }
 
+  /**
+   * Component disconnected callback.
+   */
+  disconnectedCallback(): void {
+    this._isVideoMediaLoaded = false;
+  }
+
   /**
    * Record that video media is being shown.
    */

src/components/media-carousel.ts

@@ -293,6 +293,7 @@ export class FrigateCardMediaCarousel extends LitElement {
     this._resizeObserver.disconnect();
     this._intersectionObserver.disconnect();
 
+    this._mediaLoadedInfo = {};
     super.disconnectedCallback();
   }