Merge pull request #1506 from dermotduffy/autoplay-intersection-issue

Fix issue that causes media to not correctly unmute

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),
     );

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);
     }
   }
 

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();