language switch implementation. Needs more testing

app/locales/en.json

@@ -305,5 +305,6 @@
   "Your transaction was successfully placed in the queue.": "Your transaction was successfully placed in the queue.",
   "Transaction failed": "Transaction failed",
   "Something went wrong": "Something went wrong",
-  "Find movies, music, games, and more": "Find movies, music, games, and more"
+  "Find movies, music, games, and more": "Find movies, music, games, and more",
+  "Wallet": "Wallet"
 }

ui/js/component/app/view.jsx

@@ -20,7 +20,7 @@ class App extends React.Component {
     lbry.balanceSubscribe((balance) => {
       this.props.updateBalance(balance)
     })
-  }
+  }y
 
   render() {
     const {

ui/js/component/header/index.js

@@ -13,7 +13,8 @@ import {
 import Header from './view'
 
 const select = (state) => ({
-  balance: lbry.formatCredits(selectBalance(state), 1)
+  balance: lbry.formatCredits(selectBalance(state), 1),
+  publish: __("Publish"),
 })
 
 const perform = (dispatch) => ({

ui/js/component/header/view.jsx

@@ -6,7 +6,8 @@ export const Header = (props) => {
   const {
     balance,
     back,
-    navigate
+    navigate,
+    publish,
   } = props
 
   return <header id="header">
@@ -23,7 +24,7 @@ export const Header = (props) => {
       <Link onClick={() => navigate('/wallet')}  button="text" icon="icon-bank" label={balance} ></Link>
     </div>
     <div className="header__item">
-      <Link onClick={() => navigate('/publish')} button="primary button--flat" icon="icon-upload" label={__("Publish")} />
+      <Link onClick={() => navigate('/publish')} button="primary button--flat" icon="icon-upload" label={publish} />
     </div>
     <div className="header__item">
       <Link onClick={() => navigate('/downloaded')} button="alt button--flat" icon="icon-folder" />

ui/js/lbry.js

@@ -18,6 +18,7 @@ let lbry = {
     useCustomLighthouseServers: false,
     customLighthouseServers: [],
     showDeveloperMenu: false,
+    language: 'en',
   }
 };
 

ui/js/main.js

@@ -3,9 +3,10 @@ import ReactDOM from 'react-dom';
 import lbry from './lbry.js';
 import lbryio from './lbryio.js';
 
-const i18n = require('y18n')({directory: 'app/locales'});
+const i18n = require('y18n')({directory: 'app/locales'/*, locale: lbry.getClientSetting('language')*/});
 window.__ = i18n.__;
 window.__n = i18n.__n;
+window.i18n = i18n;
 
 import lighthouse from './lighthouse.js';
 import App from 'component/app/index.js';

ui/js/page/settings/view.jsx

@@ -3,6 +3,7 @@ import {FormField, FormRow} from 'component/form.js';
 import SubHeader from 'component/subHeader'
 import lbry from 'lbry.js';
 
+
 class SettingsPage extends React.Component {
   constructor(props) {
     super(props);
@@ -14,6 +15,7 @@ class SettingsPage extends React.Component {
       isMaxDownload: daemonSettings && daemonSettings.max_download != 0,
       showNsfw: lbry.getClientSetting('showNsfw'),
       showUnavailable: lbry.getClientSetting('showUnavailable'),
+      language: lbry.getClientSetting('language'),
     }
   }
 
@@ -68,6 +70,12 @@ class SettingsPage extends React.Component {
     lbry.setClientSetting('showNsfw', event.target.checked);
   }
 
+  onLanguageChange(language) {
+    lbry.setClientSetting('language', language);
+    i18n.setLocale(language);
+    this.setState({language: language})
+  }
+
   onShowUnavailableChange(event) {
 
   }
@@ -185,6 +193,30 @@ class SettingsPage extends React.Component {
                      helper={__("NSFW content may include nudity, intense sexuality, profanity, or other adult content. By displaying NSFW content, you are affirming you are of legal age to view mature content in your country or jurisdiction.  ")} />
           </div>
         </section>
+
+
+        <section className="card">
+          <div className="card__content">
+            <h3>{__("Language")}</h3>
+          </div>
+          <div className="card__content">
+            <div className="form-row">
+              <FormField type="radio"
+                         name="language"
+                         label={__("English")}
+                         onChange={() => { this.onLanguageChange('en') }}
+                         defaultChecked={this.state.language=='en'} />
+            </div>
+            <div className="form-row">
+              <FormField type="radio"
+                         name="language"
+                         label="Serbian"
+                         onChange={() => { this.onLanguageChange('rs') }}
+                         defaultChecked={this.state.language=='rs'} />
+            </div>
+          </div>
+        </section>
+
         <section className="card">
           <div className="card__content">
             <h3>{__("Share Diagnostic Data")}</h3>

ui/js/selectors/app.js

@@ -47,10 +47,13 @@ export const selectPageTitle = createSelector(
       case 'report':
         return __('Report')
       case 'wallet':
+        return __("Wallet")
       case 'send':
+        return __("Send")
       case 'receive':
+        return __("Receive")
       case 'rewards':
-        return page.charAt(0).toUpperCase() + page.slice(1)
+        return __("Rewards")
       case 'show':
         return lbryuri.normalize(params.uri)
       case 'downloaded':