feat(media-player): show volume next to state when not unavailable/un…

…known/off (#374) * Show volume next to state * Revert "Show volume next to state" This reverts commit c40e32f. Undo due to suggestion from @acesyde * Reworked volume state based on feedback Co-authored-by: Paul Bottein <paul.bottein@gmail.com>
piitaya · May 8, 2022 · edc6339 · edc6339
1 parent 5dc1d9b
commit edc6339
Show file tree

Hide file tree

Showing 2 changed files with 44 additions and 3 deletions.
diff --git a/src/cards/media-player-card/controls/media-player-volume-control.ts b/src/cards/media-player-card/controls/media-player-volume-control.ts
@@ -40,6 +40,17 @@ export class MediaPlayerVolumeControls extends LitElement {
         });
     }
 
+    handleSliderCurrentChange(e: CustomEvent<{ value?: number }>): void {
+        let value = e.detail.value;
+        this.dispatchEvent(
+            new CustomEvent("current-change", {
+                detail: {
+                    value,
+                },
+            })
+        );
+    }
+
     private handleClick(e: MouseEvent): void {
         e.stopPropagation();
         const action = (e.target! as any).action as string;
@@ -76,6 +87,7 @@ export class MediaPlayerVolumeControls extends LitElement {
                           .min=${0}
                           .max=${100}
                           @change=${this.handleSliderChange}
+                          @current-change=${this.handleSliderCurrentChange}
                       />`
                     : null}
                 ${displayVolumeMute

diff --git a/src/cards/media-player-card/media-player-card.ts b/src/cards/media-player-card/media-player-card.ts
@@ -31,7 +31,11 @@ import { isMediaControlVisible } from "./controls/media-player-media-control";
 import "./controls/media-player-volume-control";
 import { isVolumeControlVisible } from "./controls/media-player-volume-control";
 import { MediaPlayerCardConfig } from "./media-player-card-config";
-import { computeMediaIcon, computeMediaNameDisplay, computeMediaStateDisplay } from "./utils";
+import { computeMediaIcon, computeMediaNameDisplay, computeMediaStateDisplay, getVolumeLevel } from "./utils";
+import "../../shared/badge-icon";
+import "../../shared/card";
+import "../../shared/shape-avatar";
+import "../../shared/shape-icon";
 
 type MediaPlayerCardControl = "media_control" | "volume_control";
 
@@ -90,12 +94,35 @@ export class MediaPlayerCard extends MushroomBaseElement implements LovelaceCard
             ...config,
         };
         this.updateControls();
+        this.updateVolume();
     }
 
     protected updated(changedProperties: PropertyValues) {
         super.updated(changedProperties);
         if (this.hass && changedProperties.has("hass")) {
             this.updateControls();
+            this.updateVolume();
+        }
+    }
+
+    @state()
+    private volume?: number;
+
+    updateVolume() {
+        this.volume = undefined;
+        if (!this._config || !this.hass || !this._config.entity) return;
+
+        const entity_id = this._config.entity;
+        const entity = this.hass.states[entity_id] as MediaPlayerEntity;
+
+        if (!entity) return;
+        const volume = getVolumeLevel(entity);
+        this.volume = volume != null ? Math.round(volume) : volume;
+    }
+
+    private onCurrentVolumeChange(e: CustomEvent<{ value?: number }>): void {
+        if (e.detail.value != null) {
+            this.volume = e.detail.value;
         }
     }
 
@@ -140,7 +167,8 @@ export class MediaPlayerCard extends MushroomBaseElement implements LovelaceCard
         const layout = getLayoutFromConfig(this._config);
 
         let nameDisplay = computeMediaNameDisplay(this._config, entity);
-        let stateDisplay = computeMediaStateDisplay(this._config, entity, this.hass);
+        const stateDisplay = computeMediaStateDisplay(this._config, entity, this.hass);
+        const stateValue = this.volume != null ? `${stateDisplay} - ${this.volume}%` : stateDisplay;
 
         const rtl = computeRTL(this.hass);
 
@@ -184,7 +212,7 @@ export class MediaPlayerCard extends MushroomBaseElement implements LovelaceCard
                         <mushroom-state-info
                             slot="info"
                             .primary=${nameDisplay}
-                            .secondary=${stateDisplay}
+                            .secondary=${stateValue}
                         ></mushroom-state-info>
                     </mushroom-state-item>
                     ${this._controls.length > 0
@@ -237,6 +265,7 @@ export class MediaPlayerCard extends MushroomBaseElement implements LovelaceCard
                         .entity=${entity}
                         .controls=${volume_controls}
                         .fill=${layout !== "horizontal"}
+                        @current-change=${this.onCurrentVolumeChange}
                     />
                 `;
             default: