84 lines
2.5 KiB
TypeScript
84 lines
2.5 KiB
TypeScript
import {
|
|
CSSResult,
|
|
html,
|
|
LitElement,
|
|
PropertyValues,
|
|
TemplateResult,
|
|
unsafeCSS,
|
|
} from 'lit';
|
|
import { customElement, property } from 'lit/decorators.js';
|
|
import { classMap } from 'lit/directives/class-map.js';
|
|
import { ifDefined } from 'lit/directives/if-defined.js';
|
|
|
|
import { CameraManager } from '../../camera-manager/manager';
|
|
import { MediaNotificationController } from '../../components-lib/media/notification-controller';
|
|
import { NotificationDetail } from '../../config/schema/actions/types';
|
|
import { HomeAssistant } from '../../ha/types';
|
|
import thumbnailDetailsStyle from '../../scss/thumbnail-details.scss';
|
|
import { ViewItem } from '../../view/item';
|
|
|
|
import '../icon';
|
|
|
|
@customElement('advanced-camera-card-thumbnail-details')
|
|
export class AdvancedCameraCardThumbnailDetails extends LitElement {
|
|
@property({ attribute: false })
|
|
public hass?: HomeAssistant;
|
|
|
|
@property({ attribute: false })
|
|
public cameraManager?: CameraManager;
|
|
|
|
@property({ attribute: false })
|
|
public item?: ViewItem;
|
|
|
|
@property({ attribute: false })
|
|
public seek?: Date;
|
|
|
|
private _notificationController = new MediaNotificationController();
|
|
|
|
protected willUpdate(changedProperties: PropertyValues): void {
|
|
if (['item', 'seek', 'cameraManager'].some((prop) => changedProperties.has(prop))) {
|
|
this._notificationController.calculate(this.cameraManager, this.item, this.seek);
|
|
}
|
|
}
|
|
|
|
protected render(): TemplateResult | void {
|
|
const heading = this._notificationController.getHeading();
|
|
const details = this._notificationController.getMetadata();
|
|
|
|
const renderDetail = (
|
|
detail: NotificationDetail,
|
|
heading = false,
|
|
): TemplateResult => {
|
|
return html`<div
|
|
class=${classMap({
|
|
heading,
|
|
})}
|
|
>
|
|
${detail.icon
|
|
? html` <advanced-camera-card-icon
|
|
severity=${ifDefined(detail.severity)}
|
|
title=${detail.tooltip ?? ''}
|
|
.icon=${{ icon: detail.icon }}
|
|
></advanced-camera-card-icon>`
|
|
: ''}
|
|
<span title=${detail.text}>${detail.text}</span>
|
|
</div>`;
|
|
};
|
|
|
|
return html`
|
|
${heading ? renderDetail(heading, true) : ``}
|
|
${details.length ? details.map((detail) => renderDetail(detail)) : ``}
|
|
`;
|
|
}
|
|
|
|
static get styles(): CSSResult {
|
|
return unsafeCSS(thumbnailDetailsStyle);
|
|
}
|
|
}
|
|
|
|
declare global {
|
|
interface HTMLElementTagNameMap {
|
|
'advanced-camera-card-thumbnail-details': AdvancedCameraCardThumbnailDetails;
|
|
}
|
|
}
|