jeans/frontend
jeans/frontend
1
0
Fork 0
mirror of https://github.com/home-assistant/frontend.git synced 2025-07-21 16:26:43 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #10930 from home-assistant/dev

Browse Source
This commit is contained in:
Bram Kragten 2021-12-15 13:48:42 +01:00 committed by GitHub
commit b7bd7c1065
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
23 changed files with 270 additions and 112 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
hassio/src/update-available/update-available-card.ts
View File

@ -132,7 +132,13 @@ class UpdateAvailableCard extends LitElement {
${this._error
? html`<ha-alert alert-type="error">${this._error}</ha-alert>`
: ""}
${this._action === null
${this._version === this._version_latest
? html`<p>
${this.supervisor.localize("update_available.no_update", {
name: this._name,
})}
</p>`
: this._action === null
? html`
${this._changelogContent
? html`
@ -177,7 +183,7 @@ class UpdateAvailableCard extends LitElement {
)}
</p>`}
</div>
${this._action === null
${this._version !== this._version_latest && this._action === null
? html`
<div class="card-actions">
${changelog
@ -224,6 +230,9 @@ class UpdateAvailableCard extends LitElement {
}
get _shouldCreateBackup(): boolean {
if (this._updateType && !["core", "addon"].includes(this._updateType)) {
return false;
}
const checkbox = this.shadowRoot?.querySelector("ha-checkbox");
if (checkbox) {
return checkbox.checked;

2
setup.py
View File

@ -2,7 +2,7 @@ from setuptools import setup, find_packages
setup(
name="home-assistant-frontend",
version="20211212.0",
version="20211215.0",
description="The Home Assistant frontend",
url="https://github.com/home-assistant/frontend",
author="The Home Assistant Authors",

1
src/common/const.ts
View File

@ -208,6 +208,7 @@ export const DOMAINS_HIDE_DEFAULT_MORE_INFO = [
export const DOMAINS_INPUT_ROW = [
"cover",
"fan",
"group",
"humidifier",
"input_boolean",
"input_datetime",

1
src/components/ha-alert.ts
View File

@ -46,6 +46,7 @@ class HaAlert extends LitElement {
rtl: this.rtl,
[this.alertType]: true,
})}"
role="alert"
>
<div class="icon ${this.title ? "" : "no-title"}">
<slot name="icon">

2
src/components/ha-form/ha-form-string.ts
View File

@ -66,7 +66,7 @@ export class HaFormString extends LitElement implements HaFormElement {
${isPassword
? html`<ha-icon-button
toggles
.label="Click to toggle between masked and clear password"
.label=${`${this._unmaskedPassword ? "Hide" : "Show"} password`}
@click=${this._toggleUnmaskedPassword}
tabindex="-1"
.path=${this._unmaskedPassword ? mdiEyeOff : mdiEye}

64
src/components/ha-sidebar.ts
View File

@ -3,6 +3,7 @@ import {
mdiBell,
mdiCalendar,
mdiCart,
mdiCellphoneCog,
mdiChartBox,
mdiClose,
mdiCog,
@ -43,7 +44,10 @@ import {
PersistentNotification,
subscribeNotifications,
} from "../data/persistent_notification";
import { getExternalConfig } from "../external_app/external_config";
import {
ExternalConfig,
getExternalConfig,
} from "../external_app/external_config";
import { actionHandler } from "../panels/lovelace/common/directives/action-handler-directive";
import { haStyleScrollbar } from "../resources/styles";
import type { HomeAssistant, PanelInfo, Route } from "../types";
@ -188,6 +192,8 @@ class HaSidebar extends LitElement {
@property({ type: Boolean }) public editMode = false;
@state() private _externalConfig?: ExternalConfig;
@state() private _notifications?: PersistentNotification[];
@state() private _renderEmptySortable = false;
@ -234,6 +240,7 @@ class HaSidebar extends LitElement {
changedProps.has("expanded") ||
changedProps.has("narrow") ||
changedProps.has("alwaysExpand") ||
changedProps.has("_externalConfig") ||
changedProps.has("_notifications") ||
changedProps.has("editMode") ||
changedProps.has("_renderEmptySortable") ||
@ -264,14 +271,15 @@ class HaSidebar extends LitElement {
protected firstUpdated(changedProps: PropertyValues) {
super.firstUpdated(changedProps);
if (this.hass && this.hass.auth.external) {
getExternalConfig(this.hass.auth.external).then((conf) => {
this._externalConfig = conf;
});
}
subscribeNotifications(this.hass.connection, (notifications) => {
this._notifications = notifications;
});
// Temporary workaround for a bug in Android. Can be removed in Home Assistant 2022.2
if (this.hass.auth.external) {
getExternalConfig(this.hass.auth.external);
}
}
protected updated(changedProps) {
@ -364,6 +372,7 @@ class HaSidebar extends LitElement {
: this._renderPanels(beforeSpacer)}
${this._renderSpacer()}
${this._renderPanels(afterSpacer)}
${this._renderExternalConfiguration()}
</paper-listbox>
`;
}
@ -393,7 +402,7 @@ class HaSidebar extends LitElement {
) {
return html`
<a
aria-role="option"
role="option"
href=${`/${urlPath}`}
data-panel=${urlPath}
tabindex="-1"
@ -498,7 +507,7 @@ class HaSidebar extends LitElement {
>
<paper-icon-item
class="notifications"
aria-role="option"
role="option"
@click=${this._handleShowNotificationDrawer}
>
<ha-svg-icon slot="item-icon" .path=${mdiBell}></ha-svg-icon>
@ -529,7 +538,7 @@ class HaSidebar extends LitElement {
href="/profile"
data-panel="panel"
tabindex="-1"
aria-role="option"
role="option"
aria-label=${this.hass.localize("panel.profile")}
@mouseenter=${this._itemMouseEnter}
@mouseleave=${this._itemMouseLeave}
@ -548,6 +557,43 @@ class HaSidebar extends LitElement {
</a>`;
}
private _renderExternalConfiguration() {
return html`${!this.hass.user?.is_admin &&
this._externalConfig &&
this._externalConfig.hasSettingsScreen
? html`
<a
role="option"
aria-label=${this.hass.localize(
"ui.sidebar.external_app_configuration"
)}
href="#external-app-configuration"
tabindex="-1"
@click=${this._handleExternalAppConfiguration}
@mouseenter=${this._itemMouseEnter}
@mouseleave=${this._itemMouseLeave}
>
<paper-icon-item>
<ha-svg-icon
slot="item-icon"
.path=${mdiCellphoneCog}
></ha-svg-icon>
<span class="item-text">
${this.hass.localize("ui.sidebar.external_app_configuration")}
</span>
</paper-icon-item>
</a>
`
: ""}`;
}
private _handleExternalAppConfiguration(ev: Event) {
ev.preventDefault();
this.hass.auth.external!.fireMessage({
type: "config_screen/show",
});
}
private get _tooltip() {
return this.shadowRoot!.querySelector(".tooltip")! as HTMLDivElement;
}

1
src/data/media-player.ts
View File

@ -156,6 +156,7 @@ export interface MediaPlayerThumbnail {
export interface ControlButton {
icon: string;
// Used as key for action as well as tooltip and aria-label translation key
action: string;
}

3
src/dialogs/more-info/controls/more-info-media_player.ts
View File

@ -65,6 +65,9 @@ class MoreInfoMediaPlayer extends LitElement {
action=${control.action}
@click=${this._handleClick}
.path=${control.icon}
.label=${this.hass.localize(
`ui.card.media_player.${control.action}`
)}
>
</ha-icon-button>
`

3
src/onboarding/onboarding-create-user.ts
View File

@ -95,8 +95,11 @@ class OnboardingCreateUser extends LitElement {
private _handleValueChanged(
ev: PolymerChangedEvent<HaFormDataContainer>
): void {
const nameChanged = ev.detail.value.name !== this._newUser.name;
this._newUser = ev.detail.value;
if (nameChanged) {
this._maybePopulateUsername();
}
this._formError.password_confirm =
this._newUser.password !== this._newUser.password_confirm
? this.localize(

4
src/panels/config/automation/condition/types/ha-automation-condition-state.ts
View File

@ -17,9 +17,9 @@ import {
const stateConditionStruct = object({
condition: literal("state"),
entity_id: string(),
entity_id: optional(string()),
attribute: optional(string()),
state: string(),
state: optional(string()),
for: optional(union([string(), forDictStruct])),
});

2
src/panels/config/automation/trigger/types/ha-automation-trigger-state.ts
View File

@ -28,7 +28,7 @@ const stateTriggerStruct = assign(
baseTriggerStruct,
object({
platform: literal("state"),
entity_id: string(),
entity_id: optional(string()),
attribute: optional(string()),
from: optional(string()),
to: optional(string()),

2
src/panels/config/dashboard/ha-config-navigation.ts
View File

@ -31,7 +31,7 @@ class HaConfigNavigation extends LitElement {
: canShowPage(this.hass, page)
)
? html`
<a href=${page.path} aria-role="option" tabindex="-1">
<a href=${page.path} role="option" tabindex="-1">
<paper-icon-item @click=${this._entryClicked}>
<div
class=${page.iconColor ? "icon-background" : ""}

2
src/panels/config/ha-panel-config.ts
View File

@ -110,7 +110,7 @@ export const configSections: { [name: string]: PageNavigation[] } = {
iconColor: "#8E24AA",
},
{
path: "/config/core",
path: "/config/server_control",
translationKey: "settings",
iconPath: mdiCog,
iconColor: "#4A5963",

2
src/panels/config/integrations/integration-panels/ozw/ozw-config-dashboard.ts
View File

@ -95,7 +95,7 @@ class OZWConfigDashboard extends LitElement {
<ha-card>
<a
href="/config/ozw/network/${instance.ozw_instance}"
aria-role="option"
role="option"
tabindex="-1"
>
<paper-icon-item>

7
src/panels/config/server_control/ha-config-server-control.ts
View File

@ -5,6 +5,7 @@ import "@polymer/paper-input/paper-input";
import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
import { customElement, property, state } from "lit/decorators";
import { componentsWithService } from "../../../common/config/components_with_service";
import { isComponentLoaded } from "../../../common/config/is_component_loaded";
import "../../../components/buttons/ha-call-service-button";
import "../../../components/ha-card";
import { checkCoreConfig } from "../../../data/core";
@ -157,7 +158,8 @@ export class HaConfigServerControl extends LitElement {
"ui.panel.config.server_control.section.server_management.restart"
)}
</ha-call-service-button>
<ha-call-service-button
${!isComponentLoaded(this.hass, "hassio")
? html`<ha-call-service-button
class="warning"
.hass=${this.hass}
domain="homeassistant"
@ -168,7 +170,8 @@ export class HaConfigServerControl extends LitElement {
>${this.hass.localize(
"ui.panel.config.server_control.section.server_management.stop"
)}
</ha-call-service-button>
</ha-call-service-button>`
: ""}
</div>
</ha-card>

18
src/panels/developer-tools/state/developer-tools-state.js
View File

@ -143,7 +143,12 @@ class HaPanelDevState extends EventsMixin(LocalizeMixin(PolymerElement)) {
<h1>
[[localize('ui.panel.developer-tools.tabs.states.current_entities')]]
</h1>
<ha-expansion-panel header="Set state">
<ha-expansion-panel
header="Set state"
outlined
expanded="[[_expanded]]"
on-expanded-changed="expandedChanged"
>
<p>
[[localize('ui.panel.developer-tools.tabs.states.description1')]]<br />
[[localize('ui.panel.developer-tools.tabs.states.description2')]]
@ -353,6 +358,11 @@ class HaPanelDevState extends EventsMixin(LocalizeMixin(PolymerElement)) {
"computeEntities(hass, _entityFilter, _stateFilter, _attributeFilter)",
},
_expanded: {
type: Boolean,
value: false,
},
narrow: {
type: Boolean,
reflectToAttribute: true,
@ -376,6 +386,7 @@ class HaPanelDevState extends EventsMixin(LocalizeMixin(PolymerElement)) {
this._entity = state;
this._state = state.state;
this._stateAttributes = dump(state.attributes);
this._expanded = true;
ev.preventDefault();
}
@ -393,6 +404,11 @@ class HaPanelDevState extends EventsMixin(LocalizeMixin(PolymerElement)) {
this._entity = state;
this._state = state.state;
this._stateAttributes = dump(state.attributes);
this._expanded = true;
}
expandedChanged(ev) {
this._expanded = ev.detail.expanded;
}
entityMoreInfo(ev) {

11
src/panels/lovelace/cards/energy/hui-energy-gas-graph-card.ts
View File

@ -26,7 +26,7 @@ import {
rgb2hex,
rgb2lab,
} from "../../../../common/color/convert-color";
import { labDarken } from "../../../../common/color/lab";
import { labBrighten, labDarken } from "../../../../common/color/lab";
import {
EnergyData,
getEnergyDataCollection,
@ -247,9 +247,14 @@ export class HuiEnergyGasGraphCard
const data: ChartDataset<"bar" | "line">[] = [];
const entity = this.hass.states[source.stat_energy_from];
const borderColor =
const modifiedColor =
idx > 0
? rgb2hex(lab2rgb(labDarken(rgb2lab(hex2rgb(gasColor)), idx)))
? this.hass.themes.darkMode
? labBrighten(rgb2lab(hex2rgb(gasColor)), idx)
: labDarken(rgb2lab(hex2rgb(gasColor)), idx)
: undefined;
const borderColor = modifiedColor
? rgb2hex(lab2rgb(modifiedColor))
: gasColor;
let prevValue: number | null = null;

45
src/panels/lovelace/cards/energy/hui-energy-solar-graph-card.ts
View File

@ -1,9 +1,3 @@
import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
import { customElement, property, state } from "lit/decorators";
import { UnsubscribeFunc } from "home-assistant-js-websocket";
import memoizeOne from "memoize-one";
import { classMap } from "lit/directives/class-map";
import "../../../../components/ha-card";
import {
ChartData,
ChartDataset,
@ -17,16 +11,26 @@ import {
isToday,
startOfToday,
} from "date-fns";
import { HomeAssistant } from "../../../../types";
import { LovelaceCard } from "../../types";
import { EnergySolarGraphCardConfig } from "../types";
import { UnsubscribeFunc } from "home-assistant-js-websocket";
import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
import { customElement, property, state } from "lit/decorators";
import { classMap } from "lit/directives/class-map";
import memoizeOne from "memoize-one";
import {
hex2rgb,
lab2rgb,
rgb2hex,
rgb2lab,
} from "../../../../common/color/convert-color";
import { labDarken } from "../../../../common/color/lab";
import { labBrighten, labDarken } from "../../../../common/color/lab";
import { formatTime } from "../../../../common/datetime/format_time";
import { computeStateName } from "../../../../common/entity/compute_state_name";
import {
formatNumber,
numberFormatToLocale,
} from "../../../../common/number/format_number";
import "../../../../components/chart/ha-chart-base";
import "../../../../components/ha-card";
import {
EnergyData,
EnergySolarForecasts,
@ -34,15 +38,11 @@ import {
getEnergySolarForecasts,
SolarSourceTypeEnergyPreference,
} from "../../../../data/energy";
import { computeStateName } from "../../../../common/entity/compute_state_name";
import "../../../../components/chart/ha-chart-base";
import {
formatNumber,
numberFormatToLocale,
} from "../../../../common/number/format_number";
import { SubscribeMixin } from "../../../../mixins/subscribe-mixin";
import { FrontendLocaleData } from "../../../../data/translation";
import { formatTime } from "../../../../common/datetime/format_time";
import { SubscribeMixin } from "../../../../mixins/subscribe-mixin";
import { HomeAssistant } from "../../../../types";
import { LovelaceCard } from "../../types";
import { EnergySolarGraphCardConfig } from "../types";
@customElement("hui-energy-solar-graph-card")
export class HuiEnergySolarGraphCard
@ -258,9 +258,14 @@ export class HuiEnergySolarGraphCard
const data: ChartDataset<"bar" | "line">[] = [];
const entity = this.hass.states[source.stat_energy_from];
const borderColor =
const modifiedColor =
idx > 0
? rgb2hex(lab2rgb(labDarken(rgb2lab(hex2rgb(solarColor)), idx)))
? this.hass.themes.darkMode
? labBrighten(rgb2lab(hex2rgb(solarColor)), idx)
: labDarken(rgb2lab(hex2rgb(solarColor)), idx)
: undefined;
const borderColor = modifiedColor
? rgb2hex(lab2rgb(modifiedColor))
: solarColor;
let prevValue: number | null = null;

84
src/panels/lovelace/cards/energy/hui-energy-sources-table-card.ts
View File

@ -17,7 +17,7 @@ import {
rgb2lab,
hex2rgb,
} from "../../../../common/color/convert-color";
import { labDarken } from "../../../../common/color/lab";
import { labBrighten, labDarken } from "../../../../common/color/lab";
import { computeStateName } from "../../../../common/entity/compute_state_name";
import { formatNumber } from "../../../../common/number/format_number";
import "../../../../components/chart/statistics-chart";
@ -170,12 +170,17 @@ export class HuiEnergySourcesTableCard
this._data!.stats[source.stat_energy_from]
) || 0;
totalSolar += energy;
const color =
const modifiedColor =
idx > 0
? rgb2hex(
lab2rgb(labDarken(rgb2lab(hex2rgb(solarColor)), idx))
)
? this.hass.themes.darkMode
? labBrighten(rgb2lab(hex2rgb(solarColor)), idx)
: labDarken(rgb2lab(hex2rgb(solarColor)), idx)
: undefined;
const color = modifiedColor
? rgb2hex(lab2rgb(modifiedColor))
: solarColor;
return html`<tr class="mdc-data-table__row">
<td class="mdc-data-table__cell cell-bullet">
<div
@ -229,22 +234,26 @@ export class HuiEnergySourcesTableCard
this._data!.stats[source.stat_energy_to]
) || 0;
totalBattery += energyFrom - energyTo;
const fromColor =
const modifiedFromColor =
idx > 0
? rgb2hex(
lab2rgb(
labDarken(rgb2lab(hex2rgb(batteryFromColor)), idx)
)
)
? this.hass.themes.darkMode
? labBrighten(rgb2lab(hex2rgb(batteryFromColor)), idx)
: labDarken(rgb2lab(hex2rgb(batteryFromColor)), idx)
: undefined;
const fromColor = modifiedFromColor
? rgb2hex(lab2rgb(modifiedFromColor))
: batteryFromColor;
const toColor =
const modifiedToColor =
idx > 0
? rgb2hex(
lab2rgb(
labDarken(rgb2lab(hex2rgb(batteryToColor)), idx)
)
)
? this.hass.themes.darkMode
? labBrighten(rgb2lab(hex2rgb(batteryToColor)), idx)
: labDarken(rgb2lab(hex2rgb(batteryToColor)), idx)
: undefined;
const toColor = modifiedToColor
? rgb2hex(lab2rgb(modifiedToColor))
: batteryToColor;
return html`<tr class="mdc-data-table__row">
<td class="mdc-data-table__cell cell-bullet">
<div
@ -331,14 +340,17 @@ export class HuiEnergySourcesTableCard
if (cost !== null) {
totalGridCost += cost;
}
const color =
const modifiedColor =
idx > 0
? rgb2hex(
lab2rgb(
labDarken(rgb2lab(hex2rgb(consumptionColor)), idx)
)
)
? this.hass.themes.darkMode
? labBrighten(rgb2lab(hex2rgb(consumptionColor)), idx)
: labDarken(rgb2lab(hex2rgb(consumptionColor)), idx)
: undefined;
const color = modifiedColor
? rgb2hex(lab2rgb(modifiedColor))
: consumptionColor;
return html`<tr class="mdc-data-table__row">
<td class="mdc-data-table__cell cell-bullet">
<div
@ -391,12 +403,17 @@ export class HuiEnergySourcesTableCard
if (cost !== null) {
totalGridCost += cost;
}
const color =
const modifiedColor =
idx > 0
? rgb2hex(
lab2rgb(labDarken(rgb2lab(hex2rgb(returnColor)), idx))
)
? this.hass.themes.darkMode
? labBrighten(rgb2lab(hex2rgb(returnColor)), idx)
: labDarken(rgb2lab(hex2rgb(returnColor)), idx)
: undefined;
const color = modifiedColor
? rgb2hex(lab2rgb(modifiedColor))
: returnColor;
return html`<tr class="mdc-data-table__row">
<td class="mdc-data-table__cell cell-bullet">
<div
@ -473,12 +490,17 @@ export class HuiEnergySourcesTableCard
if (cost !== null) {
totalGasCost += cost;
}
const color =
const modifiedColor =
idx > 0
? rgb2hex(
lab2rgb(labDarken(rgb2lab(hex2rgb(gasColor)), idx))
)
? this.hass.themes.darkMode
? labBrighten(rgb2lab(hex2rgb(gasColor)), idx)
: labDarken(rgb2lab(hex2rgb(gasColor)), idx)
: undefined;
const color = modifiedColor
? rgb2hex(lab2rgb(modifiedColor))
: gasColor;
return html`<tr class="mdc-data-table__row">
<td class="mdc-data-table__cell cell-bullet">
<div

18
src/panels/lovelace/cards/energy/hui-energy-usage-graph-card.ts
View File

@ -1,10 +1,10 @@
import { ChartData, ChartDataset, ChartOptions } from "chart.js";
import {
startOfToday,
addHours,
differenceInDays,
endOfToday,
isToday,
differenceInDays,
addHours,
startOfToday,
} from "date-fns";
import { UnsubscribeFunc } from "home-assistant-js-websocket";
import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
@ -17,7 +17,7 @@ import {
rgb2hex,
rgb2lab,
} from "../../../../common/color/convert-color";
import { labDarken } from "../../../../common/color/lab";
import { labBrighten, labDarken } from "../../../../common/color/lab";
import { formatTime } from "../../../../common/datetime/format_time";
import { computeStateName } from "../../../../common/entity/compute_state_name";
import {
@ -477,9 +477,15 @@ export class HuiEnergyUsageGraphCard
Object.entries(sources).forEach(([statId, source], idx) => {
const data: ChartDataset<"bar">[] = [];
const entity = this.hass.states[statId];
const borderColor =
const modifiedColor =
idx > 0
? rgb2hex(lab2rgb(labDarken(rgb2lab(hex2rgb(colors[type])), idx)))
? this.hass.themes.darkMode
? labBrighten(rgb2lab(hex2rgb(colors[type])), idx)
: labDarken(rgb2lab(hex2rgb(colors[type])), idx)
: undefined;
const borderColor = modifiedColor
? rgb2hex(lab2rgb(modifiedColor))
: colors[type];
data.push({

3
src/panels/lovelace/cards/hui-media-control-card.ts
View File

@ -235,6 +235,9 @@ export class HuiMediaControlCard extends LitElement implements LovelaceCard {
<div>
<ha-icon-button
.path=${mdiDotsVertical}
.label=${this.hass.localize(
"ui.panel.lovelace.cards.show_more_info"
)}
class="more-info"
@click=${this._handleMoreInfo}
></ha-icon-button>

38
src/panels/lovelace/entity-rows/hui-media-player-entity-row.ts
View File

@ -30,6 +30,7 @@ import "../../../components/ha-slider";
import { UNAVAILABLE, UNAVAILABLE_STATES, UNKNOWN } from "../../../data/entity";
import {
computeMediaDescription,
ControlButton,
MediaPlayerEntity,
SUPPORT_NEXT_TRACK,
SUPPORT_PAUSE,
@ -108,6 +109,7 @@ class HuiMediaPlayerEntityRow extends LitElement implements LovelaceRow {
}
const entityState = stateObj.state;
const controlButton = this._computeControlButton(stateObj);
const buttons = html`
${!this._narrow &&
@ -116,6 +118,9 @@ class HuiMediaPlayerEntityRow extends LitElement implements LovelaceRow {
? html`
<ha-icon-button
.path=${mdiSkipPrevious}
.label=${this.hass.localize(
"ui.card.media_player.media_previous_track"
)}
@click=${this._previousTrack}
></ha-icon-button>
`
@ -130,7 +135,10 @@ class HuiMediaPlayerEntityRow extends LitElement implements LovelaceRow {
supportsFeature(stateObj, SUPPORT_PAUSE)))
? html`
<ha-icon-button
.path=${this._computeControlIcon(stateObj)}
.path=${controlButton.icon}
.label=${this.hass.localize(
`ui.card.media_player.${controlButton.action}`
)}
@click=${this._playPauseStop}
></ha-icon-button>
`
@ -140,6 +148,9 @@ class HuiMediaPlayerEntityRow extends LitElement implements LovelaceRow {
? html`
<ha-icon-button
.path=${mdiSkipNext}
.label=${this.hass.localize(
"ui.card.media_player.media_next_track"
)}
@click=${this._nextTrack}
></ha-icon-button>
`
@ -162,6 +173,7 @@ class HuiMediaPlayerEntityRow extends LitElement implements LovelaceRow {
? html`
<ha-icon-button
.path=${mdiPower}
.label=${this.hass.localize("ui.card.media_player.turn_on")}
@click=${this._togglePower}
></ha-icon-button>
`
@ -175,6 +187,7 @@ class HuiMediaPlayerEntityRow extends LitElement implements LovelaceRow {
? html`
<ha-icon-button
.path=${mdiPower}
.label=${this.hass.localize("ui.card.media_player.turn_off")}
@click=${this._togglePower}
></ha-icon-button>
`
@ -193,6 +206,13 @@ class HuiMediaPlayerEntityRow extends LitElement implements LovelaceRow {
.path=${stateObj.attributes.is_volume_muted
? mdiVolumeOff
: mdiVolumeHigh}
.label=${this.hass.localize(
`ui.card.media_player.${
stateObj.attributes.is_volume_muted
? "media_volume_mute"
: "media_volume_unmute"
}`
)}
@click=${this._toggleMute}
></ha-icon-button>
`
@ -214,10 +234,16 @@ class HuiMediaPlayerEntityRow extends LitElement implements LovelaceRow {
? html`
<ha-icon-button
.path=${mdiVolumeMinus}
.label=${this.hass.localize(
"ui.card.media_player.media_volume_down"
)}
@click=${this._volumeDown}
></ha-icon-button>
<ha-icon-button
.path=${mdiVolumePlus}
.label=${this.hass.localize(
"ui.card.media_player.media_volume_up"
)}
@click=${this._volumeUp}
></ha-icon-button>
`
@ -249,14 +275,14 @@ class HuiMediaPlayerEntityRow extends LitElement implements LovelaceRow {
this._veryNarrow = (this.clientWidth || 0) < 225;
}
private _computeControlIcon(stateObj: HassEntity): string {
private _computeControlButton(stateObj: HassEntity): ControlButton {
return stateObj.state === "on"
? mdiPlayPause
? { icon: mdiPlayPause, action: "media_play_pause" }
: stateObj.state !== "playing"
? mdiPlay
? { icon: mdiPlay, action: "media_play" }
: supportsFeature(stateObj, SUPPORT_PAUSE)
? mdiPause
: mdiStop;
? { icon: mdiPause, action: "media_pause" }
: { icon: mdiStop, action: "media_stop" };
}
private _togglePower(): void {

16
src/translations/en.json
View File

@ -195,8 +195,14 @@
"turn_off": "Turn off",
"media_play": "Play",
"media_play_pause": "Play/pause",
"media_next_track": "Next",
"media_previous_track": "Previous",
"media_pause": "Pause",
"media_stop": "Stop",
"media_next_track": "Next track",
"media_previous_track": "Previous track",
"media_volume_up": "Volume up",
"media_volume_down": "Volume down",
"media_volume_mute": "Volume mute",
"media_volume_unmute": "Volume unmute",
"text_to_speak": "Text to speak"
},
"persistent_notification": {
@ -689,7 +695,7 @@
"close_cover": "Close cover",
"open_tilt_cover": "Open cover tilt",
"close_tilt_cover": "Close cover tilt",
"stop_cover": "Stop cover from moving"
"stop_cover": "Stop cover"
}
},
"entity_registry": {
@ -922,6 +928,7 @@
"dismiss": "Dismiss"
},
"sidebar": {
"external_app_configuration": "App Configuration",
"sidebar_toggle": "Sidebar Toggle",
"done": "Done",
"hide_panel": "Hide panel",
@ -4269,7 +4276,8 @@
"create_backup": "Create backup before updating",
"description": "You have {version} installed. Click update to update to version {newest_version}",
"updating": "Updating {name} to version {version}",
"creating_backup": "Creating backup of {name}"
"creating_backup": "Creating backup of {name}",
"no_update": "No update available for {name}"
},
"confirm": {
"restart": {