diff --git a/README.md b/README.md index 0664385f..df616e9e 100644 --- a/README.md +++ b/README.md @@ -1541,6 +1541,15 @@ elements: top: 300px tap_action: action: none + - type: icon + icon: mdi:numeric-7-box + title: Custom action + style: + left: 200px + top: 350px + tap_action: + action: fire-dom-event + key: value ``` @@ -2787,7 +2796,7 @@ This could be for any number of reasons. Chromecast devices can be quite picky o **NOTE**: In particular, for Frigate to support casting of clips, the default ffmpeg settings for Frigate must be modified, i.e. Frigate does not encode clips in a Chromecast compatible format out of the box (specifically: audio must be enabled in the AAC codec, whether your camera supports audio or not). See the [Frigate Home Assistant documentation](https://docs.frigate.video/integrations/home-assistant) or [this issue](https://github.com/blakeblackshear/frigate/issues/3175) for more. -### Javascript console shows `[Violation] Added non-passive event listener to a scroll-blocking 'touchstart' event` +### Javascript console shows `[Violation] Added non-passive event listener to a scroll-blocking [...] event` This card heavily uses [Embla Carousel](https://www.embla-carousel.com/) -- a light-weight performant carousel library -- to show media. This carousel library uses non-passive event-listeners in a considered and performant way, but one that still causes occasional and unhelpful Chrome warnings. These warnings can be safely ignored in this instance, and cannot easily be fixed in the underlying library as it heavily relies on non-passive event listeners ([see this bug comment for explanation](https://github.com/davidjerleke/embla-carousel/issues/62#issuecomment-628569509)). diff --git a/src/card.ts b/src/card.ts index 375116e9..c30e3f47 100644 --- a/src/card.ts +++ b/src/card.ts @@ -331,22 +331,23 @@ export class FrigateCard extends LitElement { for (const action of actions) { // All frigate card actions will have action of 'fire-dom-event' and // styling only applies to those. - if (!action || action.action !== 'fire-dom-event') { + if (!action || action.action !== 'fire-dom-event' || !('frigate_card_action' in action)) { continue; } + const frigateCardAction = action as FrigateCardCustomAction; if ( FRIGATE_CARD_VIEWS_USER_SPECIFIED.some( (view) => - view === action?.frigate_card_action && - this._view?.is(action.frigate_card_action), + view === frigateCardAction.frigate_card_action && + this._view?.is(frigateCardAction.frigate_card_action), ) || - (action?.frigate_card_action === 'default' && + (frigateCardAction.frigate_card_action === 'default' && this._view?.is(this._getConfig().view.default)) || - (action?.frigate_card_action === 'fullscreen' && + (frigateCardAction.frigate_card_action === 'fullscreen' && screenfull.isEnabled && screenfull.isFullscreen) || - (action?.frigate_card_action === 'camera_select' && - this._view?.camera === action.camera) + (frigateCardAction.frigate_card_action === 'camera_select' && + this._view?.camera === frigateCardAction.camera) ) { return this._getEmphasizedStyle(); } @@ -1304,10 +1305,6 @@ export class FrigateCard extends LitElement { * @param ev The action requested. */ protected _cardActionHandler(ev: CustomEvent): void { - // These interactions should only be handled by the card, as nothing - // upstream has the user-provided configuration. - ev.stopPropagation(); - const frigateCardAction = convertActionToFrigateCardCustomAction(ev.detail); if (!frigateCardAction) { return; diff --git a/src/types.ts b/src/types.ts index c2d4275f..e4873eea 100644 --- a/src/types.ts +++ b/src/types.ts @@ -167,7 +167,7 @@ const customActionSchema = schemaForType< >()( actionBaseSchema.extend({ action: z.literal('fire-dom-event'), - }), + }).passthrough(), ); const noActionSchema = schemaForType< NoActionConfig & ExtendedConfirmationRestrictionConfig @@ -236,6 +236,7 @@ const actionSchema = z.union([ urlActionSchema, moreInfoActionSchema, noActionSchema, + customActionSchema, frigateCardCustomActionSchema, ]); export type ActionType = z.infer;