Add auto_play and auto_unmute for consistency.

src/components/embla-plugins/automedia.ts

@@ -1,18 +1,25 @@
 import { EmblaCarouselType, EmblaPluginType } from 'embla-carousel';
-import { AutoMuteCondition, AutoPauseCondition, FrigateCardMediaPlayer } from '../../types.js';
+import {
+  AutoMuteCondition,
+  AutoPauseCondition,
+  AutoPlayCondition,
+  AutoUnmuteCondition,
+  FrigateCardMediaPlayer,
+} from '../../types.js';
 
 export type AutoMediaPluginOptionsType = {
   playerSelector: string;
-  autoPlayWhenVisible?: boolean;
-  autoUnmuteWhenVisible?: boolean;
+
+  // Note: Neither play nor unmute will activate on selection. The caller is
+  // expected to call the methods manually when the media is actually loaded
+  // (not just the slide shown).
+  autoPlayCondition?: AutoPlayCondition;
+  autoUnmuteCondition?: AutoUnmuteCondition;
   autoPauseCondition?: AutoPauseCondition;
   autoMuteCondition?: AutoMuteCondition;
 };
 
-export const defaultOptions: Partial<AutoMediaPluginOptionsType> = {
-  autoPlayWhenVisible: true,
-  autoUnmuteWhenVisible: true,
-};
+export const defaultOptions: Partial<AutoMediaPluginOptionsType> = {};
 
 export type AutoMediaPluginType = EmblaPluginType<AutoMediaPluginOptionsType> & {
   play: () => void;
@@ -102,10 +109,16 @@ export function AutoMediaPlugin(
         muteAll();
       }
     } else if (document.visibilityState == 'visible') {
-      if (options.autoPlayWhenVisible) {
+      if (
+        options.autoPlayCondition &&
+        ['all', 'visible'].includes(options.autoPlayCondition)
+      ) {
         play();
       }
-      if (options.autoUnmuteWhenVisible) {
+      if (
+        options.autoUnmuteCondition &&
+        ['all', 'visible'].includes(options.autoUnmuteCondition)
+      ) {
         unmute();
       }
     }
@@ -174,7 +187,7 @@ export function AutoMediaPlugin(
   /**
    * Mute all slides.
    */
-   function muteAll(): void {
+  function muteAll(): void {
     for (const slide of slides) {
       getPlayer(slide)?.mute();
     }

src/components/live.ts

@@ -299,22 +299,42 @@ export class FrigateCardLiveCarousel extends FrigateCardMediaCarousel {
       }),
       AutoMediaPlugin({
         playerSelector: 'frigate-card-live-provider',
-        autoUnmuteWhenVisible: !!this.liveConfig?.auto_unmute,
+        ...(this.liveConfig?.auto_play && {
+          autoPlayCondition: this.liveConfig.auto_play,
+        }),
         ...(this.liveConfig?.auto_pause && {
           autoPauseCondition: this.liveConfig.auto_pause,
         }),
         ...(this.liveConfig?.auto_mute && {
           autoMuteCondition: this.liveConfig.auto_mute,
         }),
+        ...(this.liveConfig?.auto_unmute && {
+          autoUnmuteCondition: this.liveConfig.auto_unmute,
+        }),
       }),
     ];
   }
 
   /**
-   * Unmute the media on the selected slide.
+   * Play the media on the loaded slide.
    */
-  protected _autoUnmuteHandler(): void {
-    if (this.liveConfig?.auto_unmute) {
+  protected _autoPlayHandler(): void {
+    if (
+      this.liveConfig?.auto_play &&
+      ['all', 'selected'].includes(this.liveConfig.auto_play)
+    ) {
+      super._autoPlayHandler();
+    }
+  }
+
+  /**
+   * Unmute the media on the loaded slide.
+   */
+   protected _autoUnmuteHandler(): void {
+    if (
+      this.liveConfig?.auto_unmute &&
+      ['all', 'selected'].includes(this.liveConfig.auto_unmute)
+    ) {
       super._autoUnmuteHandler();
     }
   }
@@ -984,6 +1004,7 @@ export class FrigateCardLiveJSMPEG extends LitElement {
           // The media carousel may automatically pause when the browser tab is
           // inactive, JSMPEG does not need to also do so independently.
           pauseWhenHidden: false,
+          autoplay: false,
           protocols: [],
           audio: false,
           videoBufferSize: 1024 * 1024 * 4,

src/components/viewer.ts

@@ -206,23 +206,32 @@ export class FrigateCardViewerCarousel extends FrigateCardMediaCarousel {
   }
 
   /**
-   * Play the media on the selected slide.
+   * Play the media on the loaded slide.
    */
-  protected _autoPlayHandler(): void {
-    if (this.viewerConfig?.auto_play) {
+   protected _autoPlayHandler(): void {
+    if (
+      this.viewerConfig?.auto_play &&
+      ['all', 'selected'].includes(this.viewerConfig.auto_play)
+    ) {
       super._autoPlayHandler();
     }
   }
 
   /**
-   * Unmute the media on the selected slide.
+   * Unmute the media on the loaded slide.
    */
   protected _autoUnmuteHandler(): void {
-    if (this.viewerConfig?.auto_unmute) {
+    if (
+      this.viewerConfig?.auto_unmute &&
+      ['all', 'selected'].includes(this.viewerConfig.auto_unmute)
+    ) {
       super._autoUnmuteHandler();
     }
   }
 
+  /**
+   * Destroy the carousel.
+   */
   protected _destroyCarousel(): void {
     super._destroyCarousel();
 
@@ -280,14 +289,18 @@ export class FrigateCardViewerCarousel extends FrigateCardMediaCarousel {
       }),
       AutoMediaPlugin({
         playerSelector: 'frigate-card-ha-hls-player',
-        autoPlayWhenVisible: !!this.viewerConfig?.auto_play,
-        autoUnmuteWhenVisible: !!this.viewerConfig?.auto_unmute,
+        ...(this.viewerConfig?.auto_play && {
+          autoPlayCondition: this.viewerConfig.auto_play,
+        }),
         ...(this.viewerConfig?.auto_pause && {
           autoPauseCondition: this.viewerConfig.auto_pause,
         }),
         ...(this.viewerConfig?.auto_mute && {
           autoMuteCondition: this.viewerConfig.auto_mute,
         }),
+        ...(this.viewerConfig?.auto_unmute && {
+          autoUnmuteCondition: this.viewerConfig.auto_unmute,
+        }),
       }),
     ];
   }