flan/advanced-camera-card
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Converge view mode lists.

Browse Source
This commit is contained in:
Dermot Duffy
2021-08-15 18:59:35 -07:00
parent 5962e7f024
commit 505ea85afa
3 changed files with 45 additions and 52 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/editor.ts
+18 -18
View File
@@ -73,15 +73,15 @@ export class FrigateCardEditor extends LitElement implements LovelaceCardEditor
this._helpers.importMoreInfoControl('climate');
// You can restrict on domain type
const camera_entities = this._getEntities('camera');
const binary_sensor_entities = this._getEntities('binary_sensor');
const cameraEntities = this._getEntities('camera');
const binarySensorEntities = this._getEntities('binary_sensor');
const webrtc_camera_entity =
const webrtcCameraEntity =
this._config?.webrtc && (this._config?.webrtc as any).entity ?
(this._config?.webrtc as any).entity :
'';
const view_modes = {
const viewModes = {
"": "",
"live": "Live view",
"clips": "Clip gallery",
@@ -90,7 +90,7 @@ export class FrigateCardEditor extends LitElement implements LovelaceCardEditor
"snapshot": "Latest snapshot",
}
const live_provider = {
const liveProvider = {
"": "",
"frigate": "Frigate",
"webrtc": "WebRTC",
@@ -113,8 +113,8 @@ export class FrigateCardEditor extends LitElement implements LovelaceCardEditor
@value-changed=${this._valueChanged}
.configValue=${'camera_entity'}
>
<paper-listbox slot="dropdown-content" .selected=${camera_entities.indexOf(this._config?.camera_entity || '')}>
${camera_entities.map(entity => {
<paper-listbox slot="dropdown-content" .selected=${cameraEntities.indexOf(this._config?.camera_entity || '')}>
${cameraEntities.map(entity => {
return html`
<paper-item>${entity}</paper-item>
`;
@@ -145,8 +145,8 @@ export class FrigateCardEditor extends LitElement implements LovelaceCardEditor
@value-changed=${this._valueChanged}
.configValue=${'motion_entity'}
>
<paper-listbox slot="dropdown-content" .selected=${binary_sensor_entities.indexOf(this._config?.motion_entity || '')}>
${binary_sensor_entities.map(entity => {
<paper-listbox slot="dropdown-content" .selected=${binarySensorEntities.indexOf(this._config?.motion_entity || '')}>
${binarySensorEntities.map(entity => {
return html`
<paper-item>${entity}</paper-item>
`;
@@ -164,11 +164,11 @@ export class FrigateCardEditor extends LitElement implements LovelaceCardEditor
@value-changed=${this._valueChanged}
.configValue=${'view_default'}
>
<paper-listbox slot="dropdown-content" .selected=${Object.keys(view_modes).indexOf(this._config?.view_default || '')}>
${Object.keys(view_modes).map(key => {
<paper-listbox slot="dropdown-content" .selected=${Object.keys(viewModes).indexOf(this._config?.view_default || '')}>
${Object.keys(viewModes).map(key => {
return html`
<paper-item .label="${key}">
${view_modes[key]}
${viewModes[key]}
</paper-item>
`;
})}
@@ -185,13 +185,13 @@ export class FrigateCardEditor extends LitElement implements LovelaceCardEditor
<paper-dropdown-menu
label="Live provider (Optional)"
@value-changed=${this._valueChanged}
.configValue=${'live_provider'}
.configValue=${'liveProvider'}
>
<paper-listbox slot="dropdown-content" .selected=${Object.keys(live_provider).indexOf(this._config?.live_provider || '')}>
${Object.keys(live_provider).map(key => {
<paper-listbox slot="dropdown-content" .selected=${Object.keys(liveProvider).indexOf(this._config?.live_provider || '')}>
${Object.keys(liveProvider).map(key => {
return html`
<paper-item .label="${key}"
>${live_provider[key]}
>${liveProvider[key]}
</paper-item>
`;
})}
@@ -202,8 +202,8 @@ export class FrigateCardEditor extends LitElement implements LovelaceCardEditor
@value-changed=${this._valueChanged}
.configValue=${'webrtc.entity'}
>
<paper-listbox slot="dropdown-content" .selected=${camera_entities.indexOf(webrtc_camera_entity)}>
${camera_entities.map(entity => {
<paper-listbox slot="dropdown-content" .selected=${cameraEntities.indexOf(webrtcCameraEntity)}>
${cameraEntities.map(entity => {
return html`
<paper-item>${entity}</paper-item>
`;
src/frigate-card.ts
+15 -33
View File
@@ -33,7 +33,7 @@ import frigate_card_style from './frigate-card.scss'
import frigate_card_menu_style from './frigate-card-menu.scss'
import { frigateCardConfigSchema, frigateGetEventsResponseSchema } from './types';
import type { FrigateCardConfig, FrigateEvent, FrigateGetEventsResponse, GetEventsParameters, ControlVideosParameters } 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';
@@ -59,14 +59,6 @@ console.info(
description: 'A lovelace card for use with Frigate',
});
enum FrigateCardView {
LIVE, // Show the live camera.
CLIP, // Show a clip video.
CLIPS, // Show the clips gallery.
SNAPSHOT, // Show a snapshot.
SNAPSHOTS, // Show the snapshots gallery.
}
type FrigateCardMenuCallback = (name: string) => any;
// A menu for the Frigate card.
@@ -207,7 +199,7 @@ export class FrigateCard extends LitElement {
// Constructor for FrigateCard.
constructor() {
super();
this._viewMode = FrigateCardView.LIVE;
this._viewMode = "live";
this._viewEvent = null;
this._interactionTimerID = null;
this._webrtcElement = null;
@@ -295,17 +287,8 @@ export class FrigateCard extends LitElement {
// Set the view mode to the configured default.
protected _setViewModeToDefault(): void {
if (this.config.view_default == "live") {
this._viewMode = FrigateCardView.LIVE;
} else if (this.config.view_default == "clips") {
this._viewMode = FrigateCardView.CLIPS;
} else if (this.config.view_default == "clip") {
this._viewMode = FrigateCardView.CLIP;
this._viewEvent = null;
} else if (this.config.view_default == "snapshots") {
this._viewMode = FrigateCardView.SNAPSHOTS;
} else if (this.config.view_default == "snapshot") {
this._viewMode = FrigateCardView.SNAPSHOT;
this._viewMode = this.config.view_default;
if (["clip", "snapshot"].includes(this._viewMode)) {
this._viewEvent = null;
}
}
@@ -419,7 +402,7 @@ export class FrigateCard extends LitElement {
// Render Frigate events into a card gallery.
protected async _renderEvents() : Promise<TemplateResult> {
const want_clips = this._viewMode == FrigateCardView.CLIPS;
const want_clips = (this._viewMode == "clips");
let events;
try {
events = await this._getEvents({
@@ -446,8 +429,7 @@ export class FrigateCard extends LitElement {
@click=${() => {
this._showMenu = false;
this._viewEvent = event;
this._viewMode = want_clips ?
FrigateCardView.CLIP : FrigateCardView.SNAPSHOT;
this._viewMode = want_clips ? "clip" : "snapshot";
}}
>
</div>
@@ -525,15 +507,15 @@ export class FrigateCard extends LitElement {
case "live":
this._controlVideos({stop: true, control_clip: true});
this._controlVideos({stop: false, control_live: true});
this._viewMode = FrigateCardView.LIVE;
this._viewMode = name;
break;
case "clips":
this._controlVideos({stop: true, control_live: true});
this._viewMode = FrigateCardView.CLIPS;
this._viewMode = name;
break;
case "snapshots":
this._controlVideos({stop: true, control_clip: true, control_live: true});
this._viewMode = FrigateCardView.SNAPSHOTS;
this._viewMode = name;
break;
case "frigate-ui":
window.open(this.config.frigate_url);
@@ -608,7 +590,7 @@ export class FrigateCard extends LitElement {
if (this._webrtcElement) {
return html`
<div
class=${this._viewMode == FrigateCardView.LIVE ? 'visible' : 'invisible'}
class=${this._viewMode == "live" ? 'visible' : 'invisible'}
>
${this._webrtcElement}
</div>`;
@@ -619,7 +601,7 @@ export class FrigateCard extends LitElement {
.stateObj=${this._hass.states[this.config.camera_entity]}
.controls=${true}
.muted=${true}
class=${this._viewMode == FrigateCardView.LIVE ? 'visible' : 'invisible'}
class=${this._viewMode == "live" ? 'visible' : 'invisible'}
>
</ha-camera-stream>`;
}
@@ -654,22 +636,22 @@ export class FrigateCard extends LitElement {
.actionCallback=${this._menuActionHandler.bind(this)}
>
</frigate-card-menu>
${this._viewMode == FrigateCardView.CLIPS ?
${this._viewMode == "clips" ?
html`<div class="frigate-card-gallery">
${until(this._renderEvents(), this._renderProgressIndicator())}
</div>` : ``
}
${this._viewMode == FrigateCardView.SNAPSHOTS ?
${this._viewMode == "snapshots" ?
html`<div class="frigate-card-gallery">
${until(this._renderEvents(), this._renderProgressIndicator())}
</div>` : ``
}
${this._viewMode == FrigateCardView.CLIP ?
${this._viewMode == "clip" ?
html`<div class="frigate-card-viewer">
${until(this._renderClipPlayer(), this._renderProgressIndicator())}
</div>` : ``
}
${this._viewMode == FrigateCardView.SNAPSHOT ?
${this._viewMode == "snapshot" ?
html`<div class="frigate-card-viewer">
${until(this._renderSnapshotViewer(), this._renderProgressIndicator())}
</div>` : ``
src/types.ts
+12 -1
View File
@@ -12,12 +12,23 @@ declare global {
* Internal types.
*/
// enum FrigateCardView {
// LIVE = "live", // Show the live camera.
// CLIP = "clip", // Show a clip video.
// CLIPS = "clips", // Show the clips gallery.
// SNAPSHOT = "snapshot", // Show a snapshot.
// SNAPSHOTS = "snapshots", // Show the snapshots gallery.
// }
export const FRIGATE_CARD_VIEWS = ["live", "clip", "clips", "snapshot", "snapshots"] as const;
export type FrigateCardView = typeof FRIGATE_CARD_VIEWS[number];
export const frigateCardConfigSchema = z.object({
camera_entity: z.string(),
motion_entity: z.string().optional(),
frigate_url: z.string().url(),
frigate_camera_name: z.string().optional(),
view_default: z.enum(["live", "clips", "clip", "snapshots", "snapshot"]).optional().default("live"),
view_default: z.enum(FRIGATE_CARD_VIEWS).optional().default("live"),
view_timeout: z.number().or(z.string().regex(/^\d+$/).transform(val => Number(val))).optional(),
live_provider: z.enum(["frigate", "webrtc"]).default("frigate"),