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

Merge pull request #6 from dermotduffy/menu-stay-expanded

Browse Source 
Add new menu placement options
This commit is contained in:
Dermot Duffy
2021-08-22 11:32:00 -07:00
committed by GitHub
parent 41d205a5ae 8567da088d
commit bde00c53f7
13 changed files with 315 additions and 227 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.github/workflows/build.yml
-2
View File
@@ -4,9 +4,7 @@ name: 'Build'
on:
push:
branches:
- master
- main
- dev
pull_request:
schedule:
- cron: "17 6 * * *"
.github/workflows/labeler.yml
+1 -1
View File
@@ -4,7 +4,7 @@ name: Manage labels
on:
push:
branches:
- master
- main
workflow_dispatch:
jobs:
.github/workflows/release-drafter.yml
+1 -1
View File
@@ -4,7 +4,7 @@ name: Draft a release note
on:
push:
branches:
- master
- main
workflow_dispatch:
jobs:
README.md
+37 -4
View File
@@ -24,6 +24,7 @@ A full-featured Frigate Lovelace card:
* Support for filtering events by zone and label.
* Motion sensor access.
* Full Lovelace editing support.
* Theme friendly.
* **Advanced**: Support for [WebRTC](https://github.com/AlexxIT/WebRTC) live viewing.
## Installation
@@ -47,7 +48,7 @@ Home Assistant > HACS > Integrations > [...] > Custom Repositories
Home Assistant > HACS > Integrations > "Explore & Add Integrations" > Frigate Card
```
* Add the following to your `configuration.yaml`:
* Add the following to `configuration.yaml`:
```yaml
lovelace:
@@ -57,7 +58,7 @@ lovelace:
```
* Restart Home Assistant.
* Add your new card to your Lovelace configuration!
* Add the new card to the Lovelace configuration!
## Options
@@ -75,6 +76,7 @@ lovelace:
| `motion_entity` | | A binary sensor to show in the menu (e.g. a Frigate motion binary sensor) and to use to trigger card updates.|
| `frigate_camera_name` | The string after the "camera." in the `camera_entity` option (above). | This parameter allows the camera name heuristic to be overriden for cases where the entity name does not cleanly map to the Frigate camera name.|
| `view_default` | `live` | The view to show by default. See [views](#views) below.|
| `menu_mode` | `hidden` | The menu mode to show by default. See [menu modes](#menu-modes) below.|
| `view_timeout` | | A numbers of seconds of inactivity after which the card will reset to the default configured view. Inactivity is defined as lack of interaction with the Frigate menu.|
| `autoplay_clip` | `false` | Whether or not to autoplay clips in the 'clip' [view](#views). Clips manually chosen in the clips gallery will still autoplay.|
@@ -105,15 +107,46 @@ Note: WebRTC must be installed and configured separately (see [details](https://
## Views
This card supports several different views.
| Key | Description |
| ------------- | --------------------------------------------- |
|`live`| Shows the live camera view, either the name Frigate view or [WebRTC](#webrtc) if configured.|
|`live` (default)| Shows the live camera view, either the name Frigate view or [WebRTC](#webrtc) if configured.|
|`snapshots`|Shows the snapshot gallery for this camera/zone/label.|
|`snapshot`|Shows the most recent snapshot for this camera/zone/label.|
|`clips`|Shows the clip gallery for this camera/zone/label.|
|`clip`|Shows the most recent clip for this camera/zone/label.|
For the `clip` or `snapshot` view, the most recent clip/snapshot is rendered. This will automatically update whenever the state of the `camera_entity` or `motion_entity` changes. In particular, if the desire is to have a live view of the most recent event, you should configure `motion_entity` to a Frigate binary sensor associated with that camera in order to trigger updates more regularly (the underlying camera entity state does not change often, the motion binary sensors do).
### Automatic updates in the `clip` or `snapshot` view
Updates will occur whenever the state of the `camera_entity` or `motion_entity`
changes. In particular, if the desire is to have a live view of the most recent
event, the user should configure `motion_entity` to a Frigate binary sensor
associated with that camera in order to trigger updates more regularly (the
underlying camera entity state does not change often, the motion binary sensors
do).
### Getting from a snapshot to a clip
Clicking on a snapshot will take the user to the clip associated with the
snapshot (if any).
### Getting event details
More details about an event can be found by clicking the 'globe' icon in the
menu, which takes the user to the Frigate page for that event.
## Menu Modes
This card supports several menu configurations.
| Key | Description | Screenshot |
| ------------- | --------------------------------------------- | - |
|`hidden` (default)| Hide the menu by default, expandable upon clicking the 'F' button. | <img src="https://raw.githubusercontent.com/dermotduffy/frigate-hass-card/main/images/menu-mode-hidden.png" alt="Menu hidden" width="400px"> |
|`overlay`| Overlay the menu on top of the card contents. The 'F' button shows the default view. | <img src="https://raw.githubusercontent.com/dermotduffy/frigate-hass-card/main/images/menu-mode-overlay.png" alt="Menu overlaid" width="400px"> |
|`above`| Render the menu above the card. The 'F' button shows the default view. | <img src="https://raw.githubusercontent.com/dermotduffy/frigate-hass-card/main/images/menu-mode-above.png" alt="Menu above" width="400px"> |
|`below`| Render the menu below the card. The 'F' button shows the default view. | <img src="https://raw.githubusercontent.com/dermotduffy/frigate-hass-card/main/images/menu-mode-below.png" alt="Menu below" width="400px"> |
<a name="yaml-examples"></a>
images/menu-mode-above.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 216 KiB

images/menu-mode-below.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 202 KiB

images/menu-mode-hidden.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 202 KiB

images/menu-mode-overlay.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 197 KiB

src/editor.ts
+27 -1
View File
@@ -103,6 +103,14 @@ export class FrigateCardEditor extends LitElement implements LovelaceCardEditor
snapshot: 'Latest snapshot',
};
const menuModes = {
'': '',
hidden: 'Hidden',
overlay: 'Overlay',
above: 'Above',
below: 'Below',
};
const liveProvider = {
'': '',
frigate: 'Frigate',
@@ -195,6 +203,24 @@ export class FrigateCardEditor extends LitElement implements LovelaceCardEditor
})}
</paper-listbox>
</paper-dropdown-menu>
<paper-dropdown-menu
label="Menu mode (Optional)"
@value-changed=${this._valueChanged}
.configValue=${'menu_mode'}
>
<paper-listbox
slot="dropdown-content"
.selected=${Object.keys(menuModes).indexOf(
this._config?.menu_mode || '',
)}
>
${Object.keys(menuModes).map((key) => {
return html`
<paper-item .label="${key}"> ${menuModes[key]} </paper-item>
`;
})}
</paper-listbox>
</paper-dropdown-menu>
<paper-input
label="View timeout (seconds)"
prevent-invalid-input
@@ -205,7 +231,7 @@ export class FrigateCardEditor extends LitElement implements LovelaceCardEditor
.configValue=${'view_timeout'}
@value-changed=${this._valueChanged}
></paper-input>
<ha-formfield .label=${`Autoplay clip`}>
<ha-formfield .label=${`Autoplay latest clip`}>
<ha-switch
.checked=${this._config?.autoplay_clip === true}
.configValue=${'autoplay_clip'}
src/frigate-hass-card-menu.scss
+26 -22
View File
@@ -1,41 +1,45 @@
.frigate-card-menu-container {
position: absolute;
top: 0px;
z-index: 1;
width: 100%;
}
.frigate-card-menu {
position: absolute;
top: 0px;
/* Base: Not used directly */
.frigate-card-menu-base {
z-index: 1;
height: 56px;
/* Menu div itself does not handle click events. Without this, in overlay
mode, the menu div prevents clicking on gallery items 'behind' the overlay.
*/
pointer-events: none;
}
/* Small 'F' button for hidden menu */
.frigate-card-menu-hidden {
@extend .frigate-card-menu-base;
position: absolute;
width: 50px;
}
.frigate-card-menu-expanded {
@extend .frigate-card-menu;
/* Expanded overlay menu */
.frigate-card-menu-overlay {
@extend .frigate-card-menu-hidden;
width: 100%;
background-color: rgba(0, 0, 0, 0.6);
background: linear-gradient(90deg, rgba(0,0,0,0.3), rgba(0,0,0,0))
}
.frigate-card-menu-title {
@extend .frigate-card-menu-expanded;
top: 56px;
height: 1em;
padding-bottom: 0.5em;
padding-left: 0.5em;
color: rgba(255, 255, 255, 0.7);
background-color: rgba(0, 0, 0, 0.5);
/* Full above/below menu */
.frigate-card-menu-full {
@extend .frigate-card-menu-base;
width: 100%;
background: var(--secondary-background-color);
}
ha-icon-button.button {
position: relative;
z-index: 10;
color: white;
color: var(--secondary-color, white);
opacity: 0.8;
background-color: rgba(0, 0, 0, 0.6);
border-radius: 50%;
padding: 0px;
margin: 3px;
/* Buttons can always be clicked */
pointer-events: auto;
}
src/frigate-hass-card.scss
+25 -39
View File
@@ -1,23 +1,25 @@
@use "@material/image-list/mdc-image-list";
@use "@material/image-list";
.frigate-card-contents {
width: 100%;
}
.frigate-card-viewer {
width: 100%;
height: 100%;
position: absolute;
}
.frigate-card-gallery {
overflow: auto;
position: absolute;
aspect-ratio: 16 / 9;
-ms-overflow-style: none; /* Hide scrollbar: IE and Edge */
scrollbar-width: none; /* Hide scrollbar: Firefox */
max-height: 277px; /* Safari does not support aspect-ratio yet */
}
left: 0px;
right: 0px;
top: 0px;
height: 100%;
-ms-overflow-style: none; // Hide scrollbar: IE and Edge
scrollbar-width: none; // Hide scrollbar: Firefox
/* Hide scrollbar for Chrome, Safari and Opera */
.frigate-card-gallery::-webkit-scrollbar {
display: none;
}
.frigate-card-attention {
@@ -27,39 +29,13 @@
height: 100%;
}
/* Hide scrollbar for Chrome, Safari and Opera */
.frigate-card-gallery::-webkit-scrollbar {
display: none;
}
.frigate-card-image-list {
@include image-list.standard-columns(5);
@include image-list.standard-columns(5, 0px);
@include image-list.shape-radius(5px);
}
.frigate-card-image-list-icon-overlay {
position: absolute;
margin: auto;
}
.frigate-card-image-list-highlight {
// Put border inside.
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
opacity: 0.5;
border-style: dashed;
border-width: 1px;
border-color: var(--primary-color);
}
.invisible {
visibility: hidden;
}
.visibile {
visibility: visible;
video, img {
display: block;
}
ha-card {
@@ -70,4 +46,14 @@ ha-card {
width: 100%;
height: 100%;
position: relative;
background-color: var(--secondary-background-color, black);
transform-style: preserve-3d; /* Safari brings video elements forward without this */
}
/* Don't drop shadow or have radius for nested cards: webrtc */
ha-card ha-card {
box-shadow: none;
border-radius: 0px;
background-color: var(--secondary-background-color, black);
}
src/frigate-hass-card.ts
+188 -157
View File
@@ -26,7 +26,11 @@ 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 {
frigateCardConfigSchema,
frigateGetEventsResponseSchema,
FrigateMenuMode,
} from './types';
import type {
FrigateCardView,
FrigateCardConfig,
@@ -95,6 +99,9 @@ function shouldUpdateBasedOnHass(
export class FrigateCardMenu extends LitElement {
static FRIGATE_CARD_MENU_ID: string = 'frigate-card-menu-id' as const;
@property({ attribute: false })
protected menuMode: FrigateMenuMode = 'hidden';
@property({ attribute: false })
protected expand = false;
@@ -107,9 +114,6 @@ export class FrigateCardMenu extends LitElement {
@property({ attribute: false })
protected actionCallback: FrigateCardMenuCallback | null = null;
@property({ attribute: false })
protected heading: string | null = null;
protected shouldUpdate(changedProps: PropertyValues): boolean {
const oldHass = changedProps.get('hass') as HomeAssistant | undefined;
if (oldHass) {
@@ -122,11 +126,17 @@ export class FrigateCardMenu extends LitElement {
protected _renderFrigateButton(): TemplateResult {
return html` <ha-icon-button
class="button"
icon=${this.expand ? 'mdi:alpha-f-box' : 'mdi:alpha-f-box-outline'}
icon=${this.menuMode != 'hidden' || this.expand
? 'mdi:alpha-f-box'
: 'mdi:alpha-f-box-outline'}
data-toggle="tooltip"
title="Frigate menu"
@click=${() => {
this.expand = !this.expand;
if (this.menuMode == 'hidden') {
this.expand = !this.expand;
} else {
this._callAction('default');
}
}}
></ha-icon-button>`;
}
@@ -140,10 +150,6 @@ export class FrigateCardMenu extends LitElement {
// 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 =
@@ -152,65 +158,73 @@ export class FrigateCardMenu extends LitElement {
: 'mdi:walk';
}
let menuClass = 'frigate-card-menu-full';
if (['hidden', 'overlay'].includes(this.menuMode)) {
if (this.menuMode == 'overlay' || this.expand) {
menuClass = 'frigate-card-menu-overlay';
} else {
menuClass = 'frigate-card-menu-hidden';
}
}
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"
<div class=${menuClass}>
${this._renderFrigateButton()}
${this.menuMode != 'hidden' || this.expand
? html`
<ha-icon-button
class="button"
icon="${motionIcon}"
icon="mdi:cctv"
data-toggle="tooltip"
title="View live"
@click=${() => {
this.expand = false;
this._callAction('motion');
this._callAction('live');
}}
></ha-icon-button>`}
</div>
${this.heading
? html` <div class="frigate-card-menu-title">${this.heading}</div> `
></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>
`;
@@ -260,18 +274,19 @@ export class FrigateCard extends LitElement {
@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;
// Event specifically requested to be shown by the user.
@property({ attribute: false })
protected _requestedEvent: FrigateEvent | null = null;
// Event actually being shown to the user. This may be different from
// _requestedEvent when no particular event is requested (e.g. most recent) --
// in that case the requestedEvent will be null, but _eventBeingShown will be
// the actual event shown.
protected _eventBeingShown: FrigateEvent | null = null;
// Whether or not there is an active clip being played.
protected _clipPlaying = false;
@@ -316,14 +331,24 @@ export class FrigateCard extends LitElement {
}
this.config = config;
this._setViewModeToDefault();
this._changeView();
}
// 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;
protected _changeView(
view?: FrigateCardView | undefined,
event?: FrigateEvent | undefined,
): void {
if (view !== undefined) {
this._viewMode = view;
} else {
this._viewMode = this.config.view_default;
if (['clip', 'snapshot'].includes(this.config.view_default)) {
this._requestedEvent = null;
}
}
this._eventBeingShown = null;
if (event !== undefined) {
this._requestedEvent = event;
}
}
@@ -460,9 +485,7 @@ export class FrigateCard extends LitElement {
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';
this._changeView(want_clips ? 'clip' : 'snapshot', event);
}}
/>
</div>
@@ -534,24 +557,26 @@ export class FrigateCard extends LitElement {
protected _menuActionHandler(name: string): void {
switch (name) {
case 'default':
this._controlVideos({ stop: true, control_clip: true });
this._controlVideos({ stop: true, control_live: true });
this._changeView();
break;
case 'live':
this._controlVideos({ stop: true, control_clip: true });
this._controlVideos({ stop: false, control_live: true });
this._viewMode = name;
this._heading = null;
this._changeView(name);
break;
case 'clips':
this._controlVideos({ stop: true, control_live: true });
this._viewMode = name;
this._heading = null;
this._changeView(name);
break;
case 'snapshots':
this._controlVideos({ stop: true, control_clip: true, control_live: true });
this._viewMode = name;
this._heading = null;
this._changeView(name);
break;
case 'frigate-ui':
window.open(this.config.frigate_url);
window.open(this._getFrigateURLFromContext());
break;
case 'motion':
if (this.config.motion_entity) {
@@ -563,6 +588,13 @@ export class FrigateCard extends LitElement {
}
}
protected _getFrigateURLFromContext(): string {
if (this._eventBeingShown) {
return `${this.config.frigate_url}/events/${this._eventBeingShown.id}`;
}
return `${this.config.frigate_url}/cameras/${this.config.frigate_camera_name}`;
}
protected _getClipURLFromEvent(event: FrigateEvent): string | null {
if (!event.has_clip) {
return null;
@@ -581,8 +613,8 @@ export class FrigateCard extends LitElement {
protected async _renderClipPlayer(): Promise<TemplateResult> {
let event: FrigateEvent, events: FrigateGetEventsResponse;
let autoplay = true;
if (this._viewEvent) {
event = this._viewEvent;
if (this._requestedEvent) {
event = this._requestedEvent;
} else {
try {
events = await this._getEvents({
@@ -612,29 +644,32 @@ export class FrigateCard extends LitElement {
return this._renderAttentionIcon('mdi:camera-off', 'No recent clip');
}
this._heading = this._getEventTitle(event);
this._eventBeingShown = event;
return html` <video
class="frigate-card-viewer"
muted
controls
@play=${() => {
this._clipPlaying = true;
}}
@pause=${() => {
this._clipPlaying = false;
}}
?autoplay="${autoplay}"
>
<source src="${clipURL}" type="video/mp4" />
</video>`;
return html`
<video
class="frigate-card-viewer"
muted
controls
playsinline
@play=${() => {
this._clipPlaying = true;
}}
@pause=${() => {
this._clipPlaying = false;
}}
?autoplay="${autoplay}"
>
<source src="${clipURL}" type="video/mp4" />
</video>
`;
}
// Render a snapshot.
protected async _renderSnapshotViewer(): Promise<TemplateResult> {
let event: FrigateEvent, events: FrigateGetEventsResponse;
if (this._viewEvent) {
event = this._viewEvent;
if (this._requestedEvent) {
event = this._requestedEvent;
} else {
try {
events = await this._getEvents({
@@ -657,15 +692,14 @@ export class FrigateCard extends LitElement {
return this._renderAttentionIcon('mdi:filmstrip-off', 'No recent snapshots');
}
this._heading = this._getEventTitle(event);
this._eventBeingShown = event;
return html` <img
class="frigate-card-viewer"
src="${snapshotURL}"
@click=${() => {
if (event.has_clip) {
this._viewEvent = event;
this._viewMode = 'clip';
this._changeView('clip', event);
}
}}
/>`;
@@ -679,16 +713,13 @@ export class FrigateCard extends LitElement {
return this._renderAttentionIcon('mdi:camera-off', 'No live camera');
}
if (this._webrtcElement) {
return html` <div class=${this._viewMode == 'live' ? 'visible' : 'invisible'}>
${this._webrtcElement}
</div>`;
return html`${this._webrtcElement}`;
}
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>`;
}
@@ -703,10 +734,22 @@ export class FrigateCard extends LitElement {
}
this._interactionTimerID = window.setTimeout(() => {
this._interactionTimerID = null;
this._setViewModeToDefault();
this._changeView();
}, this.config.view_timeout * 1000);
}
protected _renderMenu(): TemplateResult | void {
return html`
<frigate-card-menu
id="${FrigateCardMenu.FRIGATE_CARD_MENU_ID}"
.motionEntity=${this.config.motion_entity}
.hass=${this._hass}
.actionCallback=${this._menuActionHandler.bind(this)}
.menuMode=${this.config.menu_mode}
></frigate-card-menu>
`;
}
// Render the call (master render method).
protected render(): TemplateResult | void {
if (this.config.show_warning) {
@@ -715,47 +758,35 @@ export class FrigateCard extends LitElement {
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
id="${FrigateCardMenu.FRIGATE_CARD_MENU_ID}"
.motionEntity=${this.config.motion_entity}
.hass=${this._hass}
.actionCallback=${this._menuActionHandler.bind(this)}
.heading=${this._heading}
></frigate-card-menu>
</ha-card>`;
return html` <ha-card @click=${this._interactionHandler}>
${this.config.menu_mode != 'below' ? this._renderMenu() : ''}
<div class="frigate-card-contents">
${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._viewMode == 'live'
? html`<div class="frigate-card-viewer">${this._renderLiveViewer()}</div>`
: ``}
</div>
${this.config.menu_mode == 'below' ? this._renderMenu() : ''}
</ha-card>`;
}
// Show a warning card.
src/types.ts
+10
View File
@@ -24,6 +24,15 @@ export const FRIGATE_CARD_VIEWS = [
] as const;
export type FrigateCardView = typeof FRIGATE_CARD_VIEWS[number];
export const FRIGATE_MENU_MODES = [
'hidden',
'overlay',
'above',
'below',
] as const;
export type FrigateMenuMode = typeof FRIGATE_MENU_MODES[number];
export const frigateCardConfigSchema = z.object({
camera_entity: z.string(),
motion_entity: z.string().optional(),
@@ -45,6 +54,7 @@ export const frigateCardConfigSchema = z.object({
label: z.string().optional(),
zone: z.string().optional(),
autoplay_clip: z.boolean().default(false),
menu_mode: z.enum(FRIGATE_MENU_MODES).optional().default('hidden'),
// Stock lovelace card config.
type: z.string(),