Don't show the timeline if no cameras support it.

src/components/gallery.ts

@@ -343,7 +343,6 @@ export class FrigateCardGalleryCore extends LitElement {
             .hass=${this.hass}
             .cameraManager=${this.cameraManager}
             .media=${media}
-            .cameraConfig=${this.cameras?.get(media.getCameraID())}
             .view=${this.view}
             ?details=${!!this.galleryConfig?.controls.thumbnails.show_details}
             ?show_favorite_control=${!!this.galleryConfig?.controls.thumbnails

src/components/live/live.ts

@@ -489,7 +489,7 @@ export class FrigateCardLiveCarousel extends LitElement {
   }
 
   protected _renderLive(
-    camera: string,
+    cameraID: string,
     cameraConfig: CameraConfig,
     slideIndex: number,
   ): TemplateResult | void {
@@ -501,7 +501,7 @@ export class FrigateCardLiveCarousel extends LitElement {
     // <frigate-card-live-provider> is rendering right now.
     const conditionState = {
       ...this.conditionState,
-      camera: camera,
+      camera: cameraID,
     };
 
     const config = getOverriddenConfig(
@@ -510,7 +510,7 @@ export class FrigateCardLiveCarousel extends LitElement {
       conditionState,
     ) as LiveConfig;
 
-    const cameraMetadata = this.cameraManager.getCameraMetadata(this.hass, cameraConfig);
+    const cameraMetadata = this.cameraManager.getCameraMetadata(this.hass, cameraID);
 
     return html`
       <div class="embla__slide">
@@ -560,7 +560,6 @@ export class FrigateCardLiveCarousel extends LitElement {
     if (
       !slides.length ||
       !this.liveConfig ||
-      !this.cameras ||
       !this.view ||
       !this.hass ||
       !this.cameraManager
@@ -578,15 +577,15 @@ export class FrigateCardLiveCarousel extends LitElement {
 
     const cameraMetadataPrevious = prevID ? this.cameraManager.getCameraMetadata(
       this.hass,
-      this.cameras.get(prevID),
+      prevID,
     ) : null;
     const cameraMetadataCurrent = this.cameraManager.getCameraMetadata(
       this.hass,
-      this.cameras.get(this.view.camera),
+      this.view.camera,
     );
     const cameraMetadataNext = nextID ? this.cameraManager.getCameraMetadata(
       this.hass,
-      this.cameras.get(nextID),
+      nextID,
     ) : null;
 
     // Notes on the below:

src/components/media-filter.ts

@@ -272,14 +272,12 @@ class FrigateCardMediaFilter extends ScopedRegistryHost(LitElement) {
 
   protected willUpdate(changedProps: PropertyValues): void {
     if (changedProps.has('cameras') && this.cameras) {
-      this._cameraOptions = Array.from(this.cameras.entries()).map(
-        ([cameraID, cameraConfig]) => ({
-          value: cameraID,
-          label: this.hass
-            ? this.cameraManager?.getCameraMetadata(this.hass, cameraConfig)?.title ?? ''
-            : '',
-        }),
-      );
+      this._cameraOptions = Array.from(this.cameras.keys()).map((cameraID) => ({
+        value: cameraID,
+        label: this.hass
+          ? this.cameraManager?.getCameraMetadata(this.hass, cameraID)?.title ?? ''
+          : '',
+      }));
     }
 
     if (changedProps.has('cameraManager') && this.hass && this.cameraManager) {
@@ -413,7 +411,7 @@ class FrigateCardMediaFilter extends ScopedRegistryHost(LitElement) {
     const areRecordings = !!(
       this.view?.query && MediaQueriesClassifier.areRecordingQueries(this.view.query)
     );
-    const managerCapabilities = this.cameraManager?.getCapabilities();
+    const managerCapabilities = this.cameraManager?.getAggregateCameraCapabilities();
 
     // Which media controls are shown depends on the view.
     const showFavoriteControl = areEvents

src/components/surround.ts

@@ -190,7 +190,6 @@ export class FrigateCardSurround extends LitElement {
             .config=${this.thumbnailConfig}
             .cameraManager=${this.cameraManager}
             .view=${this.view}
-            .cameras=${this.cameras}
             .selected=${this.view.queryResults?.getSelectedIndex() ?? undefined}
             @frigate-card:view:change=${(ev: CustomEvent) => changeDrawer(ev, 'close')}
             @frigate-card:thumbnail-carousel:tap=${(

src/components/thumbnail-carousel.ts

@@ -39,9 +39,6 @@ export class FrigateCardThumbnailCarousel extends LitElement {
   @property({ attribute: false })
   public view?: Readonly<View>;
 
-  @property({ attribute: false })
-  public cameras?: Map<string, CameraConfig>;
-
   @property({ attribute: false })
   public cameraManager?: CameraManager;
 
@@ -150,8 +147,7 @@ export class FrigateCardThumbnailCarousel extends LitElement {
    */
   protected _renderThumbnail(index: number): TemplateResult | void {
     const media = this.view?.queryResults?.getResult(index) ?? null;
-    const cameraConfig = media ? this.cameras?.get(media.getCameraID()) : null;
-    if (!media || !cameraConfig || !this.view) {
+    if (!media || !this.view) {
       return;
     }
 
@@ -166,7 +162,6 @@ export class FrigateCardThumbnailCarousel extends LitElement {
       .cameraManager=${this.cameraManager}
       .hass=${this.hass}
       .media=${media}
-      .cameraConfig=${cameraConfig}
       .view=${this.view}
       .seek=${seekTarget && media.includesTime(seekTarget) ? seekTarget : undefined}
       ?details=${!!this.config?.show_details}

src/components/thumbnail.ts

@@ -21,7 +21,7 @@ import { createFetchThumbnailTask, FetchThumbnailTaskArgs } from '../utils/thumb
 import { View } from '../view/view.js';
 import { Task, TaskStatus } from '@lit-labs/task';
 
-import type { CameraConfig, ExtendedHomeAssistant } from '../types.js';
+import type { ExtendedHomeAssistant } from '../types.js';
 import { EventViewMedia, RecordingViewMedia, ViewMedia } from '../view/media.js';
 import { CameraManager } from '../camera-manager/manager.js';
 import { ViewMediaClassifier } from '../view/media-classifier.js';
@@ -104,12 +104,12 @@ export class FrigateCardThumbnailFeatureEvent extends LitElement {
 
     return html`${this.thumbnail
       ? renderTask(
-        this,
-        this._embedThumbnailTask,
-        (embeddedThumbnail: string | null) =>
-          embeddedThumbnail ? html`<img src="${embeddedThumbnail}" />` : html``,
-        { inProgressFunc: () => imageOff },
-      )
+          this,
+          this._embedThumbnailTask,
+          (embeddedThumbnail: string | null) =>
+            embeddedThumbnail ? html`<img src="${embeddedThumbnail}" />` : html``,
+          { inProgressFunc: () => imageOff },
+        )
       : imageOff} `;
   }
 
@@ -162,7 +162,7 @@ export class FrigateCardThumbnailDetailsEvent extends LitElement {
     return html` <div class="left">
         ${what ? html`<div class="larger">${prettifyTitle(what.join(', '))}</div>` : ``}
         ${startTime
-        ? html` <div>
+          ? html` <div>
                 <span class="heading">${localize('event.start')}:</span>
                 <span>${format(startTime, 'HH:mm:ss')}</span>
               </div>
@@ -170,17 +170,17 @@ export class FrigateCardThumbnailDetailsEvent extends LitElement {
                 <span class="heading">${localize('event.duration')}:</span>
                 <span
                   >${endTime
-            ? getDurationString(startTime, endTime)
-            : localize('event.in_progress')}</span
+                    ? getDurationString(startTime, endTime)
+                    : localize('event.in_progress')}</span
                 >
               </div>`
-        : ``}
+          : ``}
         ${this.seek
-        ? html` <div>
+          ? html` <div>
               <span class="heading">${localize('event.seek')}</span>
               <span>${format(this.seek, 'HH:mm:ss')}</span>
             </div>`
-        : html``}
+          : html``}
       </div>
       ${score
         ? html`<div class="right">
@@ -213,11 +213,11 @@ export class FrigateCardThumbnailDetailsRecording extends LitElement {
     return html`<div class="left">
         <div class="larger">${this.cameraTitle ?? ''}</div>
         ${this.seek
-        ? html` <div>
+          ? html` <div>
               <span class="heading">${localize('recording.seek')}</span>
               <span>${format(this.seek, 'HH:mm:ss')}</span>
             </div>`
-        : html``}
+          : html``}
       </div>
       ${eventCount !== null
         ? html`<div class="right">
@@ -245,9 +245,6 @@ export class FrigateCardThumbnail extends LitElement {
   @property({ attribute: true })
   public media?: ViewMedia;
 
-  @property({ attribute: false })
-  public cameraConfig?: CameraConfig;
-
   @property({ attribute: true, type: Boolean })
   public details = false;
 
@@ -268,7 +265,7 @@ export class FrigateCardThumbnail extends LitElement {
    * @returns A template to display to the user.
    */
   protected render(): TemplateResult | void {
-    if (!this.media || !this.cameraConfig || !this.cameraManager || !this.hass) {
+    if (!this.media || !this.cameraManager || !this.hass) {
       return;
     }
 
@@ -293,7 +290,10 @@ export class FrigateCardThumbnail extends LitElement {
       this.hass &&
       this.cameraManager?.getMediaCapabilities(this.media)?.canFavorite;
 
-    const cameraTitle = this.cameraManager.getCameraMetadata(this.hass, this.cameraConfig)?.title;
+    const cameraTitle = this.cameraManager.getCameraMetadata(
+      this.hass,
+      this.media.getCameraID(),
+    )?.title;
 
     return html` ${ViewMediaClassifier.isEvent(this.media)
       ? html`<frigate-card-thumbnail-feature-event
@@ -303,50 +303,50 @@ export class FrigateCardThumbnail extends LitElement {
           .thumbnail=${thumbnail ?? undefined}
         ></frigate-card-thumbnail-feature-event>`
       : ViewMediaClassifier.isRecording(this.media)
-        ? html`<frigate-card-thumbnail-feature-recording
+      ? html`<frigate-card-thumbnail-feature-recording
           aria-label="${title ?? ''}"
           title="${title ?? ''}"
           .cameraTitle=${this.details ? undefined : cameraTitle}
           .date=${this.media.getStartTime() ?? undefined}
         ></frigate-card-thumbnail-feature-recording>`
-        : html``}
+      : html``}
     ${shouldShowFavoriteControl
-        ? html` <ha-icon
+      ? html` <ha-icon
             class="${classMap(starClasses)}"
             icon=${this.media.isFavorite() ? 'mdi:star' : 'mdi:star-outline'}
             title=${localize('thumbnail.retain_indefinitely')}
             @click=${async (ev: Event) => {
-            stopEventFromActivatingCardWideActions(ev);
-            if (this.hass && this.media) {
-              try {
-                await this.cameraManager?.favoriteMedia(
-                  this.hass,
-                  this.media,
-                  !this.media?.isFavorite(),
-                );
-              } catch (e) {
-                errorToConsole(e as Error);
-                return;
+              stopEventFromActivatingCardWideActions(ev);
+              if (this.hass && this.media) {
+                try {
+                  await this.cameraManager?.favoriteMedia(
+                    this.hass,
+                    this.media,
+                    !this.media?.isFavorite(),
+                  );
+                } catch (e) {
+                  errorToConsole(e as Error);
+                  return;
+                }
+                this.requestUpdate();
               }
-              this.requestUpdate();
-            }
-          }}
+            }}
           /></ha-icon>`
-        : ``}
+      : ``}
     ${this.details && ViewMediaClassifier.isEvent(this.media)
-        ? html`<frigate-card-thumbnail-details-event
+      ? html`<frigate-card-thumbnail-details-event
           .media=${this.media ?? undefined}
           .seek=${this.seek}
         ></frigate-card-thumbnail-details-event>`
-        : this.details && ViewMediaClassifier.isRecording(this.media)
-          ? html`<frigate-card-thumbnail-details-recording
+      : this.details && ViewMediaClassifier.isRecording(this.media)
+      ? html`<frigate-card-thumbnail-details-recording
           .media=${this.media ?? undefined}
           .cameraTitle=${cameraTitle}
           .seek=${this.seek}
         ></frigate-card-thumbnail-details-recording>`
-          : html``}
+      : html``}
     ${shouldShowTimelineControl
-        ? html`<ha-icon
+      ? html`<ha-icon
           class="timeline"
           icon="mdi:target"
           title=${localize('thumbnail.timeline')}
@@ -364,10 +364,9 @@ export class FrigateCardThumbnail extends LitElement {
               })
               .removeContext('timeline')
               .dispatchChangeEvent(this);
-          }
-          }
+          }}
         ></ha-icon>`
-        : ''}`;
+      : ''}`;
   }
 
   /**

src/components/timeline-core.ts

@@ -149,7 +149,6 @@ export class FrigateCardTimelineThumbnail extends LitElement {
     return html` <frigate-card-thumbnail
       .hass=${dataRequest.hass}
       .cameraManager=${dataRequest.cameraManager}
-      .cameraConfig=${dataRequest.cameraConfig}
       .media=${dataRequest.media}
       .view=${dataRequest.view}
       ?details=${this.details}
@@ -259,26 +258,34 @@ export class FrigateCardTimelineCore extends LitElement {
     if (!this.hass || !this.view || !this.timelineConfig) {
       return;
     }
-    return html`<div
-      @frigate-card:timeline:thumbnail-data-request=${this._handleThumbnailDataRequest.bind(
-        this,
-      )}
-      class="timeline"
-      ${ref(this._refTimeline)}
-    >
-      <ha-icon
-        class="lock"
-        .icon=${`mdi:${this._locked ? 'lock' : 'lock-open-variant'}`}
-        @click=${() => {
-          this._locked = !this._locked;
-        }}
-        aria-label="${this._locked
-          ? localize('timeline.unlock')
-          : localize('timeline.lock')}"
-        title="${this._locked ? localize('timeline.unlock') : localize('timeline.lock')}"
-      >
-      </ha-icon>
-    </div>`;
+    const capabilities = this.cameraManager?.getAggregateCameraCapabilities(
+      this._getTimelineCameraIDs(),
+    );
+
+    return html` ${capabilities?.supportsTimeline
+      ? html` <div
+          @frigate-card:timeline:thumbnail-data-request=${this._handleThumbnailDataRequest.bind(
+            this,
+          )}
+          class="timeline"
+          ${ref(this._refTimeline)}
+        >
+          <ha-icon
+            class="lock"
+            .icon=${`mdi:${this._locked ? 'lock' : 'lock-open-variant'}`}
+            @click=${() => {
+              this._locked = !this._locked;
+            }}
+            aria-label="${this._locked
+              ? localize('timeline.unlock')
+              : localize('timeline.lock')}"
+            title="${this._locked
+              ? localize('timeline.unlock')
+              : localize('timeline.lock')}"
+          >
+          </ha-icon>
+        </div>`
+      : ''}`;
   }
 
   /**
@@ -686,15 +693,10 @@ export class FrigateCardTimelineCore extends LitElement {
       if (!this.hass || !cameraConfig || !this.cameraManager) {
         return;
       }
-      const cameraMetadata = this.cameraManager.getCameraMetadata(
-        this.hass,
-        cameraConfig,
-      );
-      if (
-        cameraMetadata &&
-        cameraConfig.frigate.camera_name &&
-        cameraConfig.frigate.camera_name !== CAMERA_BIRDSEYE
-      ) {
+      const cameraMetadata = this.cameraManager.getCameraMetadata(this.hass, cameraID);
+      const cameraCapabilities = this.cameraManager.getCameraCapabilities(cameraID);
+
+      if (cameraMetadata && cameraCapabilities?.supportsTimeline) {
         groups.push({
           id: cameraID,
           content: cameraMetadata.title,