Fix media autoplay.

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 hadInitialIntersectionCall: boolean | null = false;
+  let containerIntersecting: boolean | null = null;
   const microphoneMuteTimer = new Timer();
 
   const intersectionObserver: IntersectionObserver = new IntersectionObserver(
@@ -184,15 +184,15 @@ export function AutoMediaActions(
   }
 
   function intersectionHandler(entries: IntersectionObserverEntry[]): void {
-    if (!hadInitialIntersectionCall) {
+    const wasIntersecting = containerIntersecting;
-      hadInitialIntersectionCall = true;
+    containerIntersecting = entries.some((entry) => entry.isIntersecting);
-      return;
-    }
 
-    // If the live view is preloaded (i.e. in the background) we may need to
+    if (wasIntersecting !== null && wasIntersecting !== containerIntersecting) {
-    // take media actions, e.g. muting a live stream that is now running in the
+      // If the live view is preloaded (i.e. in the background) we may need to
-    // background.
+      // take media actions, e.g. muting a live stream that is now running in
-    actOnVisibilityChange(entries.some((entry) => entry.isIntersecting));
+      // the background, so we act even if the new state is hidden.
+      actOnVisibilityChange(containerIntersecting);
+    }
   }
 
   function getPlayer(slide: HTMLElement | undefined): FrigateCardMediaPlayer | null {

tests/utils/embla/plugins/auto-media-actions/auto-media-actions.test.ts

@@ -315,7 +315,7 @@ describe('AutoMediaActions', () => {
 
     // Intersection observer always calls handler on creation (and we ignore
     // these first calls).
-    callIntersectionHandler(true);
+    callIntersectionHandler(false);
     callIntersectionHandler(true);
 
     expect(getPlayer(children[5], 'video')?.play).toBeCalled();