-
**Note**: WebRTC must be installed and configured separately (see [details](https://github.com/AlexxIT/WebRTC)) before it can be used with this card.
#### Specifying The WebRTC Camera
WebRTC does **not** support use of Frigate-provided camera entities, as it
-requires an RTSP stream which Frigate does not provide. There are two ways to
-specify the WebRTC source camera:
+requires an RTSP stream which Frigate does not currently provide. There are two
+ways to specify the WebRTC source camera:
* Manual setup of separate RTSP camera entities in Home Assistant ([see
example](https://www.home-assistant.io/integrations/generic/#live-stream)).
These entities will then be available for selection in the GUI card editor for
- the Frigate card under the WebRTC options, or can be manually specified with a
- `webrtc.entity` option in the YAML configuration for this card:
+ the camera, or can be manually specified with a `webrtc.entity` option under
+ that particular cameras configuration:
```yaml
-[rest of Frigate card configuration]
-live:
- webrtc:
- entity: 'camera.front_door_rstp`
+cameras:
+ - webrtc:
+ entity: 'camera.front_door_rstp`
```
* OR manually entering the WebRTC camera URL parameter in the GUI card editor,
or configuring the `url` parameter as part of a manual Frigate card
- configuration, like the following example:
+ configuration, as illustrated in the following example:
```yaml
-[rest of Frigate card configuration]
-live:
- webrtc:
- url: 'rtsp://USERNAME:PASSWORD@CAMERA:554/RTSP_PATH'
+cameras:
+ - webrtc:
+ url: 'rtsp://USERNAME:PASSWORD@CAMERA:554/RTSP_PATH'
```
-See [WebRTC configuration](https://github.com/AlexxIT/WebRTC#configuration) for full configuration options.
+Other WebRTC options may be specified under the `live` section, like so:
+
+```yaml
+live:
+ webrtc:
+ ui: true
+```
+
+See [the WebRTC live configuration](#webrtc-live-configuration) above, and the
+[external WebRTC configuration
+documentation](https://github.com/AlexxIT/WebRTC#configuration) for full
+configuration options that can be used here.
+
+
+
+## Frigate Card Conditions
+
+Conditions are used to apply certain configuration depending on runtime evaluations. Conditions may be used in `elements` configuration (as part of a `custom:frigate-card-conditional` element) or the `overrides` configuration (see below for both).
+
+All variables listed are under a `conditions:` section.
+
+| Condition | Description |
+| ------------- | --------------------------------------------- |
+| `view` | A list of [views](#views) in which this condition is satified (e.g. `clips`) |
+| `camera` | A list of camera ids in which this condition is satisfied. See [camera IDs](#camera-ids).|
+| `fullscreen` | If `true` the condition is satisfied if the card is in fullscreen mode. If `false` the condition is satisfied if the card is **NOT** in fullscreen mode.|
+
+See the [PTZ example below](#frigate-card-conditional-example) for a real-world example of how these conditions can be used.
## Picture Elements / Menu Customizations
@@ -421,9 +519,10 @@ Parameters for the `custom:frigate-card-menu-submenu` element are identical to t
| Parameter | Default | Description |
| - | - | - |
| `title` | | An optional title to display. |
-| `icon` | | An optional item icon to display. |
+| `icon` | | An optional item icon to display, e.g. `mdi:car` |
| `entity` | | An optional Home Assistant entity from which title, icon and style can be automatically computed. |
| `state_color` | `true` | Whether or not the title and icon should be stylized based on state. |
+| `selected` | `false` | Whether or not to show this item as selected. |
| `style` | | Position and style the element using CSS. |
| `tap_action`, `double_tap_action` or `hold_action` | | Standard [Home Assistant action configuration](https://www.home-assistant.io/lovelace/actions). |
@@ -438,21 +537,8 @@ Parameters for the `custom:frigate-card-conditional` element:
| Parameter | Description |
| ------------- | --------------------------------------------- |
| `type` | Must be `custom:frigate-card-conditional`. |
-| `conditions` | A set of conditions that must evaluate to true in order for the elements to be rendered. See below. |
`elements` | The elements to render. Can be any supported element, include additional condition or custom elements. |
-
-
-
-##### Frigate Card Conditions
-
-All variables listed are under a `conditions:` section.
-
-| Condition | Description |
-| ------------- | --------------------------------------------- |
-| `view` | A list of [views](#views) in which these elements should be rendered. |
-| `fullscreen` | If `true` the elements are only rendered if the card is in fullscreen mode. If `false` the elements are only rendered if the card is **NOT** in fullscreen mode.|
-
-See the [PTZ example below](#frigate-card-conditional-example) for a real-world example.
+| `conditions` | A set of conditions that must evaluate to true in order for the elements to be rendered. See [Frigate Card Conditions](#frigate-card-conditions). |
### Special Actions
@@ -469,7 +555,7 @@ See the [PTZ example below](#frigate-card-conditional-example) for a real-world
|`download`|Download the displayed media.|
|`frigate_ui`|Open the Frigate UI at the configured URL.|
|`fullscreen`|Toggle fullscreen.|
-
+|`camera_select`|Select a given camera. Takes a single additional `camera` parameter with the [camera ID](#camera-ids) of the camera to select.|
@@ -541,6 +627,13 @@ This card supports several menu configurations.
## Screenshots
+### Live Viewing of Multiple Cameras
+
+Scroll through your live cameras, or choose from a menu. Seamlessly supports
+cameras of different dimensions, and custom submenus per camera.
+
+
+
### Full Viewing Of Events
@@ -557,13 +650,13 @@ This card supports several menu configurations.
-## Card Editing
+### Card Editing
This card supports full editing via the Lovelace card editor. Additional arbitrary configuration for WebRTC may be specified in YAML mode.
-
+
-## Configurable Submenus
+### Configurable Submenus
This card supports fully configurable submenus.
@@ -571,6 +664,42 @@ This card supports fully configurable submenus.
## Examples
+### Basic cameras configuration
+
+
+
+
+
+Expand: Basic cameras configuration
+ +```yaml +type: custom:frigate-card +cameras: + - camera_entity: camera.sitting_room + - camera_entity: camera.front_door +``` +
+
+
### WebRTC
Expand: Different providers for a single camera
+ +Cameras can be repeated with different providers (note the required use of `id` +to provide a separate unambiguous way of referring to that camera, since the +`camera_entity` is shared between the two cameras). + +```yaml +type: custom:frigate-card +cameras: + - camera_entity: camera.front_door + live_provider: frigate-jsmpeg + title: Front Door (JSMPEG) + - camera_entity: camera.front_door + live_provider: webrtc + title: Front Door (WebRTC) + webrtc: + entity: camera.front_door_rtsp + id: front-door-webrtc +``` +
@@ -818,29 +947,6 @@ live:
```
-### Hiding The Menu In Certain Circumstances
-
-You can add conditions to the menu, which will hide the menu unless met.
-
-
-
-
### Configuring a submenu
@@ -877,27 +983,118 @@ elements:
+Expand: Hiding the menu
- -This example hides the menu unless the card is in fullscreen mode, and uses a card-wide action to enable fullscreen mode on `double_tap`: - -```yaml -[...] -view: - actions: - double_tap_action: - action: custom:frigate-card-action - frigate_card_action: fullscreen -menu: - conditions: - fullscreen: true -``` - -
+
+
+
+### Overriding card behavior
+
+You can override card configuration when certain [conditions](#frigate-card-conditions) are met.
+
+Expand: Custom submenus per camera
+ +This example shows submenus conditional on the camera selected. + +```yaml +[...] +elements: + - type: custom:frigate-card-conditional + conditions: + camera: + - camera.front_door + elements: + - type: custom:frigate-card-menu-submenu + icon: mdi:door + items: + - title: Front Door Lights + icon: mdi:lightbulb + entity: light.front_door_lights + tap_action: + action: toggle + - type: custom:frigate-card-conditional + conditions: + camera: + - camera.living_room + elements: + - type: custom:frigate-card-menu-submenu + icon: mdi:sofa + items: + - title: Living Room Lights + icon: mdi:lightbulb + entity: light.living_room_lights + tap_action: + action: toggle + - title: Living Room Lamp + icon: mdi:lightbulb + entity: light.living_room_lamp + tap_action: + action: toggle +``` + +
+
+
+Expand: Hiding the menu in fullscreen mode
+ +This example disables the menu unless the card is in fullscreen mode, and uses a +card-wide action to enable fullscreen mode on `double_tap`: + +```yaml +view: + actions: + double_tap_action: + action: custom:frigate-card-action + frigate_card_action: fullscreen +overrides: + - conditions: + fullscreen: true + overrides: + menu: + mode: none +``` + +
+
+
-## Card Refreshes / Updates
+## Card Refreshes
-Automated card refreshes / updates are minimized to avoid disruption to the
-user, in particular when media is playing. Three sets of flags govern when the
-card will automatically re-render in the absence of human interaction.
+Three sets of flags govern when the card will automatically re-render in the
+absence of human interaction.
The following table describes the behavior these 3 flags have.
### Card Update Truth Table
-| `view.timeout` | `view.update_force` | `view.update_entities` & `camera_entity` | Behavior |
+| `view.timeout` | `view.update_force` | `view.update_entities` | Behavior |
| :-: | :-: | :-: | - |
-| Unset or `0` | *(Any value)* | Unset | Card will not automatically re-render. |
-| Unset or `0` | `false` | *(Any entity)* | Card will reload **current** view when entity state changes, unless media is playing. |
-| Unset or `0` | `true` | *(Any entity)* | Card will reload **current** view when entity state changes. |
-| `X` seconds | `false` | Unset | Card will reload **default** view `X` seconds after human interaction stops, unless media is playing. |
-| `X` seconds | `false` | *(Any entity)* | Card will reload **default** view `X` seconds after human interaction stops and reload the **current** view when entity state changes -- in both cases unless media is playing. |
-| `X` seconds | `true` | Unset | Card will reload **default** view every `X` seconds. |
-| `X` seconds | `true` | *(Any entity)* | Card will reload **default** view every `X` seconds and reload the **current** view when entity state changes. |
+| Unset or `0` | *(Any value)* | Unset | Card will not automatically refresh. |
+| Unset or `0` | `false` | *(Any entity)* | Card will reload default view when entity state changes, unless media is playing. |
+| Unset or `0` | `true` | *(Any entity)* | Card will reload default view when entity state changes. |
+| `X` seconds | `false` | Unset | Card will reload default view `X` seconds after human interaction stops, unless media is playing. |
+| `X` seconds | `false` | *(Any entity)* | Card will reload default view `X` seconds after human interaction stops or when entity state changes -- in both cases unless media is playing. |
+| `X` seconds | `true` | Unset | Card will reload default view every `X` seconds. |
+| `X` seconds | `true` | *(Any entity)* | Card will reload default view every `X` seconds or when entity state changes. |
### Usecases For Automated Refreshes
@@ -910,9 +1107,7 @@ view:
```
* Using `clip` or `snapshot` as the default view (for the most recent clip or
snapshot respectively) and having the card automatically refresh (to fetch a
- newer clip/snapshot) when an entity state changes. A Frigate `camera_entity`
- is generally not sufficient for this since the Home Assistant state for
- Frigate camera entities does not change often. Instead, use the Frigate
+ newer clip/snapshot) when an entity state changes. Use the Frigate
binary_sensor for that camera (or any other entity at your discretion) to
trigger the update:
```yaml
diff --git a/images/camera-carousel.gif b/images/camera-carousel.gif
new file mode 100644
index 00000000..3d9f1651
Binary files /dev/null and b/images/camera-carousel.gif differ
diff --git a/images/editor.gif b/images/editor.gif
new file mode 100644
index 00000000..963a6d2a
Binary files /dev/null and b/images/editor.gif differ
diff --git a/images/editor.png b/images/editor.png
deleted file mode 100644
index 745eb35e..00000000
Binary files a/images/editor.png and /dev/null differ
diff --git a/package.json b/package.json
index 5a077cf0..8fb94131 100644
--- a/package.json
+++ b/package.json
@@ -16,15 +16,16 @@
"license": "MIT",
"dependencies": {
"@cycjimmy/jsmpeg-player": "^5.0.1",
+ "@lit-labs/task": "^1.0.0",
"@material/image-list": "^12.0.0",
+ "@material/mwc-menu": "^0.25.3",
"@material/rtl": "^13.0.0",
"custom-card-helpers": "^1.8.0",
"dayjs": "^1.10.7",
- "dlv": "github:developit/dlv",
- "dset": "^3.1.1",
"embla-carousel": "^5.0.1",
"home-assistant-js-websocket": "^5.11.1",
"lit": "^2.0.2",
+ "lodash-es": "^4.17.21",
"quick-lru": "github:sindresorhus/quick-lru",
"screenfull": "^5.1.0",
"zod": "^3.11.6"
@@ -35,6 +36,7 @@
"@babel/plugin-proposal-decorators": "^7.15.8",
"@rollup/plugin-image": "^2.1.1",
"@rollup/plugin-json": "^4.1.0",
+ "@types/lodash-es": "^4.17.5",
"@typescript-eslint/eslint-plugin": "^4.33.0",
"@typescript-eslint/parser": "^4.33.0",
"eslint": "^7.32.0",
diff --git a/rollup.config.js b/rollup.config.js
index f75ade85..58bfaa3c 100644
--- a/rollup.config.js
+++ b/rollup.config.js
@@ -41,7 +41,7 @@ const plugins = [
exclude: 'node_modules/**',
}),
dev && serve(serveopts),
- !dev && terser(),
+ //!dev && terser(),
];
export default [
diff --git a/src/action-handler-directive.ts b/src/action-handler-directive.ts
index ccd8f904..cc281235 100644
--- a/src/action-handler-directive.ts
+++ b/src/action-handler-directive.ts
@@ -15,7 +15,7 @@ interface ActionHandler extends HTMLElement {
bind(element: Element, options): void;
}
interface ActionHandlerElement extends HTMLElement {
- actionHandler?: boolean;
+ actionHandlerOptions?: ActionHandlerOptions;
}
declare global {
@@ -25,7 +25,7 @@ declare global {
}
class ActionHandler extends HTMLElement implements ActionHandler {
- public holdTime = 500;
+ public holdTime = 400;
// eslint-disable-next-line @typescript-eslint/no-explicit-any
public ripple: any;
@@ -78,10 +78,12 @@ class ActionHandler extends HTMLElement implements ActionHandler {
}
public bind(element: ActionHandlerElement, options): void {
- if (element.actionHandler) {
+ if (element.actionHandlerOptions) {
+ // Reset the options on an existing actionHandler.
+ element.actionHandlerOptions = options;
return;
}
- element.actionHandler = true;
+ element.actionHandlerOptions = options;
element.addEventListener('contextmenu', (ev: Event) => {
const e = ev || window.event;
@@ -97,6 +99,7 @@ class ActionHandler extends HTMLElement implements ActionHandler {
});
const start = (ev: Event): void => {
+ const options = element.actionHandlerOptions;
let x;
let y;
if ((ev as TouchEvent).touches) {
@@ -107,7 +110,7 @@ class ActionHandler extends HTMLElement implements ActionHandler {
y = (ev as MouseEvent).pageY;
}
- if (options.hasHold) {
+ if (options?.hasHold) {
this.held = false;
this.timer = window.setTimeout(() => {
this.startAnimation(x, y);
@@ -117,21 +120,22 @@ class ActionHandler extends HTMLElement implements ActionHandler {
};
const end = (ev: Event): void => {
+ const options = element.actionHandlerOptions;
if (['touchend', 'touchcancel'].includes(ev.type)
// This action handler by default relies on synthetic click events for
// touch devices, in order to ensure that embedded cards (e.g. WebRTC)
// can use stock click handlers. The exception is for hold events.
- && !(options.hasHold && this.held)) {
+ && !(options?.hasHold && this.held)) {
return;
}
- if (options.hasHold) {
+ if (options?.hasHold) {
clearTimeout(this.timer);
this.stopAnimation();
this.timer = undefined;
}
- if (options.hasHold && this.held) {
+ if (options?.hasHold && this.held) {
fireEvent(element, 'action', { action: 'hold' });
- } else if (options.hasDoubleClick) {
+ } else if (options?.hasDoubleClick) {
if (
(ev.type === 'click' && (ev as MouseEvent).detail < 2) ||
!this.dblClickTimeout
diff --git a/src/browse-media-util.ts b/src/browse-media-util.ts
index d635ca1f..336dcc1c 100644
--- a/src/browse-media-util.ts
+++ b/src/browse-media-util.ts
@@ -1,11 +1,22 @@
-import type { BrowseMediaQueryParameters, BrowseMediaSource, ExtendedHomeAssistant } from './types.js';
import { HomeAssistant } from 'custom-card-helpers';
-import { homeAssistantWSRequest } from './common.js';
-import { browseMediaSourceSchema } from './types.js';
-
import dayjs from 'dayjs';
import dayjs_custom_parse_format from 'dayjs/plugin/customParseFormat.js';
-
+
+import type {
+ BrowseMediaQueryParameters,
+ BrowseMediaSource,
+ CameraConfig,
+ ExtendedHomeAssistant,
+} from './types.js';
+import { View } from './view.js';
+import { browseMediaSourceSchema } from './types.js';
+import {
+ dispatchErrorMessageEvent,
+ dispatchMessageEvent,
+ homeAssistantWSRequest,
+} from './common.js';
+import { localize } from './localize/localize.js';
+
dayjs.extend(dayjs_custom_parse_format);
export class BrowseMediaUtil {
@@ -16,7 +27,8 @@ export class BrowseMediaUtil {
*/
static extractEventID(media: BrowseMediaSource): string | null {
const result = media.media_content_id.match(
- /^media-source:\/\/frigate\/.*\/(?Expand: Enable WebRTC UI for a particular camera
+ +This example enables WebRTC UI mode for a particular camera. + +```yaml +cameras: + - camera_entity: camera.office +[...] +overrides: + - conditions: + camera: + - camera.office + overrides: + live: + provider: webrtc + webrtc: + ui: true +``` + +
- ${this._frigateCameraName == undefined
- ? until(
- (async () => {
- this._frigateCameraName = await this._getFrigateCameraName();
- return this._render();
- })(),
- renderProgressIndicator(),
- )
- : this._render()}
+
+ ${this._getConfig().elements
+ ? // Always show elements to allow for custom menu items (etc.) to
+ // be present even if a particular view has an error.
+ html` {
+ this._addDynamicMenuButton(e.detail);
+ }}
+ @frigate-card:menu-remove=${(e) => {
+ this._removeDynamicMenuButton(e.detail);
+ }}
+ @frigate-card:condition-state-request=${(ev) => {
+ conditionStateRequestHandler(ev, this._conditionState);
+ }}
+ >
+ `
+ : ``}
+ ${this._cameras === undefined
+ ? until(
+ (async () => {
+ await this._loadCameras();
+ // Don't reset messages as errors may have been generated
+ // during the camera load.
+ this._changeView({ resetMessage: false });
+ return this._render();
+ })(),
+ renderProgressIndicator(),
+ )
+ : // Always want to call render even if there's a message, to
+ // ensure live preload is always present (even if not displayed).
+ this._render()}
+ ${
+ // Keep message rendering to last to show messages that may have
+ // been generated during the render.
+ this._message ? renderMessage(this._message) : ''
+ }
+
- ${this._message ? renderMessage(this._message) : ``}
- ${!this._message && this._view.is('image')
- ? html`
- `
- : ``}
- ${!this._message && this._view.isGalleryView()
- ? html`
- `
- : ``}
- ${!this._message && this._view.isViewerView()
- ? html`
- `
- : ``}
- ${
- // Note the subtle difference in condition below vs the other views in order
- // to always render the live view for live.preload mode.
- (!this._message && this._view.is('live')) || this.config.live.preload
- ? html`
-
-
- `
- : ``
- }
- ${this.config.elements
+ ${!this._message && this._view.is('image')
+ ? html`
+ `
+ : ``}
+ ${!this._message && this._view.isGalleryView()
+ ? html`
+ `
+ : ``}
+ ${!this._message && this._view.isViewerView()
+ ? html`
+ `
+ : ``}
+ ${
+ // Note: Subtle difference in condition below vs the other views in order
+ // to always render the live view for live.preload mode.
+
+ // Note: uses the baseConfig rather than the
+ // overriden config, as it does it's own overriding as part of the
+ // camera carousel.
+ this._getConfig().live.preload || (!this._message && this._view.is('live'))
? html`
- {
- this._addDynamicMenuButton(e.detail);
- }}
- @frigate-card:menu-remove=${(e) => {
- this._removeDynamicMenuButton(e.detail);
- }}
- @frigate-card:condition-state-request=${(ev) => {
- conditionStateRequestHandler(ev, this._conditionState);
- }}
+ .liveOverrides=${getOverridesByKey(this._getConfig().overrides, 'live')}
+ .cameras=${this._cameras}
+ .preloaded=${this._getConfig().live.preload && !this._view.is('live')}
+ class="${classMap(liveClasses)}"
>
-
+
`
- : ``}
-
+ : ``
+ }
`;
}
diff --git a/src/common.ts b/src/common.ts
index 4c15471f..46327533 100644
--- a/src/common.ts
+++ b/src/common.ts
@@ -2,11 +2,14 @@ import { HassEntity, MessageBase } from 'home-assistant-js-websocket';
import { HomeAssistant, stateIcon } from 'custom-card-helpers';
import { StyleInfo } from 'lit/directives/style-map';
import { ZodSchema, z } from 'zod';
+import { isEqual } from 'lodash-es';
import { localize } from './localize/localize.js';
import {
ActionType,
+ CameraConfig,
ExtendedHomeAssistant,
+ FrigateCardAction,
FrigateCardCustomAction,
frigateCardCustomActionSchema,
MediaShowInfo,
@@ -40,7 +43,7 @@ export async function homeAssistantWSRequest
+ {
+ this._nextPreviousHandler('previous');
+ }}
+ >
+
+
+ {
+ this._nextPreviousHandler('next');
+ }}
+ >
+
+
+ `;
+ }
+}
+
+@customElement('frigate-card-live-provider')
+export class FrigateCardLiveProvider extends LitElement {
+ @property({ attribute: false })
+ protected hass?: HomeAssistant & ExtendedHomeAssistant;
+
+ @property({ attribute: false })
+ protected cameraConfig?: CameraConfig;
+
+ @property({ attribute: false })
+ protected liveConfig?: LiveConfig;
+
+ // Whether or not to disable this entity. If `true`, no contents are rendered
+ // until this attribute is set to `false` (this is useful for lazy loading).
+ @property({ attribute: true, type: Boolean })
+ public disabled = false;
+
+ // Label that is used for ARIA support and as tooltip.
+ @property({ attribute: false })
+ public label = '';
+
+ protected _getResolvedProvider(): LiveProvider {
+ if (this.cameraConfig?.live_provider === 'auto') {
+ if (this.cameraConfig?.webrtc?.entity || this.cameraConfig?.webrtc?.url) {
+ return 'webrtc';
+ } else if (this.cameraConfig?.camera_entity) {
+ return 'frigate';
+ } else if (this.cameraConfig?.camera_name) {
+ return 'frigate-jsmpeg';
+ }
+ return frigateCardConfigDefaults.cameras.live_provider;
+ }
+ return (
+ this.cameraConfig?.live_provider || frigateCardConfigDefaults.cameras.live_provider
+ );
+ }
+
+ /**
+ * Master render method.
+ * @returns A rendered template.
+ */
+ protected render(): TemplateResult | void {
+ if (this.disabled || !this.hass || !this.liveConfig || !this.cameraConfig) {
+ return;
+ }
+
+ // Set title and ariaLabel from the provided label property.
+ this.title = this.label;
+ this.ariaLabel = this.label;
+
+ const provider = this._getResolvedProvider();
+
+ return html`
+ ${provider == 'frigate'
+ ? html`
- ${Array.from(this.buttons).map((button) => this._renderButton(button))}
+ ${buttons.map((button) => this._renderButton(button))}
`;
}
diff --git a/src/components/next-prev-control.ts b/src/components/next-prev-control.ts
index e9e3d68b..6c37f651 100644
--- a/src/components/next-prev-control.ts
+++ b/src/components/next-prev-control.ts
@@ -1,5 +1,5 @@
import { CSSResultGroup, LitElement, TemplateResult, html, unsafeCSS } from 'lit';
-import { customElement, property } from 'lit/decorators.js';
+import { customElement, property, state } from 'lit/decorators.js';
import { classMap } from 'lit/directives/class-map.js';
import { NextPreviousControlConfig } from '../types.js';
@@ -9,22 +9,32 @@ import controlStyle from '../scss/next-previous-control.scss';
@customElement('frigate-card-next-previous-control')
export class FrigateCardNextPreviousControl extends LitElement {
@property({ attribute: false })
- protected direction?: 'next' | 'previous';
+ public direction?: 'next' | 'previous';
- @property({ attribute: false })
set controlConfig(controlConfig: NextPreviousControlConfig | undefined) {
if (controlConfig?.size) {
this.style.setProperty('--frigate-card-next-prev-size', controlConfig.size);
}
this._controlConfig = controlConfig;
}
+
+ @state()
protected _controlConfig?: NextPreviousControlConfig;
@property({ attribute: false })
- protected thumbnail?: string;
+ public thumbnail?: string;
+
+ @property({ attribute: false })
+ public icon?: string;
+
+ @property({ attribute: true, type: Boolean })
+ public disabled = false;
+
+ // Label that is used for ARIA support and as tooltip.
+ @property() label = "";
protected render(): TemplateResult {
- if (!this._controlConfig || this._controlConfig.style == 'none') {
+ if (this.disabled || !this._controlConfig || this._controlConfig.style == 'none') {
return html``;
}
@@ -33,22 +43,24 @@ export class FrigateCardNextPreviousControl extends LitElement {
previous: this.direction == 'previous',
next: this.direction == 'next',
thumbnails: this._controlConfig.style == 'thumbnails',
- chevrons: this._controlConfig.style == 'chevrons',
- button: this._controlConfig.style == 'chevrons',
+ icons: ['chevrons', 'icons'].includes(this._controlConfig.style),
+ button: ['chevrons', 'icons'].includes(this._controlConfig.style),
};
- if (this._controlConfig.style == 'chevrons') {
- const icon = this.direction == 'previous' ? 'mdi:chevron-left' : 'mdi:chevron-right';
+ if (['chevrons', 'icons'].includes(this._controlConfig.style)) {
+ let icon: string;
+ if (this._controlConfig.style === 'chevrons') {
+ icon = this.direction == 'previous' ? 'mdi:chevron-left' : 'mdi:chevron-right';
+ } else {
+ if (!this.icon) {
+ return html``;
+ }
+ icon = this.icon
+ }
- // TODO: Upon a safe distance from the release of HA 2021.11 these
- // attributes can be removed from the
- ${neighbors && neighbors.previous
- ? html` {
- this._nextPreviousHandler('previous');
- }}
- > `
- : ``}
+ {
+ this._nextPreviousHandler('previous');
+ }}
+ >
- ${neighbors && neighbors.next
- ? html` {
- this._nextPreviousHandler('next');
- }}
- > `
- : ``}
+ {
+ this._nextPreviousHandler('next');
+ }}
+ >
`;
}
- /**
- * Fire a media show event when a slide is selected.
- */
- protected _selectSlideMediaShowHandler(): void {
- if (!this._carousel || !this.view) {
- return;
- }
-
- this._carousel.slidesInView(true).forEach((slideIndex) => {
- if (slideIndex in this._mediaShowInfo) {
- dispatchExistingMediaShowInfoAsEvent(this, this._mediaShowInfo[slideIndex]);
- }
- });
- }
-
- /**
- * Handle a media-show event that is generated by a child component, saving the
- * contents for future use when the relevant slide is shown.
- * @param slideIndex The relevant slide index.
- * @param event The media-show event from the child component.
- */
- protected _mediaShowEventHandler(
- slideIndex: number,
- event: CustomEvent
${this.view.isClipRelatedView()
- ? resolvedMedia?.mime_type.toLowerCase() == 'application/x-mpegurl'
- ? html`) =>
- this._mediaShowEventHandler(slideIndex, e)}
- >
- `
- : html``
- : html`
{
+ url=${ifDefined(lazyLoad ? undefined : resolvedMedia?.url)}
+ .hass=${this.hass}
+ @frigate-card:media-show=${(e: CustomEvent) =>
+ this._mediaShowEventHandler(slideIndex, e)}
+ >
+ `
+ : html` {
if (this._carousel?.clickAllowed()) {
this._findRelatedClipView(mediaToRender).then((view) => {
if (view) {
@@ -747,22 +711,19 @@ export class FrigateCardMediaCarousel extends FrigateCardCarousel {
}}
@load="${(e: Event) => {
if (
- this.viewerConfig &&
- (!this.viewerConfig.lazy_load ||
- this._slideHasBeenLazyLoaded[slideIndex])
+ // This handler will be called on the empty image (including
+ // an updated empty image that is the same dimensions large as
+ // the previously fully loaded image -- see the note on dummy
+ // images in media-carousel.ts). Here we need to only call the
+ // media load handler on a 'real' load.
+ !lazyLoad ||
+ this._slideHasBeenLazyLoaded[slideIndex]
) {
- this._mediaShowInfoHandler(slideIndex, createMediaShowInfo(e));
+ this._mediaLoadedHandler(slideIndex, createMediaShowInfo(e));
}
}}"
/>`}
`;
}
-
- /**
- * Get element styles.
- */
- static get styles(): CSSResultGroup {
- return [super.styles, unsafeCSS(mediaCarouselStyle)];
- }
}
diff --git a/src/config-mgmt.ts b/src/config-mgmt.ts
index d9691677..a80b9e1b 100644
--- a/src/config-mgmt.ts
+++ b/src/config-mgmt.ts
@@ -1,24 +1,29 @@
-import delve from 'dlv';
-import { dset } from 'dset';
+import { get, set } from 'lodash-es';
import {
+ CONF_CAMERAS,
+ CONF_CAMERAS_ARRAY_CAMERA_ENTITY,
+ CONF_CAMERAS_ARRAY_CAMERA_NAME,
+ CONF_CAMERAS_ARRAY_CLIENT_ID,
+ CONF_CAMERAS_ARRAY_LABEL,
+ CONF_CAMERAS_ARRAY_LIVE_PROVIDER,
+ CONF_CAMERAS_ARRAY_URL,
+ CONF_CAMERAS_ARRAY_WEBRTC_ENTITY,
+ CONF_CAMERAS_ARRAY_WEBRTC_URL,
+ CONF_CAMERAS_ARRAY_ZONE,
CONF_EVENT_VIEWER_AUTOPLAY_CLIP,
CONF_EVENT_VIEWER_CONTROLS_NEXT_PREVIOUS_SIZE,
CONF_EVENT_VIEWER_CONTROLS_NEXT_PREVIOUS_STYLE,
- CONF_FRIGATE_CAMERA_NAME,
- CONF_FRIGATE_CLIENT_ID,
- CONF_FRIGATE_LABEL,
- CONF_FRIGATE_URL,
- CONF_FRIGATE_ZONE,
CONF_IMAGE_SRC,
CONF_LIVE_PRELOAD,
- CONF_LIVE_PROVIDER,
+ CONF_MENU,
CONF_MENU_BUTTON_SIZE,
CONF_MENU_MODE,
+ CONF_OVERRIDES,
CONF_VIEW_DEFAULT,
CONF_VIEW_TIMEOUT,
CONF_VIEW_UPDATE_ENTITIES,
} from './const';
-import { RawFrigateCardConfig } from './types';
+import { RawFrigateCardConfig, RawFrigateCardConfigArray } from './types';
/**
* Set a configuration value.
@@ -26,12 +31,13 @@ import { RawFrigateCardConfig } from './types';
* @param key The key to the property to set.
* @param value The value to set.
*/
+
export const setConfigValue = (
obj: RawFrigateCardConfig,
- key: string,
+ keys: string | (string | number)[],
value: unknown,
): void => {
- dset(obj, key, value);
+ set(obj, keys, value);
};
/**
@@ -42,10 +48,10 @@ export const setConfigValue = (
*/
export const getConfigValue = (
obj: RawFrigateCardConfig,
- key: string,
+ keys: string | (string | number)[],
def?: unknown,
): unknown => {
- return delve(obj, key, def);
+ return get(obj, keys, def);
};
/**
@@ -93,19 +99,23 @@ export const isConfigUpgradeable = function (obj: RawFrigateCardConfig): boolean
/**
* Remove empty sections from a configuration.
* @param obj Configuration object.
+ * @returns `true` if the configuration was modified.
*/
-export const trimConfig = function (obj: RawFrigateCardConfig): void {
+export const trimConfig = function (obj: RawFrigateCardConfig): boolean {
const keys = Object.keys(obj);
+ let modified = false;
for (let i = 0; i < keys.length; i++) {
const key = keys[i];
if (typeof obj[key] === 'object' && obj[key] != null) {
- trimConfig(obj[key] as RawFrigateCardConfig);
+ modified ||= trimConfig(obj[key] as RawFrigateCardConfig);
if (!Object.keys(obj[key] as RawFrigateCardConfig).length) {
delete obj[key];
+ modified = true;
}
}
}
+ return modified;
};
/**
@@ -128,6 +138,42 @@ const isNotObject = function (value: unknown) {
/**
* Move a property from one location to another.
+ * @param obj The configuration object in which the property resides.
+ * @param oldPath The old property path.
+ * @param newPath The new property path.
+ * @param transform An optional transform for the value.
+ * @returns `true` if the configuration was modified.
+ */
+export const moveConfigValue = (
+ obj: RawFrigateCardConfig,
+ oldPath: string,
+ newPath: string,
+ transform?: (valueIn: unknown) => unknown,
+): boolean => {
+ let value = getConfigValue(obj, oldPath);
+ if (transform) {
+ value = transform(value);
+ }
+ if (typeof value !== 'undefined') {
+ deleteConfigValue(obj, oldPath);
+ setConfigValue(obj, newPath, value);
+ return true;
+ }
+ return false;
+};
+
+/**
+ * Given an array path, return a true path.
+ * @param path The array path (should have a '#').
+ * @param index The numeric array index to use.
+ * @returns The true config path.
+ */
+export const getArrayConfigPath = (path: string, index: number): string => {
+ return path.replace('#', `[${index.toString()}]`);
+};
+
+/**
+ * Upgrade by moving a property from one location to another.
* @param oldPath The old property path.
* @param newPath The new property path.
* @param transform An optional transform for the value.
@@ -139,29 +185,88 @@ const upgradeMoveTo = function (
transform?: (valueIn: unknown) => unknown,
): (obj: RawFrigateCardConfig) => boolean {
return function (obj: RawFrigateCardConfig): boolean {
- let value = getConfigValue(obj, oldPath);
- if (transform) {
- value = transform(value);
+ return moveConfigValue(obj, oldPath, newPath, transform);
+ };
+};
+
+/**
+ * Upgrade from a singular camera model to multiple.
+ * @param key A string key.
+ * @returns A safe key.
+ */
+const upgradeToMultipleCameras = (): ((obj: RawFrigateCardConfig) => boolean) => {
+ return function (obj: RawFrigateCardConfig): boolean {
+ let modified = false;
+ const cameras = getConfigValue(obj, CONF_CAMERAS) as RawFrigateCardConfigArray;
+
+ // Only do an upgrade if the cameras section does not exist.
+ if (cameras !== undefined) {
+ return false;
}
- if (typeof value !== 'undefined') {
- deleteConfigValue(obj, oldPath);
- setConfigValue(obj, newPath, value);
- return true;
+
+ const imports = {
+ camera_entity: CONF_CAMERAS_ARRAY_CAMERA_ENTITY,
+ 'frigate.camera_name': CONF_CAMERAS_ARRAY_CAMERA_NAME,
+ 'frigate.client_id': CONF_CAMERAS_ARRAY_CLIENT_ID,
+ 'frigate.label': CONF_CAMERAS_ARRAY_LABEL,
+ 'frigate.url': CONF_CAMERAS_ARRAY_URL,
+ 'frigate.zone': CONF_CAMERAS_ARRAY_ZONE,
+ 'live.webrtc.entity': CONF_CAMERAS_ARRAY_WEBRTC_ENTITY,
+ 'live.webrtc.url': CONF_CAMERAS_ARRAY_WEBRTC_URL,
+ 'live.provider': CONF_CAMERAS_ARRAY_LIVE_PROVIDER,
+ };
+ Object.keys(imports).forEach((key) => {
+ modified =
+ moveConfigValue(obj, key, getArrayConfigPath(imports[key], 0)) || modified;
+ });
+ return modified;
+ };
+};
+
+/**
+ * Upgrade from a condition on the menu (to allow rendering) to a menu mode
+ * override instead.
+ * @param key A string key.
+ * @returns A safe key.
+ */
+const updateMenuConditionToMenuOverride = (): ((
+ obj: RawFrigateCardConfig,
+) => boolean) => {
+ return function (obj: RawFrigateCardConfig): boolean {
+ const menuConditions = getConfigValue(
+ obj,
+ `${CONF_MENU}.conditions`,
+ ) as RawFrigateCardConfig;
+
+ if (menuConditions === undefined) {
+ return false;
}
- return false;
+
+ const overrides =
+ (getConfigValue(obj, `${CONF_OVERRIDES}`) as RawFrigateCardConfigArray) || [];
+ setConfigValue(obj, `${CONF_OVERRIDES}.[${overrides.length}]`, {
+ conditions: menuConditions,
+ overrides: {
+ menu: {
+ mode: 'none',
+ },
+ },
+ });
+ deleteConfigValue(obj, `${CONF_MENU}.conditions`);
+ return true;
};
};
const UPGRADES = [
// v1.2.1 -> v2.0.0
- upgradeMoveTo('frigate_url', CONF_FRIGATE_URL),
- upgradeMoveTo('frigate_client_id', CONF_FRIGATE_CLIENT_ID),
- upgradeMoveTo('frigate_camera_name', CONF_FRIGATE_CAMERA_NAME),
- upgradeMoveTo('label', CONF_FRIGATE_LABEL),
- upgradeMoveTo('zone', CONF_FRIGATE_ZONE),
+ upgradeMoveTo('frigate_url', 'frigate.url'),
+ upgradeMoveTo('frigate_client_id', 'frigate.client_id'),
+ upgradeMoveTo('frigate_camera_name', 'frigate.camera_name'),
+ upgradeMoveTo('label', 'frigate.label'),
+ upgradeMoveTo('zone', 'frigate.zone'),
upgradeMoveTo('view_default', CONF_VIEW_DEFAULT),
upgradeMoveTo('view_timeout', CONF_VIEW_TIMEOUT),
- upgradeMoveTo('live_provider', CONF_LIVE_PROVIDER),
+ upgradeMoveTo('live_provider', 'live.provider'),
upgradeMoveTo('live_preload', CONF_LIVE_PRELOAD),
upgradeMoveTo('webrtc', 'live.webrtc'),
upgradeMoveTo('autoplay_clip', CONF_EVENT_VIEWER_AUTOPLAY_CLIP),
@@ -174,4 +279,8 @@ const UPGRADES = [
// v2.0.0 -> v2.1.0
upgradeMoveTo('update_entities', CONF_VIEW_UPDATE_ENTITIES),
+
+ // v2.1.0 -> v3.0.0
+ upgradeToMultipleCameras(),
+ updateMenuConditionToMenuOverride(),
];
diff --git a/src/const.ts b/src/const.ts
index 9a3cea39..a270cc8e 100644
--- a/src/const.ts
+++ b/src/const.ts
@@ -1,55 +1,82 @@
-export const CARD_VERSION = '2.1.0';
-export const REPO_URL = 'https://github.com/dermotduffy/frigate-hass-card';
-export const TROUBLESHOOTING_URL = `${REPO_URL}#troubleshooting`;
+export const CARD_VERSION = '2.1.0' as const;
+export const REPO_URL = 'https://github.com/dermotduffy/frigate-hass-card' as const;
+export const TROUBLESHOOTING_URL = `${REPO_URL}#troubleshooting` as const;
-export const CONF_CAMERA_ENTITY = 'camera_entity';
-export const CONF_FRIGATE_CAMERA_NAME = 'frigate.camera_name';
-export const CONF_FRIGATE_CLIENT_ID = 'frigate.client_id';
-export const CONF_FRIGATE_LABEL = 'frigate.label';
-export const CONF_FRIGATE_URL = 'frigate.url';
-export const CONF_FRIGATE_ZONE = 'frigate.zone';
+export const CONF_CAMERAS = 'cameras' as const;
+export const CONF_CAMERAS_ARRAY_CAMERA_ENTITY =
+ `${CONF_CAMERAS}.#.camera_entity` as const;
+export const CONF_CAMERAS_ARRAY_CAMERA_NAME = `${CONF_CAMERAS}.#.camera_name` as const;
+export const CONF_CAMERAS_ARRAY_CLIENT_ID = `${CONF_CAMERAS}.#.client_id` as const;
+export const CONF_CAMERAS_ARRAY_LABEL = `${CONF_CAMERAS}.#.label` as const;
+export const CONF_CAMERAS_ARRAY_URL = `${CONF_CAMERAS}.#.frigate_url` as const;
+export const CONF_CAMERAS_ARRAY_ZONE = `${CONF_CAMERAS}.#.zone` as const;
+export const CONF_CAMERAS_ARRAY_ID = `${CONF_CAMERAS}.#.id` as const;
+export const CONF_CAMERAS_ARRAY_TITLE = `${CONF_CAMERAS}.#.title` as const;
+export const CONF_CAMERAS_ARRAY_ICON = `${CONF_CAMERAS}.#.icon` as const;
+export const CONF_CAMERAS_ARRAY_WEBRTC_ENTITY =
+ `${CONF_CAMERAS}.#.webrtc.entity` as const;
+export const CONF_CAMERAS_ARRAY_WEBRTC_URL = `${CONF_CAMERAS}.#.webrtc.url` as const;
+export const CONF_CAMERAS_ARRAY_LIVE_PROVIDER = `${CONF_CAMERAS}.#.live_provider` as const;
-export const CONF_VIEW_DEFAULT = 'view.default';
-export const CONF_VIEW_TIMEOUT = 'view.timeout';
-export const CONF_VIEW_UPDATE_FORCE = 'view.update_force';
-export const CONF_VIEW_UPDATE_ENTITIES = 'view.update_entities';
+export const CONF_VIEW = 'view' as const;
+export const CONF_VIEW_DEFAULT = `${CONF_VIEW}.default` as const;
+export const CONF_VIEW_TIMEOUT = `${CONF_VIEW}.timeout` as const;
+export const CONF_VIEW_UPDATE_FORCE = `${CONF_VIEW}.update_force` as const;
+export const CONF_VIEW_UPDATE_ENTITIES = `${CONF_VIEW}.update_entities` as const;
-export const CONF_EVENT_VIEWER_AUTOPLAY_CLIP = 'event_viewer.autoplay_clip';
-export const CONF_EVENT_VIEWER_DRAGGABLE = 'event_viewer.draggable';
-export const CONF_EVENT_VIEWER_LAZY_LOAD = 'event_viewer.lazy_load';
+export const CONF_EVENT_VIEWER = 'event_viewer' as const;
+export const CONF_EVENT_VIEWER_AUTOPLAY_CLIP =
+ `${CONF_EVENT_VIEWER}.autoplay_clip` as const;
+export const CONF_EVENT_VIEWER_DRAGGABLE = `${CONF_EVENT_VIEWER}.draggable` as const;
+export const CONF_EVENT_VIEWER_LAZY_LOAD = `${CONF_EVENT_VIEWER}.lazy_load` as const;
export const CONF_EVENT_VIEWER_CONTROLS_NEXT_PREVIOUS_STYLE =
- 'event_viewer.controls.next_previous.style';
+ `${CONF_EVENT_VIEWER}.controls.next_previous.style` as const;
export const CONF_EVENT_VIEWER_CONTROLS_NEXT_PREVIOUS_SIZE =
- 'event_viewer.controls.next_previous.size';
+ `${CONF_EVENT_VIEWER}.controls.next_previous.size` as const;
export const CONF_EVENT_VIEWER_CONTROLS_THUMBNAILS_MODE =
- 'event_viewer.controls.thumbnails.mode';
+ `${CONF_EVENT_VIEWER}.controls.thumbnails.mode` as const;
export const CONF_EVENT_VIEWER_CONTROLS_THUMBNAILS_SIZE =
- 'event_viewer.controls.thumbnails.size';
-
-export const CONF_LIVE_PRELOAD = 'live.preload';
-export const CONF_LIVE_PROVIDER = 'live.provider';
-export const CONF_LIVE_WEBRTC_ENTITY = 'live.webrtc.entity';
-export const CONF_LIVE_WEBRTC_URL = 'live.webrtc.url';
+ `${CONF_EVENT_VIEWER}.controls.thumbnails.size` as const;
+export const CONF_LIVE = 'live' as const;
+export const CONF_LIVE_CONTROLS_NEXT_PREVIOUS_STYLE =
+ `${CONF_LIVE}.controls.next_previous.style` as const;
+export const CONF_LIVE_CONTROLS_NEXT_PREVIOUS_SIZE =
+ `${CONF_LIVE}.controls.next_previous.size` as const;
+export const CONF_LIVE_CONTROLS_THUMBNAILS_MEDIA =
+ `${CONF_LIVE}.controls.thumbnails.media` as const;
export const CONF_LIVE_CONTROLS_THUMBNAILS_MODE =
- 'live.controls.thumbnails.mode';
+ `${CONF_LIVE}.controls.thumbnails.mode` as const;
export const CONF_LIVE_CONTROLS_THUMBNAILS_SIZE =
- 'live.controls.thumbnails.size';
- export const CONF_LIVE_CONTROLS_THUMBNAILS_MEDIA =
- 'live.controls.thumbnails.media';
+ `${CONF_LIVE}.controls.thumbnails.size` as const;
+export const CONF_LIVE_DRAGGABLE = `${CONF_LIVE}.draggable` as const;
+export const CONF_LIVE_JSMPEG = `${CONF_LIVE}.jsmpeg` as const;
+export const CONF_LIVE_LAZY_LOAD = `${CONF_LIVE}.lazy_load` as const;
+export const CONF_LIVE_PRELOAD = `${CONF_LIVE}.preload` as const;
+export const CONF_LIVE_WEBRTC = `${CONF_LIVE}.webrtc` as const;
+export const CONF_LIVE_WEBRTC_ENTITY = `${CONF_LIVE_WEBRTC}.entity` as const;
+export const CONF_LIVE_WEBRTC_URL = `${CONF_LIVE_WEBRTC}.url` as const;
-export const CONF_IMAGE_SRC = 'image.src';
+export const CONF_IMAGE = 'image' as const;
+export const CONF_IMAGE_SRC = `${CONF_IMAGE}.src` as const;
-export const CONF_MENU_BUTTONS_FRIGATE = 'menu.buttons.frigate';
-export const CONF_MENU_BUTTONS_FRIGATE_UI = 'menu.buttons.frigate_ui';
-export const CONF_MENU_BUTTONS_FRIGATE_FULLSCREEN = 'menu.buttons.fullscreen';
-export const CONF_MENU_BUTTONS_FRIGATE_DOWNLOAD = 'menu.buttons.download';
-export const CONF_MENU_BUTTONS_LIVE = 'menu.buttons.live';
-export const CONF_MENU_BUTTONS_CLIPS = 'menu.buttons.clips';
-export const CONF_MENU_BUTTONS_SNAPSHOTS = 'menu.buttons.snapshots';
-export const CONF_MENU_BUTTONS_IMAGE = 'menu.buttons.image';
-export const CONF_MENU_BUTTON_SIZE = 'menu.button_size';
-export const CONF_MENU_MODE = 'menu.mode';
+export const CONF_MENU = 'menu' as const;
+export const CONF_MENU_BUTTONS_FRIGATE = `${CONF_MENU}.buttons.frigate` as const;
+export const CONF_MENU_BUTTONS_FRIGATE_UI = `${CONF_MENU}.buttons.frigate_ui` as const;
+export const CONF_MENU_BUTTONS_FRIGATE_FULLSCREEN =
+ `${CONF_MENU}.buttons.fullscreen` as const;
+export const CONF_MENU_BUTTONS_FRIGATE_DOWNLOAD =
+ `${CONF_MENU}.buttons.download` as const;
+export const CONF_MENU_BUTTONS_LIVE = `${CONF_MENU}.buttons.live` as const;
+export const CONF_MENU_BUTTONS_CLIPS = `${CONF_MENU}.buttons.clips` as const;
+export const CONF_MENU_BUTTONS_SNAPSHOTS = `${CONF_MENU}.buttons.snapshots` as const;
+export const CONF_MENU_BUTTONS_IMAGE = `${CONF_MENU}.buttons.image` as const;
+export const CONF_MENU_BUTTON_SIZE = `${CONF_MENU}.button_size` as const;
+export const CONF_MENU_MODE = `${CONF_MENU}.mode` as const;
-export const CONF_DIMENSIONS_ASPECT_RATIO = 'dimensions.aspect_ratio';
-export const CONF_DIMENSIONS_ASPECT_RATIO_MODE = 'dimensions.aspect_ratio_mode';
+export const CONF_DIMENSIONS = 'dimensions' as const;
+export const CONF_DIMENSIONS_ASPECT_RATIO = `${CONF_DIMENSIONS}.aspect_ratio` as const;
+export const CONF_DIMENSIONS_ASPECT_RATIO_MODE =
+ `${CONF_DIMENSIONS}.aspect_ratio_mode` as const;
+
+export const CONF_OVERRIDES = 'overrides' as const;
\ No newline at end of file
diff --git a/src/editor.ts b/src/editor.ts
index 7683c523..63c0d2a8 100644
--- a/src/editor.ts
+++ b/src/editor.ts
@@ -5,20 +5,26 @@ import { ifDefined } from 'lit/directives/if-defined.js';
import { HomeAssistant, LovelaceCardEditor, fireEvent } from 'custom-card-helpers';
import { localize } from './localize/localize.js';
-import { frigateCardConfigDefaults, RawFrigateCardConfig } from './types.js';
+import {
+ frigateCardConfigDefaults,
+ RawFrigateCardConfig,
+ RawFrigateCardConfigArray,
+} from './types.js';
-import frigate_card_editor_style from './scss/editor.scss';
import {
- copyConfig,
- deleteConfigValue,
- getConfigValue,
- isConfigUpgradeable,
- setConfigValue,
- trimConfig,
- upgradeConfig,
-} from './config-mgmt.js';
-import {
- CONF_CAMERA_ENTITY,
+ CONF_CAMERAS,
+ CONF_CAMERAS_ARRAY_CAMERA_ENTITY,
+ CONF_CAMERAS_ARRAY_CAMERA_NAME,
+ CONF_CAMERAS_ARRAY_CLIENT_ID,
+ CONF_CAMERAS_ARRAY_ICON,
+ CONF_CAMERAS_ARRAY_ID,
+ CONF_CAMERAS_ARRAY_LABEL,
+ CONF_CAMERAS_ARRAY_LIVE_PROVIDER,
+ CONF_CAMERAS_ARRAY_TITLE,
+ CONF_CAMERAS_ARRAY_URL,
+ CONF_CAMERAS_ARRAY_WEBRTC_ENTITY,
+ CONF_CAMERAS_ARRAY_WEBRTC_URL,
+ CONF_CAMERAS_ARRAY_ZONE,
CONF_DIMENSIONS_ASPECT_RATIO,
CONF_DIMENSIONS_ASPECT_RATIO_MODE,
CONF_EVENT_VIEWER_AUTOPLAY_CLIP,
@@ -28,19 +34,15 @@ import {
CONF_EVENT_VIEWER_CONTROLS_THUMBNAILS_SIZE,
CONF_EVENT_VIEWER_DRAGGABLE,
CONF_EVENT_VIEWER_LAZY_LOAD,
- CONF_FRIGATE_CAMERA_NAME,
- CONF_FRIGATE_CLIENT_ID,
- CONF_FRIGATE_LABEL,
- CONF_FRIGATE_URL,
- CONF_FRIGATE_ZONE,
CONF_IMAGE_SRC,
+ CONF_LIVE_CONTROLS_NEXT_PREVIOUS_SIZE,
+ CONF_LIVE_CONTROLS_NEXT_PREVIOUS_STYLE,
CONF_LIVE_CONTROLS_THUMBNAILS_MEDIA,
CONF_LIVE_CONTROLS_THUMBNAILS_MODE,
CONF_LIVE_CONTROLS_THUMBNAILS_SIZE,
+ CONF_LIVE_DRAGGABLE,
+ CONF_LIVE_LAZY_LOAD,
CONF_LIVE_PRELOAD,
- CONF_LIVE_PROVIDER,
- CONF_LIVE_WEBRTC_ENTITY,
- CONF_LIVE_WEBRTC_URL,
CONF_MENU_BUTTONS_CLIPS,
CONF_MENU_BUTTONS_FRIGATE,
CONF_MENU_BUTTONS_FRIGATE_DOWNLOAD,
@@ -55,6 +57,18 @@ import {
CONF_VIEW_TIMEOUT,
CONF_VIEW_UPDATE_FORCE,
} from './const.js';
+import { arrayMove, getEntityTitle, prettifyFrigateName } from './common.js';
+import {
+ copyConfig,
+ deleteConfigValue,
+ getArrayConfigPath,
+ getConfigValue,
+ isConfigUpgradeable,
+ setConfigValue,
+ upgradeConfig,
+} from './config-mgmt.js';
+
+import frigate_card_editor_style from './scss/editor.scss';
interface EditorOptionsSet {
icon: string;
@@ -66,29 +80,27 @@ interface EditorOptions {
[setName: string]: EditorOptionsSet;
}
-interface EditorOptionTarget {
+interface ConfigValueTarget {
configValue: string;
checked?: boolean;
value?: string;
}
+interface EditorCameraTarget {
+ cameraIndex: number;
+}
+
interface EditorOptionSetTarget {
optionSetName: string;
}
const options: EditorOptions = {
- basic: {
- icon: 'cog',
- name: localize('editor.basic'),
- secondary: localize('editor.basic_secondary'),
+ cameras: {
+ icon: 'video',
+ name: localize('editor.cameras'),
+ secondary: localize('editor.cameras_secondary'),
show: true,
},
- frigate: {
- icon: 'alpha-f-box',
- name: localize('editor.frigate'),
- secondary: localize('editor.frigate_secondary'),
- show: false,
- },
view: {
icon: 'eye',
name: localize('editor.view'),
@@ -135,6 +147,9 @@ export class FrigateCardEditor extends LitElement implements LovelaceCardEditor
protected _initialized = false;
protected _configUpgradeable = false;
+ @property({ attribute: false })
+ protected _expandedCameraIndex: number | null = null;
+
public setConfig(config: RawFrigateCardConfig): void {
// Note: This does not use Zod to parse the configuration, so it may be
// partially or completely invalid. It's more useful to have a partially
@@ -190,6 +205,20 @@ export class FrigateCardEditor extends LitElement implements LovelaceCardEditor
`;
}
+ /**
+ * Get a localized help label for a given config path.
+ * @param configPath The config path.
+ * @returns A localized label.
+ */
+ protected _getLabel(configPath: string): string {
+ // Strip out array indices from the path.
+ const path = configPath
+ .split('.')
+ .filter((e) => !e.match(/^\[[0-9]+\]$/))
+ .join('.');
+ return localize(`config.${path}`);
+ }
+
/**
* Render a dropdown menu.
* @param configPath The configuration path to set/read.
@@ -207,7 +236,7 @@ export class FrigateCardEditor extends LitElement implements LovelaceCardEditor
return html`
+
+ `;
+ }
+
+ /**
+ * Render a camera section.
+ * @param cameras The full array of cameras.
+ * @param cameraIndex The index (in the array) to render.
+ * @param cameraEntities The full list of camera entities.
+ * @param addNewCamera Whether or not this is a section to add a new non-existent camera.
+ * @returns A rendered template.
+ */
+ protected _renderCamera(
+ cameras: RawFrigateCardConfigArray,
+ cameraIndex: number,
+ cameraEntities: string[],
+ addNewCamera?: boolean,
+ ): TemplateResult | void {
+ const liveProviders = {
+ '': '',
+ auto: localize('config.cameras.live_providers.auto'),
+ frigate: localize('config.cameras.live_providers.frigate'),
+ 'frigate-jsmpeg': localize('config.cameras.live_providers.frigate-jsmpeg'),
+ webrtc: localize('config.cameras.live_providers.webrtc'),
+ } as const;
+
+ // Make a new config and update the editor with changes on it,
+ const modifyConfig = (func: (config: RawFrigateCardConfig) => boolean): void => {
+ if (this._config) {
+ const newConfig = copyConfig(this._config);
+ if (func(newConfig)) {
+ this._updateConfig(newConfig);
+ }
+ }
+ };
+
+ return html`
+ ${this._renderCameraHeader(cameraIndex, cameras[cameraIndex], addNewCamera)}
+ ${this._expandedCameraIndex === cameraIndex
+ ? html`
+
`
+ : ``}
+ `;
+ }
+
/**
* Render a string input field.
* @param configPath The configuration path to set/read.
@@ -239,12 +463,12 @@ export class FrigateCardEditor extends LitElement implements LovelaceCardEditor
return;
}
return html`
+
+ !addNewCamera &&
+ modifyConfig((config: RawFrigateCardConfig): boolean => {
+ if (Array.isArray(config.cameras) && cameraIndex > 0) {
+ arrayMove(config.cameras, cameraIndex, cameraIndex - 1);
+ this._expandedCameraIndex = cameraIndex - 1;
+ return true;
+ }
+ return false;
+ })}
+ >
+
+ = this._config.cameras.length - 1}
+ @click=${() =>
+ !addNewCamera &&
+ modifyConfig((config: RawFrigateCardConfig): boolean => {
+ if (
+ Array.isArray(config.cameras) &&
+ cameraIndex < config.cameras.length - 1
+ ) {
+ arrayMove(config.cameras, cameraIndex, cameraIndex + 1);
+ this._expandedCameraIndex = cameraIndex + 1;
+ return true;
+ }
+ return false;
+ })}
+ >
+
+ {
+ modifyConfig((config: RawFrigateCardConfig): boolean => {
+ if (Array.isArray(config.cameras)) {
+ config.cameras.splice(cameraIndex, 1);
+ this._expandedCameraIndex = null;
+ return true;
+ }
+ return false;
+ });
+ }}
+ >
+
+
+ ${this._renderDropdown(
+ getArrayConfigPath(CONF_CAMERAS_ARRAY_CAMERA_ENTITY, cameraIndex),
+ cameraEntities,
+ )}
+ ${this._renderStringInput(
+ getArrayConfigPath(CONF_CAMERAS_ARRAY_CAMERA_NAME, cameraIndex),
+ )}
+ ${this._renderDropdown(
+ getArrayConfigPath(CONF_CAMERAS_ARRAY_LIVE_PROVIDER, cameraIndex),
+ liveProviders)}
+ ${this._renderStringInput(
+ getArrayConfigPath(CONF_CAMERAS_ARRAY_URL, cameraIndex),
+ )}
+ ${this._renderStringInput(
+ getArrayConfigPath(CONF_CAMERAS_ARRAY_LABEL, cameraIndex),
+ )}
+ ${this._renderStringInput(
+ getArrayConfigPath(CONF_CAMERAS_ARRAY_ZONE, cameraIndex),
+ )}
+ ${this._renderStringInput(
+ getArrayConfigPath(CONF_CAMERAS_ARRAY_CLIENT_ID, cameraIndex),
+ )}
+ ${this._renderStringInput(
+ getArrayConfigPath(CONF_CAMERAS_ARRAY_TITLE, cameraIndex),
+ )}
+ ${this._renderStringInput(
+ getArrayConfigPath(CONF_CAMERAS_ARRAY_ICON, cameraIndex),
+ )}
+ ${this._renderStringInput(
+ getArrayConfigPath(CONF_CAMERAS_ARRAY_ID, cameraIndex),
+ )}
+ ${this._renderDropdown(
+ getArrayConfigPath(CONF_CAMERAS_ARRAY_WEBRTC_ENTITY, cameraIndex),
+ cameraEntities,
+ )}
+ ${this._renderStringInput(
+ getArrayConfigPath(CONF_CAMERAS_ARRAY_WEBRTC_URL, cameraIndex),
+ )}
+
@@ -365,10 +597,7 @@ export class FrigateCardEditor extends LitElement implements LovelaceCardEditor
if (this._config) {
const upgradedConfig = copyConfig(this._config);
upgradeConfig(upgradedConfig);
- this._config = upgradedConfig;
-
- fireEvent(this, 'config-changed', { config: this._config });
- this.requestUpdate();
+ this._updateConfig(upgradedConfig);
}
}}
>
@@ -378,25 +607,14 @@ export class FrigateCardEditor extends LitElement implements LovelaceCardEditor
` : html``}
` : html``}
- ${this._renderOptionSetHeader('basic')}
- ${options.basic.show
- ? html`
-
- ${this._renderDropdown(CONF_CAMERA_ENTITY, cameraEntities)}
-
- `
- : ''}
- ${this._renderOptionSetHeader('frigate')}
- ${options.frigate.show
- ? html`
-
- ${this._renderStringInput(CONF_FRIGATE_CAMERA_NAME)}
- ${this._renderStringInput(CONF_FRIGATE_URL)}
- ${this._renderStringInput(CONF_FRIGATE_LABEL)}
- ${this._renderStringInput(CONF_FRIGATE_ZONE)}
- ${this._renderStringInput(CONF_FRIGATE_CLIENT_ID)}
-
- `
+ ${this._renderOptionSetHeader('cameras')}
+ ${options.cameras.show
+ ? html`
+ ${cameras.map((_, index) =>
+ this._renderCamera(cameras, index, cameraEntities),
+ )}
+ ${this._renderCamera(cameras, cameras.length, cameraEntities, true)}
+
`
: ''}
${this._renderOptionSetHeader('view')}
${options.view.show
@@ -404,9 +622,7 @@ export class FrigateCardEditor extends LitElement implements LovelaceCardEditor
${this._renderDropdown(CONF_VIEW_DEFAULT, viewModes)}
${this._renderStringInput(CONF_VIEW_TIMEOUT, '[0-9]')}
- ${this._renderSwitch(
- CONF_VIEW_UPDATE_FORCE,
- defaults.view.update_force)}
+ ${this._renderSwitch(CONF_VIEW_UPDATE_FORCE, defaults.view.update_force)}
`
: ''}
@@ -464,9 +680,19 @@ export class FrigateCardEditor extends LitElement implements LovelaceCardEditor
? html`
${this._renderSwitch(CONF_LIVE_PRELOAD, defaults.live.preload)}
- ${this._renderDropdown(CONF_LIVE_PROVIDER, liveProviders)}
- ${this._renderDropdown(CONF_LIVE_WEBRTC_ENTITY, cameraEntities)}
- ${this._renderStringInput(CONF_LIVE_WEBRTC_URL)}
+ ${this._renderSwitch(
+ CONF_LIVE_DRAGGABLE,
+ defaults.live.draggable,
+ )}
+ ${this._renderSwitch(
+ CONF_LIVE_LAZY_LOAD,
+ defaults.live.lazy_load,
+ )}
+ ${this._renderDropdown(
+ CONF_LIVE_CONTROLS_NEXT_PREVIOUS_STYLE,
+ liveNextPreviousControlStyles,
+ )}
+ ${this._renderStringInput(CONF_LIVE_CONTROLS_NEXT_PREVIOUS_SIZE)}
${this._renderDropdown(
CONF_LIVE_CONTROLS_THUMBNAILS_MODE,
thumbnailModes,
@@ -541,6 +767,19 @@ export class FrigateCardEditor extends LitElement implements LovelaceCardEditor
this._helpers = await (window as any).loadCardHelpers();
}
+ /**
+ * Display/hide a camera section.
+ * @param ev The event triggering the change.
+ */
+ protected _toggleCameraHandler(ev: { target: EditorCameraTarget | null }): void {
+ if (ev && ev.target) {
+ this._expandedCameraIndex =
+ this._expandedCameraIndex == ev.target.cameraIndex
+ ? null
+ : ev.target.cameraIndex;
+ }
+ }
+
/**
* Handle a toggled set of options.
* @param ev The event triggering the change.
@@ -573,7 +812,7 @@ export class FrigateCardEditor extends LitElement implements LovelaceCardEditor
* @param ev Event triggering the change.
*/
protected _valueChangedHandler(ev: {
- target: (EditorOptionTarget & HTMLElement) | null;
+ target: (ConfigValueTarget & HTMLElement) | null;
}): void {
const target = ev.target;
if (!this._config || !this.hass || !target) {
@@ -591,22 +830,17 @@ export class FrigateCardEditor extends LitElement implements LovelaceCardEditor
return;
}
+ if (getConfigValue(this._config, key) === value) {
+ return;
+ }
+
const newConfig = copyConfig(this._config);
if (value === '' || typeof value === 'undefined') {
- // Don't delete empty properties that are from a dropdown menu. An empty
- // property in that context may just be a user-entered value that is not
- // in the valid choices in the dropdown. This probably won't end well for
- // the user anyway, but having the whole property deleted the moment they
- // press a key is very jarring.
- if (target.tagName != 'PAPER-DROPDOWN-MENU') {
- deleteConfigValue(newConfig, key);
- }
+ deleteConfigValue(newConfig, key);
} else {
setConfigValue(newConfig, key, value);
}
- trimConfig(newConfig);
- this._config = newConfig;
- fireEvent(this, 'config-changed', { config: this._config });
+ this._updateConfig(newConfig);
}
/**
diff --git a/src/localize/languages/en.json b/src/localize/languages/en.json
index f5270e82..f9f7b294 100644
--- a/src/localize/languages/en.json
+++ b/src/localize/languages/en.json
@@ -9,12 +9,26 @@
"no_clip": "No recent clip"
},
"config": {
- "camera_entity": "Camera Entity",
- "frigate": {
- "camera_name": "Frigate camera name (Optional, autodetected from entity)",
+ "cameras": {
+ "camera_entity": "Camera Entity",
+ "camera_name": "Frigate camera name (Autodetected from entity)",
"client_id": "Frigate client id (For >1 Frigate server)",
+ "id": "Unique id for this camera in this card",
"label": "Frigate label/object filter",
- "url": "Frigate server URL",
+ "frigate_url": "Frigate server URL",
+ "title": "Title for this camera (Autodetected from entity)",
+ "icon": "Icon for this camera (Autodetected from entity)",
+ "live_provider": "Live view provider for this camera",
+ "live_providers": {
+ "auto": "Automatic",
+ "frigate": "Frigate",
+ "frigate-jsmpeg": "Frigate JSMpeg",
+ "webrtc": "WebRTC"
+ },
+ "webrtc": {
+ "entity": "WebRTC Camera Entity (Not a Frigate camera)",
+ "url": "WebRTC Camera URL"
+ },
"zone": "Frigate zone"
},
"view": {
@@ -31,13 +45,13 @@
"update_force": "Force card updates (ignore media playing / interaction)"
},
"event_viewer": {
- "autoplay_clip": "Autoplay most recent clip (In 'clip' view)",
- "draggable": "Event viewer can be dragged/swiped",
- "lazy_load": "Lazily load event media",
+ "autoplay_clip": "Autoplay clips",
+ "draggable": "Event Viewer can be dragged/swiped",
+ "lazy_load": "Event Viewer media is lazily loaded in carousel",
"controls": {
"next_previous": {
- "style": "Event Viewer Next & Previous Control style",
- "size": "Event Viewer Next & Previous Control size (e.g. '48px')",
+ "style": "Event Viewer next & previous control style",
+ "size": "Event Viewer next & previous control size (e.g. '48px')",
"styles": {
"thumbnails": "Thumbnails",
"chevrons": "Chevrons",
@@ -56,18 +70,19 @@
}
},
"live": {
- "preload": "Preload live view",
- "provider": "Live view provider",
- "providers": {
- "frigate": "Frigate",
- "frigate-jsmpeg": "Frigate JSMpeg",
- "webrtc": "WebRTC"
- },
- "webrtc": {
- "entity": "WebRTC Camera Entity (Not a Frigate camera)",
- "url": "WebRTC Camera URL"
- },
+ "preload": "Preload live view in the background",
+ "draggable": "Live cameras view can be dragged/swiped",
+ "lazy_load": "Live cameras are lazily loaded in carousel",
"controls": {
+ "next_previous": {
+ "style": "Live view next & previous control style",
+ "size": "Live view next & previous control size (e.g. '48px')",
+ "styles": {
+ "chevrons": "Chevrons",
+ "icons": "Icons",
+ "none": "None"
+ }
+ },
"thumbnails": {
"mode": "Live thumbnails mode",
"size": "Live thumbnails size (e.g. '100px')",
@@ -87,7 +102,8 @@
"frigate": "Frigate menu / Default view",
"frigate_ui": "Frigate user Interface",
"fullscreen": "Fullscreen",
- "download": "Download event media"
+ "download": "Download event media",
+ "cameras": "Select camera"
},
"mode": "Menu mode",
"modes": {
@@ -120,10 +136,8 @@
}
},
"editor": {
- "basic": "Basic",
- "basic_secondary": "Options for most users",
- "frigate": "Frigate",
- "frigate_secondary": "Frigate server options",
+ "cameras": "Cameras",
+ "cameras_secondary": "What cameras to render on this card",
"view": "View",
"view_secondary": "What the card should show and how to show it",
"menu": "Menu",
@@ -138,7 +152,12 @@
"dimensions_secondary": "Dimensions & shape options",
"show_button": "Show button",
"upgrade": "Upgrade",
- "upgrade_available": "An automatic card configuration upgrade is available"
+ "upgrade_available": "An automatic card configuration upgrade is available",
+ "delete": "Delete",
+ "move_up": "Move up",
+ "move_down": "Move down",
+ "add_new_camera": "Add new camera",
+ "camera": "Camera"
},
"error": {
"empty_response": "Received empty response from Home Assistant for request",
@@ -151,12 +170,16 @@
"invalid_configuration": "Invalid configuration",
"invalid_configuration_no_hint": "No location hint available (bad or missing type?)",
"upgrade_available": "An automated card configuration upgrade is available, please visit the visual card editor",
- "missing_webrtc": "WebRTC component not found",
- "no_frigate_camera_name": "Cannot autodetect Frigate camera name, you need to either set camera_entity and / or frigate.camera_name",
+ "webrtc_missing": "WebRTC component not found",
+ "webrtc_reported_error": "WebRTC component reported an error",
+ "no_cameras": "No valid cameras found, you must configure at least one camera entry",
+ "no_camera_id": "Could not determine camera id for the following camera, may need to set 'id' parameter manually",
+ "duplicate_camera_id": "Duplicate Frigate camera id for the following camera, use the 'id' parameter to uniquely identify cameras",
"could_not_render_elements": "Could not render picture elements",
"invalid_elements_config": "Invalid picture elements configuration",
"jsmpeg_no_sign": "Could not retrieve or sign JSMPEG websocket path",
"jsmpeg_no_player": "Could not start JSMPEG player",
+ "no_camera_name": "Could not determine Frigate camera name for camera, please specify either 'camera_entity' or 'camera_name' for the following camera",
"download_no_media": "No media to download",
"download_no_event_id": "Could not extract Frigate event id from media",
"download_sign_failed": "Could not sign media URL for download"
diff --git a/src/patches/ha-camera-stream.ts b/src/patches/ha-camera-stream.ts
index 6aec018a..83408a43 100644
--- a/src/patches/ha-camera-stream.ts
+++ b/src/patches/ha-camera-stream.ts
@@ -48,10 +48,6 @@ customElements.whenDefined('ha-camera-stream').then(() => {
? html`
![]()
{
- // TODO: This block can be removed a safe distance from HA 2021.11.
- if (typeof this._elementResized != 'undefined') {
- this._elementResized();
- }
dispatchMediaShowEvent(this, e);
}}
.src=${typeof this._connected == 'undefined' || this._connected
diff --git a/src/patches/ha-hls-player.ts b/src/patches/ha-hls-player.ts
index 4e8cbce5..13648fec 100644
--- a/src/patches/ha-hls-player.ts
+++ b/src/patches/ha-hls-player.ts
@@ -10,6 +10,7 @@
// ====================================================================
import { TemplateResult, css, html } from 'lit';
+import { Ref, createRef, ref } from 'lit/directives/ref';
import { customElement } from 'lit/decorators.js';
import {
@@ -22,6 +23,17 @@ customElements.whenDefined('ha-hls-player').then(() => {
@customElement('frigate-card-ha-hls-player')
// eslint-disable-next-line @typescript-eslint/no-unused-vars
class FrigateCardHaHlsPlayer extends customElements.get('ha-hls-player') {
+ protected _videoRef: Ref = createRef();
+
+ /**
+ * Play the video.
+ */
+ public play(): void {
+ if (this._videoRef.value) {
+ this._videoRef.value.play();
+ }
+ }
+
// =====================================================================================
// Minor modifications from:
// - https://github.com/home-assistant/frontend/blob/dev/src/components/ha-hls-player.ts
@@ -29,15 +41,12 @@ customElements.whenDefined('ha-hls-player').then(() => {
protected render(): TemplateResult {
return html`