Clicking on an event in the timeline always plays.

src/components/surround.ts

@@ -144,10 +144,7 @@ export class FrigateCardSurround extends LitElement {
       return null;
     }
     if (this.view?.is('live')) {
-      return getAllDependentCameras(
+      return getAllDependentCameras(this.cameraManager, this.view.camera);
-        this.cameraManager,
-        this.view.camera,
-      );
     }
     if (this.view.isViewerView()) {
       return new Set(

src/components/timeline-core.ts

@@ -34,15 +34,11 @@ import {
   ExtendedHomeAssistant,
   frigateCardConfigDefaults,
   FrigateCardView,
-  ThumbnailsControlConfig,
+  ThumbnailsControlBaseConfig,
   TimelineCoreConfig,
 } from '../types';
 import { stopEventFromActivatingCardWideActions } from '../utils/action';
-import {
+import { contentsChanged, isHoverableDevice } from '../utils/basic';
-  contentsChanged,
-  dispatchFrigateCardEvent,
-  isHoverableDevice,
-} from '../utils/basic';
 import {
   createQueriesForRecordingsView,
   executeMediaQueryForView,
@@ -173,7 +169,7 @@ export class FrigateCardTimelineCore extends LitElement {
   public timelineConfig?: TimelineCoreConfig;
 
   @property({ attribute: true, type: Boolean })
-  public thumbnailConfig?: ThumbnailsControlConfig;
+  public thumbnailConfig?: ThumbnailsControlBaseConfig;
 
   // Whether or not this is a mini-timeline (in mini-mode the component takes a
   // supportive role for other views).
@@ -585,6 +581,7 @@ export class FrigateCardTimelineCore extends LitElement {
       } else {
         view = this.view.evolve({
           queryResults: newResults,
+          view: 'media',
         });
       }
 
@@ -595,12 +592,6 @@ export class FrigateCardTimelineCore extends LitElement {
 
     if (view) {
       view.dispatchChangeEvent(this);
-
-      if (this.view?.is('timeline')) {
-        dispatchFrigateCardEvent(this, 'thumbnails:open');
-      }
-    } else if (this.view?.is('timeline')) {
-      dispatchFrigateCardEvent(this, 'thumbnails:close');
     }
 
     this._ignoreClick = false;
@@ -1114,13 +1105,11 @@ export class FrigateCardTimelineCore extends LitElement {
       this._destroy();
     }
 
-    const options = this._getOptions();
     let createdTimeline = false;
 
     if (
       this._timelineSource &&
       this._refTimeline.value &&
-      options &&
       this.timelineConfig &&
       (changedProperties.has('timelineConfig') || changedProperties.has('cameraIDs'))
     ) {
@@ -1139,6 +1128,8 @@ export class FrigateCardTimelineCore extends LitElement {
         return;
       }
 
+      const options = this._getOptions();
+      if (options) {
         createdTimeline = true;
         if (this.mini && groups.length === 1) {
           // In a mini timeline, if there's only one group don't bother grouping
@@ -1179,6 +1170,7 @@ export class FrigateCardTimelineCore extends LitElement {
           this._removeTargetBar();
         });
       }
+    }
 
     if (changedProperties.has('view')) {
       if (createdTimeline) {

src/types.ts

@@ -779,8 +779,8 @@ export type ImageViewConfig = z.infer<typeof imageConfigSchema>;
 /**
  * Thumbnail controls configuration section.
  */
-const thumbnailControlsDefaults = {
+
-  mode: 'right' as const,
+const thumbnailControlsBaseDefaults = {
   size: 100,
   show_details: true,
   show_favorite_control: true,
@@ -788,26 +788,39 @@ const thumbnailControlsDefaults = {
   show_download_control: true,
 };
 
-const thumbnailsControlSchema = z.object({
+// Configuration for the actual rendered thumbnail.
-  mode: z
+const thumbnailsControlBaseSchema = z.object({
-    .enum(['none', 'above', 'below', 'left', 'right'])
-    .default(thumbnailControlsDefaults.mode),
   size: z
     .number()
     .min(THUMBNAIL_WIDTH_MIN)
     .max(THUMBNAIL_WIDTH_MAX)
-    .default(thumbnailControlsDefaults.size),
+    .default(thumbnailControlsBaseDefaults.size),
-  show_details: z.boolean().default(thumbnailControlsDefaults.show_details),
+  show_details: z.boolean().default(thumbnailControlsBaseDefaults.show_details),
   show_favorite_control: z
     .boolean()
-    .default(thumbnailControlsDefaults.show_favorite_control),
+    .default(thumbnailControlsBaseDefaults.show_favorite_control),
   show_timeline_control: z
     .boolean()
-    .default(thumbnailControlsDefaults.show_timeline_control),
+    .default(thumbnailControlsBaseDefaults.show_timeline_control),
   show_download_control: z
     .boolean()
-    .default(thumbnailControlsDefaults.show_download_control),
+    .default(thumbnailControlsBaseDefaults.show_download_control),
 });
+
+export type ThumbnailsControlBaseConfig = z.infer<typeof thumbnailsControlBaseSchema>;
+
+// Configuration that may control the placement of the thumbnail.
+const thumbnailControlsDefaults = {
+  ...thumbnailControlsBaseDefaults,
+  mode: 'right' as const,
+};
+
+const thumbnailsControlSchema = thumbnailsControlBaseSchema.extend({
+  mode: z
+    .enum(['none', 'above', 'below', 'left', 'right'])
+    .default(thumbnailControlsDefaults.mode),
+});
+
 export type ThumbnailsControlConfig = z.infer<typeof thumbnailsControlSchema>;
 
 /**