From 869c2f9049b98652a8ba7c80be1ebd1130426f97 Mon Sep 17 00:00:00 2001
From: Dermot Duffy <dermot.duffy@gmail.com>
Date: Sat, 17 Aug 2024 11:40:33 -0700
Subject: [PATCH] Minor pointer fixes.

---
 src/card.ts              | 25 +++++++++++++++----------
 src/components/viewer.ts |  9 +++------
 src/scss/status.scss     |  9 ++++++++-
 3 files changed, 26 insertions(+), 17 deletions(-)

diff --git a/src/card.ts b/src/card.ts
index 39e1db9d..699c1699 100644
--- a/src/card.ts
+++ b/src/card.ts
@@ -211,9 +211,12 @@ class FrigateCard extends LitElement {
       // If there's nothing to render...
       (menuStyle === 'none' && statusBarStyle === 'none') ||
       // ... or the position I'm rendering does not contain the menu/status bar
+      (position === 'overlay' &&
+        menuStyle === 'outside' &&
+        statusBarStyle === 'outside') ||
       (position !== 'overlay' &&
-        menuPosition !== position &&
-        statusBarPosition !== position)
+        (menuStyle !== 'outside' || menuPosition !== position) &&
+        (statusBarStyle !== 'outside' || statusBarPosition !== position))
     ) {
       // ... then there's nothing to do.
       return;
@@ -230,16 +233,18 @@ class FrigateCard extends LitElement {
         ((statusBarStyle === 'outside' && kind === 'outerlay') ||
           (statusBarStyle !== 'outside' && kind === 'overlay'));
 
-      // As an exception, to improve the visual flow, if the menu is being
-      // rendered on the bottom, render the status bar first.
+
+      // Complex logic to try to always put the menu in the right-looking place.
+      const renderMenuFirst =
+        menuPosition === 'left' ||
+        menuPosition === 'right' ||
+        (menuPosition === 'bottom' && menuStyle === 'hidden' && statusBarStyle !== 'popup') ||
+        (menuPosition === 'top' && (menuStyle !== 'hidden' || statusBarStyle === 'popup'));
+
       return html`
-        ${shouldRenderMenu && menuPosition !== 'bottom'
-          ? this._renderMenu(menuPosition)
-          : ''}
+        ${shouldRenderMenu && renderMenuFirst ? this._renderMenu(menuPosition) : ''}
         ${shouldRenderStatusBar ? this._renderStatusBar(statusBarPosition) : ''}
-        ${shouldRenderMenu && menuPosition === 'bottom'
-          ? this._renderMenu(menuPosition)
-          : ''}
+        ${shouldRenderMenu && !renderMenuFirst ? this._renderMenu(menuPosition) : ''}
       `;
     };
 
diff --git a/src/components/viewer.ts b/src/components/viewer.ts
index a18c2ead..5ed93cc5 100644
--- a/src/components/viewer.ts
+++ b/src/components/viewer.ts
@@ -505,7 +505,7 @@ export class FrigateCardViewerCarousel extends LitElement {
     return html` <div class="embla__slide">
       <frigate-card-viewer-provider
         .hass=${this.hass}
-        .view=${view}
+        .viewManagerEpoch=${this.viewManagerEpoch}
         .media=${media}
         .viewerConfig=${this.viewerConfig}
         .resolvedMediaCache=${this.resolvedMediaCache}
@@ -724,10 +724,7 @@ export class FrigateCardViewerProvider
     return null;
   }
 
-  /**
-   * Dispatch a clip view that matches the current (snapshot) query.
-   */
-  protected async _dispatchRelatedClipView(): Promise<void> {
+  protected async _switchToRelatedClipView(): Promise<void> {
     const view = this.viewManagerEpoch?.manager.getView();
     if (
       !this.hass ||
@@ -912,7 +909,7 @@ export class FrigateCardViewerProvider
             title="${this.media.getTitle() ?? ''}"
             @click=${() => {
               if (this.viewerConfig?.snapshot_click_plays_clip) {
-                this._dispatchRelatedClipView();
+                this._switchToRelatedClipView();
               }
             }}
             @load=${(ev: Event) => {
diff --git a/src/scss/status.scss b/src/scss/status.scss
index 31161fcc..ad740e96 100644
--- a/src/scss/status.scss
+++ b/src/scss/status.scss
@@ -13,6 +13,14 @@
   transition: opacity 1s;
 }
 
+/*******************************************************
+ * Non-hover styles should not interact with the pointer
+ *******************************************************/
+ 
+:host(:not([data-style*='hover'])) {
+  pointer-events: none;
+}
+
 /***************
  * Outside style
  ***************/
@@ -32,7 +40,6 @@
 }
 :host([data-style='popup'][hide]) {
   opacity: 0;
-  pointer-events: none;
 }
 
 /*********************