feat(media-player): add option to display volume level

.hass_dev/views/media-player-view.yaml

@@ -31,6 +31,16 @@ cards:
         use_media_info: true
     columns: 2
     square: false
+  - type: grid
+    title: Volume Level
+    cards:
+      - type: custom:mushroom-media-player-card
+        entity: media_player.living_room
+        show_volume_level: true
+        volume_controls:
+          - volume_set
+    columns: 2
+    square: false
   - type: vertical-stack
     title: Controls
     cards:    

docs/cards/media-player.md

@@ -20,6 +20,7 @@ All the options are available in the lovelace editor but you can use `yaml` if y
 | `fill_container`       | boolean | `false`     | Fill container or not. Useful when card is in a grid, vertical or horizontal layout    |
 | `use_media_info`       | boolean | `[]`        | Use media info instead of name, state and icon when a media is playing                 |
 | `use_media_artwork`    | boolean | `[]`        | Use media artwork instead of icon when a media is playing                              |
+| `show_volume_level`    | boolean | `[]`        | Show volume level next to media state when media is playing                            |
 | `media_controls`       | list    | `[]`        | List of controls to display (on_off, shuffle, previous, play_pause_stop, next, repeat) |
 | `volume_controls`      | list    | `[]`        | List of controls to display (volume_mute, volume_set, volume_buttons)                  |
 | `collapsible_controls` | boolean | `false`     | Collapse controls when off                                                             |

src/cards/media-player-card/media-player-card-config.ts

@@ -29,6 +29,7 @@ export interface MediaPlayerCardConfig extends LovelaceCardConfig {
     icon?: string;
     use_media_info?: boolean;
     use_media_artwork?: boolean;
+    show_volume_level?: boolean;
     volume_controls?: MediaPlayerVolumeControl[];
     media_controls?: MediaPlayerMediaControl[];
     collapsible_controls?: boolean;
@@ -47,6 +48,7 @@ export const mediaPlayerCardConfigStruct = assign(
         name: optional(string()),
         use_media_info: optional(boolean()),
         use_media_artwork: optional(boolean()),
+        show_volume_level: optional(boolean()),
         layout: optional(layoutStruct),
         fill_container: optional(boolean()),
         volume_controls: optional(array(enums(MEDIA_PLAYER_VOLUME_CONTROLS))),

src/cards/media-player-card/media-player-card-editor.ts

@@ -20,6 +20,7 @@ import {
 export const MEDIA_LABELS = [
     "use_media_info",
     "use_media_artwork",
+    "show_volume_level",
     "media_controls",
     "volume_controls",
 ];
@@ -46,6 +47,7 @@ const computeSchema = memoizeOne((localize: LocalizeFunc, icon?: string): HaForm
         schema: [
             { name: "use_media_info", selector: { boolean: {} } },
             { name: "use_media_artwork", selector: { boolean: {} } },
+            { name: "show_volume_level", selector: { boolean: {} } },
         ],
     },
     {

src/cards/media-player-card/media-player-card.ts

@@ -31,7 +31,12 @@ 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, getVolumeLevel } from "./utils";
+import {
+    computeMediaIcon,
+    computeMediaNameDisplay,
+    computeMediaStateDisplay,
+    getVolumeLevel,
+} from "./utils";
 import "../../shared/badge-icon";
 import "../../shared/card";
 import "../../shared/shape-avatar";
@@ -168,7 +173,10 @@ export class MediaPlayerCard extends MushroomBaseElement implements LovelaceCard
 
         let nameDisplay = computeMediaNameDisplay(this._config, entity);
         const stateDisplay = computeMediaStateDisplay(this._config, entity, this.hass);
-        const stateValue = this.volume != null ? `${stateDisplay} - ${this.volume}%` : stateDisplay;
+        const stateValue =
+            this.volume != null && this._config.show_volume_level
+                ? `${stateDisplay} - ${this.volume}%`
+                : stateDisplay;
 
         const rtl = computeRTL(this.hass);
 

src/translations/en.json

@@ -93,6 +93,7 @@
             "media-player": {
                 "use_media_info": "Use media info",
                 "use_media_artwork": "Use media artwork",
+                "show_volume_level": "Show volume level",
                 "media_controls": "Media controls",
                 "media_controls_list": {
                     "on_off": "Turn on/off",

src/translations/fr.json

@@ -93,6 +93,7 @@
             "media-player": {
                 "use_media_info": "Utiliser les informations du media",
                 "use_media_artwork": "Utiliser l'illustration du media",
+                "show_volume_level": "Afficher le niveau de volume",
                 "media_controls": "Contrôles du media",
                 "media_controls_list": {
                     "on_off": "Allumer/Éteindre",