diff --git a/README.md b/README.md index df616e9e..a73429d8 100644 --- a/README.md +++ b/README.md @@ -709,6 +709,7 @@ All variables listed are under a `conditions:` section. | `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.| | `state` | A list of state conditions to compare with Home Assistant state. See below. | +| `mediaLoaded` | If `true` the condition is satisfied if there is media load**ED** (not load**ING**) in the card (e.g. a clip, snapshot or live view). This may be used to hide controls during media loading or when a message (not media) is being displayed. Note that if `true` this condition will never be satisfied for views that do not themselves load media directly (e.g. gallery).| See the [PTZ example below](#frigate-card-conditional-example) for a real-world example of how these conditions can be used. @@ -1592,7 +1593,7 @@ elements: scene.kitchen_tv_scene: icon: mdi:television title: TV! - # Show a pig icon if the card is in the live view, in fullscreen mode and light.office_main_lights is on. + # Show a pig icon if the card is in the live view, in fullscreen mode, light.office_main_lights is on and the media has been loaded. - type: custom:frigate-card-conditional elements: - type: icon @@ -1611,6 +1612,7 @@ elements: - entity: light.office_main_lights state: on state_not: off + mediaLoaded: true ``` diff --git a/src/card-condition.ts b/src/card-condition.ts index 086e9ebb..26f3a941 100644 --- a/src/card-condition.ts +++ b/src/card-condition.ts @@ -11,6 +11,7 @@ export interface ConditionState { fullscreen?: boolean; camera?: string; state?: HassEntities; + mediaLoaded?: boolean; } class ConditionStateRequestEvent extends Event { @@ -48,6 +49,10 @@ export function evaluateCondition( state.state[stateTest.entity].state !== stateTest.state_not))); } } + if (condition?.mediaLoaded !== undefined) { + result &&= + state.mediaLoaded !== undefined && condition.mediaLoaded == state.mediaLoaded; + } return result; } diff --git a/src/card.ts b/src/card.ts index 523f4cc8..e3a66b85 100644 --- a/src/card.ts +++ b/src/card.ts @@ -279,6 +279,7 @@ export class FrigateCard extends LitElement { fullscreen: screenfull.isEnabled && screenfull.isFullscreen, camera: this._view?.camera, state: this._hass?.states, + mediaLoaded: !!this._currentMediaShowInfo, }; // Update the components that need the new condition state. Passed directly @@ -1640,6 +1641,7 @@ export class FrigateCard extends LitElement { this._lastValidMediaShowInfo = this._currentMediaShowInfo = mediaShowInfo; // An update may be required to draw elements. + this._generateConditionState(); this.requestUpdate(); } @@ -1819,12 +1821,9 @@ export class FrigateCard extends LitElement { } ${!renderMenuAbove ? this._renderMenu() : ''} - ${!this._message && - (!this._view?.isAnyMediaView() || this._currentMediaShowInfo) && - this._getConfig().elements + ${this._getConfig().elements ? // Elements need to render after the main views so it can render 'on - // top', but only if the view is a non-media view or the media is - // already loaded. + // top'. html` ;