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.
This commit is contained in:
Dermot Duffy
2025-02-06 19:32:32 -08:00
committed by GitHub
parent 43947b49dc
commit cc376a8be1
305 changed files with 4270 additions and 3686 deletions
@@ -1,7 +1,7 @@
# go2rtc Player
This is a modified version of the go2rtc example video player code, modified for
use in the Frigate card. In order to make future maintenance easier,
use in the Advanced Camera Card. In order to make future maintenance easier,
modifications have been kept to a minimum.
## Original Example Code
@@ -15,7 +15,7 @@ import { localize } from '../../../../localize/localize.js';
import liveGo2RTCStyle from '../../../../scss/live-go2rtc.scss';
import {
ExtendedHomeAssistant,
FrigateCardMediaPlayer,
AdvancedCameraCardMediaPlayer,
FullscreenElement,
Message,
} from '../../../../types.js';
@@ -25,7 +25,7 @@ import { screenshotMedia } from '../../../../utils/screenshot.js';
import { renderMessage } from '../../../message.js';
import { VideoRTC } from './video-rtc.js';
customElements.define('frigate-card-live-go2rtc-player', VideoRTC);
customElements.define('advanced-camera-card-live-go2rtc-player', VideoRTC);
// Note (2023-02-18): Depending on the behavior of the player / browser is
// possible this URL will need to be re-signed in order to avoid HA spamming
@@ -34,8 +34,11 @@ customElements.define('frigate-card-live-go2rtc-player', VideoRTC);
// provider).
const GO2RTC_URL_SIGN_EXPIRY_SECONDS = 24 * 60 * 60;
@customElement('frigate-card-live-go2rtc')
export class FrigateCardGo2RTC extends LitElement implements FrigateCardMediaPlayer {
@customElement('advanced-camera-card-live-go2rtc')
export class AdvancedCameraCardGo2RTC
extends LitElement
implements AdvancedCameraCardMediaPlayer
{
// Not an reactive property to avoid resetting the video.
public hass?: ExtendedHomeAssistant;
@@ -116,7 +119,7 @@ export class FrigateCardGo2RTC extends LitElement implements FrigateCardMediaPla
super.connectedCallback();
// Reset the player when reconnected to the DOM.
// https://github.com/dermotduffy/frigate-hass-card/issues/996
// https://github.com/dermotduffy/advanced-camera-card/issues/996
this.requestUpdate();
}
@@ -205,6 +208,6 @@ export class FrigateCardGo2RTC extends LitElement implements FrigateCardMediaPla
declare global {
interface HTMLElementTagNameMap {
'frigate-card-live-go2rtc': FrigateCardGo2RTC;
'advanced-camera-card-live-go2rtc': AdvancedCameraCardGo2RTC;
}
}
+1 -1
View File
@@ -29,7 +29,7 @@ export class VideoRTC extends HTMLElement {
onmessage: Record<string, (msg: { type: string; value: string }) => void>;
// Custom methods/members.
containingPlayer: FrigateCardMediaPlayer | null;
containingPlayer: AdvancedCameraCardMediaPlayer | null;
microphoneStream: MediaStream | null;
reconnect();
@@ -162,8 +162,8 @@ export class VideoRTC extends HTMLElement {
this.microphoneStream = null;
/**
* A reference to a containing FrigateCardMediaPlayer object.
* @type {FrigateCardMediaPlayer}}
* A reference to a containing AdvancedCameraCardMediaPlayer object.
* @type {AdvancedCameraCardMediaPlayer}}
*/
this.containingPlayer = null;
@@ -222,7 +222,7 @@ export class VideoRTC extends HTMLElement {
* https://developer.chrome.com/blog/autoplay/
*/
play() {
// Frigate card controls playing at a higher level.
// Advanced Camera Card controls playing at a higher level.
}
/**
@@ -303,7 +303,7 @@ export class VideoRTC extends HTMLElement {
// eslint-disable-next-line @typescript-eslint/no-unused-vars
this.video.addEventListener('error', (_ev) => {
// For Frigate Card, we avoid log spam here from errors, and also don't
// For Advanced Camera Card, we avoid log spam here from errors, and also don't
// attempt to close the websocket unless the connection is open (otherwise
// on reconnect() an exception will be thrown here that we're attempting
// to close a connection that's not open)
@@ -405,7 +405,7 @@ export class VideoRTC extends HTMLElement {
if (this.pc) {
// Do not close the (microphone) track attached to the peer connection as
// that is controlled by MicrophoneManager.
// See: https://github.com/dermotduffy/frigate-hass-card/issues/1810
// See: https://github.com/dermotduffy/advanced-camera-card/issues/1810
this.pc.close();
this.pc = null;
+10 -7
View File
@@ -7,10 +7,13 @@ import '../../../patches/ha-camera-stream';
import '../../../patches/ha-hls-player.js';
import '../../../patches/ha-web-rtc-player.js';
import liveHAStyle from '../../../scss/live-ha.scss';
import { FrigateCardMediaPlayer, FullscreenElement } from '../../../types.js';
import { AdvancedCameraCardMediaPlayer, FullscreenElement } from '../../../types.js';
@customElement('frigate-card-live-ha')
export class FrigateCardLiveHA extends LitElement implements FrigateCardMediaPlayer {
@customElement('advanced-camera-card-live-ha')
export class AdvancedCameraCardLiveHA
extends LitElement
implements AdvancedCameraCardMediaPlayer
{
@property({ attribute: false })
public hass?: HomeAssistant;
@@ -20,7 +23,7 @@ export class FrigateCardLiveHA extends LitElement implements FrigateCardMediaPla
@property({ attribute: true, type: Boolean })
public controls = false;
protected _playerRef: Ref<Element & FrigateCardMediaPlayer> = createRef();
protected _playerRef: Ref<Element & AdvancedCameraCardMediaPlayer> = createRef();
public async play(): Promise<void> {
return this._playerRef.value?.play();
@@ -67,7 +70,7 @@ export class FrigateCardLiveHA extends LitElement implements FrigateCardMediaPla
return;
}
return html` <frigate-card-ha-camera-stream
return html` <advanced-camera-card-ha-camera-stream
${ref(this._playerRef)}
.hass=${this.hass}
.stateObj=${this.cameraConfig?.camera_entity
@@ -76,7 +79,7 @@ export class FrigateCardLiveHA extends LitElement implements FrigateCardMediaPla
.controls=${this.controls}
.muted=${true}
>
</frigate-card-ha-camera-stream>`;
</advanced-camera-card-ha-camera-stream>`;
}
static get styles(): CSSResultGroup {
@@ -86,6 +89,6 @@ export class FrigateCardLiveHA extends LitElement implements FrigateCardMediaPla
declare global {
interface HTMLElementTagNameMap {
'frigate-card-live-ha': FrigateCardLiveHA;
'advanced-camera-card-live-ha': AdvancedCameraCardLiveHA;
}
}
+10 -7
View File
@@ -4,18 +4,21 @@ import { customElement, property } from 'lit/decorators.js';
import { createRef, ref, Ref } from 'lit/directives/ref.js';
import { CameraConfig } from '../../../config/types';
import basicBlockStyle from '../../../scss/basic-block.scss';
import { FrigateCardMediaPlayer, FullscreenElement } from '../../../types.js';
import { AdvancedCameraCardMediaPlayer, FullscreenElement } from '../../../types.js';
import '../../image-base.js';
@customElement('frigate-card-live-image')
export class FrigateCardLiveImage extends LitElement implements FrigateCardMediaPlayer {
@customElement('advanced-camera-card-live-image')
export class AdvancedCameraCardLiveImage
extends LitElement
implements AdvancedCameraCardMediaPlayer
{
@property({ attribute: false })
public hass?: HomeAssistant;
@property({ attribute: false })
public cameraConfig?: CameraConfig;
protected _refImage: Ref<Element & FrigateCardMediaPlayer> = createRef();
protected _refImage: Ref<Element & AdvancedCameraCardMediaPlayer> = createRef();
public async play(): Promise<void> {
await this._refImage.value?.play();
@@ -63,13 +66,13 @@ export class FrigateCardLiveImage extends LitElement implements FrigateCardMedia
}
return html`
<frigate-card-image-base
<advanced-camera-card-image-base
${ref(this._refImage)}
.hass=${this.hass}
.imageConfig=${this.cameraConfig.image}
.cameraConfig=${this.cameraConfig}
>
</frigate-card-image-base>
</advanced-camera-card-image-base>
`;
}
@@ -80,6 +83,6 @@ export class FrigateCardLiveImage extends LitElement implements FrigateCardMedia
declare global {
interface HTMLElementTagNameMap {
'frigate-card-live-image': FrigateCardLiveImage;
'advanced-camera-card-live-image': AdvancedCameraCardLiveImage;
}
}
+7 -4
View File
@@ -15,8 +15,8 @@ import { CameraConfig, CardWideConfig } from '../../../config/types.js';
import { localize } from '../../../localize/localize.js';
import liveJSMPEGStyle from '../../../scss/live-jsmpeg.scss';
import {
AdvancedCameraCardMediaPlayer,
ExtendedHomeAssistant,
FrigateCardMediaPlayer,
FullscreenElement,
Message,
} from '../../../types.js';
@@ -38,8 +38,11 @@ const JSMPEG_URL_SIGN_EXPIRY_SECONDS = 24 * 60 * 60;
// Number of seconds before the expiry to trigger a refresh.
const JSMPEG_URL_SIGN_REFRESH_THRESHOLD_SECONDS = 1 * 60 * 60;
@customElement('frigate-card-live-jsmpeg')
export class FrigateCardLiveJSMPEG extends LitElement implements FrigateCardMediaPlayer {
@customElement('advanced-camera-card-live-jsmpeg')
export class AdvancedCameraCardLiveJSMPEG
extends LitElement
implements AdvancedCameraCardMediaPlayer
{
@property({ attribute: false })
public cameraConfig?: CameraConfig;
@@ -303,6 +306,6 @@ export class FrigateCardLiveJSMPEG extends LitElement implements FrigateCardMedi
declare global {
interface HTMLElementTagNameMap {
'frigate-card-live-jsmpeg': FrigateCardLiveJSMPEG;
'advanced-camera-card-live-jsmpeg': AdvancedCameraCardLiveJSMPEG;
}
}
+12 -12
View File
@@ -16,8 +16,8 @@ import { CameraConfig, CardWideConfig } from '../../../config/types.js';
import { localize } from '../../../localize/localize.js';
import liveWebRTCCardStyle from '../../../scss/live-webrtc-card.scss';
import {
FrigateCardError,
FrigateCardMediaPlayer,
AdvancedCameraCardError,
AdvancedCameraCardMediaPlayer,
FullscreenElement,
Message,
} from '../../../types.js';
@@ -43,10 +43,10 @@ import { VideoRTC } from './go2rtc/video-rtc.js';
// Create a wrapper for AlexxIT's WebRTC card
// - https://github.com/AlexxIT/WebRTC
@customElement('frigate-card-live-webrtc-card')
export class FrigateCardLiveWebRTCCard
@customElement('advanced-camera-card-live-webrtc-card')
export class AdvancedCameraCardLiveWebRTCCard
extends LitElement
implements FrigateCardMediaPlayer
implements AdvancedCameraCardMediaPlayer
{
@property({ attribute: false })
public cameraConfig?: CameraConfig;
@@ -125,7 +125,7 @@ export class FrigateCardLiveWebRTCCard
super.connectedCallback();
// Reset the player when reconnected to the DOM.
// https://github.com/dermotduffy/frigate-hass-card/issues/996
// https://github.com/dermotduffy/advanced-camera-card/issues/996
this.requestUpdate();
}
@@ -177,11 +177,11 @@ export class FrigateCardLiveWebRTCCard
// hidden. This is incompatible with the card zoom support, since the
// video will easily stop if the user zooms in too much. Disable this
// feature by default.
// See: https://github.com/dermotduffy/frigate-hass-card/issues/1614
// See: https://github.com/dermotduffy/advanced-camera-card/issues/1614
intersection: 0,
// Frigate card always starts muted (unlike webrtc-card).
// See: https://github.com/dermotduffy/frigate-hass-card/issues/1654
// Advanced Camera Card always starts muted (unlike webrtc-card).
// See: https://github.com/dermotduffy/advanced-camera-card/issues/1654
muted: true,
...this.cameraConfig.webrtc_card,
@@ -209,12 +209,12 @@ export class FrigateCardLiveWebRTCCard
this._message = {
type: 'error',
message:
e instanceof FrigateCardError
e instanceof AdvancedCameraCardError
? e.message
: localize('error.webrtc_card_reported_error') +
': ' +
(e as Error).message,
context: (e as FrigateCardError).context,
context: (e as AdvancedCameraCardError).context,
};
dispatchLiveErrorEvent(this);
return;
@@ -275,6 +275,6 @@ export class FrigateCardLiveWebRTCCard
declare global {
interface HTMLElementTagNameMap {
'frigate-card-live-webrtc-card': FrigateCardLiveWebRTCCard;
'advanced-camera-card-live-webrtc-card': AdvancedCameraCardLiveWebRTCCard;
}
}