From 5d99d54f2c4354b10d0fa6c1b556510f1edf0a7f Mon Sep 17 00:00:00 2001 From: NachtaktiverHalbaffe Date: Tue, 15 Mar 2022 00:34:31 +0000 Subject: [PATCH 1/6] Added shuffle and repeat-mode to media_player controlbuttons --- src/data/media-player.ts | 35 +++++++++++++++++++++++++++++++++++ src/translations/en.json | 2 ++ 2 files changed, 37 insertions(+) diff --git a/src/data/media-player.ts b/src/data/media-player.ts index 14b1a19c80cc..8471ed3ccb64 100644 --- a/src/data/media-player.ts +++ b/src/data/media-player.ts @@ -16,6 +16,11 @@ import { mdiPlayPause, mdiPodcast, mdiPower, + mdiRepeat, + mdiRepeatOff, + mdiRepeatOnce, + mdiShuffle, + mdiShuffleDisabled, mdiSkipNext, mdiSkipPrevious, mdiStop, @@ -49,6 +54,8 @@ interface MediaPlayerEntityAttributes extends HassEntityAttributeBase { entity_picture_local?: string; is_volume_muted?: boolean; volume_level?: number; + repeat?: string; + shuffle?: boolean; source?: string; source_list?: string[]; sound_mode?: string; @@ -80,7 +87,9 @@ export const SUPPORT_VOLUME_BUTTONS = 1024; export const SUPPORT_SELECT_SOURCE = 2048; export const SUPPORT_STOP = 4096; export const SUPPORT_PLAY = 16384; +export const SUPPORT_REPEAT_SET = 262144; export const SUPPORT_SELECT_SOUND_MODE = 65536; +export const SUPPORT_SHUFFLE_SET = 32768; export const SUPPORT_BROWSE_MEDIA = 131072; export type MediaPlayerBrowseAction = "pick" | "play"; @@ -240,6 +249,7 @@ export const computeMediaControls = ( } const state = stateObj.state; + const stateAttr = stateObj.attributes; if (UNAVAILABLE_STATES.includes(state)) { return undefined; @@ -267,6 +277,16 @@ export const computeMediaControls = ( const assumedState = stateObj.attributes.assumed_state === true; + if ( + (state === "playing" || state === "paused" || assumedState) && + supportsFeature(stateObj, SUPPORT_SHUFFLE_SET) + ) { + buttons.push({ + icon: stateAttr.shuffle === true ? mdiShuffle : mdiShuffleDisabled, + action: "shuffle_set", + }); + } + if ( (state === "playing" || state === "paused" || assumedState) && supportsFeature(stateObj, SUPPORT_PREVIOUS_TRACK) @@ -337,6 +357,21 @@ export const computeMediaControls = ( }); } + if ( + (state === "playing" || state === "paused" || assumedState) && + supportsFeature(stateObj, SUPPORT_REPEAT_SET) + ) { + buttons.push({ + icon: + stateAttr.repeat === "all" + ? mdiRepeat + : stateAttr.repeat === "one" + ? mdiRepeatOnce + : mdiRepeatOff, + action: "repeat_set", + }); + } + return buttons.length > 0 ? buttons : undefined; }; diff --git a/src/translations/en.json b/src/translations/en.json index 2d05c998e801..051fa237c04b 100755 --- a/src/translations/en.json +++ b/src/translations/en.json @@ -211,6 +211,8 @@ "media_volume_down": "Volume down", "media_volume_mute": "Volume mute", "media_volume_unmute": "Volume unmute", + "repeat_set": "Repeat mode", + "shuffle_set": "Shuffle", "text_to_speak": "Text to speak", "nothing_playing": "Nothing Playing" }, From 9e26c37452b307bf2c37fd6b1f3c96630af45359 Mon Sep 17 00:00:00 2001 From: NachtaktiverHalbaffe Date: Tue, 15 Mar 2022 00:50:05 +0000 Subject: [PATCH 2/6] updated media_player ui elements with updated controlbuttons --- .../controls/more-info-media_player.ts | 25 ++++++++++++++++--- .../lovelace/cards/hui-media-control-card.ts | 25 ++++++++++++++++--- .../media-browser/ha-bar-media-player.ts | 25 ++++++++++++++++--- 3 files changed, 65 insertions(+), 10 deletions(-) diff --git a/src/dialogs/more-info/controls/more-info-media_player.ts b/src/dialogs/more-info/controls/more-info-media_player.ts index 916257695ac4..21075d1c375e 100644 --- a/src/dialogs/more-info/controls/more-info-media_player.ts +++ b/src/dialogs/more-info/controls/more-info-media_player.ts @@ -202,6 +202,7 @@ class MoreInfoMediaPlayer extends LitElement { } .basic-controls { + display: inline-flex; flex-grow: 1; } @@ -231,12 +232,28 @@ class MoreInfoMediaPlayer extends LitElement { } private _handleClick(e: MouseEvent): void { + const action = (e.currentTarget! as HTMLElement).getAttribute("action")!; this.hass!.callService( "media_player", - (e.currentTarget! as HTMLElement).getAttribute("action")!, - { - entity_id: this.stateObj!.entity_id, - } + action, + action === "shuffle_set" + ? { + entity_id: this.stateObj!.entity_id, + shuffle: !this.stateObj!.attributes.shuffle, + } + : action === "repeat_set" + ? { + entity_id: this.stateObj!.entity_id, + repeat: + this.stateObj!.attributes.repeat === "all" + ? "one" + : this.stateObj!.attributes.repeat === "off" + ? "all" + : "off", + } + : { + entity_id: this.stateObj!.entity_id, + } ); } diff --git a/src/panels/lovelace/cards/hui-media-control-card.ts b/src/panels/lovelace/cards/hui-media-control-card.ts index 50e26074f2a8..859c2c4e707d 100644 --- a/src/panels/lovelace/cards/hui-media-control-card.ts +++ b/src/panels/lovelace/cards/hui-media-control-card.ts @@ -505,9 +505,28 @@ export class HuiMediaControlCard extends LitElement implements LovelaceCard { private _handleClick(e: MouseEvent): void { const action = (e.currentTarget! as HTMLElement).getAttribute("action")!; - this.hass!.callService("media_player", action, { - entity_id: this._config!.entity, - }); + this.hass!.callService( + "media_player", + action, + action === "shuffle_set" + ? { + entity_id: this._config!.entity, + shuffle: !this._stateObj!.attributes.shuffle, + } + : action === "repeat_set" + ? { + entity_id: this._config!.entity, + repeat: + this._stateObj!.attributes.repeat === "all" + ? "one" + : this._stateObj!.attributes.repeat === "off" + ? "all" + : "off", + } + : { + entity_id: this._config!.entity, + } + ); } private _updateProgressBar(): void { diff --git a/src/panels/media-browser/ha-bar-media-player.ts b/src/panels/media-browser/ha-bar-media-player.ts index 3e913c6e43aa..0035aeec82fd 100644 --- a/src/panels/media-browser/ha-bar-media-player.ts +++ b/src/panels/media-browser/ha-bar-media-player.ts @@ -490,9 +490,28 @@ export class BarMediaPlayer extends LitElement { const action = (e.currentTarget! as HTMLElement).getAttribute("action")!; if (!this._browserPlayer) { - this.hass!.callService("media_player", action, { - entity_id: this.entityId, - }); + this.hass!.callService( + "media_player", + action, + action === "shuffle_set" + ? { + entity_id: this._stateObj!.entity_id, + shuffle: !this._stateObj!.attributes.shuffle, + } + : action === "repeat_set" + ? { + entity_id: this._stateObj!.entity_id, + repeat: + this._stateObj!.attributes.repeat === "all" + ? "one" + : this._stateObj!.attributes.repeat === "off" + ? "all" + : "off", + } + : { + entity_id: this._stateObj!.entity_id, + } + ); return; } if (action === "media_pause") { From 93a763395b4fc4963ee7ce26ffe5ca7e071b3b5b Mon Sep 17 00:00:00 2001 From: NachtaktiverHalbaffe Date: Wed, 16 Mar 2022 19:19:11 +0000 Subject: [PATCH 3/6] Split computeMediaControls() up so essential and full controls can be computed --- src/data/media-player.ts | 44 +++++++++++++++++++++++++++++----------- 1 file changed, 32 insertions(+), 12 deletions(-) diff --git a/src/data/media-player.ts b/src/data/media-player.ts index 8471ed3ccb64..9fa32f763fb4 100644 --- a/src/data/media-player.ts +++ b/src/data/media-player.ts @@ -241,7 +241,7 @@ export const computeMediaDescription = ( return secondaryTitle; }; -export const computeMediaControls = ( +export const computeEssentialMediaControls = ( stateObj: MediaPlayerEntity ): ControlButton[] | undefined => { if (!stateObj) { @@ -249,7 +249,6 @@ export const computeMediaControls = ( } const state = stateObj.state; - const stateAttr = stateObj.attributes; if (UNAVAILABLE_STATES.includes(state)) { return undefined; @@ -277,16 +276,6 @@ export const computeMediaControls = ( const assumedState = stateObj.attributes.assumed_state === true; - if ( - (state === "playing" || state === "paused" || assumedState) && - supportsFeature(stateObj, SUPPORT_SHUFFLE_SET) - ) { - buttons.push({ - icon: stateAttr.shuffle === true ? mdiShuffle : mdiShuffleDisabled, - action: "shuffle_set", - }); - } - if ( (state === "playing" || state === "paused" || assumedState) && supportsFeature(stateObj, SUPPORT_PREVIOUS_TRACK) @@ -357,6 +346,37 @@ export const computeMediaControls = ( }); } + return buttons.length > 0 ? buttons : undefined; +}; + +export const computeMediaControls = ( + stateObj: MediaPlayerEntity +): ControlButton[] | undefined => { + if (!stateObj) { + return undefined; + } + + const state = stateObj.state; + const shortButtons = computeEssentialMediaControls(stateObj); + + if (shortButtons === undefined) { + return undefined; + } + + const buttons: ControlButton[] = shortButtons.concat(); + const stateAttr = stateObj.attributes; + const assumedState = stateAttr.assumed_state === true; + + if ( + (state === "playing" || state === "paused" || assumedState) && + supportsFeature(stateObj, SUPPORT_SHUFFLE_SET) + ) { + buttons.unshift({ + icon: stateAttr.shuffle === true ? mdiShuffle : mdiShuffleDisabled, + action: "shuffle_set", + }); + } + if ( (state === "playing" || state === "paused" || assumedState) && supportsFeature(stateObj, SUPPORT_REPEAT_SET) From d6442521d01ad5f8631ed5d846a92f324ec04b2e Mon Sep 17 00:00:00 2001 From: NachtaktiverHalbaffe Date: Wed, 16 Mar 2022 19:22:52 +0000 Subject: [PATCH 4/6] Refactored media card to use essential media controls --- .../lovelace/cards/hui-media-control-card.ts | 29 ++++--------------- 1 file changed, 5 insertions(+), 24 deletions(-) diff --git a/src/panels/lovelace/cards/hui-media-control-card.ts b/src/panels/lovelace/cards/hui-media-control-card.ts index 859c2c4e707d..6f724ca17d4f 100644 --- a/src/panels/lovelace/cards/hui-media-control-card.ts +++ b/src/panels/lovelace/cards/hui-media-control-card.ts @@ -25,7 +25,7 @@ import { showMediaBrowserDialog } from "../../../components/media-player/show-me import { UNAVAILABLE_STATES } from "../../../data/entity"; import { cleanupMediaTitle, - computeMediaControls, + computeEssentialMediaControls, computeMediaDescription, getCurrentProgress, MediaPickedEvent, @@ -174,7 +174,7 @@ export class HuiMediaControlCard extends LitElement implements LovelaceCard { UNAVAILABLE_STATES.includes(entityState) || (entityState === "off" && !supportsFeature(stateObj, SUPPORT_TURN_ON)); const hasNoImage = !this._image; - const controls = computeMediaControls(stateObj); + const controls = computeEssentialMediaControls(stateObj); const showControls = controls && (!this._veryNarrow || @@ -505,28 +505,9 @@ export class HuiMediaControlCard extends LitElement implements LovelaceCard { private _handleClick(e: MouseEvent): void { const action = (e.currentTarget! as HTMLElement).getAttribute("action")!; - this.hass!.callService( - "media_player", - action, - action === "shuffle_set" - ? { - entity_id: this._config!.entity, - shuffle: !this._stateObj!.attributes.shuffle, - } - : action === "repeat_set" - ? { - entity_id: this._config!.entity, - repeat: - this._stateObj!.attributes.repeat === "all" - ? "one" - : this._stateObj!.attributes.repeat === "off" - ? "all" - : "off", - } - : { - entity_id: this._config!.entity, - } - ); + this.hass!.callService("media_player", action, { + entity_id: this._config!.entity, + }); } private _updateProgressBar(): void { From 32ddf00e84e51440251a9e2641433e5ffa69297d Mon Sep 17 00:00:00 2001 From: NachtaktiverHalbaffe Date: Wed, 30 Mar 2022 13:15:48 +0000 Subject: [PATCH 5/6] Adressed comments in PR --- src/data/media-player.ts | 85 +++++++++++-------- .../controls/more-info-media_player.ts | 27 +----- .../lovelace/cards/hui-media-control-card.ts | 10 +-- .../media-browser/ha-bar-media-player.ts | 26 +----- 4 files changed, 61 insertions(+), 87 deletions(-) diff --git a/src/data/media-player.ts b/src/data/media-player.ts index 9fa32f763fb4..a97e94f03bb5 100644 --- a/src/data/media-player.ts +++ b/src/data/media-player.ts @@ -241,8 +241,9 @@ export const computeMediaDescription = ( return secondaryTitle; }; -export const computeEssentialMediaControls = ( - stateObj: MediaPlayerEntity +export const computeMediaControls = ( + stateObj: MediaPlayerEntity, + useExtendedControls?: boolean ): ControlButton[] | undefined => { if (!stateObj) { return undefined; @@ -254,6 +255,10 @@ export const computeEssentialMediaControls = ( return undefined; } + if (useExtendedControls === undefined) { + useExtendedControls = false; + } + if (state === "off") { return supportsFeature(stateObj, SUPPORT_TURN_ON) ? [ @@ -275,6 +280,18 @@ export const computeEssentialMediaControls = ( } const assumedState = stateObj.attributes.assumed_state === true; + const stateAttr = stateObj.attributes; + + if ( + (state === "playing" || state === "paused" || assumedState) && + supportsFeature(stateObj, SUPPORT_SHUFFLE_SET) && + useExtendedControls + ) { + buttons.push({ + icon: stateAttr.shuffle === true ? mdiShuffle : mdiShuffleDisabled, + action: "shuffle_set", + }); + } if ( (state === "playing" || state === "paused" || assumedState) && @@ -346,40 +363,10 @@ export const computeEssentialMediaControls = ( }); } - return buttons.length > 0 ? buttons : undefined; -}; - -export const computeMediaControls = ( - stateObj: MediaPlayerEntity -): ControlButton[] | undefined => { - if (!stateObj) { - return undefined; - } - - const state = stateObj.state; - const shortButtons = computeEssentialMediaControls(stateObj); - - if (shortButtons === undefined) { - return undefined; - } - - const buttons: ControlButton[] = shortButtons.concat(); - const stateAttr = stateObj.attributes; - const assumedState = stateAttr.assumed_state === true; - - if ( - (state === "playing" || state === "paused" || assumedState) && - supportsFeature(stateObj, SUPPORT_SHUFFLE_SET) - ) { - buttons.unshift({ - icon: stateAttr.shuffle === true ? mdiShuffle : mdiShuffleDisabled, - action: "shuffle_set", - }); - } - if ( (state === "playing" || state === "paused" || assumedState) && - supportsFeature(stateObj, SUPPORT_REPEAT_SET) + supportsFeature(stateObj, SUPPORT_REPEAT_SET) && + useExtendedControls ) { buttons.push({ icon: @@ -430,3 +417,33 @@ export const setMediaPlayerVolume = ( volume_level: number ) => hass.callService("media_player", "volume_set", { entity_id, volume_level }); + +export const handleMediaControlClick = ( + e: MouseEvent, + hass: HomeAssistant, + stateObj: MediaPlayerEntity +): void => { + const action = (e.currentTarget! as HTMLElement).getAttribute("action")!; + hass!.callService( + "media_player", + action, + action === "shuffle_set" + ? { + entity_id: stateObj!.entity_id, + shuffle: !stateObj!.attributes.shuffle, + } + : action === "repeat_set" + ? { + entity_id: stateObj!.entity_id, + repeat: + stateObj!.attributes.repeat === "all" + ? "one" + : stateObj!.attributes.repeat === "off" + ? "all" + : "off", + } + : { + entity_id: stateObj!.entity_id, + } + ); +}; diff --git a/src/dialogs/more-info/controls/more-info-media_player.ts b/src/dialogs/more-info/controls/more-info-media_player.ts index 21075d1c375e..cded8a82da7a 100644 --- a/src/dialogs/more-info/controls/more-info-media_player.ts +++ b/src/dialogs/more-info/controls/more-info-media_player.ts @@ -23,6 +23,7 @@ import { showMediaBrowserDialog } from "../../../components/media-player/show-me import { UNAVAILABLE, UNKNOWN } from "../../../data/entity"; import { computeMediaControls, + handleMediaControlClick, MediaPickedEvent, MediaPlayerEntity, SUPPORT_BROWSE_MEDIA, @@ -47,7 +48,7 @@ class MoreInfoMediaPlayer extends LitElement { } const stateObj = this.stateObj; - const controls = computeMediaControls(stateObj); + const controls = computeMediaControls(stateObj, true); return html`
@@ -232,29 +233,7 @@ class MoreInfoMediaPlayer extends LitElement { } private _handleClick(e: MouseEvent): void { - const action = (e.currentTarget! as HTMLElement).getAttribute("action")!; - this.hass!.callService( - "media_player", - action, - action === "shuffle_set" - ? { - entity_id: this.stateObj!.entity_id, - shuffle: !this.stateObj!.attributes.shuffle, - } - : action === "repeat_set" - ? { - entity_id: this.stateObj!.entity_id, - repeat: - this.stateObj!.attributes.repeat === "all" - ? "one" - : this.stateObj!.attributes.repeat === "off" - ? "all" - : "off", - } - : { - entity_id: this.stateObj!.entity_id, - } - ); + handleMediaControlClick(e, this.hass!, this.stateObj!); } private _toggleMute() { diff --git a/src/panels/lovelace/cards/hui-media-control-card.ts b/src/panels/lovelace/cards/hui-media-control-card.ts index 6f724ca17d4f..6ed83f044150 100644 --- a/src/panels/lovelace/cards/hui-media-control-card.ts +++ b/src/panels/lovelace/cards/hui-media-control-card.ts @@ -25,9 +25,10 @@ import { showMediaBrowserDialog } from "../../../components/media-player/show-me import { UNAVAILABLE_STATES } from "../../../data/entity"; import { cleanupMediaTitle, - computeEssentialMediaControls, + computeMediaControls, computeMediaDescription, getCurrentProgress, + handleMediaControlClick, MediaPickedEvent, MediaPlayerEntity, SUPPORT_BROWSE_MEDIA, @@ -174,7 +175,7 @@ export class HuiMediaControlCard extends LitElement implements LovelaceCard { UNAVAILABLE_STATES.includes(entityState) || (entityState === "off" && !supportsFeature(stateObj, SUPPORT_TURN_ON)); const hasNoImage = !this._image; - const controls = computeEssentialMediaControls(stateObj); + const controls = computeMediaControls(stateObj, false); const showControls = controls && (!this._veryNarrow || @@ -504,10 +505,7 @@ export class HuiMediaControlCard extends LitElement implements LovelaceCard { } private _handleClick(e: MouseEvent): void { - const action = (e.currentTarget! as HTMLElement).getAttribute("action")!; - this.hass!.callService("media_player", action, { - entity_id: this._config!.entity, - }); + handleMediaControlClick(e, this.hass!, this._stateObj!); } private _updateProgressBar(): void { diff --git a/src/panels/media-browser/ha-bar-media-player.ts b/src/panels/media-browser/ha-bar-media-player.ts index 0035aeec82fd..7f688bfc9a4a 100644 --- a/src/panels/media-browser/ha-bar-media-player.ts +++ b/src/panels/media-browser/ha-bar-media-player.ts @@ -39,6 +39,7 @@ import { computeMediaDescription, formatMediaTime, getCurrentProgress, + handleMediaControlClick, MediaPlayerEntity, MediaPlayerItem, setMediaPlayerVolume, @@ -173,7 +174,7 @@ export class BarMediaPlayer extends LitElement { } const controls = !this.narrow - ? computeMediaControls(stateObj) + ? computeMediaControls(stateObj, true) : (stateObj.state === "playing" && (supportsFeature(stateObj, SUPPORT_PAUSE) || supportsFeature(stateObj, SUPPORT_STOP))) || @@ -490,28 +491,7 @@ export class BarMediaPlayer extends LitElement { const action = (e.currentTarget! as HTMLElement).getAttribute("action")!; if (!this._browserPlayer) { - this.hass!.callService( - "media_player", - action, - action === "shuffle_set" - ? { - entity_id: this._stateObj!.entity_id, - shuffle: !this._stateObj!.attributes.shuffle, - } - : action === "repeat_set" - ? { - entity_id: this._stateObj!.entity_id, - repeat: - this._stateObj!.attributes.repeat === "all" - ? "one" - : this._stateObj!.attributes.repeat === "off" - ? "all" - : "off", - } - : { - entity_id: this._stateObj!.entity_id, - } - ); + handleMediaControlClick(e, this.hass!, this._stateObj!); return; } if (action === "media_pause") { From d7fff8beae04dd4763142a410791fbd5bd667849 Mon Sep 17 00:00:00 2001 From: Paulus Schoutsen Date: Wed, 30 Mar 2022 10:05:20 -0700 Subject: [PATCH 6/6] Move event back into components --- src/data/media-player.ts | 14 ++++---------- .../more-info/controls/more-info-media_player.ts | 6 +++++- .../lovelace/cards/hui-media-control-card.ts | 6 +++++- src/panels/media-browser/ha-bar-media-player.ts | 6 +++++- 4 files changed, 19 insertions(+), 13 deletions(-) diff --git a/src/data/media-player.ts b/src/data/media-player.ts index a97e94f03bb5..199cbbb38667 100644 --- a/src/data/media-player.ts +++ b/src/data/media-player.ts @@ -243,7 +243,7 @@ export const computeMediaDescription = ( export const computeMediaControls = ( stateObj: MediaPlayerEntity, - useExtendedControls?: boolean + useExtendedControls = false ): ControlButton[] | undefined => { if (!stateObj) { return undefined; @@ -255,10 +255,6 @@ export const computeMediaControls = ( return undefined; } - if (useExtendedControls === undefined) { - useExtendedControls = false; - } - if (state === "off") { return supportsFeature(stateObj, SUPPORT_TURN_ON) ? [ @@ -419,11 +415,10 @@ export const setMediaPlayerVolume = ( hass.callService("media_player", "volume_set", { entity_id, volume_level }); export const handleMediaControlClick = ( - e: MouseEvent, hass: HomeAssistant, - stateObj: MediaPlayerEntity -): void => { - const action = (e.currentTarget! as HTMLElement).getAttribute("action")!; + stateObj: MediaPlayerEntity, + action: string +) => hass!.callService( "media_player", action, @@ -446,4 +441,3 @@ export const handleMediaControlClick = ( entity_id: stateObj!.entity_id, } ); -}; diff --git a/src/dialogs/more-info/controls/more-info-media_player.ts b/src/dialogs/more-info/controls/more-info-media_player.ts index cded8a82da7a..6f4b88926eae 100644 --- a/src/dialogs/more-info/controls/more-info-media_player.ts +++ b/src/dialogs/more-info/controls/more-info-media_player.ts @@ -233,7 +233,11 @@ class MoreInfoMediaPlayer extends LitElement { } private _handleClick(e: MouseEvent): void { - handleMediaControlClick(e, this.hass!, this.stateObj!); + handleMediaControlClick( + this.hass!, + this.stateObj!, + (e.currentTarget as HTMLElement).getAttribute("action")! + ); } private _toggleMute() { diff --git a/src/panels/lovelace/cards/hui-media-control-card.ts b/src/panels/lovelace/cards/hui-media-control-card.ts index 6ed83f044150..f1d2793ae094 100644 --- a/src/panels/lovelace/cards/hui-media-control-card.ts +++ b/src/panels/lovelace/cards/hui-media-control-card.ts @@ -505,7 +505,11 @@ export class HuiMediaControlCard extends LitElement implements LovelaceCard { } private _handleClick(e: MouseEvent): void { - handleMediaControlClick(e, this.hass!, this._stateObj!); + handleMediaControlClick( + this.hass!, + this._stateObj!, + (e.currentTarget as HTMLElement).getAttribute("action")! + ); } private _updateProgressBar(): void { diff --git a/src/panels/media-browser/ha-bar-media-player.ts b/src/panels/media-browser/ha-bar-media-player.ts index 7f688bfc9a4a..bfc2e63656d6 100644 --- a/src/panels/media-browser/ha-bar-media-player.ts +++ b/src/panels/media-browser/ha-bar-media-player.ts @@ -491,7 +491,11 @@ export class BarMediaPlayer extends LitElement { const action = (e.currentTarget! as HTMLElement).getAttribute("action")!; if (!this._browserPlayer) { - handleMediaControlClick(e, this.hass!, this._stateObj!); + handleMediaControlClick( + this.hass!, + this._stateObj!, + (e.currentTarget as HTMLElement).getAttribute("action")! + ); return; } if (action === "media_pause") {