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

Fix issue with using expired token for camera image view.

Browse Source
This commit is contained in:
Dermot Duffy
2022-02-19 13:15:15 -08:00
parent 1a0a1a83c2
commit 3300f303c8
4 changed files with 132 additions and 59 deletions
Download Patch File Download Diff File Expand all files Collapse all files
README.md
+1 -1
View File
@@ -384,7 +384,7 @@ image:
| - | - | - | - |
| `mode` | `url` | :white_check_mark: | Mode of the the `image` [view](#views). Value must be one of `url` (to fetch an arbitrary image URL), `camera` (to show a still of the currently selected camera using either `camera_entity` or `webrtc_card.entity` in that order of precedence), or `screensaver` (to show an [embedded stock Frigate card logo](https://github.com/dermotduffy/frigate-hass-card/blob/main/src/images/frigate-bird-in-sky.jpg)). In either `url` or `camera` mode, the `screensaver` content is used as a fallback if a URL is not specified or cannot be derived. |
| `url` | | :white_check_mark: | A static image URL to be used when the `mode` is set to `url`. Note that a `_t=[timestsamp]` query parameter will be automatically added to all URLs such that the image will not be cached by the browser.|
| `refresh_seconds` | 0 | :white_check_mark: | The number of seconds after which to refresh the image. `0` implies no refreshing. |
| `refresh_seconds` | 0 | :white_check_mark: | The image will be refreshed at least every `refresh_seconds` (it may refresh more frequently, e.g. whenever Home Assistant updates its camera security token). `0` implies no refreshing. |
| `actions` | | :white_check_mark: | Actions to use for the `image` view. See [actions](#actions) below.|
### Dimension Options
src/cached-value-controller.ts
+73
View File
@@ -0,0 +1,73 @@
import { ReactiveController, ReactiveControllerHost } from 'lit';
export class CachedValueController<T> implements ReactiveController {
public value?: T;
protected _host: ReactiveControllerHost;
protected _timerSeconds: number;
protected _callback: () => T;
protected _timerID?: number;
constructor(host: ReactiveControllerHost, timerSeconds: number, callback: () => T) {
this._timerSeconds = timerSeconds;
this._callback = callback;
(this._host = host).addController(this);
}
/**
* Remove the controller for the host.
*/
public removeController(): void {
this._host.removeController(this);
}
/**
* Update the cached value (and reset the timer).
*/
public updateValue(): void {
this.value = this._callback();
this._setTimer();
}
/**
* Update the value and render it.
*/
protected _updateValueAndRender(): void {
this.updateValue();
this._host.requestUpdate();
}
/**
* Remove the timer.
*/
protected _removeTimer(): void {
clearInterval(this._timerID);
this._timerID = undefined;
}
/**
* Set the timer.
*/
protected _setTimer(): void {
clearInterval(this._timerID);
if (this._timerSeconds > 0) {
this._timerID = window.setInterval(() => {
this._updateValueAndRender();
}, this._timerSeconds * 1000);
}
}
/**
* Host has connected to the cache.
*/
hostConnected(): void {
this._updateValueAndRender();
}
/**
* Host has disconnected from the cache.
*/
hostDisconnected(): void {
this._removeTimer();
}
}
src/card.ts
+20 -13
View File
@@ -324,7 +324,11 @@ export class FrigateCard extends LitElement {
// Don't show `clips` button if there's no `camera_name` (e.g. non-Frigate
// cameras), or is birdseye.
if (this._getConfig().menu.buttons.clips && cameraConfig?.camera_name && cameraConfig?.camera_name !== 'birdseye') {
if (
this._getConfig().menu.buttons.clips &&
cameraConfig?.camera_name &&
cameraConfig?.camera_name !== 'birdseye'
) {
buttons.push({
type: 'custom:frigate-card-menu-icon',
title: localize('config.view.views.clips'),
@@ -337,7 +341,11 @@ export class FrigateCard extends LitElement {
// Don't show `snapshots` button if there's no `camera_name` (e.g. non-Frigate
// cameras), or is birdseye.
if (this._getConfig().menu.buttons.snapshots && cameraConfig?.camera_name && cameraConfig?.camera_name !== 'birdseye') {
if (
this._getConfig().menu.buttons.snapshots &&
cameraConfig?.camera_name &&
cameraConfig?.camera_name !== 'birdseye'
) {
buttons.push({
type: 'custom:frigate-card-menu-icon',
title: localize('config.view.views.snapshots'),
@@ -436,7 +444,7 @@ export class FrigateCard extends LitElement {
}
const id =
config.id ||
config.id ||
config.camera_entity ||
config.webrtc_card?.entity ||
config.camera_name;
@@ -678,12 +686,14 @@ export class FrigateCard extends LitElement {
}
/**
* Determine whether the card should be updated.
* Determine whether the element should be updated.
* @param changedProps The changed properties if any.
* @returns True if the card should be updated.
* @returns `true` if the element should be updated.
*/
protected shouldUpdate(changedProps: PropertyValues): boolean {
const oldHass = changedProps.get('_hass') as HomeAssistant | undefined;
let shouldUpdate = !oldHass || changedProps.size != 1;
if (oldHass) {
// Home Assistant pumps a lot of updates through. Re-rendering the card is
// necessary at times (e.g. to update the 'clip' view as new clips
@@ -703,19 +713,16 @@ export class FrigateCard extends LitElement {
// default. Note that as per the Lit lifecycle, the setting of the view
// itself will not trigger an *additional* re-render here.
this._changeView();
return true;
} else if (
shouldUpdateBasedOnHass(
shouldUpdate ||= true;
} else {
shouldUpdate ||= shouldUpdateBasedOnHass(
this._hass,
oldHass,
this._getConfig().view.render_entities || [],
)
) {
return true;
);
}
return false;
}
return true;
return shouldUpdate;
}
/**
src/components/image.ts
+38 -45
View File
@@ -1,62 +1,22 @@
import {
CSSResultGroup,
LitElement,
PropertyValues,
TemplateResult,
html,
unsafeCSS,
ReactiveController,
ReactiveControllerHost,
} from 'lit';
import { HomeAssistant } from 'custom-card-helpers';
import { customElement, property, state } from 'lit/decorators.js';
import { CachedValueController } from '../cached-value-controller.js';
import { CameraConfig, ImageViewConfig } from '../types.js';
import { View } from '../view.js';
import { dispatchMediaShowEvent } from '../common.js';
import { dispatchMediaShowEvent, shouldUpdateBasedOnHass } from '../common.js';
import defaultImage from '../images/frigate-bird-in-sky.jpg';
import imageStyle from '../scss/image.scss';
export class CachedValueController<T> implements ReactiveController {
public value?: T;
protected _host: ReactiveControllerHost;
protected _timerSeconds: number;
protected _callback: () => T;
protected _timerID?: number;
constructor(host: ReactiveControllerHost, timerSeconds: number, callback: () => T) {
this._timerSeconds = timerSeconds;
this._callback = callback;
(this._host = host).addController(this);
}
public removeController(): void {
this._host.removeController(this);
}
protected _updateValue(): void {
this.value = this._callback();
this._host.requestUpdate();
}
hostConnected(): void {
this._updateValue();
// Start a timer when the host is connected
if (this._timerSeconds > 0) {
this._timerID = window.setInterval(() => {
this._updateValue();
}, this._timerSeconds * 1000);
}
}
hostDisconnected(): void {
// Clear the timer when the host is disconnected
clearInterval(this._timerID);
this._timerID = undefined;
}
}
@customElement('frigate-card-image')
export class FrigateCardImage extends LitElement {
@property({ attribute: false })
@@ -73,6 +33,9 @@ export class FrigateCardImage extends LitElement {
protected _cachedValueController?: CachedValueController<string>;
/**
* Set the image configuration.
*/
set imageConfig(imageConfig: ImageViewConfig) {
this._imageConfig = imageConfig;
if (this._cachedValueController) {
@@ -85,6 +48,37 @@ export class FrigateCardImage extends LitElement {
);
}
/**
* Get the camera entity for the current camera configuration.
* @returns The entity or undefined if no camera entity is available.
*/
protected _getCameraEntity(): string | undefined {
return this.cameraConfig?.camera_entity || this.cameraConfig?.webrtc_card?.entity;
}
/**
* Determine whether the element should be updated.
* @param changedProps The changed properties if any.
* @returns `true` if the element should be updated.
*/
protected shouldUpdate(changedProps: PropertyValues): boolean {
const oldHass = changedProps.get('hass') as HomeAssistant | undefined;
let shouldUpdate = !oldHass || changedProps.size != 1;
// Image needs to update if the image view is in camera mode and the camera
// entity changes, as this could be a security token change.
if (oldHass && this._imageConfig?.mode === 'camera') {
const cameraEntity = this._getCameraEntity();
if (
shouldUpdateBasedOnHass(this.hass, oldHass, cameraEntity ? [cameraEntity] : [])
) {
shouldUpdate ||= true;
this._cachedValueController?.updateValue();
}
}
return shouldUpdate;
}
/**
* Build a working absolute image URL that the browser will not cache.
* @param url An input URL (may be relative to document origin)
@@ -100,8 +94,7 @@ export class FrigateCardImage extends LitElement {
if (this._imageConfig?.mode === 'url' && this._imageConfig?.url) {
return this._buildImageURL(this._imageConfig.url);
} else if (this.hass && this._imageConfig?.mode === 'camera') {
const entity =
this.cameraConfig?.camera_entity || this.cameraConfig?.webrtc_card?.entity;
const entity = this._getCameraEntity();
if (entity) {
const state = this.hass.states[entity];
if (state && state.attributes.entity_picture) {