diff --git a/src/frigate-card.ts b/src/frigate-card.ts index f72bc70a..ea166fdd 100644 --- a/src/frigate-card.ts +++ b/src/frigate-card.ts @@ -3,8 +3,6 @@ // TODO Does each event contain thumbnail? -// TODO comments per method. - // TODO Check for HA state presence and validity before using it, otherwise warn. // TODO Add material tooltips @@ -64,8 +62,11 @@ enum FrigateCardView { SNAPSHOTS, // Show the snapshots gallery. } +// Main FrigateCard class. @customElement('frigate-card') export class FrigateCard extends LitElement { + + // Constructor for FrigateCard. constructor() { super(); this._viewMode = FrigateCardView.LIVE; @@ -73,10 +74,12 @@ export class FrigateCard extends LitElement { this._interactionTimerID = null; } + // Get the configuration element. public static async getConfigElement(): Promise { return document.createElement('frigate-card-editor'); } + // Get a stub basic config. public static getStubConfig(): Record { return {}; } @@ -95,12 +98,13 @@ export class FrigateCard extends LitElement { protected _interactionTimerID: number | null; + // Set the object configuration. public setConfig(inputConfig: FrigateCardConfig): void { if (!inputConfig) { throw new Error(localize('common.invalid_configuration:')); } - // inputConfig is not extensible, need to make a copy to allow - // modifications. + // inputConfig is not "extensible" (i.e. preventExtensions() has been + // called on it), need to make a copy to allow modifications. const cardConfig = Object.assign({ name: 'Frigate' }, inputConfig); @@ -137,7 +141,8 @@ export class FrigateCard extends LitElement { this.config = cardConfig; this._setViewModeToDefault(); } - + + // Set the view mode to the configured default. protected _setViewModeToDefault(): void { if (this.config.view_default == "live") { this._viewMode = FrigateCardView.LIVE; @@ -164,6 +169,7 @@ export class FrigateCard extends LitElement { // this.renderRoot.appendChild(div); // == + // Determine whether the card should be updated. protected shouldUpdate(changedProps: PropertyValues): boolean { if (!this.config || !this.hass) { return false; @@ -194,6 +200,7 @@ export class FrigateCard extends LitElement { return true; } + // Get FrigateEvents from the Frigate server API. protected async _getEvents({ has_clip = false, has_snapshot = false, @@ -223,6 +230,7 @@ export class FrigateCard extends LitElement { } } + // Render Frigate events into a card gallery. protected async _renderEvents() : Promise { const want_clips = this._viewMode == FrigateCardView.CLIPS; @@ -259,6 +267,7 @@ export class FrigateCard extends LitElement { `; } + // Render a progress spinner while content loads. protected _renderProgressIndicator(): TemplateResult { return html`
@@ -269,6 +278,7 @@ export class FrigateCard extends LitElement {
` } + // Stop/Play video controls. protected _controlVideos({ stop, control_live = false, @@ -314,6 +324,7 @@ export class FrigateCard extends LitElement { } } + // Render the main navbar (live, clips, snapshots). protected _renderNavigationBar(): TemplateResult { return html`
@@ -345,6 +356,7 @@ export class FrigateCard extends LitElement {
` } + // Render the player for a saved clip. protected async _renderClipPlayer(): Promise { let event: FrigateEvent; if (this._viewEvent) { @@ -371,6 +383,7 @@ export class FrigateCard extends LitElement { ` } + // Render a snapshot. protected async _renderSnapshotViewer(): Promise { let event: FrigateEvent; if (this._viewEvent) { @@ -393,6 +406,7 @@ export class FrigateCard extends LitElement { return html`` } + // Render the status bar (motion icon). protected _renderStatusBar(): TemplateResult { if (!this.config.motion_entity || !(this.config.motion_entity in this.hass.states)) { return html``; @@ -410,6 +424,9 @@ export class FrigateCard extends LitElement { ` } + // Render the live viewer. + // Note: The live viewer is the main element used to size the overall card. It + // is always rendered (but sometimes hidden). protected _renderLiveViewer(): TemplateResult { return html` `; } + // Record interactions with the card. protected _interactionHandler(): void { if (!this.config.view_timeout) { return; @@ -436,6 +454,7 @@ export class FrigateCard extends LitElement { }, this.config.view_timeout * 1000); } + // Render the call (master render method). protected render(): TemplateResult | void { if (this.config.show_warning) { return this._showWarning(localize('common.show_warning')); @@ -443,8 +462,6 @@ export class FrigateCard extends LitElement { if (this.config.show_error) { return this._showError(localize('common.show_error')); } - - // TODO: Add latest snapshot fetch functionality. return html`
${warning} `; } + // Show an error card. private _showError(error: string): TemplateResult { const errorCard = document.createElement('hui-error-card'); errorCard.setConfig({ @@ -501,11 +520,13 @@ export class FrigateCard extends LitElement { `; } + // Get the CSS styles. CSS is compiled from frigate-card.scss, so this is + // safe to be piped through `unsafeCSS`. static get styles(): CSSResult { - // CSS is compiled from frigate-card.scss, so this is safe. return unsafeCSS(style); } + // Get the Lovelace card size. static getCardSize(): number { return 5; }