Move gallery to component.
This commit is contained in:
Dermot Duffy
+24
-131
@@ -10,10 +10,13 @@ import {
|
||||
import { customElement, property, query, state } from 'lit/decorators';
|
||||
import { classMap } from 'lit/directives/class-map.js';
|
||||
import { until } from 'lit/directives/until.js';
|
||||
|
||||
import { View } from './view';
|
||||
import { FrigateCardMenu } from './components/menu';
|
||||
import { renderMessage, renderErrorMessage, renderProgressIndicator } from './components/message';
|
||||
|
||||
import {
|
||||
renderMessage,
|
||||
renderErrorMessage,
|
||||
renderProgressIndicator,
|
||||
} from './components/message';
|
||||
import {
|
||||
HomeAssistant,
|
||||
LovelaceCardEditor,
|
||||
@@ -23,9 +26,9 @@ import {
|
||||
} from 'custom-card-helpers';
|
||||
|
||||
import './editor';
|
||||
import './components/menu'
|
||||
import './components/message'
|
||||
|
||||
import './components/menu';
|
||||
import './components/message';
|
||||
import './components/gallery';
|
||||
|
||||
import cardStyle from './scss/card.scss';
|
||||
|
||||
@@ -41,7 +44,6 @@ import type {
|
||||
BrowseMediaSource,
|
||||
ExtendedHomeAssistant,
|
||||
FrigateCardConfig,
|
||||
FrigateCardView,
|
||||
ResolvedMedia,
|
||||
} from './types';
|
||||
import { CARD_VERSION } from './const';
|
||||
@@ -100,41 +102,6 @@ function shouldUpdateBasedOnHass(
|
||||
return false;
|
||||
}
|
||||
|
||||
interface ViewParameters {
|
||||
view?: FrigateCardView;
|
||||
target?: BrowseMediaSource;
|
||||
childIndex?: number;
|
||||
previous?: View;
|
||||
}
|
||||
|
||||
class View {
|
||||
view: FrigateCardView;
|
||||
target?: BrowseMediaSource;
|
||||
childIndex?: number;
|
||||
previous?: View;
|
||||
|
||||
constructor(params?: ViewParameters) {
|
||||
this.view = params?.view || 'live';
|
||||
this.target = params?.target;
|
||||
this.childIndex = params?.childIndex;
|
||||
this.previous = params?.previous;
|
||||
}
|
||||
|
||||
public is(name: string): boolean {
|
||||
return this.view == name;
|
||||
}
|
||||
|
||||
get media(): BrowseMediaSource | undefined {
|
||||
if (this.target) {
|
||||
if (this.target.children && this.childIndex !== undefined) {
|
||||
return this.target.children[this.childIndex];
|
||||
}
|
||||
return this.target;
|
||||
}
|
||||
return undefined;
|
||||
}
|
||||
}
|
||||
|
||||
// Main FrigateCard class.
|
||||
@customElement('frigate-card')
|
||||
export class FrigateCard extends LitElement {
|
||||
@@ -172,7 +139,7 @@ export class FrigateCard extends LitElement {
|
||||
// Whether or not there is an active clip being played.
|
||||
protected _clipPlaying = false;
|
||||
|
||||
@query("frigate-card-menu")
|
||||
@query('frigate-card-menu')
|
||||
_menu!: FrigateCardMenu | null;
|
||||
|
||||
// A small cache to avoid needing to create a new list of entities every time
|
||||
@@ -291,6 +258,9 @@ export class FrigateCard extends LitElement {
|
||||
this._changeView();
|
||||
}
|
||||
|
||||
protected _changeViewHandler(e: CustomEvent<View>): void {
|
||||
this._changeView(e.detail);
|
||||
}
|
||||
// Update the card view.
|
||||
protected _changeView(view?: View | undefined): void {
|
||||
if (view === undefined) {
|
||||
@@ -406,89 +376,6 @@ export class FrigateCard extends LitElement {
|
||||
return this._makeWSRequest(resolvedMediaSchema, request);
|
||||
}
|
||||
|
||||
// Render Frigate events into a card gallery.
|
||||
protected async _renderEvents(): Promise<TemplateResult> {
|
||||
let parent;
|
||||
try {
|
||||
if (this._view.target) {
|
||||
parent = await this._browseMedia(this._view.target.media_content_id);
|
||||
} else {
|
||||
parent = await this._browseMediaQuery(this._view.is('clips'));
|
||||
}
|
||||
} catch (e: any) {
|
||||
return renderErrorMessage(e.message);
|
||||
}
|
||||
|
||||
if (this._getFirstTrueMediaChildIndex(parent) == null) {
|
||||
return renderMessage(
|
||||
this._view.is('clips')
|
||||
? localize('common.no_clips')
|
||||
: localize('common.no_snapshots'),
|
||||
this._view.is('clips') ? 'mdi:filmstrip-off' : 'mdi:camera-off',
|
||||
);
|
||||
}
|
||||
|
||||
return html` <ul class="mdc-image-list frigate-card-image-list">
|
||||
${this._view.previous
|
||||
? html`<li class="mdc-image-list__item">
|
||||
<div class="mdc-image-list__image-aspect-container">
|
||||
<div class="mdc-image-list__image">
|
||||
<ha-card
|
||||
@click=${() => {
|
||||
this._changeView(this._view.previous);
|
||||
}}
|
||||
outlined=""
|
||||
class="frigate-card-image-list-folder"
|
||||
>
|
||||
<ha-icon .icon=${'mdi:arrow-left'}></ha-icon>
|
||||
</ha-card>
|
||||
</div>
|
||||
</div>
|
||||
</li>`
|
||||
: ''}
|
||||
${parent.children.map(
|
||||
(child, index) =>
|
||||
html` <li class="mdc-image-list__item">
|
||||
<div class="mdc-image-list__image-aspect-container">
|
||||
${child.can_expand
|
||||
? html`<div class="mdc-image-list__image">
|
||||
<ha-card
|
||||
@click=${() => {
|
||||
this._changeView(
|
||||
new View({
|
||||
view: this._view.view,
|
||||
target: child,
|
||||
previous: this._view,
|
||||
}),
|
||||
);
|
||||
}}
|
||||
outlined=""
|
||||
class="frigate-card-image-list-folder"
|
||||
>
|
||||
<div>${child.title}</div>
|
||||
</ha-card>
|
||||
</div>`
|
||||
: html`<img
|
||||
title="${child.title}"
|
||||
class="mdc-image-list__image"
|
||||
src="${child.thumbnail}"
|
||||
@click=${() => {
|
||||
this._changeView(
|
||||
new View({
|
||||
view: this._view.is('clips') ? 'clip' : 'snapshot',
|
||||
target: parent,
|
||||
childIndex: index,
|
||||
previous: this._view,
|
||||
}),
|
||||
);
|
||||
}}
|
||||
/>`}
|
||||
</div>
|
||||
</li>`,
|
||||
)}
|
||||
</ul>`;
|
||||
}
|
||||
|
||||
protected _menuActionHandler(name: string): void {
|
||||
switch (name) {
|
||||
case 'frigate':
|
||||
@@ -886,10 +773,7 @@ export class FrigateCard extends LitElement {
|
||||
// is always rendered (but sometimes hidden).
|
||||
protected async _renderLiveViewer(): Promise<TemplateResult> {
|
||||
if (!this._hass || !(this.config.camera_entity in this._hass.states)) {
|
||||
return renderMessage(
|
||||
localize('error.no_live_camera'),
|
||||
'mdi:camera-off',
|
||||
);
|
||||
return renderMessage(localize('error.no_live_camera'), 'mdi:camera-off');
|
||||
}
|
||||
if (this._webrtcElement) {
|
||||
return html`${this._webrtcElement}`;
|
||||
@@ -947,7 +831,16 @@ export class FrigateCard extends LitElement {
|
||||
<div class="container_16_9 outer">
|
||||
<div class="frigate-card-contents">
|
||||
${this._view.is('clips') || this._view.is('snapshots')
|
||||
? until(this._renderEvents(), renderProgressIndicator())
|
||||
? html` <frigate-card-gallery
|
||||
.hass=${this._hass}
|
||||
.cameraName=${this.config.frigate_camera_name}
|
||||
.clientId=${this.config.frigate_client_id}
|
||||
.label=${this.config.label}
|
||||
.zone=${this.config.zone}
|
||||
.view=${this._view}
|
||||
@frigate-card:change-view=${this._changeViewHandler}
|
||||
>
|
||||
</frigate-card-gallery>`
|
||||
: ``}
|
||||
${this._view.is('clip') || this._view.is('snapshot')
|
||||
? until(this._renderViewer(), renderProgressIndicator())
|
||||
|
||||
+100
@@ -0,0 +1,100 @@
|
||||
import { ZodSchema, z } from 'zod';
|
||||
import { MessageBase } from 'home-assistant-js-websocket';
|
||||
import { HomeAssistant } from 'custom-card-helpers';
|
||||
import { localize } from './localize/localize';
|
||||
import { BrowseMediaSource, browseMediaSourceSchema, ExtendedHomeAssistant } from './types';
|
||||
|
||||
export function getParseErrorKeys<T>(error: z.ZodError<T>): string[] {
|
||||
const errors = error.format();
|
||||
return Object.keys(errors).filter((v) => !v.startsWith('_'));
|
||||
}
|
||||
|
||||
export async function homeAssistantWSRequest<T>(
|
||||
hass: HomeAssistant & ExtendedHomeAssistant,
|
||||
schema: ZodSchema<T>,
|
||||
request: MessageBase,
|
||||
): Promise<T | null> {
|
||||
const response = await hass.callWS<T>(request);
|
||||
|
||||
if (!response) {
|
||||
const error_message = `${localize('error.empty_response')}: ${JSON.stringify(
|
||||
request,
|
||||
)}`;
|
||||
console.warn(error_message);
|
||||
throw new Error(error_message);
|
||||
}
|
||||
const parseResult = schema.safeParse(response);
|
||||
if (!parseResult.success) {
|
||||
const keys = getParseErrorKeys<T>(parseResult.error);
|
||||
const error_message =
|
||||
`${localize('error.invalid_response')}: ${JSON.stringify(request)}. ` +
|
||||
localize('error.invalid_keys') +
|
||||
`: '${keys}'`;
|
||||
console.warn(error_message);
|
||||
throw new Error(error_message);
|
||||
}
|
||||
return parseResult.data;
|
||||
}
|
||||
|
||||
// From a BrowseMediaSource item extract the first true media item (i.e. a
|
||||
// clip/snapshot, not a folder).
|
||||
export function getFirstTrueMediaChildIndex(
|
||||
media: BrowseMediaSource | null,
|
||||
): number | null {
|
||||
if (!media || !media.children) {
|
||||
return null;
|
||||
}
|
||||
for (let i = 0; i < media.children.length; i++) {
|
||||
if (!media.children[i].can_expand) {
|
||||
return i;
|
||||
}
|
||||
}
|
||||
return null;
|
||||
}
|
||||
|
||||
// Browse Frigate media with a media content id.
|
||||
export async function browseMedia(
|
||||
hass: HomeAssistant & ExtendedHomeAssistant | null,
|
||||
media_content_id: string,
|
||||
): Promise<BrowseMediaSource | null> {
|
||||
if (!hass) {
|
||||
return null;
|
||||
}
|
||||
const request = {
|
||||
type: 'media_source/browse_media',
|
||||
media_content_id: media_content_id,
|
||||
};
|
||||
return homeAssistantWSRequest(hass, browseMediaSourceSchema, request);
|
||||
}
|
||||
|
||||
interface BrowseMediaQueryParameters {
|
||||
hass: HomeAssistant & ExtendedHomeAssistant,
|
||||
mediaType: "clips" | "snapshots",
|
||||
clientId: string,
|
||||
cameraName: string,
|
||||
label?: string,
|
||||
zone?: string,
|
||||
before?: number,
|
||||
after?: number,
|
||||
}
|
||||
|
||||
// Browse Frigate media with query parameters.
|
||||
export async function browseMediaQuery(params: BrowseMediaQueryParameters): Promise<BrowseMediaSource | null> {
|
||||
return browseMedia(
|
||||
params.hass,
|
||||
// Defined in:
|
||||
// https://github.com/blakeblackshear/frigate-hass-integration/blob/master/custom_components/frigate/media_source.py
|
||||
[
|
||||
'media-source://frigate',
|
||||
params.clientId,
|
||||
'event-search',
|
||||
params.mediaType,
|
||||
'', // Name/Title to render (not necessary here)
|
||||
params.after ? String(params.after) : '',
|
||||
params.before ? String(params.before) : '',
|
||||
params.cameraName,
|
||||
params.label,
|
||||
params.zone,
|
||||
].join('/'),
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,140 @@
|
||||
/* eslint-disable @typescript-eslint/no-explicit-any */
|
||||
import { CSSResultGroup, LitElement, TemplateResult, html, unsafeCSS } from 'lit';
|
||||
import { customElement, property } from 'lit/decorators';
|
||||
import { until } from 'lit/directives/until.js';
|
||||
|
||||
import { renderMessage, renderErrorMessage, renderProgressIndicator } from './message';
|
||||
|
||||
import { HomeAssistant } from 'custom-card-helpers';
|
||||
|
||||
import galleryStyle from '../scss/gallery.scss';
|
||||
|
||||
import type { ExtendedHomeAssistant } from '../types';
|
||||
import { localize } from '../localize/localize';
|
||||
|
||||
import { browseMedia, browseMediaQuery, getFirstTrueMediaChildIndex } from '../common';
|
||||
import { View } from '../view';
|
||||
|
||||
@customElement('frigate-card-gallery')
|
||||
export class FrigateCardGallery extends LitElement {
|
||||
@property({ attribute: false })
|
||||
protected hass: (HomeAssistant & ExtendedHomeAssistant) | null = null;
|
||||
|
||||
@property({ attribute: false })
|
||||
protected cameraName: string | null = null;
|
||||
|
||||
@property({ attribute: false })
|
||||
protected clientId: string | null = null;
|
||||
|
||||
@property({ attribute: false })
|
||||
protected view: View | null = null;
|
||||
|
||||
@property({ attribute: false })
|
||||
protected label?: string;
|
||||
|
||||
@property({ attribute: false })
|
||||
protected zone?: string;
|
||||
|
||||
protected _getMediaType(): 'clips' | 'snapshots' {
|
||||
return this.view?.view == 'clips' ? 'clips' : 'snapshots';
|
||||
}
|
||||
|
||||
protected render(): TemplateResult | void {
|
||||
return html`${until(this._renderEvents(), renderProgressIndicator())}`;
|
||||
}
|
||||
|
||||
protected async _renderEvents(): Promise<TemplateResult> {
|
||||
if (!this.hass || !this.clientId || !this.cameraName || !this.view) {
|
||||
return renderErrorMessage(localize('error.internal'));
|
||||
}
|
||||
|
||||
let parent;
|
||||
try {
|
||||
if (this.view.target) {
|
||||
parent = await browseMedia(this.hass, this.view.target.media_content_id);
|
||||
} else {
|
||||
parent = await browseMediaQuery({
|
||||
hass: this.hass,
|
||||
clientId: this.clientId,
|
||||
mediaType: this._getMediaType(),
|
||||
cameraName: this.cameraName,
|
||||
label: this.label,
|
||||
zone: this.zone,
|
||||
});
|
||||
}
|
||||
} catch (e: any) {
|
||||
return renderErrorMessage(e.message);
|
||||
}
|
||||
|
||||
if (getFirstTrueMediaChildIndex(parent) == null) {
|
||||
return renderMessage(
|
||||
this._getMediaType() == 'clips'
|
||||
? localize('common.no_clips')
|
||||
: localize('common.no_snapshots'),
|
||||
this._getMediaType() == 'clips' ? 'mdi:filmstrip-off' : 'mdi:camera-off',
|
||||
);
|
||||
}
|
||||
|
||||
return html` <ul class="mdc-image-list frigate-card-gallery">
|
||||
${this.view && this.view.previous
|
||||
? html`<li class="mdc-image-list__item">
|
||||
<div class="mdc-image-list__image-aspect-container">
|
||||
<div class="mdc-image-list__image">
|
||||
<ha-card
|
||||
@click=${() => {
|
||||
if (this.view && this.view.previous) {
|
||||
this.view.previous.generateChangeEvent(this);
|
||||
}
|
||||
}}
|
||||
outlined=""
|
||||
class="frigate-card-gallery-folder"
|
||||
>
|
||||
<ha-icon .icon=${'mdi:arrow-left'}></ha-icon>
|
||||
</ha-card>
|
||||
</div>
|
||||
</div>
|
||||
</li>`
|
||||
: ''}
|
||||
${parent.children.map(
|
||||
(child, index) =>
|
||||
html` <li class="mdc-image-list__item">
|
||||
<div class="mdc-image-list__image-aspect-container">
|
||||
${child.can_expand
|
||||
? html`<div class="mdc-image-list__image">
|
||||
<ha-card
|
||||
@click=${() => {
|
||||
new View({
|
||||
view: this._getMediaType(),
|
||||
target: child,
|
||||
previous: this.view ?? undefined,
|
||||
}).generateChangeEvent(this);
|
||||
}}
|
||||
outlined=""
|
||||
class="frigate-card-gallery-folder"
|
||||
>
|
||||
<div>${child.title}</div>
|
||||
</ha-card>
|
||||
</div>`
|
||||
: html`<img
|
||||
title="${child.title}"
|
||||
class="mdc-image-list__image"
|
||||
src="${child.thumbnail}"
|
||||
@click=${() => {
|
||||
new View({
|
||||
view: this._getMediaType() == 'clips' ? 'clip' : 'snapshot',
|
||||
target: parent,
|
||||
childIndex: index,
|
||||
previous: this.view ?? undefined,
|
||||
}).generateChangeEvent(this);
|
||||
}}
|
||||
/>`}
|
||||
</div>
|
||||
</li>`,
|
||||
)}
|
||||
</ul>`;
|
||||
}
|
||||
|
||||
static get styles(): CSSResultGroup {
|
||||
return unsafeCSS(galleryStyle);
|
||||
}
|
||||
}
|
||||
@@ -84,6 +84,7 @@
|
||||
"could_not_resolve": "Could not resolve media URL",
|
||||
"no_live_camera": "No live camera",
|
||||
"invalid_configuration": "Invalid configuration",
|
||||
"missing_webrtc": "WebRTC component not found"
|
||||
"missing_webrtc": "WebRTC component not found",
|
||||
"internal": "Internal error"
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,5 +1,3 @@
|
||||
@use "@material/image-list/mdc-image-list";
|
||||
@use "@material/image-list";
|
||||
@use './common.scss';
|
||||
|
||||
.container_16_9 {
|
||||
@@ -52,24 +50,7 @@
|
||||
padding: 10%;
|
||||
}
|
||||
|
||||
.frigate-card-image-list {
|
||||
@include image-list.standard-columns(5, 1px);
|
||||
@include image-list.shape-radius(5px);
|
||||
}
|
||||
|
||||
ha-card .frigate-card-image-list-folder {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
box-sizing: border-box;
|
||||
text-align: center;
|
||||
border-style: 2px solid;
|
||||
opacity: 0.7;
|
||||
color: var(--secondary-text-color, white);
|
||||
border-color: var(--secondary-text-color, black);
|
||||
background-color: var(--primary-background-color, black);
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
video, img {
|
||||
display: block;
|
||||
|
||||
@@ -0,0 +1,22 @@
|
||||
@use "@material/image-list/mdc-image-list";
|
||||
@use "@material/image-list";
|
||||
|
||||
.frigate-card-gallery {
|
||||
@include image-list.standard-columns(5, 1px);
|
||||
@include image-list.shape-radius(5px);
|
||||
}
|
||||
|
||||
ha-card.frigate-card-gallery-folder {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
box-sizing: border-box;
|
||||
text-align: center;
|
||||
border-style: 2px solid;
|
||||
opacity: 0.7;
|
||||
color: var(--secondary-text-color, white);
|
||||
border-color: var(--secondary-text-color, black);
|
||||
background-color: var(--primary-background-color, black);
|
||||
padding: 10px;
|
||||
height: 100%;
|
||||
}
|
||||
+46
@@ -0,0 +1,46 @@
|
||||
import type { BrowseMediaSource, FrigateCardView } from './types';
|
||||
|
||||
export interface ViewParameters {
|
||||
view?: FrigateCardView;
|
||||
target?: BrowseMediaSource;
|
||||
childIndex?: number;
|
||||
previous?: View;
|
||||
}
|
||||
|
||||
export class View {
|
||||
view: FrigateCardView;
|
||||
target?: BrowseMediaSource;
|
||||
childIndex?: number;
|
||||
previous?: View;
|
||||
|
||||
constructor(params?: ViewParameters) {
|
||||
this.view = params?.view || 'live';
|
||||
this.target = params?.target;
|
||||
this.childIndex = params?.childIndex;
|
||||
this.previous = params?.previous;
|
||||
}
|
||||
|
||||
public is(name: string): boolean {
|
||||
return this.view == name;
|
||||
}
|
||||
|
||||
get media(): BrowseMediaSource | undefined {
|
||||
if (this.target) {
|
||||
if (this.target.children && this.childIndex !== undefined) {
|
||||
return this.target.children[this.childIndex];
|
||||
}
|
||||
return this.target;
|
||||
}
|
||||
return undefined;
|
||||
}
|
||||
|
||||
public generateChangeEvent(node: HTMLElement): void {
|
||||
node.dispatchEvent(
|
||||
new CustomEvent<View>('frigate-card:change-view', {
|
||||
bubbles: true,
|
||||
composed: true,
|
||||
detail: this,
|
||||
}),
|
||||
);
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user