From 057d07a179f10266a5995534be3421f3da611322 Mon Sep 17 00:00:00 2001
From: Dermot Duffy <dermot.duffy@gmail.com>
Date: Tue, 8 Oct 2024 20:29:43 -0700
Subject: [PATCH] fix: Always play the media target after a HA tab change
 (#1627)

* fix: Always play the media target after a HA tab change

* Formatting
---
 src/components/live/live.ts | 59 +++++++++++++++++++++----------------
 1 file changed, 34 insertions(+), 25 deletions(-)

diff --git a/src/components/live/live.ts b/src/components/live/live.ts
index 1ed341b6..ab1ad49a 100644
--- a/src/components/live/live.ts
+++ b/src/components/live/live.ts
@@ -309,14 +309,6 @@ export class FrigateCardLiveCarousel extends LitElement {
     super.disconnectedCallback();
   }
 
-  updated(changedProperties: PropertyValues): void {
-    super.updated(changedProperties);
-
-    if (!this._mediaActionsController.hasRoot() && this._refCarousel.value) {
-      this._mediaActionsController.initialize(this._refCarousel.value);
-    }
-  }
-
   protected _getTransitionEffect(): TransitionEffect {
     return (
       this.overriddenLiveConfig?.transition_effect ??
@@ -366,23 +358,6 @@ export class FrigateCardLiveCarousel extends LitElement {
         }),
       });
     }
-
-    if (changedProps.has('viewManagerEpoch')) {
-      const view = this.viewManagerEpoch?.manager.getView();
-      const selectedCameraIndex = this._getSelectedCameraIndex();
-
-      if (this.viewFilterCameraID) {
-        this._mediaActionsController.setTarget(
-          selectedCameraIndex,
-          // Camera in this carousel is only selected if the camera from the
-          // view matches the filtered camera.
-          view?.camera === this.viewFilterCameraID,
-        );
-      } else {
-        // Carousel is not filtered, so the targeted camera is always selected.
-        this._mediaActionsController.setTarget(selectedCameraIndex, true);
-      }
-    }
   }
 
   protected _getPlugins(): EmblaCarouselPlugins {
@@ -664,6 +639,40 @@ export class FrigateCardLiveCarousel extends LitElement {
     `;
   }
 
+  protected _setMediaTarget(): void {
+    const view = this.viewManagerEpoch?.manager.getView();
+    const selectedCameraIndex = this._getSelectedCameraIndex();
+
+    if (this.viewFilterCameraID) {
+      this._mediaActionsController.setTarget(
+        selectedCameraIndex,
+        // Camera in this carousel is only selected if the camera from the
+        // view matches the filtered camera.
+        view?.camera === this.viewFilterCameraID,
+      );
+    } else {
+      // Carousel is not filtered, so the targeted camera is always selected.
+      this._mediaActionsController.setTarget(selectedCameraIndex, true);
+    }
+  }
+
+  public updated(changedProperties: PropertyValues): void {
+    super.updated(changedProperties);
+
+    let initialized = false;
+    if (!this._mediaActionsController.hasRoot() && this._refCarousel.value) {
+      this._mediaActionsController.initialize(this._refCarousel.value);
+      initialized = true;
+    }
+
+    // If the view has changed, or if the media actions controller has just been
+    // initialized, then call the necessary media action.
+    // See: https://github.com/dermotduffy/frigate-hass-card/issues/1626
+    if (initialized || changedProperties.has('viewManagerEpoch')) {
+      this._setMediaTarget();
+    }
+  }
+
   static get styles(): CSSResultGroup {
     return unsafeCSS(liveCarouselStyle);
   }