feat(l10n): Add Internationalisation

docs/advanced.html

@@ -69,6 +69,7 @@ <h2>Store Actions</h2>
                         <tr><td>SET_SHARE_LINK_STARTTIME</td><td>Sets link start time</td><td>Time (hh:mm:ss)</td></tr>
                         <tr><td>SET_SHARE_EMBED_SIZE</td><td>Sets embed size</td><td>Dimensions (width x height)</td></tr>
                         <tr><td>TOGGLE_TAB</td><td>Toggles a tab</td><td>chapters|settings</td></tr>
+                        <tr><td>SET_LANGUAGE</td><td>Sets the language of the player</td><td>language</td></tr>
                     </tbody>
                 </table>
             </div>

docs/config.html

@@ -159,6 +159,23 @@ <h1>Configuration</h1>
         secondary: &#x27;#EC79F2&#x27;
     }
 }</code></pre>
+
+                <table>
+                    <thead>
+                        <tr><th colspan="2">Runtime</th></tr>
+                    </thead>
+                    <tbody>
+                        <tr><td>runtime.platform</td><td>Platform (desktop|mobile), is detected by the player</td></tr>
+                        <tr><td>runtime.language</td><td>Language (en|de|...), defaults to browser language</td></tr>
+                    </tbody>
+                </table>
+
+<pre><code class="language-js">{
+    runtime: {
+        platform: &#x27;desktop&#x27;,
+        language: &#x27;en&#x27;
+    }
+}</code></pre>
             </div>
         </main>
     </div>

docs/playground.html

@@ -88,6 +88,9 @@ <h1>Playground</h1>
                         reference: {
                             config: '//podlove-player.surge.sh/fixtures/example.json',
                             share: '//podlove-player.surge.sh/share'
+                        },
+                        runtime: {
+                            language: 'en'
                         }
                     };
 

package.json

@@ -46,7 +46,7 @@
     "clipboard": "1.6.0",
     "color": "1.0.3",
     "detect-browser": "1.6.2",
-    "ent": "^2.2.0",
+    "ent": "2.2.0",
     "foundation-sites": "6.3.1",
     "hashcode": "1.0.3",
     "howler": "2.0.3",
@@ -59,14 +59,16 @@
     "redux": "3.5.2",
     "revue": "3.0.0",
     "superagent": "3.4.1",
