Add initial zoom support.

src/components/live/live-go2rtc.ts

@@ -101,6 +101,12 @@ export class FrigateCardGo2RTC extends LitElement implements FrigateCardMediaPla
     }
   }
 
+  public async setControls(controls: boolean): Promise<void> {
+    if (this._player?.video) {
+      this._player.video.controls = controls;
+    }
+  }
+
   disconnectedCallback(): void {
     this._player = undefined;
   }

src/components/live/live-ha.ts

@@ -43,6 +43,10 @@ export class FrigateCardLiveHA extends LitElement implements FrigateCardMediaPla
     this._playerRef.value?.seek(seconds);
   }
 
+  public async setControls(controls: boolean): Promise<void> {
+    this._playerRef.value?.setControls(controls);
+  }
+
   protected render(): TemplateResult | void {
     if (!this.hass) {
       return;

src/components/live/live-image.ts

@@ -42,6 +42,11 @@ export class FrigateCardLiveImage extends LitElement implements FrigateCardMedia
     // Not implemented.
   }
 
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  public async setControls(_controls: boolean): Promise<void> {
+    // Not implemented.
+  }
+
   protected render(): TemplateResult | void {
     if (!this.hass || !this.cameraConfig) {
       return;

src/components/live/live-jsmpeg.ts

@@ -70,6 +70,11 @@ export class FrigateCardLiveJSMPEG extends LitElement implements FrigateCardMedi
     // JSMPEG does not support seeking.
   }
 
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  public async setControls(_controls: boolean): Promise<void> {
+    // Not implemented.
+  }
+
   /**
    * Create a JSMPEG player.
    * @param url The URL for the player to connect to.

src/components/live/live-webrtc-card.ts

@@ -73,6 +73,13 @@ export class FrigateCardLiveWebRTCCard
     }
   }
 
+  public async setControls(controls: boolean): Promise<void> {
+    const player = this._getPlayer();
+    if (player) {
+      player.controls = controls;
+    }
+  }
+
   connectedCallback(): void {
     super.connectedCallback();
 

src/components/live/live.ts

@@ -47,6 +47,7 @@ import {
 import '../next-prev-control.js';
 import '../title-control.js';
 import '../surround.js';
+import '../zoomer.js';
 import { CarouselSelect, EmblaCarouselPlugins } from '../carousel.js';
 import { classMap } from 'lit/directives/class-map.js';
 import { updateElementStyleFromMediaLayoutConfig } from '../../utils/media-layout.js';
@@ -772,6 +773,12 @@ export class FrigateCardLiveProvider
     this._refProvider.value?.seek(seconds);
   }
 
+  public async setControls(controls: boolean): Promise<void> {
+    await this.updateComplete;
+    await this._refProvider.value?.updateComplete;
+    this._refProvider.value?.setControls(controls);
+  }
+
   /**
    * Get the fully resolved live provider.
    * @returns A live provider (that is not 'auto').
@@ -886,35 +893,41 @@ export class FrigateCardLiveProvider
     };
 
     return html`
-      ${showImageDuringLoading || provider === 'image'
-        ? html`<frigate-card-live-image
-            ${ref(this._refProvider)}
-            .hass=${this.hass}
-            .cameraConfig=${this.cameraConfig}
-            @frigate-card:media:loaded=${(ev: Event) => {
-              if (provider === 'image') {
-                // Only count the media has loaded if the required provider is
-                // the image (not just the temporary image shown during
-                // loading).
-                this._videoMediaShowHandler();
-              } else {
-                ev.stopPropagation();
-              }
-            }}
-          >
-          </frigate-card-live-image>`
-        : html``}
-      ${provider === 'ha'
-        ? html` <frigate-card-live-ha
-            ${ref(this._refProvider)}
-            class=${classMap(providerClasses)}
-            .hass=${this.hass}
-            .cameraConfig=${this.cameraConfig}
-            @frigate-card:media:loaded=${this._videoMediaShowHandler.bind(this)}
-          >
-          </frigate-card-live-ha>`
-        : provider === 'go2rtc'
-        ? html`<frigate-card-live-go2rtc
+      <frigate-card-zoomer
+        @frigate-card:zoom:zoomed=${() => this.setControls(false)}
+        @frigate-card:zoom:unzoomed=${() => this.setControls(true)}
+      >
+        ${showImageDuringLoading || provider === 'image'
+          ? html`
+              <frigate-card-live-image
+                ${ref(this._refProvider)}
+                .hass=${this.hass}
+                .cameraConfig=${this.cameraConfig}
+                @frigate-card:media:loaded=${(ev: Event) => {
+                  if (provider === 'image') {
+                    // Only count the media has loaded if the required provider is
+                    // the image (not just the temporary image shown during
+                    // loading).
+                    this._videoMediaShowHandler();
+                  } else {
+                    ev.stopPropagation();
+                  }
+                }}
+              >
+              </frigate-card-live-image
+            ></frigate-card-zoomer>`
+          : html``}
+        ${provider === 'ha'
+          ? html` <frigate-card-live-ha
+              ${ref(this._refProvider)}
+              class=${classMap(providerClasses)}
+              .hass=${this.hass}
+              .cameraConfig=${this.cameraConfig}
+              @frigate-card:media:loaded=${this._videoMediaShowHandler.bind(this)}
+            >
+            </frigate-card-live-ha>`
+          : provider === 'go2rtc'
+          ? html`<frigate-card-live-go2rtc
               ${ref(this._refProvider)}
               class=${classMap(providerClasses)}
               .hass=${this.hass}
@@ -923,35 +936,33 @@ export class FrigateCardLiveProvider
               @frigate-card:media:loaded=${this._videoMediaShowHandler.bind(this)}
             >
             </frigate-card-live-webrtc-card>`
-        : provider === 'webrtc-card'
-        ? html`<frigate-card-live-webrtc-card
-            ${ref(this._refProvider)}
-            class=${classMap(providerClasses)}
-            .hass=${this.hass}
-            .cameraConfig=${this.cameraConfig}
-            .cameraEndpoints=${this.cameraEndpoints}
-            .cardWideConfig=${this.cardWideConfig}
-            @frigate-card:media:loaded=${this._videoMediaShowHandler.bind(this)}
-          >
-          </frigate-card-live-webrtc-card>`
-        : provider === 'jsmpeg'
-        ? html` <frigate-card-live-jsmpeg
-            ${ref(this._refProvider)}
-            class=${classMap(providerClasses)}
-            .hass=${this.hass}
-            .cameraConfig=${this.cameraConfig}
-            .cameraEndpoints=${this.cameraEndpoints}
-            .cardWideConfig=${this.cardWideConfig}
-            @frigate-card:media:loaded=${this._videoMediaShowHandler.bind(this)}
-          >
-          </frigate-card-live-jsmpeg>`
-        : html``}
+          : provider === 'webrtc-card'
+          ? html`<frigate-card-live-webrtc-card
+              ${ref(this._refProvider)}
+              class=${classMap(providerClasses)}
+              .hass=${this.hass}
+              .cameraConfig=${this.cameraConfig}
+              .cameraEndpoints=${this.cameraEndpoints}
+              .cardWideConfig=${this.cardWideConfig}
+              @frigate-card:media:loaded=${this._videoMediaShowHandler.bind(this)}
+            >
+            </frigate-card-live-webrtc-card>`
+          : provider === 'jsmpeg'
+          ? html` <frigate-card-live-jsmpeg
+              ${ref(this._refProvider)}
+              class=${classMap(providerClasses)}
+              .hass=${this.hass}
+              .cameraConfig=${this.cameraConfig}
+              .cameraEndpoints=${this.cameraEndpoints}
+              .cardWideConfig=${this.cardWideConfig}
+              @frigate-card:media:loaded=${this._videoMediaShowHandler.bind(this)}
+            >
+            </frigate-card-live-jsmpeg>`
+          : html``}
+      </frigate-card-zoomer>
     `;
   }
 
-  /**
-   * Get styles.
-   */
   static get styles(): CSSResultGroup {
     return unsafeCSS(liveProviderStyle);
   }