File renames to match HACS requirements.
This commit is contained in:
Dermot Duffy
@@ -0,0 +1,700 @@
|
||||
/* eslint-disable @typescript-eslint/no-explicit-any */
|
||||
import {
|
||||
LitElement,
|
||||
html,
|
||||
customElement,
|
||||
property,
|
||||
CSSResult,
|
||||
TemplateResult,
|
||||
PropertyValues,
|
||||
state,
|
||||
unsafeCSS,
|
||||
} from 'lit-element';
|
||||
|
||||
import { NodePart } from 'lit-html';
|
||||
import { until } from 'lit-html/directives/until.js';
|
||||
|
||||
import {
|
||||
HomeAssistant,
|
||||
fireEvent,
|
||||
LovelaceCardEditor,
|
||||
getLovelace,
|
||||
} from 'custom-card-helpers';
|
||||
|
||||
import './editor';
|
||||
|
||||
import frigate_card_style from './frigate-hass-card.scss';
|
||||
import frigate_card_menu_style from './frigate-hass-card-menu.scss';
|
||||
|
||||
import { frigateCardConfigSchema, frigateGetEventsResponseSchema } from './types';
|
||||
import type {
|
||||
FrigateCardView,
|
||||
FrigateCardConfig,
|
||||
FrigateEvent,
|
||||
FrigateGetEventsResponse,
|
||||
GetEventsParameters,
|
||||
ControlVideosParameters,
|
||||
} from './types';
|
||||
import { CARD_VERSION } from './const';
|
||||
import { localize } from './localize/localize';
|
||||
import dayjs from 'dayjs';
|
||||
import dayjs_utc from 'dayjs/plugin/utc';
|
||||
import dayjs_timezone from 'dayjs/plugin/timezone';
|
||||
|
||||
// Load dayjs plugins.
|
||||
dayjs.extend(dayjs_timezone);
|
||||
dayjs.extend(dayjs_utc);
|
||||
|
||||
/* eslint no-console: 0 */
|
||||
console.info(
|
||||
`%c FRIGATE-HASS-CARD \n%c ${localize('common.version')} ${CARD_VERSION} `,
|
||||
'color: pink; font-weight: bold; background: black',
|
||||
'color: white; font-weight: bold; background: dimgray',
|
||||
);
|
||||
|
||||
// This puts your card into the UI card picker dialog
|
||||
(window as any).customCards = (window as any).customCards || [];
|
||||
(window as any).customCards.push({
|
||||
type: 'frigate-card',
|
||||
name: 'Frigate Card',
|
||||
description: 'A lovelace card for use with Frigate',
|
||||
});
|
||||
|
||||
type FrigateCardMenuCallback = (name: string) => any;
|
||||
|
||||
// Determine whether the card should be updated based on Home Assistant changes.
|
||||
function shouldUpdateBasedOnHass(
|
||||
newHass: HomeAssistant | null,
|
||||
oldHass: HomeAssistant | undefined,
|
||||
entities: (string | null | undefined)[],
|
||||
): boolean {
|
||||
if (!newHass) {
|
||||
return false;
|
||||
}
|
||||
if (!entities.length) {
|
||||
return false;
|
||||
}
|
||||
|
||||
if (oldHass) {
|
||||
for (let i = 0; i < entities.length; i++) {
|
||||
const entity = entities[i];
|
||||
if (!entity) {
|
||||
continue;
|
||||
}
|
||||
if (oldHass.states[entity] !== newHass.states[entity]) {
|
||||
return true;
|
||||
}
|
||||
}
|
||||
return false;
|
||||
}
|
||||
return true;
|
||||
}
|
||||
|
||||
// A menu for the Frigate card.
|
||||
@customElement('frigate-card-menu')
|
||||
export class FrigateCardMenu extends LitElement {
|
||||
@property({ attribute: false })
|
||||
protected expand = false;
|
||||
|
||||
@property({ attribute: false })
|
||||
protected motionEntity: string | null = null;
|
||||
|
||||
@property({ attribute: false })
|
||||
protected hass: HomeAssistant | null = null;
|
||||
|
||||
@property({ attribute: false })
|
||||
protected actionCallback: FrigateCardMenuCallback | null = null;
|
||||
|
||||
@property({ attribute: false })
|
||||
protected heading: string | null = null;
|
||||
|
||||
protected shouldUpdate(changedProps: PropertyValues): boolean {
|
||||
return shouldUpdateBasedOnHass(
|
||||
this.hass,
|
||||
changedProps.get('hass') as HomeAssistant | undefined,
|
||||
[this.motionEntity],
|
||||
);
|
||||
}
|
||||
|
||||
// Render the Frigate menu button.
|
||||
protected _renderFrigateButton(): TemplateResult {
|
||||
return html` <ha-icon-button
|
||||
class="button"
|
||||
icon=${this.expand ? 'mdi:alpha-f-box' : 'mdi:alpha-f-box-outline'}
|
||||
data-toggle="tooltip"
|
||||
title="Frigate menu"
|
||||
@click=${() => {
|
||||
this.expand = !this.expand;
|
||||
}}
|
||||
></ha-icon-button>`;
|
||||
}
|
||||
|
||||
// Call the callback.
|
||||
protected _callAction(name: string): void {
|
||||
if (this.actionCallback) {
|
||||
this.actionCallback(name);
|
||||
}
|
||||
}
|
||||
|
||||
// Render the menu.
|
||||
protected render(): TemplateResult | void | ((part: NodePart) => Promise<void>) {
|
||||
if (!this.expand) {
|
||||
return html` <div class="frigate-card-menu">${this._renderFrigateButton()}</div>`;
|
||||
}
|
||||
|
||||
let motionIcon: string | null = null;
|
||||
if (this.motionEntity && this.hass) {
|
||||
motionIcon =
|
||||
this.hass.states[this.motionEntity]?.state == 'on'
|
||||
? 'mdi:motion-sensor'
|
||||
: 'mdi:walk';
|
||||
}
|
||||
|
||||
return html`
|
||||
<div class="frigate-card-menu-container">
|
||||
<div class="frigate-card-menu-expanded">
|
||||
${this._renderFrigateButton()}
|
||||
<ha-icon-button
|
||||
class="button"
|
||||
icon="mdi:cctv"
|
||||
data-toggle="tooltip"
|
||||
title="View live"
|
||||
@click=${() => {
|
||||
this.expand = false;
|
||||
this._callAction('live');
|
||||
}}
|
||||
></ha-icon-button>
|
||||
<ha-icon-button
|
||||
class="button"
|
||||
icon="mdi:filmstrip"
|
||||
data-toggle="tooltip"
|
||||
title="View clips"
|
||||
@click=${() => {
|
||||
this.expand = false;
|
||||
this._callAction('clips');
|
||||
}}
|
||||
></ha-icon-button>
|
||||
<ha-icon-button
|
||||
class="button"
|
||||
icon="mdi:camera"
|
||||
data-toggle="tooltip"
|
||||
title="View snapshots"
|
||||
@click=${() => {
|
||||
this.expand = false;
|
||||
this._callAction('snapshots');
|
||||
}}
|
||||
></ha-icon-button>
|
||||
<ha-icon-button
|
||||
class="button"
|
||||
icon="mdi:web"
|
||||
data-toggle="tooltip"
|
||||
title="View Frigate UI"
|
||||
@click=${() => {
|
||||
this.expand = false;
|
||||
this._callAction('frigate-ui');
|
||||
}}
|
||||
></ha-icon-button>
|
||||
${!motionIcon
|
||||
? html``
|
||||
: html` <ha-icon-button
|
||||
data-toggle="tooltip"
|
||||
title="View motion sensor"
|
||||
class="button"
|
||||
icon="${motionIcon}"
|
||||
@click=${() => {
|
||||
this.expand = false;
|
||||
this._callAction('motion');
|
||||
}}
|
||||
></ha-icon-button>`}
|
||||
</div>
|
||||
${this.heading
|
||||
? html` <div class="frigate-card-menu-title">${this.heading}</div> `
|
||||
: ``}
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
// Return compiled CSS styles (thus safe to use with unsafeCSS).
|
||||
static get styles(): CSSResult {
|
||||
return unsafeCSS(frigate_card_menu_style);
|
||||
}
|
||||
}
|
||||
|
||||
// Main FrigateCard class.
|
||||
@customElement('frigate-card')
|
||||
export class FrigateCard extends LitElement {
|
||||
// Get the configuration element.
|
||||
public static async getConfigElement(): Promise<LovelaceCardEditor> {
|
||||
return document.createElement('frigate-card-editor');
|
||||
}
|
||||
|
||||
// Get a stub basic config.
|
||||
public static getStubConfig(): Record<string, string> {
|
||||
return {};
|
||||
}
|
||||
set hass(hass: HomeAssistant) {
|
||||
if (this._webrtcElement) {
|
||||
this._webrtcElement.hass = hass;
|
||||
}
|
||||
this._hass = hass;
|
||||
}
|
||||
|
||||
@property({ attribute: false })
|
||||
protected _hass: HomeAssistant | null = null;
|
||||
|
||||
@state()
|
||||
public config!: FrigateCardConfig;
|
||||
|
||||
@property({ attribute: false })
|
||||
protected _viewMode: FrigateCardView = 'live';
|
||||
|
||||
@property({ attribute: false })
|
||||
protected _viewEvent: FrigateEvent | null = null;
|
||||
|
||||
@property({ attribute: false })
|
||||
protected _showMenu = false;
|
||||
|
||||
@state()
|
||||
protected _heading: string | null = null;
|
||||
|
||||
protected _interactionTimerID: number | null = null;
|
||||
protected _webrtcElement: any | null = null;
|
||||
|
||||
// Set the object configuration.
|
||||
public setConfig(inputConfig: FrigateCardConfig): void {
|
||||
if (!inputConfig) {
|
||||
throw new Error(localize('common.invalid_configuration:'));
|
||||
}
|
||||
|
||||
const parseResult = frigateCardConfigSchema.safeParse(inputConfig);
|
||||
if (!parseResult.success) {
|
||||
const errors = parseResult.error.format();
|
||||
const keys = Object.keys(errors).filter((v) => !v.startsWith('_'));
|
||||
throw new Error(localize('common.invalid_configuration') + ': ' + keys.join(', '));
|
||||
}
|
||||
const config = parseResult.data;
|
||||
|
||||
if (config.test_gui) {
|
||||
getLovelace().setEditMode(true);
|
||||
}
|
||||
|
||||
if (!config.frigate_camera_name) {
|
||||
// No camera name specified, so just assume it's the same as the entity name.
|
||||
if (config.camera_entity.includes('.')) {
|
||||
config.frigate_camera_name = config.camera_entity.split('.', 2)[1];
|
||||
} else {
|
||||
throw new Error(localize('common.invalid_configuration') + ': camera_entity');
|
||||
}
|
||||
}
|
||||
|
||||
if (config.live_provider == 'webrtc') {
|
||||
// Create a WebRTC element (https://github.com/AlexxIT/WebRTC)
|
||||
const webrtcElement = customElements.get('webrtc-camera');
|
||||
if (webrtcElement) {
|
||||
const webrtc = new webrtcElement();
|
||||
webrtc.setConfig(config.webrtc || {});
|
||||
webrtc.hass = this._hass;
|
||||
this._webrtcElement = webrtc;
|
||||
} else {
|
||||
throw new Error(localize('common.missing_webrtc'));
|
||||
}
|
||||
}
|
||||
|
||||
this.config = config;
|
||||
this._setViewModeToDefault();
|
||||
}
|
||||
|
||||
// Set the view mode to the configured default.
|
||||
protected _setViewModeToDefault(): void {
|
||||
this._viewMode = this.config.view_default;
|
||||
if (['clip', 'snapshot'].includes(this._viewMode)) {
|
||||
this._viewEvent = null;
|
||||
}
|
||||
}
|
||||
|
||||
// Determine whether the card should be updated.
|
||||
protected shouldUpdate(changedProps: PropertyValues): boolean {
|
||||
if (!this.config) {
|
||||
return false;
|
||||
}
|
||||
if (changedProps.has('config')) {
|
||||
return true;
|
||||
}
|
||||
|
||||
return shouldUpdateBasedOnHass(
|
||||
this._hass,
|
||||
changedProps.get('_hass') as HomeAssistant | undefined,
|
||||
[this.config.camera_entity, this.config.motion_entity],
|
||||
);
|
||||
}
|
||||
|
||||
// Get FrigateEvents from the Frigate server API.
|
||||
protected async _getEvents({
|
||||
has_clip = false,
|
||||
has_snapshot = false,
|
||||
limit = 100,
|
||||
}: GetEventsParameters): Promise<FrigateGetEventsResponse> {
|
||||
let url = `${this.config.frigate_url}/api/events?camera=${this.config.frigate_camera_name}`;
|
||||
if (has_clip) {
|
||||
url += `&has_clip=1`;
|
||||
}
|
||||
if (has_snapshot) {
|
||||
url += `&has_snapshot=1`;
|
||||
}
|
||||
if (limit > 0) {
|
||||
url += `&limit=${limit}`;
|
||||
}
|
||||
|
||||
if (this.config.label) {
|
||||
url += `&label=${this.config.label}`;
|
||||
}
|
||||
if (this.config.zone) {
|
||||
url += `&zone=${this.config.zone}`;
|
||||
}
|
||||
|
||||
const response = await fetch(url);
|
||||
if (response.ok) {
|
||||
let raw_json;
|
||||
try {
|
||||
raw_json = await response.json();
|
||||
} catch (e) {
|
||||
console.warn(e);
|
||||
throw new Error(`Could not JSON decode Frigate API response: ${e}`);
|
||||
}
|
||||
try {
|
||||
return frigateGetEventsResponseSchema.parse(raw_json);
|
||||
} catch (e) {
|
||||
console.warn(e);
|
||||
throw new Error(`Frigate events were malformed: ${e}`);
|
||||
}
|
||||
} else {
|
||||
const error_message = `Frigate API request failed with status: ${response.status}`;
|
||||
console.warn(error_message);
|
||||
throw new Error(error_message);
|
||||
}
|
||||
}
|
||||
|
||||
protected _renderAttentionIcon(icon: string): TemplateResult {
|
||||
return html` <div class="frigate-card-attention">
|
||||
<ha-icon icon="${icon}"> </ha-icon>
|
||||
</div>`;
|
||||
}
|
||||
|
||||
// Render an embedded error situation.
|
||||
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
||||
protected _renderError(_error: string): TemplateResult {
|
||||
return this._renderAttentionIcon('mdi:alert-circle');
|
||||
}
|
||||
|
||||
// Generate a human-readable title from an event.
|
||||
// MediaBrowser title: 2021-08-12 19:20:14 [10s, Person 76%]
|
||||
protected _getEventTitle(event: FrigateEvent): string {
|
||||
const date = dayjs.unix(event.end_time).tz('UTC').local();
|
||||
|
||||
const iso_datetime = date.format('YYYY-MM-DD HH:mm:ss');
|
||||
const duration = Math.trunc(
|
||||
event.end_time > event.start_time ? event.end_time - event.start_time : 0,
|
||||
);
|
||||
const score = Math.trunc(event.top_score * 100);
|
||||
|
||||
// Capitalize the label.
|
||||
const label = event.label.charAt(0).toUpperCase() + event.label.slice(1);
|
||||
|
||||
return `${iso_datetime} [${duration}s, ${label} ${score}%]`;
|
||||
}
|
||||
|
||||
// Render Frigate events into a card gallery.
|
||||
protected async _renderEvents(): Promise<TemplateResult> {
|
||||
const want_clips = this._viewMode == 'clips';
|
||||
let events;
|
||||
try {
|
||||
events = await this._getEvents({
|
||||
has_clip: want_clips,
|
||||
has_snapshot: !want_clips,
|
||||
});
|
||||
} catch (e) {
|
||||
return this._renderError(e);
|
||||
}
|
||||
|
||||
if (!events.length) {
|
||||
return this._renderAttentionIcon(
|
||||
want_clips ? 'mdi:filmstrip-off' : 'mdi:camera-off',
|
||||
);
|
||||
}
|
||||
|
||||
return html` <ul class="mdc-image-list frigate-card-image-list">
|
||||
${events.map(
|
||||
(event) => html` <li class="mdc-image-list__item">
|
||||
<div class="mdc-image-list__image-aspect-container">
|
||||
<img
|
||||
data-toggle="tooltip"
|
||||
title="${this._getEventTitle(event)}"
|
||||
class="mdc-image-list__image"
|
||||
src="data:image/png;base64,${event.thumbnail}"
|
||||
@click=${() => {
|
||||
this._showMenu = false;
|
||||
this._viewEvent = event;
|
||||
this._viewMode = want_clips ? 'clip' : 'snapshot';
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</li>`,
|
||||
)}
|
||||
</ul>`;
|
||||
}
|
||||
|
||||
// Render a progress spinner while content loads.
|
||||
protected _renderProgressIndicator(): TemplateResult {
|
||||
return html` <div class="frigate-card-attention">
|
||||
<ha-circular-progress active="true" size="large"></ha-circular-progress>
|
||||
</div>`;
|
||||
}
|
||||
|
||||
// Stop/Play video controls.
|
||||
protected _controlVideos({
|
||||
stop,
|
||||
control_live = false,
|
||||
control_clip = false,
|
||||
}: ControlVideosParameters): void {
|
||||
const controlVideo = (stop: boolean, is_live: boolean, video: HTMLVideoElement) => {
|
||||
if (video) {
|
||||
if (stop) {
|
||||
video.pause();
|
||||
video.currentTime = 0;
|
||||
} else if (is_live) {
|
||||
// Duration on webrtc is infinity so cannot fast-forward.
|
||||
if (!this._webrtcElement) {
|
||||
// If it's a live view, 'fast-forward' to most recent content.
|
||||
const duration = video.duration;
|
||||
video.currentTime = duration;
|
||||
}
|
||||
video.play();
|
||||
}
|
||||
}
|
||||
};
|
||||
if (!this.shadowRoot) {
|
||||
return;
|
||||
}
|
||||
if (control_clip) {
|
||||
controlVideo(
|
||||
stop,
|
||||
false,
|
||||
this.shadowRoot?.querySelector('video.frigate-card-viewer') as HTMLVideoElement,
|
||||
);
|
||||
}
|
||||
if (control_live) {
|
||||
// Don't have direct access to the live video player as it is buried in
|
||||
// multiple components/shadow-roots, so need to navigate the path to get to <video>.
|
||||
if (this._webrtcElement) {
|
||||
controlVideo(
|
||||
stop,
|
||||
true,
|
||||
this.shadowRoot?.querySelector('webrtc-camera video') as HTMLVideoElement,
|
||||
);
|
||||
} else {
|
||||
controlVideo(
|
||||
stop,
|
||||
true,
|
||||
this.shadowRoot
|
||||
?.querySelector('ha-camera-stream')
|
||||
?.shadowRoot?.querySelector('ha-hls-player')
|
||||
?.shadowRoot?.querySelector('video') as HTMLVideoElement,
|
||||
);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
protected _menuActionHandler(name: string): void {
|
||||
switch (name) {
|
||||
case 'live':
|
||||
this._controlVideos({ stop: true, control_clip: true });
|
||||
this._controlVideos({ stop: false, control_live: true });
|
||||
this._viewMode = name;
|
||||
this._heading = null;
|
||||
break;
|
||||
case 'clips':
|
||||
this._controlVideos({ stop: true, control_live: true });
|
||||
this._viewMode = name;
|
||||
this._heading = null;
|
||||
break;
|
||||
case 'snapshots':
|
||||
this._controlVideos({ stop: true, control_clip: true, control_live: true });
|
||||
this._viewMode = name;
|
||||
this._heading = null;
|
||||
break;
|
||||
case 'frigate-ui':
|
||||
window.open(this.config.frigate_url);
|
||||
break;
|
||||
case 'motion':
|
||||
if (this.config.motion_entity) {
|
||||
fireEvent(this, 'hass-more-info', { entityId: this.config.motion_entity });
|
||||
}
|
||||
break;
|
||||
default:
|
||||
console.warn('Unknown Frigate card menu option.');
|
||||
}
|
||||
}
|
||||
|
||||
// Render the player for a saved clip.
|
||||
protected async _renderClipPlayer(): Promise<TemplateResult> {
|
||||
let event: FrigateEvent, events: FrigateGetEventsResponse;
|
||||
if (this._viewEvent) {
|
||||
event = this._viewEvent;
|
||||
} else {
|
||||
try {
|
||||
events = await this._getEvents({
|
||||
has_clip: true,
|
||||
limit: 1,
|
||||
});
|
||||
} catch (e) {
|
||||
return this._renderError(e);
|
||||
}
|
||||
if (!events.length) {
|
||||
return this._renderAttentionIcon('mdi:camera-off');
|
||||
}
|
||||
event = events[0];
|
||||
}
|
||||
this._heading = this._getEventTitle(event);
|
||||
const url = `${this.config.frigate_url}/clips/` + `${event.camera}-${event.id}.mp4`;
|
||||
return html` <video class="frigate-card-viewer" autoplay muted controls>
|
||||
<source src="${url}" type="video/mp4" />
|
||||
</video>`;
|
||||
}
|
||||
|
||||
// Render a snapshot.
|
||||
protected async _renderSnapshotViewer(): Promise<TemplateResult> {
|
||||
let event: FrigateEvent, events: FrigateGetEventsResponse;
|
||||
if (this._viewEvent) {
|
||||
event = this._viewEvent;
|
||||
} else {
|
||||
try {
|
||||
events = await this._getEvents({
|
||||
has_snapshot: true,
|
||||
limit: 1,
|
||||
});
|
||||
} catch (e) {
|
||||
return this._renderError(e);
|
||||
}
|
||||
if (!events.length) {
|
||||
return this._renderAttentionIcon('mdi:filmstrip-off');
|
||||
}
|
||||
event = events[0];
|
||||
}
|
||||
this._heading = this._getEventTitle(event);
|
||||
const url = `${this.config.frigate_url}/clips/${event.camera}-${event.id}.jpg`;
|
||||
return html`<img class="frigate-card-viewer" src="${url}" />`;
|
||||
}
|
||||
|
||||
// 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 {
|
||||
if (!this._hass || !(this.config.camera_entity in this._hass.states)) {
|
||||
return this._renderError('mdi:camera-off');
|
||||
}
|
||||
if (this._webrtcElement) {
|
||||
return html` <div class=${this._viewMode == 'live' ? 'visible' : 'invisible'}>
|
||||
${this._webrtcElement}
|
||||
</div>`;
|
||||
}
|
||||
return html` <ha-camera-stream
|
||||
.hass=${this._hass}
|
||||
.stateObj=${this._hass.states[this.config.camera_entity]}
|
||||
.controls=${true}
|
||||
.muted=${true}
|
||||
class=${this._viewMode == 'live' ? 'visible' : 'invisible'}
|
||||
>
|
||||
</ha-camera-stream>`;
|
||||
}
|
||||
|
||||
// Record interactions with the card.
|
||||
protected _interactionHandler(): void {
|
||||
if (!this.config.view_timeout) {
|
||||
return;
|
||||
}
|
||||
if (this._interactionTimerID) {
|
||||
window.clearTimeout(this._interactionTimerID);
|
||||
}
|
||||
this._interactionTimerID = window.setTimeout(() => {
|
||||
this._interactionTimerID = null;
|
||||
this._setViewModeToDefault();
|
||||
}, 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'));
|
||||
}
|
||||
if (this.config.show_error) {
|
||||
return this._showError(localize('common.show_error'));
|
||||
}
|
||||
// Note: Menu is rendered last to allow heading to be set by render methods.
|
||||
return html`
|
||||
<ha-card @click=${this._interactionHandler}>
|
||||
</frigate-card-menu>
|
||||
${
|
||||
this._viewMode == 'clips'
|
||||
? html`<div class="frigate-card-gallery">
|
||||
${until(this._renderEvents(), this._renderProgressIndicator())}
|
||||
</div>`
|
||||
: ``
|
||||
}
|
||||
${
|
||||
this._viewMode == 'snapshots'
|
||||
? html`<div class="frigate-card-gallery">
|
||||
${until(this._renderEvents(), this._renderProgressIndicator())}
|
||||
</div>`
|
||||
: ``
|
||||
}
|
||||
${
|
||||
this._viewMode == 'clip'
|
||||
? html`<div class="frigate-card-viewer">
|
||||
${until(this._renderClipPlayer(), this._renderProgressIndicator())}
|
||||
</div>`
|
||||
: ``
|
||||
}
|
||||
${
|
||||
this._viewMode == 'snapshot'
|
||||
? html`<div class="frigate-card-viewer">
|
||||
${until(this._renderSnapshotViewer(), this._renderProgressIndicator())}
|
||||
</div>`
|
||||
: ``
|
||||
}
|
||||
${this._renderLiveViewer()}
|
||||
<frigate-card-menu
|
||||
.motionEntity=${this.config.motion_entity}
|
||||
.hass=${this._hass}
|
||||
.actionCallback=${this._menuActionHandler.bind(this)}
|
||||
.heading=${this._heading}
|
||||
></frigate-card-menu>
|
||||
</ha-card>`;
|
||||
}
|
||||
|
||||
// Show a warning card.
|
||||
private _showWarning(warning: string): TemplateResult {
|
||||
return html` <hui-warning> ${warning} </hui-warning> `;
|
||||
}
|
||||
|
||||
// Show an error card.
|
||||
private _showError(error: string): TemplateResult {
|
||||
const errorCard = document.createElement('hui-error-card');
|
||||
errorCard.setConfig({
|
||||
type: 'error',
|
||||
error,
|
||||
origConfig: this.config,
|
||||
});
|
||||
|
||||
return html` ${errorCard} `;
|
||||
}
|
||||
|
||||
// Return compiled CSS styles (thus safe to use with unsafeCSS).
|
||||
static get styles(): CSSResult {
|
||||
return unsafeCSS(frigate_card_style);
|
||||
}
|
||||
|
||||
// Get the Lovelace card size.
|
||||
static getCardSize(): number {
|
||||
return 5;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user