feat: Localization - simple localization for Sisyfos

olzzon · Jun 2, 2020 · 85a3442 · 85a3442
1 parent 39ad194
commit 85a3442
Show file tree

Hide file tree

Showing 7 changed files with 132 additions and 35 deletions.
diff --git a/client/components/App.tsx b/client/components/App.tsx
@@ -1,15 +1,18 @@
 import * as React from 'react'
 import { connect } from 'react-redux'
+import { compose } from 'redux'
 import { IStore } from '../../server/reducers/indexReducer'
 
 import '../assets/css/App.css'
 import Channels from './Channels'
 import Settings from './Settings'
 import Storage from './RoutingStorage'
 import MiniChannels from './MiniChannels'
+import { withTranslation } from 'react-i18next'
 
 export interface IAppProps {
     store: IStore
+    t: any
 }
 
 class App extends React.Component<IAppProps> {
@@ -88,7 +91,7 @@ class App extends React.Component<IAppProps> {
             <div>
                 {!this.props.store.settings[0].serverOnline ? (
                     <div className="server-offline">
-                        TRYING TO CONNECT TO SISYFOS SERVER
+                        { this.props.t('TRYING TO CONNECT TO SISYFOS SERVER')}
                     </div>
                 ) : null}
                 {!window.location.search.includes('minimonitor=1') ? (
@@ -106,10 +109,11 @@ class App extends React.Component<IAppProps> {
     }
 }
 
-const mapStateToProps = (state: any): IAppProps => {
+const mapStateToProps = (state: any, t: any): IAppProps => {
     return {
         store: state,
+        t: t
     }
 }
 
-export default connect<any, IAppProps>(mapStateToProps)(App) as any
+export default compose(connect<any, IAppProps>(mapStateToProps), withTranslation()) (App) as any
diff --git a/client/components/Channel.tsx b/client/components/Channel.tsx
@@ -3,7 +3,7 @@ import * as React from 'react'
 import * as ClassNames from 'classnames'
 import { connect } from 'react-redux'
 import VuMeter from './VuMeter'
-import { Store } from 'redux'
+import { Store, compose } from 'redux'
 import Nouislider from 'nouislider-react'
 import '../assets/css/NoUiSlider.css'
 
@@ -22,8 +22,10 @@ import { IFader } from '../../server/reducers/fadersReducer'
 import { IChannels } from '../../server/reducers/channelsReducer'
 import { ISettings } from '../../server/reducers/settingsReducer'
 import { TOGGLE_SHOW_CHAN_STRIP } from '../../server/reducers/settingsActions'
+import { withTranslation } from 'react-i18next'
 
 interface IChannelInjectProps {
+    t: any
     channels: IChannels
     fader: IFader
     settings: ISettings
@@ -164,7 +166,7 @@ class Channel extends React.Component<
                     this.handleVo()
                 }}
             >
-                VO
+                {this.props.t('VO')}
             </button>
         )
     }
@@ -181,9 +183,9 @@ class Channel extends React.Component<
                 }}
             >
                 {this.props.settings.automationMode ? (
-                    <React.Fragment>CUE NEXT</React.Fragment>
+                    <React.Fragment>{this.props.t('CUE NEXT')}</React.Fragment>
                 ) : (
-                    <React.Fragment>PST</React.Fragment>
+                    <React.Fragment>{this.props.t('PST')}</React.Fragment>
                 )}
             </button>
         )
@@ -216,7 +218,7 @@ class Channel extends React.Component<
                     this.handlePfl()
                 }}
             >
-                PFL
+                {this.props.t('PFL')}
             </button>
         )
     }
