Simplify autoplay functionality.

Prevents all media in an entire carousel from simultaneously autoplaying in
some browsers. Changes the default autoplay value to true, and applies autoplay
configuration to all clips (whether from the gallery of most recent 'clip').

src/components/carousel.ts

@@ -58,7 +58,7 @@ export class FrigateCardCarousel extends LitElement {
   }
 
   /**
-   * Load the carousel with "slides".
+   * Initialize the carousel.
    */
   protected _initCarousel(): void {
     const carouselNode = this.renderRoot.querySelector(

src/components/live.ts

@@ -1,4 +1,4 @@
-// TODO clip autoplay not working as expected
+// TODO use the schema default remover code to simplify config schema
 // TODO verify README links worked correctly (e.g. basic cameras configuration)
 
 import {

src/components/media-carousel.ts

@@ -67,7 +67,7 @@ export class FrigateCardMediaCarousel extends FrigateCardCarousel {
   }
 
   /**
-   * Initializse the carousel with "slides" (clips or snapshots).
+   * Initialize the carousel.
    */
   protected _initCarousel(): void {
     super._initCarousel();

src/components/viewer.ts

@@ -522,6 +522,37 @@ export class FrigateCardViewerCarousel extends FrigateCardMediaCarousel {
     }
   }
 
+  /**
+   * Play the clip being shown to the user (video player may already be loaded
+   * depending on the lazyload configuration).
+   */
+  protected _autoplayHandler(): void {
+    if (!this._carousel) {
+      return;
+    }
+    const nodes = this._carousel.slideNodes();
+    this._carousel.slidesInView(true).forEach((slide) => {
+      const player = nodes[slide].querySelector('frigate-card-ha-hls-player') as
+        | (HTMLElement & { play: () => void })
+        | undefined;
+      if (player) {
+        player.play();
+      }
+    });
+  }
+
+  /**
+   * Initialize the carousel.
+   */
+  protected _initCarousel(): void {
+    super._initCarousel();
+
+    if (this._carousel && this.viewerConfig && this.viewerConfig.autoplay_clip) {
+      this._carousel.on('init', this._autoplayHandler.bind(this));
+      this._carousel.on('select', this._autoplayHandler.bind(this));
+    }
+  }
+
   /**
    * Get slides to include in the render.
    * @returns The slides to include in the render and an index keyed by slide
@@ -643,22 +674,11 @@ export class FrigateCardViewerCarousel extends FrigateCardMediaCarousel {
       return;
     }
 
-    // In this block, no clip has been manually selected, so this is loading
-    // the most recent clip on card load. In this mode, autoplay of the clip
-    // may be disabled by configuration. If does not make sense to disable
-    // autoplay when the user has explicitly picked an event to play in the
-    // gallery.
-    let autoplay = true;
-    if (this.view.is('clip') || this.view.is('snapshot')) {
-      autoplay = this.viewerConfig.autoplay_clip;
-    }
-
     return html`
       <div class="embla__slide">
         ${this.view.isClipRelatedView()
           ? html`<frigate-card-ha-hls-player
               allow-exoplayer
-              ?autoplay="${autoplay}"
               aria-label="${mediaToRender.title}"
               controls
               muted

src/localize/languages/en.json

@@ -45,7 +45,7 @@
       "update_force": "Force card updates (ignore media playing / interaction)"
     },
     "event_viewer": {
-      "autoplay_clip": "Autoplay most recent clip (In 'clip' view)",
+      "autoplay_clip": "Autoplay clips",
       "draggable": "Event Viewer can be dragged/swiped",
       "lazy_load": "Event Viewer media is lazily loaded in carousel",
       "controls": {

src/patches/ha-hls-player.ts

@@ -10,6 +10,7 @@
 // ====================================================================
 
 import { TemplateResult, css, html } from 'lit';
+import { Ref, createRef, ref } from 'lit/directives/ref';
 import { customElement } from 'lit/decorators.js';
 
 import {
@@ -22,6 +23,17 @@ customElements.whenDefined('ha-hls-player').then(() => {
   @customElement('frigate-card-ha-hls-player')
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
   class FrigateCardHaHlsPlayer extends customElements.get('ha-hls-player') {
+    protected _videoRef: Ref<HTMLVideoElement> = createRef();
+
+    /**
+     * Play the video.
+     */
+    public play(): void {
+      if (this._videoRef.value) {
+        this._videoRef.value.play();
+      }
+    }
+
     // =====================================================================================
     // Minor modifications from:
     // - https://github.com/home-assistant/frontend/blob/dev/src/components/ha-hls-player.ts
@@ -29,6 +41,7 @@ customElements.whenDefined('ha-hls-player').then(() => {
     protected render(): TemplateResult {
       return html`
         <video
+          ${ref(this._videoRef)}
           ?autoplay=${this.autoPlay}
           .muted=${this.muted}
           ?playsinline=${this.playsInline}

src/types.ts

@@ -617,7 +617,7 @@ export type MenuConfig = z.infer<typeof menuConfigSchema>;
  * Event viewer configuration section (clip, snapshot).
  */
 const viewerConfigDefault = {
-  autoplay_clip: false,
+  autoplay_clip: true,
   lazy_load: true,
   draggable: true,
   controls: {