fix: Preload should reliably preload initial load (#2466)

src/components/live/carousel.ts

@@ -228,6 +228,8 @@ export class AdvancedCameraCardLiveCarousel extends LitElement {
     const cameraMetadata = this.cameraManager.getCameraMetadata(cameraID);
     const mediaEpoch = view?.context?.mediaEpoch?.[cameraID] ?? 0;
 
+    const isSelectedSlide = !!view?.camera && cameraID === view.camera;
+
     return html`
       <div class="embla__slide">
         ${keyed(
@@ -244,6 +246,7 @@ export class AdvancedCameraCardLiveCarousel extends LitElement {
             .cardWideConfig=${this.cardWideConfig}
             .zoomSettings=${view?.context?.zoom?.[cameraID]?.requested}
             .zoom=${!this._isGesturesPTZActive(view, cameraID)}
+            .forceSelected=${isSelectedSlide}
             @advanced-camera-card:zoom:change=${(
               ev: CustomEvent<ZoomSettingsObserved>,
             ) =>

src/components/live/provider.ts

@@ -59,6 +59,13 @@ export class AdvancedCameraCardLiveProvider extends LitElement implements MediaP
   @property({ attribute: false })
   public zoom = true;
 
+  // Whether to force this slide to behave as if it is selected and
+  // intersecting. Set by the carousel on its currently-selected slide so
+  // `live.preload` actually warms up the active stream. See
+  // `LazyLoadConfiguration.forceSelected`.
+  @property({ attribute: false })
+  public forceSelected = false;
+
   private _mediaLoadedInfoSinkController = new MediaLoadedInfoSinkController(this, {
     getTargetID: () => this.targetID ?? null,
   });
@@ -129,14 +136,12 @@ export class AdvancedCameraCardLiveProvider extends LitElement implements MediaP
   }
 
   protected willUpdate(changedProps: PropertyValues): void {
-    if (
-      changedProps.has('liveConfig') ||
-      (!this._lazyLoadController && this.liveConfig)
-    ) {
-      this._lazyLoadController.setConfiguration(
-        this.liveConfig?.lazy_load,
-        this.liveConfig?.lazy_unload,
-      );
+    if (changedProps.has('liveConfig') || changedProps.has('forceSelected')) {
+      this._lazyLoadController.setConfiguration({
+        lazyLoad: this.liveConfig?.lazy_load,
+        lazyUnloadConditions: this.liveConfig?.lazy_unload,
+        forceSelected: this.forceSelected,
+      });
     }
 
     if (changedProps.has('liveConfig')) {

src/components/viewer/provider.ts

@@ -145,11 +145,10 @@ export class AdvancedCameraCardViewerProvider extends LitElement implements Medi
   }
 
   protected willUpdate(changedProps: PropertyValues): void {
-    if (
-      changedProps.has('viewerConfig') ||
-      (!this._lazyLoadController && this.viewerConfig)
-    ) {
-      this._lazyLoadController.setConfiguration(this.viewerConfig?.lazy_load);
+    if (changedProps.has('viewerConfig')) {
+      this._lazyLoadController.setConfiguration({
+        lazyLoad: this.viewerConfig?.lazy_load,
+      });
     }
 
     if (