Select thumbnail unless in viewer.

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}

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;
   }

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>`;