Add autoplay clip configuration.

src/editor.ts

@@ -205,6 +205,13 @@ export class FrigateCardEditor extends LitElement implements LovelaceCardEditor
                 .configValue=${'view_timeout'}
                 @value-changed=${this._valueChanged}
               ></paper-input>
+              <ha-formfield .label=${`Autoplay clip`}>
+                <ha-switch
+                  .checked=${this._config?.autoplay_clip !== false}
+                  .configValue=${'autoplay_clip'}
+                  @change=${this._valueChanged}
+                ></ha-switch>
+              </ha-formfield>
             </div>`
           : ''}
         <div class="option" @click=${this._toggleOption} .option=${'advanced'}>
@@ -309,8 +316,6 @@ export class FrigateCardEditor extends LitElement implements LovelaceCardEditor
     }
     const target = ev.target;
     let key: string = target.configValue;
-    console.log(target);
-    console.log(target.value);
 
     if (!key) {
       return;
@@ -329,10 +334,8 @@ export class FrigateCardEditor extends LitElement implements LovelaceCardEditor
       objectTarget = newConfig[configName];
       key = parts[1];
     }
-    //console.log(`Value is: ${target.value}`);
-    //return;
 
-    if (objectTarget[key] === target.value) {
+    if (target.value !== undefined && objectTarget[key] === target.value) {
       return;
     } else if (target.value === '') {
       delete objectTarget[key];

src/frigate-hass-card.ts

@@ -543,6 +543,7 @@ export class FrigateCard extends LitElement {
   // Render the player for a saved clip.
   protected async _renderClipPlayer(): Promise<TemplateResult> {
     let event: FrigateEvent, events: FrigateGetEventsResponse;
+    let autoplay = true;
     if (this._viewEvent) {
       event = this._viewEvent;
     } else {
@@ -558,10 +559,22 @@ export class FrigateCard extends LitElement {
         return this._renderAttentionIcon('mdi:camera-off', 'No recent clip');
       }
       event = events[0];
+
+      // 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.
+      autoplay = this.config.autoplay_clip;
     }
     this._heading = this._getEventTitle(event);
     const url = `${this.config.frigate_url}/clips/` + `${event.camera}-${event.id}.mp4`;
-    return html` <video class="frigate-card-viewer" autoplay muted controls>
+    return html` <video
+      class="frigate-card-viewer"
+      muted
+      controls
+      ?autoplay="${autoplay}"
+    >
       <source src="${url}" type="video/mp4" />
     </video>`;
   }

src/types.ts

@@ -44,6 +44,7 @@ export const frigateCardConfigSchema = z.object({
   webrtc: z.object({}).passthrough().optional(),
   label: z.string().optional(),
   zone: z.string().optional(),
+  autoplay_clip: z.boolean().default(true),
 
   // Stock lovelace card config.
   type: z.string(),