{children}
diff --git a/src/js/components/Notifications.js b/src/js/components/Notifications.js
index 2054dc0e..e43dc2fc 100755
--- a/src/js/components/Notifications.js
+++ b/src/js/components/Notifications.js
@@ -10,7 +10,7 @@ import * as snapcastActions from '../services/snapcast/actions';
import Icon from './Icon';
import Loader from './Loader';
import { indexToArray } from '../util/arrays';
-import { i18n, I18n } from '../locale';
+import { I18n } from '../locale';
import ErrorBoundary from './ErrorBoundary';
import Button from './Button';
@@ -135,7 +135,7 @@ const NotificationItems = () => {
dispatch(uiActions.removeNotification(notification_key, true));
dispatch(uiActions.createNotification({
- content: i18n('modal.shared_config.imported'),
+ content:
}));
}
diff --git a/src/js/components/Services.js b/src/js/components/Services.js
index c659fbc8..b128a2c7 100755
--- a/src/js/components/Services.js
+++ b/src/js/components/Services.js
@@ -13,7 +13,7 @@ import Snapcast from './Snapcast';
import * as spotifyActions from '../services/spotify/actions';
import * as lastfmActions from '../services/lastfm/actions';
import * as geniusActions from '../services/genius/actions';
-import { I18n, i18n } from '../locale';
+import { I18n } from '../locale';
import Button from './Button';
import { useSelector } from 'react-redux';
@@ -242,7 +242,8 @@ const Spotify = () => {
{me.name || me.id}
{!authorization && (
- {` (${i18n('settings.services.limited_access')})`}
+ {' '}
+
)}
diff --git a/src/js/components/Sidebar.js b/src/js/components/Sidebar.js
index 2578bfec..2806b609 100755
--- a/src/js/components/Sidebar.js
+++ b/src/js/components/Sidebar.js
@@ -4,7 +4,7 @@ import Link from './Link';
import Icon from './Icon';
import Dropzones from './Fields/Dropzones';
import PinList from './Fields/PinList';
-import { I18n, i18n } from '../locale';
+import { I18n } from '../locale';
import { toggleSidebar } from '../services/ui/actions';
const StatusIcon = () => {
@@ -42,19 +42,25 @@ const StatusIcon = () => {
{!mopidy_connected && (
-
+ <>
+
+
-
+
)}
{!pusher_connected && (
-
+ <>
+
+
-
+
)}
{!snapcast_connected && snapcast_enabled && (
-
+ <>
+
+
-
+
)}
diff --git a/src/js/components/SnapcastClients.js b/src/js/components/SnapcastClients.js
index 82319fa9..a509adcd 100755
--- a/src/js/components/SnapcastClients.js
+++ b/src/js/components/SnapcastClients.js
@@ -4,7 +4,7 @@ import MuteControl from './Fields/MuteControl';
import LatencyControl from './Fields/LatencyControl';
import TextField from './Fields/TextField';
import SelectField from './Fields/SelectField';
-import { I18n, i18n } from '../locale';
+import { I18n } from '../locale';
import Link from './Link';
const SnapcastClients = ({
@@ -61,7 +61,7 @@ const SnapcastClients = ({
{
key: `client_${client.id}_new_group`,
value: group.id,
- label: i18n('snapcast.new_group'),
+ label:
,
},
]}
autosave
diff --git a/src/js/components/Track.js b/src/js/components/Track.js
index 442d212f..8d1207d8 100755
--- a/src/js/components/Track.js
+++ b/src/js/components/Track.js
@@ -7,7 +7,7 @@ import URILink from './URILink';
import ContextMenuTrigger from './ContextMenu/ContextMenuTrigger';
import ErrorBoundary from './ErrorBoundary';
import { isTouchDevice } from '../util/helpers';
-import { I18n, i18n } from '../locale';
+import { I18n } from '../locale';
import AddedFrom from './AddedFrom';
const MiddleColumn = ({
@@ -181,8 +181,12 @@ const Track = ({
{track_middle_column}
{drag_zone}
- {item.is_explicit && {i18n('track.explicit').toUpperCase()}}
- {item.is_playable === false && {i18n('track.unplayable').toUpperCase()}}
+ {item.is_explicit && (
+
+ )}
+ {item.is_playable === false && (
+
+ )}
{(context ?.type === 'album' || context ?.type === 'artist') && item.track_number && (
diff --git a/src/js/index.js b/src/js/index.js
index 146f8d3f..3df984d0 100755
--- a/src/js/index.js
+++ b/src/js/index.js
@@ -6,7 +6,6 @@ import { PersistGate } from 'redux-persist/integration/react';
import { store, persistor } from './store/index';
import App from './App';
-import { _ } from 'core-js';
require('../scss/app.scss');
diff --git a/src/js/locale/index.js b/src/js/locale/index.js
index 6c428127..ea44cd4f 100755
--- a/src/js/locale/index.js
+++ b/src/js/locale/index.js
@@ -1,4 +1,5 @@
import React from 'react';
+import { useSelector } from 'react-redux';
import get from 'lodash/get';
import dictionaries from './dictionaries';
import { titleCase } from '../util/helpers';
@@ -7,8 +8,8 @@ const PARAMS_REG_EXP = '%{(.*?)}';
const paramsRegExp = new RegExp(PARAMS_REG_EXP, 'g');
const languagesAvailable = dictionaries.available;
-const i18n = (path, params = {}, transform) => {
- const dictionary = dictionaries[window.language || 'en'] || dictionaries.en;
+const translate = (path, params = {}, transform, language) => {
+ const dictionary = dictionaries[language || window.language || 'en'] || dictionaries.en;
let value = get((dictionary), path, '');
value = value.replace(
@@ -40,18 +41,26 @@ const I18n = ({
contentAfter,
...params
}) => {
+ const language = useSelector((state) => state.ui.language);
+ if (window.language !== language) window.language = language;
+
if (!children) {
- return i18n(path, params, transform);
+ return translate(path, params, transform, language);
}
return (
<>
{!contentAfter && children}
- {i18n(path, params, transform)}
+ {translate(path, params, transform, language)}
{contentAfter && children}
);
};
+// Prefer usage of I18n *component*, but sometimes you need a raw string, rather than an Object.
+// CAUTION: Directly calling i18n relies on window.language already being populated
+// TODO: Upgrade as much usage of i18n() to as possible.
+const i18n = translate;
+
export default {
I18n,
i18n,
diff --git a/src/js/store/index.js b/src/js/store/index.js
index a3ca61d1..9a34591b 100755
--- a/src/js/store/index.js
+++ b/src/js/store/index.js
@@ -60,7 +60,7 @@ let initialState = {
mopidy: {
connected: false,
host: window.location.hostname,
- port: (window.location.port ? window.location.port : (window.location.protocol === 'https:' ? '443' : '80')),
+ port: window.location.port || (window.location.protocol === 'https:' ? '443' : '80'),
ssl: window.location.protocol === 'https:',
current_server: 'default',
servers: {
@@ -68,7 +68,7 @@ let initialState = {
id: 'default',
name: 'Default',
host: window.location.hostname,
- port: (window.location.port ? window.location.port : (window.location.protocol === 'https:' ? '443' : '80')),
+ port: window.location.port || (window.location.protocol === 'https:' ? '443' : '80'),
ssl: window.location.protocol === 'https:',
},
},
@@ -248,4 +248,4 @@ const store = createStore(
const persistor = persistStore(store);
export default { store, persistor };
-export { store, persistor };
+export { store, persistor, initialState };
diff --git a/src/js/views/Discover/Recommendations.js b/src/js/views/Discover/Recommendations.js
index c2341426..cc7e2eeb 100755
--- a/src/js/views/Discover/Recommendations.js
+++ b/src/js/views/Discover/Recommendations.js
@@ -27,6 +27,7 @@ import { arrayOf, indexToArray } from '../../util/arrays';
import { i18n, I18n } from '../../locale';
import Button from '../../components/Button';
import { decodeUri, encodeUri } from '../../util/format';
+import { withRouter } from '../../util';
class Recommendations extends React.Component {
constructor(props) {
@@ -158,10 +159,8 @@ class Recommendations extends React.Component {
uiActions: {
setWindowTitle,
},
- match: {
- params: {
- uri,
- },
+ params: {
+ uri,
},
} = this.props;
@@ -173,17 +172,13 @@ class Recommendations extends React.Component {
}
componentDidUpdate = ({
- match: {
- params: {
- uri: prevUri,
- },
+ params: {
+ uri: prevUri,
},
}) => {
const {
- match: {
- params: {
- uri,
- },
+ params: {
+ uri,
},
} = this.props;
if (prevUri !== uri) this.handleURLSeeds();
@@ -220,10 +215,8 @@ class Recommendations extends React.Component {
coreActions: {
loadUris,
},
- match: {
- params: {
- uri: uriProp,
- },
+ params: {
+ uri: uriProp,
},
} = this.props;
const uri = decodeUri(uriProp);
@@ -600,4 +593,4 @@ const mapDispatchToProps = (dispatch) => ({
coreActions: bindActionCreators(coreActions, dispatch),
});
-export default connect(mapStateToProps, mapDispatchToProps)(Recommendations);
+export default withRouter(connect(mapStateToProps, mapDispatchToProps)(Recommendations));
diff --git a/src/js/views/Library/Artists.js b/src/js/views/Library/Artists.js
index 86a27da9..14d0e0b0 100755
--- a/src/js/views/Library/Artists.js
+++ b/src/js/views/Library/Artists.js
@@ -163,7 +163,7 @@ class Artists extends React.Component {
const view_options = [
{
value: 'thumbnails',
- label: i18n('fields.filters.thumbnails'),
+ label: ,
},
{
value: 'list',
diff --git a/src/js/views/Settings.js b/src/js/views/Settings.js
index 58698941..f61a7fde 100755
--- a/src/js/views/Settings.js
+++ b/src/js/views/Settings.js
@@ -18,7 +18,7 @@ import * as spotifyActions from '../services/spotify/actions';
import { isHosted } from '../util/helpers';
import { i18n, I18n, languagesAvailable } from '../locale';
import Button from '../components/Button';
-import { dater } from '../components/Dater';
+import Dater, { dater } from '../components/Dater';
const CheckboxSetting = ({
name,
@@ -446,7 +446,8 @@ class Settings extends React.Component {
{window.build}
{window.build && (
- {`${dater('ago', parseInt(window.build, 10) * 1000)} ago`}
+
+ {' ago'}
)}