Merge pull request #201 from dermotduffy/use-action-handler

Fix bug where touchevents were being ignored by elements within the card

src/card.ts

@@ -677,22 +677,6 @@ export class FrigateCard extends LitElement {
     return `${this.config.frigate.url}/events?camera=${this._frigateCameraName}`;
   }
 
-  /**
-   * Handle interaction with the card.
-   */
-  protected _interactionHandler(): void {
-    if (!this.config.view.timeout) {
-      return;
-    }
-    if (this._interactionTimerID) {
-      window.clearTimeout(this._interactionTimerID);
-    }
-    this._interactionTimerID = window.setTimeout(() => {
-      this._interactionTimerID = null;
-      this._changeView();
-    }, this.config.view.timeout * 1000);
-  }
-
   /**
    * Handle an action called on an element.
    * @param ev The actionHandler event.
@@ -718,6 +702,16 @@ export class FrigateCard extends LitElement {
     ) {
       handleAction(node, this._hass as HomeAssistant, config, ev.detail.action);
     }
+
+    if (this.config.view.timeout) {
+      if (this._interactionTimerID) {
+        window.clearTimeout(this._interactionTimerID);
+      }
+      this._interactionTimerID = window.setTimeout(() => {
+        this._interactionTimerID = null;
+        this._changeView();
+      }, this.config.view.timeout * 1000);
+    }
   }
 
   /**
@@ -962,7 +956,6 @@ export class FrigateCard extends LitElement {
     const actions = this._getMergedActions();
 
     return html` <ha-card
-      @click=${this._interactionHandler}
       .actionHandler=${actionHandler({
         hasHold: hasAction(actions.hold_action),
         hasDoubleClick: hasAction(actions.double_tap_action),

src/components/gallery.ts

@@ -17,6 +17,7 @@ import { localize } from '../localize/localize.js';
 import { renderProgressIndicator } from './message.js';
 
 import galleryStyle from '../scss/gallery.scss';
+import { actionHandler } from '../action-handler-directive.js';
 
 const MAX_THUMBNAIL_WIDTH = 175;
 const DEFAULT_COLUMNS = 5;
@@ -155,7 +156,11 @@ export class FrigateCardGalleryCore extends LitElement {
             <div class="mdc-image-list__image-aspect-container">
               <div class="mdc-image-list__image">
                 <ha-card
-                  @click=${() => {
+                  .actionHandler=${actionHandler({
+                    hasHold: false,
+                    hasDoubleClick: false,
+                  })}
+                  @action=${() => {
                     if (this.view && this.view.previous) {
                       this.view.previous.dispatchChangeEvent(this);
                     }
@@ -176,7 +181,11 @@ export class FrigateCardGalleryCore extends LitElement {
               ${child.can_expand
                 ? html`<div class="mdc-image-list__image">
                     <ha-card
-                      @click=${() => {
+                      .actionHandler=${actionHandler({
+                        hasHold: false,
+                        hasDoubleClick: false,
+                      })}
+                      @action=${() => {
                         if (this.view) {
                           new View({
                             view: this.view.view,
@@ -196,7 +205,11 @@ export class FrigateCardGalleryCore extends LitElement {
                     title="${child.title}"
                     class="mdc-image-list__image"
                     src="${child.thumbnail}"
-                    @click=${() => {
+                    .actionHandler=${actionHandler({
+                      hasHold: false,
+                      hasDoubleClick: false,
+                    })}
+                    @action=${() => {
                       if (this.view) {
                         new View({
                           view: this.view.is('clips')

src/components/viewer.ts

@@ -38,6 +38,7 @@ import { renderProgressIndicator } from '../components/message.js';
 import './next-prev-control.js';
 
 import viewerStyle from '../scss/viewer.scss';
+import { actionHandler } from '../action-handler-directive.js';
 
 const getEmptyImageSrc = (width: number, height: number) =>
   `data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 ${width} ${height}"%3E%3C/svg%3E`;
@@ -485,7 +486,13 @@ export class FrigateCardViewerCore extends LitElement {
             .controlConfig=${this.viewerConfig?.controls.next_previous}
             .thumbnail=${neighbors.previous.thumbnail}
             .title=${neighbors.previous.title}
-            @click=${() => this._nextPreviousHandler('previous')}
+            .actionHandler=${actionHandler({
+              hasHold: false,
+              hasDoubleClick: false,
+            })}
+            @action=${() => {
+              this._nextPreviousHandler('previous');
+            }}
           ></frigate-card-next-previous-control>`
         : ``}
       <div class="embla">
@@ -499,7 +506,13 @@ export class FrigateCardViewerCore extends LitElement {
             .controlConfig=${this.viewerConfig?.controls.next_previous}
             .thumbnail=${neighbors.next.thumbnail}
             .title=${neighbors.next.title}
-            @click=${() => this._nextPreviousHandler('next')}
+            .actionHandler=${actionHandler({
+              hasHold: false,
+              hasDoubleClick: false,
+            })}
+            @action=${() => {
+              this._nextPreviousHandler('next');
+            }}
           ></frigate-card-next-previous-control>`
         : ``}
     </div>`;
@@ -575,7 +588,7 @@ export class FrigateCardViewerCore extends LitElement {
         this.renderRoot.querySelectorAll('.embla__container img').forEach((img) => {
           const imageElement: HTMLImageElement = img as HTMLImageElement;
           if (imageElement.src === IMG_EMPTY) {
-            imageElement.src = replacementImageSrc
+            imageElement.src = replacementImageSrc;
           }
         });
       }
@@ -658,7 +671,11 @@ export class FrigateCardViewerCore extends LitElement {
               src=${ifDefined(lazyLoad ? IMG_EMPTY : resolvedMedia.url)}
               data-src=${ifDefined(lazyLoad ? resolvedMedia.url : undefined)}
               title="${mediaToRender.title}"
-              @click=${() => {
+              .actionHandler=${actionHandler({
+                hasHold: false,
+                hasDoubleClick: false,
+              })}
+              @action=${() => {
                 if (this._carousel?.clickAllowed()) {
                   this._findRelatedClipView(mediaToRender).then((view) => {
                     if (view) {
@@ -668,10 +685,14 @@ export class FrigateCardViewerCore extends LitElement {
                 }
               }}
               @load="${(e: Event) => {
-                if (this.viewerConfig && (!this.viewerConfig.lazy_load || this._slideHasBeenLazyLoaded[slideIndex])) {
+                if (
+                  this.viewerConfig &&
+                  (!this.viewerConfig.lazy_load ||
+                    this._slideHasBeenLazyLoaded[slideIndex])
+                ) {
                   this._mediaShowInfoHandler(slideIndex, createMediaShowInfo(e));
                 }
-               }}"
+              }}"
             />`}
       </div>
     `;