From 2097402c9d8aaaa35669bef775600ea6ceff8cc6 Mon Sep 17 00:00:00 2001
From: Dermot Duffy <dermot.duffy@gmail.com>
Date: Fri, 14 Jan 2022 21:28:18 -0800
Subject: [PATCH] Don't allow view to propagate upwards from a preloaded
 camera.

---
 src/card.ts            |  8 ++++----
 src/components/live.ts | 31 ++++++++++++++++++-------------
 2 files changed, 22 insertions(+), 17 deletions(-)

diff --git a/src/card.ts b/src/card.ts
index a0c3a7ba..3587535d 100644
--- a/src/card.ts
+++ b/src/card.ts
@@ -1,4 +1,3 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
 import {
   CSSResultGroup,
   LitElement,
@@ -114,8 +113,9 @@ console.info(
   'color: white; font-weight: bold; background: dimgray',
 );
 
-// This puts your card into the UI card picker dialog
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
 (window as any).customCards = (window as any).customCards || [];
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
 (window as any).customCards.push({
   type: 'frigate-card',
   name: localize('common.frigate_card'),
@@ -508,7 +508,7 @@ export class FrigateCard extends LitElement {
           return match.groups['camera'];
         }
       }
-    } catch (e: any) {
+    } catch (e: unknown) {
       // Pass.
     }
 
@@ -1225,7 +1225,7 @@ export class FrigateCard extends LitElement {
                 .conditionState=${this._conditionState}
                 .liveOverrides=${getOverridesByKey(this._getConfig().overrides, 'live')}
                 .cameras=${this._cameras}
-                .preload=${this._getConfig().live.preload && !this._view.is('live')}
+                .preloaded=${this._getConfig().live.preload && !this._view.is('live')}
                 class="${classMap(liveClasses)}"
               >
               </frigate-card-live>
diff --git a/src/components/live.ts b/src/components/live.ts
index 2bef05f8..b09ccc61 100644
--- a/src/components/live.ts
+++ b/src/components/live.ts
@@ -1,8 +1,3 @@
-// TODO autodetect live provider from cameras configuration, or allow explicit setting.
-// TODO config-mgmt move for live provider
-// TODO unroll webrtc object in camera config for parity with live provider?
-// TODO order of cameras may not be being preserved.
-// TODO the back-button issue raised on the PR
 // TODO verify README links worked correctly (e.g. basic cameras configuration)
 
 import {
@@ -86,17 +81,17 @@ export class FrigateCardLive extends LitElement {
   @property({ attribute: false })
   protected conditionState?: ConditionState;
 
-  set preload(preload: boolean) {
-    this._preload = preload;
+  set preloaded(preloaded: boolean) {
+    this._preloaded = preloaded;
 
-    if (!preload && this._savedMediaShowInfo) {
+    if (!preloaded && this._savedMediaShowInfo) {
       dispatchExistingMediaShowInfoAsEvent(this, this._savedMediaShowInfo);
     }
   }
 
   // Whether or not the live view is currently being preloaded.
   @state()
-  protected _preload?: boolean;
+  protected _preloaded?: boolean;
 
   // MediaShowInfo object from the underlying live object. In the case of
   // pre-loading it may be propagated upwards later.
@@ -108,7 +103,7 @@ export class FrigateCardLive extends LitElement {
    */
   protected _mediaShowHandler(e: CustomEvent<MediaShowInfo>): void {
     this._savedMediaShowInfo = e.detail;
-    if (this._preload) {
+    if (this._preloaded) {
       // If live is being pre-loaded, don't let the event propogate upwards yet
       // as the media is not really being shown.
       e.stopPropagation();
@@ -195,7 +190,7 @@ export class FrigateCardLive extends LitElement {
         .view=${this.view}
         .cameras=${this.cameras}
         .liveConfig=${this.liveConfig}
-        .preload=${this._preload}
+        .preloaded=${this._preloaded}
         .conditionState=${this.conditionState}
         .liveOverrides=${this.liveOverrides}
         @frigate-card:media-show=${this._mediaShowHandler}
@@ -204,6 +199,16 @@ export class FrigateCardLive extends LitElement {
           // re-fetched (which is necessary because the camera has changed).
           this.requestUpdate();
         }}
+        @frigate-card:change-view=${(ev: CustomEvent) => {
+          if (this._preloaded) {
+            // Don't allow change-view events to propagate upwards if the card
+            // is only preloaded rather than being live displayed. These events
+            // could be triggered if the camera is switched and the carousel
+            // moves to focus on that camera -- as the card isn't actually being
+            // displayed, do not allow the view to actually be updated.
+            ev.stopPropagation();
+          }
+        }}
       >
       </frigate-card-live-carousel>
       ${config.controls.thumbnails.mode === 'below' ? this.renderThumbnails(config) : ''}
@@ -236,7 +241,7 @@ export class FrigateCardLiveCarousel extends FrigateCardMediaCarousel {
   protected liveOverrides?: LiveOverrides;
 
   @property({ attribute: false })
-  protected preload?: boolean;
+  protected preloaded?: boolean;
 
   @property({ attribute: false })
   protected conditionState?: ConditionState;
@@ -252,7 +257,7 @@ export class FrigateCardLiveCarousel extends FrigateCardMediaCarousel {
     if (
       changedProperties.has('cameras') ||
       changedProperties.has('liveConfig') ||
-      changedProperties.has('preload')
+      changedProperties.has('preloaded')
     ) {
       // All of these properties may fundamentally change the contents/size of
       // the DOM, and the carousel should be reset when they change.