Add support for pre-defined zoom/pan settings.

src/card-controller/actions-manager.ts

@@ -12,6 +12,7 @@ import {
   getActionConfigGivenAction,
 } from '../utils/action.js';
 import { getStreamCameraID } from '../utils/substream.js';
+import { generateViewContextForZoomChange } from '../components-lib/zoom/zoom-view-context.js';
 import { CardActionsManagerAPI } from './types.js';
 
 const interactionSchema = z.object({
@@ -263,9 +264,19 @@ export class ActionsManager {
         }
         break;
       case 'show_ptz':
-        this._api
-          .getViewManager()
-          .setViewWithNewContext({ live: { ptzVisible: frigateCardAction.show_ptz } });
+        this._api.getViewManager().setViewWithMergedContext({
+          live: { ptzVisible: frigateCardAction.show_ptz },
+        });
+        break;
+      case 'change_zoom':
+        this._api.getViewManager().setViewWithMergedContext(
+          generateViewContextForZoomChange(frigateCardAction.target_id, {
+            zoom: {
+              pan: frigateCardAction.pan,
+              zoom: frigateCardAction.zoom,
+            },
+          }),
+        );
         break;
       default:
         console.warn(`Frigate card received unknown card action: ${action}`);

src/card-controller/card-element-manager.ts

@@ -99,6 +99,9 @@ export class CardElementManager {
     // Manually call the location change handler as the card will be
     // disconnected/reconnected when dashboard 'tab' changes happen within HA.
     this._api.getQueryStringManager().executeAll();
+
+    // Make sure reconnections call the initialization code.
+    this._element.requestUpdate();
   }
 
   public elementDisconnected(): void {
@@ -108,15 +111,10 @@ export class CardElementManager {
     this._api.getMediaLoadedInfoManager().clear();
     this._api.getFullscreenManager().disconnect();
 
-    // Reset and uninitialize cameras to cause them to reinitialize on
+    // Uninitialize cameras to cause them to reinitialize on
     // reconnection, to ensure the state subscription/unsubscription works
     // correctly for triggers.
-    this._api
-      .getCameraManager()
-      .reset()
-      .then(() =>
-        this._api.getInitializationManager().uninitialize(InitializationAspect.CAMERAS),
-      );
+    this._api.getInitializationManager().uninitialize(InitializationAspect.CAMERAS),
 
     this._element.removeEventListener(
       'mousemove',

src/card-controller/initialization-manager.ts

@@ -86,19 +86,25 @@ export class InitializationManager {
     }
 
     if (!this._api.getMessageManager().hasMessage()) {
-      // Set a view on initial load. However, if the query string contains a
-      // view related action, we don't set any view here and allow that content
-      // to be triggered by the firstUpdated() call that runs query string
-      // actions. To do otherwise may cause a race condition between the default
-      // view and the querystring view, see:
-      // https://github.com/dermotduffy/frigate-hass-card/issues/1200
-      const hasViewRelatedActions = this._api
-        .getQueryStringManager()
-        .hasViewRelatedActions();
-      if (hasViewRelatedActions) {
-        this._api.getQueryStringManager().executeViewRelated();
+      if (!this._api.getViewManager().hasView()) {
+        // Set a view on initial load. However, if the query string contains a
+        // view related action, we don't set any view here and allow that content
+        // to be triggered by the firstUpdated() call that runs query string
+        // actions. To do otherwise may cause a race condition between the default
+        // view and the querystring view, see:
+        // https://github.com/dermotduffy/frigate-hass-card/issues/1200
+        const hasViewRelatedActions = this._api
+          .getQueryStringManager()
+          .hasViewRelatedActions();
+        if (hasViewRelatedActions) {
+          this._api.getQueryStringManager().executeViewRelated();
+        } else {
+          this._api.getViewManager().setViewDefault({ failSafe: true });
+        }
       } else {
-        this._api.getViewManager().setViewDefault({ failSafe: true });
+        // If we already have a view something (e.g. cameras) may have been
+        // reinitialized, be sure to ask for an update.
+        this._api.getCardElementManager().update();
       }
     }
 

src/card-controller/view-manager.ts

@@ -161,7 +161,7 @@ export class ViewManager {
     }
   }
 
-  public setViewWithNewContext(context: ViewContext): void {
+  public setViewWithMergedContext(context: ViewContext | null): void {
     if (this._view) {
       return this._setView(this._view?.clone().mergeInContext(context));
     }