Translations (stream-labs#443)

app/app.ts

@@ -1,3 +1,5 @@
+import { I18nService } from 'services/i18n';
+
 window['eval'] = global.eval = () => {
   throw new Error('window.eval() is disabled for security');
 };
@@ -17,12 +19,14 @@ import Raven from 'raven-js';
 import RavenVue from 'raven-js/plugins/vue';
 import RavenConsole from 'raven-js/plugins/console';
 import VTooltip from 'v-tooltip';
+import VueI18n from 'vue-i18n';
 
 const { ipcRenderer, remote } = electron;
 
 const slobsVersion = remote.process.env.SLOBS_VERSION;
 const isProduction = process.env.NODE_ENV === 'production';
 
+
 // This is the development DSN
 let sentryDsn = 'https://[email protected]/252950';
 
@@ -88,6 +92,7 @@ document.addEventListener('DOMContentLoaded', () => {
   const storePromise = createStore();
   const servicesManager: ServicesManager = ServicesManager.instance;
   const windowsService: WindowsService = WindowsService.instance;
+  const i18nService: I18nService = I18nService.instance;
   const obsApiService = ObsApiService.instance;
   const windowId = Utils.getCurrentUrlParams().windowId;
 
@@ -103,16 +108,31 @@ document.addEventListener('DOMContentLoaded', () => {
 
   window['obs'] = obsApiService.nodeObs;
 
-  storePromise.then(store => {
+  storePromise.then(async store => {
+
+    Vue.use(VueI18n);
+
+    await i18nService.load();
+
+    const i18n = new VueI18n({
+      locale: i18nService.state.locale,
+      fallbackLocale: i18nService.getFallbackLocale(),
+      messages: i18nService.getLoadedDictionaries()
+    });
+
+    I18nService.setVuei18nInstance(i18n);
+
     const vm = new Vue({
       el: '#app',
+      i18n,
       store,
       render: h => {
         const componentName = windowsService.state[windowId].componentName;
 
         return h(windowsService.components[componentName]);
       }
     });
+
   });
 
   // Used for replacing the contents of this window with

app/components/EditableSceneCollection.vue

@@ -24,14 +24,14 @@
     Updated {{ modified }}
   </span>
   <a class="editable-scene-collection--action link link--underlined">
-    <span @click.stop="startRenaming">Rename</span>
+    <span @click.stop="startRenaming">{{ $t('Rename') }}</span>
   </a>
   <a v-if="!duplicating" class="editable-scene-collection--action link link--underlined">
-    <span @click.stop="duplicate">Duplicate</span>
+    <span @click.stop="duplicate">{{ $t('Duplicate') }}</span>
   </a>
   <i class="fa fa-spinner fa-pulse" v-else />
   <a class="editable-scene-collection--action editable-scene-collection--action-delete link link--underlined">
-    <span @click.stop="remove">Delete</span>
+    <span @click.stop="remove">{{ $t('Delete') }}</span>
   </a>
 </div>
 </template>

app/components/EditableSceneCollection.vue.ts

@@ -3,6 +3,7 @@ import { Component, Prop, Watch } from 'vue-property-decorator';
 import { SceneCollectionsService } from 'services/scene-collections';
 import { Inject } from 'util/injector';
 import moment from 'moment';
+import { $t } from 'services/i18n';
 
 @Component({})
 export default class EditableSceneCollection extends Vue {
@@ -79,7 +80,8 @@ export default class EditableSceneCollection extends Vue {
   }
 
   remove() {
-    if (!confirm(`Are you sure you want to remove ${this.collection.name}?`)) return;
+    if (!confirm($t('Are you sure you want to remove %{collectionName}?', { collectionName: this.collection.name })))
+      return;
     this.sceneCollectionsService.delete(this.collectionId);
   }
 

app/components/ExperimentalSettings.vue

@@ -1,7 +1,7 @@
 <template>
   <div>
     <div class="section">
-      <br/><br/>
+      <language-settings/>
     </div>
 
     <!--<div class="section">-->

app/components/ExperimentalSettings.vue.ts

@@ -4,9 +4,10 @@ import { Inject } from '../util/injector';
 import GenericForm from './shared/forms/GenericForm.vue';
 import { TFormData, TObsValue } from './shared/forms/Input';
 import { ICustomizationServiceApi } from 'services/customization';
+import LanguageSettings from 'components/LanguageSettings.vue';
 
 @Component({
-  components: { GenericForm }
+  components: { GenericForm, LanguageSettings }
 })
 export default class ExperimentalSettings extends Vue {
 

app/components/ExtraSettings.vue

@@ -1,31 +1,31 @@
 <template>
 <div>
   <div class="section">
-    <p>If you are experiencing weird behavior, you can try deleting your cache directory.  This will result in you losing your scene configuration and settings, but can fix some stability issues.</p>
+    <p>{{ $t('If you are experiencing weird behavior, you can try deleting your cache directory.  This will result in you losing your scene configuration and settings, but can fix some stability issues.')}}</p>
     <div class="margin-bot--20">
       <a class="link link--underlined" @click="showCacheDir">
-        <i class="icon-view" /> <span>Show Cache Directory</span>
+        <i class="icon-view" /> <span>{{ $t('Show Cache Directory')}}</span>
       </a>
     </div>
     <div class="margin-bot--20">
       <a class="link link--underlined" @click="deleteCacheDir">
-        <i class="icon-trash" /> <span>Delete Cache and Restart</span></a>
+        <i class="icon-trash" /> <span>{{ $t('Delete Cache and Restart') }}</span></a>
     </div>
     <div class="margin-bot--20">
       <a class="link link--underlined" @click="uploadCacheDir" :disabled="cacheUploading">
-        <i class="fa fa-upload" /> <span>Upload Cache to Developers</span>
+        <i class="fa fa-upload" /> <span>{{ $t('Upload Cache to Developers') }}</span>
         <i class="fa fa-spinner fa-spin" v-if="cacheUploading" />
       </a>
     </div>
   </div>
   <div class="section">
     <BoolInput :value="streamInfoUpdateModel" @input="setStreamInfoUpdate" />
     <button class="button button--action" @click="restartStreamlabelsSession">
-      Restart Streamlabels Session
+      {{ $t('Restart Streamlabels Session') }}
     </button>
     <br/>
     <button class="button button--action" @click="runAutoOptimizer" v-if="isTwitch && !isRecordingOrStreaming">
-      Run Auto Optimizer
+      {{ $t('Run Auto Optimizer') }}
     </button>
   </div>
 </div>

app/components/ExtraSettings.vue.ts

@@ -11,6 +11,7 @@ import { OnboardingService } from 'services/onboarding';
 import { WindowsService } from 'services/windows';
 import { UserService } from 'services/user';
 import { StreamingService } from 'services/streaming';
+import { $t } from 'services/i18n';
 
 @Component({
   components: { BoolInput }
@@ -29,7 +30,7 @@ export default class ExtraSettings extends Vue {
   get streamInfoUpdateModel(): IFormInput<boolean> {
     return {
       name: 'stream_info_udpate',
-      description: 'Confirm stream title and game before going live',
+      description: $t('Confirm stream title and game before going live'),
       value: this.customizationService.state.updateStreamInfoOnLive
     };
   }
@@ -47,7 +48,7 @@ export default class ExtraSettings extends Vue {
   deleteCacheDir() {
     if (
       confirm(
-        'WARNING! You will lose all scenes, sources, and settings. This cannot be undone!'
+        $t('WARNING! You will lose all scenes, sources, and settings. This cannot be undone!')
       )
     ) {
       electron.remote.app.relaunch({ args: ['--clearCacheDir'] });
@@ -60,15 +61,15 @@ export default class ExtraSettings extends Vue {
     this.cacheUploaderService.uploadCache().then(file => {
       electron.remote.clipboard.writeText(file);
       alert(
-        `Your cache directory has been successfully uploaded.  The file name ${file} has been copied to your clipboard.  Please paste it into discord and tag a developer.`
+        $t('Your cache directory has been successfully uploaded.  The file name %{file} has been copied to your clipboard.  Please paste it into discord and tag a developer.', { file })
       );
       this.cacheUploading = false;
     });
   }
 
   restartStreamlabelsSession() {
     this.streamlabelsService.restartSession().then(result => {
-      if (result) alert('Streamlabels session has been succesfully restarted!');
+      if (result) alert($t('Streamlabels session has been succesfully restarted!'));
     });
   }
 

app/components/LanguageSettings.vue

@@ -0,0 +1,7 @@
+<template>
+<div class="section">
+  <GenericForm :value="settings" @input="save"></GenericForm>
+</div>
+</template>
+
+<script lang="ts" src="./LanguageSettings.vue.ts"></script>

app/components/LanguageSettings.vue.ts

@@ -0,0 +1,33 @@
+import Vue from 'vue';
+import { Component } from 'vue-property-decorator';
+import { Inject } from 'util/injector';
+import { $t, I18nServiceApi } from 'services/i18n';
+import GenericForm from 'components/shared/forms/GenericForm.vue';
+import { TFormData } from './shared/forms/Input';
+import electron from 'electron';
+
+@Component({
+  components: { GenericForm }
+})
+export default class LanguageSettings extends Vue {
+  @Inject() private i18nService: I18nServiceApi;
+
+  settings = this.i18nService.getLocaleFormData();
+
+  private async save(data: TFormData) {
+    const choice = electron.remote.dialog.showMessageBox(
+      electron.remote.getCurrentWindow(),
+      {
+        type: 'question',
+        buttons: [$t('Yes'), $t('No')],
+        title: $t('Confirm'),
+        message: $t('This action will restart the application. Continue?')
+      });
+
+    if (choice !== 0) return;
+
+    await this.i18nService.setLocale(data[0].value as string);
+    this.settings = this.i18nService.getLocaleFormData();
+  }
+
+}

app/components/LiveDock.vue.ts

@@ -10,6 +10,7 @@ import Slider from './shared/Slider.vue';
 import electron from 'electron';
 import { getPlatformService } from 'services/platforms';
 import { YoutubeService } from 'services/platforms/youtube';
+import { $t } from 'services/i18n';
 
 @Component({
   components: {
@@ -33,9 +34,9 @@ export default class LiveDock extends Vue {
     chat: Chat;
   };
 
-  viewStreamTooltip = 'Go to Youtube to view your live stream';
-  editStreamInfoTooltip = 'Edit your stream title and description';
-  controlRoomTooltip = 'Go to Youtube Live Dashboard to control your stream';
+  viewStreamTooltip = $t('Go to Youtube to view your live stream');
+  editStreamInfoTooltip = $t('Edit your stream title and description');
+  controlRoomTooltip = $t('Go to Youtube Live Dashboard to control your stream');
 
   mounted() {
     this.elapsedInterval = window.setInterval(() => {

app/components/Login.vue

@@ -8,7 +8,7 @@
     <div
       v-else>
       <a class="link link--uppercase" @click="login">
-        <i class="fa fa-sign-in"/> Login
+        <i class="fa fa-sign-in"/> {{ $t('Login') }}
       </a>
     </div>
   </div>

app/components/Login.vue.ts

@@ -3,6 +3,7 @@ import { Component } from 'vue-property-decorator';
 import { UserService } from 'services/user';
 import { OnboardingService } from 'services/onboarding';
 import { Inject } from 'util/injector';
+import { $t } from 'services/i18n';
 
 @Component({})
 export default class Login extends Vue {
@@ -18,7 +19,7 @@ export default class Login extends Vue {
   }
 
   logout() {
-    if (confirm('Are you sure you want to log out?')) {
+    if (confirm($t('Are you sure you want to log out?'))) {
       this.userService.logOut();
     }
   }

app/components/Mixer.vue

@@ -4,7 +4,7 @@
     <h4
       class="studio-controls__label"
       v-tooltip.bottom="mixerTooltip">
-      Mixer
+      {{ $t('Mixer') }}
     </h4>
     <div>
       <i

app/components/Mixer.vue.ts

@@ -3,16 +3,17 @@ import { Component } from 'vue-property-decorator';
 import { AudioService } from '../services/audio';
 import { Inject } from '../util/injector';
 import MixerItem from './MixerItem.vue';
+import { $t } from 'services/i18n';
 import { Menu } from 'util/menus/Menu';
 
 @Component({
   components: { MixerItem }
 })
 export default class Mixer extends Vue {
   @Inject() audioService: AudioService;
-
-  advancedSettingsTooltip = 'Open advanced audio settings.';
-  mixerTooltip = 'Monitor audio levels. If the bars are moving you are outputting audio.';
+  
+  advancedSettingsTooltip = $t('Open advanced audio settings');
+  mixerTooltip = $t('Monitor audio levels. If the bars are moving you are outputting audio.');
 
   showAdvancedSettings() {
     this.audioService.showAdvancedSettings();
@@ -21,7 +22,7 @@ export default class Mixer extends Vue {
   handleRightClick() {
     const menu = new Menu();
     menu.append({
-      label: 'Unhide All',
+      label: $t('Unhide All'),
       click: () => this.audioService.unhideAllSourcesForCurrentScene()
     });
     menu.popup();

app/components/ModalLayout.vue

@@ -17,12 +17,12 @@
       v-if="showCancel"
       class="button button--default"
       @click="cancel">
-      Cancel
+      {{ $t('Cancel') }}
     </button>
     <button
       class="button button--action"
       @click="doneHandler">
-      Done
+      {{ $t('Done') }}
     </button>
   </div>
   <div v-if="customControls" class="modal-layout-controls">

app/components/NotificationsArea.vue.ts

@@ -7,6 +7,7 @@ import {
   NotificationsService,
   INotification
 } from 'services/notifications';
+import { $t } from 'services/i18n';
 const notificationAudio = require('../../media/sound/ding.wav');
 const QUEUE_TIME = 5000;
 
@@ -32,8 +33,8 @@ export default class NotificationsArea extends Vue {
     notificationsContainer: HTMLDivElement;
   };
 
-  showNotificationsTooltip = 'Click to open your Notifications window';
-  showUnreadNotificationsTooltip = 'Click to read your unread Notifications';
+  showNotificationsTooltip = $t('Click to open your Notifications window');
+  showUnreadNotificationsTooltip = $t('Click to read your unread Notifications');
 
   mounted() {
     this.notifyAudio = new Audio(notificationAudio);

app/components/NotificationsSettings.vue

@@ -2,18 +2,18 @@
   <div>
     <div class="section">
       <button class="button button--action button--sm" @click="showNotifications">
-        Show Notifications
+        {{ $t('Show Notifications') }}
       </button>
       <button class="button button--sm button--soft-warning" @click="restoreDefaults">
-        Restore Defaults
+        {{ $t('Restore Defaults') }}
       </button>
     </div>
     <div class="section">
       <GenericForm v-model="settingsFormData" @input="saveNotificationsSettings" />
     </div>
     <div class="section">
       <h4>
-        Troubleshooter Notifications
+        {{ $t('Troubleshooter Notifications') }}
       </h4>
 
       <GenericForm v-model="troubleshooterFormData"  @input="saveTroubleshooterSettings"/>