Merge pull request nukeop#344 from charjac/FEATURE/I18N

feat(i18n): integrate i18next
ThraxHamilton · Jun 5, 2019 · 4be07ad · 4be07ad
2 parents fdbdc3a + 6cee150
commit 4be07ad
Show file tree

Hide file tree

Showing 82 changed files with 1,418 additions and 1,359 deletions.
diff --git a/.babelrc b/.babelrc
@@ -4,7 +4,8 @@
     "react"
   ],
   "plugins": [
-    'transform-class-properties',
-    'transform-object-rest-spread'
+    "transform-class-properties",
+    "transform-object-rest-spread",
+    "transform-decorators-legacy"
     ]
 }
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -4,6 +4,10 @@ module.exports = {
     "commonjs": true,
     "es6": true
   },
+  "globals": {
+    "process": true,
+    "Raven": true
+  },
   "extends": "eslint:recommended",
   "parser": "babel-eslint",
   "parserOptions": {

diff --git a/.gitignore b/.gitignore
@@ -65,4 +65,9 @@ bundle.electron.js
 # Prettier configuration file
 .prettierrc
 
-package-lock.json
+# npm
+package-lock.json
+
+# vscode
+.vscode/
+tsconfig.json
diff --git a/app/App.js b/app/App.js
@@ -6,6 +6,7 @@ import { NavLink, withRouter } from 'react-router-dom';
 import classnames from 'classnames';
 import _ from 'lodash';
 import Sound from 'react-hifi';
+import { withTranslation } from 'react-i18next';
 
 import * as Actions from './actions';
 import * as PlayerActions from './actions/player';
@@ -54,6 +55,7 @@ import TrackInfo from './components/TrackInfo';
 import WindowControls from './components/WindowControls';
 import VolumeControls from './components/VolumeControls';
 
+@withTranslation('app')
 class App extends React.Component {
   constructor(props) {
     super(props);
@@ -132,6 +134,8 @@ class App extends React.Component {
   }
 
   renderSidebarMenu (settings, toggleOption) {
+    const { t } = this.props;
+
     return (
       <VerticalPanel
         className={classnames(styles.left_panel, {
@@ -151,24 +155,24 @@ class App extends React.Component {
           <SidebarMenuCategoryHeader compact={ settings.compactMenuBar }>
             Main
           </SidebarMenuCategoryHeader>
-          {this.renderNavLink('dashboard', 'dashboard', 'Dashboard', settings)}
-          {this.renderNavLink('downloads', 'download', 'Downloads', settings)}
-          {this.renderNavLink('lyrics', 'microphone', 'Lyrics', settings)}
-          {this.renderNavLink('plugins', 'flask', 'Plugins', settings)}
-          {this.renderNavLink('search', 'search', 'Search Results', settings)}
-          {this.renderNavLink('settings', 'cogs', 'Settings', settings)}
-          {this.renderNavLink('equalizer', 'sliders', 'Equalizer', settings)}
+          {this.renderNavLink('dashboard', 'dashboard', t('dashboard'), settings)}
+          {this.renderNavLink('downloads', 'download', t('downloads'), settings)}
+          {this.renderNavLink('lyrics', 'microphone', t('lyrics'), settings)}
+          {this.renderNavLink('plugins', 'flask', t('plugins'), settings)}
+          {this.renderNavLink('search', 'search', t('search'), settings)}
+          {this.renderNavLink('settings', 'cogs', t('settings'), settings)}
+          {this.renderNavLink('equalizer', 'sliders', t('equalizer'), settings)}
 
           <SidebarMenuCategoryHeader compact={ settings.compactMenuBar }>
-            Collection
+            {t('collection')}
           </SidebarMenuCategoryHeader>
-          {this.renderNavLink('favorites/tracks', 'star', 'Favorite tracks', settings)}
-          {this.renderNavLink('library', 'file-sound-o', 'Local library', settings)}
+          {this.renderNavLink('favorites/tracks', 'star', t('favorite'), settings)}
+          {this.renderNavLink('library', 'file-sound-o', t('library'), settings)}
 
           {
             !_.isEmpty(this.props.playlists) &&
             <SidebarMenuCategoryHeader compact={ settings.compactMenuBar }>
-            Playlists
+              {t('playlists')}
             </SidebarMenuCategoryHeader>
           }
           <PlaylistsSubMenu

diff --git a/app/components/AlbumCover/AlbumInfo/index.js b/app/components/AlbumCover/AlbumInfo/index.js
@@ -2,27 +2,18 @@ import React from 'react';
 
 import styles from './styles.css';
 
-class AlbumInfo extends React.Component {
+const AlbumInfo = () => (
+  <div className={styles.album_info_container}>
+    {this.props.nameOnly ? (
+      <div className={styles.title_container}>{this.props.artist}</div>
+    ) : (
+      <div className={styles.title_container}>{this.props.title}</div>
+    )}
 
-  render() {
-    return (
-      <div className={styles.album_info_container}>
-        {
-          this.props.nameOnly
-            ?(
-              <div className={styles.title_container}>{this.props.artist}</div>
-            )
-            : <div className={styles.title_container}>{this.props.title}</div>
-        }
-
-        {
-          !this.props.nameOnly
-            ? <div className={styles.artist_container}>{this.props.artist}</div>
-            : null
-        }
-      </div>
-    );
-  }
-}
+    {!this.props.nameOnly ? (
+      <div className={styles.artist_container}>{this.props.artist}</div>
+    ) : null}
+  </div>
+);
 
 export default AlbumInfo;
diff --git a/app/components/AlbumCover/AlbumOverlay/index.js b/app/components/AlbumCover/AlbumOverlay/index.js
@@ -5,23 +5,18 @@ import Spacer from '../../Spacer';
 
 import styles from './styles.css';
 
-class AlbumOverlay extends React.Component {
-
-  render() {
-    return (
-      <div className={styles.overlay_container}>
-        <Spacer />
-        <a
-          onClick={this.props.handlePlay}
-          href='#'
-          className={styles.overlay_play_button}
-        >
-          <FontAwesome name='play' />
-        </a>
-        <Spacer />
-      </div>
-    );
-  }
-}
+const AlbumOverlay = () => (
+  <div className={styles.overlay_container}>
+    <Spacer />
+    <a
+      onClick={this.props.handlePlay}
+      href='#'
+      className={styles.overlay_play_button}
+    >
+      <FontAwesome name='play' />
+    </a>
+    <Spacer />
+  </div>
+);
 
 export default AlbumOverlay;
diff --git a/app/components/AlbumCover/index.js b/app/components/AlbumCover/index.js
@@ -6,39 +6,30 @@ import styles from './styles.css';
 import AlbumInfo from './AlbumInfo';
 import AlbumOverlay from './AlbumOverlay';
 
-class AlbumCover extends React.Component {
-
-  render() {
-    let style = {};
-
-    if (this.props.nameOnly) {
-      style = {
-        backgroundImage: `url(${this.props.cover})`,
-        height: '250px'
-      };
-    }
-
-    return (
-      <div style={style} className={styles.album_cover_container}>
-        <AlbumOverlay
-          handlePlay={this.props.handlePlay}
-        />
-
-        {
-          this.props.nameOnly
-            ? null
-            : <img src={this.props.cover}/>
-        }
-
-        <AlbumInfo
-          artist={this.props.artist}
-          title={this.props.title}
-          nameOnly={this.props.nameOnly}
-        />
-      </div>
-    );
+const AlbumCover = ({ artist, cover, nameOnly, handlePlay, title }) => {
+  let style = {};
+
+  if (nameOnly) {
+    style = {
+      backgroundImage: `url(${cover})`,
+      height: '250px'
+    };
   }
-}
+
+  return (
+    <div style={style} className={styles.album_cover_container}>
+      <AlbumOverlay handlePlay={handlePlay} />
+
+      {nameOnly ? null : <img src={cover} />}
+
+      <AlbumInfo
+        artist={artist}
+        title={title}
+        nameOnly={nameOnly}
+      />
+    </div>
+  );
+};
 
 AlbumCover.propTypes = {
   nameOnly: PropTypes.bool,

diff --git a/app/components/AlbumList/index.js b/app/components/AlbumList/index.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import {Dimmer, Image, Loader} from 'semantic-ui-react';
+import {Dimmer, Loader} from 'semantic-ui-react';
 import Card from '../Card';
 
 import styles from './styles.scss';

diff --git a/app/components/AlbumView/index.js b/app/components/AlbumView/index.js
@@ -2,6 +2,7 @@ import React from 'react';
 import FontAwesome from 'react-fontawesome';
 import { Dimmer, Loader } from 'semantic-ui-react';
 import _ from 'lodash';
+import { withTranslation } from 'react-i18next';
 
 import ContextPopup from '../ContextPopup';
 import TrackRow from '../TrackRow';
@@ -10,6 +11,7 @@ import * as Utils from '../../utils';
 import styles from './styles.scss';
 import artPlaceholder from '../../../resources/media/art_placeholder.png';
 
+@withTranslation('album')
 class AlbumView extends React.Component {
   constructor(props) {
     super(props);
@@ -225,7 +227,7 @@ class AlbumView extends React.Component {
           href='#'
           onClick={() => this.addAlbumToQueue(album)}
           className={styles.add_button}
-          aria-label='Add album to queue'
+          aria-label={this.props.t('queue')}
         >
           <FontAwesome name='plus' /> Add to queue
         </a>

diff --git a/app/components/ArtistView/PopularTracks/index.js b/app/components/ArtistView/PopularTracks/index.js
@@ -1,13 +1,15 @@
 import React from 'react';
 import FontAwesome from 'react-fontawesome';
 import cx from 'classnames';
+import { withTranslation } from 'react-i18next';
 
 import TrackRow from '../../TrackRow';
 import artPlaceholder from '../../../../resources/media/art_placeholder.png';
 
 import trackRowStyles from '../../TrackRow/styles.scss';
 import styles from './styles.scss';
 
+@withTranslation('artist')
 class PopularTracks extends React.Component {
   constructor(props) {
     super(props);
@@ -40,15 +42,15 @@ class PopularTracks extends React.Component {
             });
         }}
         className={styles.add_button}
-        aria-label='Add all tracks to queue'
+        aria-label={this.props.t('queue')}
       >
         <FontAwesome name='plus' /> Add all
       </a>
     );
   }
 
   render () {
-    let { artist, tracks } = this.props;
+    let { artist, tracks, t } = this.props;
 
     return (
       <div className={cx(
@@ -63,8 +65,8 @@ class PopularTracks extends React.Component {
               <th>
                 <FontAwesome name='photo' />
               </th>
-              <th>Title</th>
-              <th>Play Counts</th>
+              <th>{t('title')}</th>
+              <th>{t('count')}</th>
             </tr>
           </thead>
           <tbody>

diff --git a/app/components/ArtistView/SimilarArtists/index.js b/app/components/ArtistView/SimilarArtists/index.js
@@ -1,9 +1,9 @@
 import React from 'react';
+import { withTranslation } from 'react-i18next';
 
 import styles from './styles.scss';
 
-const _ = require('lodash');
-
+@withTranslation('artist')
 class SimilarArtists extends React.Component {
   constructor(props) {
     super(props);
@@ -17,7 +17,7 @@ class SimilarArtists extends React.Component {
     return (
       <div className={styles.similar_artists_container}>
         <div className={styles.header}>
-          Similar artists
+          {this.props.t('similar')}
         </div>
         {
           this.props.artists.map((artist, index) => {

diff --git a/app/components/ArtistView/index.js b/app/components/ArtistView/index.js
@@ -1,6 +1,7 @@
 import React from 'react';
 import _ from 'lodash';
 import { Dimmer, Loader } from 'semantic-ui-react';
+import { withTranslation } from 'react-i18next';
 import AlbumList from '../AlbumList';
 import ArtistTags from './ArtistTags';
 import SimilarArtists from './SimilarArtists';
@@ -9,6 +10,7 @@ import PopularTracks from './PopularTracks';
 import styles from './styles.scss';
 import artPlaceholder from '../../../resources/media/art_placeholder.png';
 
+@withTranslation('artist')
 class ArtistView extends React.Component {
   constructor(props) {
     super(props);
@@ -51,7 +53,7 @@ class ArtistView extends React.Component {
                   <span
                     className={styles.on_tour}
                   >
-                      On tour
+                    {this.props.t('tour')}
                   </span>
               }
             </div>