Skip to content

Commit

Permalink
✨ Add support for card specific translations
Browse files Browse the repository at this point in the history
  • Loading branch information
kalkih committed Jul 29, 2020
1 parent 9aac02d commit 3551bce
Show file tree
Hide file tree
Showing 7 changed files with 53 additions and 17 deletions.
11 changes: 7 additions & 4 deletions src/components/groupList.js
Original file line number Diff line number Diff line change
@@ -1,11 +1,14 @@
import { LitElement, html, css } from 'lit-element';

import t from '../utils/translation';

import './groupItem';
import './button';

class MiniMediaPlayerGroupList extends LitElement {
static get properties() {
return {
hass: {},
entities: {},
player: {},
visible: Boolean,
Expand Down Expand Up @@ -39,22 +42,22 @@ class MiniMediaPlayerGroupList extends LitElement {
const { id } = this.player;
return html`
<div class='mmp-group-list'>
<span class='mmp-group-list__title'>Group speakers</span>
<span class='mmp-group-list__title'>${t(this.hass, 'title.speaker_management')}</span>
${this.entities.map(item => this.renderItem(item, id))}
<div class='mmp-group-list__buttons'>
<mmp-button raised ?disabled=${!isGrouped}
@click=${e => this.player.handleGroupChange(e, id, false)}>
<span>Leave</span>
<span>${t(this.hass, 'label.leave')}</span>
</mmp-button>
${isGrouped && isMaster ? html`
<mmp-button raised
@click=${e => this.player.handleGroupChange(e, group, false)}>
<span>Ungroup</span>
<span>${t(this.hass, 'label.ungroup')}</span>
</mmp-button>
` : html``}
<mmp-button raised ?disabled=${!isMaster}
@click=${e => this.player.handleGroupChange(e, this.entities.map(item => item.entity_id), true)}>
<span>Group all</span>
<span>${t(this.hass, 'label.group_all')}</span>
</mmp-button>
</div>
</div>
Expand Down
6 changes: 3 additions & 3 deletions src/components/powerstrip.js
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ import './mediaControls';
import { ICON } from '../const';
import sharedStyle from '../sharedStyle';

import getLabel from '../utils/getLabel';
import t from '../utils/translation';

class MiniMediaPlayerPowerstrip extends LitElement {
static get properties() {
Expand Down Expand Up @@ -60,7 +60,7 @@ class MiniMediaPlayerPowerstrip extends LitElement {
if (this.player.isUnavailable)
return html`
<span class='label ellipsis'>
${getLabel(this.hass, 'state.default.unavailable', 'Unavailable')}
${t(this.hass, 'state.unavailable', 'state.default.unavailable')}
</span>
`;

Expand Down Expand Up @@ -115,7 +115,7 @@ class MiniMediaPlayerPowerstrip extends LitElement {
else
return html`
<span class='label ellipsis'>
${getLabel(this.hass, 'state.media_player.idle', 'Idle')}
${t(this.hass, 'state.idle', 'state.media_player.idle')}
</span>
`;
}
Expand Down
6 changes: 3 additions & 3 deletions src/components/tts.js
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import { LitElement, html, css } from 'lit-element';

import getLabel from '../utils/getLabel';
import t from '../utils/translation';

class MiniMediaPlayerTts extends LitElement {
static get properties() {
Expand All @@ -12,7 +12,7 @@ class MiniMediaPlayerTts extends LitElement {
}

get label() {
return getLabel(this.hass, 'ui.card.media_player.text_to_speak', 'Say');
return t(this.hass, 'placeholder.tts', 'ui.card.media_player.text_to_speak', 'Say');
}

get input() {
Expand All @@ -31,7 +31,7 @@ class MiniMediaPlayerTts extends LitElement {
@click=${e => e.stopPropagation()}>
</paper-input>
<mmp-button class='mmp-tts__button' @click=${this.handleTts}>
<span>SEND</span>
<span>${t(this.hass, 'label.send')}</span>
</mmp-button>
`;
}
Expand Down
1 change: 1 addition & 0 deletions src/main.js
Original file line number Diff line number Diff line change
Expand Up @@ -228,6 +228,7 @@ class MiniMediaPlayer extends LitElement {
</mmp-tts>
` : ''}
<mmp-group-list
.hass=${this.hass}
.visible=${this.edit}
.entities=${config.speaker_group.entities}
.player=${this.player}>
Expand Down
24 changes: 24 additions & 0 deletions src/translations.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,24 @@
// Add additional languages with their ISO 639-1 language code

const translations = {
en: {
placeholder: {
tts: 'Text to speak',
},
label: {
leave: 'Leave',
ungroup: 'Ungroup',
group_all: 'Group all',
send: 'Send',
},
state: {
idle: 'Idle',
unavailable: 'Unavailable',
},
title: {
speaker_management: 'Group management',
},
},
};

export default translations;
7 changes: 0 additions & 7 deletions src/utils/getLabel.js

This file was deleted.

15 changes: 15 additions & 0 deletions src/utils/translation.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
import translations from '../translations';

const DEFAULT_LANG = 'en';

const getNestedProp = (obj, path) => path.split('.').reduce((p, c) => p && p[c] || null, obj);

const translation = (hass, label, hassLabel = undefined, fallback = 'unknown') => {
const lang = hass.selectedLanguage || hass.language;
return translations[lang] && getNestedProp(translations[lang], label)
|| hass.resources[lang] && hass.resources[lang][hassLabel]
|| getNestedProp(translations[DEFAULT_LANG], label)
|| fallback;
};

export default translation;

0 comments on commit 3551bce

Please sign in to comment.