From 4712a320b8c263b03a1d01969365bad6adbe5469 Mon Sep 17 00:00:00 2001
From: Dermot Duffy <dermot.duffy@gmail.com>
Date: Mon, 26 Aug 2024 16:36:44 -0700
Subject: [PATCH] Fix auto media action problem .

---
 src/components-lib/live/live-controller.ts           |  3 +++
 .../plugins/auto-media-actions/auto-media-actions.ts | 12 ++++++------
 tests/components-lib/live/live-controller.test.ts    |  1 +
 3 files changed, 10 insertions(+), 6 deletions(-)

diff --git a/src/components-lib/live/live-controller.ts b/src/components-lib/live/live-controller.ts
index e7037feb..b7fa45c6 100644
--- a/src/components-lib/live/live-controller.ts
+++ b/src/components-lib/live/live-controller.ts
@@ -50,6 +50,9 @@ export class LiveController implements ReactiveController {
 
   constructor(host: LiveControllerHost) {
     this._host = host;
+
+    host.addController(this);
+
     this._intersectionObserver = new IntersectionObserver(
       this._intersectionHandler.bind(this),
     );
diff --git a/src/utils/embla/plugins/auto-media-actions/auto-media-actions.ts b/src/utils/embla/plugins/auto-media-actions/auto-media-actions.ts
index 9086cf62..2ed70429 100644
--- a/src/utils/embla/plugins/auto-media-actions/auto-media-actions.ts
+++ b/src/utils/embla/plugins/auto-media-actions/auto-media-actions.ts
@@ -50,7 +50,7 @@ export function AutoMediaActions(
   let options: OptionsType;
   let emblaApi: EmblaCarouselType;
   let slides: HTMLElement[];
-  let containerIntersecting: boolean | null = null;
+  let viewportIntersecting: boolean | null = null;
   const microphoneMuteTimer = new Timer();
 
   const intersectionObserver: IntersectionObserver = new IntersectionObserver(
@@ -92,7 +92,7 @@ export function AutoMediaActions(
     emblaApi.on('destroy', mute);
 
     document.addEventListener('visibilitychange', visibilityHandler);
-    intersectionObserver.observe(emblaApi.containerNode());
+    intersectionObserver.observe(emblaApi.rootNode());
 
     if (
       options.autoUnmuteConditions?.includes('microphone') ||
@@ -184,14 +184,14 @@ export function AutoMediaActions(
   }
 
   function intersectionHandler(entries: IntersectionObserverEntry[]): void {
-    const wasIntersecting = containerIntersecting;
-    containerIntersecting = entries.some((entry) => entry.isIntersecting);
+    const wasIntersecting = viewportIntersecting;
+    viewportIntersecting = entries.some((entry) => entry.isIntersecting);
 
-    if (wasIntersecting !== null && wasIntersecting !== containerIntersecting) {
+    if (wasIntersecting !== null && wasIntersecting !== viewportIntersecting) {
       // If the live view is preloaded (i.e. in the background) we may need to
       // take media actions, e.g. muting a live stream that is now running in
       // the background, so we act even if the new state is hidden.
-      actOnVisibilityChange(containerIntersecting);
+      actOnVisibilityChange(viewportIntersecting);
     }
   }
 
diff --git a/tests/components-lib/live/live-controller.test.ts b/tests/components-lib/live/live-controller.test.ts
index 85fd3b31..c942b786 100644
--- a/tests/components-lib/live/live-controller.test.ts
+++ b/tests/components-lib/live/live-controller.test.ts
@@ -29,6 +29,7 @@ describe('LiveController', () => {
     parent.addEventListener('frigate-card:message', eventListener);
 
     const controller = new LiveController(host);
+    expect(host.addController).toBeCalled();
 
     controller.hostConnected();