✨ Add support for card specific translations

kalkih · Jul 29, 2020 · 3551bce · 3551bce
1 parent 9aac02d
commit 3551bce
Show file tree

Hide file tree

Showing 7 changed files with 53 additions and 17 deletions.
diff --git a/src/components/groupList.js b/src/components/groupList.js
@@ -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,
@@ -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>

diff --git a/src/components/powerstrip.js b/src/components/powerstrip.js
@@ -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() {
@@ -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>
       `;
 
@@ -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>
       `;
   }

diff --git a/src/components/tts.js b/src/components/tts.js
@@ -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() {
@@ -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() {
@@ -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>
     `;
   }

diff --git a/src/main.js b/src/main.js
@@ -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}>

diff --git a/src/translations.js b/src/translations.js
@@ -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;
diff --git a/src/utils/getLabel.js b/src/utils/getLabel.js
diff --git a/src/utils/translation.js b/src/utils/translation.js
@@ -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;