Fix cover more info state display (#15974)

src/data/cover.ts

@@ -3,7 +3,9 @@ import {
   HassEntityBase,
 } from "home-assistant-js-websocket";
 import { supportsFeature } from "../common/entity/supports-feature";
+import { blankBeforePercent } from "../common/translations/blank_before_percent";
 import { UNAVAILABLE } from "./entity";
+import { FrontendLocaleData } from "./translation";
 
 export const enum CoverEntityFeature {
   OPEN = 1,
@@ -106,3 +108,18 @@ interface CoverEntityAttributes extends HassEntityAttributeBase {
 export interface CoverEntity extends HassEntityBase {
   attributes: CoverEntityAttributes;
 }
+
+export function computeCoverPositionStateDisplay(
+  stateObj: CoverEntity,
+  locale: FrontendLocaleData,
+  position?: number
+) {
+  const currentPosition =
+    position ??
+    stateObj.attributes.current_position ??
+    stateObj.attributes.current_tilt_position;
+
+  return currentPosition && currentPosition !== 100
+    ? `${Math.round(currentPosition)}${blankBeforePercent(locale)}%`
+    : "";
+}

src/dialogs/more-info/controls/more-info-cover.ts

@@ -10,9 +10,12 @@ import {
 import { customElement, property, state } from "lit/decorators";
 import { computeStateDisplay } from "../../../common/entity/compute_state_display";
 import { supportsFeature } from "../../../common/entity/supports-feature";
-import { blankBeforePercent } from "../../../common/translations/blank_before_percent";
 import "../../../components/ha-attributes";
-import { CoverEntity, CoverEntityFeature } from "../../../data/cover";
+import {
+  computeCoverPositionStateDisplay,
+  CoverEntity,
+  CoverEntityFeature,
+} from "../../../data/cover";
 import type { HomeAssistant } from "../../../types";
 import "../components/cover/ha-more-info-cover-buttons";
 import "../components/cover/ha-more-info-cover-position";
@@ -27,7 +30,9 @@ class MoreInfoCover extends LitElement {
 
   @property({ attribute: false }) public stateObj?: CoverEntity;
 
-  @state() private _displayedPosition?: number;
+  @state() private _livePosition?: number;
+
+  @state() private _liveTilt?: number;
 
   @state() private _mode?: "position" | "button";
 
@@ -35,20 +40,29 @@ class MoreInfoCover extends LitElement {
     this._mode = this._mode === "position" ? "button" : "position";
   }
 
-  private _positionChanged(ev) {
+  private _positionSliderMoved(ev) {
     const value = (ev.detail as any).value;
     if (isNaN(value)) return;
-    this._displayedPosition = value;
+    this._livePosition = value;
+  }
+
+  private _positionValueChanged() {
+    this._livePosition = undefined;
+  }
+
+  private _tiltSliderMoved(ev) {
+    const value = (ev.detail as any).value;
+    if (isNaN(value)) return;
+    this._liveTilt = value;
+  }
+
+  private _tiltValueChanged() {
+    this._liveTilt = undefined;
   }
 
   protected willUpdate(changedProps: PropertyValues): void {
     super.willUpdate(changedProps);
     if (changedProps.has("stateObj") && this.stateObj) {
-      if (supportsFeature(this.stateObj, CoverEntityFeature.SET_POSITION)) {
-        const currentPosition = this.stateObj?.attributes.current_position;
-        this._displayedPosition =
-          currentPosition != null ? Math.round(currentPosition) : undefined;
-      }
       if (!this._mode) {
         this._mode =
           supportsFeature(this.stateObj, CoverEntityFeature.SET_POSITION) ||
@@ -60,29 +74,29 @@ class MoreInfoCover extends LitElement {
   }
 
   private get _stateOverride() {
-    if (this._displayedPosition == null) return undefined;
+    const liveValue = this._livePosition ?? this._liveTilt;
 
-    const tempState = {
-      ...this.stateObj,
-      state: this._displayedPosition ? "open" : "closed",
-      attributes: {
-        ...this.stateObj!.attributes,
-        current_position: this._displayedPosition,
-      },
-    } as CoverEntity;
+    const forcedState =
+      liveValue != null ? (liveValue ? "open" : "closed") : undefined;
 
     const stateDisplay = computeStateDisplay(
       this.hass.localize,
-      tempState!,
+      this.stateObj!,
       this.hass.locale,
-      this.hass.entities
+      this.hass.entities,
+      forcedState
     );
 
-    return this._displayedPosition && this._displayedPosition !== 100
-      ? `${stateDisplay} - ${Math.round(
-          this._displayedPosition
-        )}${blankBeforePercent(this.hass!.locale)}%`
-      : stateDisplay;
+    const positionStateDisplay = computeCoverPositionStateDisplay(
+      this.stateObj!,
+      this.hass.locale,
+      liveValue
+    );
+
+    if (positionStateDisplay) {
+      return `${stateDisplay} ⸱ ${positionStateDisplay}`;
+    }
+    return stateDisplay;
   }
 
   protected render() {
@@ -133,7 +147,8 @@ class MoreInfoCover extends LitElement {
                         <ha-more-info-cover-position
                           .stateObj=${this.stateObj}
                           .hass=${this.hass}
-                          @slider-moved=${this._positionChanged}
+                          @slider-moved=${this._positionSliderMoved}
+                          @value-changed=${this._positionValueChanged}
                         ></ha-more-info-cover-position>
                       `
                     : nothing}
@@ -142,6 +157,8 @@ class MoreInfoCover extends LitElement {
                         <ha-more-info-cover-tilt-position
                           .stateObj=${this.stateObj}
                           .hass=${this.hass}
+                          @slider-moved=${this._tiltSliderMoved}
+                          @value-changed=${this._tiltValueChanged}
                         ></ha-more-info-cover-tilt-position>
                       `
                     : nothing}

src/panels/lovelace/cards/hui-tile-card.ts

@@ -36,8 +36,11 @@ import "../../../components/tile/ha-tile-icon";
 import "../../../components/tile/ha-tile-image";
 import "../../../components/tile/ha-tile-info";
 import { cameraUrlWithWidthHeight } from "../../../data/camera";
-import { CoverEntity } from "../../../data/cover";
-import { isUnavailableState, ON } from "../../../data/entity";
+import {
+  computeCoverPositionStateDisplay,
+  CoverEntity,
+} from "../../../data/cover";
+import { isUnavailableState } from "../../../data/entity";
 import { FanEntity } from "../../../data/fan";
 import { LightEntity } from "../../../data/light";
 import { ActionHandlerEvent } from "../../../data/lovelace";
@@ -202,7 +205,7 @@ export class HuiTileCard extends LitElement implements LovelaceCard {
       `;
     }
 
-    if (domain === "light" && stateObj.state === ON) {
+    if (domain === "light" && stateActive(stateObj)) {
       const brightness = (stateObj as LightEntity).attributes.brightness;
       if (brightness) {
         return `${Math.round((brightness * 100) / 255)}${blankBeforePercent(
@@ -211,7 +214,7 @@ export class HuiTileCard extends LitElement implements LovelaceCard {
       }
     }
 
-    if (domain === "fan" && stateObj.state === ON) {
+    if (domain === "fan" && stateActive(stateObj)) {
       const speed = (stateObj as FanEntity).attributes.percentage;
       if (speed) {
         return `${Math.round(speed)}${blankBeforePercent(this.hass!.locale)}%`;
@@ -225,15 +228,14 @@ export class HuiTileCard extends LitElement implements LovelaceCard {
       this.hass!.entities
     );
 
-    if (
-      domain === "cover" &&
-      ["open", "opening", "closing"].includes(stateObj.state)
-    ) {
-      const position = (stateObj as CoverEntity).attributes.current_position;
-      if (position && position !== 100) {
-        return `${stateDisplay} - ${Math.round(position)}${blankBeforePercent(
-          this.hass!.locale
-        )}%`;
+    if (domain === "cover" && stateActive(stateObj)) {
+      const positionStateDisplay = computeCoverPositionStateDisplay(
+        stateObj as CoverEntity,
+        this.hass!.locale
+      );
+
+      if (positionStateDisplay) {
+        return `${stateDisplay} ⸱ ${positionStateDisplay}`;
       }
     }
     return stateDisplay;