Expose mediaLoaded as a conditionState.

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
 ```
 </details>
 

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;
 }
 

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 {
         }
       </div>
       ${!renderMenuAbove ? this._renderMenu() : ''}
-      ${!this._message &&
+      ${this._getConfig().elements
-      (!this._view?.isAnyMediaView() || this._currentMediaShowInfo) &&
-      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
+          // top'.
-          // already loaded.
           html` <frigate-card-elements
             ${ref(this._refElements)}
             .hass=${this._hass}

src/types.ts

@@ -485,6 +485,7 @@ const frigateCardConditionSchema = z.object({
   view: z.string().array().optional(),
   fullscreen: z.boolean().optional(),
   camera: z.string().array().optional(),
+  mediaLoaded: z.boolean().optional(),
   state: stateConditions.optional(),
 });
 export type FrigateCardCondition = z.infer<typeof frigateCardConditionSchema>;