Add support for disabling zoom.

src/components/image.ts

@@ -26,7 +26,6 @@ import { View } from '../view/view.js';
 import { dispatchErrorMessageEvent } from './message.js';
 import { contentsChanged } from '../utils/basic.js';
 import isEqual from 'lodash-es/isEqual';
-import './zoomer.js';
 
 // See TOKEN_CHANGE_INTERVAL in https://github.com/home-assistant/core/blob/dev/homeassistant/components/camera/__init__.py .
 const HASS_REJECTION_CUTOFF_MS = 5 * 60 * 1000;
@@ -42,9 +41,6 @@ export class FrigateCardImage extends LitElement {
   @property({ attribute: false })
   public cameraConfig?: CameraConfig;
 
-  @property({ attribute: false })
-  public supportZoom = false;
-
   // Using contentsChanged to ensure overridden configs (e.g. when the
   // 'show_image_during_load' option is true for live views, an overridden
   // config may be used here).
@@ -115,6 +111,10 @@ export class FrigateCardImage extends LitElement {
         );
       }
       updateElementStyleFromMediaLayoutConfig(this, this.imageConfig?.layout);
+
+      if (changedProps.has('imageConfig') && this.imageConfig?.zoomable) {
+        import('./zoomer.js');
+      }
     }
 
     // If the camera or view changed, immediately discard the old value (view to
@@ -235,10 +235,10 @@ export class FrigateCardImage extends LitElement {
     }
   }
 
-  protected _renderZoom(contents: TemplateResult): TemplateResult {
-    return this.supportZoom
-      ? html` <frigate-card-zoomer>${contents}</frigate-card-zoomer>`
-      : contents;
+  protected _useZoomIfRequired(template: TemplateResult): TemplateResult {
+    return this.imageConfig?.zoomable
+      ? html` <frigate-card-zoomer> ${template} </frigate-card-zoomer>`
+      : template;
   }
 
   protected render(): TemplateResult | void {
@@ -246,7 +246,7 @@ export class FrigateCardImage extends LitElement {
     // Note the use of live() below to ensure the update will restore the image
     // src if it's been changed via _forceSafeImage().
     return src
-      ? this._renderZoom(html` <img
+      ? this._useZoomIfRequired(html` <img
           ${ref(this._refImage)}
           src=${live(src)}
           @load=${(ev: Event) => {