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:
@@ -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
@@ -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;
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user