Allow live thumbnails to load recordings .

src/components/gallery.ts

@@ -87,7 +87,7 @@ export class FrigateCardGallery extends LitElement {
           this.view,
         );
       } else {
-        const mediaType = this.view.is('snapshots')
+        const eventsMediaType = this.view.is('snapshots')
           ? 'snapshots'
           : this.view.is('clips')
           ? 'clips'
@@ -98,7 +98,7 @@ export class FrigateCardGallery extends LitElement {
           this.cardWideConfig,
           this.view,
           {
-            ...(mediaType && { mediaType: mediaType }),
+            ...(eventsMediaType && { eventsMediaType: eventsMediaType }),
           },
         );
       }

src/components/surround.ts

@@ -14,9 +14,16 @@ import {
   ThumbnailsControlConfig,
 } from '../config/types.js';
 import basicBlockStyle from '../scss/basic-block.scss';
-import { ClipsOrSnapshotsOrAll, ExtendedHomeAssistant } from '../types.js';
+import {
+  ClipsOrSnapshotsOrAll,
+  EventsOrRecordings,
+  ExtendedHomeAssistant,
+} from '../types.js';
 import { contentsChanged, dispatchFrigateCardEvent } from '../utils/basic.js';
-import { changeViewToRecentEventsForCameraAndDependents } from '../utils/media-to-view';
+import {
+  changeViewToRecentEventsForCameraAndDependents,
+  changeViewToRecentRecordingForCameraAndDependents,
+} from '../utils/media-to-view';
 import { View } from '../view/view.js';
 import './surround-basic.js';
 import { ThumbnailCarouselTap } from './thumbnail-carousel.js';
@@ -48,7 +55,10 @@ export class FrigateCardSurround extends LitElement {
 
   // If fetchMedia is not specified, no fetching is done.
   @property({ attribute: false, hasChanged: contentsChanged })
-  public fetchMedia?: ClipsOrSnapshotsOrAll;
+  public fetchMediaType?: EventsOrRecordings;
+
+  @property({ attribute: false, hasChanged: contentsChanged })
+  public fetchEventsMediaType?: ClipsOrSnapshotsOrAll;
 
   @property({ attribute: false })
   public cameraManager?: CameraManager;
@@ -68,7 +78,8 @@ export class FrigateCardSurround extends LitElement {
     if (
       !this.cameraManager ||
       !this.cardWideConfig ||
-      !this.fetchMedia ||
+      !this.fetchMediaType ||
+      !this.fetchEventsMediaType ||
       !this.hass ||
       !this.view ||
       this.view.query ||
@@ -78,18 +89,33 @@ export class FrigateCardSurround extends LitElement {
     ) {
       return;
     }
-    await changeViewToRecentEventsForCameraAndDependents(
-      this,
-      this.cameraManager,
-      this.cardWideConfig,
-      this.view,
-      {
-        allCameras: this.view.isGrid(),
-        targetView: this.view.view,
-        mediaType: this.fetchMedia,
-        select: 'latest',
-      },
-    );
+
+    if (this.fetchMediaType === 'events') {
+      await changeViewToRecentEventsForCameraAndDependents(
+        this,
+        this.cameraManager,
+        this.cardWideConfig,
+        this.view,
+        {
+          allCameras: this.view.isGrid(),
+          targetView: this.view.view,
+          eventsMediaType: this.fetchEventsMediaType,
+          select: 'latest',
+        },
+      );
+    } else if (this.fetchMediaType === 'recordings') {
+      await changeViewToRecentRecordingForCameraAndDependents(
+        this,
+        this.cameraManager,
+        this.cardWideConfig,
+        this.view,
+        {
+          allCameras: this.view.isGrid(),
+          targetView: this.view.view,
+          select: 'latest',
+        },
+      );
+    }
   }
 
   /**

src/components/timeline-core.ts

@@ -1161,7 +1161,7 @@ export class FrigateCardTimelineCore extends LitElement {
         this._timelineSource = new TimelineDataSource(
           this.cameraManager,
           cameraIDs,
-          this.timelineConfig.media,
+          this.timelineConfig.events_media_type,
           this.timelineConfig.show_recordings,
         );
       } else {

src/components/viewer.ts

@@ -168,7 +168,7 @@ export class FrigateCardViewer extends LitElement {
           {
             allCameras: this.view.isGrid(),
             targetView: 'media',
-            mediaType: mediaType,
+            eventsMediaType: mediaType,
           },
         );
       }

src/components/views.ts

@@ -64,7 +64,7 @@ export class FrigateCardViews extends LitElement {
   public microphoneManager?: ReadonlyMicrophoneManager;
 
   @property({ attribute: false })
-  public triggeredCameraIDs?: Set<string>;  
+  public triggeredCameraIDs?: Set<string>;
 
   protected willUpdate(changedProps: PropertyValues): void {
     if (changedProps.has('view') || changedProps.has('config')) {
@@ -163,8 +163,11 @@ export class FrigateCardViews extends LitElement {
       class="${classMap(overallClasses)}"
       .hass=${this.hass}
       .view=${this.view}
-      .fetchMedia=${this.view?.is('live')
-        ? this.overriddenConfig.live.controls.thumbnails.media
+      .fetchMediaType=${this.view?.is('live')
+        ? this.overriddenConfig.live.controls.thumbnails.media_type
+        : undefined}
+      .fetchEventsMediaType=${this.view?.is('live')
+        ? this.overriddenConfig.live.controls.thumbnails.events_media_type
         : undefined}
       .thumbnailConfig=${!this.hide ? thumbnailConfig : undefined}
       .timelineConfig=${!this.hide ? miniTimelineConfig : undefined}