-    "vue": "2.2.6"
+    "vue": "2.2.6",
+    "vue-i18n": "6.1.1"
   },
   "devDependencies": {
     "ava": "0.18.2",
     "babel-core": "6.22.0",
     "babel-loader": "7.0.0",
+    "babel-plugin-add-module-exports": "0.2.1",
     "babel-plugin-lodash": "3.2.11",
-    "babel-plugin-transform-object-rest-spread": "^6.23.0",
+    "babel-plugin-transform-object-rest-spread": "6.23.0",
     "babel-plugin-transform-runtime": "6.22.0",
     "babel-plugin-webpack-alias": "2.1.2",
     "babel-preset-bluebird": "1.0.1",
@@ -79,8 +81,7 @@
     "css-loader": "0.25.0",
     "file-loader": "0.11.1",
     "html-webpack-plugin": "2.26.0",
-    "inject-loader": "3.0.0-beta4",
-    "inline-environment-variables-webpack-plugin": "1.2.0",
+    "inject-loader": "3.0.0",
     "lolex": "1.6.0",
     "node-sass": "4.1.1",
     "nyc": "10.1.2",

src/app.js

@@ -1,14 +1,12 @@
-import Vue from 'vue'
 import { head } from 'lodash'
 
 import runtime from 'utils/runtime'
-import registerDirectives from './directives'
+import { Renderer } from 'core'
+import i18n from 'lang'
 
 // Import share static page
 require('file-loader?name=share.html!./statics/share.html')
 
-registerDirectives(Vue)
-
 // Store
 import store from 'store'
 
@@ -17,14 +15,15 @@ import App from './components/App.vue'
 
 export default config => {
   // Enhance config with app debug information
-  config = Object.assign({}, config, { runtime })
+  config = Object.assign({}, { runtime }, config)
 
   // Initialize meta for store
   store.dispatch(store.actions.init(config))
 
   window.PODLOVE_STORE = store
 
-  return new Vue({
+  return new Renderer({
+    i18n,
     el: head(document.getElementsByTagName('PodlovePlayer')),
     render: h => h(App)
   })

src/components/App.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="podlove" :class="{[mode]: mode, [platform]: platform}">
+  <div class="podlove" :class="{[mode]: mode, [runtime.platform]: runtime.platform}">
     <PodloveInfo />
     <PodlovePlayer />
     <PodloveTabs />
@@ -14,9 +14,18 @@
   export default {
     name: 'app',
     data () {
+      // i18n integration
+      this.$i18n.locale = this.$select('runtime.language')
+
       return {
         mode: this.$select('mode'),
-        platform: this.$select('runtime.platform')
+        runtime: this.$select('runtime')
+      }
+    },
+    watch: {
+      runtime (runtime) {
+        // i18n integration
+        this.$i18n.locale = runtime.language
       }
     },
     components: {

src/components/info/Info.vue

@@ -91,7 +91,7 @@
 
     .subtitle {
       overflow: hidden;
-      height: 1.5 * 2em; 
+      height: 1.5 * 2em;
     }
   }
 

src/components/tabs/Tabs.vue

@@ -3,15 +3,15 @@
     <TabHeader>
       <TabHeaderItem :active="tabs.chapters" :click="toggleTab('chapters')" v-if="chapters.length > 0">
         <ChaptersIcon slot="icon"></ChaptersIcon>
-        <span slot="title">Kapitel</span>
+        <span slot="title">{{ $t('CHAPTERS.TITLE') }}</span>
       </TabHeaderItem>
       <TabHeaderItem v-if="(reference.config && reference.share) || reference.origin" :active="tabs.share" :click="toggleTab('share')">
         <ShareIcon slot="icon"></ShareIcon>
-        <span slot="title">Share</span>
+        <span slot="title">{{ $t('SHARE.TITLE') }}</span>
       </TabHeaderItem>
       <TabHeaderItem :active="tabs.settings" :click="toggleTab('settings')">
         <SettingsIcon slot="icon"></SettingsIcon>
-        <span slot="title">Settings</span>
+        <span slot="title">{{ $t('SETTINGS.TITLE') }}</span>
       </TabHeaderItem>
     </TabHeader>
     <TabBody :active="tabs.chapters" v-if="chapters.length > 0">
@@ -28,6 +28,7 @@
 
 <script>
 import store from 'store'
+import { translate } from 'core'
 
 import TabHeader from 'shared/TabHeader.vue'
 import TabHeaderItem from 'shared/TabHeaderItem.vue'

src/components/tabs/chapters/ChapterEntry.vue

@@ -3,7 +3,7 @@
     <span class="index">{{index + 1}}</span>
     <span class="title truncate">{{chapter.title}}</span>
     <span class="timer">{{remainingTime(chapter, playtime)}}</span>
-    
+
     <span class="progress" :style="progressStyle(theme, chapter, playtime)"></span>
   </div>
 </template>

src/components/tabs/settings/Settings.vue

@@ -2,7 +2,7 @@
   <div class="podlove-settings">
     <div class="seperator">
       <h4 class="label">
-        <span class="title">Volume</span>
+        <span class="title">{{ $t('SETTINGS.VOLUME') }}</span>
         <span class="volume">{{decimalToPercent(volume)}}%</span>
       </h4>
       <div class="input-slider">
@@ -13,7 +13,7 @@
     </div>
     <div class="seperator">
       <h4 class="label">
-        <span class="title">Speed</span>
+        <span class="title">{{ $t('SETTINGS.SPEED') }}</span>
         <span class="rate">{{decimalToPercent(rate)}}%</span>
       </h4>
       <div class="input-slider">
@@ -23,13 +23,14 @@
       </div>
     </div>
     <div class="footer">
-      <a class="version" title="Export Debug State" :href="exportStore()" download="podlove-web-player-debug.json">Podlove Web Player v{{version}}</a>
+      <a class="version" title="Export Debug" :href="exportStore()" download="podlove-web-player-debug.json">Podlove Web Player v{{version}}</a>
     </div>
   </div>
 </template>
 
 <script>
   import store from 'store'
+
   import PodloveSlider from 'shared/Slider.vue'
   import PodloveButton from 'shared/Button.vue'
 

src/components/tabs/share/ShareEmbed.vue

@@ -1,23 +1,23 @@
 <template>
     <div class="embed">
-      <h4 class="title">Embed</h4>
+      <h4 class="title">{{ $t('SHARE.EMBED') }}</h4>
       <div class="input-row input-group">
         <input type="text" class="input-text" disabled :value="clipboardContent(reference, share.embed, playtime)" />
         <PodloveButton
-          class="input-button"
+          class="input-button truncate"
           :data-clipboard-text="clipboardContent(reference, share.embed, playtime)"
           v-clipboard
           :style="buttonStyle(theme)">
-            copy
+             {{ $t('SHARE.COPY') }}
         </PodloveButton>
       </div>
       <div class="input-row">
         <div class="share-config--time">
-          <label class="input-label"><input type="checkbox" class="embed--checkbox" :value="share.embed.start" v-on:change="toggleEmbedStart(playtime)" /> Start:</label>
+          <label class="input-label"><input type="checkbox" class="embed--checkbox" :value="share.embed.start" v-on:change="toggleEmbedStart(playtime)"/> {{ $t('SHARE.START') }}</label>
           <input type="text" class="input-text" :value="secondsToTime(share.embed.starttime)" v-on:input="setStarttime"/>
         </div>
         <div class="share-config--size">
-          <label class="input-label">Size:</label>
+          <label class="input-label">{{ $t('SHARE.SIZE') }}</label>
           <select class="share-input" v-model="share.embed.size" v-on:change="setEmbedSize(share.embed.size)">
             <option v-for="option in share.embed.availableSizes" v-bind:value="option">
               {{ option }}

src/components/tabs/share/ShareLink.vue

@@ -1,19 +1,19 @@
 <template>
     <div class="link">
-        <h4 class="title">Link</h4>
+        <h4 class="title">{{ $t('SHARE.LINK') }}</h4>
         <div class="input-row input-group">
             <input type="text" class="input-text" disabled :value="clipboardContent(reference, share.link, playtime)" />
             <PodloveButton
-                class="input-button"
+                class="input-button truncate"
                 :data-clipboard-text="clipboardContent(reference, share.link, playtime)"
                 v-clipboard
                 :style="buttonStyle(theme)">
-                copy
+                {{ $t('SHARE.COPY') }}
             </PodloveButton>
         </div>
         <div class="input-row">
             <div>
-                <label class="input-label"><input type="checkbox" :value="share.link.start" v-on:change="toggleStart(playtime)" /> Start:</label>
+                <label class="input-label"><input type="checkbox" :value="share.link.start" v-on:change="toggleStart(playtime)"/> {{ $t('SHARE.START') }}</label>
                 <input type="text" class="input-text" :value="secondsToTime(share.link.starttime)" v-on:input="setStarttime"/>
             </div>
         </div>
@@ -72,7 +72,8 @@
                 reference: this.$select('reference'),
                 playtime: this.$select('playtime'),
                 duration: this.$select('duration'),
-                theme: this.$select('theme')
+                theme: this.$select('theme'),
+                translate: this.$select('l10n')
             }
         },
         methods: {
@@ -91,4 +92,4 @@
 
 <style lang="scss">
     @import 'inputs';
-</style>
+</style>

src/core/index.js

@@ -0,0 +1,18 @@
+import Vue from 'vue'
+import VueI18n from 'vue-i18n'
+
+import clipboard from './directives/clipboard'
+import marquee from './directives/marquee'
+import languagePacks from 'lang'
+
+const createRenderer = instance => {
+  instance.directive('clipboard', clipboard)
+  instance.directive('marquee', marquee)
+  return instance
+}
+
+const Renderer = createRenderer(Vue)
+
+export {
+  Renderer
+}

src/lang/de.json

@@ -0,0 +1,19 @@
+{
+  "CHAPTERS": {
+    "TITLE": "Kapitel"
+  },
+  "SHARE": {
+    "TITLE": "Teilen",
+    "LINK": "Link",
+    "EMBED": "Einbetten",
+    "START": "Start:",
+    "SIZE": "Größe:",
+    "COPY": "kopieren"
+  },
+  "SETTINGS": {
+    "TITLE": "Einstellung",
+    "VOLUME": "Lautstärke",
+    "SPEED": "Geschwindigkeit",
+    "DEBUG_STATE": "Debug State exportieren"
+  }
+}

src/lang/en.json

@@ -0,0 +1,19 @@
+{
+  "CHAPTERS": {
+    "TITLE": "Chapters"
+  },
+  "SHARE": {
+    "TITLE": "Share",
+    "LINK": "Link",
+    "EMBED": "Embed",
+    "START": "Start:",
+    "SIZE": "Size:",
+    "COPY": "copy"
+  },
+  "SETTINGS": {
+    "TITLE": "Settings",
+    "VOLUME": "Volume",
+    "SPEED": "Speed",
+    "DEBUG_STATE": "Export Debug State"
+  }
+}

src/lang/index.js

@@ -0,0 +1,15 @@
+import Vue from 'vue'
+import VueI18n from 'vue-i18n'
+
+const messages = {
+  en: require('./en.json'),
+  de: require('./de.json')
+}
+
+Vue.use(VueI18n)
+
+export default new VueI18n({
+  locale: 'en',
+  fallbackLocale: 'en',
+  messages
+})

src/store/actions/index.js

@@ -4,5 +4,6 @@ import * as tabs from './tabs'
 import * as share from './share'
 import * as theme from './theme'
 import * as quantiles from './quantiles'
+import * as l10n from './l10n'
 
-export default Object.assign({}, init, player, tabs, share, theme, quantiles)
+export default Object.assign({}, init, player, tabs, share, theme, quantiles, l10n)

src/store/actions/l10n.js

@@ -0,0 +1,8 @@
+const setLanguage = lang => ({
+  type: 'SET_LANGUAGE',
+  payload: lang
+})
+
+export {
+  setLanguage
+}