From b9a81baf9ebdb1e6560420f3d54e552592eee7a7 Mon Sep 17 00:00:00 2001 From: piitaya Date: Sun, 8 May 2022 20:04:01 +0200 Subject: [PATCH] feat(media-player): add option to display volume level --- .hass_dev/views/media-player-view.yaml | 10 ++++++++++ docs/cards/media-player.md | 1 + .../media-player-card/media-player-card-config.ts | 2 ++ .../media-player-card/media-player-card-editor.ts | 2 ++ src/cards/media-player-card/media-player-card.ts | 12 ++++++++++-- src/translations/en.json | 1 + src/translations/fr.json | 1 + 7 files changed, 27 insertions(+), 2 deletions(-) diff --git a/.hass_dev/views/media-player-view.yaml b/.hass_dev/views/media-player-view.yaml index 2bc73f894..9345db51a 100644 --- a/.hass_dev/views/media-player-view.yaml +++ b/.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: diff --git a/docs/cards/media-player.md b/docs/cards/media-player.md index 13478b5a0..a21ef8150 100644 --- a/docs/cards/media-player.md +++ b/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 | diff --git a/src/cards/media-player-card/media-player-card-config.ts b/src/cards/media-player-card/media-player-card-config.ts index f8f96fde5..87ec4f72b 100644 --- a/src/cards/media-player-card/media-player-card-config.ts +++ b/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))), diff --git a/src/cards/media-player-card/media-player-card-editor.ts b/src/cards/media-player-card/media-player-card-editor.ts index 7ba07413a..29cac323d 100644 --- a/src/cards/media-player-card/media-player-card-editor.ts +++ b/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: {} } }, ], }, { diff --git a/src/cards/media-player-card/media-player-card.ts b/src/cards/media-player-card/media-player-card.ts index 4e38aaa72..40ba7dd56 100644 --- a/src/cards/media-player-card/media-player-card.ts +++ b/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); diff --git a/src/translations/en.json b/src/translations/en.json index 6f7f1b2e7..4ed15368d 100644 --- a/src/translations/en.json +++ b/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", diff --git a/src/translations/fr.json b/src/translations/fr.json index b04744a46..1f0e9a489 100644 --- a/src/translations/fr.json +++ b/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",