From 505ea85afa494e50e57987f61539b927aeed106d Mon Sep 17 00:00:00 2001 From: Dermot Duffy Date: Sun, 15 Aug 2021 18:59:35 -0700 Subject: [PATCH] Converge view mode lists. --- src/editor.ts | 36 +++++++++++++++++----------------- src/frigate-card.ts | 48 ++++++++++++++------------------------------- src/types.ts | 13 +++++++++++- 3 files changed, 45 insertions(+), 52 deletions(-) diff --git a/src/editor.ts b/src/editor.ts index 6bc70ee3..51fa6bbc 100644 --- a/src/editor.ts +++ b/src/editor.ts @@ -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'} > - - ${camera_entities.map(entity => { + + ${cameraEntities.map(entity => { return html` ${entity} `; @@ -145,8 +145,8 @@ export class FrigateCardEditor extends LitElement implements LovelaceCardEditor @value-changed=${this._valueChanged} .configValue=${'motion_entity'} > - - ${binary_sensor_entities.map(entity => { + + ${binarySensorEntities.map(entity => { return html` ${entity} `; @@ -164,11 +164,11 @@ export class FrigateCardEditor extends LitElement implements LovelaceCardEditor @value-changed=${this._valueChanged} .configValue=${'view_default'} > - - ${Object.keys(view_modes).map(key => { + + ${Object.keys(viewModes).map(key => { return html` - ${view_modes[key]} + ${viewModes[key]} `; })} @@ -185,13 +185,13 @@ export class FrigateCardEditor extends LitElement implements LovelaceCardEditor - - ${Object.keys(live_provider).map(key => { + + ${Object.keys(liveProvider).map(key => { return html` ${live_provider[key]} + >${liveProvider[key]} `; })} @@ -202,8 +202,8 @@ export class FrigateCardEditor extends LitElement implements LovelaceCardEditor @value-changed=${this._valueChanged} .configValue=${'webrtc.entity'} > - - ${camera_entities.map(entity => { + + ${cameraEntities.map(entity => { return html` ${entity} `; diff --git a/src/frigate-card.ts b/src/frigate-card.ts index 33c66952..ce70336b 100644 --- a/src/frigate-card.ts +++ b/src/frigate-card.ts @@ -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,18 +287,9 @@ 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._viewMode = this.config.view_default; + if (["clip", "snapshot"].includes(this._viewMode)) { 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._viewEvent = null; } } @@ -419,7 +402,7 @@ export class FrigateCard extends LitElement { // Render Frigate events into a card gallery. protected async _renderEvents() : Promise { - 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"; }} > @@ -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`
${this._webrtcElement}
`; @@ -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'} > `; } @@ -654,22 +636,22 @@ export class FrigateCard extends LitElement { .actionCallback=${this._menuActionHandler.bind(this)} > - ${this._viewMode == FrigateCardView.CLIPS ? + ${this._viewMode == "clips" ? html`
${until(this._renderEvents(), this._renderProgressIndicator())}
` : `` } - ${this._viewMode == FrigateCardView.SNAPSHOTS ? + ${this._viewMode == "snapshots" ? html`
${until(this._renderEvents(), this._renderProgressIndicator())}
` : `` } - ${this._viewMode == FrigateCardView.CLIP ? + ${this._viewMode == "clip" ? html`
${until(this._renderClipPlayer(), this._renderProgressIndicator())}
` : `` } - ${this._viewMode == FrigateCardView.SNAPSHOT ? + ${this._viewMode == "snapshot" ? html`
${until(this._renderSnapshotViewer(), this._renderProgressIndicator())}
` : `` diff --git a/src/types.ts b/src/types.ts index 475a1b05..eda0d4db 100644 --- a/src/types.ts +++ b/src/types.ts @@ -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"),