@@ -310,6 +312,7 @@ class Channel extends React.Component<
 
 const mapStateToProps = (state: any, props: any): IChannelInjectProps => {
     return {
+        t: props.t,
         channels: state.channels[0].channel,
         fader: state.faders[0].fader[props.faderIndex],
         settings: state.settings[0],
@@ -319,6 +322,7 @@ const mapStateToProps = (state: any, props: any): IChannelInjectProps => {
     }
 }
 
-export default connect<any, IChannelInjectProps, any>(mapStateToProps)(
-    Channel
-) as any
+export default compose(
+    connect<any, IChannelInjectProps, any>(mapStateToProps),
+    withTranslation()
+)(Channel) as any
diff --git a/client/i18n.ts b/client/i18n.ts
@@ -0,0 +1,42 @@
+import i18n from 'i18next'
+import LanguageDetector from 'i18next-browser-languagedetector'
+
+i18n.use(LanguageDetector).init({
+    resources: {
+        en: {
+            translations: {
+                'TRYING TO CONNECT TO SISYFOS SERVER':
+                    'TRYING TO CONNECT TO SISYFOS SERVER',
+                VO: 'VO',
+                PFL: 'PFL',
+                'CUE NEXT': 'CUE NEXT',
+                PST: 'PST',
+            },
+        },
+        nn: {
+            translations: {
+                VO: 'STK',
+            },
+        },
+    },
+    whitelist: ['en', 'nn'],
+    fallbackLng: 'en',
+    debug: true,
+
+    // have a common namespace used around the full app
+    ns: ['translations'],
+    defaultNS: 'translations',
+
+    keySeparator: false, // we use content as keys
+
+    interpolation: {
+        escapeValue: false, // not needed for react!!
+        formatSeparator: ',',
+    },
+
+    react: {
+        wait: true,
+    },
+})
+
+export default i18n
diff --git a/client/index.tsx b/client/index.tsx
@@ -13,6 +13,9 @@ import {
     SOCKET_GET_CCG_LIST,
 } from '../server/constants/SOCKET_IO_DISPATCHERS'
 
+import { I18nextProvider } from 'react-i18next'
+import i18n from './i18n'
+
 declare global {
     interface Window {
         storeRedux: any
@@ -42,7 +45,9 @@ window.socketIoClient.emit('get-mixerprotocol', 'get selected mixerprotocol')
 
 ReactDom.render(
     <ReduxProvider store={storeRedux}>
-        <App />
+        <I18nextProvider i18n={i18n}>
+            <App />
+        </I18nextProvider>
     </ReduxProvider>,
     document.getElementById('root')
 )
diff --git a/package.json b/package.json
@@ -61,11 +61,14 @@
         "express": "^4.17.1",
         "express-csp-header": "^3.0.0",
         "http": "^0.0.0",
+        "i18next": "^19.4.5",
+        "i18next-browser-languagedetector": "^4.2.0",
         "node-emberplus": "https://github.com/olzzon/node-emberplus.git#feat/export-ber",
         "nouislider-react": "^3.3.7",
         "osc": "https://github.com/olzzon/tv2-osc.js-no-serialport.git",
         "react": "^16.1.1",
         "react-dom": "^16.10.1",
+        "react-i18next": "^11.5.0",
         "react-redux": "^7.1.1",
         "react-select": "^3.0.6",
         "react-slider": "^1.0.3",

diff --git a/server/tsconfig.json b/server/tsconfig.json
@@ -1,23 +1,21 @@
-{
-    "compilerOptions": {
-      // Target latest version of ECMAScript.
-      "target": "ES5",
-      // Search under node_modules for non-relative imports.
-      "moduleResolution": "node",
-      // Process & infer types from .js files.
-      "allowJs": false,
-      // Enable strictest settings like strictNullChecks & noImplicitAny.
-      "strict": false,
-      // Disallow features that require cross-file information for emit.
-      "isolatedModules": false,
-      // Import non-ES modules as default imports.
-      "esModuleInterop": true,
-      // Check for "any" while converting to TS this can be turned off.
-      "noImplicitAny": true,
-      "module": "commonjs",
-      "outDir": "../dist/server",
-    },
-    "include": [
-      "*"
-  ]
-}
+{
+    "compilerOptions": {
+        // Target latest version of ECMAScript.
+        "target": "ES5",
+        // Search under node_modules for non-relative imports.
+        "moduleResolution": "node",
+        // Process & infer types from .js files.
+        "allowJs": false,
+        // Enable strictest settings like strictNullChecks & noImplicitAny.
+        "strict": false,
+        // Disallow features that require cross-file information for emit.
+        "isolatedModules": false,
+        // Import non-ES modules as default imports.
+        "esModuleInterop": true,
+        // Check for "any" while converting to TS this can be turned off.
+        "noImplicitAny": true,
+        "module": "commonjs",
+        "outDir": "../dist/server"
+    },
+    "include": ["*"]
+}
diff --git a/yarn.lock b/yarn.lock
@@ -819,6 +819,13 @@
   dependencies:
     regenerator-runtime "^0.13.4"
 
+"@babel/runtime@^7.3.1":
+  version "7.10.2"
+  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.10.2.tgz#d103f21f2602497d38348a32e008637d506db839"
+  integrity sha512-6sF3uQw2ivImfVIl62RZ7MXhO2tap69WeWK57vAaimT6AZbE4FbqjdEJIN1UqoD6wI6B+1n9UiagafH1sxjOtg==
+  dependencies:
+    regenerator-runtime "^0.13.4"
+
 "@babel/template@^7.3.3", "@babel/template@^7.4.0", "@babel/template@^7.7.4", "@babel/template@^7.8.3", "@babel/template@^7.8.6":
   version "7.8.6"
   resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.8.6.tgz#86b22af15f828dfb086474f964dcc3e39c43ce2b"
@@ -4800,6 +4807,13 @@ html-minifier@^3.2.3:
     relateurl "0.2.x"
     uglify-js "3.4.x"
 
+[email protected]:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/html-parse-stringify2/-/html-parse-stringify2-2.0.1.tgz#dc5670b7292ca158b7bc916c9a6735ac8872834a"
+  integrity sha1-3FZwtyksoVi3vJFsmmc1rIhyg0o=
+  dependencies:
+    void-elements "^2.0.1"
+
 html-webpack-plugin@^3.2.0:
   version "3.2.0"
   resolved "https://registry.yarnpkg.com/html-webpack-plugin/-/html-webpack-plugin-3.2.0.tgz#b01abbd723acaaa7b37b6af4492ebda03d9dd37b"
@@ -4892,6 +4906,20 @@ husky@^4.2.5:
     slash "^3.0.0"
     which-pm-runs "^1.0.0"
 
+i18next-browser-languagedetector@^4.2.0:
+  version "4.2.0"
+  resolved "https://registry.yarnpkg.com/i18next-browser-languagedetector/-/i18next-browser-languagedetector-4.2.0.tgz#82e35d31f88a1d7c2b6d5913bf8c8481cd40aafb"
+  integrity sha512-qRSCBWgDUSqVQb3sTxkDC+ImYLhF+wB387Y1RpOcJvyex+V3abi+W83n4Awy+dx719AOBbKTy97FjrUGrAhbyw==
+  dependencies:
+    "@babel/runtime" "^7.5.5"
+
+i18next@^19.4.5:
+  version "19.4.5"
+  resolved "https://registry.yarnpkg.com/i18next/-/i18next-19.4.5.tgz#f9ea8bbb48d1ec66bc3436f0bb74a16b11821e11"
+  integrity sha512-aLvSsURoupi3x9IndmV6+m3IGhzLzhYv7Gw+//K3ovdliyGcFRV0I1MuddI0Bk/zR7BG1U+kJOjeHFUcUIdEgg==
+  dependencies:
+    "@babel/runtime" "^7.3.1"
+
 [email protected]:
   version "0.4.24"
   resolved "https://registry.yarnpkg.com/iconv-lite/-/iconv-lite-0.4.24.tgz#2022b4b25fbddc21d2f524974a474aafe733908b"
@@ -8198,6 +8226,14 @@ react-dom@^16.10.1:
     prop-types "^15.6.2"
     scheduler "^0.19.0"
 
+react-i18next@^11.5.0:
+  version "11.5.0"
+  resolved "https://registry.yarnpkg.com/react-i18next/-/react-i18next-11.5.0.tgz#84a9bb535d44c0c1b336b94de164515c2cc2a714"
+  integrity sha512-V6rUT7MzYBdFCgUrhfr78FHRfnY3CFoR75ET9EP5Py5UPHKyaGiK1MvPx03TesLwsmIaVHlRFU/WLzqCedXevA==
+  dependencies:
+    "@babel/runtime" "^7.3.1"
+    html-parse-stringify2 "2.0.1"
+
 react-input-autosize@^2.2.2:
   version "2.2.2"
   resolved "https://registry.yarnpkg.com/react-input-autosize/-/react-input-autosize-2.2.2.tgz#fcaa7020568ec206bc04be36f4eb68e647c4d8c2"
@@ -10111,6 +10147,11 @@ vm-browserify@^1.0.1:
   resolved "https://registry.yarnpkg.com/vm-browserify/-/vm-browserify-1.1.2.tgz#78641c488b8e6ca91a75f511e7a3b32a86e5dda0"
   integrity sha512-2ham8XPWTONajOR0ohOKOHXkm3+gaBmGut3SRuu75xLd/RRaY6vqgh8NBYYk7+RW3u5AtzPQZG8F10LHkl0lAQ==
 
+void-elements@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/void-elements/-/void-elements-2.0.1.tgz#c066afb582bb1cb4128d60ea92392e94d5e9dbec"
+  integrity sha1-wGavtYK7HLQSjWDqkjkulNXp2+w=
+
 w3c-hr-time@^1.0.1:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/w3c-hr-time/-/w3c-hr-time-1.0.2.tgz#0a89cdf5cc15822df9c360543676963e0cc308cd"