Support executing actions from the query string.

src/utils/action.ts

@@ -19,7 +19,7 @@ import {
  * @returns A FrigateCardCustomAction or null if it cannot be converted.
  */
 export function convertActionToFrigateCardCustomAction(
-  action: ActionType | null,
+  action: unknown,
 ): FrigateCardCustomAction | null {
   if (!action) {
     return null;
@@ -38,6 +38,7 @@ export function convertActionToFrigateCardCustomAction(
 export function createFrigateCardCustomAction(
   action: FrigateCardAction,
   args?: {
+    cardID?: string;
     camera?: string;
     media_player?: string;
     media_player_action?: 'play' | 'stop';
@@ -51,6 +52,7 @@ export function createFrigateCardCustomAction(
       action: 'fire-dom-event',
       frigate_card_action: action,
       camera: args.camera as string,
+      ...(args.cardID && { card_id: args.cardID})
     };
   }
   if (action === 'media_player') {
@@ -62,11 +64,13 @@ export function createFrigateCardCustomAction(
       frigate_card_action: action,
       media_player: args.media_player,
       media_player_action: args.media_player_action,
+      ...(args.cardID && { card_id: args.cardID})
     };
   }
   return {
     action: 'fire-dom-event',
     frigate_card_action: action,
+    ...(args?.cardID && { card_id: args.cardID})
   };
 }
 

src/utils/querystring.ts

@@ -0,0 +1,57 @@
+import { FrigateCardCustomAction } from '../types';
+import { createFrigateCardCustomAction } from './action.js';
+
+export const getActionsFromQueryString = (): FrigateCardCustomAction[] => {
+  const params = new URLSearchParams(window.location.search);
+  const actions: FrigateCardCustomAction[] = [];
+  const actionRE = new RegExp(/^frigate-card-action(\/(?<cardID>\w+))?\/(?<action>\w+)/);
+
+  for (const [key, value] of params.entries()) {
+    const match = key.match(actionRE);
+    if (!match || !match.groups) {
+      continue;
+    }
+    const cardID: string | undefined = match.groups['cardID'];
+    const action = match.groups['action'];
+
+    let customAction: FrigateCardCustomAction | null = null;
+    switch (action) {
+      case 'camera_select':
+      case 'live_substream_select':
+        if (value) {
+          customAction = createFrigateCardCustomAction(action, {
+            camera: value,
+            cardID: cardID,
+          });
+        }
+        break;
+      case 'camera_ui':
+      case 'clip':
+      case 'clips':
+      case 'default':
+      case 'diagnostics':
+      case 'download':
+      case 'expand_toggle':
+      case 'image':
+      case 'live':
+      case 'menu_toggle':
+      case 'recording':
+      case 'recordings':
+      case 'snapshot':
+      case 'snapshots':
+      case 'timeline':
+        customAction = createFrigateCardCustomAction(action, {
+          cardID: cardID,
+        });
+        break;
+      default:
+        console.warn(
+          `Frigate card received unknown card action in query string: ${action}`,
+        );
+    }
+    if (customAction) {
+      actions.push(customAction);
+    }
+  }
+  return actions;
+};