Add support for pre-defined zoom/pan settings.

src/components/live/live-image.ts

@@ -3,8 +3,7 @@ import { CSSResultGroup, html, LitElement, TemplateResult, unsafeCSS } from 'lit
 import { customElement, property } from 'lit/decorators.js';
 import { createRef, ref, Ref } from 'lit/directives/ref.js';
 import { CameraConfig } from '../../config/types';
-import { localize } from '../../localize/localize';
-import liveImageStyle from '../../scss/live-image.scss';
+import basicBlockStyle from '../../scss/basic-block.scss';
 import { FrigateCardMediaPlayer } from '../../types.js';
 import { getStateObjOrDispatchError } from '../../utils/get-state-obj';
 import '../image.js';
@@ -17,9 +16,6 @@ export class FrigateCardLiveImage extends LitElement implements FrigateCardMedia
   @property({ attribute: false })
   public cameraConfig?: CameraConfig;
 
-  @property({ attribute: true })
-  public watermark?: string;
-
   protected _refImage: Ref<Element & FrigateCardMediaPlayer> = createRef();
 
   public async play(): Promise<void> {
@@ -80,17 +76,11 @@ export class FrigateCardLiveImage extends LitElement implements FrigateCardMedia
         .cameraConfig=${this.cameraConfig}
       >
       </frigate-card-image>
-      ${this.watermark
-        ? html`<ha-icon
-            title=${localize('error.awaiting_live')}
-            icon="${this.watermark}"
-          ></ha-icon>`
-        : ''}
     `;
   }
 
   static get styles(): CSSResultGroup {
-    return unsafeCSS(liveImageStyle);
+    return unsafeCSS(basicBlockStyle);
   }
 }
 

src/components/live/live.ts

@@ -21,6 +21,8 @@ import {
 import { ReadonlyMicrophoneManager } from '../../card-controller/microphone-manager.js';
 import { LiveController } from '../../components-lib/live/live-controller.js';
 import { MediaGridSelected } from '../../components-lib/media-grid-controller.js';
+import { ZoomConfig, ZoomDefault } from '../../components-lib/zoom/types.js';
+import { handleZoomDefaultEvent } from '../../components-lib/zoom/zoom-view-context.js';
 import {
   CameraConfig,
   CardWideConfig,
@@ -501,6 +503,9 @@ export class FrigateCardLiveCarousel extends LitElement {
           .liveConfig=${liveConfig}
           .hass=${this.hass}
           .cardWideConfig=${this.cardWideConfig}
+          .zoomConfig=${this.view?.context?.zoom?.[cameraID]?.zoom}
+          @frigate-card:zoom:default=${(ev: CustomEvent<ZoomDefault>) =>
+            handleZoomDefaultEvent(this, ev, cameraID)}
         >
         </frigate-card-live-provider>
       </div>
@@ -688,6 +693,9 @@ export class FrigateCardLiveProvider
   @property({ attribute: false })
   public microphoneStream?: MediaStream;
 
+  @property({ attribute: false })
+  public zoomConfig?: ZoomConfig | null;
+
   @state()
   protected _isVideoMediaLoaded = false;
 
@@ -793,9 +801,6 @@ export class FrigateCardLiveProvider
     this._isVideoMediaLoaded = false;
   }
 
-  /**
-   * Record that video media is being shown.
-   */
   protected _videoMediaShowHandler(): void {
     this._isVideoMediaLoaded = true;
   }
@@ -852,6 +857,15 @@ export class FrigateCardLiveProvider
   protected _useZoomIfRequired(template: TemplateResult): TemplateResult {
     return this.liveConfig?.zoomable
       ? html` <frigate-card-zoomer
+          .defaultConfig=${guard([this.cameraConfig?.dimensions?.layout], () =>
+            this.cameraConfig?.dimensions?.layout
+              ? {
+                  pan: this.cameraConfig.dimensions.layout.pan,
+                  zoom: this.cameraConfig.dimensions.layout.zoom,
+                }
+              : undefined,
+          )}
+          .config=${this.zoomConfig}
           @frigate-card:zoom:zoomed=${() => this.setControls(false)}
           @frigate-card:zoom:unzoomed=${() => this.setControls()}
         >
@@ -899,15 +913,12 @@ export class FrigateCardLiveProvider
       }
     }
 
-    return this._useZoomIfRequired(html`
+    return html`${this._useZoomIfRequired(html`
       ${showImageDuringLoading || provider === 'image'
         ? html` <frigate-card-live-image
             ${ref(this._refProvider)}
             .hass=${this.hass}
             .cameraConfig=${this.cameraConfig}
-            watermark=${ifDefined(
-              showImageDuringLoading ? 'mdi:progress-helper' : undefined,
-            )}
             @frigate-card:media:loaded=${(ev: Event) => {
               if (provider === 'image') {
                 // Only count the media has loaded if the required provider is
@@ -968,7 +979,13 @@ export class FrigateCardLiveProvider
           >
           </frigate-card-live-jsmpeg>`
         : html``}
-    `);
+    `)}
+    ${showImageDuringLoading && !this._isVideoMediaLoaded
+      ? html`<ha-icon
+          title=${localize('error.awaiting_live')}
+          icon="mdi:progress-helper"
+        ></ha-icon>`
+      : ''} `;
   }
 
   static get styles(): CSSResultGroup {