From ecf954249d02592af790c9371a73eda97188be4e Mon Sep 17 00:00:00 2001
From: Dermot Duffy <dermot.duffy@gmail.com>
Date: Fri, 7 Apr 2023 14:38:00 -0700
Subject: [PATCH] Select thumbnail unless in viewer.

---
 src/components/surround.ts      |  4 ++++
 src/components/timeline-core.ts | 19 +++++++++++++++++--
 src/components/timeline.ts      |  3 +++
 3 files changed, 24 insertions(+), 2 deletions(-)

diff --git a/src/components/surround.ts b/src/components/surround.ts
index a769b781..7daf8c4b 100644
--- a/src/components/surround.ts
+++ b/src/components/surround.ts
@@ -222,6 +222,10 @@ export class FrigateCardSurround extends LitElement {
             slot=${this.timelineConfig.mode}
             .hass=${this.hass}
             .view=${this.view}
+            .itemClickAction=${this.view.isViewerView() ||
+            this.thumbnailConfig.mode === 'none'
+              ? 'play'
+              : 'select'}
             .cameraIDs=${this._cameraIDsForTimeline}
             .mini=${true}
             .timelineConfig=${this.timelineConfig}
diff --git a/src/components/timeline-core.ts b/src/components/timeline-core.ts
index f6d54bb1..9c94b2f2 100644
--- a/src/components/timeline-core.ts
+++ b/src/components/timeline-core.ts
@@ -38,7 +38,11 @@ import {
   TimelineCoreConfig,
 } from '../types';
 import { stopEventFromActivatingCardWideActions } from '../utils/action';
-import { contentsChanged, isHoverableDevice } from '../utils/basic';
+import {
+  contentsChanged,
+  dispatchFrigateCardEvent,
+  isHoverableDevice,
+} from '../utils/basic';
 import {
   createQueriesForRecordingsView,
   executeMediaQueryForView,
@@ -74,6 +78,8 @@ interface TimelineViewContext {
   window?: TimelineWindow;
 }
 
+type TimelineItemClickAction = 'play' | 'select';
+
 declare module 'view' {
   interface ViewContext {
     timeline?: TimelineViewContext;
@@ -187,6 +193,9 @@ export class FrigateCardTimelineCore extends LitElement {
   @property({ attribute: false })
   public cardWideConfig?: CardWideConfig;
 
+  @property({ attribute: false })
+  public itemClickAction?: TimelineItemClickAction;
+
   @state()
   protected _locked = false;
 
@@ -503,6 +512,7 @@ export class FrigateCardTimelineCore extends LitElement {
     }
 
     let view: View | null = null;
+    let drawerAction: 'open' | 'close' = 'close';
 
     if (
       this.timelineConfig?.show_recordings &&
@@ -581,18 +591,23 @@ export class FrigateCardTimelineCore extends LitElement {
       } else {
         view = this.view.evolve({
           queryResults: newResults,
-          view: 'media',
+          view: this.itemClickAction === 'play' ? 'media' : this.view.view,
         });
       }
 
       if (view?.queryResults?.hasResults()) {
         view.mergeInContext({ mediaViewer: { seek: properties.time } });
       }
+
+      if (this.itemClickAction === 'select' && view) {
+        drawerAction = 'open';
+      }
     }
 
     if (view) {
       view.dispatchChangeEvent(this);
     }
+    dispatchFrigateCardEvent(this, `thumbnails:${drawerAction}`);
 
     this._ignoreClick = false;
   }
diff --git a/src/components/timeline.ts b/src/components/timeline.ts
index 2030a762..2572eb70 100644
--- a/src/components/timeline.ts
+++ b/src/components/timeline.ts
@@ -51,6 +51,9 @@ export class FrigateCardTimeline extends LitElement {
         .thumbnailConfig=${this.timelineConfig.controls.thumbnails}
         .cameraManager=${this.cameraManager}
         .cardWideConfig=${this.cardWideConfig}
+        .itemClickAction=${this.timelineConfig.controls.thumbnails.mode === 'none'
+          ? 'play'
+          : 'select'}
       >
       </frigate-card-timeline-core>
     </frigate-card-surround>`;