feat: Rename the card to advanced-camera-card (#1873)

Whilst the Frigate support in this card is the best among camera
engines, the name incorrectly suggests that Frigate is a requirement.
Instead, to broaden the appeal, change to more camera agnostic name.
This does not suggest any change in priority, role or support for
Frigate.

This change is likely to be bug prone, due to the size of the rename --
the code contains 1500+ references to "Frigate" most of which make sense
to rename, some which do not, all of which needed human assessment.

- Closes #1298


BREAKING CHANGE: References to `frigate-card` in all kinds of
configuration need to be updated to `advanced-camera-card`. An automated
config upgrade should take care of the majority of usecases (click `Edit
-> Upgrade -> Save`), though may not be perfect.

src/components/viewer/carousel.ts

@@ -15,7 +15,7 @@ import { ViewManagerEpoch } from '../../card-controller/view/types.js';
 import { MediaActionsController } from '../../components-lib/media-actions-controller.js';
 import {
   CardWideConfig,
-  frigateCardConfigDefaults,
+  configDefaults,
   TransitionEffect,
   ViewerConfig,
 } from '../../config/types.js';
@@ -23,8 +23,8 @@ import { localize } from '../../localize/localize.js';
 import '../../patches/ha-hls-player.js';
 import viewerCarouselStyle from '../../scss/viewer-carousel.scss';
 import {
+  AdvancedCameraCardMediaPlayer,
   ExtendedHomeAssistant,
-  FrigateCardMediaPlayer,
   MediaLoadedInfo,
 } from '../../types.js';
 import { stopEventFromActivatingCardWideActions } from '../../utils/action.js';
@@ -42,7 +42,7 @@ import { renderMessage } from '../message.js';
 import '../next-prev-control.js';
 import '../ptz.js';
 import './provider.js';
-import { FrigateCardViewerProvider } from './provider.js';
+import { AdvancedCameraCardViewerProvider } from './provider.js';
 
 interface MediaNeighbor {
   index: number;
@@ -54,10 +54,10 @@ interface MediaNeighbors {
   next?: MediaNeighbor;
 }
 
-const FRIGATE_CARD_VIEWER_PROVIDER = 'frigate-card-viewer-provider';
+const ADVANCED_CAMERA_CARD_VIEWER_PROVIDER = 'advanced-camera-card-viewer-provider';
 
-@customElement('frigate-card-viewer-carousel')
-export class FrigateCardViewerCarousel extends LitElement {
+@customElement('advanced-camera-card-viewer-carousel')
+export class AdvancedCameraCardViewerCarousel extends LitElement {
   @property({ attribute: false })
   public hass?: ExtendedHomeAssistant;
 
@@ -92,7 +92,7 @@ export class FrigateCardViewerCarousel extends LitElement {
 
   protected _media: ViewMedia[] | null = null;
   protected _mediaActionsController = new MediaActionsController();
-  protected _player: FrigateCardMediaPlayer | null = null;
+  protected _player: AdvancedCameraCardMediaPlayer | null = null;
   protected _refCarousel: Ref<HTMLElement> = createRef();
 
   updated(changedProperties: PropertyValues): void {
@@ -134,7 +134,7 @@ export class FrigateCardViewerCarousel extends LitElement {
   protected _getTransitionEffect(): TransitionEffect {
     return (
       this.viewerConfig?.transition_effect ??
-      frigateCardConfigDefaults.media_viewer.transition_effect
+      configDefaults.media_viewer.transition_effect
     );
   }
 
@@ -227,8 +227,8 @@ export class FrigateCardViewerCarousel extends LitElement {
     }
 
     const viewerProvider = slide?.querySelector(
-      'frigate-card-viewer-provider',
-    ) as FrigateCardViewerProvider | null;
+      'advanced-camera-card-viewer-provider',
+    ) as AdvancedCameraCardViewerProvider | null;
     if (viewerProvider) {
       viewerProvider.load = true;
     }
@@ -259,7 +259,7 @@ export class FrigateCardViewerCarousel extends LitElement {
   protected willUpdate(changedProps: PropertyValues): void {
     if (changedProps.has('viewerConfig')) {
       this._mediaActionsController.setOptions({
-        playerSelector: FRIGATE_CARD_VIEWER_PROVIDER,
+        playerSelector: ADVANCED_CAMERA_CARD_VIEWER_PROVIDER,
         ...(this.viewerConfig?.auto_play && {
           autoPlayConditions: this.viewerConfig.auto_play,
         }),
@@ -330,7 +330,7 @@ export class FrigateCardViewerCarousel extends LitElement {
         ? 'previous'
         : 'next';
 
-    return html` <frigate-card-next-previous-control
+    return html` <advanced-camera-card-next-previous-control
       slot=${side}
       .hass=${this.hass}
       .side=${side}
@@ -342,7 +342,7 @@ export class FrigateCardViewerCarousel extends LitElement {
         scroll(scrollDirection);
         stopEventFromActivatingCardWideActions(ev);
       }}
-    ></frigate-card-next-previous-control>`;
+    ></advanced-camera-card-next-previous-control>`;
   }
 
   protected render(): TemplateResult | void {
@@ -373,40 +373,40 @@ export class FrigateCardViewerCarousel extends LitElement {
     const view = this.viewManagerEpoch?.manager.getView();
 
     return html`
-      <frigate-card-carousel
+      <advanced-camera-card-carousel
         ${ref(this._refCarousel)}
         .dragEnabled=${this.viewerConfig?.draggable ?? true}
         .plugins=${guard([this.viewerConfig, this._media], this._getPlugins.bind(this))}
         .selected=${this._selected}
         transitionEffect=${this._getTransitionEffect()}
-        @frigate-card:carousel:select=${(ev: CustomEvent<CarouselSelected>) => {
+        @advanced-camera-card:carousel:select=${(ev: CustomEvent<CarouselSelected>) => {
           this._setViewSelectedIndex(ev.detail.index);
         }}
-        @frigate-card:media:loaded=${(ev: CustomEvent<MediaLoadedInfo>) => {
+        @advanced-camera-card:media:loaded=${(ev: CustomEvent<MediaLoadedInfo>) => {
           this._player = ev.detail.player ?? null;
           this._seekHandler();
         }}
-        @frigate-card:media:unloaded=${() => {
+        @advanced-camera-card:media:unloaded=${() => {
           this._player = null;
         }}
       >
         ${this.showControls ? this._renderNextPrevious('left', neighbors) : ''}
         ${guard([this._media, view], () => this._getSlides())}
         ${this.showControls ? this._renderNextPrevious('right', neighbors) : ''}
-      </frigate-card-carousel>
+      </advanced-camera-card-carousel>
       ${view
-        ? html` <frigate-card-ptz
+        ? html` <advanced-camera-card-ptz
             .config=${this.viewerConfig?.controls.ptz}
             .forceVisibility=${view?.context?.ptzControls?.enabled}
           >
-          </frigate-card-ptz>`
+          </advanced-camera-card-ptz>`
         : ''}
       <div class="seek-warning">
-        <frigate-card-icon
+        <advanced-camera-card-icon
           title="${localize('media_viewer.unseekable')}"
           .icon=${{ icon: 'mdi:clock-remove' }}
         >
-        </frigate-card-icon>
+        </advanced-camera-card-icon>
       </div>
     `;
   }
@@ -448,7 +448,7 @@ export class FrigateCardViewerCarousel extends LitElement {
     }
 
     return html` <div class="embla__slide">
-      <frigate-card-viewer-provider
+      <advanced-camera-card-viewer-provider
         .hass=${this.hass}
         .viewManagerEpoch=${this.viewManagerEpoch}
         .media=${media}
@@ -457,7 +457,7 @@ export class FrigateCardViewerCarousel extends LitElement {
         .cameraManager=${this.cameraManager}
         .load=${!this.viewerConfig.lazy_load}
         .cardWideConfig=${this.cardWideConfig}
-      ></frigate-card-viewer-provider>
+      ></advanced-camera-card-viewer-provider>
     </div>`;
   }
 
@@ -468,6 +468,6 @@ export class FrigateCardViewerCarousel extends LitElement {
 
 declare global {
   interface HTMLElementTagNameMap {
-    'frigate-card-viewer-carousel': FrigateCardViewerCarousel;
+    'advanced-camera-card-viewer-carousel': AdvancedCameraCardViewerCarousel;
   }
 }

src/components/viewer/grid.ts

@@ -18,8 +18,8 @@ import { ExtendedHomeAssistant } from '../../types.js';
 import { ResolvedMediaCache } from '../../utils/ha/resolved-media.js';
 import './carousel';
 
-@customElement('frigate-card-viewer-grid')
-export class FrigateCardViewerGrid extends LitElement {
+@customElement('advanced-camera-card-viewer-grid')
+export class AdvancedCameraCardViewerGrid extends LitElement {
   @property({ attribute: false })
   public hass?: ExtendedHomeAssistant;
 
@@ -41,7 +41,7 @@ export class FrigateCardViewerGrid extends LitElement {
   protected _renderCarousel(filterCamera?: string): TemplateResult {
     const selectedCameraID = this.viewManagerEpoch?.manager.getView()?.camera;
     return html`
-      <frigate-card-viewer-carousel
+      <advanced-camera-card-viewer-carousel
         grid-id=${ifDefined(filterCamera)}
         .hass=${this.hass}
         .viewManagerEpoch=${this.viewManagerEpoch}
@@ -52,7 +52,7 @@ export class FrigateCardViewerGrid extends LitElement {
         .cardWideConfig=${this.cardWideConfig}
         .showControls=${!filterCamera || selectedCameraID === filterCamera}
       >
-      </frigate-card-viewer-carousel>
+      </advanced-camera-card-viewer-carousel>
     `;
   }
 
@@ -92,14 +92,15 @@ export class FrigateCardViewerGrid extends LitElement {
     }
 
     return html`
-      <frigate-card-media-grid
+      <advanced-camera-card-media-grid
         .selected=${view?.camera}
         .displayConfig=${this.viewerConfig?.display}
-        @frigate-card:media-grid:selected=${(ev: CustomEvent<MediaGridSelected>) =>
-          this._gridSelectCamera(ev.detail.selected)}
+        @advanced-camera-card:media-grid:selected=${(
+          ev: CustomEvent<MediaGridSelected>,
+        ) => this._gridSelectCamera(ev.detail.selected)}
       >
         ${[...cameraIDs].map((cameraID) => this._renderCarousel(cameraID))}
-      </frigate-card-media-grid>
+      </advanced-camera-card-media-grid>
     `;
   }
 
@@ -110,6 +111,6 @@ export class FrigateCardViewerGrid extends LitElement {
 
 declare global {
   interface HTMLElementTagNameMap {
-    'frigate-card-viewer-grid': FrigateCardViewerGrid;
+    'advanced-camera-card-viewer-grid': AdvancedCameraCardViewerGrid;
   }
 }

src/components/viewer/index.ts

@@ -21,8 +21,8 @@ declare module 'view' {
   }
 }
 
-@customElement('frigate-card-viewer')
-export class FrigateCardViewer extends LitElement {
+@customElement('advanced-camera-card-viewer')
+export class AdvancedCameraCardViewer extends LitElement {
   @property({ attribute: false })
   public hass?: ExtendedHomeAssistant;
 
@@ -68,7 +68,7 @@ export class FrigateCardViewer extends LitElement {
       });
     }
 
-    return html` <frigate-card-viewer-grid
+    return html` <advanced-camera-card-viewer-grid
       .hass=${this.hass}
       .viewManagerEpoch=${this.viewManagerEpoch}
       .viewerConfig=${this.viewerConfig}
@@ -76,7 +76,7 @@ export class FrigateCardViewer extends LitElement {
       .cameraManager=${this.cameraManager}
       .cardWideConfig=${this.cardWideConfig}
     >
-    </frigate-card-viewer-grid>`;
+    </advanced-camera-card-viewer-grid>`;
   }
 
   static get styles(): CSSResultGroup {
@@ -86,6 +86,6 @@ export class FrigateCardViewer extends LitElement {
 
 declare global {
   interface HTMLElementTagNameMap {
-    'frigate-card-viewer': FrigateCardViewer;
+    'advanced-camera-card-viewer': AdvancedCameraCardViewer;
   }
 }

src/components/viewer/provider.ts

@@ -17,8 +17,8 @@ import { CardWideConfig, ViewerConfig } from '../../config/types.js';
 import '../../patches/ha-hls-player.js';
 import viewerProviderStyle from '../../scss/viewer-provider.scss';
 import {
+  AdvancedCameraCardMediaPlayer,
   ExtendedHomeAssistant,
-  FrigateCardMediaPlayer,
   FullscreenElement,
   ResolvedMedia,
 } from '../../types.js';
@@ -54,10 +54,10 @@ import { MediaQueriesClassifier } from '../../view/media-queries-classifier.js';
 import { VideoContentType, ViewMedia } from '../../view/media.js';
 import { renderProgressIndicator } from '../progress-indicator.js';
 
-@customElement('frigate-card-viewer-provider')
-export class FrigateCardViewerProvider
+@customElement('advanced-camera-card-viewer-provider')
+export class AdvancedCameraCardViewerProvider
   extends LitElement
-  implements FrigateCardMediaPlayer
+  implements AdvancedCameraCardMediaPlayer
 {
   @property({ attribute: false })
   public hass?: ExtendedHomeAssistant;
@@ -86,8 +86,9 @@ export class FrigateCardViewerProvider
   @property({ attribute: false })
   public cardWideConfig?: CardWideConfig;
 
-  protected _refFrigateCardMediaPlayer: Ref<Element & FrigateCardMediaPlayer> =
-    createRef();
+  protected _refAdvancedCameraCardMediaPlayer: Ref<
+    Element & AdvancedCameraCardMediaPlayer
+  > = createRef();
   protected _refVideoProvider: Ref<HTMLVideoElement> = createRef();
   protected _refImageProvider: Ref<HTMLImageElement> = createRef();
 
@@ -97,33 +98,35 @@ export class FrigateCardViewerProvider
   public async play(): Promise<void> {
     await playMediaMutingIfNecessary(
       this,
-      this._refFrigateCardMediaPlayer.value ?? this._refVideoProvider.value,
+      this._refAdvancedCameraCardMediaPlayer.value ?? this._refVideoProvider.value,
     );
   }
 
   public async pause(): Promise<void> {
-    (this._refFrigateCardMediaPlayer.value || this._refVideoProvider.value)?.pause();
+    (
+      this._refAdvancedCameraCardMediaPlayer.value || this._refVideoProvider.value
+    )?.pause();
   }
 
   public async mute(): Promise<void> {
-    if (this._refFrigateCardMediaPlayer.value) {
-      this._refFrigateCardMediaPlayer.value?.mute();
+    if (this._refAdvancedCameraCardMediaPlayer.value) {
+      this._refAdvancedCameraCardMediaPlayer.value?.mute();
     } else if (this._refVideoProvider.value) {
       this._refVideoProvider.value.muted = true;
     }
   }
 
   public async unmute(): Promise<void> {
-    if (this._refFrigateCardMediaPlayer.value) {
-      this._refFrigateCardMediaPlayer.value?.mute();
+    if (this._refAdvancedCameraCardMediaPlayer.value) {
+      this._refAdvancedCameraCardMediaPlayer.value?.mute();
     } else if (this._refVideoProvider.value) {
       this._refVideoProvider.value.muted = false;
     }
   }
 
   public isMuted(): boolean {
-    if (this._refFrigateCardMediaPlayer.value) {
-      return this._refFrigateCardMediaPlayer.value?.isMuted() ?? true;
+    if (this._refAdvancedCameraCardMediaPlayer.value) {
+      return this._refAdvancedCameraCardMediaPlayer.value?.isMuted() ?? true;
     } else if (this._refVideoProvider.value) {
       return this._refVideoProvider.value.muted;
     }
@@ -131,8 +134,8 @@ export class FrigateCardViewerProvider
   }
 
   public async seek(seconds: number): Promise<void> {
-    if (this._refFrigateCardMediaPlayer.value) {
-      return this._refFrigateCardMediaPlayer.value.seek(seconds);
+    if (this._refAdvancedCameraCardMediaPlayer.value) {
+      return this._refAdvancedCameraCardMediaPlayer.value.seek(seconds);
     } else if (this._refVideoProvider.value) {
       hideMediaControlsTemporarily(this._refVideoProvider.value);
       this._refVideoProvider.value.currentTime = seconds;
@@ -140,8 +143,8 @@ export class FrigateCardViewerProvider
   }
 
   public async setControls(controls?: boolean): Promise<void> {
-    if (this._refFrigateCardMediaPlayer.value) {
-      return this._refFrigateCardMediaPlayer.value.setControls(controls);
+    if (this._refAdvancedCameraCardMediaPlayer.value) {
+      return this._refAdvancedCameraCardMediaPlayer.value.setControls(controls);
     } else if (this._refVideoProvider.value) {
       setControlsOnVideo(
         this._refVideoProvider.value,
@@ -151,8 +154,8 @@ export class FrigateCardViewerProvider
   }
 
   public isPaused(): boolean {
-    if (this._refFrigateCardMediaPlayer.value) {
-      return this._refFrigateCardMediaPlayer.value.isPaused();
+    if (this._refAdvancedCameraCardMediaPlayer.value) {
+      return this._refAdvancedCameraCardMediaPlayer.value.isPaused();
     } else if (this._refVideoProvider.value) {
       return this._refVideoProvider.value.paused;
     }
@@ -160,8 +163,8 @@ export class FrigateCardViewerProvider
   }
 
   public async getScreenshotURL(): Promise<string | null> {
-    if (this._refFrigateCardMediaPlayer.value) {
-      return await this._refFrigateCardMediaPlayer.value.getScreenshotURL();
+    if (this._refAdvancedCameraCardMediaPlayer.value) {
+      return await this._refAdvancedCameraCardMediaPlayer.value.getScreenshotURL();
     } else if (this._refVideoProvider.value) {
       return screenshotMedia(this._refVideoProvider.value);
     } else if (this._refImageProvider.value) {
@@ -171,8 +174,8 @@ export class FrigateCardViewerProvider
   }
 
   public getFullscreenElement(): FullscreenElement | null {
-    if (this._refFrigateCardMediaPlayer.value) {
-      return this._refFrigateCardMediaPlayer.value.getFullscreenElement();
+    if (this._refAdvancedCameraCardMediaPlayer.value) {
+      return this._refAdvancedCameraCardMediaPlayer.value.getFullscreenElement();
     } else if (this._refVideoProvider.value) {
       return this._refVideoProvider.value;
     }
@@ -319,7 +322,7 @@ export class FrigateCardViewerProvider
     const view = this.viewManagerEpoch?.manager.getView();
 
     return this.viewerConfig?.zoomable
-      ? html` <frigate-card-zoomer
+      ? html` <advanced-camera-card-zoomer
           .defaultSettings=${guard([cameraConfig?.dimensions?.layout], () =>
             cameraConfig?.dimensions?.layout
               ? {
@@ -329,13 +332,13 @@ export class FrigateCardViewerProvider
               : undefined,
           )}
           .settings=${mediaID ? view?.context?.zoom?.[mediaID]?.requested : undefined}
-          @frigate-card:zoom:zoomed=${() => this.setControls(false)}
-          @frigate-card:zoom:unzoomed=${() => this.setControls()}
-          @frigate-card:zoom:change=${(ev: CustomEvent<ZoomSettingsObserved>) =>
+          @advanced-camera-card:zoom:zoomed=${() => this.setControls(false)}
+          @advanced-camera-card:zoom:unzoomed=${() => this.setControls()}
+          @advanced-camera-card:zoom:change=${(ev: CustomEvent<ZoomSettingsObserved>) =>
             handleZoomSettingsObservedEvent(ev, this.viewManagerEpoch?.manager, mediaID)}
         >
           ${template}
-        </frigate-card-zoomer>`
+        </advanced-camera-card-zoomer>`
       : template;
   }
 
@@ -355,8 +358,8 @@ export class FrigateCardViewerProvider
     return this._useZoomIfRequired(html`
       ${ViewMediaClassifier.isVideo(this.media)
         ? this.media.getVideoContentType() === VideoContentType.HLS
-          ? html`<frigate-card-ha-hls-player
-              ${ref(this._refFrigateCardMediaPlayer)}
+          ? html`<advanced-camera-card-ha-hls-player
+              ${ref(this._refAdvancedCameraCardMediaPlayer)}
               allow-exoplayer
               aria-label="${this.media.getTitle() ?? ''}"
               ?autoplay=${false}
@@ -368,7 +371,7 @@ export class FrigateCardViewerProvider
               .hass=${this.hass}
               ?controls=${this.viewerConfig.controls.builtin}
             >
-            </frigate-card-ha-hls-player>`
+            </advanced-camera-card-ha-hls-player>`
           : html`
               <video
                 ${ref(this._refVideoProvider)}
@@ -428,6 +431,6 @@ export class FrigateCardViewerProvider
 
 declare global {
   interface HTMLElementTagNameMap {
-    'frigate-card-viewer-provider': FrigateCardViewerProvider;
+    'advanced-camera-card-viewer-provider': AdvancedCameraCardViewerProvider;
   }
 }