Beginning of translation using react-intl

.babelrc

@@ -1,3 +1,9 @@
 {
-    "presets": ["es2015", "react"]
+    "presets": ["es2015", "react"],
+    "plugins": [
+        ["react-intl", {
+            "messagesDir": "./app/dist/i18n/",
+            "enforceDescriptions": true
+        }]
+    ]
 }

.gitignore

@@ -3,3 +3,5 @@ app/dist/eventsourcePolyfill.js
 app/dist/webpackHotMiddlewareClient.js
 app/dist/*.hot-update.json
 app/dist/*.hot-update.js
+app/dist/i18n/
+app/dist/3.3.js

TODO

@@ -1,9 +1,11 @@
+4. Refactor API + Handle failures
 5. Web player
 6. Homepage
 7. Settings
 8. Search
 9. Discover
 
+
 # CSS
     * Sidebar responsiveness
     * Move CSS in modules
@@ -24,5 +26,4 @@
 
 ## Miscellaneous
     * See TODOs in the code
-    * Uncaught TypeError: this.props.tracks.forEach is not a function
-        => Be more robust, else, getHostNode is null after
+    * Babel transform runtime

app/components/Login.jsx

@@ -1,4 +1,5 @@
 import React, { Component, PropTypes } from "react";
+import { FormattedMessage } from "react-intl";
 
 export class LoginForm extends Component {
     constructor (props) {
@@ -89,7 +90,7 @@ export class LoginForm extends Component {
                                     <div className="row">
                                         <div className="col-sm-6 col-xs-12 checkbox">
                                             <label id="rememberMeLabel">
-                                                <input type="checkbox" ref="rememberMe" defaultChecked={this.props.rememberMe} aria-labelledby="rememberMeLabel" /> Remember me
+                                                <input type="checkbox" ref="rememberMe" defaultChecked={this.props.rememberMe} aria-labelledby="rememberMeLabel" /> <FormattedMessage id="app.login.rememberMe" description="Remember me checkbox label" defaultMessage="Remember me" />
                                             </label>
                                         </div>
                                         <div className="col-sm-6 col-sm-12 submit text-right">
@@ -123,7 +124,7 @@ export default class Login extends Component {
             <div className="login text-center container-fluid">
                 <h1><img src="./app/assets/img/ampache-blue.png" alt="A"/>mpache</h1>
                 <hr/>
-                <p>Welcome back on Ampache, let"s go!</p>
+                <p><FormattedMessage id="app.login.greeting" description="Greeting to welcome the user to the app" defaultMessage="Welcome back on Ampache, let's go!" /></p>
                 <div className="col-sm-9 col-sm-offset-2 col-md-6 col-md-offset-3">
                     <LoginForm onSubmit={this.props.onSubmit} username={this.props.username} endpoint={this.props.endpoint} rememberMe={this.props.rememberMe} isAuthenticating={this.props.isAuthenticating} error={this.props.error} info={this.props.info} />
                 </div>

app/containers/Root.jsx

@@ -1,15 +1,18 @@
 import React, { Component, PropTypes } from "react";
 import { Provider } from "react-redux";
 import { Router } from "react-router";
+import { IntlProvider } from "react-intl";
 
 import routes from "../routes";
 
 export default class Root extends Component {
     render() {
-        const { store, history } = this.props;
+        const { locale, messages, defaultLocale, store, history } = this.props;
         return (
             <Provider store={store}>
+                <IntlProvider locale={locale} messages={messages} defaultLocale={defaultLocale}>
                     <Router history={history} routes={routes} />
+                </IntlProvider>
             </Provider>
         );
     }
@@ -17,5 +20,8 @@ export default class Root extends Component {
 
 Root.propTypes = {
     store: PropTypes.object.isRequired,
-    history: PropTypes.object.isRequired
+    history: PropTypes.object.isRequired,
+    locale: PropTypes.string.isRequired,
+    messages: PropTypes.object.isRequired,
+    defaultLocale: PropTypes.string.isRequired
 };

app/dist/reactIntlMessages.json

@@ -0,0 +1 @@
+[]

app/locales/en-US/index.js

@@ -0,0 +1,7 @@
+module.exports = {
+    "app": {
+        "login": {
+            "greeting": "TODO"
+        }
+    }
+};

app/locales/fr-FR/index.js

@@ -0,0 +1,3 @@
+module.exports = {
+    "app.login.greeting": "TODO",
+};

app/locales/index.js

@@ -0,0 +1,4 @@
+module.exports = {
+    "en-US": require("./en-US"),
+    "fr-FR": require("./fr-FR")
+};

app/utils/index.js

@@ -1,4 +1,5 @@
 export * from "./jquery";
+export * from "./locale";
 export * from "./misc";
 export * from "./reducers";
 export * from "./string";

app/utils/locale.js

@@ -0,0 +1,21 @@
+export function getBrowserLocale () {
+    var lang;
+
+    if (navigator.languages) {
+        // chrome does not currently set navigator.language correctly https://code.google.com/p/chromium/issues/detail?id=101138
+        // but it does set the first element of navigator.languages correctly
+        lang = navigator.languages[0];
+    } else if (navigator.userLanguage) {
+        // IE only
+        lang = navigator.userLanguage;
+    } else {
+        // as of this writing the latest version of firefox + safari set this correctly
+        lang = navigator.language;
+    }
+
+    // Some browsers does not return uppercase for second part
+    var locale = lang.split("-");
+    locale = locale[1] ? `${locale[0]}-${locale[1].toUpperCase()}` : lang;
+
+    return locale;
+}

index.all.js

@@ -9,17 +9,32 @@ import ReactDOM from "react-dom";
 import { hashHistory } from "react-router";
 import { syncHistoryWithStore } from "react-router-redux";
 
+// i18n
+import { addLocaleData } from "react-intl";
+import en from "react-intl/locale-data/en";
+import fr from "react-intl/locale-data/fr";
+
 import configureStore from "./app/store/configureStore";
 
+import { getBrowserLocale } from "./app/utils";
+import rawMessages from "./app/locales";
+
 const store = configureStore();
 const history = syncHistoryWithStore(hashHistory, store);
 
 const rootElement = document.getElementById("root");
 
+// i18n
+const onWindowIntl = () => {
+    addLocaleData([...en, ...fr]);
+    const locale = getBrowserLocale();
+    var strings = rawMessages[locale] ? rawMessages[locale] : rawMessages["en-US"];
+    strings = Object.assign(rawMessages["en-US"], strings);
+
     let render = () => {
         const Root = require("./app/containers/Root").default;
         ReactDOM.render(
-        <Root store={store} history={history} />,
+            <Root store={store} history={history} locale={locale} defaultLocale="en-US" messages={strings} />,
             rootElement
         );
     };
@@ -48,3 +63,19 @@ if (module.hot) {
     }
 
     render();
+};
+
+if (!window.Intl) {
+    require.ensure([
+        "intl",
+        "intl/locale-data/jsonp/en.js",
+        "intl/locale-data/jsonp/fr.js"
+    ], function (require) {
+        require("intl");
+        require("intl/locale-data/jsonp/en.js");
+        require("intl/locale-data/jsonp/fr.js");
+        onWindowIntl();
+    });
+} else {
+    onWindowIntl();
+}

package.json

@@ -13,11 +13,13 @@
   "dependencies": {
     "babel-polyfill": "^6.9.1",
     "babel-preset-es2015": "^6.9.0",
+    "babel-runtime": "^6.11.6",
     "bootstrap": "^3.3.6",
     "fuse.js": "^2.3.0",
     "html5shiv": "^3.7.3",
     "humps": "^1.1.0",
     "imagesloaded": "^4.1.0",
+    "intl": "^1.2.4",
     "isomorphic-fetch": "^2.2.1",
     "isotope-layout": "^3.0.1",
     "jquery": "^3.1.0",
@@ -26,6 +28,7 @@
     "lodash": "^4.13.1",
     "react": "^15.2.0",
     "react-dom": "^15.2.0",
+    "react-intl": "^2.1.3",
     "react-redux": "^4.4.5",
     "react-router": "^2.5.2",
     "react-router-redux": "^4.0.5",
@@ -37,6 +40,8 @@
     "autoprefixer": "^6.3.7",
     "babel-core": "^6.10.4",
     "babel-loader": "^6.2.4",
+    "babel-plugin-react-intl": "^2.1.3",
+    "babel-plugin-transform-runtime": "^6.12.0",
     "babel-preset-react": "^6.11.1",
     "css-loader": "^0.23.1",
     "doiuse": "^2.4.1",
@@ -51,6 +56,7 @@
     "postcss-reporter": "^1.4.1",
     "precss": "^1.4.0",
     "react-a11y": "^0.3.3",
+    "react-intl-webpack-plugin": "0.0.3",
     "redbox-react": "^1.2.10",
     "redux-logger": "^2.6.1",
     "style-loader": "^0.13.1",

webpack.config.base.js

@@ -1,6 +1,7 @@
 var path = require("path");
 var webpack = require("webpack");
 
+var ReactIntlPlugin=require("react-intl-webpack-plugin");
 var ExtractTextPlugin = require("extract-text-webpack-plugin");
 var postcssReporter = require("postcss-reporter");
 var doiuse = require("doiuse");
@@ -11,7 +12,7 @@ var browsers = ["ie >= 9", "> 1%", "last 3 versions", "not op_mini all"];
 
 module.exports = {
     entry: {
-        "index": "./index.js",
+        "index": ["babel-polyfill", "./index.js"],
         "fix.ie9": "./fix.ie9.js"
     },
 
@@ -34,7 +35,10 @@ module.exports = {
             {
                 test: /\.jsx?$/,
                 exclude: /node_modules/,
-                loaders: ["babel"],
+                loader: "babel",
+                query: {
+                    "cacheDirectory": true
+                },
                 include: __dirname
             },
             // Do not postcss vendor modules
@@ -76,6 +80,7 @@ module.exports = {
     },
 
     plugins: [
+        new ReactIntlPlugin(),
         new webpack.ProvidePlugin({
             $: "jquery",
             jQuery: "jquery"