Add card-wide action support for timeline.

src/action-handler-directive.ts

@@ -153,6 +153,7 @@ class ActionHandler extends HTMLElement implements ActionHandler {
     element.addEventListener('touchcancel', end);
 
     element.addEventListener('mousedown', start, { passive: true });
+    element.addEventListener('pointerdown', start, { passive: true });
     element.addEventListener('click', end);
 
     element.addEventListener('keyup', handleEnter);

src/card.ts

@@ -1157,6 +1157,8 @@ export class FrigateCard extends LitElement {
       specificActions = this._getConfig().event_viewer.actions;
     } else if (this._view?.is('image')) {
       specificActions = this._getConfig().image?.actions;
+    } else if (this._view?.is('timeline')) {
+      specificActions = this._getConfig().timeline?.actions;
     }
     return { ...this._getConfig().view.actions, ...specificActions };
   }

src/components/timeline.ts

@@ -13,6 +13,7 @@ import { DataSet } from 'vis-data/esnext';
 import {
   DataGroupCollectionType,
   Timeline,
+  TimelineEventPropertiesResult,
   TimelineItem,
   TimelineOptions,
   TimelineOptionsCluster,
@@ -40,6 +41,7 @@ import {
   dispatchErrorMessageEvent,
   dispatchFrigateCardEvent,
   getCameraTitle,
+  stopEventFromActivatingCardWideActions,
 } from '../common.js';
 
 import timelineCoreStyle from '../scss/timeline-core.scss';
@@ -428,6 +430,14 @@ export class FrigateCardTimelineCore extends LitElement {
     ></div>`;
   }
 
+  protected _timelineClickHandler(properties: TimelineEventPropertiesResult): void {
+    if (properties.what === 'item') {
+      // Prevent interaction with items on the timeline from activating card
+      // wide actions.
+      stopEventFromActivatingCardWideActions(properties.event);
+    }
+  }
+
   /**
    * Handle a range change in the timeline.
    * @param properties vis.js provided range information.
@@ -807,6 +817,8 @@ export class FrigateCardTimelineCore extends LitElement {
         );
         this._timeline.on('select', this._timelineSelectHandler.bind(this));
         this._timeline.on('rangechanged', this._timelineRangeHandler.bind(this));
+        this._timeline.on('click', this._timelineClickHandler.bind(this));
+        this._timeline.on('doubleclick', this._timelineClickHandler.bind(this));
       }
     }
 

src/types.ts

@@ -806,6 +806,7 @@ const timelineConfigSchema = z
       })
       .default(timelineConfigDefault.controls),
   })
+  .merge(actionsSchema)
   .default(timelineConfigDefault);
 export type TimelineConfig = z.infer<typeof timelineConfigSchema>;