Merge pull request #932 from dermotduffy/camera-capabilities

Don't show the timeline if no cameras support it

src/camera-manager/engine.ts

@@ -14,7 +14,7 @@ import {
   RecordingQueryResultsMap,
   RecordingSegmentsQuery,
   RecordingSegmentsQueryResultsMap,
-  CameraManagerEngineCapabilities,
+  CameraManagerCameraCapabilities,
   CameraManagerMediaCapabilities,
   CameraManagerCameraMetadata,
 } from './types';
@@ -100,6 +100,9 @@ export interface CameraManagerEngine {
     cameraConfig: CameraConfig,
   ): CameraManagerCameraMetadata;
 
-  getCapabilities(): CameraManagerEngineCapabilities | null;
+  getCameraCapabilities(
+    cameraConfig: CameraConfig,
+  ): CameraManagerCameraCapabilities | null;
+
   getMediaCapabilities(media: ViewMedia): CameraManagerMediaCapabilities | null;
 }

src/camera-manager/frigate/engine-frigate.ts

@@ -13,7 +13,7 @@ import {
 import { DateRange } from '../range';
 import {
   CameraManagerCameraMetadata,
-  CameraManagerEngineCapabilities,
+  CameraManagerCameraCapabilities,
   CameraManagerMediaCapabilities,
   DataQuery,
   Engine,
@@ -805,10 +805,14 @@ export class FrigateCameraManagerEngine implements CameraManagerEngine {
     return seekMilliseconds / 1000;
   }
 
-  public getCapabilities(): CameraManagerEngineCapabilities {
+  public getCameraCapabilities(
+    cameraConfig: CameraConfig,
+  ): CameraManagerCameraCapabilities {
+    const isBirdseye = cameraConfig.frigate.camera_name === CAMERA_BIRDSEYE;
     return {
-      canFavoriteEvents: true,
+      canFavoriteEvents: !isBirdseye,
-      canFavoriteRecordings: false,
+      canFavoriteRecordings: !isBirdseye,
+      supportsTimeline: !isBirdseye,
     };
   }
 

src/camera-manager/manager.ts

@@ -2,6 +2,7 @@ import { HomeAssistant } from 'custom-card-helpers';
 import { CameraConfig, CardWideConfig } from '../types.js';
 import { allPromises, arrayify, setify } from '../utils/basic.js';
 import {
+  CameraManagerCameraCapabilities,
   CameraManagerCameraMetadata,
   CameraManagerCapabilities,
   CameraManagerMediaCapabilities,
@@ -312,22 +313,6 @@ export class CameraManager {
     return engine.getMediaDownloadPath(cameraConfig, media);
   }
 
-  public getCapabilities(): CameraManagerCapabilities | null {
-    const engines = this._engineFactory.getAllEngines(this._cameras);
-    if (!engines) {
-      return null;
-    }
-
-    return {
-      canFavoriteEvents: engines.some(
-        (engine) => engine.getCapabilities()?.canFavoriteEvents,
-      ),
-      canFavoriteRecordings: engines.some(
-        (engine) => engine.getCapabilities()?.canFavoriteRecordings,
-      ),
-    };
-  }
-
   public getMediaCapabilities(media: ViewMedia): CameraManagerMediaCapabilities | null {
     const engine = this._engineFactory.getEngineForMedia(this._cameras, media);
     if (!engine) {
@@ -534,12 +519,45 @@ export class CameraManager {
 
   public getCameraMetadata(
     hass: HomeAssistant,
-    cameraConfig?: CameraConfig,
+    cameraID: string,
   ): CameraManagerCameraMetadata | null {
+    const cameraConfig = this._cameras.get(cameraID);
     const engine = this._engineFactory.getEngineForCamera(cameraConfig);
     if (!engine || !cameraConfig) {
       return null;
     }
     return engine.getCameraMetadata(hass, cameraConfig);
   }
+
+  public getCameraCapabilities(
+    cameraID: string,
+  ): CameraManagerCameraCapabilities | null {
+    const cameraConfig = this._cameras.get(cameraID);
+    if (!cameraConfig) {
+      return null;
+    }
+
+    const engine = this._engineFactory.getEngineForCamera(cameraConfig);
+    if (!engine) {
+      return null;
+    }
+
+    return engine.getCameraCapabilities(cameraConfig);
+  }
+
+  public getAggregateCameraCapabilities(
+    cameraIDs?: Set<string>,
+  ): CameraManagerCapabilities {
+    const perCameraCapabilities = [...(cameraIDs ?? this._cameras.keys())].map(
+      (cameraID) => this.getCameraCapabilities(cameraID),
+    );
+
+    return {
+      canFavoriteEvents: perCameraCapabilities.some((cap) => cap?.canFavoriteEvents),
+      canFavoriteRecordings: perCameraCapabilities.some(
+        (cap) => cap?.canFavoriteRecordings,
+      ),
+      supportsTimeline: perCameraCapabilities.some((cap) => cap?.supportsTimeline),
+    };
+  }
 }

src/camera-manager/types.ts

@@ -85,10 +85,11 @@ export interface MediaMetadata {
 interface BaseCapabilities {
   canFavoriteEvents: boolean;
   canFavoriteRecordings: boolean;
+  supportsTimeline: boolean;
 }
 
 export type CameraManagerCapabilities = BaseCapabilities;
-export type CameraManagerEngineCapabilities = BaseCapabilities;
+export type CameraManagerCameraCapabilities = BaseCapabilities;
 export interface CameraManagerMediaCapabilities {
   canFavorite: boolean;
 }

src/card.ts

@@ -399,12 +399,12 @@ class FrigateCard extends LitElement {
     });
 
     if (this._cameras && this._cameras.size > 1) {
-      const menuItems = Array.from(this._cameras, ([camera, config]) => {
+      const menuItems = Array.from(this._cameras, ([cameraID, config]) => {
         const action = createFrigateCardCustomAction('camera_select', {
-          camera: camera,
+          camera: cameraID,
         });
         const metadata = this._hass
-          ? this._cameraManager?.getCameraMetadata(this._hass, config) ?? undefined
+          ? this._cameraManager?.getCameraMetadata(this._hass, cameraID) ?? undefined
           : undefined;
 
         return {
@@ -413,7 +413,7 @@ class FrigateCard extends LitElement {
           entity: config.camera_entity,
           state_color: true,
           title: metadata?.title,
-          selected: this._view?.camera === camera,
+          selected: this._view?.camera === cameraID,
           ...(action && { tap_action: action }),
         };
       });
@@ -1427,7 +1427,9 @@ class FrigateCard extends LitElement {
     } else if (this._view?.is('live') && cameraEntity) {
       media_content_id = `media-source://camera/${cameraEntity}`;
       media_content_type = 'application/vnd.apple.mpegurl';
-      title = this._cameraManager.getCameraMetadata(this._hass, cameraConfig)?.title ?? null;
+      title =
+        this._cameraManager.getCameraMetadata(this._hass, this._view.camera)?.title ??
+        null;
       thumbnail = this._hass?.states[cameraEntity]?.attributes?.entity_picture ?? null;
     }
 

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(
+      this._cameraOptions = Array.from(this.cameras.keys()).map((cameraID) => ({
-        ([cameraID, cameraConfig]) => ({
+        value: cameraID,
-          value: cameraID,
+        label: this.hass
-          label: this.hass
+          ? this.cameraManager?.getCameraMetadata(this.hass, cameraID)?.title ?? ''
-            ? this.cameraManager?.getCameraMetadata(this.hass, cameraConfig)?.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 || !this.view) {
-    if (!media || !cameraConfig || !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,
-        this._embedThumbnailTask,
+          this._embedThumbnailTask,
-        (embeddedThumbnail: string | null) =>
+          (embeddedThumbnail: string | null) =>
-          embeddedThumbnail ? html`<img src="${embeddedThumbnail}" />` : html``,
+            embeddedThumbnail ? html`<img src="${embeddedThumbnail}" />` : html``,
-        { inProgressFunc: () => imageOff },
+          { 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)
+                    ? getDurationString(startTime, endTime)
-            : localize('event.in_progress')}</span
+                    : 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);
+              stopEventFromActivatingCardWideActions(ev);
-            if (this.hass && this.media) {
+              if (this.hass && this.media) {
-              try {
+                try {
-                await this.cameraManager?.favoriteMedia(
+                  await this.cameraManager?.favoriteMedia(
-                  this.hass,
+                    this.hass,
-                  this.media,
+                    this.media,
-                  !this.media?.isFavorite(),
+                    !this.media?.isFavorite(),
-                );
+                  );
-              } catch (e) {
+                } catch (e) {
-                errorToConsole(e as Error);
+                  errorToConsole(e as Error);
-                return;
+                  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)
+      : this.details && ViewMediaClassifier.isRecording(this.media)
-          ? html`<frigate-card-thumbnail-details-recording
+      ? 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
+    const capabilities = this.cameraManager?.getAggregateCameraCapabilities(
-      @frigate-card:timeline:thumbnail-data-request=${this._handleThumbnailDataRequest.bind(
+      this._getTimelineCameraIDs(),
-        this,
+    );
-      )}
+
-      class="timeline"
+    return html` ${capabilities?.supportsTimeline
-      ${ref(this._refTimeline)}
+      ? html` <div
-    >
+          @frigate-card:timeline:thumbnail-data-request=${this._handleThumbnailDataRequest.bind(
-      <ha-icon
+            this,
-        class="lock"
+          )}
-        .icon=${`mdi:${this._locked ? 'lock' : 'lock-open-variant'}`}
+          class="timeline"
-        @click=${() => {
+          ${ref(this._refTimeline)}
-          this._locked = !this._locked;
+        >
-        }}
+          <ha-icon
-        aria-label="${this._locked
+            class="lock"
-          ? localize('timeline.unlock')
+            .icon=${`mdi:${this._locked ? 'lock' : 'lock-open-variant'}`}
-          : localize('timeline.lock')}"
+            @click=${() => {
-        title="${this._locked ? localize('timeline.unlock') : localize('timeline.lock')}"
+              this._locked = !this._locked;
-      >
+            }}
-      </ha-icon>
+            aria-label="${this._locked
-    </div>`;
+              ? 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(
+      const cameraMetadata = this.cameraManager.getCameraMetadata(this.hass, cameraID);
-        this.hass,
+      const cameraCapabilities = this.cameraManager.getCameraCapabilities(cameraID);
-        cameraConfig,
+
-      );
+      if (cameraMetadata && cameraCapabilities?.supportsTimeline) {
-      if (
-        cameraMetadata &&
-        cameraConfig.frigate.camera_name &&
-        cameraConfig.frigate.camera_name !== CAMERA_BIRDSEYE
-      ) {
         groups.push({
           id: cameraID,
           content: cameraMetadata.title,