Reinit carousel when preload view is viewed for real.

src/card-condition.ts

@@ -2,7 +2,7 @@ import type { FrigateCardCondition } from './types';
 import { View } from './view';
 
 export interface ConditionState {
-  view?: View;
+  view?: Readonly<View>;
   fullscreen?: boolean;
   camera?: string;
 }

src/components/live.ts

@@ -1,7 +1,5 @@
-// TODO call change-event in viewer
-// TODO different live configs per camera
-// TODO verify preload behavior
 // TODO update_entities should reload view rather than be involved in rendering
+// TODO different live configs per camera
 // TODO Remove media load event console message
 // TODO Remove view change console message
 // TODO readme
@@ -27,7 +25,7 @@ import {
 } from '../types.js';
 import { EmblaOptionsType } from 'embla-carousel';
 import { HomeAssistant } from 'custom-card-helpers';
-import { customElement, property } from 'lit/decorators.js';
+import { customElement, property, state } from 'lit/decorators.js';
 import { ref } from 'lit/directives/ref';
 import { until } from 'lit/directives/until.js';
 
@@ -77,7 +75,6 @@ export class FrigateCardLive extends LitElement {
   @property({ attribute: false })
   protected liveConfig?: LiveConfig;
 
-  @property({ attribute: false })
   set preload(preload: boolean) {
     this._preload = preload;
 
@@ -87,6 +84,7 @@ export class FrigateCardLive extends LitElement {
   }
 
   // Whether or not the live view is currently being preloaded.
+  @state()
   protected _preload?: boolean;
 
   // MediaShowInfo object from the underlying live object. In the case of
@@ -176,6 +174,7 @@ export class FrigateCardLive extends LitElement {
         .view=${this.view}
         .cameras=${this.cameras}
         .liveConfig=${this.liveConfig}
+        .preload=${this._preload}
         @frigate-card:media-show=${this._mediaShowHandler}
         @frigate-card:carousel:select=${() => {
           // Re-rendering the component will cause the thumbnails to be
@@ -212,6 +211,9 @@ export class FrigateCardLiveCarousel extends FrigateCardMediaCarousel {
   @property({ attribute: false })
   protected liveConfig?: LiveConfig;
 
+  @property({ attribute: false })
+  protected preload?: boolean;
+
   // Index between camera name and slide number.
   protected _cameraToSlide: Record<string, number> = {};
 
@@ -220,7 +222,13 @@ export class FrigateCardLiveCarousel extends FrigateCardMediaCarousel {
    * @param changedProperties The properties that were changed in this render.
    */
   updated(changedProperties: PropertyValues): void {
-    if (changedProperties.has('cameras') || changedProperties.has('liveConfig')) {
+    if (
+      changedProperties.has('cameras') ||
+      changedProperties.has('liveConfig') ||
+      changedProperties.has('preload')
+    ) {
+      // All of these properties may fundamentally change the contents/size of
+      // the DOM, and the carousel should be reset when they change.
       this._destroyCarousel();
     }
 

src/editor.ts

@@ -676,7 +676,6 @@ export class FrigateCardEditor extends LitElement implements LovelaceCardEditor
           ? html`
               <div class="values">
                 ${this._renderSwitch(CONF_LIVE_PRELOAD, defaults.live.preload)}
-                ${this._renderDropdown(CONF_LIVE_PROVIDER, liveProviders)}
                 ${this._renderSwitch(
                   CONF_LIVE_DRAGGABLE,
                   defaults.live.draggable,
@@ -685,6 +684,7 @@ export class FrigateCardEditor extends LitElement implements LovelaceCardEditor
                   CONF_LIVE_LAZY_LOAD,
                   defaults.live.lazy_load,
                 )}
+                ${this._renderDropdown(CONF_LIVE_PROVIDER, liveProviders)}
                 ${this._renderDropdown(
                   CONF_LIVE_CONTROLS_NEXT_PREVIOUS_STYLE,
                   liveNextPreviousControlStyles,

src/localize/languages/en.json

@@ -40,7 +40,7 @@
     "event_viewer": {
       "autoplay_clip": "Autoplay most recent clip (In 'clip' view)",
       "draggable": "Event Viewer can be dragged/swiped",
-      "lazy_load": "Event Viewer media is lazily loaded",
+      "lazy_load": "Event Viewer media is lazily loaded in carousel",
       "controls": {
         "next_previous": {
           "style": "Event Viewer next & previous control style",
@@ -63,7 +63,7 @@
       }
     },
     "live": {
-      "preload": "Preload live view",
+      "preload": "Preload live view in the background",
       "provider": "Live view provider",
       "providers": {
         "frigate": "Frigate",
@@ -71,7 +71,7 @@
         "webrtc": "WebRTC"
       },
       "draggable": "Live cameras view can be dragged/swiped",
-      "lazy_load": "Live cameras are lazily loaded",
+      "lazy_load": "Live cameras are lazily loaded in carousel",
       "controls": {
         "next_previous": {
           "style": "Live view next & previous control style",