diff --git a/src/action-handler-directive.ts b/src/action-handler-directive.ts index a79a8fc9..cd2d1c3a 100644 --- a/src/action-handler-directive.ts +++ b/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); diff --git a/src/card.ts b/src/card.ts index 481154cd..f73a3937 100644 --- a/src/card.ts +++ b/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 }; } diff --git a/src/components/timeline.ts b/src/components/timeline.ts index 21ca9d28..b00ddb83 100644 --- a/src/components/timeline.ts +++ b/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 { >`; } + 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)); } } diff --git a/src/types.ts b/src/types.ts index 419412d8..687ae243 100644 --- a/src/types.ts +++ b/src/types.ts @@ -806,6 +806,7 @@ const timelineConfigSchema = z }) .default(timelineConfigDefault.controls), }) + .merge(actionsSchema) .default(timelineConfigDefault); export type TimelineConfig = z.infer;